:root {
    --white: #ffffff;
    --black: #000000;
    --theme-colour1: #057DC4;
    --theme-colour2: #247AC8;
    --lightBg: #f3f3f3;
    --light2Bg: #dddddd;
    --lightDrkBg: #aeaeae;
    --container-width: 1266px;
    --container-width2: 1450px;
    --container-width3: 1680px;
    --container-width-login: 1536px;
    --c2d: #2D2D2D;
    --c70: #707070;
    --theme-text-colour: #434343
}

html {
    scroll-behavior: smooth
}

html, body {
    margin: 0;
    padding: 0
}

*, *::before, *::after {
    box-sizing: border-box
}

body {
    font-family: 'Rubik', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    color: #2D2D2D;
    font-style: normal
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    transition: ease-in-out .4s
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--theme-text-colour)
}

.mb-0 {
    margin-bottom: 0px !important
}

.pt-0 {
    padding-top: 0px !important
}

.wrdBrk {
    word-break: break-word
}

.d-none {
    display: none !important
}

.header-widget {
    width: 100%;
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 999999;
    box-shadow: 1px 1px 1px #eae4e4
}

    .header-widget .header-container {
        height: 65px;
        display: flex;
        justify-content: space-between;
        width: var(--container-width);
        margin: 0 auto
    }

@media (max-width: 1279px) {
    .header-widget .header-container {
        width: 100%
    }
}

@media (max-width: 1199px) {
    .header-widget .header-container {
        padding-top: 10px;
        height: auto
    }
}

@media (max-width: 680px) {
    .header-widget .header-container {
        padding-bottom: 5px
    }
}

@media (max-width: 480px) {
    .header-widget .header-container {
        padding-top: 0px;
        padding-bottom: 0px
    }
}

.header-widget .header-container .logo {
    display: flex;
    align-items: center
}

    .header-widget .header-container .logo a {
        display: flex;
        justify-content: center
    }

@media (max-width: 680px) {
    .header-widget .header-container .logo a.lg-logo {
        display: none !important
    }
}

@media (min-width: 681px) {
    .header-widget .header-container .logo a.sm-logo {
        display: none !important
    }
}

.header-widget .header-container .logo a img {
    width: 190px;
    height: 54px
}

.header-widget .header-container .navigation-row {
    display: flex;
    align-items: center
}

@media (max-width: 1199px) {
    .header-widget .header-container .navigation-row {
        max-width: 320px;
        flex: 100%;
        order: 1;
        padding: 35px;
        padding-top: 45px;
        align-items: flex-start;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 999;
        -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
        transition: opacity 0.6s, transform 0.6s;
        -webkit-transform: translate3d(-120%, 0, 0);
        transform: translate3d(-120%, 0, 0)
    }

        .header-widget .header-container .navigation-row.open {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
}

@media (max-width: 1199px) and (max-width: 480px) {
    .header-widget .header-container .navigation-row.open {
        display: flex;
        flex-direction: column
    }
}

@media (max-width: 480px) {
    .header-widget .header-container .navigation-row {
        max-width: 100%
    }
}

.header-widget .header-container .navigation-row ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex
}

    .header-widget .header-container .navigation-row ul.linksPoint {
        transform: translateX(223px)
    }

@media (max-width: 1199px) {
    .header-widget .header-container .navigation-row ul.linksPoint {
        flex-direction: column;
        transform: translateX(0px)
    }
}

.header-widget .header-container .navigation-row ul.linksPoint li {
    padding-right: 62px
}

    .header-widget .header-container .navigation-row ul.linksPoint li a {
        font-size: 18px;
        font-weight: 400;
        line-height: 21px
    }

    .header-widget .header-container .navigation-row ul.linksPoint li:last-child {
        padding-right: 0px
    }

.header-widget .header-container .navigation-row ul.linksPointFst li {
    padding-right: 62px
}

    .header-widget .header-container .navigation-row ul.linksPointFst li:last-child {
        padding-right: 62px !important
    }

    .header-widget .header-container .navigation-row ul.linksPointFst li a {
        padding: 10px 0px
    }

@media (max-width: 1199px) {
    .header-widget .header-container .navigation-row ul {
        flex-direction: column
    }
}

@media (max-width: 1199px) {
    .header-widget .header-container .navigation-row ul li {
        padding: 0;
        margin-right: 0;
        margin-bottom: 10px
    }
}

.header-widget .header-container .navigation-row ul li.linkList {
    padding: 0px
}

    .header-widget .header-container .navigation-row ul li.linkList:hover .dropDownSec .dropdown__select {
        transform: scaleY(1);
        z-index: 999
    }

    .header-widget .header-container .navigation-row ul li.linkList:hover .dropDownSec .dropdown__select {
        transform: scaleY(1);
        z-index: 999;
        background-color: white;
        border-radius: 5px
    }

@media (max-width: 1199px) {
    .header-widget .header-container .navigation-row ul li.linkList:hover .dropDownSec .dropdown__select .dropdown__select-option a {
        font-size: 12px !important;
        padding: 16px
    }
}

.header-widget .header-container .navigation-row ul li a {
    padding: 10px 33px 10px 10px;
    align-items: center;
    transition: ease-in-out .4s;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #000000
}

    .header-widget .header-container .navigation-row ul li a.link {
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        padding: 10px 33px 10px 10px
    }

    .header-widget .header-container .navigation-row ul li a.active {
        color: var(--theme-colour1)
    }

@media (max-width: 1199px) {
    .header-widget .header-container .navigation-row ul li a {
        padding-left: 0 !important
    }
}

.header-widget .header-container .navigation-row ul li a svg path {
    transition: ease-in-out .4s
}

.header-widget .header-container .navigation-row ul li a:hover, .header-widget .header-container .navigation-row ul li a .active {
    color: var(--theme-colour1);
    transition: ease-in-out .4s
}

    .header-widget .header-container .navigation-row ul li a:hover svg path, .header-widget .header-container .navigation-row ul li a .active svg path {
        fill: var(--theme-colour1)
    }

.header-widget .header-container .navigation-row .close-nav {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: rgba(10,62,109,0.1);
    border: none;
    outline: none;
    transition: ease-in-out .4s
}

@media (min-width: 1200px) {
    .header-widget .header-container .navigation-row .close-nav {
        display: none !important
    }
}

.header-widget .header-container .navigation-row .close-nav:hover {
    background-color: rgba(10,62,109,0.4)
}

.header-widget .header-container .navigation-row .nav-ctrl-sm {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1px
}

@media (min-width: 1200px) {
    .header-widget .header-container .navigation-row .nav-ctrl-sm {
        display: none !important
    }
}

.header-widget .header-container .navigation-row .nav-ctrl-sm .nav-ctrl-link {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #FAFAFA;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-colour2)
}

    .header-widget .header-container .navigation-row .nav-ctrl-sm .nav-ctrl-link:hover {
        background-color: var(--theme-colour2-dark)
    }

@media (max-width: 767px) {
    .header-widget .header-container .navigation-row .nav-ctrl-sm .nav-ctrl-link {
        font-size: 12px
    }
}

.header-widget .header-container .nav-ctrl-row {
    display: flex;
    align-items: center;
    column-gap: 17px
}

    .header-widget .header-container .nav-ctrl-row.nav-ctrl-row2 {
        column-gap: 7px
    }

@media (max-width: 1199px) {
    .header-widget .header-container .nav-ctrl-row.nav-ctrl-row2 .userControl {
        display: flex
    }
}

.header-widget .header-container .nav-ctrl-row .notification {
    display: flex;
    position: relative;
    cursor: pointer
}

    .header-widget .header-container .nav-ctrl-row .notification span {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid var(--white);
        background-color: var(--theme-colour1);
        border-radius: 50%;
        right: -4px;
        bottom: 13px;
        display: none
    }

        .header-widget .header-container .nav-ctrl-row .notification span.active {
            display: block
        }

    .header-widget .header-container .nav-ctrl-row .notification svg path {
        transition: ease-in-out .4s
    }

    .header-widget .header-container .nav-ctrl-row .notification:hover svg path {
        fill: var(--theme-colour2)
    }

.header-widget .header-container .nav-ctrl-row .userControl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    height: 58px
}

@media (max-width: 1199px) {
    .header-widget .header-container .nav-ctrl-row .userControl {
        display: none
    }
}

.header-widget .header-container .nav-ctrl-row .userControl:hover .userDrop {
    opacity: 1;
    pointer-events: all;
    top: 50px
}

.header-widget .header-container .nav-ctrl-row .userControl .userHead {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    column-gap: 6px
}

@media (max-width: 991px) {
    .header-widget .header-container .nav-ctrl-row .userControl .userHead {
        display: none
    }
}

@media (max-width: 1279px) {
    .header-widget .header-container .nav-ctrl-row .userControl .userHead {
        display: none
    }
}

.header-widget .header-container .nav-ctrl-row .userControl .userHead .userName {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--theme-text-colour)
}

@media (max-width: 767px) {
    .header-widget .header-container .nav-ctrl-row .userControl .userHead .userName {
        font-size: 12px
    }
}

.header-widget .header-container .nav-ctrl-row .userControl .userHead .userPic img {
    width: 100%;
    border-radius: 50%
}

.header-widget .header-container .nav-ctrl-row .userControl .userDrop {
    position: absolute;
    width: 202px;
    height: 95px;
    right: 30px;
    top: 0px;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
    -moz-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    transition: ease-in-out .4s
}

    .header-widget .header-container .nav-ctrl-row .userControl .userDrop ul {
        padding: 0;
        margin: 8px
    }

        .header-widget .header-container .nav-ctrl-row .userControl .userDrop ul li {
            font-size: 16px;
            font-weight: 400;
            line-height: 1;
            padding: 11px 12px;
            list-style: none;
            transition: ease-in-out .4s;
            border-radius: 5px
        }

@media (max-width: 767px) {
    .header-widget .header-container .nav-ctrl-row .userControl .userDrop ul li {
        font-size: 12px
    }
}

.header-widget .header-container .nav-ctrl-row .userControl .userDrop ul li a {
    display: flex;
    align-items: center;
    column-gap: 8px;
    color: #000000
}

@media (max-width: 767px) {
    .header-widget .header-container .nav-ctrl-row .userControl .userDrop ul li a {
        font-size: 16px;
        font-weight: 500;
        line-height: 18px
    }
}

.header-widget .header-container .nav-ctrl-row .userControl .userDrop ul li:hover {
    background-color: var(--theme-colour2)
}

    .header-widget .header-container .nav-ctrl-row .userControl .userDrop ul li:hover a {
        color: var(--white)
    }

.header-widget .header-container .nav-ctrl-row .userControl .icon {
    border-radius: 22px;
    cursor: pointer;
    height: 44px;
    width: 95px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        align-items: center
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: ease-in-out .4s;
            width: 47.5px
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message:hover {
                background-color: var(--lightBg);
                border-radius: 22px 0 0 22px
            }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message:hover .userDropMess {
                    opacity: 1;
                    pointer-events: all;
                    top: 50px
                }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .bell svg path {
                fill: var(--theme-colour1)
            }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess {
                position: absolute;
                width: 412px;
                right: 30px;
                top: 0px;
                background: #FFFFFF;
                -webkit-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
                -moz-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
                box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
                border-radius: 22px;
                opacity: 0;
                pointer-events: none;
                transition: ease-in-out .4s;
                padding: 24px 16px;
                text-align: left
            }

@media (max-width: 480px) {
    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess {
        width: 351px;
        right: -48px
    }
}

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .title {
    font-size: 12px;
    font-weight: 400;
    line-height: 13px;
    color: var(--c2d);
    margin-bottom: 12px
}

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropListSecInn {
    max-height: calc((100vh) - 315px);
    overflow-y: auto;
    padding-right: 5px
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropListSecInn::-webkit-scrollbar {
        width: 8px;
        margin-left: 5px;
        left: 5px
    }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropListSecInn::-webkit-scrollbar-track {
        background: #ffffff
    }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropListSecInn::-webkit-scrollbar-thumb {
        background: #ffffff;
        box-shadow: none !important
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropListSecInn::-webkit-scrollbar-thumb:hover {
            background: #c9c9c9
        }

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList {
    padding: 12px 11px;
    border-radius: 5px;
    border-left: 3px solid #9CA4B1;
    margin-bottom: 6px;
    -webkit-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.1)
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList.notSee {
        border-left: 3px solid var(--theme-colour1)
    }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea {
        display: grid;
        grid-template-columns: 56px 1fr;
        padding-bottom: 11px;
        border-bottom: 1px solid #E8E8E8;
        margin-bottom: 8px
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea.picAreaSm {
            grid-template-columns: 1fr
        }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .pic {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            position: relative
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .pic img {
                width: 100%;
                border-radius: 50%
            }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .pic span {
                position: absolute;
                top: 42px;
                right: 2px;
                border-radius: 50%;
                width: 12px;
                height: 17px;
                font-weight: 300;
                padding: 3px 6px;
                color: #fff;
                border: 1px solid var(--white)
            }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .pic span.red {
                    background-color: #D63133
                }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .pic span.green {
                    background-color: #12D826
                }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .textArea {
            display: grid;
            grid-template-columns: 1fr 60px
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .textArea .textSec {
                padding-left: 11px;
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
                color: #434343
            }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .textArea .textSec span {
                    font-weight: 500;
                    position: inherit;
                    border-radius: 0;
                    height: auto;
                    background-color: transparent;
                    color: #434343;
                    display: inline;
                    font-size: 12px
                }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .textArea .textSec .title {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 17px;
                    color: var(--theme-colour1);
                    margin-bottom: 6px
                }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .picArea .textArea .time {
                font-size: 10px;
                font-weight: 400;
                line-height: 12px;
                color: #808080;
                padding-left: 7px
            }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea {
        display: grid;
        grid-template-columns: 1fr 1px 1fr 1px 1fr;
        align-items: center
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea a {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 400;
            line-height: 14px;
            background-color: transparent;
            flex-direction: column;
            border: none;
            margin-right: 0
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea a.chat {
                color: #239F59
            }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea a.interest {
                color: #F2383A
            }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea a.shortlist {
                color: #8A70E6
            }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea a:hover {
                border: none
            }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea a svg {
                margin-bottom: 5px
            }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .intArea span {
            width: 1px;
            height: 19px;
            background-color: #E8E8E8;
            display: block;
            position: inherit;
            padding: 0;
            border-radius: 0
        }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .btnGroup {
        display: flex;
        justify-content: end
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .btnGroup .btnReject {
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            color: var(--theme-colour1);
            background-color: var(--white);
            border-radius: 4px;
            min-width: 109px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            border: none;
            cursor: pointer;
            transition: ease-in-out 0.4s
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .btnGroup .btnReject:hover {
                color: var(--theme-colour2)
            }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .btnGroup .BtnAccept {
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            color: var(--white);
            background-color: var(--theme-colour1);
            border-radius: 4px;
            min-width: 109px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            border: none;
            cursor: pointer;
            transition: ease-in-out 0.4s
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .userDropList .btnGroup .BtnAccept:hover {
                background-color: var(--theme-colour2)
            }

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .viewAll {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--theme-colour1);
    text-decoration: underline;
    background-color: transparent;
    text-align: center;
    margin: auto;
    display: flex;
    column-gap: 5px
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .viewAll:hover {
        border: none
    }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message .userDropMess .userDropListSec .viewAll span {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        position: inherit;
        background-color: transparent;
        color: var(--theme-colour1);
        border-radius: 0;
        padding: 0
    }

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .message span {
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: var(--white);
    position: absolute;
    top: 10px;
    right: 54px;
    border-radius: 50%;
    height: 12px;
    font-weight: 300;
    background-color: #EB6463;
    color: #fff;
    min-width: 18px;
    height: 18px;
    padding: 2px;
    width: fit-content;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out .4s;
    position: relative;
    width: 47.5px
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile:hover {
        background-color: var(--lightBg);
        border-radius: 0 22px 22px 0
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile:hover .userDropMess {
            opacity: 1;
            pointer-events: all;
            top: 40px
        }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile img {
        max-height: 100%;
        width: 28px;
        height: 28px;
        border-radius: 50%
    }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess {
        position: absolute;
        width: 412px;
        right: 0px;
        top: 0px;
        background: #FFFFFF;
        -webkit-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
        -moz-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
        box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
        border-radius: 22px;
        opacity: 0;
        pointer-events: none;
        transition: ease-in-out .4s;
        padding: 24px 16px;
        text-align: left
    }

@media (max-width: 480px) {
    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess {
        width: 351px;
        right: -48px
    }
}

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .primeBtn {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--white);
    text-transform: uppercase;
    height: 30px;
    padding: 4px 16px;
    border-radius: 18px;
    background: #ffa61a;
    background: -moz-linear-gradient(top, #ffa61a 0%, #de8800 100%);
    background: -webkit-linear-gradient(top, #ffa61a 0%, #de8800 100%);
    background: linear-gradient(to bottom, #ffa61a 0%, #de8800 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa61a', endColorstr='#de8800',GradientType=0 );
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .primeBtn svg {
        margin-right: 8px
    }

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .nameArea {
    border-bottom: 1px solid var(--lightBg);
    padding-bottom: 16px
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .nameArea .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 17px;
        color: #2D2D2D;
        margin-bottom: 10px
    }

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .nameArea .nameCode {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        color: #707070;
        display: flex;
        align-items: center
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .nameArea .nameCode .spnpre {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #E69C00;
            border-radius: 19px;
            background-color: #F3F7FA;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 7px 10px
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .nameArea .nameCode .spnpre img {
                margin-right: 6px;
                width: auto;
                height: 11px
            }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .nameArea .nameCode .border {
            width: 1px;
            height: 13px;
            background-color: #2D2D2D;
            margin-left: 12px;
            margin-right: 8px
        }

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea {
    display: grid;
    grid-template-columns: 1fr 1fr
}

    .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings {
        border-right: 1px solid var(--lightBg);
        padding-bottom: 24px
    }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings:last-child {
            border-right: none
        }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings.profSettingsLft {
            padding-left: 20px
        }

        .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #2D2D2D;
            display: grid;
            grid-template-columns: 40px 1fr;
            align-items: center;
            margin-top: 20px
        }

            .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList .icon {
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                margin-right: 8px
            }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList .icon.blu {
                    background-color: var(--lightBg)
                }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList .icon.grn {
                    background-color: #F0FBF5
                }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList .icon.red {
                    background-color: #FDEFEF
                }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList .icon.brn {
                    background-color: #EAE5E7
                }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList .icon.yellw {
                    background-color: #FEF6E9
                }

                .header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess .profSettingsArea .profSettings .profSettingsList .icon.ash {
                    background-color: #F0F0F0
                }

.header-widget .header-container .nav-ctrl-row .userControl .icon .profile .frofile .userDropMess.userDropMessBtm {
    padding-bottom: 0
}

.header-widget .header-container .nav-ctrl-row .userControl .icon.iconPro {
    background-color: #FFFFFF;
    -webkit-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.3)
}

.header-widget .header-container .nav-ctrl-row .hamburg {
    cursor: pointer;
    margin-left: 6px;
    border-radius: 4px;
    outline: none;
    background-color: #fff;
    border: solid 1px #f3f3f312
}

@media (min-width: 1200px) {
    .header-widget .header-container .nav-ctrl-row .hamburg {
        display: none !important
    }
}

.header-widget .header-container .nav-ctrl-row .hamburg .icon {
    background-color: #FFFFFF;
    padding: 8px 14px 8px 14px;
    border-radius: 22px;
    box-shadow: 0px 2px 15px #707070;
    cursor: pointer
}

    .header-widget .header-container .nav-ctrl-row .hamburg .icon .profile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 17px
    }

        .header-widget .header-container .nav-ctrl-row .hamburg .icon .profile .message span {
            position: absolute;
            top: 20px;
            right: 65px;
            border-radius: 50%;
            height: 12px;
            font-weight: 300;
            padding: 3px 6px;
            background-color: #EB6463;
            color: #fff
        }

        .header-widget .header-container .nav-ctrl-row .hamburg .icon .profile .frofile img {
            max-height: 100%;
            width: 28px;
            height: 28px;
            border-radius: 50%
        }

.header-widget .header-container .nav-ctrl-row p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--theme-text-colour)
}

@media (max-width: 767px) {
    .header-widget .header-container .nav-ctrl-row p {
        font-size: 12px
    }
}

@media (max-width: 991px) {
    .header-widget .header-container .nav-ctrl-row p {
        text-align: right
    }
}

@media (max-width: 480px) {
    .header-widget .header-container .nav-ctrl-row p span {
        display: block;
        margin-bottom: 2px
    }
}

.header-widget .header-container .nav-ctrl-row p a {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--theme-colour2);
    transition: ease-in-out .4s
}

    .header-widget .header-container .nav-ctrl-row p a:hover {
        color: var(--theme-colour1)
    }

@media (max-width: 767px) {
    .header-widget .header-container .nav-ctrl-row p a {
        font-size: 12px
    }
}

.header-widget::after {
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .8;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s;
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0)
}

.header-widget.active-nav::after {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.template-container {
    width: var(--container-width);
    margin: 0 auto
}

@media (max-width: 1366px) {
    .template-container {
        padding-left: 15px;
        padding-right: 15px
    }
}

@media (max-width: 480px) {
    .template-container {
        padding-left: 8px;
        padding-right: 8px
    }
}

@media (max-width: 1279px) {
    .template-container {
        width: 100%
    }
}

.template-container.template-container2 {
    max-width: var(--container-width2);
    width: 100%;
    margin: 0 auto
}

@media (max-width: 1366px) {
    .template-container.template-container2 {
        padding-left: 15px;
        padding-right: 15px
    }
}

@media (max-width: 480px) {
    .template-container.template-container2 {
        padding-left: 8px;
        padding-right: 8px
    }
}

.template-containerExtraLrg {
    max-width: 1680px !important;
    width: 100% !important;
    margin: 0 auto;
    padding-left: 50px !important;
    padding-right: 50px !important
}

@media (max-width: 1720px) {
    .template-containerExtraLrg {
        padding-left: 50px !important;
        padding-right: 50px !important
    }
}

@media (max-width: 1199px) {
    .template-containerExtraLrg {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100%
    }
}

@media (max-width: 680px) {
    .template-containerExtraLrg {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100%
    }
}

.template-containerExtraLrg2 {
    max-width: 1680px !important;
    width: 100% !important;
    margin: 0 auto
}

@media (max-width: 1720px) {
    .template-containerExtraLrg2 {
        padding-left: 50px !important;
        padding-right: 50px !important
    }
}

@media (max-width: 1199px) {
    .template-containerExtraLrg2 {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100%
    }
}

@media (max-width: 680px) {
    .template-containerExtraLrg2 {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100%
    }
}

.template-content ul {
    margin: 0;
    padding: 0
}

    .template-content ul li {
        list-style-type: none;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        color: var(--theme-text-colour);
        position: relative;
        padding-left: 20px;
        margin-bottom: 8px
    }

        .template-content ul li:before {
            position: absolute;
            left: 0;
            top: 10px;
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: var(--theme-colour1)
        }

@media (max-width: 991px) {
    .hide-sm {
        display: none !important
    }
}

.footer-widget {
    padding-bottom: 24px;
    background-color: #F2F2F2;
    z-index: 1;
    position: relative
}

    .footer-widget .template-container {
        margin: 0px auto
    }

@media (max-width: 480px) {
    .footer-widget .template-container {
        padding-left: 19px !important;
        padding-right: 19px !important
    }
}

.footer-widget .template-container .footer-content-row {
    max-width: 275px
}

@media (max-width: 1024px) {
    .footer-widget .template-container .footer-content-row {
        max-width: 50%
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .footer-content-row {
        max-width: 100%;
        text-align: center
    }
}

.footer-widget .template-container .footer-content-row a {
    display: inline-block;
    margin-bottom: 25px
}

.footer-widget .template-container .footer-content-row p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #F3F3F3
}

@media (max-width: 767px) {
    .footer-widget .template-container .footer-content-row p {
        font-size: 12px
    }
}

.footer-widget .template-container .quickLinks {
    padding-top: 37px;
    flex: 1;
    display: flex
}

@media (max-width: 480px) {
    .footer-widget .template-container .quickLinks {
        display: none
    }
}

@media (max-width: 1024px) {
    .footer-widget .template-container .quickLinks {
        flex: 100%;
        order: -1;
        margin-bottom: 30px;
        border-bottom: solid 1px #859fb682
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .quickLinks {
        flex-wrap: wrap
    }
}

.footer-widget .template-container .quickLinks .hiddenDiv {
    display: flex;
    width: 100%
}

@media (max-width: 480px) {
    .footer-widget .template-container .quickLinks .hiddenDiv {
        display: none
    }
}

.footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col {
    display: flex;
    flex-direction: column;
    max-width: 33.33%;
    width: 33.33%;
    flex: 33.33%
}

    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col .topMargin {
        margin-top: 40px
    }

@media (max-width: 1199px) {
    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col {
        padding-left: 20px
    }
}

@media (max-width: 1024px) {
    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col {
        padding-left: 0
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col {
        max-width: 100%;
        width: 100%;
        flex: 100%;
        flex-wrap: wrap;
        margin-bottom: 15px
    }
}

.footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #252525;
    width: 100%;
    display: block;
    margin-bottom: 26px
}

@media (max-width: 1199px) {
    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col strong {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col strong {
        margin-bottom: 15px
    }
}

.footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col a {
    color: #494949;
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    margin-bottom: 20px;
    transition: ease-in-out .4s
}

@media (max-width: 1199px) {
    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col a {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col a {
        margin-bottom: 10px;
        margin-right: 12px
    }
}

.footer-widget .template-container .quickLinks .hiddenDiv .footer-navigation-col a:hover {
    color: var(--theme-colour1)
}

.footer-widget .template-container .quickLinks .footer-navigation-col {
    display: flex;
    flex-direction: column;
    max-width: 33.33%;
    width: 33.33%;
    flex: 33.33%
}

@media (max-width: 480px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col {
        display: inline
    }
}

.footer-widget .template-container .quickLinks .footer-navigation-col .topMargin {
    margin-top: 40px
}

@media (max-width: 480px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col .topMargin {
        margin-top: 0px;
        margin-left: 0px
    }
}

@media (max-width: 1199px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col {
        padding-left: 20px
    }
}

@media (max-width: 1024px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col {
        padding-left: 0
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col {
        max-width: 100%;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 15px
    }
}

@media (min-width: 992px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col.footer-navigation-col2 {
        width: 360px;
        max-width: 100%;
        flex: auto
    }
}

@media (min-width: 992px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col.footer-navigation-col3 {
        width: 270px;
        max-width: 100%;
        flex: auto
    }
}

.footer-widget .template-container .quickLinks .footer-navigation-col strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #252525;
    width: 100%;
    display: block;
    margin-bottom: 26px
}

@media (max-width: 1199px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col strong {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col strong {
        margin-bottom: 15px;
        font-size: 18px
    }
}

.footer-widget .template-container .quickLinks .footer-navigation-col a {
    color: #494949;
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    margin-bottom: 20px;
    transition: ease-in-out .4s
}

@media (max-width: 1199px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col a {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .quickLinks .footer-navigation-col a {
        margin-bottom: 10px;
        margin-right: 12px;
        font-size: 18px
    }
}

.footer-widget .template-container .quickLinks .footer-navigation-col a:hover {
    color: var(--theme-colour1)
}

.footer-widget .template-container .footerLink {
    display: none
}

@media (max-width: 480px) {
    .footer-widget .template-container .footerLink {
        display: block;
        margin-bottom: 20px;
        padding-top: 20px
    }
}

.footer-widget .template-container .footerLink .heading {
    font-size: 16px;
    font-weight: 700;
    line-height: 0px;
    color: #252525;
    padding: 18px 0px 13px 0px
}

.footer-widget .template-container .footerLink .connectionLinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px
}

    .footer-widget .template-container .footerLink .connectionLinks .left {
        padding: 0px 0px 16px 0px
    }

        .footer-widget .template-container .footerLink .connectionLinks .left a {
            font-size: 14px;
            font-weight: 400;
            line-height: 245.18%;
            color: #494949;
            margin-bottom: 0;
            display: block
        }

    .footer-widget .template-container .footerLink .connectionLinks .right a {
        font-size: 14px;
        font-weight: 400;
        line-height: 245.18%;
        color: #494949;
        margin-bottom: 0;
        display: block
    }

.footer-widget .template-container .footerLink .footerDrop {
    margin-bottom: 20px
}

    .footer-widget .template-container .footerLink .footerDrop .footerhead {
        color: #252525;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 16px;
        transition: ease-in-out .4s
    }

        .footer-widget .template-container .footerLink .footerDrop .footerhead.active svg {
            transform: rotate(0deg) !important
        }

        .footer-widget .template-container .footerLink .footerDrop .footerhead svg {
            transform: rotate(180deg)
        }

@media (max-width: 767px) {
    .footer-widget .template-container .footerLink .footerDrop .footerhead {
        font-size: 14px
    }
}

.footer-widget .template-container .footerLink .footerDropdown {
    display: none;
    width: 100%;
    margin-bottom: 21px
}

@media (max-width: 480px) {
    .footer-widget .template-container .footerLink .footerDropdown {
        display: block
    }
}

.footer-widget .template-container .footerLink .footerDropdown .inputArea {
    display: flex;
    justify-content: space-between;
    width: 100%
}

    .footer-widget .template-container .footerLink .footerDropdown .inputArea label {
        font-size: 16px;
        font-weight: 700;
        line-height: 2;
        color: #252525
    }

@media (max-width: 767px) {
    .footer-widget .template-container .footerLink .footerDropdown .inputArea label {
        font-size: 14px
    }
}

.footer-widget .template-container .footerLink .footerDropdown .inputArea select {
    border: none;
    background: transparent
}

.footer-widget .template-container .footerLink .footerDropdown .inputArea #qksbmitfrm {
    width: 159px;
    height: 43px
}

.footer-widget .template-container .footer-media-row {
    padding-top: 22px;
    max-width: 295px
}

@media (max-width: 1024px) {
    .footer-widget .template-container .footer-media-row {
        max-width: 50%;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-end
    }
}

@media (max-width: 991px) {
    .footer-widget .template-container .footer-media-row {
        max-width: 100%;
        width: 100%;
        align-items: center
    }
}

@media (max-width: 480px) {
    .footer-widget .template-container .footer-media-row {
        overflow: hidden
    }
}

.footer-widget .template-container .footer-media-row .contact-button {
    position: relative
}

    .footer-widget .template-container .footer-media-row .contact-button .call-icon {
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 17px;
        left: 15px;
        cursor: pointer
    }

    .footer-widget .template-container .footer-media-row .contact-button .contact-number {
        position: absolute;
        right: 38px;
        top: 14px;
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
        color: #F3F3F3;
        cursor: pointer
    }

@media (max-width: 767px) {
    .footer-widget .template-container .footer-media-row .contact-button .contact-number {
        font-size: 18px
    }
}

.footer-widget .template-container .footer-media-row .contact-button .call-label {
    position: absolute;
    text-transform: uppercase;
    right: 70px;
    bottom: 21px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #F3F3F3;
    cursor: pointer
}

@media (max-width: 767px) {
    .footer-widget .template-container .footer-media-row .contact-button .call-label {
        font-size: 12px
    }
}

.footer-widget .template-container .footer-media-row .media-link-row {
    padding-top: 25px;
    display: flex;
    justify-content: center
}

    .footer-widget .template-container .footer-media-row .media-link-row .media-link {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #859fb6;
        margin: 0 6px;
        border-radius: 50%;
        transition: ease-in-out .4s
    }

        .footer-widget .template-container .footer-media-row .media-link-row .media-link:hover {
            background-color: #5ca6e8
        }

.footer-widget .template-container hr {
    margin: 8px 0
}

.footer-widget .socialMedia {
    margin-top: 15px
}

    .footer-widget .socialMedia .icon {
        display: flex;
        justify-content: end
    }

@media (max-width: 480px) {
    .footer-widget .socialMedia .icon {
        justify-content: start;
        flex-wrap: wrap
    }
}

.footer-widget .socialMedia .icon svg {
    margin-right: 20px;
    cursor: pointer
}

@media (max-width: 480px) {
    .footer-widget .socialMedia .icon svg {
        margin-top: 8px
    }
}

.mrtop4px {
    margin-top: 4px !important
}

.copy-right {
    padding: 24px 0px 28px 0px;
    background-color: var(--theme-colour1);
    z-index: 1;
    position: relative
}

@media (max-width: 991px) {
    .copy-right {
        z-index: 9999999999
    }
}

@media (max-width: 767px) {
    .copy-right {
        padding: 24px 10px 28px
    }
}

.copy-right p {
    text-align: center;
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #fafafa
}

@media (max-width: 767px) {
    .copy-right p {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px
    }
}

.copy-right p a {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: #fafafa;
    text-decoration: underline;
    transition: ease-in-out .4s
}

    .copy-right p a:hover {
        color: #5ca6e8
    }

.modalWidet {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    pointer-events: none;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s;
    -webkit-transform: translate3d(0, 102%, 0);
    transform: translate3d(0, 102%, 0);
    box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2);
    opacity: 0
}

    .modalWidet .modalRow {
        padding: 34px 34px 120px;
        position: relative;
        background-color: #fff;
        border-radius: 6px;
        z-index: 1;
        max-width: 946px;
        width: 100%;
        background-position: center bottom;
        background-repeat: no-repeat
    }

@media (max-width: 550px) {
    .modalWidet .modalRow {
        padding: 34px 15px 120px
    }
}

.modalWidet .modalRow h3, .modalWidet .modalRow h4, .modalWidet .modalRow h4 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 16px;
    color: var(--theme-colour2);
    margin-bottom: 2px
}

.modalWidet .modalRow p {
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #989898;
    margin: 0
}

@media (max-width: 991px) {
    .modalWidet .modalRow.modelRowHoro2 {
        max-width: 536px
    }
}

@media (max-width: 767px) {
    .modalWidet .modalRow.modelRowHoro2 .HoroBody {
        height: 358px;
        overflow-y: auto
    }
}

@media (max-width: 680px) {
    .modalWidet .modalRow.modelRowHoro2 .HoroBody {
        padding: 20px 20px !important
    }
}

@media (max-width: 480px) {
    .modalWidet .modalRow.modelRowHoro2 .modalHoroscope {
        flex-direction: row !important
    }
}

@media (max-width: 680px) {
    .modalWidet .modalRow.modelRowHoro2 .printSaveBtn .prevBtn, .modalWidet .modalRow.modelRowHoro2 .printSaveBtn .nextBtn, .modalWidet .modalRow.modelRowHoro2 .modalWidet .modalRow .printSaveBtn .nextBtn {
        column-gap: 7px;
        padding: 5px 8px
    }
}

.modalWidet .modalRow.modalRowSuccess {
    max-width: 370px !important;
    padding: 40px !important
}

.modalWidet .modalRow .nextPrevBtn {
    display: flex;
    column-gap: 6px;
    position: absolute;
    right: 16px;
    top: 16px
}

    .modalWidet .modalRow .nextPrevBtn .prevBtn, .modalWidet .modalRow .nextPrevBtn .nextBtn {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #2D2D2D;
        height: 32px;
        display: flex;
        align-items: center;
        column-gap: 15px;
        padding: 5px 12px;
        border-radius: 5px;
        border: 1px solid #F3F3F3;
        background-color: var(--white);
        transition: ease-in-out .4s;
        cursor: pointer
    }

        .modalWidet .modalRow .nextPrevBtn .prevBtn:hover, .modalWidet .modalRow .nextPrevBtn .nextBtn:hover {
            background-color: var(--lightBg)
        }

        .modalWidet .modalRow .nextPrevBtn .prevBtn svg, .modalWidet .modalRow .nextPrevBtn .nextBtn svg {
            transform: rotate(90deg)
        }

        .modalWidet .modalRow .nextPrevBtn .prevBtn.dis, .modalWidet .modalRow .nextPrevBtn .dis.nextBtn {
            color: #DDDDDD
        }

            .modalWidet .modalRow .nextPrevBtn .prevBtn.dis:hover, .modalWidet .modalRow .nextPrevBtn .dis.nextBtn:hover {
                color: #DDDDDD;
                background-color: var(--white)
            }

            .modalWidet .modalRow .nextPrevBtn .prevBtn.dis svg, .modalWidet .modalRow .nextPrevBtn .dis.nextBtn svg {
                transform: rotate(90deg)
            }

                .modalWidet .modalRow .nextPrevBtn .prevBtn.dis svg path, .modalWidet .modalRow .nextPrevBtn .dis.nextBtn svg path {
                    fill: #DDDDDD
                }

        .modalWidet .modalRow .nextPrevBtn .nextBtn svg {
            transform: rotate(-90deg)
        }

.modalWidet .modalRow .printSaveBtn {
    display: flex;
    column-gap: 6px
}

@media (max-width: 767px) {
    .modalWidet .modalRow .printSaveBtn {
        margin-top: 10px
    }
}

.modalWidet .modalRow .printSaveBtn .prevBtn, .modalWidet .modalRow .printSaveBtn .nextBtn {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #2D2D2D;
    height: 32px;
    display: flex;
    align-items: center;
    column-gap: 15px;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid #F3F3F3;
    background-color: var(--white);
    transition: ease-in-out .4s;
    cursor: pointer
}

    .modalWidet .modalRow .printSaveBtn .prevBtn:hover, .modalWidet .modalRow .printSaveBtn .nextBtn:hover {
        background-color: var(--lightBg)
    }

    .modalWidet .modalRow .printSaveBtn .prevBtn svg, .modalWidet .modalRow .printSaveBtn .nextBtn svg {
        transform: rotate(90deg)
    }

        .modalWidet .modalRow .printSaveBtn .prevBtn svg path, .modalWidet .modalRow .printSaveBtn .nextBtn svg path {
            fill: var(--theme-colour1)
        }

    .modalWidet .modalRow .printSaveBtn .prevBtn.dis, .modalWidet .modalRow .printSaveBtn .dis.nextBtn {
        color: #DDDDDD
    }

        .modalWidet .modalRow .printSaveBtn .prevBtn.dis:hover, .modalWidet .modalRow .printSaveBtn .dis.nextBtn:hover {
            color: #DDDDDD;
            background-color: var(--white)
        }

        .modalWidet .modalRow .printSaveBtn .prevBtn.dis svg, .modalWidet .modalRow .printSaveBtn .dis.nextBtn svg {
            transform: rotate(90deg)
        }

            .modalWidet .modalRow .printSaveBtn .prevBtn.dis svg path, .modalWidet .modalRow .printSaveBtn .dis.nextBtn svg path {
                fill: var(--theme-colour1)
            }

    .modalWidet .modalRow .printSaveBtn .nextBtn svg {
        transform: rotate(-90deg)
    }

        .modalWidet .modalRow .printSaveBtn .nextBtn svg path {
            fill: var(--theme-colour1)
        }

.modalWidet .modalRow .closeBtn {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.4s;
    border-radius: 50%;
    border-radius: 5px;
    border: 1px solid #F3F3F3
}

    .modalWidet .modalRow .closeBtn svg rect {
        fill: var(--primary)
    }

    .modalWidet .modalRow .closeBtn:hover {
        background-color: var(--lightBg)
    }

        .modalWidet .modalRow .closeBtn:hover .status {
            opacity: 1;
            pointer-events: all
        }

    .modalWidet .modalRow .closeBtn .status {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #DDDDDD;
        height: 32px;
        display: flex;
        align-items: center;
        column-gap: 15px;
        padding: 5px 12px;
        border-radius: 5px;
        background-color: #2D2D2D;
        position: absolute;
        right: 0;
        top: -40px;
        opacity: 0;
        pointer-events: none;
        transition: ease-in-out 0.4s
    }

    .modalWidet .modalRow .closeBtn.closeBtnSuccess {
        cursor: pointer;
        width: 25px !important;
        height: 25px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute;
        right: 8px !important;
        top: 8px !important;
        transition: ease-in-out 0.4s;
        border-radius: 5px
    }

.modalWidet .modalRow .statusPic {
    display: flex;
    justify-content: center
}

.modalWidet .modalRow .buttonRow {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    margin-top: 24px
}

    .modalWidet .modalRow .buttonRow .cancelBtn {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        color: var(--form-text-colour);
        background-color: #E5E5E5;
        width: 120px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 5px;
        transition: ease-in-out 0.4s
    }

        .modalWidet .modalRow .buttonRow .cancelBtn:hover {
            color: #FFFFFF;
            background-color: #0a3e6d
        }

    .modalWidet .modalRow .buttonRow .acceptBtn {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        color: #FFFFFF;
        background-color: #0a3e6d;
        width: 120px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 5px;
        transition: ease-in-out 0.4s
    }

        .modalWidet .modalRow .buttonRow .acceptBtn:hover {
            background-color: #02294b;
            color: #FFFFFF
        }

.modalWidet .modalRow .closeBtnHoro {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.4s;
    border-radius: 50%;
    border-radius: 5px;
    border: 1px solid #F3F3F3
}

    .modalWidet .modalRow .closeBtnHoro svg rect {
        fill: var(--primary)
    }

    .modalWidet .modalRow .closeBtnHoro:hover {
        background-color: var(--lightBg)
    }

        .modalWidet .modalRow .closeBtnHoro:hover .status {
            opacity: 1;
            pointer-events: all
        }

    .modalWidet .modalRow .closeBtnHoro .status {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #DDDDDD;
        height: 32px;
        display: flex;
        align-items: center;
        column-gap: 15px;
        padding: 5px 12px;
        border-radius: 5px;
        background-color: #2D2D2D;
        position: absolute;
        right: 0;
        top: -20px;
        opacity: 0;
        pointer-events: none;
        transition: ease-in-out 0.4s
    }

@media (max-width: 680px) {
    .modalWidet .modalRow .closeBtnHoro .status {
        top: 40px
    }
}

@media (max-width: 680px) {
    .modalWidet .modalRow .modalContant {
        margin-top: 25px
    }
}

.modalWidet .modalRow .modalContant .mediaSec {
    display: flex;
    column-gap: 20px;
    align-items: center
}

    .modalWidet .modalRow .modalContant .mediaSec .textArea {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #000000;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: baseline
    }

        .modalWidet .modalRow .modalContant .mediaSec .textArea h4 {
            font-size: 18px;
            font-weight: 600;
            line-height: 20px;
            color: #000000;
            margin-bottom: 8px;
            display: block;
            text-align: left
        }

.modalWidet .modalRow .modalContant .modTabSec {
    margin: 32px 50px 0 74px
}

@media (max-width: 767px) {
    .modalWidet .modalRow .modalContant .modTabSec {
        margin: 32px 0px 0 0px
    }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabHead ul {
    border: 1px solid #F3F3F3;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    width: fit-content
}

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabHead ul li {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #DDDDDD;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        width: 73px;
        cursor: pointer;
        transition: ease-in-out 0.4s
    }

        .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabHead ul li.active {
            color: #000000;
            background-color: var(--lightBg)
        }

        .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabHead ul li:hover {
            color: #000000;
            background-color: var(--lightBg)
        }

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody {
    margin-top: 12px
}

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec {
        display: grid;
        grid-template-columns: 1fr 120px;
        column-gap: 20px
    }

@media (max-width: 550px) {
    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec {
        grid-template-columns: 1fr 100px
    }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow .inputCtrl {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #000000;
    width: 100%;
    height: 41px;
    background: var(--white);
    border-bottom: 1px dashed #DDDDDD !important;
    border: none;
    outline: none
}

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .inputRow .inputCtrl::placeholder {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #000000
    }

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .cmnBtn {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 41px;
    background: var(--theme-colour1);
    border-radius: 5px;
    cursor: pointer;
    transition: ease-in-out 0.4s;
    border: none
}

@media (max-width: 550px) {
    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .cmnBtn {
        width: 100px
    }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .cmnBtn:hover {
    background-color: var(--theme-colour2)
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode {
    display: flex;
    position: relative
}

@media (max-width: 550px) {
    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode {
        flex-direction: column
    }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .country-code {
    opacity: 1;
    pointer-events: visible;
    position: absolute;
    width: 100px;
    left: 12px;
    text-overflow: ellipsis;
    top: 6px;
    white-space: nowrap;
    background-color: transparent;
    z-index: 1;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #0A3E6D;
    padding: 0 15px 0 0;
    display: block;
    height: 30px;
    border: none;
    border-radius: 0;
    outline: none !important;
    z-index: 0
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .selectDivSec {
    display: flex;
    flex-direction: column
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .select2 {
    width: 160px !important;
    height: 41px;
    border-bottom: 1px dashed #DDDDDD !important;
    margin-right: 15px
}

@media (max-width: 550px) {
    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .select2 {
        width: 100% !important;
        margin-right: 0px
    }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .inputArea {
    display: flex;
    border: none;
    width: 100%;
    flex-direction: column
}

    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .inputArea .inputCtrl {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #000000;
        width: 100%;
        padding-left: 25px;
        height: 41px;
        background: var(--white);
        border-bottom: 1px dashed #DDDDDD !important;
        border-left: none !important;
        border-top: none !important;
        border-right: none !important;
        border: none;
        outline: none
    }

@media (max-width: 550px) {
    .modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .inputArea .inputCtrl {
        padding-left: 10px
    }
}

.modalWidet .modalRow .modalContant .modTabSec .modTab .modTabBody .modTabbdySec .hightSec .contryCode .inputArea .validateText span {
    float: right !important
}

.modalWidet .modalRow .modalContant .occupation {
    margin: 32px 50px 50px 74px
}

@media (max-width: 767px) {
    .modalWidet .modalRow .modalContant .occupation {
        margin: 32px 0px 50px 0px
    }
}

.modalWidet .modalRow .modalContant .occupation .hightSec {
    display: grid;
    grid-template-columns: 1fr 120px;
    column-gap: 20px
}

@media (max-width: 680px) {
    .modalWidet .modalRow .modalContant .occupation .hightSec {
        grid-template-columns: 1fr 80px
    }
}

.modalWidet .modalRow .modalContant .occupation .hightSec .inputRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 21px
}

@media (max-width: 680px) {
    .modalWidet .modalRow .modalContant .occupation .hightSec .inputRow {
        grid-template-columns: 1fr
    }
}

.modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .select2-container {
    width: 100% !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #000000
}

.modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .select2-container--default .select2-selection--single {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #000000;
    border: none;
    border-radius: 0px;
    border-bottom: 1px dashed #DDDDDD !important;
    height: 41px
}

    .modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 16px;
        font-weight: 400;
        line-height: 39px;
        color: #000000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 250px
    }

@media (max-width: 680px) {
    .modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .select2-container--default .select2-selection--single .select2-selection__rendered {
        width: 100%
    }
}

.modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-position: center center;
    background-repeat: no-repeat;
    top: 9px
}

    .modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none
    }

.modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .inputCtrl {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #000000;
    width: 100%;
    height: 41px;
    background: var(--white);
    border-bottom: 1px dashed #DDDDDD !important;
    border: none;
    outline: none
}

    .modalWidet .modalRow .modalContant .occupation .hightSec .inputRow .inputCtrl::placeholder {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #000000
    }

.modalWidet .modalRow .modalContant .occupation .hightSec .cmnBtn {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 41px;
    background: var(--theme-colour1);
    border-radius: 5px;
    cursor: pointer;
    transition: ease-in-out 0.4s;
    border: none
}

    .modalWidet .modalRow .modalContant .occupation .hightSec .cmnBtn:hover {
        background-color: var(--theme-colour2)
    }

.modalWidet .modalRow .modalContant .partnerPreference {
    margin: 32px 50px 50px 74px
}

@media (max-width: 767px) {
    .modalWidet .modalRow .modalContant .partnerPreference {
        margin: 32px 0px 50px 0px
    }
}

.modalWidet .modalRow .modalContant .partnerPreference .cmnBtn {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 41px;
    background: var(--theme-colour1);
    border-radius: 5px;
    cursor: pointer;
    transition: ease-in-out 0.4s;
    border: none;
    padding: 5px 24px;
    width: fit-content
}

    .modalWidet .modalRow .modalContant .partnerPreference .cmnBtn:hover {
        background-color: var(--theme-colour2)
    }

.modalWidet .modalRow .modalContant .modalHoroscope {
    display: flex;
    justify-content: space-between
}

@media (max-width: 480px) {
    .modalWidet .modalRow .modalContant .modalHoroscope {
        flex-direction: column
    }
}

.modalWidet .modalRow .modalContant .HoroBody {
    padding: 20px 40px;
    border: 1px solid #F3F3F3;
    border-radius: 9px;
    margin-top: 4px
}

    .modalWidet .modalRow .modalContant .HoroBody .imageContent img {
        width: 100%
    }

.modalWidet .modalRow.modelRowHoro {
    padding: 15px 40px
}

@media (max-width: 480px) {
    .modalWidet .modalRow.modelRowHoro {
        padding: 8px
    }
}

.modalWidet .modalBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    opacity: 0;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.5s;
    transition: opacity 0.6s, transform 0.5s;
    -webkit-transform: translate3d(0, 102%, 0);
    transform: translate3d(0, 102%, 0);
    box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2)
}

.modalWidet.open {
    opacity: 1;
    pointer-events: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

    .modalWidet.open .modalBg {
        opacity: 0.5;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

.modalWidet.landingPageModal .modalRow {
    max-width: 1293px;
    padding: 24px;
    -webkit-box-shadow: 0px 0px 13px 6px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 0px 13px 6px rgba(0,0,0,0.08);
    box-shadow: 0px 0px 13px 6px rgba(0,0,0,0.08)
}

@media (max-width: 1450px) {
    .modalWidet.landingPageModal .modalRow {
        max-width: 1200px
    }
}

.modalWidet.landingPageModal .modalContant {
    display: grid;
    grid-template-columns: 402px 1fr;
    grid-gap: 42px
}

@media (max-width: 991px) {
    .modalWidet.landingPageModal .modalContant {
        grid-template-columns: 1fr
    }
}

.modalWidet.landingPageModal .modalContant .sliderPicLanding {
    padding-bottom: 60px;
    border-radius: 12px
}

@media (max-width: 991px) {
    .modalWidet.landingPageModal .modalContant .sliderPicLanding {
        display: none
    }
}

.modalWidet.landingPageModal .modalContant .sliderPicLanding .owl-dots {
    position: absolute;
    bottom: 170px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

    .modalWidet.landingPageModal .modalContant .sliderPicLanding .owl-dots .owl-dot {
        border: none;
        padding: 0;
        margin-right: 3px;
        border-radius: 6px
    }

        .modalWidet.landingPageModal .modalContant .sliderPicLanding .owl-dots .owl-dot span {
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background-color: var(--white);
            display: flex
        }

        .modalWidet.landingPageModal .modalContant .sliderPicLanding .owl-dots .owl-dot.active span {
            width: 19px
        }

.modalWidet.landingPageModal .modalContant .sliderPicLanding .owl-stage-outer {
    height: 100%;
    border-radius: 12px
}

    .modalWidet.landingPageModal .modalContant .sliderPicLanding .owl-stage-outer .owl-stage {
        height: 100%;
        border-radius: 12px
    }

        .modalWidet.landingPageModal .modalContant .sliderPicLanding .owl-stage-outer .owl-stage .owl-item {
            height: 100%;
            border-radius: 12px
        }

.modalWidet.landingPageModal .modalContant .sliderPicLanding .sliderPic {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 402px;
    height: 100%;
    border-radius: 12px;
    position: relative
}

    .modalWidet.landingPageModal .modalContant .sliderPicLanding .sliderPic span {
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        color: var(--white);
        border-radius: 0 0 12px 12px;
        padding: 20px 33px 23px;
        background-color: var(--theme-colour1);
        width: 100%;
        display: block;
        position: absolute;
        bottom: 0
    }

@media (max-width: 1450px) {
    .modalWidet.landingPageModal .modalContant .sliderPicLanding .sliderPic span {
        font-size: 18px;
        line-height: 22px
    }
}

.modalWidet.landingPageModal .modalContant h5 {
    font-size: 21px;
    font-weight: 500;
    line-height: 32px;
    color: var(--c2d);
    margin-bottom: 34px
}

@media (max-width: 1450px) {
    .modalWidet.landingPageModal .modalContant h5 {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 14px
    }
}

.modalWidet.landingPageModal .modalContant .formSec::-webkit-scrollbar {
    width: 0px;
    margin-left: 5px;
    left: 5px
}

.modalWidet.landingPageModal .modalContant .formSec::-webkit-scrollbar-track {
    background: #fafafa00;
    box-shadow: none
}

.modalWidet.landingPageModal .modalContant .formSec::-webkit-scrollbar-thumb {
    background: #dadada00;
    box-shadow: none
}

@media (max-width: 550px) {
    .modalWidet.landingPageModal .modalContant .formSec {
        max-height: 410px;
        overflow-y: auto
    }
}

.modalWidet.landingPageModal .modalContant .formSec .formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 17px;
    margin-bottom: 16px
}

@media (max-width: 1450px) {
    .modalWidet.landingPageModal .modalContant .formSec .formRow {
        grid-gap: 10px;
        margin-bottom: 10px
    }
}

@media (max-width: 680px) {
    .modalWidet.landingPageModal .modalContant .formSec .formRow {
        grid-gap: 10px;
        margin-bottom: 10px
    }
}

@media (max-width: 550px) {
    .modalWidet.landingPageModal .modalContant .formSec .formRow {
        grid-template-columns: 1fr
    }
}

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow {
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    padding: 13px 23px
}

@media (max-width: 1450px) {
    .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow {
        padding: 10px 23px
    }
}

@media (max-width: 680px) {
    .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow {
        padding: 13px 15px
    }
}

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .inputLabel {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: #444444;
    margin-bottom: 6px
}

@media (max-width: 991px) {
    .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .inputLabel {
        margin-bottom: 4px
    }
}

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .inputLabel sup {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #ff0000
}

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .inputCtrl {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #797373;
    height: auto;
    border: none !important;
    padding: 0;
    line-height: normal;
    font-family: 'Rubik', sans-serif !important
}

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
    height: auto;
    border: none !important
}

    .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
        padding: 0 33px 0 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #797373
    }

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .select2Ctrl .select2-container {
    border: none !important
}

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url(../images/dropArrowNew.svg);
    top: -6px;
    right: 0
}

.modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .phNumSplt {
    display: flex
}

    .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .phNumSplt .select2-container {
        width: fit-content !important;
        background-color: transparent
    }

        .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .phNumSplt .select2-container .select2-selection--single {
            height: auto
        }

    .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .phNumSplt .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: -4px;
        right: 5px
    }

    .modalWidet.landingPageModal .modalContant .formSec .formRow .inputRow .phNumSplt .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: normal
    }

.modalWidet.landingPageModal .modalContant .formSec p {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #707070;
    margin-bottom: 15px;
    text-align: left
}

.modalWidet.landingPageModal .modalContant .btngroup {
    display: flex;
    justify-content: center
}

@media (max-width: 550px) {
    .modalWidet.landingPageModal .modalContant .btngroup {
        display: none
    }
}

.modalWidet.landingPageModal .modalContant .btngroup .submitBtn {
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: #ffffff;
    background-color: var(--theme-colour1);
    border: none;
    border-radius: 8px;
    max-width: 395px;
    width: 100%;
    height: 51px;
    background: linear-gradient(to bottom, var(--theme-colour1) 0%, var(--theme-colour2) 100%)
}

.modalWidet.landingPageModal .modalContant .btngroup.btngroupMob {
    display: none
}

@media (max-width: 550px) {
    .modalWidet.landingPageModal .modalContant .btngroup.btngroupMob {
        display: flex
    }
}

.header-container-top {
    height: 43px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: end;
    margin: 0 auto;
    background: var(--theme-colour1)
}

@media (max-width: 480px) {
    .header-container-top {
        height: 30px
    }
}

.header-container-top .header-container {
    align-items: center;
    display: flex;
    justify-content: end;
    width: var(--container-width);
    margin: 0 auto
}

    .header-container-top .header-container .header-content .header-area {
        margin: 0 auto
    }

@media (max-width: 480px) {
    .header-container-top .header-container .header-content .header-area .header-top {
        display: none
    }
}

.header-container-top .header-container .header-content .header-area .header-top ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: end;
    align-items: center
}

    .header-container-top .header-container .header-content .header-area .header-top ul:first-child {
        margin-right: 24px !important
    }

    .header-container-top .header-container .header-content .header-area .header-top ul li {
        letter-spacing: 1px;
        list-style: none;
        display: inline-block;
        color: #fff;
        margin-right: 30px;
        font-size: 0.9em;
        cursor: pointer
    }

@media (max-width: 480px) {
    .header-container-top .header-container .header-content .header-area .header-top ul li {
        margin: 3px
    }
}

.header-container-top .header-container .header-content .header-area .header-top ul li a {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #FFFFFF;
    letter-spacing: 0px
}

.header-container-top .header-container .header-content .header-area .header-top ul li svg {
    cursor: pointer
}

.header-container-top .header-container .header-content .header-area .header-top ul li:last-child {
    margin-right: 0px
}

.header-container-top .header-container .header-content .header-area .header-top ul li.searchTop {
    margin-right: 40px
}

.select2-container {
    z-index: 111111
}

.loaderCls {
    position: relative
}

    .loaderCls::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 50%;
        margin: auto;
        border: 5px solid #f3f3f3;
        border-top: 5px solid var(--theme-colour1);
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
        z-index: 999999
    }

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.toastr {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    max-width: 400px;
    padding: 14px;
    position: fixed;
    right: 0;
    top: 120px;
    border-left: solid 4px var(--theme-colour2);
    background-color: #fff;
    color: #000;
    z-index: 99;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.6s;
    transition: opacity 3s, transform 0.6s;
    -webkit-transform: translate3d(102%, 0, 0);
    transform: translate3d(102%, 0, 0);
    box-shadow: 0 2px 8px 0 rgba(32,33,36,0.28)
}

    .toastr.open {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition: opacity 3s, transform 0.6s
    }

.btnloaderCls {
    position: relative
}

    .btnloaderCls::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 13%;
        margin: auto;
        border-top: 3px solid #f3f3f3;
        border-radius: 50%;
        width: 31px;
        height: 31px;
        animation: spin 1s linear infinite
    }

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.input-validation-error {
    border: 1px solid red;
    padding: 2px 6px;
    border-radius: 4px
}

.dtpicker-overlay {
    z-index: 999999 !important
}

.validateText {
    margin-top: 4px;
    font-size: 12px;
    color: red !important
}

.validate-text {
    font-size: 12px;
    font-weight: 400;
    color: red;
    position: absolute;
    right: 0;
    top: 56px;
    line-height: 14px
}

.ui-autocomplete {
    width: 14vw !important;
    list-style: none;
    background-color: white;
    border: 1px solid #e0dada;
    border-radius: 5px;
    z-index: 0;
    padding-left: 0px
}

@media (max-width: 480px) {
    .ui-autocomplete {
        width: 89vw !important
    }
}

.ui-autocomplete .ui-menu-item {
    padding: 6px 6px
}

    .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
        padding: 6px 0px 6px 12px
    }

    .ui-autocomplete .ui-menu-item:hover {
        background-color: #eaeff2;
        cursor: pointer
    }

@media (max-height: 688px) {
    .formAreaLoginWrapper {
        align-items: baseline;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-x: hidden
    }
}

@media (max-height: 688px) {
    .formAreaLoginWrapper .formAreaLogin {
        height: calc((100vh) - 330px)
    }
}

.select2-container--default .select2-selection--single {
    border: 1px solid transparent !important
}

.dropdown__switch:checked + .dropdown__options-filter .dropdown__select {
    z-index: 1
}

.dropdown__switch:checked + .dropdown__options-filter .dropdown__filter:after {
    transform: rotate(-135deg)
}

.dropdown__options-filter {
    width: 100%;
    cursor: pointer
}

.dropdown__filter {
    position: relative;
    display: flex;
    padding: 20px;
    color: var(--white);
    border-radius: 30px;
    transition: 0.3s
}

@media (max-width: 991px) {
    .dropdown__filter {
        color: #2D2D2D
    }
}

.dropdown__select {
    position: absolute;
    top: 147%;
    left: -60px;
    width: 100%;
    margin-top: 5px;
    box-shadow: 0 5px 10px 0 rgba(56,56,56,0.15);
    transform: scaleY(0);
    transform-origin: top;
    font-weight: 300;
    transition: 0.2s ease-in-out
}

@media (max-width: 991px) {
    .dropdown__select {
        left: 0px;
        top: 120%
    }
}

.dropdown__select-option {
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #d6d6d6;
    transition: 0.3s
}

    .dropdown__select-option:last-of-type {
        border-bottom: 0
    }

    .dropdown__select-option:hover {
        background-color: #f9f9f9
    }

.dropdown .dropdown__filter-selected {
    margin-bottom: 0 !important
}

@media (max-width: 991px) {
    .dropdown .dropdown__filter {
        height: 22px
    }
}

.dropdown .dropdown__select {
    width: 210px !important;
    flex-direction: column
}

    .dropdown .dropdown__select::after {
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        top: -6px;
        width: 13px;
        height: 6px;
        background-color: var(--theme-colour1);
        z-index: 1111111;
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto
    }

    .dropdown .dropdown__select .dropdown__select-option {
        width: 100%;
        padding: 8px 14px;
        color: var(--theme-text-colour);
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        border: none;
        margin-bottom: 0 !important
    }

@media (max-width: 1199px) {
    .dropdown .dropdown__select .dropdown__select-option {
        padding: 3px 12px !important
    }
}

.dropdown .dropdown__select .dropdown__select-option:hover {
    color: var(--cF3);
    background-color: var(--theme-colour1) !important
}

    .dropdown .dropdown__select .dropdown__select-option:hover a {
        color: var(--white) !important
    }

.dropdown .dropdown__select .dropdown__select-option.innerActive {
    color: var(--cF3);
    background-color: var(--white)
}

    .dropdown .dropdown__select .dropdown__select-option.innerActive a {
        color: black
    }

.dropdown .dropdown__select .dropdown__select-option:first-child {
    border-radius: 5px 5px 0 0
}

.dropdown .dropdown__select .dropdown__select-option:last-child {
    border-radius: 0 0 5px 5px
}

.dropdown .dropdown__select .dropdown__select-option a {
    color: white;
    transition: auto;
    display: block !important;
    padding: 0 !important
}

.printer {
    font: 14px Arial;
    color: #000;
    width: 18cm;
    margin: auto;
    padding: 15px 0
}

    .printer header {
        text-align: left;
        background: transparent
    }

        .printer header img {
            display: inline-block
        }

    .printer div h4 a {
        text-decoration: underline
    }

    .printer .print-left {
        float: left;
        width: 320px
    }

        .printer .print-left .print-horo {
            border: 1px solid #afafaf;
            width: 100%;
            min-height: 150px;
            margin: 10px 0;
            padding: 2px
        }

            .printer .print-left .print-horo .cell-flex {
                display: -webkit-flex;
                display: -moz-flex;
                display: -ms-flex;
                display: -o-flex;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: stretch;
                text-align: center
            }

                .printer .print-left .print-horo .cell-flex .cells {
                    border: 1px solid #afafaf;
                    width: calc(100% / 4);
                    min-height: 50px;
                    margin: 0 0 2px 2px
                }

                    .printer .print-left .print-horo .cell-flex .cells img {
                        display: none;
                        height: 20px;
                        margin-bottom: 2px
                    }

            .printer .print-left .print-horo .cell-flex2 {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: stretch;
                text-align: center
            }

                .printer .print-left .print-horo .cell-flex2 .cells {
                    width: calc((100% / 4) - 2px);
                    border: 1px solid #afafaf;
                    min-height: 50px;
                    margin: 0 0 2px 2px
                }

                    .printer .print-left .print-horo .cell-flex2 .cells img {
                        display: none;
                        height: 20px;
                        margin-bottom: 2px
                    }

                .printer .print-left .print-horo .cell-flex2 .cells2 {
                    width: calc(100% / 2);
                    border: none;
                    text-align: center;
                    position: relative;
                    min-height: 50px;
                    margin: 0 0 2px 2px
                }

                    .printer .print-left .print-horo .cell-flex2 .cells2 .absolute {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%
                    }

                        .printer .print-left .print-horo .cell-flex2 .cells2 .absolute .tabled {
                            display: table;
                            width: 100%;
                            height: 100%;
                            border: none
                        }

                            .printer .print-left .print-horo .cell-flex2 .cells2 .absolute .tabled .celled {
                                display: table-cell;
                                vertical-align: middle
                            }

                                .printer .print-left .print-horo .cell-flex2 .cells2 .absolute .tabled .celled i {
                                    font-style: normal;
                                    display: block;
                                    vertical-align: middle;
                                    text-transform: capitalize
                                }

    .printer .print-right {
        width: 320px;
        float: right
    }

        .printer .print-right strong {
            margin: 0px 0 5px;
            display: block
        }

        .printer .print-right .print-horo {
            border: 1px solid #afafaf;
            width: 100%;
            min-height: 150px;
            margin: 10px 0;
            padding: 2px
        }

            .printer .print-right .print-horo .cell-flex {
                display: -webkit-flex;
                display: -moz-flex;
                display: -ms-flex;
                display: -o-flex;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: stretch;
                text-align: center
            }

                .printer .print-right .print-horo .cell-flex .cells {
                    border: 1px solid #afafaf;
                    width: calc(100% / 4);
                    min-height: 50px;
                    margin: 0 0 2px 2px
                }

                    .printer .print-right .print-horo .cell-flex .cells img {
                        display: none;
                        height: 20px;
                        margin-bottom: 2px
                    }

            .printer .print-right .print-horo .cell-flex2 {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: stretch;
                text-align: center
            }

                .printer .print-right .print-horo .cell-flex2 .cells {
                    width: calc((100% / 4) - 2px);
                    border: 1px solid #afafaf;
                    min-height: 50px;
                    margin: 0 0 2px 2px
                }

                    .printer .print-right .print-horo .cell-flex2 .cells img {
                        display: none;
                        height: 20px;
                        margin-bottom: 2px
                    }

                .printer .print-right .print-horo .cell-flex2 .cells2 {
                    width: calc(100% / 2);
                    border: none;
                    text-align: center;
                    position: relative;
                    min-height: 50px;
                    margin: 0 0 2px 2px
                }

                    .printer .print-right .print-horo .cell-flex2 .cells2 .absolute {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%
                    }

                        .printer .print-right .print-horo .cell-flex2 .cells2 .absolute .tabled {
                            display: table;
                            width: 100%;
                            height: 100%;
                            border: none
                        }

                            .printer .print-right .print-horo .cell-flex2 .cells2 .absolute .tabled .celled {
                                display: table-cell;
                                vertical-align: middle
                            }

                                .printer .print-right .print-horo .cell-flex2 .cells2 .absolute .tabled .celled i {
                                    font-style: normal;
                                    display: block;
                                    vertical-align: middle;
                                    text-transform: capitalize
                                }

    .printer .print-style .person {
        width: 166px;
        height: 164px;
        background: #fff;
        margin-bottom: 15px
    }

    .printer .print-style .print-title {
        margin: 15px 0 5px;
        text-transform: capitalize;
        font-weight: bold
    }

        .printer .print-style .print-title a {
            color: var(--theme-colour2);
            text-decoration: underline
        }

    .printer .print-style p {
        line-height: 20px;
        margin-bottom: 0;
        color: #828282;
        text-align: left
    }

        .printer .print-style p em {
            text-transform: capitalize;
            font-style: normal;
            display: inline-block;
            vertical-align: middle
        }

.cmnDwsWht {
    background-color: #f2f2f2 !important;
    pointer-events: none
}

.cmnDws {
    background-color: #e9eef2 !important;
    pointer-events: none
}

.edit-locationHolder {
    max-width: 500px !important;
    width: 100% !important;
    background: #ffffff !important
}

@media (max-width: 767px) {
    .edit-locationHolder {
        margin: 8px
    }
}

.edit-locationHolder .editor-title {
    font-family: 'Rubik', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
    color: #434343 !important
}

.edit-locationHolder .select2-container {
    background-color: var(--white);
    width: 100% !important;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-image: initial;
    border-radius: 4px
}

.edit-locationHolder .select2-container--default .select2-selection--multiple {
    min-height: 46px;
    display: flex;
    align-items: center;
    outline: 0px;
    border-width: initial !important;
    border-style: none !important;
    border-color: initial !important;
    border-image: initial !important
}

.edit-locationHolder .relative {
    padding: 5px 0
}

.edit-locationHolder .editor-submit {
    font-family: 'Rubik', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    color: #FAFAFA !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 218px;
    height: 46px;
    background-color: var(--theme-colour1) !important;
    border-radius: 5px !important;
    cursor: pointer;
    border: none !important;
    outline: none;
    transition: ease-in-out 0.4s;
    margin: auto;
    text-transform: capitalize !important
}

.edit-locationHolder .close-default-popup.minimize-accordion img {
    width: 13px;
    margin-top: 8px
}

.edit-locationHolder .select-dropdown p {
    font-family: 'Rubik', sans-serif !important;
    color: #434343 !important
}

.edit-locationHolder .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e8eff4;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    padding-left: 20px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap
}

.edit-locationHolder .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #ddd;
    color: #b1b1b1;
    padding: 2px 4px;
    font-size: 15px
}

.edit-locationHolder .select2-selection__choice__display {
    font-family: 'Rubik', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    color: #2D2D2D;
    font-style: normal
}

.overHiddenDiv {
    overflow: hidden
}

.filterSideSpcl {
    overflow: initial !important
}

.loaderSpcl::after {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    align-items: center;
    justify-content: center;
    content: " ";
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid var(--theme-colour1);
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@media not all and (min-resolution: 0.001dpcm) {
    .modalWidetSuccess .modalRow .qucklink .link a input {
        margin: 0px 10px
    }
}

.middleContentSub {
    grid-template-columns: 1fr 1fr 1fr !important
}

@media (max-width: 1154px) {
    .middleContentSub {
        grid-template-columns: 1fr 1fr !important
    }
}

@media (max-width: 767px) {
    .middleContentSub {
        grid-template-columns: 1fr !important
    }
}

.landingModBody .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--theme-colour1);
    color: white
}

a img {
    color: #484848
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--theme-colour1) !important
}

.fancybox-container {
    z-index: 999999
}

.modalWidetSuccess.aadharVerifyModal .modalheader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0px 20px;
    border-bottom: 1px solid #e0e0e0;
    justify-content: space-between
}

@media (max-width: 767px) {
    .modalWidetSuccess.aadharVerifyModal .modalRow {
        padding: 25px 20px
    }
}

.modalWidetSuccess.aadharVerifyModal .aadhaar-icon {
    width: 48px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.modalWidetSuccess.aadharVerifyModal .divScrl {
    max-height: calc((100dvh) - 310px);
    overflow-y: auto;
    scrollbar-color: #888888 #f1f1f1;
    scrollbar-width: thin !important;
    overflow-x: hidden;
    height: 100%;
    padding-right: 10px;
    margin-bottom: 30px
}

@media (max-width: 767px) {
    .modalWidetSuccess.aadharVerifyModal .divScrl {
        max-height: calc((100dvh) - 430px);
        margin-bottom: 10px
    }
}

.modalWidetSuccess.aadharVerifyModal .titleHead h1 {
    font-size: 35px;
    font-weight: 600;
    color: #333333
}

@media (max-width: 767px) {
    .modalWidetSuccess.aadharVerifyModal .titleHead h1 {
        font-size: 22px
    }
}

.modalWidetSuccess.aadharVerifyModal .content {
    padding: 20px 0 0
}

.modalWidetSuccess.aadharVerifyModal .section {
    margin-bottom: 32px
}

@media (max-width: 767px) {
    .modalWidetSuccess.aadharVerifyModal .section {
        margin-bottom: 15px
    }
}

.modalWidetSuccess.aadharVerifyModal .section:last-child {
    margin-bottom: 0
}

.modalWidetSuccess.aadharVerifyModal .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 16px
}

.modalWidetSuccess.aadharVerifyModal .detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 20px
}

.modalWidetSuccess.aadharVerifyModal .detail-label {
    font-size: 14px;
    color: #999999;
    flex-shrink: 0;
    min-width: 140px
}

.modalWidetSuccess.aadharVerifyModal .detail-value {
    font-size: 14px;
    color: #333333;
    text-align: right;
    flex: 1
}

.modalWidetSuccess.aadharVerifyModal .address-value {
    background-color: #f8f8f8;
    padding: 12px;
    border-radius: 4px;
    line-height: 1.5
}

.modalWidetSuccess.aadharVerifyModal .info-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background-color: #e3f2fd;
    border-radius: 8px;
    margin-bottom: 20px
}

.modalWidetSuccess.aadharVerifyModal .info-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #2196f3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2196f3;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px
}

.modalWidetSuccess.aadharVerifyModal .info-text {
    font-size: 13px;
    color: #666666;
    line-height: 1.5
}

.modalWidetSuccess.aadharVerifyModal .titleHead {
    display: flex;
    align-items: center;
    gap: 15px
}

.modalWidetSuccess.aadharVerifyModal .button-group {
    display: flex;
    justify-content: flex-end;
    gap: 12px
}

.modalWidetSuccess.aadharVerifyModal .btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    max-width: fit-content
}

.modalWidetSuccess.aadharVerifyModal .btn-primary {
    background-color: #0288d1;
    color: #ffffff
}

    .modalWidetSuccess.aadharVerifyModal .btn-primary:hover {
        background-color: #0277bd
    }

    .modalWidetSuccess.aadharVerifyModal .btn-primary:active {
        transform: scale(0.98)
    }

.modalWidetSuccess.aadharVerifyModal .btn-secondary {
    background-color: transparent;
    color: #666666;
    background-color: #f5f5f5
}

    .modalWidetSuccess.aadharVerifyModal .btn-secondary:hover {
        background-color: #d4d3d3
    }

.banner {
    position: relative;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70vh
}

@media (max-width: 1199px) {
    .banner {
        height: 62vh
    }
}

@media (max-width: 991px) {
    .banner {
        background-position: center center;
        height: 70vh
    }
}

@media (max-width: 480px) {
    .banner {
        height: 100%;
        max-height: 400px
    }
}

.banner img {
    background: #e5e5e5;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 480px) {
    .banner img {
        max-height: 400px
    }
}

.banner .bannerImgIcon {
    position: absolute;
    right: 14px;
    bottom: 80px
}

@media (max-width: 767px) {
    .banner .bannerImgIcon {
        max-width: 120px;
        width: 100%;
        height: auto
    }
}

@media (max-width: 480px) {
    .banner .bannerImgIcon {
        display: none
    }
}

@media (max-width: 767px) {
    .banner .bannerImgIcon svg {
        width: 100%;
        height: auto
    }
}

@media (max-width: 1199px) {
    .bannerImgIconNair {
        display: none
    }
}

.bannerImgIconNair h3 {
    font-size: 45px;
    font-weight: 800;
    line-height: 57px;
    color: rgba(249,249,249,0.3);
    position: absolute;
    left: -150px;
    transform: rotate(-90deg);
    top: 44%;
    z-index: 1;
    cursor: pointer
}

    .bannerImgIconNair h3:hover {
        color: #a8a8a8
    }

.tabArea {
    width: 1108px;
    height: auto;
    margin: auto;
    background: #ffffff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
    border-radius: 19px;
    transform: translateY(-80px)
}

@media (max-width: 1366px) {
    .tabArea {
        width: 85%;
        height: auto
    }
}

@media (max-width: 1024px) {
    .tabArea {
        width: 85%;
        height: auto
    }
}

@media (max-width: 767px) {
    .tabArea {
        width: 90%
    }
}

@media (max-width: 480px) {
    .tabArea {
        border-radius: 9px;
        background: #f7f7f7
    }
}

@media (max-width: 375px) {
    .tabArea {
        width: 95%;
        height: auto
    }
}

@media (max-width: 480px) {
    .tabArea.tabAreaHome {
        transform: translateY(-40px)
    }
}

@media (max-width: 480px) {
    .tabArea .tab {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

.tabArea .form-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 44px
}

@media (max-width: 1199px) {
    .tabArea .form-content {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 24px
    }
}

@media (max-width: 767px) {
    .tabArea .form-content {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .tabArea .form-content {
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        margin-top: 16px
    }
}

.tabArea .form-content .inputArea {
    display: inline-grid;
    background: #ffffff;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    width: 159px;
    height: 46px;
    padding: 3px 13px;
    margin-bottom: 10px
}

@media (max-width: 1199px) {
    .tabArea .form-content .inputArea {
        width: 100%
    }
}

@media (max-width: 480px) {
    .tabArea .form-content .inputArea {
        padding: 0px;
        margin-bottom: 10px;
        background: transparent;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
        height: auto
    }
}

.tabArea .form-content .inputArea label {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    font-family: "Rubik";
    color: #444444
}

@media (max-width: 480px) {
    .tabArea .form-content .inputArea label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
        color: #000000
    }
}

.tabArea .form-content .inputArea .rangeAge {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    column-gap: 5px
}

    .tabArea .form-content .inputArea .rangeAge .line {
        border-right: 1px solid #bcbbbb
    }

@media (max-width: 480px) {
    .tabArea .form-content .inputArea .rangeAge .line {
        border-right: 1px solid #f7f7f7
    }
}

.tabArea .form-content .inputArea select {
    border: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #797373;
    border: none;
    margin-left: -4px
}

@media (max-width: 480px) {
    .tabArea .form-content .inputArea select {
        padding: 6px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        height: 37px
    }
}

.tabArea .form-content .inputArea button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    background: var(--theme-colour1);
    width: 100%;
    height: 46px;
    padding: 3px 8px;
    border-radius: 10px
}

    .tabArea .form-content .inputArea button:hover {
        background-color: var(--theme-colour2)
    }

.tabArea .form-content .inputArea.button {
    color: white;
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    width: 100%;
    padding: 0
}

@media (max-width: 480px) {
    .tabArea .form-content .inputArea.button {
        display: none
    }
}

.tabArea .form-content .inputArea.button:hover {
    background: var(--theme-colour2)
}

.tabArea .form-content .inputArea .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343
}

    .tabArea .form-content .inputArea .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0
    }

.tabArea .form-contentNair {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    margin-bottom: 25px
}

@media (max-width: 1199px) {
    .tabArea .form-contentNair {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 767px) {
    .tabArea .form-contentNair {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .tabArea .form-contentNair {
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        margin-top: 16px
    }
}

.tabArea .form-contentNair .inputArea {
    width: 100%;
    height: 43px;
    padding: 3px 8px;
    display: inline-grid;
    background: #ffffff;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px
}

@media (max-width: 1199px) {
    .tabArea .form-contentNair .inputArea {
        width: 100%;
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .tabArea .form-contentNair .inputArea {
        padding: 0px;
        margin-bottom: 10px;
        background: transparent;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15)
    }
}

.tabArea .form-contentNair .inputArea label {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #444444
}

@media (max-width: 480px) {
    .tabArea .form-contentNair .inputArea label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
        color: #000000
    }
}

.tabArea .form-contentNair .inputArea select {
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #797373;
    border: none
}

@media (max-width: 480px) {
    .tabArea .form-contentNair .inputArea select {
        padding: 6px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.tabArea .form-contentNair .inputArea button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff
}

.tabArea .form-contentNair .inputArea.button {
    color: white;
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px
}

@media (max-width: 480px) {
    .tabArea .form-contentNair .inputArea.button {
        display: none
    }
}

.tabArea .form-contentNair .inputArea.button:hover {
    background: var(--theme-colour2)
}

.tabArea .buttonRespon {
    display: none
}

@media (max-width: 480px) {
    .tabArea .buttonRespon {
        display: block
    }
}

.tabArea .buttonRespon button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: white;
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    display: flex;
    height: 40px;
    width: 100%;
    justify-content: center;
    align-items: center
}

.tabArea .form-content-register {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 8px
}

@media (max-width: 1199px) {
    .tabArea .form-content-register {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 24px
    }
}

@media (max-width: 767px) {
    .tabArea .form-content-register {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .tabArea .form-content-register {
        grid-template-columns: 1fr 1fr;
        column-gap: 10px
    }
}

.tabArea .form-content-register .inputArea {
    width: 227.68px;
    height: 50px;
    padding: 3px 8px;
    margin-bottom: 10px;
    display: inline-grid;
    background: #ffffff;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px
}

@media (max-width: 1199px) {
    .tabArea .form-content-register .inputArea {
        width: 100%
    }
}

@media (max-width: 480px) {
    .tabArea .form-content-register .inputArea {
        padding: 0px;
        width: 100%;
        margin-bottom: 5px;
        height: auto;
        background: transparent;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15)
    }
}

.tabArea .form-content-register .inputArea label {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #444444
}

@media (max-width: 480px) {
    .tabArea .form-content-register .inputArea label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 6px;
        line-height: 17px;
        letter-spacing: -0.02em;
        color: #000000
    }
}

.tabArea .form-content-register .inputArea select {
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #797373;
    border: none
}

@media (max-width: 480px) {
    .tabArea .form-content-register .inputArea select {
        padding: 6px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        border-radius: 6px;
        height: 37px
    }
}

.tabArea .form-content-register .inputArea input {
    border: none;
    outline: none;
    width: 100%
}

@media (max-width: 480px) {
    .tabArea .form-content-register .inputArea input {
        padding: 6px;
        border-radius: 6px;
        width: 100%
    }
}

.tabArea .form-content-register .inputArea button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    width: 227.68px;
    height: 43px;
    padding: 3px 8px
}

@media (max-width: 1199px) {
    .tabArea .form-content-register .inputArea button {
        width: 100%
    }
}

.tabArea .form-content-register .inputArea.button {
    color: white;
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px
}

@media (max-width: 480px) {
    .tabArea .form-content-register .inputArea.button {
        margin-top: 10px
    }
}

.tabArea .form-content-register .inputArea.button:hover {
    background: var(--theme-colour2)
}

@media (max-width: 480px) {
    .tabArea .form-content-register .inputArea.inputMobile {
        display: none
    }
}

.tabArea .validateText {
    margin-top: 1px;
    font-size: 11px
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 19px;
    font-size: 22px
}

@media (max-width: 480px) {
    .header {
        display: block
    }
}

.header .left-contenttitle {
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    font-family: Rubik;
    color: #000000;
    margin-left: 10px
}

@media (max-width: 480px) {
    .header .left-contenttitle {
        margin-left: 0px
    }
}

@media (max-width: 991px) {
    .header .viewMore {
        display: none
    }
}

.header .viewMore a {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--theme-colour1)
}

    .header .viewMore a svg path {
        fill: var(--theme-colour1)
    }

.headerLeft {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 19px;
    font-size: 22px;
    color: #000000
}

    .headerLeft .left-contenttitle {
        font-size: 22px;
        font-weight: 700;
        line-height: 26px;
        font-family: Rubik;
        color: #000000;
        margin-left: 10px
    }

.slider1 {
    transform: translateY(-50px)
}

    .slider1 .template-container {
        margin: 0px auto
    }

        .slider1 .template-container .wrapperImg {
            width: 195px;
            max-width: 195px;
            padding-left: 10px
        }

@media (max-width: 1024px) {
    .slider1 .template-container .wrapperImg:hover img {
        transform: none
    }
}

.slider1 .template-container .wrapperImg:hover .details {
    opacity: 1;
    z-index: 999;
    transform: none
}

.slider1 .template-container .wrapperImg img {
    overflow: hidden;
    display: block;
    width: 195px;
    max-width: 195px;
    -webkit-transform-style: preserve-3d;
    height: 248px;
    max-height: 248px;
    border-radius: 19px
}

.slider1 .template-container .wrapperImg .footername {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    font-family: Rubik;
    margin-top: 7px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
    color: #313131
}

.slider1 .template-container .wrapperImg .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    font-family: Rubik;
    margin-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 200px;
    color: #000000
}

.slider1 .template-container .wrapperImg .details {
    position: absolute;
    width: 197px;
    max-width: 197px;
    margin-left: -1px;
    left: 11px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    bottom: 0;
    opacity: 0;
    background: #ffffff;
    border-radius: 9px;
    border: 1px solid #EFEFEF;
    padding: 10px;
    z-index: 999;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08)
}

    .slider1 .template-container .wrapperImg .details .namesection {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px
    }

        .slider1 .template-container .wrapperImg .details .namesection .name {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            font-family: Rubik;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100px
        }

    .slider1 .template-container .wrapperImg .details .fullSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr
    }

        .slider1 .template-container .wrapperImg .details .fullSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .slider1 .template-container .wrapperImg .details .fullSize li span {
                width: 16px;
                margin-right: 6px
            }

    .slider1 .template-container .wrapperImg .details .smlSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

        .slider1 .template-container .wrapperImg .details .smlSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .slider1 .template-container .wrapperImg .details .smlSize li span {
                width: 16px;
                margin-right: 6px
            }

    .slider1 .template-container .wrapperImg .details .viewprofile {
        color: var(--white);
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        width: 100px;
        height: 32px;
        background: var(--theme-colour1);
        border-radius: 7px;
        margin: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease-in-out;
        margin-left: 0
    }

        .slider1 .template-container .wrapperImg .details .viewprofile:hover {
            background: var(--theme-colour2)
        }

        .slider1 .template-container .wrapperImg .details .viewprofile a {
            color: var(--white)
        }

.slider2 .w3_agileits_testimonials_grid {
    position: relative;
    overflow: hidden
}

    .slider2 .w3_agileits_testimonials_grid img {
        max-height: 225px;
        height: 225px;
        border-radius: 19px
    }

    .slider2 .w3_agileits_testimonials_grid:hover img {
        filter: blur(0.5px)
    }

    .slider2 .w3_agileits_testimonials_grid:hover .photo {
        opacity: 1
    }

    .slider2 .w3_agileits_testimonials_grid.vdo .playIcn {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

    .slider2 .w3_agileits_testimonials_grid .photo {
        transition: all 300ms ease 0s;
        position: absolute;
        background: rgba(19,17,17,0.5);
        width: 100%;
        max-height: 225px;
        height: 225px;
        opacity: 0;
        z-index: 999;
        border-radius: 19px
    }

        .slider2 .w3_agileits_testimonials_grid .photo .content {
            padding: 14px 30px 22px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            row-gap: 125px
        }

            .slider2 .w3_agileits_testimonials_grid .photo .content .topleft {
                font-size: 14px;
                font-weight: 700;
                line-height: 16px;
                font-family: Rubik;
                color: #ffffff;
                display: flex;
                align-items: center
            }

                .slider2 .w3_agileits_testimonials_grid .photo .content .topleft svg {
                    margin-right: 8px
                }

            .slider2 .w3_agileits_testimonials_grid .photo .content .topBottom .name {
                font-size: 25px;
                font-weight: 700;
                line-height: 30px;
                font-family: Rubik;
                color: #ffffff;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden
            }

            .slider2 .w3_agileits_testimonials_grid .photo .content .topBottom .code {
                display: grid;
                grid-template-columns: 115px 20px 1fr;
                margin-top: 8px;
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                font-family: Rubik;
                color: #ffffff;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden
            }

        .slider2 .w3_agileits_testimonials_grid .photo h5 {
            color: #00b5b5;
            font-size: 1.8em;
            margin: 2.8em 0 0 0;
            text-align: center;
            text-transform: uppercase
        }

            .slider2 .w3_agileits_testimonials_grid .photo h5 span {
                display: block;
                padding: 10px 0;
                margin: 11px 20px 20px 20px;
                font-weight: normal;
                text-transform: capitalize;
                color: rgba(255,255,255,0.9);
                text-align: center;
                font-size: 0.9em;
                letter-spacing: 1px;
                line-height: 2em
            }

    .slider2 .w3_agileits_testimonials_grid .footername {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        font-family: Rubik;
        margin-top: 4px
    }

    .slider2 .w3_agileits_testimonials_grid .namecode {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        font-family: Rubik;
        margin-top: 2px
    }

.tabareaCast .w3_agileits_testimonials_grid img {
    width: 195px;
    max-width: 195px;
    height: 248px;
    max-height: 248px;
    border-radius: 19px
}

.tabareaCast .w3_agileits_testimonials_grid .footername {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    font-family: Rubik;
    margin-top: 6px;
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #313131
}

.tabareaCast .w3_agileits_testimonials_grid .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    font-family: Rubik;
    margin-top: 2px;
    width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #000000
}

.registerMain {
    margin: 54px 0px 57px 0px
}

@media (max-width: 480px) {
    .registerMain {
        margin: 17px 0px 17px 0px
    }
}

.registerMain .template-container .content {
    display: grid;
    grid-template-columns: 566px 1fr;
    align-items: center;
    height: auto;
    width: 100%;
    background-image: url(../images/banner1.png);
    border-radius: 19px;
    padding: 27px 93px 34px 42px;
    background-size: cover
}

@media (max-width: 1199px) {
    .registerMain .template-container .content {
        grid-template-columns: 430px 1fr;
        padding: 27px 42px 34px 42px
    }
}

@media (max-width: 991px) {
    .registerMain .template-container .content {
        grid-template-columns: 310px 1fr;
        padding: 27px 42px 34px 42px
    }
}

@media (max-width: 767px) {
    .registerMain .template-container .content {
        display: flex;
        flex-direction: column;
        column-gap: 10px
    }
}

@media (max-width: 480px) {
    .registerMain .template-container .content {
        grid-template-columns: 1fr;
        padding: 9px 69px 16px 69px
    }
}

@media (max-width: 375px) {
    .registerMain .template-container .content {
        grid-template-columns: 1fr;
        padding: 20px 30px
    }
}

.registerMain .template-container .content .left-content {
    display: grid;
    row-gap: 10px
}

@media (max-width: 480px) {
    .registerMain .template-container .content .left-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

.registerMain .template-container .content .left-content .marriage {
    font-size: 56px;
    font-weight: 600;
    line-height: 92.5%;
    color: var(--lightDrkBg)
}

@media (max-width: 1199px) {
    .registerMain .template-container .content .left-content .marriage {
        font-size: 40px;
        font-weight: 600;
        line-height: 92.5%
    }
}

@media (max-width: 991px) {
    .registerMain .template-container .content .left-content .marriage {
        font-size: 30px;
        font-weight: 600;
        line-height: 35px
    }
}

@media (max-width: 480px) {
    .registerMain .template-container .content .left-content .marriage {
        font-size: 20px;
        font-weight: 400;
        line-height: 16px
    }
}

.registerMain .template-container .content .left-content .story {
    font-size: 60px;
    font-weight: 700;
    line-height: 92.5%;
    color: #ffffff
}

@media (max-width: 1199px) {
    .registerMain .template-container .content .left-content .story {
        font-size: 45px;
        font-weight: 700;
        line-height: 92.5%
    }
}

@media (max-width: 991px) {
    .registerMain .template-container .content .left-content .story {
        font-size: 30px;
        font-weight: 700;
        line-height: 35px
    }
}

@media (max-width: 480px) {
    .registerMain .template-container .content .left-content .story {
        font-size: 22px;
        font-weight: 400;
        line-height: 16px
    }
}

.registerMain .template-container .content .right-content {
    display: flex;
    justify-content: end
}

@media (max-width: 480px) {
    .registerMain .template-container .content .right-content {
        display: block
    }
}

.registerMain .template-container .content .right-content .contentRegister {
    background-color: var(--white);
    border-radius: 11px;
    padding: 10px 30px;
    font-size: 25px;
    font-weight: 700;
    line-height: 112.5%;
    color: var(--theme-colour1)
}

@media (max-width: 991px) {
    .registerMain .template-container .content .right-content .contentRegister {
        font-size: 20px
    }
}

@media (max-width: 767px) {
    .registerMain .template-container .content .right-content .contentRegister {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 700;
        line-height: 50%
    }
}

@media (max-width: 480px) {
    .registerMain .template-container .content .right-content .contentRegister {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        line-height: 17px
    }
}

.registerMain .template-container .content .right-content .contentRegister:hover {
    background: var(--theme-colour2);
    color: var(--white)
}

.Intimate-matrimony {
    background-color: #f0f0f0
}

    .Intimate-matrimony .template-container .Intimateheader {
        font-size: 22px;
        padding: 42px 0px 40px 0px;
        color: #000000
    }

@media (max-width: 480px) {
    .Intimate-matrimony .template-container .Intimateheader {
        padding: 15px 0px
    }
}

.Intimate-matrimony .template-container .Intimateheader strong {
    font-size: 22px;
    font-weight: 700;
    line-height: 26%;
    margin-left: 10px
}

.Intimate-matrimony .template-container .content {
    padding: 0px 5px 0px 5px
}

    .Intimate-matrimony .template-container .content .item {
        height: auto;
        background: #ffffff;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        border-radius: 15px
    }

        .Intimate-matrimony .template-container .content .item .feedBack {
            padding: 16px 22px 30px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            height: 217px;
            margin-bottom: 56px
        }

@media (max-width: 767px) {
    .Intimate-matrimony .template-container .content .item .feedBack {
        height: 160px
    }
}

@media (max-width: 480px) {
    .Intimate-matrimony .template-container .content .item .feedBack {
        margin-bottom: 10px;
        height: 140px
    }
}

.Intimate-matrimony .template-container .content .item .feedBack .count .numbers {
    font-size: 55px;
    font-weight: 700;
    line-height: 55px;
    color: #313131
}

@media (max-width: 1279px) {
    .Intimate-matrimony .template-container .content .item .feedBack .count .numbers {
        font-size: 40px;
        font-weight: 700;
        line-height: 35px
    }
}

@media (max-width: 991px) {
    .Intimate-matrimony .template-container .content .item .feedBack .count .numbers {
        font-size: 35px;
        font-weight: 700;
        line-height: 35px
    }
}

.Intimate-matrimony .template-container .content .item .feedBack .count label {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    width: 203px;
    max-width: 203px;
    height: 38px;
    max-height: 38px;
    margin-bottom: 71px;
    color: #000000
}

@media (max-width: 991px) {
    .Intimate-matrimony .template-container .content .item .feedBack .count label {
        font-size: 12px;
        font-weight: 400;
        line-height: 8px;
        margin-bottom: 50px
    }
}

@media (max-width: 767px) {
    .Intimate-matrimony .template-container .content .item .feedBack .count label {
        margin-bottom: 20px
    }
}

.Intimate-matrimony .template-container .content .item .feedBack .datetime {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 991px) {
    .Intimate-matrimony .template-container .content .item .feedBack .datetime {
        font-size: 12px;
        font-weight: 400;
        line-height: 8px
    }
}

.tab {
    overflow: hidden;
    display: flex;
    justify-content: center;
    border-radius: 9px 9px 0px 0px;
    margin-bottom: 23px
}

    .tab.tabt {
        margin-left: -25px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        margin-bottom: 0
    }

@media (max-width: 991px) {
    .tab.tabt {
        flex-direction: column
    }
}

@media (max-width: 480px) {
    .tab.tabt {
        border-radius: 0px;
        margin-left: 0px;
        display: grid;
        column-gap: 8px;
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 991px) {
    .tab.tabt {
        border-radius: 0px;
        margin-left: 0px;
        display: grid;
        column-gap: 8px;
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

@media (max-width: 767px) {
    .tab.tabt {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 480px) {
    .tab.tabt {
        border-radius: 0px;
        margin-left: 0px;
        display: grid;
        column-gap: 8px;
        grid-template-columns: 1fr 1fr
    }
}

.tab .tablinks {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    padding: 9px 15px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: #313131;
    margin-right: 10px;
    border-bottom: 2px solid var(--white);
    border-radius: 0
}

@media (max-width: 480px) {
    .tab .tablinks {
        padding: 0px;
        order: 2
    }
}

@media (max-width: 375px) {
    .tab .tablinks {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        text-align: center;
        margin-right: 0px;
        width: 100%
    }
}

.tab .tablinks:last-child {
    margin-right: 0px
}

.tab .tablinks.active {
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: var(--theme-colour1);
    border-bottom: 2px solid var(--theme-colour1)
}

@media (max-width: 480px) {
    .tab .tablinks.active {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #ffffff;
        width: 100%;
        background-color: var(--theme-colour1);
        height: 34.3px
    }
}

@media (max-width: 480px) {
    .tab .tablinks:hover {
        color: #ffffff;
        background-color: var(--theme-colour1);
        width: 100%
    }
}

@media (max-width: 480px) {
    .tab .tablinks.tabRegister {
        order: 1
    }
}

.tab .tablinkstab {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    margin-right: 38px;
    padding: 0px 0 0 16px;
    border-radius: 4px;
    transition: 0.3s;
    font-family: Rubik;
    letter-spacing: 0em;
    font-size: 18px;
    font-weight: 400;
    line-height: 21px
}

@media (max-width: 991px) {
    .tab .tablinkstab {
        background-color: #f4f4f4;
        margin-bottom: 10px;
        margin-right: 0px;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        height: 39px;
        padding: 5px 16px
    }
}

.tab .tablinkstab.active {
    color: var(--theme-colour1)
}

.tab .tablinkstab :hover {
    background-color: #884b4b
}

.tab .tablinkstab.viewAll {
    display: none
}

@media (max-width: 991px) {
    .tab .tablinkstab.viewAll {
        display: block
    }
}

.tabcontent {
    display: none;
    border-top: none;
    margin: auto 73px;
    padding-bottom: 15px
}

@media (max-width: 1024px) {
    .tabcontent {
        margin: auto 30px
    }
}

@media (max-width: 480px) {
    .tabcontent {
        margin: auto 6px auto 11px
    }
}

.tabcontent .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0
}

.tabcontentab {
    display: none;
    border-top: none
}

.owl-dots {
    display: none
}

.CircleSlider {
    background: var(--lightBg)
}

@media (max-width: 991px) {
    .CircleSlider {
        display: none
    }
}

@media (max-width: 480px) {
    .CircleSlider {
        display: none
    }
}

.CircleSlider .template-container .howitwork .header .Intimateheader {
    font-size: 22px;
    margin-top: 48px
}

    .CircleSlider .template-container .howitwork .header .Intimateheader strong {
        font-size: 22px;
        font-weight: 700;
        line-height: 26px
    }

.feedBack {
    padding-bottom: 60px
}

    .feedBack.feedBackHome {
        padding: 65px 0 35px !important
    }

@media (max-width: 767px) {
    .feedBack.feedBackHome {
        padding: 40px 0 !important
    }
}

@media (max-width: 480px) {
    .feedBack.feedBackHome {
        padding: 0px 0 !important
    }
}

.feedBack.feedBackHome .left img {
    margin-top: 0px !important
}

.feedBack.feedBackHome .right .headlabel {
    font-size: 31px !important;
    line-height: 36px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    max-width: 580px !important
}

@media (max-width: 767px) {
    .feedBack.feedBackHome .right .headlabel {
        font-size: 25px !important;
        line-height: 31px !important
    }
}

.feedBack.feedBackHome .right .star {
    margin-top: 40px !important
}

@media (max-width: 767px) {
    .feedBack.feedBackHome .right .star {
        margin-top: 20px !important
    }
}

.feedBack.feedBackHome .right .labelcontent {
    font-size: 25px !important;
    line-height: 29px !important;
    margin-top: 21px !important;
    margin-bottom: 44px !important;
    max-width: 430px !important
}

@media (max-width: 767px) {
    .feedBack.feedBackHome .right .labelcontent {
        font-size: 20px !important;
        line-height: 24px !important;
        margin-bottom: 24px !important
    }
}

.feedBack.feedBackHome .right .qucklink {
    font-size: 20px !important;
    line-height: 22px !important
}

    .feedBack.feedBackHome .right .qucklink .link {
        margin-top: 18px !important;
        margin-bottom: 33px !important
    }

@media (max-width: 767px) {
    .feedBack.feedBackHome .right .qucklink .link {
        margin-bottom: 20px !important
    }
}

@media (max-width: 480px) {
    .feedBack.feedBackHome .right .qucklink .link {
        margin-bottom: 0px !important
    }
}

.feedBack.feedBackHome .right .download {
    font-size: 20px !important;
    line-height: 24px !important
}

.feedBack.feedBackHome .right .downloadlink {
    box-sizing: border-box;
    margin-top: 13px !important;
    max-width: 479px !important;
    height: 50px !important;
    margin-bottom: 0px !important;
    column-gap: 0 !important
}

    .feedBack.feedBackHome .right .downloadlink .send {
        height: 50px !important
    }

    .feedBack.feedBackHome .right .downloadlink .phone input {
        font-size: 22px !important;
        line-height: 28px !important;
        letter-spacing: 2px !important;
        padding: 16px 0px 16px 12px !important;
        width: 256px;
        color: #8D8D8D !important
    }

@media (max-width: 767px) {
    .feedBack.feedBackHome .right .downloadlink .phone input {
        font-size: 20px !important;
        line-height: 27px !important;
        width: 210px
    }
}

.feedBack.feedBackHome .right .downloadlink .countrycode {
    font-size: 22px !important;
    line-height: 28px !important;
    padding: 16px 30px 16px 19px !important;
    color: #000000 !important;
    margin-left: 0px !important;
    border-right: 1px solid #7B7B7B !important
}

@media (max-width: 991px) {
    .feedBack.feedBackHome .right .downloadlink .countrycode {
        padding: 16px 24px 16px 19px !important
    }
}

@media (max-width: 767px) {
    .feedBack.feedBackHome .right .downloadlink .countrycode {
        font-size: 20px !important;
        line-height: 27px !important;
        padding: 16px 28px 16px 19px !important
    }
}

.feedBack .template-container .application {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px
}

@media (max-width: 767px) {
    .feedBack .template-container .application {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .feedBack .template-container .application {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .feedBack .template-container .application .left {
        display: none
    }
}

.feedBack .template-container .application .left img {
    height: auto;
    max-width: 540px;
    width: 100%;
    margin-top: 74px;
    background-repeat: no-repeat;
    background-size: cover
}

@media (max-width: 767px) {
    .feedBack .template-container .application .left img {
        margin-top: 25px
    }
}

.feedBack .template-container .application .right .headlabel {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: #313131;
    margin-top: 82px;
    margin-bottom: 24px;
    max-width: 453px
}

@media (max-width: 767px) {
    .feedBack .template-container .application .right .headlabel {
        font-size: 22px;
        font-weight: 700;
        line-height: 30px;
        margin: 10px 0px
    }
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .headlabel {
        display: none;
        margin-top: 0px;
        text-align: center;
        color: #313131;
        margin: 15px 0px
    }
}

.feedBack .template-container .application .right .headlabel-feedback {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    margin-top: 0px;
    text-align: center;
    color: #313131;
    display: none
}

@media (max-width: 767px) {
    .feedBack .template-container .application .right .headlabel-feedback {
        font-size: 14px;
        font-weight: 700;
        line-height: 17px
    }
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .headlabel-feedback {
        display: block;
        margin-bottom: 17px;
        margin-top: 23px;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px
    }
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .headlabel-feedback strong {
        font-weight: 700
    }
}

.feedBack .template-container .application .right .star svg {
    margin-right: 24px
}

    .feedBack .template-container .application .right .star svg path {
        fill: var(--theme-colour1)
    }

    .feedBack .template-container .application .right .star svg:last-child path {
        fill: var(--white);
        stroke: var(--theme-colour1)
    }

        .feedBack .template-container .application .right .star svg:last-child path:last-child {
            fill: var(--theme-colour1);
            stroke: var(--theme-colour1)
        }

@media (max-width: 480px) {
    .feedBack .template-container .application .right .star {
        display: none
    }
}

.feedBack .template-container .application .right .labelcontent {
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #3b3b3b;
    max-width: 319px;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 64px
}

@media (max-width: 767px) {
    .feedBack .template-container .application .right .labelcontent {
        font-size: 16px;
        font-weight: 400;
        line-height: 27px;
        margin: 15px 0px
    }
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .labelcontent {
        display: none;
        margin: 10px 0px
    }
}

.feedBack .template-container .application .right .qucklink {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: #000000
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .qucklink {
        text-align: center
    }
}

.feedBack .template-container .application .right .qucklink .link {
    margin-top: 20px;
    margin-bottom: 33px;
    display: flex
}

@media (max-width: 991px) {
    .feedBack .template-container .application .right .qucklink .link {
        display: flex
    }
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .qucklink .link {
        margin-top: 11px;
        margin-bottom: 15px;
        display: block
    }
}

.feedBack .template-container .application .right .qucklink .link img {
    margin-right: 10px;
    cursor: pointer;
    max-width: 231px;
    height: 71px;
    width: 100%
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .qucklink .link img {
        width: 40%
    }
}

.feedBack .template-container .application .right .download {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #000000
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .download {
        display: none
    }
}

.feedBack .template-container .application .right .downloadlink {
    box-sizing: border-box;
    margin-top: 11px;
    max-width: 450px;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    background: #eeeeee;
    border: 0.5px solid #7B7B7B;
    border-radius: 10px
}

@media (max-width: 480px) {
    .feedBack .template-container .application .right .downloadlink {
        display: none;
        margin-bottom: 30px
    }
}

.feedBack .template-container .application .right .downloadlink .send {
    width: 120px;
    min-width: 120px;
    height: 48px;
    color: var(--white);
    background: var(--theme-colour1);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer
}

@media (max-width: 767px) {
    .feedBack .template-container .application .right .downloadlink .send {
        margin-left: auto
    }
}

.feedBack .template-container .application .right .downloadlink .send:hover {
    background: var(--theme-colour2);
    color: var(--white)
}

.feedBack .template-container .application .right .downloadlink .send button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 21px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0.11em;
    color: #ffffff
}

.feedBack .template-container .application .right .downloadlink .phone {
    width: 100%
}

    .feedBack .template-container .application .right .downloadlink .phone input {
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        height: 48px;
        letter-spacing: 0.11em;
        border: none;
        background-color: #eeeeee;
        color: #8d8d8d;
        outline: none;
        padding: 16px 0px 16px 12px;
        width: 100%
    }

.feedBack .template-container .application .right .downloadlink .countrycode {
    padding: 16px 40px 16px 9px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    border-right: 1px solid #7B7B7B;
    height: 48px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px
}

@media (max-width: 480px) {
    .about .template-container {
        padding-left: 0px;
        padding-right: 0px
    }
}

.about .template-container .AboutIntimateMatrimony {
    display: grid;
    grid-template-columns: 1fr 1fr
}

@media (max-width: 1199px) {
    .about .template-container .AboutIntimateMatrimony {
        grid-template-columns: 1fr
    }
}

.about .template-container .AboutIntimateMatrimony .right {
    padding: 47px 37px 38px 46px;
    background-color: var(--theme-colour1);
    border-radius: 0px 20px 20px 0px
}

@media (max-width: 1199px) {
    .about .template-container .AboutIntimateMatrimony .right {
        border-radius: 20px;
        height: auto;
        margin-bottom: 20px
    }
}

@media (max-width: 480px) {
    .about .template-container .AboutIntimateMatrimony .right {
        margin-bottom: 0px
    }
}

@media (max-width: 680px) {
    .about .template-container .AboutIntimateMatrimony .right {
        padding: 25px
    }
}

@media (max-width: 480px) {
    .about .template-container .AboutIntimateMatrimony .right {
        border-radius: 0px 0px 0px 0px;
        padding: 20px 11px 31px 11px
    }
}

.about .template-container .AboutIntimateMatrimony .right .headerAbout span {
    font-size: 22px;
    color: #ffffff
}

.about .template-container .AboutIntimateMatrimony .right .headerAbout strong {
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: #ffffff
}

.about .template-container .AboutIntimateMatrimony .right p {
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    text-align: left;
    margin-bottom: 27px;
    margin-top: 16px;
    color: #ffffff
}

@media (max-width: 680px) {
    .about .template-container .AboutIntimateMatrimony .right p {
        margin-bottom: 20px
    }
}

@media (max-width: 480px) {
    .about .template-container .AboutIntimateMatrimony .right p {
        font-size: 14px;
        line-height: 22px
    }
}

.about .template-container .AboutIntimateMatrimony .right .knowMore {
    display: flex
}

    .about .template-container .AboutIntimateMatrimony .right .knowMore a {
        color: var(--theme-colour1);
        font-weight: 700;
        font-size: 15px;
        line-height: 112.5%;
        background: #ffffff;
        border-radius: 11px;
        padding: 12px 32px;
        cursor: pointer
    }

        .about .template-container .AboutIntimateMatrimony .right .knowMore a:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

@media (max-width: 480px) {
    .about .template-container .AboutIntimateMatrimony .right .knowMore {
        display: none
    }
}

.about .template-container .AboutIntimateMatrimony .left {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px 0px 0px 20px
}

@media (max-width: 1199px) {
    .about .template-container .AboutIntimateMatrimony .left {
        display: none
    }
}

@media (max-width: 480px) {
    .about .template-container .AboutIntimateMatrimony .left {
        display: block;
        height: 300px;
        border-radius: 0
    }
}

.about .template-container .AboutIntimateMatrimony .left img {
    height: 100%;
    width: auto;
    border-radius: 20px 0px 0px 20px
}

@media (max-width: 480px) {
    .about .template-container .AboutIntimateMatrimony .left img {
        border-radius: 0px 0px 0px 0px;
        margin-bottom: -5px
    }
}

.controls .controls__right svg {
    margin-right: 35px
}

.socialMediaRight {
    position: fixed;
    right: 85px;
    bottom: 20px;
    z-index: 1
}

@media (max-width: 767px) {
    .socialMediaRight {
        bottom: 4px
    }
}

@media (max-width: 1366px) {
    .socialMediaRight {
        right: 6px
    }
}

.socialMediaRight ul {
    padding-left: 0;
    margin: 0
}

    .socialMediaRight ul li {
        list-style: none;
        border: 8px solid transparent
    }

        .socialMediaRight ul li a {
            text-decoration: none;
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%
        }

@media (max-width: 991px) {
    .socialMediaRight ul li a {
        width: 50px;
        height: 50px
    }
}

.socialMediaRight ul li a.green {
    background-color: #4ccc5a
}

.socialMediaRight ul li a.blue {
    background-color: #0a3e6d
}

.marginTop {
    margin-top: 12%
}

.tabareaCast {
    margin-top: 72px
}

@media (max-width: 991px) {
    .tabareaCast {
        height: auto
    }
}

@media (max-width: 480px) {
    .tabareaCast {
        margin-top: 13px
    }
}

.tabareaCast .margin64 {
    margin-bottom: 65px
}

@media (max-width: 991px) {
    .tabareaCast .margin64 {
        max-width: 249px
    }
}

@media (max-width: 480px) {
    .tabareaCast .margin64 {
        margin-bottom: 35px
    }
}

.tabareaCast .margin64 .pic {
    overflow: hidden;
    padding-top: 100%;
    margin-bottom: 0;
    position: relative;
    width: 209px;
    height: 265px
}

    .tabareaCast .margin64 .pic img {
        position: absolute;
        margin: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 100%;
        vertical-align: top;
        -webkit-transition: opacity 1s, -webkit-transform 1s;
        transition: opacity 1s, transform 1s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.lides-holder {
    transform: none !important
}

@media (max-width: 480px) {
    .lides-holder .slides-holder__item {
        display: none
    }
}

.lides-holder .slides-holder__item-mobile {
    display: none !important
}

@media (max-width: 480px) {
    .lides-holder .slides-holder__item-mobile {
        display: block
    }
}

.slideshow {
    position: relative;
    overflow: hidden;
    display: none
}

@media (max-width: 991px) {
    .slideshow {
        display: block
    }
}

.slideshow .headerLeft {
    margin-top: 10px;
    margin-left: 11px
}

.slideshow .holder.holderOwl .quates img {
    width: auto
}

.slideshow .holder.holderOwl .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -21px
}

    .slideshow .holder.holderOwl .owl-dots .owl-dot {
        cursor: pointer;
        height: 14px;
        width: 10px;
        margin-right: 4px;
        border: 1px solid var(--theme-colour1);
        background-color: transparent;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease
    }

        .slideshow .holder.holderOwl .owl-dots .owl-dot.active {
            background-color: var(--theme-colour1)
        }

.slideshow .holder.holderOwl .fooetrRoyal img {
    width: auto
}

.slideshow .holder .owl-nav button {
    background-color: var(--white);
    padding: 8px 14px 8px 14px;
    margin-right: 10px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    bottom: 26px;
    display: flex;
    border: none;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    margin-left: 8px
}

    .slideshow .holder .owl-nav button:last-child {
        margin-left: 60px
    }

    .slideshow .holder .owl-nav button span {
        font-size: 19px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .slideshow .holder .owl-nav button:hover {
        color: var(--white);
        background-color: #00b5b5
    }

.slideshow .holder .slideSec {
    float: left;
    height: 50vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover
}

    .slideshow .holder .slideSec .slide-1 {
        background-image: url(../images/slider1.png);
        background-position: center right;
        background-repeat: no-repeat;
        background-size: cover
    }

    .slideshow .holder .slideSec .slide-2 {
        background-image: url(../images/slider2.png);
        background-position: center right;
        background-repeat: no-repeat;
        background-size: cover
    }

    .slideshow .holder .slideSec .slide-3 {
        background-image: url(../images/slider3.png);
        background-position: center right;
        background-repeat: no-repeat;
        background-size: cover
    }

    .slideshow .holder .slideSec .slide-4 {
        background-image: url(../images/slider4.png);
        background-position: center right;
        background-repeat: no-repeat;
        background-size: cover
    }

    .slideshow .holder .slideSec .copy-cta-container {
        position: absolute;
        width: 220px;
        height: auto;
        left: 7.07px;
        top: 27.3px;
        background: #ffffff;
        overflow: hidden;
        padding: 17px 8px 8px 8px;
        border-radius: 5px
    }

        .slideshow .holder .slideSec .copy-cta-container h1 {
            font-size: 22px;
            font-weight: 700;
            line-height: 26px;
            color: #313131
        }

        .slideshow .holder .slideSec .copy-cta-container p {
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: #2d2d2d;
            text-align: left
        }

        .slideshow .holder .slideSec .copy-cta-container .tick-content {
            text-align: left;
            font-size: 16px;
            font-weight: 400;
            line-height: 30px;
            margin-left: 40px;
            color: #0a3e6d;
            width: 70%
        }

            .slideshow .holder .slideSec .copy-cta-container .tick-content:before {
                content: "";
                width: 30px;
                height: 30px;
                background: url(../images/tick-content.png) 0 0 no-repeat;
                left: 0;
                position: absolute;
                display: inline-block
            }

        .slideshow .holder .slideSec .copy-cta-container.content-center {
            top: 42% !important
        }

    .slideshow .holder .slideSec button {
        border: none;
        background-color: transparent;
        font-size: 12px;
        font-weight: 600;
        line-height: 21px;
        text-align: center;
        color: #ffffff;
        width: 100%;
        height: 25.23px;
        background: var(--theme-colour1);
        border-radius: 5px;
        margin-bottom: 16px
    }

@media (max-width: 480px) {
    .slideshow .holder .slideSec button {
        width: auto
    }
}

.slideshow .holder .slideSec.button {
    color: var(--white);
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px
}

.slideshow .carousel-dots {
    position: absolute;
    bottom: 41px;
    width: 100%;
    text-align: center
}

    .slideshow .carousel-dots.carosel {
        right: 200px
    }

@media (max-width: 991px) {
    .slideshow .carousel-dots.carosel {
        right: -100px;
        bottom: 70px
    }
}

.slideshow .carousel-dots .dot {
    cursor: pointer;
    height: 8px;
    width: 8px;
    margin-right: 12px;
    background-color: #c2c3c6;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease
}

    .slideshow .carousel-dots .dot.active {
        background-color: #717171
    }

    .slideshow .carousel-dots .dot:hover {
        background-color: #717171
    }

a.prev, a.next {
    background-color: var(--white);
    padding: 8px 14px 8px 14px;
    margin-right: 10px;
    height: 40px;
    border-radius: 50%;
    width: 40px;
    cursor: pointer;
    z-index: 999
}

.prev {
    left: 10px
}

.next {
    right: 10px
}

.inputAreahidden {
    width: 100%;
    height: 43px;
    padding: 3px 8px;
    margin-bottom: 10px;
    display: inline-grid;
    background: #ffffff;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    display: none
}

@media (max-width: 480px) {
    .inputAreahidden {
        display: block;
        padding: 0px;
        width: 100%;
        margin-bottom: 10px;
        background: transparent;
        height: auto;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15)
    }
}

.inputAreahidden label {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #444444
}

@media (max-width: 480px) {
    .inputAreahidden label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
        color: #000000;
        display: block
    }
}

.inputAreahidden select {
    border: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #797373;
    border: none
}

@media (max-width: 480px) {
    .inputAreahidden select {
        padding: 6px;
        border-radius: 6px
    }
}

.inputAreahidden input {
    border: none
}

@media (max-width: 480px) {
    .inputAreahidden input {
        padding: 6px;
        border-radius: 6px;
        width: 100%;
        height: 37px
    }
}

.inputAreahidden button {
    width: 100%;
    height: 43px;
    border: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
    background-color: var(--theme-colour1)
}

.inputAreahidden.button {
    color: var(--white);
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px
}

@media (max-width: 480px) {
    .inputAreahidden.button {
        margin-top: 10px
    }
}

@media (max-width: 480px) {
    .inputAreahidden.inputMobile {
        display: none
    }
}

@media (max-width: 480px) {
    .banner1 {
        display: none
    }
}

.banner2 {
    display: none
}

@media (max-width: 480px) {
    .banner2 {
        display: block
    }
}

.border-rad {
    border-radius: 20px 20px 0px 0px;
    padding-bottom: 5px
}

hr {
    width: 100%;
    height: 1px;
    background-color: #d4d9dc !important;
    border: none
}

#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 140px;
    right: 25px;
    overflow: hidden;
    z-index: 999;
    width: 35px;
    height: 35px;
    border: none;
    text-indent: 100%;
    background: url(../images/top-arrow.png) no-repeat 0px 0px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%
}

#toTopHover {
    width: 35px;
    height: 35px;
    z-index: 999;
    display: block;
    overflow: hidden;
    float: right;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0)
}

@media (max-width: 1279px) {
    .descriptions {
        bottom: 70% !important;
        right: 25% !important
    }
}

@media (max-width: 1279px) {
    .controls {
        top: 0% !important;
        left: 20% !important
    }
}

.accordion {
    color: #444;
    cursor: pointer;
    padding: 10px 10px 10px 0px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    color: #252525;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    transition: 0.4s
}

.footeraccordion:after {
    content: url(../images/downArrow.svg);
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px
}

.panel {
    padding: 10px 18px 0;
    background-color: #f7f7f7;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out
}

    .panel .footerbody .accoList ul {
        padding-left: 0px;
        list-style: none
    }

        .panel .footerbody .accoList ul li a {
            color: #494949
        }

            .panel .footerbody .accoList ul li a:hover {
                color: blue
            }

.ui-helper-hidden-accessible {
    display: none !important
}

.toggleSwitch span .active {
    line-height: 33px;
    position: absolute;
    right: 50%;
    z-index: 4;
    display: block;
    top: 1px;
    bottom: 0px;
    padding: 0;
    left: -2px;
    height: fit-content;
    bottom: 0;
    width: 50%;
    background-color: var(--theme-colour1);
    border-radius: 19px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05)
}

.indexSlider .topScrlSliderHead {
    font-size: 22px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
    margin-top: 48px;
    padding-left: 20px;
    position: absolute
}

.indexSlider .page {
    overflow: hidden;
    height: 711px
}

.indexSlider .container {
    width: 711px;
    margin: -277px auto 0;
    overflow: hidden;
    height: 1260px;
    transform: rotate(-90deg)
}

.indexSlider .circle-carousel {
    position: relative;
    padding-top: 100%;
    height: 1130px;
    width: 1130px;
    overflow: hidden
}

.indexSlider .headerSlider h1 {
    font-size: 65px;
    font-weight: 700;
    line-height: 77px;
    color: #313131;
    max-width: 473px
}

    .indexSlider .headerSlider h1 span {
        font-size: 30px;
        font-weight: 400;
        line-height: 36px;
        color: #313131;
        display: block
    }

.indexSlider .slides p {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
    max-width: 473px;
    text-align: left;
    margin: 19px 0
}

.indexSlider .slides button {
    font-size: 25px;
    font-weight: 700;
    line-height: 25px;
    color: var(--white);
    background-color: var(--theme-colour1);
    min-width: 314px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    outline: none;
    border: none
}

    .indexSlider .slides button:hover {
        background-color: var(--theme-colour2)
    }

.indexSlider .circle-carousel .slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.indexSlider .circle-carousel .slide {
    display: flex;
    align-items: baseline;
    justify-content: center;
    position: absolute;
    top: -320px;
    left: 130px;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    max-width: 470px;
    flex-direction: column;
    transform: rotate(90deg)
}

@media (max-width: 1279px) {
    .indexSlider .circle-carousel .slide {
        top: -220px
    }
}

@media (max-width: 1199px) {
    .indexSlider .circle-carousel .slide {
        top: -150px
    }
}

.indexSlider .circle-carousel .slide.active {
    z-index: 1;
    opacity: 1
}

.indexSlider .circle-carousel .pagination {
    position: absolute;
    top: 100%;
    left: 31%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 53%;
    height: 53%;
    border-radius: 50%;
    border: 2px solid var(--lightDrkBg);
    transition-property: transform;
    transition-timing-function: ease-out;
    pointer-events: none;
    user-select: none
}

    .indexSlider .circle-carousel .pagination .dot {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        pointer-events: auto;
        transition: 0.3s
    }

        .indexSlider .circle-carousel .pagination .dot img {
            width: 100%
        }

        .indexSlider .circle-carousel .pagination .dot:hover {
            transform: translate(-50%, -50%) scale(1.05);
            cursor: pointer;
            color: black
        }

    .indexSlider .circle-carousel .pagination .item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%
    }

        .indexSlider .circle-carousel .pagination .item.active .dot {
            color: black;
            width: 486px;
            height: 486px
        }

@media (max-width: 1199px) {
    .indexSlider .circle-carousel .pagination .item.active .dot {
        width: 350px;
        height: 350px
    }
}

.indexSlider .circle-carousel .pagination .item.active .dot span {
    width: 100%
}

.indexSlider .circle-carousel .pagination .item.active .dot img {
    width: 100%;
    transform: rotate(90deg)
}

.indexSlider .circle-carousel .next {
    position: absolute;
    top: 10px;
    left: 80px;
    z-index: 9999;
    cursor: pointer
}

@media (max-width: 1279px) {
    .indexSlider .circle-carousel .next {
        top: 110px
    }
}

@media (max-width: 1199px) {
    .indexSlider .circle-carousel .next {
        top: 180px
    }
}

.indexSlider .circle-carousel .next svg {
    transform: rotate(270deg);
    transform-origin: 50% 50%
}

.indexSlider .circle-carousel .prev {
    position: absolute;
    cursor: pointer;
    top: 40px;
    left: 80px;
    z-index: 9999
}

@media (max-width: 1279px) {
    .indexSlider .circle-carousel .prev {
        top: 150px
    }
}

@media (max-width: 1199px) {
    .indexSlider .circle-carousel .prev {
        top: 220px
    }
}

.indexSlider .circle-carousel .prev svg {
    transform: rotate(270deg);
    transform-origin: 50% 50%
}

@media (max-width: 991px) {
    .SignupSec1 {
        width: 100%
    }
}

.login-widget {
    max-width: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff
}

    .login-widget .form {
        width: 100%;
        max-width: 60%;
        position: relative
    }

@media (max-width: 991px) {
    .login-widget .form {
        max-width: 100%
    }
}

.login-widget .form .intimateLogin {
    margin-left: auto;
    max-width: 754px;
    padding-top: 15px;
    padding-right: 118px
}

@media (max-width: 1366px) {
    .login-widget .form .intimateLogin {
        padding: 20PX
    }
}

.login-widget .form .intimateLogin .logo {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

    .login-widget .form .intimateLogin .logo img {
        width: 190px;
        height: 54px;
        max-width: 100%
    }

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .logo.loginSection {
        margin-bottom: 60px
    }
}

.login-widget .form .intimateLogin .signUp {
    margin-bottom: 40px
}

.login-widget .form .intimateLogin .loginNow {
    text-align: center
}

    .login-widget .form .intimateLogin .loginNow .image {
        margin-top: 15px
    }

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .loginNow .image img {
        width: 100%
    }
}

.login-widget .form .intimateLogin .loginNow .text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--c43);
    margin-top: 40px
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .loginNow .text {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px
    }
}

.login-widget .form .intimateLogin .loginNow .text span {
    font-size: 35px;
    font-weight: 700;
    line-height: 21px;
    display: block;
    text-align: center;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .loginNow .text span {
        font-size: 25px;
        font-weight: 700;
        line-height: 18px
    }
}

.login-widget .form .intimateLogin .loginNow .text label {
    font-size: 35px;
    font-weight: 500;
    line-height: 41px;
    display: block;
    text-align: center;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .loginNow .text label {
        font-size: 25px;
        font-weight: 500;
        line-height: 35px
    }
}

.login-widget .form .intimateLogin .loginNow .cmnBtn {
    margin: 20px auto;
    background: var(--theme-colour1);
    font-size: 18px;
    font-weight: 300;
    line-height: 21px;
    color: #FFFFFF;
    border: none;
    outline: none;
    width: 347px;
    height: 49px;
    padding: 5px 19px;
    border-radius: 4px;
    transition: ease-in-out .4s;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    cursor: pointer
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .loginNow .cmnBtn {
        font-size: 16px;
        font-weight: 300;
        line-height: 18px;
        width: fit-content
    }
}

.login-widget .form .intimateLogin .header {
    font-size: 35px;
    font-weight: 700;
    line-height: 42px;
    color: var(--theme-colour1);
    margin-bottom: 20px
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .header {
        font-size: 25px;
        font-weight: 700;
        line-height: 30px
    }
}

.login-widget .form .intimateLogin .signUp {
    margin-top: 3px;
    margin-bottom: 16px
}

    .login-widget .form .intimateLogin .signUp .signUpLink {
        font-size: 18px;
        font-weight: 300;
        line-height: 22px
    }

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .signUp .signUpLink {
        font-size: 16px;
        font-weight: 300;
        line-height: 18px;
        color: #00000080
    }
}

.login-widget .form .intimateLogin .signUp .signUpLink a {
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.005em;
    color: #000000BF;
    margin-left: 12px;
    text-decoration: underline
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .signUp .signUpLink a {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px
    }
}

.login-widget .form .intimateLogin .signUpbottom {
    margin-bottom: 40px !important
}

.login-widget .form .intimateLogin .progressLogin {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

    .login-widget .form .intimateLogin .progressLogin .data {
        width: 30px;
        height: 30px;
        background: #D9D9D9;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center
    }

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .progressLogin .data {
        width: 20px;
        height: 20px
    }
}

.login-widget .form .intimateLogin .progressLogin .data span {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.005em;
    color: #000000
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .progressLogin .data span {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .progressLogin .data span {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px
    }
}

.login-widget .form .intimateLogin .progressLogin .data.active {
    background: var(--theme-colour1)
}

    .login-widget .form .intimateLogin .progressLogin .data.active span {
        color: var(--white)
    }

.login-widget .form .intimateLogin .progressLogin label {
    font-size: 18px;
    font-weight: 300;
    line-height: 21px;
    letter-spacing: 0.005em;
    color: #000000;
    padding: 6px
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .progressLogin label {
        font-size: 16px;
        font-weight: 300;
        line-height: 18px
    }
}

.login-widget .form .intimateLogin .progressLogin .separation {
    width: 46px;
    height: 1px;
    background: #D9D9D9;
    margin-right: 7px
}

.login-widget .form .intimateLogin .step {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0.005em;
    color: #000000;
    margin-top: 15px
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .step {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.login-widget .form .intimateLogin .signUp {
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.005em;
    color: #000000
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .signUp {
        font-size: 20px;
        font-weight: 700;
        line-height: 24px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .formRow {
    display: grid;
    grid-template-columns: 496px 1fr;
    column-gap: 25px
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .formAreaLogin .formRow {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .formRow .profile-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .formAreaLogin .formRow .profile-section {
        grid-template-columns: 1fr;
        column-gap: 0px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .formRow.formRowLogin {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 25px
}

.login-widget .form .intimateLogin .formAreaLogin .formRowreg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .formAreaLogin .formRowreg {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .formRowreg .profile-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .formAreaLogin .formRowreg .profile-section {
        grid-template-columns: 1fr;
        column-gap: 0px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow {
    position: relative;
    margin-bottom: 12px
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow {
        margin-bottom: 15px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .inputLabel {
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    color: var(--c2d);
    display: block;
    margin-bottom: 4px;
    position: relative
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .inputLabel {
        font-size: 14px;
        font-weight: 400;
        line-height: 14px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .inputLabel sup {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .inputLabel sup {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode {
    display: flex;
    position: relative
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .country-code {
        opacity: 1;
        pointer-events: visible;
        position: absolute;
        width: fit-content;
        left: 12px;
        top: 6px;
        background-color: transparent;
        z-index: 1;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        color: #0A3E6D;
        padding: 0 15px 0 0;
        display: block;
        height: 30px;
        border: none;
        border-radius: 0;
        outline: none !important;
        z-index: 0
    }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .country-code select option {
            color: #333 !important;
            background-color: #fff !important;
            font-size: 16px
        }

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .country-code {
        height: 42px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .country-code:focus ~ .input-ctrl {
    outline: solid 1px var(--theme-colour2)
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .country-code:-internal-autofill-selected {
    background-color: #fff
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .input-ctrl {
    padding-left: 80px
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .input-ctrl:-internal-autofill-selected {
        background-color: #fff
    }

.login-widget .form .intimateLogin .formAreaLogin .inputRow .uploadBg {
    background-color: var(--white);
    border-radius: 4px;
    padding: 5px;
    min-height: 56px
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .uploadBg .uploadAreaBtn {
        border: 1px solid #DDDDDD;
        border-radius: 5px;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden
    }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .uploadBg .uploadAreaBtn input[type="file"] {
            cursor: pointer;
            font-size: 100px;
            height: 100%;
            filter: alpha(opacity=1);
            -moz-opacity: 0.01;
            opacity: 0.01;
            position: absolute;
            right: 0;
            top: 0
        }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .uploadBg .uploadAreaBtn .uploadBtn {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            cursor: pointer;
            color: var(--theme-colour2);
            background-color: #EAEFF2;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            column-gap: 4px;
            border-radius: 4px;
            transition: ease-in-out 0.4s;
            width: auto;
            outline: none;
            padding: 5px 25px;
            border: 1px solid #EAEFF2
        }

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .uploadBg .uploadAreaBtn .uploadBtn {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px
    }
}

@media (max-width: 680px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .uploadBg .uploadAreaBtn .uploadBtn {
        padding: 5px 15px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .uploadBg .uploadAreaBtn .uploadBtn:hover {
    background-color: #EAEFF2
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .address {
    height: 172px;
    background-color: #F7F9FA
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .address .address-details {
        padding: 20px 103px 77px 20px
    }

@media (max-width: 680px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .address .address-details {
        padding: 20px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .address .address-details address {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .address .address-details address {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .inputCtrl {
    width: 100%;
    height: 41px;
    border-radius: 7px;
    background: rgba(216,225,230,0.2);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 0 50px 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    outline: none
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .inputCtrl {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .inputCtrl.inputCtrlDis {
    background-color: #E5E5E5
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .textCtrl {
    display: block;
    height: 172px;
    padding: 19px;
    resize: none;
    width: 100%;
    border-radius: 4px;
    background-color: #F7F9FA;
    padding: 0 33px 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    border: none;
    outline: none
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .textCtrl {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .validateText {
    position: absolute;
    bottom: -20px;
    right: 5px;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    color: #ff0000
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .icon {
    position: absolute;
    right: 21px;
    bottom: 6px;
    cursor: pointer
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon .map {
        position: relative;
        top: 10px;
        left: 8px
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon svg text {
        fill: var(--theme-colour1)
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon svg path {
        fill: var(--theme-colour1)
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconDis svg path {
        fill: #707070
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov {
        width: 20px;
        height: 20px;
        bottom: 17px
    }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov .hov {
            display: none
        }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov:hover .status {
            opacity: 1;
            pointer-events: all;
            cursor: pointer;
            z-index: 1
        }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov:hover .hov {
            display: block
        }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov:hover .def {
            display: none
        }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov:hover svg path {
            fill: var(--theme-colour2)
        }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov .status {
            position: absolute;
            right: 0;
            top: 27px;
            width: 280px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: #707070;
            padding: 12px;
            border-radius: 2px;
            background-color: var(--white);
            transition: ease-in-out .4s;
            opacity: 0;
            pointer-events: none;
            cursor: pointer;
            white-space: break-spaces;
            -webkit-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21);
            -moz-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21);
            box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21)
        }

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icon.iconHov .status {
        right: -13px;
        top: -45px;
        width: 217px;
        font-size: 10px;
        line-height: 13px;
        padding: 7px;
        white-space: break-spaces
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .location {
    position: absolute;
    top: 14px;
    left: -60px
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .location {
        display: none
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #0A3E6D;
    padding: 12px;
    margin-bottom: 3px;
    background-color: #E5ECF5;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: ease-in-out .4s;
    position: relative
}

@media (max-width: 375px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map {
        font-size: 0px
    }
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map:hover {
    color: var(--white);
    background-color: var(--theme-colour2)
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map:hover svg path {
        fill: var(--white)
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map:hover img {
        opacity: 1;
        pointer-events: all
    }

.login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map svg path {
    transition: ease-in-out .4s
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .icoMap .map img {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--white);
    padding: 6px 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: ease-in-out .4s;
    position: absolute;
    right: -24px;
    top: 46px;
    width: max-content;
    opacity: 0;
    pointer-events: none;
    z-index: 999
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container {
    border: solid 1px transparent;
    background-color: transparent;
    width: 100% !important;
    border-radius: 4px
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
        height: 41px;
        display: flex;
        align-items: center;
        outline: 0
    }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
            padding: 0 33px 0 16px;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: var(--c48)
        }

.login-widget .form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single {
    background: rgba(216,225,230,0.2) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 7px;
    height: 41px;
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
        background-position: center center;
        background-repeat: no-repeat;
        top: 6px;
        right: 8px
    }

.login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea {
    width: 100%;
    height: 41px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea {
        height: auto
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .secDoc {
    background-color: #EAEFF2;
    height: 44px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--theme-colour2);
    display: flex;
    align-items: center;
    column-gap: 17px;
    width: fit-content;
    padding: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .secDoc {
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .secDoc {
        padding-right: 33px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .secDoc span {
    cursor: pointer
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .secDoc .secDocTxt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row {
    display: flex;
    column-gap: 39px
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row {
        flex-direction: row;
        padding-left: 10px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box {
    position: relative;
    display: flex
}

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box input[type="checkbox"] {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box label {
        display: flex;
        pointer-events: none;
        padding-left: 30px;
        color: #707070;
        position: relative
    }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box label::before {
            position: absolute;
            left: 0;
            top: 3px;
            content: "";
            width: 18px;
            height: 18px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border: solid 1px #dddddd
        }

        .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box label::after {
            opacity: 0;
            position: absolute;
            left: 6px;
            top: 5px;
            content: "";
            width: 6px;
            height: 11px;
            transition: ease-in-out 0.4s;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box .validateText {
        color: red !important;
        font-size: 12px;
        margin-top: 12px
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box input:checked ~ label::before {
        background-color: var(--theme-colour1)
    }

    .login-widget .form .intimateLogin .formAreaLogin .inputRow .AddSecArea .form-check-row .check-box input:checked ~ label::after {
        opacity: 1
    }

.login-widget .form .intimateLogin .formAreaLogin .formRowLarge {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 25px
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .formAreaLogin .formRowLarge {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.login-widget .form .intimateLogin .formAreaLogin .formRowLarge .company-details {
    overflow: auto;
    max-height: 257px;
    padding: 25px;
    background-color: #F7F9FA;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px
}

    .login-widget .form .intimateLogin .formAreaLogin .formRowLarge .company-details::-webkit-scrollbar {
        width: 5px
    }

    .login-widget .form .intimateLogin .formAreaLogin .formRowLarge .company-details::-webkit-scrollbar-track {
        border-radius: 5px;
        background: #f1f1f1
    }

    .login-widget .form .intimateLogin .formAreaLogin .formRowLarge .company-details::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px
    }

        .login-widget .form .intimateLogin .formAreaLogin .formRowLarge .company-details::-webkit-scrollbar-thumb:hover {
            background: #555;
            border-radius: 5px
        }

    .login-widget .form .intimateLogin .formAreaLogin .formRowLarge .company-details ul li {
        font-size: 14px;
        font-weight: 400;
        line-height: 30px
    }

.login-widget .form .intimateLogin .form-check-row {
    position: relative;
    display: flex
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .form-check-row {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

@media (max-width: 375px) {
    .login-widget .form .intimateLogin .form-check-row {
        margin-bottom: 10px
    }
}

.login-widget .form .intimateLogin .form-check-row .check-box {
    position: relative;
    display: flex;
    flex-direction: column
}

    .login-widget .form .intimateLogin .form-check-row .check-box input[type="checkbox"] {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .login-widget .form .intimateLogin .form-check-row .check-box label {
        display: flex;
        pointer-events: none;
        padding-left: 30px;
        flex-wrap: wrap;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: var(--c2d);
        position: relative
    }

        .login-widget .form .intimateLogin .form-check-row .check-box label a {
            color: var(--theme-colour1) !important;
            padding: 0 6px
        }

        .login-widget .form .intimateLogin .form-check-row .check-box label::before {
            position: absolute;
            left: 0;
            top: 3px;
            content: "";
            width: 18px;
            height: 18px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border: solid 1px #dddddd
        }

        .login-widget .form .intimateLogin .form-check-row .check-box label::after {
            opacity: 0;
            position: absolute;
            left: 6px;
            top: 5px;
            content: "";
            width: 6px;
            height: 11px;
            transition: ease-in-out 0.4s;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .login-widget .form .intimateLogin .form-check-row .check-box input:checked ~ label::before {
        background-color: var(--theme-colour1)
    }

    .login-widget .form .intimateLogin .form-check-row .check-box input:checked ~ label::after {
        opacity: 1
    }

.login-widget .form .intimateLogin .form-check-row .formRowPr {
    display: grid;
    grid-template-columns: 635px 1fr
}

@media (max-width: 1199px) {
    .login-widget .form .intimateLogin .form-check-row .formRowPr {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box {
        position: relative;
        padding-left: 0px
    }

        .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box input[type="checkbox"] {
            position: absolute;
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            cursor: pointer
        }

        .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box label {
            display: flex;
            pointer-events: all;
            cursor: pointer;
            padding-left: 30px;
            font-size: 14px;
            font-weight: 300;
            line-height: 17px;
            color: #7F7F7F;
            align-items: center;
            position: relative
        }

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box label {
        font-size: 12px;
        font-weight: 300;
        line-height: 15px;
        margin-bottom: 10px
    }
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box label::before {
    position: absolute;
    left: 0;
    top: 0px;
    content: "";
    background: #FBFCFC;
    border: 1px solid #E6E6E6;
    border-radius: 3px;
    width: 18px;
    height: 18px
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box label::before {
        width: 16px;
        height: 16px
    }
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box label::after {
    opacity: 0;
    position: absolute;
    left: 6px;
    top: 1px;
    content: "";
    width: 6px;
    height: 11px;
    transition: ease-in-out 0.4s;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box label::after {
        width: 5px;
        height: 10px
    }
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box label a {
    text-decoration: underline;
    padding: 0 4px
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box input:checked ~ label::before {
    background-color: var(--theme-colour1)
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box input:checked ~ label::after {
    opacity: 1
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck .check-box.forgotPassWord {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck a {
    display: flex;
    pointer-events: all;
    padding-left: 0px;
    text-align: right;
    cursor: pointer;
    font-size: 14px;
    font-weight: 300;
    line-height: 19px;
    color: #7F7F7F;
    position: relative;
    z-index: 999;
    justify-content: flex-end;
    width: 100%;
    max-width: 496px;
    margin-top: 5px
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck a {
        font-size: 12px;
        font-weight: 300;
        line-height: 15px;
        margin-bottom: 10px
    }
}

@media (max-width: 375px) {
    .login-widget .form .intimateLogin .form-check-row .formRowPr .gridCheck a {
        font-size: 10px;
        font-weight: 300;
        line-height: 12px
    }
}

.login-widget .form .intimateLogin .btMbtnlogin {
    margin-top: 33px;
    display: grid;
    grid-template-columns: 1fr
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .btMbtnlogin {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.login-widget .form .intimateLogin .btMbtnlogin .btn {
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
    color: var(--white);
    border: none;
    outline: none;
    height: 49px;
    background-color: var(--theme-colour1);
    border-radius: 5px;
    transition: ease-in-out .4s;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    cursor: pointer
}

    .login-widget .form .intimateLogin .btMbtnlogin .btn:hover {
        background: var(--theme-colour2)
    }

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .btMbtnlogin .btn {
        font-size: 16px;
        font-weight: 300;
        line-height: 18px
    }
}

.login-widget .form .intimateLogin .logoSection {
    display: grid;
    grid-template-columns: 1fr
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .logoSection {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.login-widget .form .intimateLogin .logoSection .usingLogo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 115px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 40px
}

    .login-widget .form .intimateLogin .logoSection .usingLogo .method {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        margin-bottom: 18px
    }

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .logoSection .usingLogo .method {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.login-widget .form .intimateLogin .logoSection .usingLogo .socialMediaLogo {
    display: flex
}

    .login-widget .form .intimateLogin .logoSection .usingLogo .socialMediaLogo .facebook {
        margin-right: 35px;
        cursor: pointer
    }

    .login-widget .form .intimateLogin .logoSection .usingLogo .socialMediaLogo .google {
        cursor: pointer
    }

.login-widget .form .intimateLogin .socialMediaRegister {
    display: flex;
    justify-content: space-between;
    width: 100%
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .socialMediaRegister {
        flex-direction: column;
        margin-bottom: 70px
    }
}

.login-widget .form .intimateLogin .socialMediaRegister .logoSectionReg .usingLogo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 115px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 40px
}

    .login-widget .form .intimateLogin .socialMediaRegister .logoSectionReg .usingLogo .method {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        margin-bottom: 18px
    }

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .socialMediaRegister .logoSectionReg .usingLogo .method {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.login-widget .form .intimateLogin .socialMediaRegister .logoSectionReg .usingLogo .socialMediaLogo {
    display: flex
}

    .login-widget .form .intimateLogin .socialMediaRegister .logoSectionReg .usingLogo .socialMediaLogo .facebook {
        margin-right: 35px;
        cursor: pointer
    }

    .login-widget .form .intimateLogin .socialMediaRegister .logoSectionReg .usingLogo .socialMediaLogo .google {
        cursor: pointer
    }

.login-widget .form .intimateLogin .socialMediaRegister .btnReg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 181px;
    height: 49px;
    background: var(--theme-colour1);
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px
}

@media (max-width: 680px) {
    .login-widget .form .intimateLogin .socialMediaRegister .btnReg {
        width: 120px;
        height: 39px
    }
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .socialMediaRegister .btnReg {
        width: 100%;
        margin-bottom: 10px
    }
}

.login-widget .form .intimateLogin .socialMediaRegister .btnReg .regButton {
    width: 181px;
    height: 49px;
    font-size: 18px;
    font-weight: 300;
    line-height: 21px;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    background-color: transparent
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .socialMediaRegister .btnReg .regButton {
        font-size: 16px;
        font-weight: 300;
        line-height: 19px
    }
}

.login-widget .form .intimateLogin .socialMediaRegister .btnReg:hover {
    background: var(--theme-colour2)
}

.login-widget .form .intimateLogin .footer {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 25px;
    margin-top: 10px;
    align-items: flex-end
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .footer {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        position: unset
    }
}

.login-widget .form .intimateLogin .footer .leftcontent {
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    color: var(--c2d)
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .footer .leftcontent {
        font-size: 14px;
        font-weight: 300;
        line-height: 17px
    }
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .footer .rightcontent {
        display: flex;
        flex-direction: column
    }
}

.login-widget .form .intimateLogin .footer .rightcontent .label {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    text-align: right;
    color: var(--c2d)
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .footer .rightcontent .label {
        text-align: center;
        margin: 5px auto
    }
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .footer .rightcontent .label {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px
    }
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .footer .rightcontent .label {
        font-size: 12px;
        font-weight: 500;
        line-height: 16px
    }
}

.login-widget .form .intimateLogin .footer .rightcontent .spandiv {
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    color: var(--c2d);
    text-align: right
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .footer .rightcontent .spandiv {
        text-align: center
    }
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .footer .rightcontent .spandiv {
        font-size: 14px;
        font-weight: 300;
        line-height: 17px
    }
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .footer .rightcontent .spandiv {
        font-size: 12px;
        font-weight: 300;
        line-height: 16px
    }
}

.login-widget .form .intimateLogin .footer .rightcontent .spandiv a {
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    color: var(--theme-colour1);
    text-align: right;
    cursor: pointer
}

@media (max-width: 767px) {
    .login-widget .form .intimateLogin .footer .rightcontent .spandiv a {
        font-size: 14px;
        font-weight: 300;
        line-height: 17px
    }
}

@media (max-width: 480px) {
    .login-widget .form .intimateLogin .footer .rightcontent .spandiv a {
        font-size: 12px;
        font-weight: 300;
        line-height: 16px
    }
}

.login-widget .form .intimateLogin .footer.logfooter {
    margin-top: 90px
}

@media (max-width: 991px) {
    .login-widget .form .intimateLogin .footer.logfooter {
        margin-top: 10px
    }
}

.login-widget .login-banner {
    background-size: cover;
    height: 100%;
    width: 40%;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50px 0px 0px 50px;
    position: relative
}

@media (max-width: 991px) {
    .login-widget .login-banner {
        display: none
    }
}

.login-widget .socialMedia {
    position: absolute;
    bottom: 42px;
    right: 26px;
    cursor: pointer
}

button {
    cursor: pointer
}

.getstartedDrop .select2-dropdown {
    width: 140px !important
}

.mobInput .inputCtrl {
    border-radius: 0 7px 7px 0 !important
}

.mobField .select2.select2-container.select2-container--default {
    width: 60px !important
}

.mobField .select2-container--default.select2-selection--single.select2-selection__rendered {
    color: var(--theme-colour1)
}

.mobField .select2-container--default .select2-selection--single {
    border: solid 1px #e9eef0;
    background-color: #e9eef0
}

.loginPageCenter {
    height: calc((100vh) - 170px);
    align-items: baseline;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .loginPageCenter .registerfreeToday {
        font-family: Rubik;
        font-weight: 400;
        margin-bottom: 8px;
        font-size: 24px;
        margin-top: 8px;
        line-height: 100%;
        letter-spacing: 0%
    }

@media (max-width: 767px) {
    .loginPageCenter .registerfreeToday {
        font-size: 20px
    }
}

@media (max-width: 991px) {
    .loginPageCenter {
        margin-top: 20px;
        height: auto
    }
}

@media (max-width: 1366px) {
    .loginPageCenter.loginPageCenterReg .header {
        font-size: 30px !important;
        line-height: 32px !important;
        margin-bottom: 10px !important
    }
}

@media (max-width: 767px) {
    .loginPageCenter.loginPageCenterReg .header {
        font-size: 25px !important;
        line-height: 30px !important
    }
}

@media (max-width: 1366px) {
    .loginPageCenter.loginPageCenterReg .btnReg {
        width: 170px !important;
        height: 44px !important;
        margin-top: 15px !important
    }
}

@media (max-width: 680px) {
    .loginPageCenter.loginPageCenterReg .btnReg {
        width: 120px;
        height: 39px
    }
}

@media (max-width: 480px) {
    .loginPageCenter.loginPageCenterReg .btnReg {
        width: 100%;
        margin-bottom: 10px
    }
}

.loginSpcWith {
    max-width: 638px
}

@media (max-width: 991px) {
    .loginSpcWith {
        margin: auto
    }
}

.loginSpcWith .loginSpcWithInner {
    max-width: 496px
}

@media (max-width: 991px) {
    .loginSpcWith .loginSpcWithInner {
        margin: auto
    }
}

.loginSpcWith .loginSpcWithInner .formAreaLogin {
    width: 100%
}

.loginSpcWith .loginSpcWithInner .btMbtnlogin {
    width: 100%
}

.loginSpcWith .loginSpcWithInner .logoSection {
    width: 100%
}

.loginSpcWith .loginSpcWithInner.loginSpcWithInnerReg {
    max-width: 100% !important
}

.loginSpcWith .loginSpcWithInner .usingLogo {
    margin-bottom: 0 !important
}

@media (max-width: 767px) {
    .loginSpcWith .loginSpcWithInner .usingLogo {
        margin-top: 20px !important
    }
}

@media (max-width: 991px) {
    .loginSpcWith .loginSpcWithInner .loginSection {
        margin-bottom: 0 !important
    }
}

.loginSpcWith .loginSpcWithInner .loginPageCenter form {
    max-width: 100%;
    width: 100%
}

.loginSpcWith .logfooter {
    margin-top: 0 !important
}

@media (max-width: 991px) {
    .intimateLoginSpc {
        margin: auto !important
    }
}

.redBorder {
    border: 1px solid #ff0000
}

.Register5 {
    max-width: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff
}

    .Register5 .loginSpcWith {
        max-width: 100% !important
    }

    .Register5 .form .intimateLogin .footer {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap
    }

        .Register5 .form .intimateLogin .footer .rightcontent .label {
            text-align: left !important;
            font-family: Rubik;
            font-weight: 500;
            font-style: Medium;
            font-size: 16px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            color: #057DC4 !important;
            margin-bottom: 8px
        }

@media (max-width: 767px) {
    .Register5 .form .intimateLogin .footer .rightcontent .label {
        font-size: 14px
    }
}

.Register5 .intimateLoginSpc {
    max-width: 100% !important;
    padding-right: 60px !important;
    padding-left: 130px !important
}

@media (max-width: 1366px) {
    .Register5 .intimateLoginSpc {
        padding-left: 80px !important
    }
}

@media (max-width: 1199px) {
    .Register5 .intimateLoginSpc {
        padding: 20px 60px !important
    }
}

@media (max-width: 991px) {
    .Register5 .intimateLoginSpc {
        padding: 10px 40px !important
    }
}

@media (max-width: 480px) {
    .Register5 .intimateLoginSpc {
        padding-right: 15px !important;
        padding-left: 15px !important
    }
}

.Register5 .intimateLogin .header {
    margin-bottom: 4px !important
}

.Register5 .login-banner {
    border-radius: 0px !important
}

.Register5 .bgVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.Register5 .imageContent {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(360deg, #3c3232 0%, transparent 100%)
}

@media (max-width: 991px) {
    .Register5 .imageContent {
        border-radius: 18px
    }
}

.Register5 .imageContent .topContent {
    position: absolute;
    top: auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    max-width: 430px
}

@media (max-height: 800px) {
    .Register5 .imageContent .topContent {
        top: 95px
    }
}

@media (max-height: 700px) {
    .Register5 .imageContent .topContent {
        top: 25px
    }
}

@media (max-width: 480px) {
    .Register5 .imageContent .topContent {
        top: 140px
    }
}

.Register5 .imageContent .topContent .innerContent {
    max-width: 430px;
    max-height: 390px;
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 50px;
    padding: 30px 40px;
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px)
}

@media (max-width: 991px) {
    .Register5 .imageContent .topContent .innerContent {
        padding: 20px
    }
}

.Register5 .imageContent .topContent .innerContent .content {
    font-family: Segoe Print;
    font-weight: 700;
    font-style: Bold;
    font-size: 36px;
    line-height: 55px;
    letter-spacing: 0%;
    color: black;
    text-align: center
}

@media (max-width: 991px) {
    .Register5 .imageContent .topContent .innerContent .content {
        line-height: normal;
        font-size: 30px
    }
}

@media (max-width: 680px) {
    .Register5 .imageContent .topContent .innerContent .content {
        font-size: 25px
    }
}

@media (max-height: 700px) {
    .Register5 .imageContent .topContent .innerContent .content {
        line-height: 40px
    }
}

.Register5 .imageContent .topContent .innerContent img {
    width: 274px;
    height: 78px;
    margin-top: 40px
}

.Register5 .imageContent .logo {
    margin: 20px 0;
    position: relative;
    top: 300px;
    width: 124px;
    height: auto;
    margin: auto
}

@media (max-height: 800px) {
    .Register5 .imageContent .logo {
        top: 230px
    }
}

@media (max-height: 700px) {
    .Register5 .imageContent .logo {
        top: 175px
    }
}

.Register5 .imageContent .logo img {
    width: 124px;
    height: auto
}

.Register5 .imageContent .footersection {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 16px
}

    .Register5 .imageContent .footersection ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px
    }

@media (max-width: 480px) {
    .Register5 .imageContent .footersection ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px
    }
}

.Register5 .imageContent .footersection ul li {
    display: flex;
    align-items: center;
    justify-content: center
}

    .Register5 .imageContent .footersection ul li span {
        margin-right: 6px;
        display: flex
    }

    .Register5 .imageContent .footersection ul li a {
        font-family: Rubik;
        font-weight: 400;
        font-style: Regular;
        font-size: 16px;
        color: #fff;
        line-height: 100%;
        letter-spacing: 0%
    }

@media (max-width: 767px) {
    .Register5 .imageContent .footersection ul li a {
        font-size: 14px;
        white-space: nowrp
    }
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .contryCode .country-code {
    color: #057DC4 !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    top: 12px !important
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .contryCode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #057DC4 !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    top: 12px !important
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .contryCode .select2-container {
    width: 145px !important
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .contryCode .containerSlider {
    margin: 0 auto
}

.Register5 h2 {
    color: #333;
    font-family: Rubik;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    padding: 24px 0px
}

.Register5 .slider-wrapper {
    position: relative
}

.Register5 .slider {
    display: flex;
    gap: 20px;
    overflow: hidden;
    position: relative
}

.Register5 .slider-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease
}

.Register5 .slide {
    min-width: 540px;
    height: 280px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0
}

@media (max-width: 480px) {
    .Register5 .slide {
        width: 100%
    }
}

.Register5 .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.Register5 .slide.second-visible img {
    filter: brightness(0.7) contrast(0.9)
}

.Register5 .slide.second-visible::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.2);
    pointer-events: none
}

.Register5 .navigation {
    display: flex;
    gap: 10px;
    margin: 20px 0px
}

.Register5 .nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #000000;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease
}

    .Register5 .nav-btn:hover {
        background: #f0f0f0;
        border-color: #333
    }

    .Register5 .nav-btn svg {
        width: 20px;
        height: 20px;
        stroke: #666
    }

    .Register5 .nav-btn:hover svg {
        stroke: #333
    }

@media (max-width: 768px) {
    .Register5 .slide {
        min-width: 100%
    }

    .Register5 h2 {
        font-size: 24px
    }
}

.Register5 .sliderCo {
    display: none
}

@media (max-width: 991px) {
    .Register5 .sliderCo {
        display: block !important
    }
}

@media (max-width: 991px) {
    .Register5 .sliderCo .login-banner {
        display: block !important;
        width: 100% !important;
        height: 400px !important
    }
}

@media (max-height: 800px) {
    .Register5 .sliderCo .login-banner {
        height: 500px !important
    }
}

@media (max-width: 480px) {
    .Register5 .sliderCo .login-banner {
        height: 600px !important
    }
}

@media (max-width: 991px) {
    .Register5 .sliderCo .login-banner .bgVideo {
        height: 400px !important;
        border-radius: 18px
    }
}

@media (max-height: 800px) {
    .Register5 .sliderCo .login-banner .bgVideo {
        height: 500px !important
    }
}

@media (max-width: 480px) {
    .Register5 .sliderCo .login-banner .bgVideo {
        height: 500px !important
    }
}

@media (max-width: 480px) {
    .Register5 .sliderCo .login-banner {
        height: 500px !important
    }
}

@media (max-width: 991px) {
    .Register5 .sliderCo {
        margin-bottom: 20px
    }
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .inputCtrl {
    height: 55px !important;
    border: 1px solid #E9E9E9 !important;
    background: #FCFCFD !important;
    border-radius: 8px
}

@media (max-width: 767px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .inputCtrl {
        height: 45px !important
    }
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .inputCtrl::placeholder {
    font-family: Rubik;
    font-weight: 300;
    font-style: Light;
    font-size: 16px !important;
    line-height: normal;
    letter-spacing: 0%;
    color: #505C7B !important
}

@media (max-width: 767px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .inputCtrl::placeholder {
        font-size: 14px !important
    }
}

@media (max-width: 480px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .inputCtrl::placeholder {
        font-size: 12px !important
    }
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
    font-family: Rubik;
    font-weight: 300;
    font-style: Light;
    font-size: 16px !important;
    line-height: normal;
    letter-spacing: 0%;
    color: #505C7B !important
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
    background: #FCFCFD !important;
    height: 55px !important;
    border: 1px solid #E9E9E9 !important
}

@media (max-width: 767px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
        height: 45px !important
    }
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single::placeholder {
    font-family: Rubik;
    font-weight: 300;
    font-style: Light;
    font-size: 16px !important;
    line-height: normal;
    letter-spacing: 0%;
    color: #505C7B !important
}

@media (max-width: 767px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single::placeholder {
        font-size: 14px !important
    }
}

@media (max-width: 480px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .select2Ctrl .select2-container .selection .select2-selection--single::placeholder {
        font-size: 12px !important
    }
}

.Register5 .contryCode input {
    border-radius: 0px 8px 8px 0px !important
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .icon {
    bottom: 12px !important
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single {
    height: 55px !important
}

@media (max-width: 767px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single {
        height: 45px !important
    }
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 14px !important;
    right: 22px !important
}

@media (max-width: 767px) {
    .Register5 .form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 8px !important
    }
}

.Register5 .form .intimateLogin .formAreaLogin .inputRow .inputLabel {
    font-weight: 400 !important
}

.Register5 .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url(../images/searchSvgDro.svg) !important;
    background-position: center center;
    background-repeat: no-repeat;
    top: 8px;
    right: 8px
}

.Register5 .form-check-row-inlineBtn {
    justify-content: space-between !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 0px
}

    .Register5 .form-check-row-inlineBtn .findMatch {
        width: fit-content;
        border-radius: 8px;
        padding-top: 14px;
        padding-right: 20px;
        padding-bottom: 14px;
        padding-left: 20px;
        background-color: #057DC4;
        cursor: pointer
    }

        .Register5 .form-check-row-inlineBtn .findMatch:hover {
            background-color: #2c85b8
        }

        .Register5 .form-check-row-inlineBtn .findMatch button {
            font-family: Rubik;
            font-weight: 500;
            font-style: Medium;
            background-color: transparent;
            border: none;
            font-size: 18px;
            color: #fff;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center
        }

@media (max-width: 767px) {
    .Register5 .form-check-row-inlineBtn .findMatch button {
        font-size: 16px
    }
}

.form .intimateLogin .signUp .signUpLink {
    color: #00000080;
    font-family: Rubik;
    font-weight: 300;
    font-style: Light;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    padding-top: 6px
}

.form .intimateLogin .formAreaLogin .inputRow .select2-container--default .select2-selection--single {
    background: #FCFCFD !important
}

body:has(.Register5) {
    overflow: hidden !important
}

.Register5 .formAreaLogin svg path {
    fill: #fff !important
}

.select2-dropdown {
    background-color: white;
    border: none !important;
    box-shadow: 0px 2px 6px #c4c1c1 !important
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    border-radius: 4px !important
}

.padding-left100 {
    padding-right: 100px
}

@media (max-width: 1366px) {
    .padding-left100 {
        padding-right: 0px !important
    }
}

@media (max-height: 800px) {
    .padding-left100 {
        padding-right: 100px
    }
}

@media (max-width: 767px) {
    .padding-left100 {
        padding-right: 0px
    }
}

.login-widget .form .intimateLogin .signUp .signUpLink a {
    color: #000000BF
}

    .login-widget .form .intimateLogin .signUp .signUpLink a:hover {
        color: #057DC4
    }

.contryCode:has(#select2-countryCode-container) .select2-selection__arrow {
    right: 2px !important
}

.contryCode:has(#select2-regMobCountryCode-container) .select2-selection__arrow {
    right: 2px !important
}

.welComeBanner {
    height: 480px;
    background-color: var(--lightBg)
}

@media (max-width: 767px) {
    .welComeBanner {
        height: auto;
        padding: 20px 0 40px
    }
}

.welComeBanner .template-container .content {
    display: flex;
    justify-content: center;
    align-items: center
}

    .welComeBanner .template-container .content .welcomeNote {
        font-size: 19px;
        font-weight: 700;
        line-height: 23px;
        margin-top: 49px
    }

@media (max-width: 767px) {
    .welComeBanner .template-container .content .welcomeNote {
        font-size: 17px;
        font-weight: 700;
        line-height: 20px;
        margin-top: 18px
    }
}

.welComeBanner .template-container .contentPara {
    display: flex;
    justify-content: center;
    align-items: center
}

    .welComeBanner .template-container .contentPara p {
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        width: 808px;
        max-width: 100%;
        height: 49px;
        text-align: center
    }

@media (max-width: 767px) {
    .welComeBanner .template-container .contentPara p {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        height: auto
    }
}

.welBanner .template-container .banner {
    height: auto;
    margin-top: -315px
}

@media (max-width: 767px) {
    .welBanner .template-container .banner {
        margin-top: -40px
    }
}

.welBanner .template-container .banner img {
    max-width: 100%;
    height: auto;
    border-radius: 25px;
    margin-bottom: 50px;
    max-height: fit-content;
    box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.5)
}

@media (max-width: 767px) {
    .welBanner .template-container .banner img {
        margin-bottom: 10px
    }
}

@media (max-width: 680px) {
    .welBanner .template-container .banner img {
        margin-bottom: 20px;
        height: 300px;
        margin-top: 10px
    }
}

@media (max-width: 480px) {
    .welBanner .template-container .banner img {
        height: auto
    }
}

.welBanner .template-container .banner .content {
    width: 100%;
    position: absolute;
    top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px
}

@media (max-width: 767px) {
    .welBanner .template-container .banner .content {
        margin-top: 20px;
        top: 0px;
        position: relative;
        margin-bottom: 10px
    }
}

@media (max-width: 680px) {
    .welBanner .template-container .banner .content {
        flex-direction: column;
        margin-top: 20px
    }
}

@media (max-width: 480px) {
    .welBanner .template-container .banner .content {
        flex-direction: column;
        margin-top: 10px
    }
}

.welBanner .template-container .banner .content .status {
    position: relative;
    width: 228px;
    height: 79px;
    border: 1px solid var(--lightBg);
    border-radius: 6px;
    background-color: #E9E7E5;
    padding: 12px;
    margin-top: 10px
}

    .welBanner .template-container .banner .content .status .statusContent {
        display: grid;
        grid-template-columns: 32px 1fr 32px;
        align-items: center;
        column-gap: 10px
    }

        .welBanner .template-container .banner .content .status .statusContent .contentList .verifiedStatus {
            font-size: 14px;
            font-weight: 400;
            line-height: 30px
        }

@media (max-width: 767px) {
    .welBanner .template-container .banner .content .status .statusContent .contentList .verifiedStatus {
        font-size: 12px;
        font-weight: 400;
        line-height: 28px
    }
}

.welBanner .template-container .banner .content .status .statusContent .contentList .count {
    font-size: 24px;
    font-weight: 600;
    line-height: 26px
}

@media (max-width: 767px) {
    .welBanner .template-container .banner .content .status .statusContent .contentList .count {
        font-size: 22px;
        font-weight: 600;
        line-height: 24px
    }
}

.welBanner .template-container .banner .content .status .statusContent .forwordIcon {
    display: none
}

.welBanner .template-container .banner .content .status:hover {
    background-color: #FFFFFF
}

    .welBanner .template-container .banner .content .status:hover .forwordIcon {
        display: block
    }

.welBanner .template-container .banner .bannerContent .head {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    color: #707070
}

@media (max-width: 767px) {
    .welBanner .template-container .banner .bannerContent .head {
        font-size: 12px;
        font-weight: 600;
        line-height: 28px
    }
}

.welBanner .template-container .banner .bannerContent .subHead {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 700px;
    margin: auto;
    text-align: center;
    max-width: 100%;
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    color: #2D2D2D;
    margin-top: 20px
}

@media (max-width: 767px) {
    .welBanner .template-container .banner .bannerContent .subHead {
        font-size: 20px;
        font-weight: 700;
        line-height: 25px;
        margin-top: 10px
    }
}

.welBanner .template-container .banner .bannerContent .line {
    margin-top: 12px;
    text-align: center;
    height: 1px
}

@media (max-width: 767px) {
    .welBanner .template-container .banner .bannerContent .line {
        margin-top: 0px
    }
}

.welBanner .template-container .banner .bannerContent .line img {
    width: 32px;
    height: 1px
}

.welBanner .template-container .banner .bannerContent .paragraph {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1102px;
    margin: auto;
    text-align: center;
    max-width: 100%;
    color: #2D2D2D;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px
}

@media (max-width: 767px) {
    .welBanner .template-container .banner .bannerContent .paragraph {
        margin-top: 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 991px) {
    .welBanner .template-container .banner .bannerContent .paragraph {
        text-align: left
    }
}

.welBanner .template-container .bannerNair {
    margin-bottom: 20px;
    margin-top: -20px
}

    .welBanner .template-container .bannerNair img {
        max-width: 100%;
        height: auto;
        border-radius: 25px;
        margin-bottom: 50px;
        box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.5)
    }

@media (max-width: 680px) {
    .welBanner .template-container .bannerNair img {
        height: 300px
    }
}

.welBanner .template-container .bannerNair .content {
    width: 100%;
    position: absolute;
    top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px
}

@media (max-width: 767px) {
    .welBanner .template-container .bannerNair .content {
        flex-direction: column;
        margin-top: 10px;
        top: 0px
    }
}

.welBanner .template-container .bannerNair .content .status {
    position: relative;
    width: 228px;
    height: 79px;
    border: 1px solid var(--lightBg);
    border-radius: 6px;
    background-color: #E9E7E5;
    padding: 12px
}

@media (max-width: 680px) {
    .welBanner .template-container .bannerNair .content .status {
        margin-top: 10px
    }
}

.welBanner .template-container .bannerNair .content .status .statusContent {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    column-gap: 10px
}

@media (max-width: 767px) {
    .welBanner .template-container .bannerNair .content .status .statusContent {
        font-size: 25px
    }
}

.welBanner .template-container .bannerNair .content .status .statusContent .contentList .verifiedStatus {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px
}

@media (max-width: 767px) {
    .welBanner .template-container .bannerNair .content .status .statusContent .contentList .verifiedStatus {
        font-size: 12px;
        font-weight: 400;
        line-height: 28px
    }
}

.welBanner .template-container .bannerNair .content .status .statusContent .contentList .count {
    font-size: 24px;
    font-weight: 600;
    line-height: 26px
}

@media (max-width: 767px) {
    .welBanner .template-container .bannerNair .content .status .statusContent .contentList .count {
        font-size: 22px;
        font-weight: 600;
        line-height: 24px
    }
}

.welBanner .template-container .bannerNair .content .status .statusContent .forwordIcon {
    display: none
}

.welBanner .template-container .bannerNair .content .status:hover {
    background-color: #FFFFFF
}

    .welBanner .template-container .bannerNair .content .status:hover .forwordIcon {
        display: block
    }

.welBanner .template-container .bannerNair .bannerContent .head {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #707070
}

@media (max-width: 767px) {
    .welBanner .template-container .bannerNair .bannerContent .head {
        font-size: 12px;
        font-weight: 600;
        line-height: 14px
    }
}

.welBanner .template-container .bannerNair .bannerContent .subHead {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 700px;
    margin: auto;
    text-align: center;
    max-width: 100%;
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    color: #2D2D2D;
    margin-top: 20px
}

@media (max-width: 767px) {
    .welBanner .template-container .bannerNair .bannerContent .subHead {
        font-size: 20px;
        font-weight: 700;
        line-height: 25px
    }
}

.welBanner .template-container .bannerNair .bannerContent .line {
    margin-top: 12px;
    text-align: center;
    height: 1px
}

    .welBanner .template-container .bannerNair .bannerContent .line img {
        width: 32px;
        height: 1px
    }

.welBanner .template-container .bannerNair .bannerContent .paragraph {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1102px;
    margin: auto;
    text-align: center;
    max-width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #2D2D2D;
    margin-top: 30px
}

@media (max-width: 767px) {
    .welBanner .template-container .bannerNair .bannerContent .paragraph {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 991px) {
    .welBanner .template-container .bannerNair .bannerContent .paragraph {
        text-align: left
    }
}

.royalIntimate {
    background-image: linear-gradient(var(--lightBg), #fff);
    padding: 62px 15px;
    margin-top: 60px
}

@media (max-width: 767px) {
    .royalIntimate {
        margin-top: 20px
    }
}

@media (max-width: 1199px) {
    .royalIntimate {
        padding: 80px 0px
    }
}

@media (max-width: 991px) {
    .royalIntimate {
        text-align: left;
        padding: 5px
    }
}

.royalIntimate .template-container .royalContent {
    display: grid;
    grid-template-columns: 1fr 610px;
    column-gap: 10px
}

@media (max-width: 991px) {
    .royalIntimate .template-container .royalContent {
        grid-template-columns: 1fr 310px
    }
}

@media (max-width: 767px) {
    .royalIntimate .template-container .royalContent {
        grid-template-columns: 1fr
    }
}

.royalIntimate .template-container .royalContent .mainContent .mainHead {
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    color: #707070;
    margin-top: 18px
}

@media (max-width: 767px) {
    .royalIntimate .template-container .royalContent .mainContent .mainHead {
        font-size: 12px;
        font-weight: 600;
        line-height: 28px
    }
}

.royalIntimate .template-container .royalContent .mainContent .subHead {
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    color: #2D2D2D
}

@media (max-width: 767px) {
    .royalIntimate .template-container .royalContent .mainContent .subHead {
        font-size: 20px;
        font-weight: 700;
        line-height: 25px
    }
}

.royalIntimate .template-container .royalContent .mainContent .line {
    margin-top: 0px;
    text-align: left;
    height: 1px;
    margin-bottom: 30px
}

    .royalIntimate .template-container .royalContent .mainContent .line img {
        width: 32px
    }

.royalIntimate .template-container .royalContent .mainContent .paraContent p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #2D2D2D;
    text-align: left
}

@media (max-width: 767px) {
    .royalIntimate .template-container .royalContent .mainContent .paraContent p {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px
    }
}

.royalIntimate .template-container .royalContent .mainContent .paraContent .btnGetStarted {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 46px;
    background-color: var(--theme-colour1);
    border-radius: 5px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: ease-in-out 0.4s;
    padding: 5px 25px
}

    .royalIntimate .template-container .royalContent .mainContent .paraContent .btnGetStarted:hover {
        background: var(--theme-colour2)
    }

.royalIntimate .template-container .royalContent .imageContent img {
    max-width: 100%
}

.service {
    background-color: var(--white);
    margin: 80px 50px 60px 50px
}

@media (max-width: 1279px) {
    .service {
        margin: 50px 20px
    }
}

@media (max-width: 991px) {
    .service {
        margin: 5px
    }
}

.service .template-container .serviceContent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

@media (max-width: 1024px) {
    .service .template-container .serviceContent {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .service .template-container .serviceContent {
        grid-template-columns: 1fr
    }
}

.service .template-container .serviceContent .content {
    padding: 30px;
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 12px
}

@media (max-width: 991px) {
    .service .template-container .serviceContent .content {
        margin-top: 10px;
        padding: 5px
    }
}

@media (max-width: 480px) {
    .service .template-container .serviceContent .content {
        grid-template-columns: 30px 1fr
    }
}

@media (max-width: 480px) {
    .service .template-container .serviceContent .content svg {
        width: 30px
    }
}

.service .template-container .serviceContent .content.borderRightBottom {
    border-right: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3
}

@media (max-width: 1024px) {
    .service .template-container .serviceContent .content.borderRightBottom {
        border: 1px solid #F3F3F3
    }
}

.service .template-container .serviceContent .content.borderBottom {
    border-bottom: 1px solid #F3F3F3
}

@media (max-width: 1024px) {
    .service .template-container .serviceContent .content.borderBottom {
        border: 1px solid #F3F3F3
    }
}

.service .template-container .serviceContent .content.borderRight {
    border-right: 1px solid #F3F3F3
}

@media (max-width: 1024px) {
    .service .template-container .serviceContent .content.borderRight {
        border: 1px solid #F3F3F3
    }
}

.service .template-container .serviceContent .content .serviceMainContent .heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    color: #2D2D2D
}

@media (max-width: 767px) {
    .service .template-container .serviceContent .content .serviceMainContent .heading {
        font-size: 16px;
        font-weight: 600;
        line-height: 28px
    }
}

.service .template-container .serviceContent .content .serviceMainContent p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #2D2D2D;
    text-align: left
}

@media (max-width: 767px) {
    .service .template-container .serviceContent .content .serviceMainContent p {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin-top: 0px;
        margin-bottom: 0px
    }
}

.service .template-container .serviceContent .content:hover .icon svg {
    transform: scale(1.1)
}

@media (max-width: 1024px) {
    .service .template-container .serviceContent .content {
        border: 1px solid #F3F3F3
    }
}

.registerFree {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    position: relative;
    display: grid;
    padding: 175px 0px 100px 0px;
    align-items: center;
    max-width: 100%;
    background-attachment: fixed
}

    .registerFree::before {
        width: 100%;
        content: "";
        background: #f6ebad;
        background: linear-gradient(to right, #f3eed6 0%, #f3de6a 100%);
        position: absolute;
        top: 0px;
        bottom: 0px;
        opacity: .3;
        z-index: -1;
        max-width: 100%;
        height: auto
    }

    .registerFree ::-webkit-scrollbar {
        width: 10px
    }

    .registerFree ::-webkit-scrollbar-track {
        background-color: darkgrey
    }

    .registerFree ::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3)
    }

@media (max-width: 991px) {
    .registerFree {
        padding: 50px 0px 50px 0px
    }
}

@media (max-width: 480px) {
    .registerFree {
        padding: 30px 0px 30px 0px
    }
}

.registerFree .template-container .imageContent .content {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr
}

@media (max-width: 991px) {
    .registerFree .template-container .imageContent .content {
        display: grid;
        width: 100%;
        grid-template-columns: 510px 1fr
    }
}

@media (max-width: 767px) {
    .registerFree .template-container .imageContent .content {
        grid-template-columns: 1fr
    }
}

.registerFree .template-container .imageContent .content .leftContent .happy {
    font-size: 52px;
    font-weight: 600;
    line-height: 54px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .registerFree .template-container .imageContent .content .leftContent .happy {
        font-size: 40px;
        font-weight: 600;
        line-height: 42px
    }
}

@media (max-width: 480px) {
    .registerFree .template-container .imageContent .content .leftContent .happy {
        font-size: 35px;
        font-weight: 600;
        line-height: 36px
    }
}

.registerFree .template-container .imageContent .content .leftContent .happyMarriage {
    font-size: 52px;
    font-weight: 600;
    line-height: 32px;
    color: var(--theme-colour1);
    margin-top: 20px
}

@media (max-width: 767px) {
    .registerFree .template-container .imageContent .content .leftContent .happyMarriage {
        margin-top: 10px;
        font-size: 45px;
        font-weight: 600;
        line-height: 28px
    }
}

@media (max-width: 480px) {
    .registerFree .template-container .imageContent .content .leftContent .happyMarriage {
        margin-top: 7px;
        font-size: 35px;
        font-weight: 600;
        line-height: 28px
    }
}

.registerFree .template-container .imageContent .content .leftContent .labelMr {
    font-size: 52px;
    font-weight: 700;
    line-height: 64px;
    color: #FFFFFF;
    margin-top: 20px
}

@media (max-width: 767px) {
    .registerFree .template-container .imageContent .content .leftContent .labelMr {
        font-size: 45px;
        font-weight: 600;
        line-height: 50px
    }
}

@media (max-width: 480px) {
    .registerFree .template-container .imageContent .content .leftContent .labelMr {
        font-size: 35px;
        font-weight: 600;
        line-height: 28px
    }
}

.registerFree .template-container .imageContent .content .rightContent {
    display: flex;
    justify-content: end;
    align-items: end
}

@media (max-width: 991px) {
    .registerFree .template-container .imageContent .content .rightContent {
        justify-content: center;
        align-items: center;
        margin-top: 20px
    }
}

.registerFree .template-container .imageContent .content .rightContent a {
    font-size: 16px;
    font-weight: 600;
    line-height: 15px;
    color: var(--theme-colour1);
    padding: 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background-color: var(--white)
}

    .registerFree .template-container .imageContent .content .rightContent a:hover {
        color: var(--white);
        background: var(--theme-colour1)
    }

.pay-mth {
    display: flex
}

    .pay-mth .via {
        line-height: 60px !important
    }

    .pay-mth .provider {
        margin: 8px 15px
    }

@media (max-width: 767px) {
    .pay-method {
        flex-direction: column
    }
}

@media (max-width: 767px) {
    .pay-method .provider {
        margin-left: 0
    }
}

.pay-method .via {
    font: 400 18px "Rubik",sans-serif;
    color: #000;
    text-transform: capitalize;
    display: block;
    margin-bottom: 5px
}

.pay-method .provider {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 170px;
    height: 40px;
    border: 1px solid var(--theme-colour2);
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer
}

    .pay-method .provider .round {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 50px;
        height: 100%;
        background: var(--theme-colour2)
    }

        .pay-method .provider .round:before, .pay-method .provider .round:after {
            position: absolute;
            top: 50%;
            left: 50%;
            content: ""
        }

        .pay-method .provider .round:before {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            width: 26px;
            height: 26px;
            background: #fff;
            margin: -13px 0 0 -13px
        }

        .pay-method .provider .round:after {
            background: url(../images/tick-pay.svg) no-repeat;
            width: 16px;
            height: 16px;
            background-size: 16px;
            background-position: center;
            margin: -8px 0 0 -8px;
            display: none
        }

    .pay-method .provider.active .round:after {
        display: block
    }

    .pay-method .provider.paytm {
        background: url(../images/paytm.jpg) no-repeat;
        background-size: 60px 26px;
        background-position: 80px center
    }

    .pay-method .provider.payu {
        background: url(../images/payu.jpg) no-repeat;
        background-size: 60px 26px;
        background-position: 80px center
    }

.pay-method input[type="checkbox"] {
    display: none
}

.help-faq {
    border-radius: 4px;
    background: var(--theme-colour2);
    color: #fff;
    padding: 30px 15px;
    margin-bottom: 30px
}

    .help-faq strong {
        font: 700 22px "Rubik",sans-serif;
        display: block;
        margin-bottom: 10px
    }

    .help-faq p {
        font: 400 16px "Rubik",sans-serif;
        color: #fff
    }

        .help-faq p a {
            font: 700 16px "Rubik",sans-serif;
            display: block;
            color: #fff
        }

            .help-faq p a span {
                position: relative
            }

                .help-faq p a span:before {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    content: '';
                    width: 100%;
                    height: 1px;
                    background: #fdd606
                }

.chatModeArea {
    position: fixed;
    bottom: 0;
    z-index: 999999;
    width: 100%
}

    .chatModeArea .chatModeAreaSec .chatPanel {
        max-width: 305px;
        width: 100%;
        height: 462px;
        background-color: var(--white);
        margin-left: auto;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.59);
        -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.59);
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.59)
    }

        .chatModeArea .chatModeAreaSec .chatPanel .nameArea {
            height: 42px;
            background-color: var(--lightBg);
            padding: 9px 2px 9px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

            .chatModeArea .chatModeAreaSec .chatPanel .nameArea .name {
                font-size: 16px;
                font-weight: 500;
                line-height: 19px;
                color: var(--c2d);
                display: flex;
                align-items: center
            }

                .chatModeArea .chatModeAreaSec .chatPanel .nameArea .name .nameDiv {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 144px
                }

                .chatModeArea .chatModeAreaSec .chatPanel .nameArea .name .status {
                    width: 9px;
                    height: 9px;
                    border-radius: 5px;
                    margin-right: 8px
                }

                    .chatModeArea .chatModeAreaSec .chatPanel .nameArea .name .status.green {
                        background-color: #6FDA9D
                    }

                    .chatModeArea .chatModeAreaSec .chatPanel .nameArea .name .status.red {
                        background-color: #ff0000
                    }

                .chatModeArea .chatModeAreaSec .chatPanel .nameArea .name .msgCnt {
                    width: 24px;
                    height: 24px;
                    border-radius: 12px;
                    background-color: var(--theme-colour1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 12px;
                    color: var(--white);
                    margin-left: 6px
                }

            .chatModeArea .chatModeAreaSec .chatPanel .nameArea .iconArea {
                width: 84px
            }

                .chatModeArea .chatModeAreaSec .chatPanel .nameArea .iconArea ul {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    margin: 0;
                    height: 34px
                }

                    .chatModeArea .chatModeAreaSec .chatPanel .nameArea .iconArea ul li {
                        list-style: none;
                        cursor: pointer;
                        position: relative;
                        height: 34px;
                        display: flex;
                        align-items: center
                    }

                        .chatModeArea .chatModeAreaSec .chatPanel .nameArea .iconArea ul li:hover .status {
                            display: flex
                        }

                        .chatModeArea .chatModeAreaSec .chatPanel .nameArea .iconArea ul li svg {
                            display: flex
                        }

                        .chatModeArea .chatModeAreaSec .chatPanel .nameArea .iconArea ul li .status {
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 16px;
                            color: var(--c2d);
                            width: 114px;
                            height: 36px;
                            border-radius: 6px;
                            display: none;
                            align-items: center;
                            justify-content: center;
                            position: absolute;
                            top: 34px;
                            right: 0;
                            background-color: var(--white);
                            -webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
                            -moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
                            box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
                            cursor: pointer;
                            z-index: 2
                        }

                            .chatModeArea .chatModeAreaSec .chatPanel .nameArea .iconArea ul li .status svg {
                                margin-right: 8px
                            }

        .chatModeArea .chatModeAreaSec .chatPanel .messageAreaOuter {
            padding: 10px 8px;
            margin-bottom: 54px
        }

        .chatModeArea .chatModeAreaSec .chatPanel .messageArea {
            background-color: var(--white);
            height: calc((100vh) - 402px);
            overflow-y: auto
        }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea::-webkit-scrollbar {
                width: 8px;
                margin-left: 5px;
                left: 5px
            }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea::-webkit-scrollbar-track {
                background: #ffffff
            }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea::-webkit-scrollbar-thumb {
                background: #ffffff;
                box-shadow: none
            }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea::-webkit-scrollbar-thumb:hover {
                    background: #ffffff
                }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea .dateArea {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin-top: 12px
            }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea .dateArea:first-child {
                    margin-top: 0px
                }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea .dateArea .date {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                    color: var(--c2d);
                    background-color: var(--white);
                    padding: 0 23px;
                    display: inline;
                    z-index: 1
                }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea .dateArea hr {
                    height: 1px;
                    width: 100%;
                    background-color: #DDDDDD;
                    border: none;
                    margin-top: -9px
                }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea .daytime {
                font-size: 10px;
                font-weight: 400;
                line-height: 10px;
                color: #808080;
                margin-left: 15px;
                margin-top: 12px;
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                justify-content: start
            }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea .daytime svg {
                    margin-left: 3px
                }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea ul {
                padding: 0;
                margin: 0
            }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea ul li {
                    list-style: none;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 16px;
                    color: var(--c2d);
                    max-width: 265px;
                    background-color: var(--lightBg);
                    border-radius: 0 8px 8px 8px;
                    padding: 6px 12px;
                    margin-bottom: 2px;
                    width: fit-content
                }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea .textRight {
                text-align: right
            }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea .textRight .daytime {
                    margin-right: 15px;
                    margin-left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: end
                }

                    .chatModeArea .chatModeAreaSec .chatPanel .messageArea .textRight .daytime svg {
                        margin-left: 3px
                    }

                .chatModeArea .chatModeAreaSec .chatPanel .messageArea .textRight li {
                    margin-left: auto;
                    border-radius: 8px 0 8px 8px;
                    background-color: #F3F3F3
                }

            .chatModeArea .chatModeAreaSec .chatPanel .messageArea .newMsg {
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: var(--c2d);
                background-color: var(--white);
                height: 25px;
                width: 112px;
                margin: 6px auto;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6px;
                -webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
                -moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
                box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21)
            }

        .chatModeArea .chatModeAreaSec .chatPanel .typeArea {
            background-color: var(--lightBg);
            height: 55px;
            position: absolute;
            width: 100%;
            max-width: 305px;
            bottom: 0
        }

            .chatModeArea .chatModeAreaSec .chatPanel .typeArea .inputCtrl {
                background-color: transparent;
                border: none;
                padding: 0 57px 0 16px
            }

                .chatModeArea .chatModeAreaSec .chatPanel .typeArea .inputCtrl::placeholder {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 16px;
                    color: var(--c2d)
                }

            .chatModeArea .chatModeAreaSec .chatPanel .typeArea .icon {
                right: 10px;
                bottom: 1px;
                cursor: pointer
            }

            .chatModeArea .chatModeAreaSec .chatPanel .typeArea .cmnBtn {
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: #ffffff;
                background-color: var(--theme-colour1);
                width: 100%;
                height: 100%;
                cursor: pointer;
                outline: none;
                border: none
            }

                .chatModeArea .chatModeAreaSec .chatPanel .typeArea .cmnBtn:hover {
                    background-color: var(--theme-colour2)
                }

.ui-widget-content {
    z-index: 999999 !important
}

ul#ui-id-1 {
    max-height: 200px;
    overflow: auto
}

.ui-widget-content {
    max-height: 200px;
    overflow: auto
}

.chatRgtIcn {
    position: fixed;
    right: -70px;
    top: 50%;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: var(--white);
    width: fit-content;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-colour1);
    transition: ease-in-out .4s;
    padding: 12px 28px;
    transform: rotate(-90deg);
    cursor: pointer;
    z-index: 6;
    height: 41px
}

    .chatRgtIcn:hover {
        background-color: var(--theme-colour2)
    }

    .chatRgtIcn span {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        color: var(--white);
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #EB6463;
        position: absolute;
        top: -10px;
        left: 164px;
        -webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
        -moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
        box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.21);
        transform: rotate(90deg)
    }

@media (max-width: 1199px) {
    .sideSec {
        display: flex;
        flex-wrap: wrap
    }
}

@media (max-width: 1199px) {
    .sideSec .find-match {
        max-width: 294px;
        margin: 0 20px 0 0
    }
}

@media (max-width: 1199px) {
    .sideSec .go-to.grey {
        max-width: 294px;
        margin: 0 20px 0 0
    }
}

@media (max-width: 1199px) {
    .sideSec .happy-help {
        max-width: 294px;
        margin: 0 20px 0 0
    }
}

@media (max-width: 1199px) {
    .sideSec br {
        display: none
    }
}

.exclosivePackage {
    background-color: var(--lightBg);
    height: auto
}

    .exclosivePackage .template-container .package {
        padding: 15px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column
    }

@media (max-width: 991px) {
    .exclosivePackage .template-container .package {
        padding: 10px 0
    }
}

.exclosivePackage .template-container .package .headerPack {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .exclosivePackage .template-container .package .headerPack {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px
    }
}

.exclosivePackage .template-container .package .linePack {
    width: 32px;
    height: 1px;
    background: var(--theme-colour1);
    margin-top: 1px;
    margin-bottom: 20px
}

.exclosivePackage .template-container .package .mainHeadPack {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    color: #2D2D2D;
    margin-bottom: 12px
}

@media (max-width: 767px) {
    .exclosivePackage .template-container .package .mainHeadPack {
        font-size: 20px;
        font-weight: 500;
        line-height: 26px
    }
}

.exclosivePackage .template-container .package .subHeadPack {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .exclosivePackage .template-container .package .subHeadPack {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent {
        max-width: 980px;
        margin: auto
    }
}

.packageList .template-container .wrapContent .borderWrap {
    border: 1px solid #C1C1C1;
    border-radius: 6px;
    padding: 41px 10px 14px 10px;
    margin-top: 41px
}

@media (max-width: 1024px) {
    .packageList .template-container .wrapContent .borderWrap .borderWrapDiv {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px
    }
}

@media (max-width: 550px) {
    .packageList .template-container .wrapContent .borderWrap .borderWrapDiv {
        grid-template-columns: 1fr
    }
}

.packageList .template-container .wrapContent .borderWrap .subTitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    color: var(--c2d);
    text-transform: uppercase;
    margin: -56px auto 30px;
    width: fit-content;
    background-color: #fff;
    padding: 0 20px
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .borderWrap .subTitle {
        margin: -56px auto 10px
    }
}

@media (max-width: 680px) {
    .packageList .template-container .wrapContent .borderWrap .subTitle {
        font-size: 20px;
        line-height: 24px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel {
    display: grid;
    grid-template-columns: 244px 1fr 244px;
    column-gap: 10px;
    border-radius: 8px;
    margin-top: 6px;
    border: 1px solid #DCDCDC
}

@media (max-width: 1024px) {
    .packageList .template-container .wrapContent .classicPackageLevel {
        grid-template-columns: 1fr;
        margin-top: 10px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel:first-child {
    margin-top: 8px
}

.packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .classicPackage {
    padding: 16px 20px 16px 20px
}

    .packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .classicPackage .iconText {
        height: auto;
        white-space: initial;
        font-size: 20px;
        line-height: 20px
    }

    .packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .classicPackage .amount {
        font-size: 25px
    }

.packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .middleContent {
    grid-template-columns: 1fr;
    padding: 15px 0
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .middleContent {
        padding: 10px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .middleContent .listOne {
    padding-top: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .middleContent .listOne {
        grid-template-columns: 1fr
    }
}

.packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .middleContent .listOne .address {
    align-items: baseline
}

.packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .middleContent .listOne .chat {
    align-items: baseline
}

.packageList .template-container .wrapContent .classicPackageLevel.classicPackageLevel2 .middleContent .listOne .express {
    align-items: baseline
}

.packageList .template-container .wrapContent .classicPackageLevel .classicPackage {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-image: linear-gradient(var(--theme-colour1), var(--theme-colour2));
    border-radius: 6px 0px 0px 6px;
    padding: 16px 0px 16px 30px;
    height: auto
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .classicPackage {
        padding: 16px;
        border-radius: 5px
    }
}

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .classicPackage {
        height: 200px
    }
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .classicPackage .iconLogo {
        display: flex;
        justify-content: center
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .classicPackage .iconText {
    width: 200px;
    height: 25px;
    white-space: nowrap;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    color: var(--white);
    margin-top: 12px
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .classicPackage .iconText {
        display: flex;
        justify-content: center;
        width: 100%
    }
}

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .classicPackage .iconText {
        height: 40px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .classicPackage .smallText {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: var(--white);
    margin: 8px 0px
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .classicPackage .smallText {
        display: flex;
        justify-content: center
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .classicPackage .amount {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    color: var(--white)
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .classicPackage .amount {
        display: flex;
        justify-content: center;
        align-items: center
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 15px;
    align-items: center
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent {
        margin: 8px;
        border: 1px solid #c1b5b5;
        padding: 10px;
        border-radius: 8px;
        grid-template-columns: 1fr
    }
}

@media (max-width: 680px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent {
        grid-template-columns: 1fr
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne {
    padding-top: 4px
}

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px
    }

        .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address .iconAddress {
            font-size: 15px;
            font-weight: 400;
            line-height: 19px;
            color: #2D2D2D
        }

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address .iconAddress {
        display: grid;
        grid-template-columns: 20px 1fr;
        grid-gap: 10px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address .iconAddress svg {
    position: relative;
    top: 2px;
    margin-right: 8px
}

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address .iconAddress svg ellipse {
        fill: var(--light2Bg)
    }

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address .iconAddress svg path {
        fill: var(--theme-colour2)
    }

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address .AmountAddress {
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
    color: var(--theme-colour1)
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .address .AmountAddress {
        text-align: right;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat .iconAddress {
        font-size: 15px;
        font-weight: 400;
        line-height: 19px;
        color: #2D2D2D
    }

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat .iconAddress {
        display: grid;
        grid-template-columns: 20px 1fr;
        grid-gap: 10px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat .iconAddress svg {
    position: relative;
    top: 2px;
    margin-right: 8px
}

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat .iconAddress svg ellipse {
        fill: var(--light2Bg)
    }

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat .iconAddress svg path {
        fill: var(--theme-colour2)
    }

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat .AmountAddress {
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
    color: var(--theme-colour1)
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .chat .AmountAddress {
        text-align: right;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express .iconAddress {
        font-size: 15px;
        font-weight: 400;
        line-height: 19px;
        color: #2D2D2D
    }

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express .iconAddress {
        display: grid;
        grid-template-columns: 20px 1fr;
        grid-gap: 10px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express .iconAddress svg {
    position: relative;
    top: 2px;
    margin-right: 8px
}

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express .iconAddress svg ellipse {
        fill: var(--light2Bg)
    }

    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express .iconAddress svg path {
        fill: var(--theme-colour2)
    }

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express .AmountAddress {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--theme-colour1)
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .express .AmountAddress {
        text-align: right;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent .listOne .notActive {
    color: #8A8989 !important
}

.packageList .template-container .wrapContent .classicPackageLevel .middleContent.middleContent2 {
    grid-template-columns: 1fr 1fr;
    padding: 20px 0 10px
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent.middleContent2 {
        grid-template-columns: 1fr;
        padding: 20px 8px 10px;
        min-height: 320px
    }
}

@media (max-width: 680px) {
    .packageList .template-container .wrapContent .classicPackageLevel .middleContent.middleContent2 {
        grid-template-columns: 1fr
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: var(--light2Bg);
    border-radius: 0px 6px 6px 0px;
    margin-top: -1px;
    height: auto
}

@media (max-width: 1366px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice {
        padding: 16px;
        border: 1px solid #DCDCDC;
        border-radius: 8px
    }
}

@media (max-width: 1366px) and (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice {
        padding: 8px
    }
}

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice {
        height: 200px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .OfferHead {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #2D2D2D;
        margin-bottom: 16px
    }

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .OfferHead {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .price {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    color: var(--theme-colour2)
}

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .price {
        font-size: 25px;
        font-weight: 400;
        line-height: 30px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .price svg path {
    fill: var(--theme-colour2)
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .butttonOffer {
    margin-top: 20px;
    transition: width 2s
}

    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .butttonOffer button {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: var(--white);
        width: 100%;
        height: 50px;
        padding: 0px 30px;
        background-color: var(--theme-colour2);
        border-radius: 4px;
        border: none;
        cursor: pointer
    }

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .butttonOffer button {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .OfferHeadprice {
    display: flex;
    align-items: center;
    justify-content: center
}

    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .OfferHeadprice .PriceOffer {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        margin-right: 16px;
        color: #818181
    }

    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .OfferHeadprice .amount {
        font-size: 30px;
        font-weight: 500;
        line-height: 36px;
        color: #93939B;
        position: relative
    }

        .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .OfferHeadprice .amount .borderSvg path {
            stroke: var(--theme-colour2)
        }

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .mainOffer {
    display: flex;
    margin-top: 13px;
    align-items: center;
    justify-content: center
}

    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .mainOffer .offMin {
        margin-right: 16px;
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #2D2D2D
    }

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .mainOffer .offMin {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .mainOffer .ofAmount {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    color: var(--theme-colour2)
}

@media (max-width: 767px) {
    .packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .mainOffer .ofAmount {
        font-size: 25px;
        font-weight: 500;
        line-height: 30px
    }
}

.packageList .template-container .wrapContent .classicPackageLevel .offerPrice .offer .mainOffer .ofAmount svg path {
    fill: var(--theme-colour2)
}

.packageList .template-container .wrapContent .classicPackageLevel:hover {
    box-shadow: 0px 3px 6px #b0b2de
}

    .packageList .template-container .wrapContent .classicPackageLevel:hover .offerPrice .offer .butttonOffer button {
        color: var(--white);
        padding: 0 60px
    }

.bankAccountInformation {
    display: flex;
    flex-direction: column
}

    .bankAccountInformation .template-container .Mainhead {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #2D2D2D;
        margin-top: 30px
    }

@media (max-width: 767px) {
    .bankAccountInformation .template-container .Mainhead {
        margin-top: 15px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.bankAccountInformation .template-container .subHead {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    color: var(--theme-colour1);
    margin: 14px 0px
}

@media (max-width: 767px) {
    .bankAccountInformation .template-container .subHead {
        font-size: 22px;
        font-weight: 500;
        line-height: 26px
    }
}

.bankAccountInformation .template-container .discription {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: #2D2D2D;
    margin-bottom: 36px
}

@media (max-width: 767px) {
    .bankAccountInformation .template-container .discription {
        font-size: 12px;
        font-weight: 500;
        line-height: 15px
    }
}

.bankDetails .template-container .bankList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px
}

@media (max-width: 991px) {
    .bankDetails .template-container .bankList {
        grid-template-columns: 1fr;
        column-gap: 10px
    }
}

.bankDetails .template-container .bankList .mainContent {
    border-radius: 8px;
    border: 1px solid #DDE3E8;
    margin-bottom: 20px
}

    .bankDetails .template-container .bankList .mainContent .headerBank {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #F5F5F5
    }

        .bankDetails .template-container .bankList .mainContent .headerBank .logo {
            padding: 12px 24px
        }

        .bankDetails .template-container .bankList .mainContent .headerBank .bankName {
            font-size: 18px;
            font-weight: 500;
            line-height: 22px;
            color: #2D2D2D
        }

@media (max-width: 767px) {
    .bankDetails .template-container .bankList .mainContent .headerBank .bankName {
        font-size: 16px;
        line-height: 20px
    }
}

.bankDetails .template-container .bankList .mainContent .details {
    padding: 0px 24px 24px 24px
}

@media (max-width: 991px) {
    .bankDetails .template-container .bankList .mainContent .details {
        padding: 0px 10px 10px 10px
    }
}

.bankDetails .template-container .bankList .mainContent .details .accountHolder {
    margin-top: 11px;
    display: flex;
    flex-direction: column
}

    .bankDetails .template-container .bankList .mainContent .details .accountHolder label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #2D2D2D;
        margin-bottom: 8px
    }

    .bankDetails .template-container .bankList .mainContent .details .accountHolder .contentAccountHolder {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        color: var(--theme-colour1);
        padding: 18px 24px;
        background-color: var(--lightBg);
        border-radius: 4px
    }

    .bankDetails .template-container .bankList .mainContent .details .accountHolder .contentAccountNumber {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        color: #2D2D2D;
        padding: 18px 24px;
        background-color: var(--lightBg);
        border-radius: 4px;
        margin-bottom: 8px
    }

.bankDetails .template-container .bankList .mainContent .details .ifscBranch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px
}

@media (max-width: 991px) {
    .bankDetails .template-container .bankList .mainContent .details .ifscBranch {
        grid-template-columns: 1fr;
        row-gap: 10px
    }
}

.bankDetails .template-container .bankList .mainContent .details .ifscBranch .ifsc label {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #2D2D2D
}

.bankDetails .template-container .bankList .mainContent .details .ifscBranch .ifsc .ifscSection {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #2D2D2D;
    padding: 18px 24px;
    background-color: var(--lightBg);
    border-radius: 4px;
    margin-top: 8px
}

.bankDetails .template-container .bankList .mainContent .details .ifscBranch .branch label {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #2D2D2D
}

.bankDetails .template-container .bankList .mainContent .details .ifscBranch .branch .branchSetion {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #2D2D2D;
    padding: 18px 24px;
    background-color: var(--lightBg);
    border-radius: 4px;
    margin-top: 8px
}

.upiSection .template-container .upiCode {
    display: grid;
    grid-template-columns: 464px 1fr;
    column-gap: 121px;
    margin-top: 80px
}

@media (max-width: 1199px) {
    .upiSection .template-container .upiCode {
        column-gap: 40px;
        margin-bottom: 80px
    }
}

@media (max-width: 1024px) {
    .upiSection .template-container .upiCode {
        grid-template-columns: 1fr;
        row-gap: 10px;
        margin-top: 50px;
        margin-bottom: 0px
    }
}

@media (max-width: 767px) {
    .upiSection .template-container .upiCode {
        margin-top: 20px
    }
}

@media (max-width: 480px) {
    .upiSection .template-container .upiCode {
        margin-top: 0px
    }
}

.upiSection .template-container .upiCode .leftSide {
    height: 800px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative
}

@media (max-width: 1199px) {
    .upiSection .template-container .upiCode .leftSide {
        height: 609px
    }
}

@media (max-width: 480px) {
    .upiSection .template-container .upiCode .leftSide {
        background-image: none !important;
        height: 10vh;
        display: none
    }
}

.upiSection .template-container .upiCode .leftSide .QrCode {
    position: absolute;
    top: 20%;
    left: 24%;
    text-align: center
}

@media (max-width: 1199px) {
    .upiSection .template-container .upiCode .leftSide .QrCode {
        left: auto;
        right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: auto;
        width: 100%
    }
}

.upiSection .template-container .upiCode .leftSide .QrCode .name {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #FFFFFF;
    margin-bottom: 20px
}

.upiSection .template-container .upiCode .leftSide .QrCode .upiName {
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    color: #FFFFFF;
    margin-bottom: 20px
}

.upiSection .template-container .upiCode .leftSide .QrCode .call {
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    color: #FFFFFF;
    margin-bottom: 20px
}

.upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

    .upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody img {
        max-width: 240px;
        width: 240px
    }

    .upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody .googlePay .accept {
        font-size: 12px;
        font-weight: 400;
        line-height: 1px;
        color: #c7c5c5
    }

    .upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody .matrimonyName {
        margin-top: 20px
    }

        .upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody .matrimonyName label {
            font-size: 14px;
            font-weight: 500;
            line-height: 1px;
            border-top: 1px solid #ececec
        }

        .upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody .matrimonyName .callgy {
            font-size: 12px;
            font-weight: 400;
            line-height: 6px;
            margin-bottom: 8px;
            color: #c7c5c5
        }

    .upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody .QrCodeArea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

        .upiSection .template-container .upiCode .leftSide .QrCode .QrCodeBody .QrCodeArea .qrcodeBottom {
            font-size: 12px;
            font-weight: 400;
            line-height: 6px;
            color: #c7c5c5
        }

@media (max-width: 1024px) {
    .upiSection .template-container .upiCode .rightSide {
        margin-bottom: 40px
    }
}

@media (max-width: 480px) {
    .upiSection .template-container .upiCode .rightSide {
        margin-bottom: 0px
    }
}

.upiSection .template-container .upiCode .rightSide .headerUpi {
    font-size: 37px;
    font-weight: 600;
    line-height: 44px;
    color: var(--theme-colour1);
    margin-top: 124px;
    width: 390px;
    height: 88px
}

@media (max-width: 1024px) {
    .upiSection .template-container .upiCode .rightSide .headerUpi {
        margin-top: 0px;
        text-align: center;
        margin: auto
    }
}

@media (max-width: 767px) {
    .upiSection .template-container .upiCode .rightSide .headerUpi {
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
        height: auto;
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .upiSection .template-container .upiCode .rightSide .headerUpi {
        width: 100%
    }
}

.upiSection .template-container .upiCode .rightSide .paraGrap {
    margin-top: 17px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #707070
}

@media (max-width: 1024px) {
    .upiSection .template-container .upiCode .rightSide .paraGrap {
        text-align: center;
        margin: auto;
        max-width: 600px
    }
}

.upiSection .template-container .upiCode .rightSide .googlePayBlock {
    width: 475px;
    height: 174px;
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 39px 41px;
    display: flex;
    position: relative;
    align-items: center
}

@media (max-width: 1024px) {
    .upiSection .template-container .upiCode .rightSide .googlePayBlock {
        margin: 20px auto
    }
}

@media (max-width: 680px) {
    .upiSection .template-container .upiCode .rightSide .googlePayBlock {
        padding: 25px 10px;
        width: 306px;
        height: auto;
        flex-direction: column
    }
}

.upiSection .template-container .upiCode .rightSide .googlePayBlock .logo {
    margin-right: 60px
}

.upiSection .template-container .upiCode .rightSide .googlePayBlock .UpiGorup {
    position: relative
}

    .upiSection .template-container .upiCode .rightSide .googlePayBlock .UpiGorup .accountImb {
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        color: #2D2D2D
    }

@media (max-width: 767px) {
    .upiSection .template-container .upiCode .rightSide .googlePayBlock .UpiGorup .accountImb {
        font-size: 18px;
        margin-top: 12px
    }
}

.upiSection .template-container .upiCode .rightSide .googlePayBlock .UpiGorup .upiCodeGooglePay {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--theme-colour2);
    margin-top: 12px
}

@media (max-width: 767px) {
    .upiSection .template-container .upiCode .rightSide .googlePayBlock .UpiGorup .upiCodeGooglePay {
        font-size: 18px;
        margin-top: 8px
    }
}

.upiSection .template-container .upiCode .rightSide .googlePayBlock .UpiGorup .phoneNumber {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--theme-colour2);
    margin-top: 12px
}

@media (max-width: 767px) {
    .upiSection .template-container .upiCode .rightSide .googlePayBlock .UpiGorup .phoneNumber {
        font-size: 18px;
        margin-top: 8px
    }
}

.upiSection .template-container .upiCode .rightSide .googlePayBlock img {
    position: absolute;
    transform: translate(-76px, 76px)
}

@media (max-width: 1199px) {
    .upiSection .template-container .upiCode .rightSide .googlePayBlock img {
        display: none
    }
}

.freeDesktop .template-container .information {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
    margin-bottom: 34px;
    column-gap: 34px
}

@media (max-width: 1024px) {
    .freeDesktop .template-container .information {
        grid-template-columns: 1fr;
        column-gap: 0px;
        row-gap: 10px
    }
}

@media (max-width: 767px) {
    .freeDesktop .template-container .information {
        margin-bottom: 10px
    }
}

.freeDesktop .template-container .information .Area {
    background-color: var(--lightBg);
    border-radius: 8px;
    padding: 40px 32px
}

@media (max-width: 480px) {
    .freeDesktop .template-container .information .Area {
        padding: 10px
    }
}

.freeDesktop .template-container .information .Area .logoContent {
    display: flex
}

@media (max-width: 480px) {
    .freeDesktop .template-container .information .Area .logoContent {
        flex-direction: column
    }
}

@media (max-width: 480px) {
    .freeDesktop .template-container .information .Area .logoContent .logo {
        display: flex;
        justify-content: center
    }
}

.freeDesktop .template-container .information .Area .logoContent .logo svg {
    margin-right: 24px;
    margin-bottom: 24px
}

.freeDesktop .template-container .information .Area .logoContent .content label {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #2D2D2D
}

.freeDesktop .template-container .information .Area .logoContent .content .subContent {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #5B5B5B;
    margin-top: 12px
}

.freeDesktop .template-container .information .Area .paraData {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #5B5B5B
}

@media (max-width: 767px) {
    .freeDesktop .template-container .information .Area .paraData {
        font-size: 14px;
        font-weight: 500;
        line-height: 22px
    }
}

.bannerPackage .template-container .content {
    align-items: center;
    height: auto;
    width: 100%;
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-image: url("../images/packageBanner.png");
    border-radius: 19px;
    padding: 54px 165px;
    margin-bottom: 64px;
    background-size: cover
}

@media (max-width: 1279px) {
    .bannerPackage .template-container .content {
        padding: 54px 100px
    }
}

@media (max-width: 1199px) {
    .bannerPackage .template-container .content {
        padding: 54px 50px
    }
}

@media (max-width: 1024px) {
    .bannerPackage .template-container .content {
        flex-direction: column;
        padding: 40px 10px
    }
}

.bannerPackage .template-container .content .left a {
    font-size: 40px;
    font-weight: 500;
    line-height: 47px;
    color: #FFFFFF
}

@media (max-width: 1024px) {
    .bannerPackage .template-container .content .left a {
        font-size: 30px;
        font-weight: 500;
        line-height: 47px
    }
}

.bannerPackage .template-container .content .right {
    font-size: 33px;
    font-weight: 500;
    line-height: 39px;
    color: #FFFFFF;
    width: 502px;
    height: 76px
}

@media (max-width: 1024px) {
    .bannerPackage .template-container .content .right {
        font-size: 23px;
        font-weight: 500;
        line-height: 39px;
        width: 100%;
        height: auto;
        text-align: center
    }
}

@media (max-width: 767px) {
    .bannerPackage .template-container .content .right {
        font-size: 18px;
        font-weight: 500;
        line-height: 28px
    }
}

.callCon {
    width: 270px;
    height: 142px;
    background-color: rgba(24,28,149,0.5);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-self: center
}

    .callCon .leftIcon {
        margin-right: 12px
    }

    .callCon .rightSec .labelNam {
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        color: #FFFFFF
    }

    .callCon .rightSec a {
        color: #FFFFFF;
        font-size: 24px !important;
        font-weight: 500 !important;
        line-height: 32px !important
    }

.emCall {
    display: block;
    line-height: 29px;
    padding: 20px 0
}

@media (max-width: 1199px) {
    .emCall {
        padding: 0px 17px 13PX
    }
}

.emCall a {
    display: flex;
    line-height: 35px
}

@media (max-width: 1199px) {
    .emCall a {
        color: var(--theme-colour2)
    }
}

.footerContent {
    margin-bottom: 12px
}

.featuredProfile {
    background-color: var(--lightBg);
    height: 180px
}

    .featuredProfile .template-container .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 34px
    }

        .featuredProfile .template-container .header .left .content {
            font-size: 22px;
            font-weight: 600;
            line-height: 27px;
            color: var(--theme-colour1)
        }

@media (max-width: 767px) {
    .featuredProfile .template-container .header .left .content {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.featuredProfile .template-container .header .left .contentNair {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: black
}

@media (max-width: 767px) {
    .featuredProfile .template-container .header .left .contentNair {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.featuredProfile .template-container .header .right .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
    position: relative
}

    .featuredProfile .template-container .header .right .icon .icon1 {
        cursor: pointer
    }

        .featuredProfile .template-container .header .right .icon .icon1 span {
            position: absolute;
            opacity: 0;
            top: -25px;
            left: -75px;
            font-size: 10px;
            font-weight: 400;
            line-height: 27px;
            padding: 0px 16px;
            background-color: black;
            color: white;
            z-index: 999999;
            border-radius: 4px;
            pointer-events: none
        }

        .featuredProfile .template-container .header .right .icon .icon1:hover span {
            opacity: 1
        }

        .featuredProfile .template-container .header .right .icon .icon1.active svg path {
            fill: var(--theme-colour1)
        }

    .featuredProfile .template-container .header .right .icon .icon2 {
        cursor: pointer
    }

        .featuredProfile .template-container .header .right .icon .icon2 span {
            position: absolute;
            opacity: 0;
            top: -25px;
            right: 0px;
            font-size: 10px;
            font-weight: 400;
            line-height: 27px;
            padding: 0px 16px;
            background-color: black;
            color: white;
            z-index: 999999;
            border-radius: 4px;
            pointer-events: none
        }

        .featuredProfile .template-container .header .right .icon .icon2:hover span {
            opacity: 1
        }

        .featuredProfile .template-container .header .right .icon .icon2.active svg path {
            fill: var(--theme-colour1)
        }

.featuredProfile .featuredProfileNair {
    background-color: var(--lightBg)
}

.dataSection .template-container .featuredProfileList {
    display: grid;
    grid-template-columns: 1fr 310px;
    column-gap: 16px;
    margin-top: -90px
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList {
        grid-template-columns: 1fr
    }
}

.dataSection .template-container .featuredProfileList .left .Profile {
    height: auto;
    background-color: white;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #f3f3f3;
    display: grid;
    grid-template-columns: 150px 1fr;
    margin-top: 4px
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile {
        grid-template-columns: 1fr;
        height: auto;
        padding: 15px;
        column-gap: 15px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .photo {
    width: 150px;
    height: 190px;
    border-radius: 9px
}

    .dataSection .template-container .featuredProfileList .left .Profile .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 9px
    }

.dataSection .template-container .featuredProfileList .left .Profile .content {
    padding-left: 20px
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content {
        padding-left: 0px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .topContent {
    display: flex;
    align-items: center;
    margin-bottom: 24px
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .topContent {
        margin-bottom: 16px
    }
}

@media (max-width: 480px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .topContent {
        margin-bottom: 8px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .topContent .icon {
    margin-right: 12px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .topContent .icon svg path {
        fill: var(--theme-colour1)
    }

.dataSection .template-container .featuredProfileList .left .Profile .content .topContent .name {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .topContent .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .topContent .name {
        font-size: 12px;
        font-weight: 600;
        line-height: 18px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .topContent .separation {
    width: 2px;
    height: 20px;
    background-color: var(--theme-colour1);
    margin: 0 10px
}

.dataSection .template-container .featuredProfileList .left .Profile .content .topContent .code {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .topContent .code {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .topContent .code {
        font-size: 12px;
        font-weight: 600;
        line-height: 18px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContent {
    display: grid;
    grid-template-columns: 270px 220px 1fr;
    column-gap: 10px;
    margin-bottom: 8px
}

@media (max-width: 1366px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 1226px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .age {
    margin-bottom: 10px;
    display: flex
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .age .icon {
        margin-right: 12px
    }

        .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .age .icon svg path {
            fill: #cecece
        }

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .age .content {
        padding-top: 2px;
        padding-left: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1199px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .age .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .cast {
    margin-bottom: 10px;
    display: flex
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .cast .icon {
        margin-right: 12px
    }

        .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .cast .icon svg path {
            fill: #cecece
        }

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .cast .content {
        padding-top: 2px;
        padding-left: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1199px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .cast .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .education {
    margin-bottom: 10px;
    display: flex
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .education .icon {
        margin-right: 12px
    }

        .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .education .icon svg path {
            fill: #cecece
        }

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .education .content {
        padding-top: 2px;
        padding-left: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1199px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .education .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .location {
    display: flex;
    margin-bottom: 10px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .location .icon {
        margin-right: 12px
    }

        .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .location .icon svg path {
            fill: #cecece
        }

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .location .content {
        padding-top: 2px;
        padding-left: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1024px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .location .content {
        margin-right: 20px
    }
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .location .content {
        margin-right: 4px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .location .content {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .religion {
    display: flex;
    margin-bottom: 10px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .religion .icon {
        margin-right: 12px
    }

        .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .religion .icon svg path {
            fill: #cecece
        }

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .religion .content {
        margin-right: 30px;
        padding-top: 2px;
        padding-left: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1024px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .job {
    display: flex;
    margin-bottom: 10px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .job .icon {
        margin-right: 12px
    }

        .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .job .icon svg path {
            fill: #cecece
        }

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .job .content {
        margin-right: 30px;
        padding-top: 2px;
        padding-left: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1024px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContent .job .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow {
    margin-bottom: 21px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 0px
    }
}

@media (max-width: 480px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location {
    display: flex
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location {
        margin-bottom: 10px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location .icon {
    margin-right: 12px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location .icon svg path {
        fill: #cecece
    }

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location .content {
    padding-top: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location .content {
        margin-right: 20px
    }
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location .content {
        margin-right: 4px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .location .content {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .religion {
    display: flex
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .religion {
        margin-bottom: 10px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .religion .icon {
    margin-right: 12px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .religion .icon svg path {
        fill: #cecece
    }

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .religion .content {
    margin-right: 30px;
    padding-top: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .job {
    display: flex
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .job {
        margin-bottom: 10px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .job .icon {
    margin-right: 12px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .job .icon svg path {
        fill: #cecece
    }

.dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .job .content {
    margin-right: 30px;
    padding-top: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .middleContentsecRow .job .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media (max-width: 1279px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent {
        flex-direction: column;
        align-items: baseline
    }
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent {
        flex-wrap: wrap
    }
}

@media (max-width: 680px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent {
        display: grid;
        grid-template-columns: 1fr
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 1279px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left {
        margin-top: 10px
    }
}

@media (max-width: 1199px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left {
        display: flex;
        flex-wrap: wrap
    }
}

@media (max-width: 550px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left {
        grid-template-columns: 1fr
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .contact {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .contact {
        margin-bottom: 10px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .contact .icon {
    margin-right: 14px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: 0px 0px 11px #d5caca;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .contact .icon {
        margin-right: 4px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .contact .icon svg path {
    fill: var(--theme-colour1)
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .contact .content {
    margin-right: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131;
    padding-left: 0
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .contact .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .interst {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .interst {
        margin-bottom: 10px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .interst .icon {
    margin-right: 14px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: 0px 0px 11px #d5caca;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .interst .icon {
        margin-right: 4px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .interst .icon svg path {
    fill: var(--theme-colour1)
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .interst .content {
    margin-right: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131;
    padding-left: 0
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .interst .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .shortList {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .shortList {
        margin-bottom: 10px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .shortList .icon {
    margin-right: 14px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: 0px 0px 11px #d5caca;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .shortList .icon {
        margin-right: 4px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .shortList .icon svg path {
    fill: var(--theme-colour1)
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .shortList .content {
    margin-right: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131;
    padding-left: 0
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .left .shortList .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .right {
        margin-bottom: 10px
    }
}

.dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .right a button {
    background-color: var(--theme-colour1);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 12px 31px
}

    .dataSection .template-container .featuredProfileList .left .Profile .content .footerContent .right a button:hover {
        background-color: black;
        cursor: pointer
    }

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .right {
        margin-bottom: 30px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 10px
    }
}

@media (max-width: 550px) {
    .dataSection .template-container .featuredProfileList .right {
        grid-template-columns: 1fr
    }
}

.dataSection .template-container .featuredProfileList .right .profileOfTheDay {
    position: relative;
    background: linear-gradient(169deg, var(--light2Bg) 48%, #fff 34%);
    border-radius: 8px;
    border: 1px solid #F3F3F3
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .right .profileOfTheDay {
        order: 0;
        margin-top: 12px
    }
}

.dataSection .template-container .featuredProfileList .right .header {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--theme-colour1);
    padding-top: 20px
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .right .header {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.dataSection .template-container .featuredProfileList .right .photo {
    text-align: center
}

    .dataSection .template-container .featuredProfileList .right .photo img {
        border: 2px dashed var(--theme-colour1);
        border-radius: 50%;
        padding: 10px
    }

.dataSection .template-container .featuredProfileList .right .footerData {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px
}

    .dataSection .template-container .featuredProfileList .right .footerData .name {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #505050;
        margin-top: 8px
    }

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .right .footerData .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.dataSection .template-container .featuredProfileList .right .footerData .subName {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #505050;
    margin-top: 8px
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .right .footerData .subName {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.dataSection .template-container .featuredProfileList .community {
    border-radius: 8px;
    border: 1px solid #f3f3f3;
    padding: 12px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 12px
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .community {
        order: 2
    }
}

.dataSection .template-container .featuredProfileList .community .section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%
}

    .dataSection .template-container .featuredProfileList .community .section a {
        width: 100%;
        font-size: 18px;
        font-weight: 400;
        line-height: 22px;
        color: var(--theme-colour1);
        background-color: var(--lightBg);
        margin-top: 4px;
        border: none;
        border: none;
        padding: 13px 0px;
        border-radius: 8px;
        text-align: center
    }

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .community .section a {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px
    }
}

.dataSection .template-container .featuredProfileList .community .section a:hover {
    background-color: var(--light2Bg);
    cursor: pointer
}

.dataSection .template-container .featuredProfileList .community .section a:first-child {
    margin-top: 0
}

.dataSection .template-container .featuredProfileList .assistance {
    background-color: var(--lightBg);
    border-radius: 8px;
    padding: 24px 30px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media (max-width: 991px) {
    .dataSection .template-container .featuredProfileList .assistance {
        order: 1;
        margin-left: 20px
    }
}

@media (max-width: 550px) {
    .dataSection .template-container .featuredProfileList .assistance {
        margin-left: 0px
    }
}

.dataSection .template-container .featuredProfileList .assistance .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #313131;
    margin-top: 20px;
    margin-bottom: 24px;
    text-align: center
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .assistance .content {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }
}

.dataSection .template-container .featuredProfileList .assistance a .call {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--theme-colour1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px
}

@media (max-width: 767px) {
    .dataSection .template-container .featuredProfileList .assistance a .call {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.dataSection .template-container .featuredProfileList .assistance a .call svg {
    margin-right: 10px
}

.paggination2 {
    display: none
}

@media (max-width: 991px) {
    .paggination2 {
        display: flex
    }
}

.pagingNumberRow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 24px
}

@media (max-width: 991px) {
    .pagingNumberRow {
        display: none
    }
}

.pagingNumberRow.pagingNumberRowInner {
    display: none
}

@media (max-width: 991px) {
    .pagingNumberRow.pagingNumberRowInner {
        display: flex
    }
}

.pagingNumberRow ul {
    display: flex;
    margin: 0;
    padding: 0
}

    .pagingNumberRow ul li {
        padding: 2px 4px;
        list-style-type: none
    }

        .pagingNumberRow ul li a {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #434343;
            font-size: 14px;
            font-weight: 400;
            background-color: #f2f2f2;
            width: 42px;
            height: 42px;
            border-radius: 2px;
            transition: ease-in-out 0.4s;
            border-radius: 2px;
            border: solid 1px #fafafa
        }

            .pagingNumberRow ul li a:hover, .pagingNumberRow ul li a.active {
                color: var(--white);
                border-color: #f3f3f3;
                background-color: var(--theme-colour1);
                border-radius: 4px
            }

                .pagingNumberRow ul li a:hover svg path, .pagingNumberRow ul li a.active svg path {
                    fill: var(--white)
                }

            .pagingNumberRow ul li a svg path {
                fill: #707070
            }

.pagingNumberRow .prevPage, .pagingNumberRow .nextPage {
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #434343;
    font-size: 14px;
    font-weight: 400;
    width: 28px;
    height: 28px;
    border-radius: 2px;
    transition: ease-in-out 0.4s;
    border-radius: 2px;
    border: solid 1px #fafafa
}

    .pagingNumberRow .prevPage:hover, .pagingNumberRow .prevPage.active, .pagingNumberRow .nextPage:hover, .pagingNumberRow .nextPage.active {
        color: #cf0722;
        border-color: #f3f3f3;
        background-color: #ffffff
    }

.pagingNumberRowSuccess {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0px
}

    .pagingNumberRowSuccess ul {
        display: flex;
        margin: 0;
        padding: 0
    }

        .pagingNumberRowSuccess ul li {
            padding: 2px 4px;
            list-style-type: none
        }

            .pagingNumberRowSuccess ul li a {
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--theme-colour1);
                font-size: 14px;
                font-weight: 400;
                background-color: #f2f2f2;
                width: 42px;
                height: 42px;
                border-radius: 2px;
                transition: ease-in-out 0.4s;
                border-radius: 2px;
                border: solid 1px #fafafa
            }

                .pagingNumberRowSuccess ul li a:hover, .pagingNumberRowSuccess ul li a.active {
                    color: #ffffff;
                    border-color: #f3f3f3;
                    background-color: var(--theme-colour1);
                    border-radius: 4px
                }

                    .pagingNumberRowSuccess ul li a:hover svg path, .pagingNumberRowSuccess ul li a.active svg path {
                        fill: #ffffff
                    }

                .pagingNumberRowSuccess ul li a svg path {
                    fill: #707070
                }

    .pagingNumberRowSuccess .prevPage, .pagingNumberRowSuccess .nextPage {
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #434343;
        font-size: 14px;
        font-weight: 400;
        width: 28px;
        height: 28px;
        border-radius: 2px;
        transition: ease-in-out 0.4s;
        border-radius: 2px;
        border: solid 1px #fafafa
    }

        .pagingNumberRowSuccess .prevPage:hover, .pagingNumberRowSuccess .prevPage.active, .pagingNumberRowSuccess .nextPage:hover, .pagingNumberRowSuccess .nextPage.active {
            color: #cf0722;
            border-color: #f3f3f3;
            background-color: #ffffff
        }

.gridView .template-container .gridContent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 19px;
    margin-top: -100px
}

@media (max-width: 1279px) {
    .gridView .template-container .gridContent {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

@media (max-width: 1024px) {
    .gridView .template-container .gridContent {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 991px) {
    .gridView .template-container .gridContent {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 680px) {
    .gridView .template-container .gridContent {
        grid-template-columns: 1fr 1fr
    }
}

.gridView .template-container .gridContent .wrapperImg {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column
}

    .gridView .template-container .gridContent .wrapperImg:hover .details {
        opacity: 1;
        z-index: 999;
        transform: none
    }

    .gridView .template-container .gridContent .wrapperImg .pic {
        max-width: 238px;
        max-height: 302px;
        width: 100%;
        height: 100%;
        display: flex;
        border-radius: 19px
    }

@media (max-width: 1279px) {
    .gridView .template-container .gridContent .wrapperImg .pic {
        max-width: 308px;
        max-height: 372px
    }
}

@media (max-width: 680px) {
    .gridView .template-container .gridContent .wrapperImg .pic {
        max-width: 308px;
        max-height: 372px
    }
}

.gridView .template-container .gridContent .wrapperImg .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 19px
}

.gridView .template-container .gridContent .wrapperImg .footername {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (max-width: 767px) {
    .gridView .template-container .gridContent .wrapperImg .footername {
        font-size: 14px;
        font-weight: 400;
        line-height: 15px
    }
}

.gridView .template-container .gridContent .wrapperImg .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

@media (max-width: 767px) {
    .gridView .template-container .gridContent .wrapperImg .namecode {
        font-size: 10px;
        font-weight: 400;
        line-height: 12px
    }
}

.gridView .template-container .gridContent .wrapperImg .details {
    position: absolute;
    width: 100%;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    bottom: 0;
    opacity: 0;
    background: #ffffff;
    border-radius: 9px;
    border: 1px solid #EFEFEF;
    padding: 10px;
    z-index: 999;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08)
}

    .gridView .template-container .gridContent .wrapperImg .details .namesection {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px
    }

        .gridView .template-container .gridContent .wrapperImg .details .namesection .name {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            font-family: Rubik;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100px
        }

    .gridView .template-container .gridContent .wrapperImg .details .fullSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr
    }

        .gridView .template-container .gridContent .wrapperImg .details .fullSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .gridView .template-container .gridContent .wrapperImg .details .fullSize li span {
                width: 16px;
                margin-right: 6px
            }

    .gridView .template-container .gridContent .wrapperImg .details .smlSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

@media (max-width: 767px) {
    .gridView .template-container .gridContent .wrapperImg .details .smlSize {
        grid-template-columns: 1fr
    }
}

.gridView .template-container .gridContent .wrapperImg .details .smlSize li {
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 5px
}

    .gridView .template-container .gridContent .wrapperImg .details .smlSize li span {
        width: 16px;
        margin-right: 6px
    }

.gridView .template-container .gridContent .wrapperImg .details .viewprofile {
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    width: 100px;
    height: 32px;
    background: var(--theme-colour1);
    border-radius: 7px;
    margin: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease-in-out;
    margin-left: 0
}

    .gridView .template-container .gridContent .wrapperImg .details .viewprofile:hover {
        background: var(--theme-colour2)
    }

    .gridView .template-container .gridContent .wrapperImg .details .viewprofile a {
        color: var(--white)
    }

.pagingNumberRow.pagingNumberRowFeature {
    margin-top: 12px;
    margin-bottom: 30px
}

.experience {
    background-color: var(--lightBg)
}

    .experience .template-container .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        padding: 60px 0px
    }

        .experience .template-container .content .left img {
            width: 100%;
            max-width: 100%
        }

.slideShowRoyal .template-container .slideshow {
    position: relative;
    overflow: hidden;
    display: block;
    background-color: white;
    padding: 30px;
    border-radius: 4px;
    margin-top: -100px;
    box-shadow: 0px 3px 6px #d7d5d5
}

@media (max-width: 767px) {
    .slideShowRoyal .template-container .slideshow {
        padding: 15px 15px 30px
    }
}

.slideShowRoyal .template-container .slideshow .headerLeft {
    margin-top: 10px;
    margin-left: 11px
}

.slideShowRoyal .template-container .slideshow .holder .slide {
    display: grid;
    grid-template-columns: 460px 1fr;
    column-gap: 40px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover
}

@media (max-width: 1199px) {
    .slideShowRoyal .template-container .slideshow .holder .slide {
        column-gap: 20px
    }
}

@media (max-width: 991px) {
    .slideShowRoyal .template-container .slideshow .holder .slide {
        column-gap: 10px;
        grid-template-columns: 1fr
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .slide-1 {
    background-image: url(../images/slideShowSection.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    width: 460px;
    height: 380px;
    max-width: 460px;
    max-height: 380px
}

@media (max-width: 991px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .slide-1 {
        display: none
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .slide-2 {
    background-image: url(../images/slideShowSection.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    width: 460px;
    height: 380px;
    max-width: 460px;
    max-height: 380px
}

@media (max-width: 991px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .slide-2 {
        display: none
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .slide-3 {
    background-image: url(../images/slideShowSection.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    width: 460px;
    height: 380px;
    max-width: 460px;
    max-height: 380px
}

@media (max-width: 991px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .slide-3 {
        display: none
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .slide-4 {
    background-image: url(../images/slideShowSection.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    width: 460px;
    height: 380px;
    max-width: 460px;
    max-height: 380px
}

@media (max-width: 991px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .slide-4 {
        display: none
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .headeRoyal {
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    margin-top: 36px;
    margin-bottom: 22px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .headeRoyal {
        font-size: 20px;
        font-weight: 500;
        line-height: 25px
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .content {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    margin-top: 36px;
    color: #333333
}

@media (max-width: 767px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .content {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .marrageDate {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    margin-top: 36px;
    color: #414141
}

@media (max-width: 767px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .marrageDate {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .fooetrRoyal {
    display: flex;
    align-items: end;
    justify-content: end
}

@media (max-width: 1199px) {
    .slideShowRoyal .template-container .slideshow .holder .slide .copy-cta-containerRoyal .fooetrRoyal {
        display: none
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide button {
    border: none;
    background-color: transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    width: 100%;
    height: 25.23px;
    background: var(--theme-colour1);
    border-radius: 5px;
    margin-bottom: 16px
}

@media (max-width: 767px) {
    .slideShowRoyal .template-container .slideshow .holder .slide button {
        font-size: 10px;
        font-weight: 600;
        line-height: 19px
    }
}

.slideShowRoyal .template-container .slideshow .holder .slide.button {
    color: var(--white);
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px
}

.slideShowRoyal .template-container .slideshow .carousel-dots {
    position: absolute;
    bottom: 41px;
    width: 100%;
    text-align: center
}

    .slideShowRoyal .template-container .slideshow .carousel-dots.carosel {
        left: 16px
    }

@media (max-width: 991px) {
    .slideShowRoyal .template-container .slideshow .carousel-dots.carosel {
        right: -100px;
        bottom: 70px
    }
}

.slideShowRoyal .template-container .slideshow .carousel-dots .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin-right: 4px;
    border: 1px solid var(--theme-colour1);
    background-color: transparent;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease
}

    .slideShowRoyal .template-container .slideshow .carousel-dots .dot.active {
        background-color: var(--theme-colour1)
    }

    .slideShowRoyal .template-container .slideshow .carousel-dots .dot:hover {
        background-color: var(--theme-colour1)
    }

a.prev, a.next {
    background-color: var(--white);
    padding: 8px 14px 8px 14px;
    margin-right: 10px;
    height: 40px;
    border-radius: 50%;
    width: 40px;
    cursor: pointer;
    z-index: 999
}

.prev {
    left: 10px
}

.next {
    right: 10px
}

.featuredProfileRoyal {
    background-color: var(--lightBg);
    height: 180px
}

    .featuredProfileRoyal .template-container .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;
        margin-bottom: 24px
    }

        .featuredProfileRoyal .template-container .header .left .content {
            font-size: 22px;
            font-weight: 600;
            line-height: 27px;
            color: var(--theme-colour1)
        }

@media (max-width: 767px) {
    .featuredProfileRoyal .template-container .header .left .content {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.featuredProfileRoyal .template-container .header .left .contentNair {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: black
}

@media (max-width: 767px) {
    .featuredProfileRoyal .template-container .header .left .contentNair {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.vedio .template-container .vedioSection .vedioHeader {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: #808080;
    display: flex;
    justify-content: center;
    margin-top: 70px
}

@media (max-width: 767px) {
    .vedio .template-container .vedioSection .vedioHeader {
        font-size: 12px;
        font-weight: 500;
        line-height: 15px
    }
}

.vedio .template-container .vedioSection .mainHeader {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: var(--theme-colour1);
    width: 691px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    margin-top: 12px
}

@media (max-width: 1199px) {
    .vedio .template-container .vedioSection .mainHeader {
        width: 100%
    }
}

@media (max-width: 767px) {
    .vedio .template-container .vedioSection .mainHeader {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px
    }
}

.vedio .template-container .vedioSection .subHeader {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #333333;
    width: 734px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    margin-top: 12px;
    margin-top: 24px;
    margin-bottom: 34px
}

@media (max-width: 1199px) {
    .vedio .template-container .vedioSection .subHeader {
        width: 100%
    }
}

@media (max-width: 767px) {
    .vedio .template-container .vedioSection .subHeader {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.vedio .template-container .vedioSection .journeyContentSection {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 60px
}

    .vedio .template-container .vedioSection .journeyContentSection a {
        background-color: black;
        border-radius: 20px
    }

        .vedio .template-container .vedioSection .journeyContentSection a .img-fluid {
            max-width: 100%;
            height: auto;
            cursor: none;
            opacity: 0.5;
            border-radius: 15px
        }

        .vedio .template-container .vedioSection .journeyContentSection a .img-fluid1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            color: white;
            font-size: 16px;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            text-align: center
        }

            .vedio .template-container .vedioSection .journeyContentSection a .img-fluid1:hover {
                cursor: pointer;
                width: 150px
            }

.successStiries {
    position: relative
}

    .successStiries .successStoriesBg {
        display: grid;
        grid-template-columns: 1fr 523px;
        align-items: center;
        padding-left: 150px;
        position: absolute;
        top: 22px;
        right: 18px
    }

@media (max-width: 1366px) {
    .successStiries .successStoriesBg {
        right: 33px
    }
}

@media (max-width: 1199px) {
    .successStiries .successStoriesBg {
        display: none
    }
}

.successStiries .successStoriesBg .smDots {
    position: absolute;
    top: 162px;
    right: 70px
}

.successStiries .template-container .leftTopCnr {
    position: absolute;
    left: 0;
    top: 0
}

@media (max-width: 1199px) {
    .successStiries .template-container .leftTopCnr {
        display: none
    }
}

.successStiries .template-container .leftTopCnr svg rect {
    fill: var(--theme-colour1)
}

.successStiries .template-container .successStoriesContent {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    margin-bottom: 61px
}

@media (max-width: 1199px) {
    .successStiries .template-container .successStoriesContent {
        background-image: none !important
    }
}

.successStiries .template-container .successStoriesContent a .successStories {
    display: grid;
    grid-template-columns: 1fr 523px;
    align-items: center;
    padding-left: 150px;
    padding-top: 40px
}

@media (max-width: 1199px) {
    .successStiries .template-container .successStoriesContent a .successStories {
        padding-left: 0;
        grid-template-columns: 523px 1fr
    }
}

@media (max-width: 991px) {
    .successStiries .template-container .successStoriesContent a .successStories {
        grid-template-columns: 370px 1fr
    }
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories {
        grid-template-columns: 1fr
    }
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent {
    position: relative
}

@media (max-width: 1199px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent {
        order: 1;
        padding-left: 30px
    }
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent {
        padding-left: 0px
    }
}

@media (max-width: 1199px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .topleft img {
        display: none
    }
}

@media (max-width: 680px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .topbottom {
        display: none
    }
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent .topbottom img {
    width: 100%;
    height: auto
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea {
    max-width: 388px
}

    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .topData {
        font-size: 22px;
        font-weight: 500;
        line-height: 27px;
        color: #2a2a2a
    }

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .topData {
        font-size: 20px;
        font-weight: 500;
        line-height: 25px
    }
}

@media (max-width: 480px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .topData {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px
    }
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .subContent {
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    color: #8b8e8f;
    margin-top: 12px;
    margin-bottom: 24px
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .subContent {
        font-size: 13px;
        font-weight: 400;
        line-height: 16px;
        margin-top: 8px;
        margin-bottom: 4px
    }
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .subContent {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px
    }
}

@media (max-width: 991px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .quotesArea {
        display: none
    }
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .quotesArea svg path {
    fill: var(--theme-colour1)
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .quotesContent {
    font-size: 32px;
    font-weight: 400;
    line-height: 38px;
    color: var(--black);
    margin-top: 9px
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .quotesContent {
        font-size: 25px;
        font-weight: 400;
        line-height: 28px
    }
}

@media (max-width: 480px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .quotesContent {
        font-size: 18px;
        font-weight: 400;
        line-height: 22px
    }
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .marriageDate {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #414141;
    margin-top: 28px
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .marriageDate {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        margin-top: 8px
    }
}

@media (max-width: 480px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .marriageDate {
        font-size: 12px;
        font-weight: 500;
        line-height: 17px
    }
}

.successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .topbottom {
    position: absolute;
    right: 50px;
    margin-top: 24px
}

@media (max-width: 991px) {
    .successStiries .template-container .successStoriesContent a .successStories .leftContent .dataArea .topbottom {
        display: none
    }
}

.successStiries .template-container .successStoriesContent a .successStories .rightContent {
    max-width: 523px;
    height: 405px
}

@media (max-width: 991px) {
    .successStiries .template-container .successStoriesContent a .successStories .rightContent {
        max-width: 370px;
        height: auto
    }
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent a .successStories .rightContent img {
        max-width: 520px;
        margin-bottom: 10px
    }
}

.successStiries .template-container .successStoriesContent .owl-dots {
    display: flex;
    left: 144px;
    justify-content: start;
    width: 100%;
    margin-bottom: 12px;
    position: absolute;
    top: 400px
}

@media (max-width: 1199px) {
    .successStiries .template-container .successStoriesContent .owl-dots {
        left: 544px
    }
}

@media (max-width: 991px) {
    .successStiries .template-container .successStoriesContent .owl-dots {
        left: 384px;
        bottom: -49px;
        top: auto
    }
}

@media (max-width: 767px) {
    .successStiries .template-container .successStoriesContent .owl-dots {
        left: 0px
    }
}

.successStiries .template-container .successStoriesContent .owl-dots .owl-dot {
    margin: 0 6px;
    padding: 0;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
    border: solid 1px var(--theme-colour1);
    outline: none;
    opacity: 0.2
}

    .successStiries .template-container .successStoriesContent .owl-dots .owl-dot span {
        display: none !important
    }

    .successStiries .template-container .successStoriesContent .owl-dots .owl-dot.active {
        opacity: 1
    }

        .successStiries .template-container .successStoriesContent .owl-dots .owl-dot.active::after {
            content: "";
            background-color: var(--theme-colour1);
            border-radius: 50%;
            padding-top: 1px;
            padding-bottom: 0px;
            position: absolute;
            left: -1px;
            bottom: -1px;
            width: 12px;
            height: 12px
        }

.TestimonialsHeaderArea {
    height: 70px;
    background-color: white
}

    .TestimonialsHeaderArea .template-container .headerTestimonials {
        color: #393939;
        font-size: 24px;
        font-weight: 600;
        line-height: 28px
    }

@media (max-width: 767px) {
    .TestimonialsHeaderArea .template-container .headerTestimonials {
        font-size: 22px;
        font-weight: 600;
        line-height: 26px
    }
}

.TestimonialsHeaderArea .template-container .headerTestimonials label {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .TestimonialsHeaderArea .template-container .headerTestimonials label {
        font-size: 22px;
        font-weight: 600;
        line-height: 26px
    }
}

.Testimonials {
    background-color: var(--lightBg)
}

    .Testimonials .template-container .mainContent .rowData {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top: 22px
    }

@media (max-width: 1199px) {
    .Testimonials .template-container .mainContent .rowData {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 767px) {
    .Testimonials .template-container .mainContent .rowData {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .Testimonials .template-container .mainContent .rowData {
        grid-template-columns: 1fr
    }
}

.Testimonials .template-container .mainContent .rowData .mainData {
    display: grid;
    grid-template-columns: 274px 1fr;
    background-color: white;
    padding: 35px 24px;
    margin-bottom: 24px;
    border-radius: 4px;
    margin-left: 12px;
    margin-right: 12px
}

@media (max-width: 1199px) {
    .Testimonials .template-container .mainContent .rowData .mainData {
        padding: 12px;
        grid-template-columns: 1fr;
        margin-left: 5px;
        margin-right: 5px
    }
}

@media (max-width: 480px) {
    .Testimonials .template-container .mainContent .rowData .mainData {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin: 0 auto 24px
    }
}

.Testimonials .template-container .mainContent .rowData .mainData .data {
    padding-left: 16px;
    position: relative
}

@media (max-width: 1199px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data {
        padding-left: 0px;
        min-height: 226px
    }
}

@media (max-width: 991px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data {
        min-height: 275px
    }
}

@media (max-width: 767px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data {
        min-height: 184px
    }
}

.Testimonials .template-container .mainContent .rowData .mainData .data .quatesdata {
    display: flex;
    justify-content: end;
    position: absolute;
    right: 0
}

@media (max-width: 991px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data .quatesdata img {
        display: none
    }
}

@media (max-width: 991px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data .quatesdata svg {
        display: none
    }
}

.Testimonials .template-container .mainContent .rowData .mainData .data .quatesdata svg path {
    fill: var(--theme-colour1)
}

.Testimonials .template-container .mainContent .rowData .mainData .data .header {
    width: 200px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--theme-colour1);
    padding-top: 27px
}

@media (max-width: 767px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data .header {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px
    }
}

.Testimonials .template-container .mainContent .rowData .mainData .data .dateRead {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #707070
}

@media (max-width: 767px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data .dateRead {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.Testimonials .template-container .mainContent .rowData .mainData .data .dateRead a {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--theme-colour1);
    text-decoration: underline
}

@media (max-width: 767px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data .dateRead a {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px
    }
}

.Testimonials .template-container .mainContent .rowData .mainData .data .footerDate {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #414141;
    margin-top: 17px
}

@media (max-width: 767px) {
    .Testimonials .template-container .mainContent .rowData .mainData .data .footerDate {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px
    }
}

.Testimonials .template-container .mainContent .rowData .mainData .imgdata {
    display: flex
}

    .Testimonials .template-container .mainContent .rowData .mainData .imgdata img {
        max-width: 334px;
        width: 100%;
        height: auto;
        border-radius: 8px
    }

.marginTopData {
    margin-top: 24px
}

.SuccessStories {
    background-color: var(--lightBg)
}

    .SuccessStories .template-container .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 86px;
        margin-bottom: 0
    }

@media (max-width: 480px) {
    .SuccessStories .template-container .header {
        flex-direction: column;
        padding: 10px 0
    }
}

.SuccessStories .template-container .header .left .content {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .SuccessStories .template-container .header .left .content {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.SuccessStories .template-container .header .left .contentNair {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: black
}

@media (max-width: 767px) {
    .SuccessStories .template-container .header .left .contentNair {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.SuccessStories .template-container .header .right .addYourStory {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--theme-colour1);
    padding: 6px 14px;
    border: 1px solid var(--theme-colour1);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 0;
    line-height: 17px
}

    .SuccessStories .template-container .header .right .addYourStory .icon {
        margin-right: 10px
    }

        .SuccessStories .template-container .header .right .addYourStory .icon svg path {
            fill: var(--theme-colour1)
        }

    .SuccessStories .template-container .header .right .addYourStory:hover {
        color: #ffffff;
        background-color: var(--theme-colour1)
    }

        .SuccessStories .template-container .header .right .addYourStory:hover .icon svg path {
            fill: #ffffff
        }

.SuccessStoriesData {
    background-color: var(--lightBg);
    height: 296px
}

    .SuccessStoriesData .template-container .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 23px;
        margin-bottom: 8px
    }

        .SuccessStoriesData .template-container .header .left .content {
            font-size: 22px;
            font-weight: 600;
            line-height: 27px;
            color: var(--theme-colour1)
        }

@media (max-width: 767px) {
    .SuccessStoriesData .template-container .header .left .content {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.SuccessStoriesData .template-container .header .left .contentNair {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: black
}

@media (max-width: 767px) {
    .SuccessStoriesData .template-container .header .left .contentNair {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.SuccessStoriesData .template-container .header .right .addYourStory {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--theme-colour1);
    padding: 6px 14px;
    border: 1px solid var(--theme-colour1);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 0;
    line-height: 17px
}

    .SuccessStoriesData .template-container .header .right .addYourStory .icon {
        margin-right: 10px
    }

        .SuccessStoriesData .template-container .header .right .addYourStory .icon svg path {
            fill: var(--theme-colour1)
        }

    .SuccessStoriesData .template-container .header .right .addYourStory:hover {
        color: #ffffff;
        background-color: var(--theme-colour1)
    }

        .SuccessStoriesData .template-container .header .right .addYourStory:hover .icon svg path {
            fill: #ffffff
        }

.SuccessStoriesData .template-container p {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #3D3D3D;
    margin: 0
}

.successStoriestwo {
    margin-top: -212px
}

    .successStoriestwo .template-container .success {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 100px;
        background-color: white;
        padding: 32px;
        border-radius: 4px;
        box-shadow: 0px 3px 6px #d7d5d5;
        margin-bottom: 63px
    }

@media (max-width: 1199px) {
    .successStoriestwo .template-container .success {
        column-gap: 30px
    }
}

@media (max-width: 991px) {
    .successStoriestwo .template-container .success {
        grid-template-columns: 1fr;
        margin-bottom: 30px
    }
}

@media (max-width: 767px) {
    .successStoriestwo .template-container .success {
        padding: 10px
    }
}

.successStoriestwo .template-container .success .left .successimg {
    display: grid;
    grid-template-columns: 1fr
}

    .successStoriestwo .template-container .success .left .successimg img {
        max-width: 550px;
        max-height: 450px;
        width: 550px;
        height: 450px;
        border-radius: 8px
    }

@media (max-width: 767px) {
    .successStoriestwo .template-container .success .left .successimg img {
        width: 100%;
        height: auto
    }
}

.successStoriestwo .template-container .success .left .successimg .owl-dots {
    display: flex;
    left: 0;
    justify-content: center;
    width: 100%;
    margin-bottom: 12px;
    position: relative;
    top: 19px;
    right: 0
}

@media (max-width: 991px) {
    .successStoriestwo .template-container .success .left .successimg .owl-dots {
        left: 30%;
        justify-content: normal;
        position: inherit;
        right: initial
    }
}

@media (max-width: 680px) {
    .successStoriestwo .template-container .success .left .successimg .owl-dots {
        left: 0;
        justify-content: center;
        position: relative;
        top: 19px;
        right: 0
    }
}

.successStoriestwo .template-container .success .left .successimg .owl-dots .owl-dot {
    margin: 0 6px;
    padding: 0;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
    border: solid 1px var(--theme-colour1);
    outline: none;
    opacity: 0.2
}

    .successStoriestwo .template-container .success .left .successimg .owl-dots .owl-dot span {
        display: none !important
    }

    .successStoriestwo .template-container .success .left .successimg .owl-dots .owl-dot.active {
        opacity: 1
    }

        .successStoriestwo .template-container .success .left .successimg .owl-dots .owl-dot.active::after {
            content: "";
            background-color: var(--theme-colour1);
            border-radius: 50%;
            padding-top: 1px;
            padding-bottom: 0px;
            position: absolute;
            left: -1px;
            bottom: -1px;
            width: 12px;
            height: 12px
        }

.successStoriestwo .template-container .success .right img {
    margin-top: 47px;
    max-width: 30px !important
}

@media (max-width: 991px) {
    .successStoriestwo .template-container .success .right img {
        display: none
    }
}

.successStoriestwo .template-container .success .right .QuotesContent {
    margin-top: 36px;
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .successStoriestwo .template-container .success .right .QuotesContent {
        font-size: 20px;
        font-weight: 500;
        line-height: 25px
    }
}

.successStoriestwo .template-container .success .right .paraGraph {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #333333;
    margin-top: 22px
}

@media (max-width: 767px) {
    .successStoriestwo .template-container .success .right .paraGraph {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px
    }
}

.successStoriestwo .template-container .success .right .date {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #414141;
    margin-top: 32px
}

@media (max-width: 767px) {
    .successStoriestwo .template-container .success .right .date {
        font-size: 14px;
        font-weight: 500;
        line-height: 17px
    }
}

.successStoriestwo .template-container .success .right .footer {
    display: flex;
    justify-content: end
}

.MediaIcon {
    z-index: 999999;
    position: relative
}

.btn-whatsapp-pulse {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0;
    height: 0;
    padding: 35px;
    text-decoration: none;
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102,0.5)
    }

    80% {
        box-shadow: 0 0 0 14px rgba(37,211,102,0)
    }
}

.btn-whatsapp-pulse-border {
    bottom: 20px;
    right: 20px;
    animation-play-state: paused
}

    .btn-whatsapp-pulse-border img {
        box-shadow: 0px 0px 4px #888888;
        border-radius: 50%
    }

    .btn-whatsapp-pulse-border::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        padding: 25px;
        border: 5px solid #25d366;
        opacity: 0.75;
        animation-name: pulse-border;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite
    }

@keyframes pulse-border {
    0% {
        padding: 25px;
        opacity: 0.75
    }

    75% {
        padding: 50px;
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.CircleSlider {
    height: 690px !important
}

    .CircleSlider .template-container .howitwork {
        padding-top: 60px
    }

.form-content-register .inputArea .dtpicker-overlay {
    background: transparent !important
}

    .form-content-register .inputArea .dtpicker-overlay .dtpicker-bg .dtpicker-cont .dtpicker-content {
        border: 2px solid #cecaca !important
    }

@media (max-width: 480px) {
    .intimateLogin hr {
        display: none !important
    }
}

@media (max-width: 1199px) {
    .dropdown__options-filter {
        margin-bottom: 0
    }
}

@media (max-width: 1199px) {
    .dropdown__select {
        left: 0px;
        top: 120%
    }
}

.verifyEmailHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px
}

.verifyEmail {
    background-color: #f4f8fc;
    height: calc((100vh) - 226px);
    display: flex;
    align-items: center
}

    .verifyEmail .find {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        margin-bottom: 12px;
        color: white;
        padding: 12px 19px;
        cursor: pointer;
        transition: ease-in-out .4s
    }

        .verifyEmail .find:hover {
            background-color: var(--theme-colour2)
        }

    .verifyEmail .inner {
        background: #fff;
        padding: 80px 90px 40px !important;
        border-radius: 8px;
        text-align: center;
        position: relative
    }

        .verifyEmail .inner p {
            text-align: center !important
        }

        .verifyEmail .inner::before {
            background: url(../images/email-rings.svg) no-repeat;
            position: absolute;
            top: 30px;
            left: 50%;
            content: '';
            width: 40px;
            height: 40px;
            background-size: 40px
        }

        .verifyEmail .inner .title {
            font-size: 25px;
            font-weight: 400;
            line-height: 26px;
            color: #1f1f1f;
            text-align: center;
            position: relative;
            padding-bottom: 60px;
            overflow: hidden
        }

@media (max-width: 1199px) {
    .verifyEmail .inner .title {
        font-size: 20px
    }
}

.verifyEmail .inner .title span {
    display: block
}

    .verifyEmail .inner .title span:first-of-type {
        margin-bottom: 10px
    }

    .verifyEmail .inner .title span strong {
        font-size: 25px;
        font-weight: 700;
        line-height: 26px;
        text-transform: capitalize
    }

@media (max-width: 1199px) {
    .verifyEmail .inner .title span strong {
        font-size: 20px
    }
}

.verifyEmail .inner .title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../images/email-title.jpg) no-repeat;
    content: '';
    width: 100%;
    height: 41px;
    background-position: center
}

.verifyEmailFooter {
    padding-top: 20px;
    text-align: center
}

    .verifyEmailFooter .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

        .verifyEmailFooter .logo img {
            width: fit-content;
            margin: auto auto 20px;
            display: block
        }

    .verifyEmailFooter .social {
        margin: 20px 0 15px
    }

        .verifyEmailFooter .social a {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 0 15px
        }

            .verifyEmailFooter .social a.facebook {
                background: url(../images/facebook-grey.svg) no-repeat;
                background-size: 18px;
                background-position: center
            }

            .verifyEmailFooter .social a.twitter {
                background: url(../images/twitter-grey.svg) no-repeat;
                background-size: 20px;
                background-position: center
            }

            .verifyEmailFooter .social a.google {
                background: url(../images/google-plus-grey.svg) no-repeat;
                background-size: 18px;
                background-position: center
            }

            .verifyEmailFooter .social a.instagram {
                background: url(../images/instagram-grey.svg) no-repeat;
                background-size: 18px;
                background-position: center
            }

    .verifyEmailFooter em {
        font-style: normal
    }

.latest-updates .update-item .desc {
    margin-left: 20px
}

.profileSection {
    background-color: var(--lightBg)
}

    .profileSection .profile {
        display: grid;
        grid-template-columns: 290px 1fr;
        column-gap: 10px
    }

@media (max-width: 1279px) {
    .profileSection .profile {
        grid-template-columns: 290px 1fr
    }
}

@media (max-width: 767px) {
    .profileSection .profile {
        grid-template-columns: 1fr
    }
}

@media (max-width: 767px) {
    .profileSection .profile .profileArea {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px
    }
}

@media (max-width: 550px) {
    .profileSection .profile .profileArea {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .profileArea .profileData {
    padding: 8px;
    margin-top: 8px;
    background-color: #fff;
    position: relative;
    border-radius: 5px;
    width: 100%
}

@media (max-width: 550px) {
    .profileSection .profile .profileArea .profileData {
        margin: auto
    }
}

.profileSection .profile .profileArea .profileData .catogary {
    background-color: #e69c00;
    position: absolute;
    padding: 4px;
    border-radius: 5px;
    left: -18px;
    top: 30px;
    width: fit-content;
    z-index: 9;
    min-width: 100px
}

    .profileSection .profile .profileArea .profileData .catogary::after {
        content: "";
        position: absolute;
        left: 0px;
        top: 31px;
        margin: 0 auto;
        width: 0;
        height: 0;
        border-top: 12px solid #c59020;
        border-left: 17px solid transparent
    }

    .profileSection .profile .profileArea .profileData .catogary span {
        padding: 8px;
        color: #ffff;
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        white-space: nowrap
    }

.profileSection .profile .profileArea .profileData .profilePic {
    text-align: center;
    margin-top: 12px
}

    .profileSection .profile .profileArea .profileData .profilePic .wrapPro {
        position: relative;
        border-radius: 50%;
        width: 165px;
        height: 165px;
        max-height: 165px;
        max-width: 165px;
        margin: auto
    }

        .profileSection .profile .profileArea .profileData .profilePic .wrapPro:hover .picturePro {
            display: block
        }

        .profileSection .profile .profileArea .profileData .profilePic .wrapPro .proPic {
            border-radius: 50%;
            width: 165px;
            height: 165px;
            display: flex
        }

            .profileSection .profile .profileArea .profileData .profilePic .wrapPro .proPic img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%
            }

        .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            transition: 0.4s;
            background-color: transparent;
            width: 165px;
            height: 165px;
            border-radius: 50%;
            overflow: hidden
        }

            .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro .content {
                position: absolute;
                bottom: 0;
                right: 0px;
                text-align: center;
                width: 165px;
                height: 60px;
                line-height: 100px;
                background-color: #000000b0
            }

                .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro .content img {
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    width: 28px;
                    height: 28px;
                    margin-top: 4px
                }

                .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro .content label {
                    font-size: 9px;
                    font-weight: 400;
                    line-height: 13px;
                    color: #c8c6c6;
                    display: flex;
                    margin-top: 11px;
                    justify-content: center
                }

                .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro .content .upload-content span {
                    color: #707070;
                    font-size: 10px;
                    font-weight: 400;
                    line-height: 14px;
                    display: flex;
                    justify-content: center
                }

                .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro .content .uploadAreaBtn {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    position: relative;
                    overflow: hidden;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center
                }

                    .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro .content .uploadAreaBtn .uploadBtn {
                        font-size: 13px;
                        font-weight: 400;
                        line-height: 18px;
                        cursor: pointer;
                        color: #ffffff;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        text-decoration: none;
                        border-radius: 4px;
                        -webkit-transition: ease-in-out 0.4s;
                        transition: ease-in-out 0.4s;
                        width: auto;
                        outline: 0;
                        background-color: transparent;
                        border: none
                    }

                    .profileSection .profile .profileArea .profileData .profilePic .wrapPro .picturePro .content .uploadAreaBtn input {
                        cursor: pointer;
                        font-size: 100px;
                        height: 100%;
                        -moz-opacity: 0.01;
                        opacity: 0.01;
                        position: absolute;
                        right: 0;
                        top: 0
                    }

    .profileSection .profile .profileArea .profileData .profilePic .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
        margin-top: 12px
    }

    .profileSection .profile .profileArea .profileData .profilePic .code {
        font-size: 12px;
        font-weight: 400;
        line-height: 26px;
        color: #707070;
        margin-bottom: 12px
    }

.profileSection .profile .profileArea .profileData .profilelist {
    background-color: var(--lightBg);
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    padding: 10px 8px
}

    .profileSection .profile .profileArea .profileData .profilelist .profileDetailList {
        display: grid;
        grid-template-columns: 30px 1fr 16px;
        column-gap: 7px;
        align-items: center;
        height: 48px;
        border-radius: 5px;
        margin-bottom: 4px;
        cursor: pointer;
        transition: ease-in-out 0.4s
    }

        .profileSection .profile .profileArea .profileData .profilelist .profileDetailList svg path {
            transition: ease-in-out 0.4s
        }

        .profileSection .profile .profileArea .profileData .profilelist .profileDetailList.active {
            background-color: #eaeff2
        }

            .profileSection .profile .profileArea .profileData .profilelist .profileDetailList.active .icon {
                background-color: #fafafa
            }

                .profileSection .profile .profileArea .profileData .profilelist .profileDetailList.active .icon svg path {
                    fill: #0a3e6d
                }

            .profileSection .profile .profileArea .profileData .profilelist .profileDetailList.active .arrow svg {
                transform: rotate(180deg);
                -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
                transition: opacity 0.6s, transform 0.6s
            }

        .profileSection .profile .profileArea .profileData .profilelist .profileDetailList:hover {
            background-color: #ffffff
        }

            .profileSection .profile .profileArea .profileData .profilelist .profileDetailList:hover .icon {
                background-color: #fafafa
            }

                .profileSection .profile .profileArea .profileData .profilelist .profileDetailList:hover .icon svg path {
                    fill: #989999
                }

            .profileSection .profile .profileArea .profileData .profilelist .profileDetailList:hover .arrow {
                display: block
            }

        .profileSection .profile .profileArea .profileData .profilelist .profileDetailList .icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: ease-in-out 0.4s;
            margin-left: 4px
        }

            .profileSection .profile .profileArea .profileData .profilelist .profileDetailList .icon.icon-background {
                background-color: transparent !important
            }

        .profileSection .profile .profileArea .profileData .profilelist .profileDetailList .text {
            font-size: 16px;
            font-weight: 400;
            line-height: 16px;
            color: var(--theme-text-colour);
            transition: ease-in-out 0.4s
        }

@media (max-width: 767px) {
    .profileSection .profile .profileArea .profileData .profilelist .profileDetailList .text {
        font-size: 14px;
        font-weight: 400;
        line-height: 14px
    }
}

.profileSection .profile .profileArea .profileData .profilelist .profileDetailList .arrow {
    display: none
}

.profileSection .profile .profileArea .profileData .profilelist .profileDetailList.userDetailListpadd {
    column-gap: 4px !important;
    grid-template-columns: 25px 1fr 10px !important
}

.profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList {
    display: grid;
    grid-template-columns: 30px 1fr 16px;
    column-gap: 7px;
    align-items: center;
    padding: 16px 8px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

    .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList svg path {
        transition: ease-in-out 0.4s
    }

    .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList.active {
        background-color: #eaeff2
    }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList.active .icon {
            background-color: #fafafa
        }

            .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList.active .icon svg path {
                fill: #0a3e6d
            }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList.active .arrow svg {
            transform: rotate(180deg);
            -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
            transition: opacity 0.6s, transform 0.6s
        }

    .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList:hover {
        background-color: #eaeff2
    }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList:hover .icon {
            background-color: #fafafa
        }

            .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList:hover .icon svg path {
                fill: #0a3e6d
            }

    .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList .icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #dddddd;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 0.4s
    }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList .icon.icon-background {
            background-color: transparent !important
        }

    .profileSection .profile .profileArea .profileData .profilelist .menuList .userDetailList .text {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        color: var(--theme-text-colour);
        transition: ease-in-out 0.4s
    }

.profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu {
    background-color: #f3f3f3;
    padding-bottom: 4px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none
}

    .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .nav-item {
        display: grid;
        grid-template-columns: 1fr 16px;
        column-gap: 7px;
        align-items: center;
        margin-left: 4px;
        margin-right: 4px;
        border-radius: 5px;
        margin-bottom: 2px;
        cursor: pointer;
        transition: ease-in-out 0.4s;
        border-radius: 5px
    }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .nav-item a {
            font-size: 13px !important;
            font-weight: 400;
            line-height: 18px;
            padding: 20px 0px 20px 12px !important
        }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .nav-item:hover .active {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            transition: ease-in-out 0.4s;
            color: var(--theme-colour1);
            transition: ease-in-out 0.4s
        }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .nav-item:hover {
            background-color: #fff;
            color: #0a3e6d
        }

            .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .nav-item:hover svg {
                transform: rotate(275deg);
                -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
                transition: opacity 0.6s, transform 0.6s
            }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .nav-item a {
            font-size: 10px;
            font-weight: 400;
            line-height: 18px;
            padding: 22px 25px 22px 12px
        }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .nav-item.active {
            background-color: #fff
        }

    .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .dropDown {
        width: 194px;
        display: inline;
        background-color: white;
        height: auto;
        opacity: 0;
        position: absolute;
        z-index: 99;
        border-radius: 2px;
        left: 21.2%;
        transform: translateY(55px);
        pointer-events: none;
        transition: ease-in-out 0.4s;
        box-shadow: 0px 0px 4px #c8b4b4;
        z-index: 5;
        -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
        transition: opacity 0.6s, transform 0.6s
    }

        .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .dropDown .item {
            padding: 18px 0px 18px 16px;
            font-size: 14px;
            font-weight: 400;
            line-height: 19px;
            transition: ease-in-out 0.4s;
            color: #2d2d2d
        }

            .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu .dropDown .item:hover {
                background-color: #fafafa;
                transition: ease-in-out 0.4s
            }

    .profileSection .profile .profileArea .profileData .profilelist .menuList .sub-menu.active {
        display: block
    }

.profileSection .profile .profileArea .accordinSection .discoverMatches {
    border: 1px px solid #f3f3f3;
    border-radius: 5px;
    margin-top: 8px
}

    .profileSection .profile .profileArea .accordinSection .discoverMatches .toparea {
        padding: 8px;
        margin-top: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .toparea .headerlist {
            display: flex;
            column-gap: 10px;
            padding: 19px 0px 15px 0px;
            margin-left: 20px
        }

            .profileSection .profile .profileArea .accordinSection .discoverMatches .toparea .headerlist span {
                font-size: 16px;
                font-weight: 600;
                line-height: 26px;
                color: #eb6463;
                font-family: Rubik
            }

@media (max-width: 767px) {
    .profileSection .profile .profileArea .accordinSection .discoverMatches .toparea .headerlist span {
        font-size: 12px;
        font-weight: 600;
        line-height: 26px
    }
}

.profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection {
    background-color: var(--lightBg);
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    padding: 10px 8px
}

    .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion {
        background-color: var(--lightBg);
        color: #444;
        cursor: pointer;
        padding: 10px 10px 10px 0px;
        width: 100%;
        margin-bottom: 4px;
        border: none;
        text-align: left;
        outline: none;
        color: #252525;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        transition: 0.4s;
        border-radius: 5px;
        display: grid;
        grid-template-columns: 35px 1fr 5px;
        align-items: center
    }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion:hover {
            background-color: #ffffff
        }

            .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion:hover svg path {
                fill: #69b3de
            }

            .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion:hover .arrow {
                display: block
            }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion svg {
            margin-left: 4px
        }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion .disMach {
            display: grid;
            grid-template-columns: 1fr 30px;
            align-items: center
        }

            .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion .disMach .edt {
                font-size: 13px;
                font-weight: 400;
                line-height: 15px;
                color: var(--theme-colour1)
            }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion span {
            position: relative;
            font-size: 16px;
            font-weight: 400;
            line-height: 18px;
            color: #434343;
            margin-bottom: 0
        }

@media (max-width: 767px) {
    .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion span {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px
    }
}

.profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion:after {
    content: url("../images/downarrow.jpg");
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px
}

.profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .activeAcco:after {
    content: url("../images/uparrow.jpg")
}

.profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .panel {
    padding: 8px 8px 0;
    max-height: fit-content;
    background-color: #fff !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    display: none
}

    .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .panel.active {
        display: block
    }

    .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul {
        padding-left: 0px
    }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul li a:hover {
            color: blue
        }

.profileSection .profile .profileArea .downloadarea .downloadDetails {
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    margin-top: 8px
}

    .profileSection .profile .profileArea .downloadarea .downloadDetails .content {
        padding: 8px 8px 35px;
        margin-top: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

@media (max-width: 767px) {
    .profileSection .profile .profileArea .downloadarea .downloadDetails .content {
        min-height: 206px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .profileArea .downloadarea .downloadDetails .content .linkIcon {
        display: none
    }
}

.profileSection .profile .profileArea .downloadarea .downloadDetails .content img {
    width: 100%;
    cursor: pointer
}

.profileSection .profile .profileArea .downloadarea .downloadDetails .content label {
    color: #707070;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    display: flex;
    justify-content: center
}

.profileSection .profile .profileArea .downloadarea .downloadDetails .content .qucklink .link {
    margin-top: 13px;
    display: flex;
    justify-content: space-between
}

    .profileSection .profile .profileArea .downloadarea .downloadDetails .content .qucklink .link a {
        margin-right: 10px
    }

        .profileSection .profile .profileArea .downloadarea .downloadDetails .content .qucklink .link a:last-child {
            margin-right: 0
        }

        .profileSection .profile .profileArea .downloadarea .downloadDetails .content .qucklink .link a img {
            width: 100%;
            cursor: pointer
        }

.profileSection .profile .profileArea .downloadarea .downloadDetails .content .qucklink .smsLinkText {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    padding: 24px 32px;
    display: flex;
    justify-content: center
}

@media (max-width: 680px) {
    .profileSection .profile .profileArea .downloadarea .downloadDetails .content .qucklink .smsLinkText {
        padding: 0px
    }
}

.profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink {
    box-sizing: border-box;
    margin-top: 13px;
    width: 100%;
    height: 49.24px;
    display: flex;
    align-items: center;
    background: #eeeeee;
    border: 0.5px solid #d5d4d4;
    border-radius: 10px;
    position: relative
}

    .profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink .send {
        width: 30%;
        height: 49.24px;
        color: var(--white);
        background: var(--theme-colour1);
        border: 0.5px solid #7b7b7b;
        border-radius: 0px 9px 9px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

        .profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink .send:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

        .profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink .send button {
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-size: 21px;
            font-weight: 400;
            line-height: 25px;
            letter-spacing: 0.11em;
            color: #ffffff
        }

@media (max-width: 767px) {
    .profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink .send button {
        font-size: 18px;
        font-weight: 400;
        line-height: 22px
    }
}

.profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink .phone {
    width: 100%
}

    .profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink .phone input {
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        height: 46px;
        letter-spacing: 0.11em;
        border: none;
        background-color: #eeeeee;
        color: #434343;
        outline: none;
        width: 100%;
        padding: 0 8px
    }

.profileSection .profile .profileArea .downloadarea .downloadDetails .content .downloadlink .countrycode {
    width: 84px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #d5d4d4;
    height: 46px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px
}

.profileSection .profile .allProfileDtl {
    display: grid;
    grid-template-columns: 1fr 290px;
    column-gap: 10px
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate {
    overflow: hidden
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .proUpdateHeader .headName {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        margin-top: 18px;
        margin-bottom: 4px
    }

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .proUpdateHeader .headName {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .proUpdateHeader .headName a {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    margin-left: 8px;
    color: var(--theme-colour1)
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .proUpdateHeader .headName a:hover {
        text-decoration: underline;
        color: var(--theme-colour1)
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap {
    background-color: white;
    padding: 10px;
    border-radius: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile {
        height: auto;
        border-radius: 4px;
        display: grid;
        grid-template-columns: 150px 1fr;
        column-gap: 24px;
        margin-bottom: 4px
    }

@media (max-width: 1366px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile {
        column-gap: 30px
    }
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile {
        column-gap: 20px
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile {
        column-gap: 15px;
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .photo {
    width: 150px;
    height: 190px;
    border-radius: 15px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .photo {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 20px;
    flex-wrap: wrap
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent {
        margin-bottom: 15px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent {
        margin-bottom: 0px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent {
        margin-bottom: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent .name {
        font-size: 14px;
        font-weight: 600;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent .separation {
    width: 2px;
    height: 20px;
    background-color: var(--theme-colour1);
    margin: 0 10px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent .code {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .topContent .code {
        font-size: 14px;
        font-weight: 600;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    margin-bottom: 10px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent.middleContentSub {
    display: flex !important
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .age {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .age {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .age .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .age .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .age .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .education {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .education {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .education .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .education .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContent .education .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub {
    display: flex;
    column-gap: 10px;
    margin-bottom: 10px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .age {
        display: flex;
        align-items: center
    }

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .age {
        margin-bottom: 10px
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .age {
        margin-bottom: 0px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .age .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .age .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .age .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .cast {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .cast {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .cast .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .cast .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .cast .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .education {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .education {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .education .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .education .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentSub .education .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .cast {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .cast {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .cast .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .cast .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .cast .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

@media (max-width: 375px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .cast .content {
        margin-right: 4px;
        font-size: 10px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .religion {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .religion {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .religion .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .religion .content {
    margin-right: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .job {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .job {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .job .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .job .content {
    margin-right: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRow .job .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub {
    display: flex;
    column-gap: 10px;
    margin-bottom: 10px
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub {
        margin-bottom: 0px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub .religion {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub .religion {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub .religion .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub .religion .content {
    margin-right: 30px;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .middleContentsecRowSub .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent {
    margin-top: 24px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent {
        flex-wrap: wrap;
        margin-top: 10px
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 0px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left {
    margin-bottom: 10px;
    display: flex;
    grid-template-columns: 1fr 1fr 1fr;
    flex-wrap: wrap
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact {
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact {
        margin-bottom: 10px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact {
        margin-bottom: 5px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact .icon svg path {
    fill: var(--theme-colour1)
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .contact .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst {
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst {
        margin-bottom: 10px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst {
        margin-bottom: 5px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst .icon {
        margin-bottom: 10px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst .icon svg path {
    fill: var(--theme-colour1)
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .interst .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .shortList {
    margin-right: 10px;
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .shortList {
        margin-bottom: 5px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .shortList .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .shortList .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .shortList .icon svg path {
    fill: var(--theme-colour1)
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .shortList .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .left .shortList .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .right button {
    background-color: var(--theme-colour1);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 12px 14px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .Profile .content .footerContent .right button:hover {
        background-color: black;
        cursor: pointer
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap hr {
    width: 100%;
    height: 1px;
    background-color: #f3f3f3 !important;
    border: none;
    margin: 8px 0
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg:hover img {
        transform: none
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg:hover .details {
    opacity: 1;
    z-index: 999;
    transform: none
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg a {
    overflow: hidden;
    width: 208px;
    height: 265px;
    border-radius: 15px;
    display: flex
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg a {
        transform: none
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .footername {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    font-family: Rubik;
    margin-top: 12px;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    font-family: Rubik;
    margin-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .age {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details {
    position: absolute;
    width: 100%;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    bottom: 0;
    opacity: 0;
    background: #ffffff;
    border-radius: 9px;
    border: 1px solid #EFEFEF;
    padding: 10px;
    z-index: 999;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08)
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .namesection {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .namesection .name {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            font-family: Rubik;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100px
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .fullSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .fullSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .fullSize li span {
                width: 16px;
                margin-right: 6px
            }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .smlSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .smlSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .smlSize li span {
                width: 16px;
                margin-right: 6px
            }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .viewprofile {
        color: var(--white);
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        width: 100px;
        height: 32px;
        background: var(--theme-colour1);
        border-radius: 7px;
        margin: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease-in-out;
        margin-left: 0
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .viewprofile:hover {
            background: var(--theme-colour2)
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .wrapperImg .details .viewprofile a {
            color: var(--white)
        }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .viewAllButton {
    display: flex;
    justify-content: center
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .viewAllButton button {
        color: var(--theme-colour1);
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        padding: 10px 20px;
        background-color: var(--lightBg);
        border: none;
        cursor: pointer;
        margin-bottom: 6px;
        border-radius: 5px
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .viewAllButton button:hover {
            background-color: var(--theme-colour2);
            color: white
        }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .owl-nav {
    display: block !important
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .owl-nav .owl-prev {
        position: absolute !important;
        left: 0px;
        top: 130px;
        background-color: var(--lightBg);
        width: 35px;
        height: 28px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .owl-nav .owl-prev span {
            font-size: 22px
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .owl-nav .owl-prev:hover {
            background-color: var(--theme-colour2);
            color: white
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .owl-nav .owl-next {
        position: absolute !important;
        right: 0px;
        top: 130px;
        background-color: var(--lightBg);
        width: 35px;
        height: 28px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .owl-nav .owl-next span {
            font-size: 22px
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .owl-nav .owl-next:hover {
            background-color: var(--theme-colour2);
            color: white
        }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap {
    background-color: white;
    padding: 10px;
    border-radius: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap.marginBottom {
        margin-bottom: 40px
    }

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap.marginBottom {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro {
        padding: 0px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImgMain {
    padding: 10px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImgMain .wrapperImg .footername {
        width: auto
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImgMain .wrapperImg .namecode {
        width: auto
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImgMain .wrapperImg a {
        max-width: 259px;
        max-height: 265px;
        border-radius: 15px;
        display: flex;
        width: 100%;
        height: 100%
    }

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImgMain .wrapperImg a {
        max-width: 259px;
        max-height: 265px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImgMain .wrapperImg a {
        max-width: 339px;
        max-height: 345px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImgMain .wrapperImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: initial;
    max-height: initial
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile {
    height: auto;
    border-radius: 4px;
    padding: 6px;
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 24px
}

@media (max-width: 1366px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile {
        column-gap: 30px
    }
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile {
        grid-template-columns: 1fr;
        height: auto;
        padding: 15px;
        column-gap: 25px
    }
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile {
        column-gap: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile {
        column-gap: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .photo img {
    width: 150px;
    max-width: 100%
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent {
        margin-bottom: 15px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent {
        margin-bottom: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .name {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .name {
        font-size: 14px;
        font-weight: 600;
        line-height: 17px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .name {
        font-size: 12px;
        font-weight: 600;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .separation {
    width: 2px;
    height: 30px;
    background-color: var(--theme-colour1);
    padding: -1px;
    margin: 10px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .separation {
        width: 3px;
        height: 25px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .separation {
        width: 2px;
        height: 20px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .code {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .code {
        font-size: 14px;
        font-weight: 600;
        line-height: 17px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .topContent .code {
        font-size: 12px;
        font-weight: 600;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    margin-bottom: 10px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent.middleContentSub {
    display: flex !important
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .age {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .age {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .age .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .age .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .age .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .education {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .education {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .education .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .education .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContent .education .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub {
    display: flex;
    column-gap: 10px;
    margin-bottom: 10px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .age {
        display: flex;
        align-items: center
    }

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .age {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .age .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .age .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .age .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .cast {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .cast {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .cast .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .cast .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .cast .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .education {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .education {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .education .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .education .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentSub .education .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .cast {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .cast {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .cast .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .cast .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .cast .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .religion {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .religion {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .religion .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .religion .content {
    margin-right: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 410px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .job {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .job {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .job .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .job .content {
    margin-right: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRow .job .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRowSub {
    display: flex;
    column-gap: 10px;
    margin-bottom: 10px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRowSub .religion {
        display: flex;
        align-items: center
    }

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRowSub .religion {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRowSub .religion .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRowSub .religion .content {
    margin-right: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRowSub .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .middleContentsecRowSub .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent {
    margin-top: 24px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent {
        flex-wrap: wrap
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent {
        display: grid;
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .contact {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .contact {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .contact .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: 0px 0px 11px #d5caca;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .contact .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .contact .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .contact .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .interst {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .interst {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .interst .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: 0px 0px 11px #d5caca;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .interst .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .interst .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .interst .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .shortList {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .shortList {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .shortList .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    box-shadow: 0px 0px 11px #d5caca;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .shortList .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .shortList .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .left .shortList .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .right button {
    background-color: var(--theme-colour1);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 12px 14px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .Profile .content .footerContent .right button:hover {
        background-color: black;
        cursor: pointer
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg {
    position: relative;
    margin-bottom: 20px
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg:hover img {
        transform: none
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg:hover .details {
    opacity: 1;
    z-index: 999;
    transform: none
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details {
    position: absolute;
    width: 100%;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    bottom: 0;
    opacity: 0;
    background: #ffffff;
    border-radius: 9px;
    border: 1px solid #EFEFEF;
    padding: 10px;
    z-index: 999;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08)
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .namesection {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .namesection .name {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            font-family: Rubik;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100px
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .fullSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .fullSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .fullSize li span {
                width: 16px;
                margin-right: 6px
            }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .smlSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .smlSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .smlSize li span {
                width: 16px;
                margin-right: 6px
            }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .viewprofile {
        color: var(--white);
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        width: 100px;
        height: 32px;
        background: var(--theme-colour1);
        border-radius: 7px;
        margin: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease-in-out;
        margin-left: 0
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .details .viewprofile:hover {
            background: var(--theme-colour2)
        }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg img {
    overflow: hidden;
    width: 198px;
    max-width: 198px;
    height: 250px;
    max-height: 250px;
    border-radius: 15px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .footername {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    font-family: Rubik;
    margin-top: 12px;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    font-family: Rubik;
    margin-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .wrapperImg .age {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 50px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .viewAllButton {
    display: flex;
    justify-content: center
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .viewAllButton button {
        color: var(--theme-colour1);
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        padding: 10px 20px;
        background-color: var(--lightBg);
        border: none;
        margin-bottom: 16px
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .owl-nav {
    display: block !important
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .owl-nav .owl-prev {
        display: none
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrap .profilewrapPro .owl-nav .owl-next {
        position: absolute !important;
        right: 0px;
        top: 130px;
        background-color: var(--lightBg) !important;
        width: 35px;
        height: 28px;
        border-radius: 14px
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner {
    background-color: white;
    padding: 10px;
    border-radius: 9px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner.profilewrapPro {
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrap {
        padding: 0
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile {
        height: auto;
        padding: 2px;
        display: grid;
        grid-template-columns: 150px 1fr;
        column-gap: 24px
    }

@media (max-width: 1366px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile {
        column-gap: 30px
    }
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile {
        height: auto;
        padding: 15px;
        column-gap: 20px
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile {
        grid-template-columns: 1fr;
        column-gap: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl {
    grid-template-columns: 115px 1fr;
    column-gap: normal
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .photo {
    width: 115px;
    height: 146px;
    display: flex;
    overflow: hidden;
    border-radius: 9px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .photo a {
        width: 115px;
        height: 146px;
        display: flex;
        overflow: hidden;
        border-radius: 9px
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 9px
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content {
    margin-left: 20px
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content {
        margin-left: 0px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent {
    padding-top: 17px;
    margin: 0
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent {
        margin-bottom: 0px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent .cross {
    cursor: pointer;
    position: absolute;
    right: 6px;
    top: 16px
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent .name {
        width: auto;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent .name {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 375px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent .name {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent .code {
        width: auto;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent .code {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 375px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .topContent .code {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .timeArea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 16px 0 24px
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .timeArea {
        padding: 6px 0 10px;
        flex-direction: column;
        align-items: baseline
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .timeArea .viewSec {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #313131;
    width: 80%
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .timeArea .time {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #707070
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .timeArea .time {
        margin-top: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left {
    display: flex;
    flex-wrap: wrap
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left {
        margin-bottom: 0
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .contact {
    margin-right: 24px;
    margin-bottom: 5px;
    position: relative;
    cursor: pointer
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .contact .cstLoader {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .contact .cstLoader img {
            width: 50px;
            height: 50px;
            z-index: 1
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .contact .cstLoader::after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            background-color: var(--white);
            width: 100%;
            height: 100%
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .contact .icon {
        margin-right: 0
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .contact .icon svg path {
            fill: var(--theme-colour1)
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .contact .content {
        margin-left: 12px;
        width: auto
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .interst {
    margin-bottom: 5px;
    position: relative;
    cursor: pointer
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .interst .cstLoader {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .interst .cstLoader img {
            width: 50px;
            height: 50px;
            z-index: 1
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .interst .cstLoader::after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            background-color: var(--white);
            width: 100%;
            height: 100%
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .interst .icon {
        margin-right: 0
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .interst .icon svg path {
            fill: var(--theme-colour1)
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .interst .content {
        margin-left: 12px;
        width: auto
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .shortList {
    margin-bottom: 5px;
    position: relative;
    cursor: pointer
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .shortList .cstLoader {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .shortList .cstLoader img {
            width: 50px;
            height: 50px;
            z-index: 1
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .shortList .cstLoader::after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            background-color: var(--white);
            width: 100%;
            height: 100%
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .shortList .icon {
        margin-right: 0
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .shortList .icon svg path {
            fill: var(--theme-colour1)
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile.ProfileSpcl .content .footerContent .left .shortList .content {
        margin-left: 12px;
        width: auto
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .photo {
    width: 150px;
    height: 190px;
    border-radius: 15px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px
    }

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .photo img {
        margin-bottom: 20px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    margin-top: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent {
        margin-bottom: 15px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent {
        margin-top: 0px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent {
        margin-bottom: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .icon {
    margin-right: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .icon svg path {
        fill: var(--theme-colour1)
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .name {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .separation {
    width: 2px;
    height: 20px;
    background-color: var(--theme-colour1);
    margin: 0 10px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .code {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131;
    margin-right: 6px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .code {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .code {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .status {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .topContent .status {
        display: none
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    margin-bottom: 10px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent.middleContentSub {
    display: flex !important
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age {
    display: flex
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age {
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age {
        margin-bottom: 2px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age .icon {
    margin-right: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age .icon svg path {
        fill: #cecece
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age .content {
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .age .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education {
    display: flex
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education {
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education {
        margin-bottom: 2px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education .icon {
    margin-right: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education .icon svg path {
        fill: #cecece
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education .content {
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContent .education .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub {
    display: flex;
    column-gap: 10px;
    margin-bottom: 10px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .age {
        display: flex;
        align-items: center
    }

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .age {
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .age {
        margin-bottom: 2px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .age .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .age .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .age .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .cast {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .cast {
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .cast {
        margin-bottom: 2px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .cast .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .cast .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .cast .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .education {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .education {
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .education {
        margin-bottom: 2px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .education .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .education .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentSub .education .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast {
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast {
        margin-bottom: 10px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast {
        margin-bottom: 2px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast .icon {
    margin-right: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast .icon svg path {
        fill: #cecece
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast .content {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .cast .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .religion {
    display: flex
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .religion {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .religion .icon {
    margin-right: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .religion .icon svg path {
        fill: #cecece
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .religion .content {
    margin-right: 30px;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .religion .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .job {
    display: flex
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .job {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .job .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .job .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px;
    margin-right: 30px;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRow .job .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRowSub {
    display: flex;
    column-gap: 10px;
    margin-bottom: 10px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRowSub .religion {
        display: flex;
        align-items: center
    }

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRowSub .religion {
        margin-bottom: 10px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRowSub .religion .icon {
    margin-right: 12px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRowSub .religion .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 150px;
    margin-right: 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRowSub .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .middleContentsecRowSub .religion .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent {
        flex-wrap: wrap
    }
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent {
        display: grid;
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr 1fr
}

@media (max-width: 680px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact {
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact {
        margin-bottom: 10px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact {
        margin-bottom: 5px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact .icon svg path {
    fill: var(--theme-colour1)
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .contact .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst {
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst {
        margin-bottom: 10px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst {
        margin-bottom: 5px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst .icon svg path {
    fill: var(--theme-colour1)
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .interst .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList {
    display: flex;
    align-items: center;
    margin-right: 24px;
    cursor: pointer
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList {
        margin-bottom: 10px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList {
        margin-bottom: 5px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList .icon {
    margin-right: 6px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList .icon {
        margin-right: 4px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList .icon svg path {
    fill: var(--theme-colour1)
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .left .shortList .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .right button {
    background-color: var(--theme-colour1);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 12px 14px
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .Profile .content .footerContent .right button:hover {
        background-color: black;
        cursor: pointer
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner hr {
    width: 100%;
    height: 1px;
    background-color: #f3f3f3 !important;
    border: none;
    margin: 8px 0
}

@media (max-width: 1024px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg:hover img {
        transform: none
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg:hover .details {
    opacity: 1;
    z-index: 999;
    transform: none
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg img {
    overflow: hidden
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .footername {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    font-family: Rubik;
    margin-top: 6px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    font-family: Rubik;
    margin-top: 2px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .age {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details {
    position: absolute;
    max-width: 100%;
    width: 250px;
    left: 0px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    bottom: 0;
    opacity: 0;
    background: #ffffff;
    border-radius: 15px;
    border: 1px solid #e9e5e5;
    padding: 10px;
    z-index: 999
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .namesection {
        display: flex;
        justify-content: space-between
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .namesection .name {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 700;
            line-height: 18px;
            font-family: Rubik
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .namesection .age {
            font-size: 10px;
            font-weight: 700;
            line-height: 12px;
            font-family: Rubik;
            text-align: left
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .codeDetails {
        display: flex;
        justify-content: space-between;
        margin-top: 10px
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .codeDetails .code {
            font-size: 10px;
            font-weight: 400;
            line-height: 18px;
            font-family: Rubik
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .codeDetails .height {
            font-size: 10px;
            font-weight: 400;
            line-height: 18px;
            font-family: Rubik
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .job {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .job .designation {
            font-size: 10px;
            font-weight: 400;
            line-height: 18px;
            font-family: Rubik
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .job .location {
            font-size: 10px;
            font-weight: 400;
            line-height: 18px;
            font-family: Rubik
        }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .viewprofile {
        width: 148.57px;
        height: 24.17px;
        left: 23.71px;
        top: 259.43px;
        background: var(--theme-colour1);
        border-radius: 7px;
        margin: auto;
        cursor: pointer
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .viewprofile a {
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            font-weight: 400;
            line-height: 25px;
            font-family: Rubik
        }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .viewprofile:hover {
            background-color: #00b5b5
        }

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .wrapperImg .details .viewprofile {
        width: 100%;
        height: auto
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .viewAllButton {
    display: flex;
    justify-content: center
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .viewAllButton button {
        color: var(--theme-colour1);
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        padding: 10px 20px;
        background-color: var(--lightBg);
        border: none;
        margin-bottom: 16px
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav {
    display: flex !important;
    position: absolute;
    top: -33px;
    right: 0
}

@media (max-width: 375px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav {
        display: none !important
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav .owl-prev {
    background-color: #ffffff;
    width: 35px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav .owl-prev span {
        font-size: 22px
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav .owl-prev:hover {
        background-color: var(--theme-colour2);
        color: white
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav .owl-next {
    margin-left: 4px;
    background-color: #ffffff;
    width: 35px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav .owl-next span {
        font-size: 22px
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-nav .owl-next:hover {
        background-color: var(--theme-colour2);
        color: white
    }

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-dots {
    display: flex;
    right: 18.9%;
    bottom: 6%;
    justify-content: center;
    width: 100%;
    margin-bottom: 12px
}

@media (max-width: 991px) {
    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-dots {
        position: absolute !important;
        bottom: 8px;
        right: 0% !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important
    }
}

.profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-dots .owl-dot {
    margin: 0 6px;
    padding: 0;
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: transparent;
    border: solid 1px #e9f1f9;
    outline: none;
    background-color: #c6d9ec;
    opacity: 0.2
}

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-dots .owl-dot span {
        display: none !important
    }

    .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-dots .owl-dot.active {
        opacity: 1
    }

        .profileSection .profile .allProfileDtl .profileUpdate .latestUpdate .profileWrapInner .owl-dots .owl-dot.active::after {
            content: "";
            background-color: var(--theme-colour1);
            border-radius: 50%;
            padding-top: 1px;
            padding-bottom: 0px;
            position: absolute;
            left: -1px;
            bottom: -1px;
            width: 8px;
            height: 8px
        }

.profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .header {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    margin: 14px 0px
}

.profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection {
    background-color: white;
    padding: 12px 44px;
    border-radius: 12px
}

    .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list {
        background-color: var(--lightBg);
        border-radius: 12px
    }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list .icon {
            display: flex;
            justify-content: center;
            padding-top: 20px
        }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list .headerContent {
            padding-top: 12px;
            font-size: 18px;
            font-weight: 600;
            line-height: 22px;
            text-align: center
        }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list .subHeaderContent {
            font-size: 16px;
            font-weight: 400;
            line-height: 19px;
            text-align: center;
            padding-top: 6px
        }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list .groupimg {
            display: flex;
            text-align: center;
            justify-content: center;
            column-gap: 8px;
            padding-top: 12px
        }

            .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list .groupimg img {
                width: 38px;
                height: 38px;
                max-width: 100%;
                max-height: 100vh;
                border-radius: 50%
            }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list .viewAll {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 21px 0px;
            color: inherit;
            font-size: 14px;
            font-weight: 400;
            line-height: 17px
        }

            .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .list .viewAll::hover {
                color: #007aff
            }

    .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .owl-nav .owl-prev {
        position: absolute !important;
        top: 110px;
        left: 4px;
        background-color: var(--lightBg);
        width: 35px;
        height: 28px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .owl-nav .owl-prev span {
            font-size: 22px
        }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .owl-nav .owl-prev:hover {
            background-color: var(--theme-colour2);
            color: white
        }

    .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .owl-nav .owl-next {
        position: absolute !important;
        right: 4px;
        top: 110px;
        background-color: var(--lightBg);
        width: 35px;
        height: 28px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .owl-nav .owl-next span {
            font-size: 22px
        }

        .profileSection .profile .allProfileDtl .profileUpdate .discoverMatches .mainSection .owl-nav .owl-next:hover {
            background-color: var(--theme-colour2);
            color: white
        }

.profileSection .profile .allProfileDtl .completedProfile .get-premium ul li {
    text-align: left
}

.profileSection .profile .allProfileDtl .completedProfile .letedPro {
    margin-bottom: 40px;
    margin-top: 10px
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .completedProfile .letedPro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px
    }
}

@media (max-width: 480px) {
    .profileSection .profile .allProfileDtl .completedProfile .letedPro {
        grid-template-columns: 1fr
    }
}

.profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin-bottom: 8px
}

@media (max-width: 1199px) {
    .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar {
        margin-bottom: 18px
    }
}

@media (max-width: 767px) {
    .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar {
        margin-top: 0px
    }
}

.profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .subHead {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-top: 22px
}

.profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .mainHead {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    margin-top: 8px;
    margin-bottom: 16px
}

.profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .footeehead {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-top: 22px
}

.profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .footerSub {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    margin-top: 8px;
    margin-bottom: 16px
}

.profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .complete {
    display: contents
}

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .complete button {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        margin-bottom: 12px;
        color: white;
        padding: 12px 19px;
        cursor: pointer
    }

        .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .complete button:hover {
            background-color: var(--theme-colour2)
        }

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .complete a {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        margin-bottom: 12px;
        color: white;
        padding: 12px 19px;
        cursor: pointer
    }

        .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressbar .complete a:hover {
            background-color: var(--theme-colour2)
        }

.profileSection .profile .allProfileDtl .completedProfile .letedPro .images {
    display: flex;
    justify-content: center;
    margin-bottom: 8px
}

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .images img {
        width: 100%;
        margin-bottom: 10px
    }

.profileSection .profile .allProfileDtl .completedProfile .letedPro .linePrgress {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background-color: white;
    margin-top: -6px
}

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .linePrgress img {
        width: 100%
    }

.profileSection .profile .allProfileDtl .completedProfile .letedPro .progressBarHeader {
    background-color: var(--lightBg);
    padding: 10px 15px;
    box-shadow: 0 1px 8px #a8a0a0;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    position: absolute;
    top: 20px
}

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressBarHeader label {
        color: var(--theme-colour1);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px
    }

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .progressBarHeader svg path {
        fill: var(--theme-colour1)
    }

.profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar {
    position: relative;
    width: 98%;
    top: 10px
}

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .sectionheader {
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        margin: 16px 0px 0px 0px
    }

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent {
        border: 1px solid var(--lightBg);
        border-radius: 5px;
        padding: 4px 2px;
        margin: 6px;
        margin-bottom: 18px
    }

        .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList {
            display: grid;
            grid-template-columns: 150px 1fr;
            padding: 4px
        }

            .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .left {
                display: flex;
                column-gap: 6px;
                align-items: center
            }

                .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .left .icon svg path {
                    fill: var(--theme-colour1)
                }

                .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .left .content .datahead {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px;
                    white-space: nowrap
                }

                .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px
                }

                    .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata label {
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 24px
                    }

            .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .right .value {
                text-align: right;
                margin-top: 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px
            }

            .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .right .progresSec {
                text-align: right;
                margin-top: 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px
            }

                .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .right .progresSec span {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 24px
                }

                .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress {
                    width: 100%;
                    height: 8px;
                    border-radius: 8px;
                    background-color: rgba(0,0,0,0.1);
                    overflow: hidden;
                    position: relative;
                    margin-top: 7px
                }

                    .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress span {
                        height: 100%;
                        display: block;
                        width: 0;
                        color: #6fda9d;
                        line-height: 30px;
                        position: absolute;
                        text-align: end;
                        padding-right: 5px
                    }

                .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-green span {
                    background-color: #6fda9d
                }

                .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-red span {
                    background-color: #eb6463
                }

        .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .progressContent hr {
            width: 100%;
            height: 1px;
            background-color: #f3f3f3 !important;
            border: none;
            margin: 0
        }

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .footerContent {
        width: 150px;
        margin: auto;
        text-align: center;
        padding: 8px 0px 8px 0px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

    .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .upgradeButton {
        display: flex;
        justify-content: center;
        margin-bottom: 20px
    }

        .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .upgradeButton button {
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            background-color: var(--theme-colour1);
            border: none;
            border-radius: 5px;
            margin-bottom: 12px;
            color: white;
            padding: 12px 19px;
            cursor: pointer
        }

            .profileSection .profile .allProfileDtl .completedProfile .letedPro .lineprogressbar .progessBody .upgradeButton button:hover {
                background-color: var(--theme-colour2)
            }

@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0
    }

    100% {
        --pgPercentage: var(--value)
    }
}

div[role="progressbar"] {
    --size: 10rem;
    --fg: #6fda9d;
    --bg: #def;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, #fff 65%, transparent 0 99.9%, #fff 0),conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 16%);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg)
}

    div[role="progressbar"]::before {
        counter-reset: percentage var(--value);
        content: counter(percentage) "%"
    }

.progress {
    padding: 6px;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08)
}

.progress-bar {
    height: 18px;
    background-color: #ee303c;
    border-radius: 4px;
    transition: 0.4s linear;
    transition-property: width, background-color
}

.progress-striped .progress-bar {
    background-color: #fcbc51;
    width: 100%;
    background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
    animation: progressAnimationStrike 6s
}

@keyframes progressAnimationStrike {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.progress2 {
    border-radius: 25px;
    margin-top: 6px;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08)
}

.progress-bar2 {
    height: 8px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    transition: 0.4s linear;
    transition-property: width, background-color
}

.progress-moved .progress-bar2 {
    width: 58%;
    background-color: #08351b;
    animation: progressAnimation 6s
}

.progress-moved .progress-bar3 {
    width: 96%;
    background-color: #eb6463;
    animation: progressAnimation 6s
}

.progress-moved .progress-bar4 {
    width: 40%;
    background-color: #6fda9d;
    animation: progressAnimation 6s
}

.progress-moved .progress-bar5 {
    width: 62%;
    background-color: #6fda9d;
    animation: progressAnimation 6s
}

.progress-moved .progress-bar6 {
    width: 100%;
    background-color: #eb6463;
    animation: progressAnimation 6s
}

.progress-bar3 {
    height: 8px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    transition: 0.4s linear;
    transition-property: width, background-color
}

.progress-bar4 {
    height: 8px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    transition: 0.4s linear;
    transition-property: width, background-color
}

.progress-bar6 {
    height: 8px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    transition: 0.4s linear;
    transition-property: width, background-color
}

.progress-bar5 {
    height: 8px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    transition: 0.4s linear;
    transition-property: width, background-color
}

@keyframes colorAnimation {
    0% {
        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7dc8e8, #5856d6, #ff2d55)
    }

    20% {
        background-image: linear-gradient(to right, #5ac8fa, #007aff, #7dc8e8, #5856d6, #ff2d55, #4cd964)
    }

    40% {
        background-image: linear-gradient(to right, #007aff, #7dc8e8, #5856d6, #ff2d55, #4cd964, #5ac8fa)
    }

    60% {
        background-image: linear-gradient(to right, #7dc8e8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff)
    }

    100% {
        background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7dc8e8)
    }
}

.mainSection > .disabled {
    display: block !important
}

.gridImgWrapper {
    height: 260px;
    max-width: 206px;
    overflow: hidden;
    border-radius: 9px
}

@media (max-width: 1199px) {
    .gridImgWrapper {
        max-width: 100%;
        height: 240px
    }
}

.gridImgWrapper img {
    width: auto !important;
    border-radius: 9px;
    height: 100%;
    min-height: inherit
}

@media (max-width: 1366px) {
    .gridImgWrapper img {
        width: 100% !important
    }
}

.edit-EduPref .select2-container--default .select2-selection--multiple {
    border: 1px solid #ffffff
}

.edit-EduPref .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ffffff
}

.edit-EduPref .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e8eff4;
    border: 1px solid #ddd;
    color: #b1b1b1
}

.edit-EduPref .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #ddd;
    color: #b1b1b1
}

@media not all and (min-resolution: 0.001dpcm) {
    .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion {
        display: flex
    }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion svg {
            margin-left: 0;
            width: 33px;
            margin-right: 4px
        }

        .profileSection .profile .profileArea .accordinSection .discoverMatches .accordinSection .accordion label {
            width: 100%
        }

    .header-container-top .header-container .header-content {
        margin-left: auto
    }

    .registerMain .template-container .content {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

.get-premium {
    border-radius: 6px
}

.accordinSection .discoverMatches {
    border: 1px px solid #f3f3f3;
    border-radius: 5px;
    margin-top: 8px
}

    .accordinSection .discoverMatches .toparea {
        padding: 8px;
        margin-top: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

        .accordinSection .discoverMatches .toparea .headerlist {
            display: flex;
            column-gap: 10px;
            padding: 19px 0px 15px 0px;
            margin-left: 20px
        }

            .accordinSection .discoverMatches .toparea .headerlist span {
                font-size: 16px;
                font-weight: 600;
                line-height: 26px;
                color: #eb6463;
                font-family: Rubik
            }

@media (max-width: 767px) {
    .accordinSection .discoverMatches .toparea .headerlist span {
        font-size: 12px;
        font-weight: 600;
        line-height: 26px
    }
}

.accordinSection .discoverMatches .accordinSection {
    background-color: var(--lightBg);
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    padding: 10px 8px
}

    .accordinSection .discoverMatches .accordinSection .accordion {
        background-color: var(--lightBg);
        color: #444;
        cursor: pointer;
        padding: 10px 10px 10px 0px;
        width: 100%;
        margin-bottom: 4px;
        border: none;
        text-align: left;
        outline: none;
        color: #252525;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        transition: 0.4s;
        border-radius: 5px;
        display: grid;
        grid-template-columns: 35px 1fr 5px;
        align-items: center
    }

        .accordinSection .discoverMatches .accordinSection .accordion:hover {
            background-color: #ffffff
        }

            .accordinSection .discoverMatches .accordinSection .accordion:hover svg path {
                fill: #69b3de
            }

            .accordinSection .discoverMatches .accordinSection .accordion:hover .arrow {
                display: block
            }

        .accordinSection .discoverMatches .accordinSection .accordion svg {
            margin-left: 4px
        }

        .accordinSection .discoverMatches .accordinSection .accordion .disMach {
            display: grid;
            grid-template-columns: 1fr 30px;
            align-items: center
        }

            .accordinSection .discoverMatches .accordinSection .accordion .disMach .edt {
                font-size: 13px;
                font-weight: 400;
                line-height: 15px;
                color: var(--theme-colour1)
            }

        .accordinSection .discoverMatches .accordinSection .accordion span {
            position: relative;
            font-size: 16px;
            font-weight: 400;
            line-height: 18px;
            color: #434343;
            margin-bottom: 0
        }

@media (max-width: 767px) {
    .accordinSection .discoverMatches .accordinSection .accordion span {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px
    }
}

.accordinSection .discoverMatches .accordinSection .accordion:after {
    content: url("../images/downarrow.jpg");
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px
}

.accordinSection .discoverMatches .accordinSection .activeAcco:after {
    content: url("../images/uparrow.jpg")
}

.accordinSection .discoverMatches .accordinSection .panel {
    padding: 8px 8px 0;
    max-height: fit-content;
    background-color: #fff !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    display: none
}

    .accordinSection .discoverMatches .accordinSection .panel.active {
        display: block
    }

    .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul {
        padding-left: 0px
    }

        .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul li a:hover {
            color: blue
        }

.chart-area {
    margin: auto;
    width: 143px
}

.searchProfile {
    background-color: var(--lightBg)
}

@media (max-width: 480px) {
    .searchProfile {
        padding: 10px 0
    }
}

.searchProfile .template-container .headerSearch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 75px
}

@media (max-width: 480px) {
    .searchProfile .template-container .headerSearch {
        flex-direction: column;
        height: auto;
        align-items: unset;
        justify-content: space-between
    }
}

.searchProfile .template-container .headerSearch .left .searchDiv {
    display: flex;
    align-items: center;
    column-gap: 8px
}

@media (max-width: 480px) {
    .searchProfile .template-container .headerSearch .left .searchDiv {
        margin-top: 4px
    }
}

.searchProfile .template-container .headerSearch .left .searchDiv .searchIcon svg path {
    fill: #484848
}

.searchProfile .template-container .headerSearch .left .searchDiv .content {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .searchProfile .template-container .headerSearch .left .searchDiv .content {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

@media (max-width: 480px) {
    .searchProfile .template-container .headerSearch .left .searchDiv .content {
        font-size: 12px;
        font-weight: 600;
        line-height: 15px
    }
}

.searchProfile .template-container .headerSearch .left .searchDiv .filterDrop {
    display: none
}

    .searchProfile .template-container .headerSearch .left .searchDiv .filterDrop svg path {
        fill: #575757
    }

    .searchProfile .template-container .headerSearch .left .searchDiv .filterDrop svg:hover path {
        fill: var(--theme-colour1)
    }

@media (max-width: 991px) {
    .searchProfile .template-container .headerSearch .left .searchDiv .filterDrop {
        display: flex;
        background-color: white;
        padding: 6px 10px;
        border-radius: 6px;
        margin: 0px 16px 0px 10px;
        height: 32px;
        align-items: center
    }
}

.searchProfile .template-container .headerSearch .left .searchDiv .filterDrop:hover {
    background-color: var(--theme-colour1)
}

    .searchProfile .template-container .headerSearch .left .searchDiv .filterDrop:hover svg path {
        fill: #fff
    }

.searchProfile .template-container .headerSearch .left .searchDiv .contentNair {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: black
}

@media (max-width: 767px) {
    .searchProfile .template-container .headerSearch .left .searchDiv .contentNair {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.searchProfile .template-container .headerSearch .left .searchDiv .searchResult {
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: #111111
}

@media (max-width: 767px) {
    .searchProfile .template-container .headerSearch .left .searchDiv .searchResult {
        font-size: 18px;
        font-weight: 500;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .searchProfile .template-container .headerSearch .left .searchDiv .searchResult {
        font-size: 16px;
        font-weight: 500;
        line-height: 15px
    }
}

.searchProfile .template-container .headerSearch .left .searchDiv .downArrow svg path {
    fill: var(--theme-colour1)
}

.searchProfile .template-container .headerSearch .left .searchfilter {
    display: flex;
    align-items: center;
    column-gap: 8px
}

@media (max-width: 480px) {
    .searchProfile .template-container .headerSearch .left .searchfilter {
        margin-top: 4px
    }
}

.searchProfile .template-container .headerSearch .left .searchfilter .content {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: var(--theme-colour1)
}

@media (max-width: 767px) {
    .searchProfile .template-container .headerSearch .left .searchfilter .content {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

@media (max-width: 480px) {
    .searchProfile .template-container .headerSearch .left .searchfilter .content {
        font-size: 12px;
        font-weight: 600;
        line-height: 15px
    }
}

.searchProfile .template-container .headerSearch .left .searchfilter .filterDrop {
    display: none
}

    .searchProfile .template-container .headerSearch .left .searchfilter .filterDrop svg path {
        fill: #575757
    }

    .searchProfile .template-container .headerSearch .left .searchfilter .filterDrop svg:hover path {
        fill: var(--theme-colour1)
    }

@media (max-width: 767px) {
    .searchProfile .template-container .headerSearch .left .searchfilter .filterDrop {
        display: block
    }
}

.searchProfile .template-container .headerSearch .left .searchfilter .contentNair {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: black
}

@media (max-width: 767px) {
    .searchProfile .template-container .headerSearch .left .searchfilter .contentNair {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.searchProfile .template-container .headerSearch .left .searchfilter .searchResult {
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: #111111
}

@media (max-width: 767px) {
    .searchProfile .template-container .headerSearch .left .searchfilter .searchResult {
        font-size: 20px;
        font-weight: 500;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .searchProfile .template-container .headerSearch .left .searchfilter .searchResult {
        font-size: 16px;
        font-weight: 500;
        line-height: 15px
    }
}

.searchProfile .template-container .headerSearch .left .searchfilter .downArrow {
    display: flex
}

    .searchProfile .template-container .headerSearch .left .searchfilter .downArrow svg #Path_4766 {
        fill: var(--theme-colour1)
    }

.searchProfile .template-container .headerSearch .left .searchfilter .searchIcon {
    display: flex
}

    .searchProfile .template-container .headerSearch .left .searchfilter .searchIcon svg path {
        fill: #484848
    }

.searchProfile .template-container .headerSearch .right .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
    position: relative
}

    .searchProfile .template-container .headerSearch .right .icon .icon1 {
        cursor: pointer
    }

        .searchProfile .template-container .headerSearch .right .icon .icon1 span {
            position: absolute;
            opacity: 0;
            top: -25px;
            left: -75px;
            font-size: 10px;
            font-weight: 400;
            line-height: 27px;
            padding: 0px 16px;
            background-color: black;
            color: white;
            z-index: 999999;
            border-radius: 4px;
            pointer-events: none
        }

        .searchProfile .template-container .headerSearch .right .icon .icon1:hover span {
            opacity: 1
        }

        .searchProfile .template-container .headerSearch .right .icon .icon1.active svg path {
            fill: var(--theme-colour1)
        }

    .searchProfile .template-container .headerSearch .right .icon .icon2 {
        cursor: pointer
    }

        .searchProfile .template-container .headerSearch .right .icon .icon2 span {
            position: absolute;
            opacity: 0;
            top: -25px;
            right: 0px;
            font-size: 10px;
            font-weight: 400;
            line-height: 27px;
            padding: 0px 16px;
            background-color: black;
            color: white;
            z-index: 999999;
            border-radius: 4px;
            pointer-events: none
        }

        .searchProfile .template-container .headerSearch .right .icon .icon2:hover span {
            opacity: 1
        }

        .searchProfile .template-container .headerSearch .right .icon .icon2.active svg path {
            fill: var(--theme-colour1)
        }

.searchProfile .featuredProfileNair {
    background-color: var(--lightBg)
}

.searchDataSection .template-container .featuredProfileList {
    display: grid;
    grid-template-columns: 310px 1fr;
    column-gap: 16px;
    overflow: hidden
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList {
        grid-template-columns: 1fr
    }
}

.searchDataSection .template-container .featuredProfileList.featuredProfileListSm {
    grid-template-columns: 1fr
}

    .searchDataSection .template-container .featuredProfileList.featuredProfileListSm .searchData {
        max-width: 940px;
        margin: 17px auto 0
    }

.searchDataSection .template-container .featuredProfileList .filterSide {
    margin-top: 24px
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .filterSide {
        max-width: 310px;
        margin-top: 0px;
        width: 100%
    }
}

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .filterSide {
        max-width: 280px
    }
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .filterSide {
        display: none;
        box-shadow: 0px 6px 22px #7f7070
    }
}

.searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay {
    position: relative;
    background: linear-gradient(169deg, var(--lightBg) 48%, #fff 34%);
    border-radius: 8px;
    border: 1px solid #F3F3F3;
    margin-bottom: 6px
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay {
        order: 0;
        margin-top: 12px
    }
}

.searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay.profileOfTheDayNo {
    background: transparent
}

.searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .header {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--theme-colour1);
    padding: 20px 10px 0;
    text-align: center
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .header {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .photo {
    text-align: center;
    max-width: 141px;
    margin: auto;
    display: block !important
}

    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .photo img {
        border: 2px dashed var(--theme-colour1);
        border-radius: 50%;
        padding: 10px;
        display: initial
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .photo.protected::after {
        border: 2px dashed var(--theme-colour1);
        border-radius: 50%
    }

.searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .footerData {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px
}

    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .footerData .name {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #505050;
        margin-top: 8px
    }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .footerData .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .footerData .subName {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #505050;
    margin-top: 8px
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .footerData .subName {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-bottom: 20px
}

    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow button {
        border: none;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        height: 45px;
        border: none;
        color: #434343;
        background-color: transparent;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        cursor: pointer
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow button:hover {
            background-color: #add3ea;
            color: var(--white)
        }

    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow a {
        border: none;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        height: 45px;
        border: none;
        color: #434343;
        background-color: transparent;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        cursor: pointer
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow a:hover {
            background-color: #add3ea;
            color: var(--white)
        }

    .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow .cmnBtn {
        width: 95px
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow .cmnBtn:last-child {
            color: var(--white);
            background-color: var(--theme-colour1)
        }

            .searchDataSection .template-container .featuredProfileList .filterSide .profileOfTheDay .buttonRow .cmnBtn:last-child:hover {
                background-color: var(--theme-colour2)
            }

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea {
    border: 1px solid #f3f3f3;
    border-radius: 12px;
    margin-bottom: 6px;
    padding: 12px 12px 8px 12px;
    padding-left: 12px;
    padding-right: 12px
}

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea:last-child {
        margin-bottom: 0px
    }

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea {
        border-radius: 0px
    }
}

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .filterHead {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .filterHead .headerLeft {
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;
        color: #0c0c0c
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .filterHead .headerRight {
        color: var(--theme-colour1);
        font-size: 18px;
        font-weight: 500;
        line-height: 22px
    }

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap {
    border-radius: 4px;
    margin-bottom: 16px;
    margin-left: -8px
}

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .accordion {
        background-color: transparent;
        color: #444;
        cursor: pointer;
        padding: 10px 10px 10px 0px;
        width: 100%;
        height: 24px;
        margin-bottom: 4px;
        border: none;
        text-align: left;
        outline: none;
        color: #252525;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        transition: 0.4s;
        border-radius: 5px
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .accordion:hover {
            background-color: #ffffff
        }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .accordion:hover svg path {
                fill: #69b3de
            }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .accordion:hover .arrow {
                display: block
            }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .accordion svg {
            margin-left: 4px
        }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .accordion label {
            position: relative;
            bottom: 6px;
            left: 8px;
            font-size: 16px;
            font-weight: 600;
            line-height: 19px;
            color: #484848
        }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .accordion:after {
            content: url("../images/downSearch.jpg");
            color: #777;
            font-weight: bold;
            float: right;
            margin-left: 5px
        }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .activeAcco:after {
        content: url("../images/upSearch.jpg")
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel {
        padding: 0 0px;
        max-height: 0;
        margin-bottom: 0px !important;
        overflow: hidden;
        border-radius: 8px;
        background-color: transparent;
        box-shadow: none !important;
        transition: max-height 0.2s ease-out
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody {
            padding: 0px 8px
        }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList {
                padding: 15px;
                height: 49px;
                background-color: #F2F2F2;
                border-radius: 8px;
                margin-bottom: 4px
            }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList::last-child {
                    margin-bottom: 0px
                }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row {
                    position: relative
                }

@media (max-width: 375px) {
    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row {
        margin-bottom: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box {
    position: relative;
    padding-left: 0px
}

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box input[type="checkbox"] {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box label {
        display: flex;
        pointer-events: all;
        padding-left: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #707070;
        position: relative
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box label::before {
            position: absolute;
            left: 0;
            top: -2px;
            content: "";
            width: 20px;
            height: 20px;
            background-color: var(--white) !important;
            border: 1px solid #dbdbdb
        }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box label::after {
            opacity: 0;
            position: absolute;
            left: 8px;
            top: 0px;
            content: "";
            width: 6px;
            height: 11px;
            transition: ease-in-out 0.4s;
            border: solid #2e3191;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box input:checked ~ label::before {
        background-color: var(--white)
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box input:checked ~ label::after {
        opacity: 1
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList .form-check-row .check-box label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #2d2d2d
    }

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList ul {
    padding-left: 0px
}

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap .panel .footerbody .accoList ul li a:hover {
        color: blue
    }

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap:last-child {
    margin-bottom: 0px
}

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinWrap.accordinWrapShadow {
    box-shadow: 0px 3px 6px #e2d2d2
}

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap {
    margin-bottom: 16px !important
}

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap:last-child {
        margin-bottom: 0px !important
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .accordion {
        background-color: transparent;
        color: #444;
        height: 0px !important;
        cursor: pointer;
        padding: 10px 10px 10px 0px;
        width: 100%;
        margin-bottom: 8px;
        border: none;
        text-align: left;
        outline: none;
        color: #252525;
        position: relative;
        z-index: 111;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        transition: 0.4s;
        border-radius: 5px
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .accordion:hover {
            background-color: #ffffff
        }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .accordion:hover svg path {
                fill: #69b3de
            }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .accordion:hover .arrow {
                display: block
            }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .accordion svg {
            margin-left: 4px
        }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .accordion label {
            position: relative;
            font-size: 16px;
            font-weight: 600;
            line-height: 19px;
            color: #484848
        }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .accordion:after {
            content: url("../images/downSearch.jpg");
            color: #777;
            font-weight: bold;
            float: right;
            margin-left: 5px
        }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .activeAcco:after {
        content: url("../images/upSearch.jpg")
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel {
        padding: 0px 0px;
        margin-bottom: 0px !important;
        max-height: 0;
        background-color: transparent;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        box-shadow: none !important
    }

        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody {
            height: 49px
        }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .inputSearch {
                width: 100%;
                height: 46px;
                border-radius: 2px;
                border: 2px solid var(--theme-colour1);
                padding: 0px 12px 0px 12px;
                margin-bottom: 3px !important
            }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper {
                border-radius: 0px 0px 4px 4px;
                margin: 2px;
                box-shadow: 1px 0px 3px #e5e5e5
            }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .addedMartialStatus .dropdownArea {
                    margin: 0px;
                    display: flex;
                    flex-wrap: wrap;
                    padding-left: 0px;
                    padding: 8px;
                    border: 1px solid #e6e6e6;
                    border-radius: 4px
                }

                    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .addedMartialStatus .dropdownArea li {
                        padding: 8px;
                        border: 1px solid #dddddd;
                        border-radius: 4px;
                        margin-right: 2px;
                        background-color: var(--theme-colour1);
                        margin-bottom: 2px;
                        list-style: none
                    }

                        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .addedMartialStatus .dropdownArea li span {
                            margin-right: 6px
                        }

                            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .addedMartialStatus .dropdownArea li span:hover svg path {
                                fill: red
                            }

                        .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .addedMartialStatus .dropdownArea li a {
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 17px;
                            color: white
                        }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown ul li {
                    padding: 9px 8px;
                    border-radius: 2px
                }

                    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown ul li:hover {
                        background-color: #e5f4fb
                    }

                    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown ul li a {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 17px;
                        color: #3d3d3d
                    }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown .more a {
                    padding: 8px;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 17px;
                    color: var(--theme-colour1);
                    text-decoration: underline;
                    cursor: pointer
                }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDownCom ul li {
                    padding: 9px 8px;
                    border-radius: 2px
                }

                    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDownCom ul li:hover {
                        background-color: #e5f4fb
                    }

                    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDownCom ul li a {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 17px;
                        color: #3d3d3d
                    }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList label {
                font-size: 14px;
                font-weight: 400;
                line-height: 17px;
                color: #2e3191
            }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList ul {
                padding-left: 0px
            }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList ul li a:hover {
                    color: blue
                }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .moreButton {
                padding: 8px;
                font-size: 14px;
                font-weight: 400;
                line-height: 17px;
                color: var(--theme-colour1);
                text-decoration: underline;
                cursor: pointer
            }

            .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .filter-slider {
                position: relative;
                padding: 10px 15px 20px 11px
            }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .filter-slider::after {
                    position: absolute;
                    content: "";
                    left: 0;
                    bottom: 20px;
                    width: 100%;
                    height: 20px;
                    background-color: #f2f2f2;
                    border-radius: 11px;
                    padding: 10px;
                    height: 20px
                }

                .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .filter-slider .slider-horizontal {
                    z-index: 1
                }

.searchDataSection .template-container .featuredProfileList .filterSide .filterArea .location {
    display: flex;
    justify-content: space-between
}

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .location.margin26 {
        margin-bottom: 16px
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .location .label {
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
        color: #484848;
        padding: 6px 0px
    }

    .searchDataSection .template-container .featuredProfileList .filterSide .filterArea .location .icon {
        cursor: pointer
    }

.searchDataSection .template-container .featuredProfileList .searchData {
    margin-top: 17px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile {
        height: auto;
        background-color: white;
        padding: 16px;
        border-radius: 12px;
        border: 1px solid #f3f3f3;
        display: grid;
        grid-template-columns: 181px 1fr;
        margin-top: 8px
    }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile {
        grid-template-columns: 1fr;
        height: auto;
        padding: 15px;
        column-gap: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .photo {
    width: 181px;
    height: 234px;
    border-radius: 9px
}

@media (max-width: 1199px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .photo {
        margin-bottom: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content {
    padding-left: 20px
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content {
        padding-left: 0px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap
}

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent {
        margin-bottom: 4px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .icon {
    margin-right: 12px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .icon svg path {
        fill: var(--theme-colour1)
    }

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .name {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .name {
        font-size: 12px;
        font-weight: 600;
        line-height: 18px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .separation {
    width: 3px;
    height: 22px;
    background-color: var(--theme-colour1);
    margin: 0 10px
}

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .separation {
        width: 2px;
        height: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .code {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131;
    display: flex;
    align-items: center
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .code {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent .code {
        font-size: 12px;
        font-weight: 600;
        line-height: 18px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent ul {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    margin: 0
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent ul li {
        padding-inline: 10px;
        min-height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #dddddd;
        position: relative
    }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent ul li:hover .tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(-11px)
        }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent ul li .tooltip {
            color: #FFF;
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            display: inline-flex;
            padding: 12px 16px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 4px;
            background: #2F2F2F;
            position: absolute;
            bottom: 100%;
            left: auto;
            right: auto;
            transform: translateY(-8px);
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15)
        }

            .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .topContent ul li .tooltip::after {
                content: '';
                position: absolute;
                top: 100%;
                left: auto;
                border: 8px solid transparent;
                border-top-color: #2c2c2c
            }

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .paraContent p {
    margin-top: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 18px
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent {
    display: grid;
    grid-template-columns: 270px 220px 1fr;
    column-gap: 10px;
    margin-bottom: 10px
}

@media (max-width: 1366px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 1226px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .age {
    margin-bottom: 10px;
    display: flex
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .age .icon {
        margin-right: 12px
    }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .age .icon svg path {
            fill: #cecece
        }

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .age .content {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #313131;
        padding-top: 4px;
        padding-left: 0
    }

@media (max-width: 1199px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .age .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .cast {
    margin-bottom: 10px;
    display: flex
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .cast .icon {
        margin-right: 12px
    }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .cast .icon svg path {
            fill: #cecece
        }

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .cast .content {
        padding-top: 4px;
        padding-left: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #313131
    }

@media (max-width: 1199px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .cast .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .education {
    margin-bottom: 10px;
    display: flex
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .education .icon {
        margin-right: 12px
    }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .education .icon svg path {
            fill: #cecece
        }

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .education .content {
        padding-top: 4px;
        padding-left: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #313131
    }

@media (max-width: 1199px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .education .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .location {
    display: flex;
    margin-bottom: 10px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .location .icon {
        margin-right: 12px
    }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .location .icon svg path {
            fill: #cecece
        }

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .location .content {
        padding-top: 4px;
        padding-left: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #313131
    }

@media (max-width: 1024px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .location .content {
        margin-right: 20px
    }
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .location .content {
        margin-right: 4px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .location .content {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .religion {
    display: flex;
    margin-bottom: 10px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .religion .icon {
        margin-right: 12px
    }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .religion .icon svg path {
            fill: #cecece
        }

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .religion .content {
        margin-right: 30px;
        padding-top: 4px;
        padding-left: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #313131
    }

@media (max-width: 1024px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .religion .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .job {
    display: flex;
    margin-bottom: 10px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .job .icon {
        margin-right: 12px
    }

        .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .job .icon svg path {
            fill: #cecece
        }

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .job .content {
        padding-top: 4px;
        margin-right: 30px;
        padding-left: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #313131
    }

@media (max-width: 1024px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContent .job .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 0px
    }
}

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location {
    display: flex
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location {
        margin-bottom: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location .icon {
    margin-right: 12px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location .icon svg path {
        fill: #cecece
    }

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location .content {
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1024px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location .content {
        margin-right: 20px
    }
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location .content {
        margin-right: 4px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .location .content {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .religion {
    display: flex
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .religion {
        margin-bottom: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .religion .icon {
    margin-right: 12px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .religion .icon svg path {
        fill: #cecece
    }

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .religion .content {
    margin-right: 30px;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1024px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .religion .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .job {
    display: flex
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .job {
        margin-bottom: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .job .icon {
    margin-right: 12px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .job .icon svg path {
        fill: #cecece
    }

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .job .content {
    padding-top: 4px;
    margin-right: 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #313131
}

@media (max-width: 1024px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .middleContentsecRow .job .content {
        margin-right: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent {
    display: flex;
    align-items: center
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent {
        flex-wrap: wrap
    }
}

@media (max-width: 1226px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent {
        display: grid;
        grid-template-columns: 1fr
    }
}

@media (max-width: 1226px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .left {
        order: 1;
        margin-top: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .left button {
    background-color: var(--theme-colour1);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 12px 14px;
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 28px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .left button:hover {
        background-color: var(--theme-colour2);
        cursor: pointer
    }

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .left a {
    background-color: var(--theme-colour1);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 12px 14px;
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 28px
}

    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .left a:hover {
        background-color: var(--theme-colour2);
        cursor: pointer
    }

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right {
    display: flex;
    flex-wrap: wrap
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right {
        flex-wrap: wrap;
        order: 0
    }
}

@media (max-width: 480px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right {
        flex-direction: column
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact {
    display: flex;
    align-items: center;
    cursor: pointer
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact {
        margin-bottom: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact .icon {
    margin-right: 14px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact .icon {
        margin-right: 4px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact .icon svg path {
    fill: var(--theme-colour1)
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact .content {
    margin-right: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131;
    padding-left: 0
}

@media (max-width: 1279px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact .content {
        margin-right: 17px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .contact .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst {
    display: flex;
    align-items: center;
    cursor: pointer
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst {
        margin-bottom: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst .icon {
    margin-right: 14px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst .icon {
        margin-right: 4px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst .icon svg path {
    fill: var(--theme-colour1)
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst .content {
    margin-right: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131;
    padding-left: 0
}

@media (max-width: 1279px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst .content {
        margin-right: 17px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .interst .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList {
    display: flex;
    align-items: center;
    cursor: pointer
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList {
        margin-bottom: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList .icon {
    margin-right: 14px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: var(--lightBg);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList .icon {
        margin-right: 4px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList .icon svg path {
    fill: var(--theme-colour1)
}

.searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList .content {
    margin-right: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131;
    padding-left: 0
}

@media (max-width: 1279px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList .content {
        margin-right: 17px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .Profile .content .footerContent .right .shortList .content {
        margin-right: 4px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 32px
}

    .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow ul {
        display: flex;
        margin: 0;
        padding: 0
    }

        .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow ul li {
            padding: 2px 4px;
            list-style-type: none
        }

            .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow ul li a {
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--theme-colour1);
                background-color: #f2f2f2;
                width: 42px;
                height: 42px;
                font-size: 18px;
                font-weight: 400;
                line-height: 22px;
                border-radius: 4px;
                transition: ease-in-out 0.4s;
                border: solid 1px #fafafa
            }

                .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow ul li a:hover, .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow ul li a.active {
                    color: #ffffff;
                    border-color: #f3f3f3;
                    background-color: var(--theme-colour1);
                    border-radius: 4px
                }

                    .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow ul li a:hover svg path, .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow ul li a.active svg path {
                        fill: #ffffff
                    }

    .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow .prevPage, .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow .nextPage {
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #434343;
        font-size: 14px;
        font-weight: 400;
        width: 28px;
        height: 28px;
        border-radius: 2px;
        transition: ease-in-out 0.4s;
        border-radius: 2px;
        border: solid 1px #fafafa
    }

        .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow .prevPage:hover, .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow .prevPage.active, .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow .nextPage:hover, .searchDataSection .template-container .featuredProfileList .searchData .pagingNumberRow .nextPage.active {
            color: #cf0722;
            border-color: #f3f3f3;
            background-color: #ffffff
        }

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

@media (max-width: 1199px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 680px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 991px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent.gridContent2 {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 680px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent.gridContent2 {
        grid-template-columns: 1fr 1fr
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent.gridContent2 .gridImgWrapper {
    overflow: hidden;
    padding-top: 120%;
    margin-bottom: 0;
    position: relative;
    display: block;
    height: auto;
    max-width: initial
}

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent.gridContent2 .gridImgWrapper img {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 100%;
        vertical-align: top;
        transition: opacity 1s, transform 1s;
        backface-visibility: hidden
    }

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent.gridContent2 .gridImgWrapper.protected {
        display: block !important;
        height: auto
    }

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImgMain {
    padding: 10px;
    padding-right: 21px
}

@media (max-width: 680px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImgMain {
        padding: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImgMain .mainPicSec {
    max-width: 204px;
    height: 259px;
    border-radius: 9px;
    display: flex;
    width: 100%
}

@media (max-width: 1199px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImgMain .mainPicSec {
        max-width: 259px;
        max-height: 321px
    }
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImgMain .mainPicSec {
        max-width: 339px;
        max-height: 394px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImgMain .mainPicSec img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg {
    position: relative;
    width: 100%;
    margin-bottom: 10px
}

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg:hover .details {
        opacity: 1;
        z-index: 999;
        transform: none
    }

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg img {
        width: 100%;
        border-radius: 9px
    }

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .footername {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        margin-top: 6px;
        text-overflow: ellipsis;
        overflow: hidden
    }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .footername {
        font-size: 14px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .namecode {
        font-size: 10px;
        font-weight: 400;
        line-height: 12px
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details {
    position: absolute;
    width: 100%;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    bottom: 0;
    opacity: 0;
    background: #ffffff;
    border-radius: 9px;
    border: 1px solid #EFEFEF;
    padding: 10px;
    z-index: 999;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08)
}

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .namesection {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px
    }

        .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .namesection .name {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            font-family: Rubik;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100px
        }

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .fullSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr
    }

        .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .fullSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .fullSize li span {
                width: 16px;
                margin-right: 6px
            }

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .smlSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .smlSize {
        grid-template-columns: 1fr
    }
}

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .smlSize li {
    color: #4D4D4D;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 5px
}

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .smlSize li span {
        width: 16px;
        margin-right: 6px
    }

.searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .viewprofile {
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    width: 100px;
    height: 32px;
    background: var(--theme-colour1);
    border-radius: 7px;
    margin: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease-in-out;
    margin-left: 0
}

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .viewprofile:hover {
        background: var(--theme-colour2)
    }

    .searchDataSection .template-container .featuredProfileList .searchData .gridView .gridContent .wrapperImg .details .viewprofile a {
        color: var(--white)
    }

.searchDataSection .template-container .featuredProfileList .searchDataNoDate {
    border-radius: 12px;
    background-color: var(--lightBg);
    margin: 24px 0px
}

    .searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch {
        padding: 32px
    }

@media (max-width: 375px) {
    .searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch {
        padding: 10px
    }
}

.searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .imgSec {
    text-align: center
}

.searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .content {
    text-align: center;
    margin-top: 24px;
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: #111111
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .content {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 500;
        line-height: 25px
    }
}

.searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .paraContent {
    color: #434343;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 32px;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .paraContent {
        font-size: 12px;
        font-weight: 400;
        line-height: 23px
    }
}

.searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .buttonArea {
    max-width: 235px;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

    .searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .buttonArea .buttonSec {
        padding: 18px 30px;
        border-radius: 31px;
        height: 55px;
        background-color: var(--theme-colour1);
        color: white;
        border: none;
        font-size: 16px;
        font-weight: 500;
        line-height: 19px
    }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .buttonArea .buttonSec {
        font-size: 14px;
        font-weight: 500;
        line-height: 15px
    }

        .searchDataSection .template-container .featuredProfileList .searchDataNoDate .dataSearch .buttonArea .buttonSec:hover {
            cursor: pointer;
            background-color: #24c8b2 !important
        }
}

.searchDataSection .template-container .featuredProfileList .filter .footerData {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

    .searchDataSection .template-container .featuredProfileList .filter .footerData .name {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #505050;
        margin-top: 8px
    }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .filter .footerData .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .filter .footerData .subName {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #505050;
    margin-top: 8px
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .filter .footerData .subName {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.searchDataSection .template-container .featuredProfileList .community {
    border-radius: 8px;
    border: 1px solid #f3f3f3;
    padding: 12px 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 20px
}

    .searchDataSection .template-container .featuredProfileList .community .section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%
    }

        .searchDataSection .template-container .featuredProfileList .community .section button {
            width: 100%;
            font-size: 18px;
            font-weight: 400;
            line-height: 22px;
            color: var(--theme-colour1);
            background-color: var(--lightBg);
            margin-top: 8px;
            border: none;
            border: none;
            padding: 14px 0px;
            border-radius: 8px
        }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .community .section button {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .community .section button:hover {
    background-color: #f3fbff;
    cursor: pointer
}

.searchDataSection .template-container .featuredProfileList .assistance {
    background-color: var(--lightBg);
    border-radius: 8px;
    padding: 24px 30px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

    .searchDataSection .template-container .featuredProfileList .assistance .content {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        color: #313131;
        margin-top: 20px;
        margin-bottom: 24px;
        text-align: center
    }

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .assistance .content {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .assistance .call {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--theme-colour1);
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .searchDataSection .template-container .featuredProfileList .assistance .call {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.searchDataSection .template-container .featuredProfileList .assistance .call svg {
    margin-right: 10px
}

.range-slider {
    width: 100%;
    position: relative;
    height: 26px;
    margin-top: 2.5rem;
    margin-bottom: 4rem;
    background-color: #f2f2f2;
    border-radius: 11px;
    padding: -19px;
    padding-right: 10px;
    padding-left: 10px
}

#range {
    -webkit-appearance: none;
    width: 100%
}

    #range:focus {
        outline: none
    }

    #range::before, #range::after {
        position: absolute;
        top: 2rem;
        color: #484848;
        font-size: 14px;
        line-height: 1;
        padding: 3px 5px;
        border-radius: 4px
    }

    #range::before {
        left: 0;
        content: "18";
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

    #range::after {
        right: 0;
        content: "50";
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

    #range::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px;
        cursor: pointer;
        animate: 0.2s;
        background-color: #484848;
        border-radius: 1rem
    }

    #range::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 0.5rem solid #484848;
        box-shadow: 0 1px 3px #484848;
        border-radius: 50%;
        background: #484848;
        cursor: pointer;
        height: 10px;
        width: 10px;
        transform: translateY(calc(-50% + 0px))
    }

#tooltip {
    position: absolute;
    top: -2.25rem
}

    #tooltip span {
        position: absolute;
        text-align: center;
        display: block;
        line-height: 1;
        padding: 0.125rem 0.25rem;
        color: #fff;
        border-radius: 0.125rem;
        background: #2e3191;
        font-size: 1.25rem;
        left: 50%;
        transform: translate(-50%, 0)
    }

        #tooltip span:before {
            position: absolute;
            content: "";
            left: 50%;
            bottom: -8px;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 4px solid transparent;
            border-top-color: #2e3191
        }

#rangecm {
    -webkit-appearance: none;
    width: 100%
}

    #rangecm:focus {
        outline: none
    }

    #rangecm::before, #rangecm::after {
        position: absolute;
        top: 2rem;
        color: #484848;
        font-size: 14px;
        line-height: 1;
        padding: 3px 5px;
        border-radius: 4px
    }

    #rangecm::before {
        left: 0;
        content: "120cm";
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

    #rangecm::after {
        right: 0;
        content: "200cm";
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

    #rangecm::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px;
        cursor: pointer;
        animate: 0.2s;
        background-color: #484848;
        border-radius: 1rem
    }

    #rangecm::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 0.5rem solid #484848;
        box-shadow: 0 1px 3px #484848;
        border-radius: 50%;
        background: #484848;
        cursor: pointer;
        height: 10px;
        width: 10px;
        transform: translateY(calc(-50% + 0px))
    }

#tooltipcm {
    position: absolute;
    top: -2.25rem
}

    #tooltipcm span {
        position: absolute;
        text-align: center;
        display: block;
        line-height: 1;
        padding: 0.125rem 0.25rem;
        color: #fff;
        border-radius: 0.125rem;
        background: #2e3191;
        font-size: 1.25rem;
        left: 50%;
        transform: translate(-50%, 0)
    }

        #tooltipcm span:before {
            position: absolute;
            content: "";
            left: 50%;
            bottom: -8px;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 4px solid transparent;
            border-top-color: #2e3191
        }

.overlayMore {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999999;
    cursor: pointer
}

    .overlayMore.open {
        display: block
    }

    .overlayMore .content {
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 117px 50px 20px 50px;
        font-size: 50px;
        color: white
    }

@media (max-width: 991px) {
    .overlayMore .content {
        margin: 4px
    }
}

.overlayMore .content .contentWraper {
    background-color: #f2f2f2;
    border-radius: 4px;
    padding: 26px 32px;
    max-width: 960px;
    height: auto;
    width: 100%;
    overflow: hidden;
    margin: auto
}

@media (max-width: 991px) {
    .overlayMore .content .contentWraper {
        padding: 8px
    }
}

.overlayMore .content .contentWraper .filterData {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (max-width: 991px) {
    .overlayMore .content .contentWraper .filterData {
        align-items: start;
        justify-content: flex-start;
        flex-direction: column;
        row-gap: 10px
    }
}

.overlayMore .content .contentWraper .filterData .searchSection .form-group {
    position: relative;
    margin-bottom: 0
}

    .overlayMore .content .contentWraper .filterData .searchSection .form-group .fIcon {
        position: absolute;
        cursor: pointer;
        left: 12px;
        bottom: -6px;
        z-index: 9
    }

        .overlayMore .content .contentWraper .filterData .searchSection .form-group .fIcon svg path, .overlayMore .content .contentWraper .filterData .searchSection .form-group .fIcon svg rect, .overlayMore .content .contentWraper .filterData .searchSection .form-group .fIcon svg polygon {
            fill: #a9a9a9
        }

    .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp {
        display: flex;
        align-items: center;
        position: relative
    }

        .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp input {
            padding-left: 38px
        }

        .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp .formcontrol {
            background-color: transparent
        }

        .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp .fsClear {
            width: 22px;
            height: 22px;
            position: absolute;
            right: 34px;
            top: 12px;
            background-color: #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1;
            transition: ease-in-out 0.4s
        }

            .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp .fsClear svg {
                width: 10px;
                height: 10px;
                transition: ease-in-out 0.4s
            }

            .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp .fsClear:hover svg path {
                fill: var(--themeColour1)
            }

        .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp.iconRight .fIcon {
            right: 10px;
            top: 12px
        }

        .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp.iconRight .formcontrol {
            font-size: 12px;
            padding-right: 38px;
            border: 1px solid #dddddd;
            border-radius: 4px;
            height: 44px;
            background-color: #ffffff
        }

.overlayMore .content .contentWraper .filterData .filter {
    column-gap: 24px;
    display: flex;
    align-items: center;
    margin-top: 0px
}

@media (max-width: 767px) {
    .overlayMore .content .contentWraper .filterData .filter {
        flex-wrap: wrap
    }
}

@media (max-width: 480px) {
    .overlayMore .content .contentWraper .filterData .filter {
        row-gap: 10px;
        flex-wrap: wrap;
        margin-top: 6px;
        align-items: center
    }
}

.overlayMore .content .contentWraper .filterData .filter .filterapplied {
    color: #3b3b3b;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap
}

.overlayMore .content .contentWraper .filterData .filter button {
    border: none;
    background-color: transparent;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: white;
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    display: flex;
    height: 40px;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 10px 35px;
    border-radius: 4px
}

.overlayMore .content .contentWraper .filterData .filter a {
    color: var(--theme-colour1);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-decoration: underline
}

.overlayMore .content .contentWraper .filterData .filter .clear {
    display: flex;
    align-items: center;
    white-space: nowrap
}

.overlayMore .content .contentWraper .filterData .filter .close {
    display: flex;
    align-items: center
}

    .overlayMore .content .contentWraper .filterData .filter .close:hover svg path {
        fill: red
    }

.overlayMore .content .contentWraper .contentAllData {
    margin-top: 20px;
    overflow-x: auto;
    max-width: 960px;
    height: 430px;
    width: 100%;
    overflow-y: scroll
}

    .overlayMore .content .contentWraper .contentAllData.contentAllData::-webkit-scrollbar {
        width: 4px
    }

    .overlayMore .content .contentWraper .contentAllData.contentAllData::-webkit-scrollbar-track {
        background: #2d2d2d
    }

    .overlayMore .content .contentWraper .contentAllData.contentAllData::-webkit-scrollbar-thumb {
        background: var(--theme-colour1)
    }

        .overlayMore .content .contentWraper .contentAllData.contentAllData::-webkit-scrollbar-thumb:hover {
            background: var(--theme-colour1)
        }

    .overlayMore .content .contentWraper .contentAllData ul {
        display: flex;
        color: #484848;
        column-gap: 20px;
        padding-left: 0px;
        font-size: 17px;
        font-weight: 400;
        line-height: 20px
    }

        .overlayMore .content .contentWraper .contentAllData ul li.active {
            padding: 2px 6px 2px 6px;
            background-color: #484848;
            border-radius: 2px;
            color: white
        }

.overlayMore .content .contentWraper .moreContent {
    display: flex
}

    .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row {
        position: relative
    }

@media (max-width: 375px) {
    .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row {
        margin-bottom: 10px
    }
}

.overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box {
    position: relative;
    margin-bottom: 31px
}

    .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box input[type="checkbox"] {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box label {
        display: flex;
        pointer-events: all;
        padding-left: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #515151;
        position: relative
    }

        .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box label::before {
            position: absolute;
            left: 0;
            top: -2px;
            content: "";
            width: 20px;
            height: 20px;
            background-color: var(--white)
        }

        .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box label::after {
            opacity: 0;
            position: absolute;
            left: 6px;
            top: 0px;
            content: "";
            width: 6px;
            height: 11px;
            transition: ease-in-out 0.4s;
            border: solid #2e3191;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box input:checked ~ label::before {
        background-color: var(--white)
    }

    .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box input:checked ~ label::after {
        opacity: 1
    }

    .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box .activeColor {
        color: var(--theme-colour1)
    }

.togClass {
    display: block !important;
    position: absolute !important;
    left: 0;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 9999999999;
    background-color: white;
    height: 100vh;
    overflow-y: scroll
}

    .togClass.togClass::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important
    }

    .togClass.togClass::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px
    }

    .togClass.togClass::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px
    }

        .togClass.togClass::-webkit-scrollbar-thumb:hover {
            background: #555;
            border-radius: 10px
        }

.panelHeight {
    margin-top: -26px !important
}

.featuredProfileList:has(.togClass)::after {
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .8;
    z-index: 999999999;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s
}

.moreContent:-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: white;
    z-index: 999
}

.moreContent::-webkit-scrollbar {
    width: 2px;
    height: 6px;
    background-color: white;
    border-radius: 10px;
    z-index: 999
}

.moreContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #838282;
    z-index: 999
}

.filter-slider > .slider-horizontal {
    transform: inherit;
    margin: 35px 0px 0px 0px
}

.slider.slider-horizontal {
    width: 100%;
    position: relative;
    height: auto;
    margin-top: 2.5rem;
    background-color: #f2f2f2;
    border-radius: 11px;
    padding: -19px;
    padding-right: 10px;
    padding-left: 10px
}

.filter-slider .slider-horizontal .slider-selection {
    background: var(--theme-colour1) !important
}

.filter-slider > .slider-horizontal > .slider-handle {
    top: 3px !important;
    background-color: var(--theme-colour1) !important
}

.filter-slider > .slider-horizontal > .slider-track {
    height: 2px !important;
    width: 100% !important;
    left: 0px !important
}

.filter-slider > .slider > .tooltip > .tooltip-inner {
    background-color: #2E3191 !important
}

.filter-slider > .slider > .tooltip > .tooltip-arrow {
    border-top-color: #2E3191 !important
}

.filter-slider em:first-of-type {
    left: 18px !important;
    color: #484848;
    font-size: 14px;
    font-weight: 400
}

.filter-slider em:last-of-type {
    color: #484848;
    font-size: 14px;
    font-weight: 400;
    right: 18px !important
}

.modalWidetSuccess {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    pointer-events: none;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s;
    -webkit-transform: translate3d(0, 102%, 0);
    transform: translate3d(0, 102%, 0);
    box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2);
    opacity: 0
}

@media (max-width: 550px) {
    .modalWidetSuccess {
        flex-direction: column
    }
}

.modalWidetSuccess.modalWidetSub .infoModal {
    max-width: 1003px !important;
    width: 100%;
    box-shadow: 0 0px 8px #d4cece
}

@media (max-width: 680px) {
    .modalWidetSuccess.modalWidetSub .infoModal {
        width: 90%
    }
}

.modalWidetSuccess.modalWidetSub .modalRow {
    padding: 21px 32px
}

@media (max-width: 480px) {
    .modalWidetSuccess.modalWidetSub .modalRow {
        padding: 20px
    }
}

.modalWidetSuccess.modalWidetSub .instructions {
    padding: 0;
    margin: 0;
    background-color: var(--white)
}

    .modalWidetSuccess.modalWidetSub .instructions p {
        text-align: left;
        color: #434343
    }

    .modalWidetSuccess.modalWidetSub .instructions ul {
        margin: 32px 0 0
    }

@media (max-width: 480px) {
    .modalWidetSuccess.modalWidetSub .instructions ul {
        margin: 15px 0 0
    }
}

.modalWidetSuccess.modalWidetSub .instructions .title {
    padding: 25px 0 20px
}

@media (max-width: 480px) {
    .modalWidetSuccess.modalWidetSub .instructions .title {
        padding: 10px 0 11px
    }
}

.modalWidetSuccess .modalRow {
    padding: 34px;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px #959595;
    z-index: 1
}

    .modalWidetSuccess .modalRow.infoModal {
        max-width: 501px;
        width: 100%;
        height: 350px
    }

@media (max-width: 680px) {
    .modalWidetSuccess .modalRow.infoModal {
        width: 90%
    }
}

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup {
    max-width: 822px;
    width: 100%;
    padding: 24px 20px
}

    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .closeBTN {
        top: 13px;
        right: 14px;
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 5px;
        border: 1px solid #F3F3F3;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .closeBTN span {
            display: flex
        }

    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .titleArea {
        display: grid;
        grid-template-columns: 48px 1fr;
        align-items: center;
        padding-left: 20px
    }

@media (max-width: 767px) {
    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .titleArea {
        padding-left: 0px
    }
}

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup .titleArea .pic {
    width: 48px;
    height: 48px
}

    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .titleArea .pic img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup .titleArea .textarea {
    padding-left: 12px
}

    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .titleArea .textarea .title {
        font-size: 18px;
        font-weight: 600;
        line-height: 20px;
        color: var(--black)
    }

    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .titleArea .textarea p {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: var(--black);
        margin-top: 8px
    }

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup .message-content {
    padding-left: 20px;
    margin-top: 15px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px
}

@media (max-width: 767px) {
    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .message-content {
        padding-left: 0px
    }
}

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup .message-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    margin-left: 5px;
    left: 5px
}

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup .message-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    box-shadow: none
}

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup .message-content::-webkit-scrollbar-thumb {
    background: #b4b4b4;
    box-shadow: none
}

.modalWidetSuccess .modalRow.infoModal.contactDetailPopup .message-content .cnt-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    margin-bottom: 5px
}

    .modalWidetSuccess .modalRow.infoModal.contactDetailPopup .message-content .cnt-label .geomapnav {
        display: flex;
        width: 120px;
        align-items: center;
        justify-content: center;
        background-color: var(--theme-colour1);
        color: #fff;
        padding: 5px 6px;
        border-radius: 5px;
        gap: 2px;
        margin-top: 4px
    }

.modalWidetSuccess .modalRow.infoModalDo {
    height: auto !important
}

@media (max-width: 480px) {
    .modalWidetSuccess .modalRow.infoModalDo {
        margin: 20px;
        padding: 10px
    }
}

@media (max-width: 480px) {
    .modalWidetSuccess .modalRow.modalRowDwnLnk {
        width: 310px
    }
}

.modalWidetSuccess .modalRow.modalRowDwnLnk .qucklink {
    font-size: 28px;
    font-weight: 600
}

@media (max-width: 767px) {
    .modalWidetSuccess .modalRow.modalRowDwnLnk .qucklink {
        font-size: 22px
    }
}

@media (max-width: 480px) {
    .modalWidetSuccess .modalRow.modalRowDwnLnk .qucklink {
        text-align: center
    }
}

@media (max-width: 480px) {
    .modalWidetSuccess .modalRow.modalRowDwnLnk .qucklink .link {
        margin-top: 30px
    }
}

.modalWidetSuccess .modalRow.modalRowWarn {
    height: 330px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .modalWidetSuccess .modalRow.modalRowWarn .statusPic {
        margin-bottom: 0px
    }

    .modalWidetSuccess .modalRow.modalRowWarn p {
        margin: 12px auto;
        max-width: 376px;
        color: #515151
    }

.modalWidetSuccess .modalRow.modalRowSurePop {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .modalWidetSuccess .modalRow.modalRowSurePop .statusPic {
        margin-bottom: 0px
    }

    .modalWidetSuccess .modalRow.modalRowSurePop p {
        margin: 15px 0px 32px
    }

    .modalWidetSuccess .modalRow.modalRowSurePop textarea {
        width: 100%;
        border: 1px solid #bbb8b8;
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 15px
    }

    .modalWidetSuccess .modalRow.modalRowSurePop .buttonRow {
        margin-top: 0px
    }

    .modalWidetSuccess .modalRow.modalRowSurePop .cmnBtn {
        width: 95px
    }

        .modalWidetSuccess .modalRow.modalRowSurePop .cmnBtn:last-child {
            color: var(--white);
            background-color: var(--theme-colour1)
        }

            .modalWidetSuccess .modalRow.modalRowSurePop .cmnBtn:last-child:hover {
                background-color: var(--theme-colour2)
            }

.modalWidetSuccess .modalRow h3, .modalWidetSuccess .modalRow h4, .modalWidetSuccess .modalRow h4 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 26px;
    color: #6FDA9D;
    margin-bottom: 2px
}

.modalWidetSuccess .modalRow .qucklink {
    font-size: 28px;
    font-weight: 600
}

@media (max-width: 480px) {
    .modalWidetSuccess .modalRow .qucklink {
        font-size: 18px;
        margin-top: 15px
    }
}

.modalWidetSuccess .modalRow .qucklink .link {
    display: flex;
    align-items: center;
    margin-top: 50px;
    column-gap: 10px
}

@media (max-width: 480px) {
    .modalWidetSuccess .modalRow .qucklink .link {
        flex-direction: column;
        row-gap: 10px
    }
}

.modalWidetSuccess .modalRow .qucklink .link a {
    display: flex;
    align-items: center;
    column-gap: 18px
}

.modalWidetSuccess .modalRow .qucklink .link img {
    max-width: 150px;
    width: 100%
}

.modalWidetSuccess .modalRow .Failure {
    color: #EB6463 !important
}

.modalWidetSuccess .modalRow p {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #434343;
    margin: 15px 0px
}

.modalWidetSuccess .modalRow .lineStatus {
    display: flex;
    column-gap: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

    .modalWidetSuccess .modalRow .lineStatus .line {
        height: 4px;
        background-color: #6FDA9D;
        width: 120px;
        border-radius: 6px
    }

        .modalWidetSuccess .modalRow .lineStatus .line.lineSub {
            background-color: #EB6463 !important
        }

.modalWidetSuccess .modalRow .buttonRow {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 32px
}

    .modalWidetSuccess .modalRow .buttonRow button {
        border: none;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        height: 45px;
        border: none;
        color: #434343;
        box-shadow: 0 0px 8px #d4cece;
        background-color: transparent;
        border-radius: 6px;
        cursor: pointer
    }

        .modalWidetSuccess .modalRow .buttonRow button:hover {
            background-color: var(--theme-colour1);
            color: var(--white)
        }

.modalWidetSuccess .modalRow .wrong {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: #434343;
    text-align: center
}

.modalWidetSuccess .modalRow .statusPic {
    text-align: center;
    margin-bottom: 13px;
    display: flex;
    justify-content: center;
    text-align: center
}

    .modalWidetSuccess .modalRow .statusPic .successImg {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-image: url(../images/success.jpg);
        background-position: center
    }

    .modalWidetSuccess .modalRow .statusPic .FailureImg {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-image: url(../images/Failure.jpg);
        background-position: center
    }

    .modalWidetSuccess .modalRow .statusPic .sure-popup {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-image: url(../images/sure-popup.jpg);
        background-position: center
    }

    .modalWidetSuccess .modalRow .statusPic .Warning-img {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-image: url(../images/waring.jpg);
        background-position: center
    }

.modalWidetSuccess .modalRow .cmnBtn {
    max-width: 120px;
    width: 100%
}

.modalWidetSuccess .modalRow.acceptJobModal .statusPic {
    margin-bottom: 18px
}

.modalWidetSuccess .modalRow.acceptJobModal h4 {
    font-size: 18px;
    color: var(--theme-text-colour);
    margin-bottom: 6px;
    line-height: 24px
}

.modalWidetSuccess .modalRow.acceptJobModal p {
    max-width: 355px;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin: auto
}

.modalWidetSuccess .modalRow.acceptJobModal textarea {
    width: 100%;
    border: 1px solid #DDDDDD;
    padding: 14px;
    border-radius: 4px;
    background-color: transparent;
    outline: none
}

.modalWidetSuccess .modalBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    opacity: 0;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.5s;
    transition: opacity 0.6s, transform 0.5s;
    -webkit-transform: translate3d(0, 102%, 0);
    transform: translate3d(0, 102%, 0);
    box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2)
}

.modalWidetSuccess.open {
    opacity: 1;
    pointer-events: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

    .modalWidetSuccess.open .modalBg {
        opacity: 0.5;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

.modalWidetSuccess .closeBTN {
    position: relative
}

@media (max-width: 550px) {
    .modalWidetSuccess .closeBTN {
        width: 100%
    }
}

.modalWidetSuccess .closeBTN .closeBtn {
    cursor: pointer;
    width: 60px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 498px;
    background-color: white;
    top: -155px;
    transition: ease-in-out 0.4s;
    border-radius: 8px;
    z-index: 1
}

@media (max-width: 680px) {
    .modalWidetSuccess .closeBTN .closeBtn {
        width: 25px;
        height: 25px;
        left: 470px;
        top: -155px;
        z-index: 999;
        border-radius: 50%
    }
}

@media (max-width: 550px) {
    .modalWidetSuccess .closeBTN .closeBtn {
        left: auto;
        top: 11px;
        right: 29px;
        float: right;
        margin-left: auto;
        margin-right: auto
    }
}

.modalWidetSuccess .closeBTN .closeBtn svg rect {
    fill: var(--primary)
}

.modalWidetSuccess .closeBTN .closeBtn:hover {
    background-color: var(--theme-colour1)
}

    .modalWidetSuccess .closeBTN .closeBtn:hover svg path {
        fill: var(--white)
    }

.modalWidetSuccess .closeBTN.closeDo .closeBtn {
    left: 425px !important;
    top: -120px !important
}

@media (max-width: 767px) {
    .modalWidetSuccess .closeBTN.closeDo .closeBtn {
        left: 400px !important
    }
}

@media (max-width: 480px) {
    .modalWidetSuccess .closeBTN.closeDo .closeBtn {
        left: 350px !important
    }
}

@media (max-width: 375px) {
    .modalWidetSuccess .closeBTN.closeDo .closeBtn {
        left: 180px !important;
        top: -140px !important
    }
}

.modalWidetSuccess .closeBTN.closeDo .closeBtn2 {
    left: 451px !important
}

@media (max-width: 767px) {
    .modalWidetSuccess .closeBTN.closeDo .closeBtn2 {
        left: 451px !important
    }
}

@media (max-width: 680px) {
    .modalWidetSuccess .closeBTN.closeDo .closeBtn2 {
        left: 421px !important
    }
}

@media (max-width: 480px) {
    .modalWidetSuccess .closeBTN.closeDo .closeBtn2 {
        left: 298px !important;
        top: -130px !important
    }
}

.modalWidetSuccess.editOtp.editOtp2 .modalRow {
    padding: 23px 28px 18px
}

.modalWidetSuccess.editOtp.editOtp2 .inputRow {
    display: flex;
    gap: 10px
}

    .modalWidetSuccess.editOtp.editOtp2 .inputRow .inputCtrl {
        font-size: 16px;
        height: 65px;
        text-align: center;
        padding: 5px
    }

@media (max-width: 991px) {
    .modalWidetSuccess.editOtp.editOtp2 .inputRow .inputCtrl {
        height: 55px
    }
}

.modalWidetSuccess.editOtp.editOtp2 .invalid .accoList .inputCtrl {
    border: 1px solid #B80000
}

.modalWidetSuccess.editOtp.editOtp2 .invalid .otpDiv {
    font-size: 14px;
    font-weight: 300;
    color: #B80000;
    text-align: center
}

.modalWidetSuccess.editOtp.editScss .modalRow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.modalWidetSuccess.editOtp.editScss .pic {
    margin-bottom: 15px
}

.modalWidetSuccess.editOtp.editScss .cmnDiv {
    gap: 12px
}

.modalWidetSuccess.editOtp .modalRow {
    max-width: 493px;
    width: 100%;
    padding: 32px;
    border-radius: 8px;
    min-height: 366px
}

.modalWidetSuccess.editOtp .pic {
    width: 81px;
    height: 81px;
    border-radius: 50%;
    display: flex;
    margin-bottom: 23px;
    margin-inline: auto
}

    .modalWidetSuccess.editOtp .pic img {
        width: 100%
    }

.modalWidetSuccess.editOtp .editor-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--black);
    text-align: center
}

.modalWidetSuccess.editOtp p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--black);
    text-align: center;
    margin: 0
}

    .modalWidetSuccess.editOtp p strong {
        font-weight: 500
    }

.modalWidetSuccess.editOtp .cmnDiv {
    display: flex;
    flex-direction: column;
    gap: 17px
}

.modalWidetSuccess.editOtp .inputRow .inputCtrl {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #707070;
    height: 46px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 5px 20px
}

.modalWidetSuccess.editOtp .btnGrp {
    display: flex
}

.modalWidetSuccess.editOtp .closeBtn {
    width: 24px;
    height: 24px;
    right: 17px;
    top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: white;
    transition: ease-in-out 0.4s;
    border-radius: 8px;
    z-index: 1
}

    .modalWidetSuccess.editOtp .closeBtn:hover {
        background-color: #ededed
    }

.modalWidetSuccess.editOtp .cmnBtn {
    border: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    height: 42px;
    border: none;
    color: var(--white);
    width: 124px;
    background-color: #6fda9d;
    border-radius: 4px;
    padding: 0px 20px 0px 20px;
    cursor: pointer;
    margin-inline: auto
}

    .modalWidetSuccess.editOtp .cmnBtn:hover {
        background-color: #7878ef
    }

.modalWidetSuccess.editOtp .divSplt {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    row-gap: 0;
    align-items: center
}

    .modalWidetSuccess.editOtp .divSplt .cmnBtnEdt {
        display: flex;
        padding: 4px 6px;
        align-items: flex-start;
        gap: 7px;
        border-radius: 8px;
        background: #EDF8FF;
        color: #057DC4;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        border: none;
        transition: ease-in-out 0.4s
    }

        .modalWidetSuccess.editOtp .divSplt .cmnBtnEdt span {
            display: flex
        }

.modalWidetSuccess.editOtp .otpDiv {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: var(--black);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center
}

    .modalWidetSuccess.editOtp .otpDiv span {
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
        color: #057DC4
    }

.modalWidetOTP {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9995;
    pointer-events: none;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s;
    -webkit-transform: translate3d(0, 102%, 0);
    transform: translate3d(0, 102%, 0);
    box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2);
    opacity: 0
}

    .modalWidetOTP.modalWidetSub .infoModal {
        max-width: 1003px !important;
        width: 100%;
        box-shadow: 0 0px 8px #d4cece
    }

@media (max-width: 680px) {
    .modalWidetOTP.modalWidetSub .infoModal {
        width: 90%
    }
}

.modalWidetOTP.modalWidetSub .modalRow {
    padding: 21px 32px
}

@media (max-width: 480px) {
    .modalWidetOTP.modalWidetSub .modalRow {
        padding: 20px
    }
}

.modalWidetOTP.modalWidetSub .instructions {
    padding: 0;
    margin: 0;
    background-color: var(--white)
}

    .modalWidetOTP.modalWidetSub .instructions p {
        text-align: left;
        color: #434343
    }

    .modalWidetOTP.modalWidetSub .instructions ul {
        margin: 32px 0 0
    }

@media (max-width: 480px) {
    .modalWidetOTP.modalWidetSub .instructions ul {
        margin: 15px 0 0
    }
}

.modalWidetOTP.modalWidetSub .instructions .title {
    padding: 25px 0 20px
}

@media (max-width: 480px) {
    .modalWidetOTP.modalWidetSub .instructions .title {
        padding: 10px 0 11px
    }
}

.modalWidetOTP .modalRow {
    padding: 34px;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px #959595;
    z-index: 1
}

    .modalWidetOTP .modalRow.infoModal {
        max-width: 501px;
        width: 100%;
        height: auto
    }

@media (max-width: 680px) {
    .modalWidetOTP .modalRow.infoModal {
        width: 90%
    }
}

.modalWidetOTP .modalRow h3, .modalWidetOTP .modalRow h4, .modalWidetOTP .modalRow h4 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 26px;
    color: #6FDA9D;
    margin-bottom: 2px
}

.modalWidetOTP .modalRow .Failure {
    color: #EB6463 !important
}

.modalWidetOTP .modalRow .verifyStatus {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    color: #000;
    margin: 15px 0px
}

.modalWidetOTP .modalRow p {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1px;
    color: #434343;
    margin: 15px 0px
}

.modalWidetOTP .modalRow .enterOtp {
    text-align: center;
    max-width: 250px;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    flex-direction: column
}

    .modalWidetOTP .modalRow .enterOtp input {
        border-bottom: dashed #e7e7e7;
        border-top: transparent;
        border-left: transparent;
        border-right: transparent;
        margin: 10px 0px;
        text-align: center
    }

        .modalWidetOTP .modalRow .enterOtp input::placeholder {
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 20px;
            color: #000
        }

.modalWidetOTP .modalRow .buttonRow {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 10px
}

    .modalWidetOTP .modalRow .buttonRow .cmnBtn {
        border: none;
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        height: 40px;
        border: none;
        color: white;
        width: 120px;
        box-shadow: 0 0px 8px #d4cece;
        background-color: #6fda9d;
        border-radius: 4px;
        padding: 0px 20px 0px 20px;
        cursor: pointer
    }

        .modalWidetOTP .modalRow .buttonRow .cmnBtn:hover {
            background-color: #7878ef;
            color: var(--white)
        }

    .modalWidetOTP .modalRow .buttonRow .cmnBtnOtp {
        border: none;
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        height: 40px;
        border: none;
        color: white;
        box-shadow: 0 0px 8px #d4cece;
        background-color: #e69c00;
        border-radius: 4px;
        cursor: pointer;
        padding: 0px 20px 0px 20px
    }

        .modalWidetOTP .modalRow .buttonRow .cmnBtnOtp:hover {
            background-color: #7878ef;
            color: var(--white)
        }

.modalWidetOTP .modalRow .statusPic {
    text-align: center;
    margin-bottom: 13px;
    display: flex;
    justify-content: center;
    text-align: center
}

    .modalWidetOTP .modalRow .statusPic .successImg {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/success.jpg)
    }

    .modalWidetOTP .modalRow .statusPic .FailureImg {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/Failure.jpg)
    }

    .modalWidetOTP .modalRow .statusPic .otpVerified {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/otplock.svg)
    }

    .modalWidetOTP .modalRow .statusPic .otp {
        height: 100px;
        width: 100px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/otp.svg)
    }

.modalWidetOTP .modalRow.acceptJobModal .statusPic {
    margin-bottom: 18px
}

.modalWidetOTP .modalRow.acceptJobModal h4 {
    font-size: 18px;
    color: var(--theme-text-colour);
    margin-bottom: 6px;
    line-height: 24px
}

.modalWidetOTP .modalRow.acceptJobModal p {
    max-width: 355px;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin: auto
}

.modalWidetOTP .modalRow.acceptJobModal textarea {
    width: 100%;
    border: 1px solid #DDDDDD;
    padding: 14px;
    border-radius: 4px;
    background-color: transparent;
    outline: none
}

.modalWidetOTP .modalBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    opacity: 0;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.5s;
    transition: opacity 0.6s, transform 0.5s;
    -webkit-transform: translate3d(0, 102%, 0);
    transform: translate3d(0, 102%, 0);
    box-shadow: 0 3px 5px 0 rgba(32,33,36,0.2)
}

.modalWidetOTP.open {
    opacity: 1;
    pointer-events: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

    .modalWidetOTP.open .modalBg {
        opacity: 0.5;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

.modalWidetOTP .closeBTN {
    position: relative
}

    .modalWidetOTP .closeBTN .closeBtn {
        cursor: pointer;
        width: 65px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 490px;
        background-color: white;
        top: -155px;
        transition: ease-in-out 0.4s;
        border-radius: 8px;
        z-index: 1
    }

@media (max-width: 680px) {
    .modalWidetOTP .closeBTN .closeBtn {
        width: 25px;
        height: 25px;
        left: 400px;
        top: -155px;
        z-index: 999;
        border-radius: 50%
    }
}

@media (max-width: 480px) {
    .modalWidetOTP .closeBTN .closeBtn {
        left: 300px
    }
}

@media (max-width: 375px) {
    .modalWidetOTP .closeBTN .closeBtn {
        left: 230px;
        top: -170px
    }
}

.modalWidetOTP .closeBTN .closeBtn svg rect {
    fill: var(--primary)
}

.modalWidetOTP .closeBTN .closeBtn:hover {
    background-color: #7878ef
}

    .modalWidetOTP .closeBTN .closeBtn:hover svg path {
        fill: var(--white)
    }

.quickSearch .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url(../images/searchArrowAdv.png);
    background-position: center center;
    background-repeat: no-repeat;
    top: 8px;
    right: 8px
}

.slider.slider-horizontal .slider-track {
    margin-top: 0px !important
}

.slider.slider-horizontal .slider-handle {
    margin-left: 0 !important
}

.modalRowWarn {
    height: 330px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .modalRowWarn h3 {
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        color: #434343;
        text-align: center
    }

    .modalRowWarn .form-group {
        width: 100%
    }

    .modalRowWarn .inputRow .inputCtrl {
        height: 48px
    }

    .modalRowWarn .btnGroup {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px
    }

        .modalRowWarn .btnGroup .editor-submit {
            max-width: 130px;
            margin: auto 10px
        }

            .modalRowWarn .btnGroup .editor-submit:hover {
                background-color: var(--theme-colour2)
            }

            .modalRowWarn .btnGroup .editor-submit.close-popup {
                color: var(--theme-colour1) !important;
                background-color: var(--white) !important;
                border: 1px solid var(--theme-colour1) !important
            }

                .modalRowWarn .btnGroup .editor-submit.close-popup:hover {
                    color: var(--white) !important;
                    background-color: var(--theme-colour2)
                }

.protected {
    display: inline-block !important;
    position: relative
}

    .protected::after {
        background: url(../images/photo-overlay.png) no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: repeat;
        content: '';
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1
    }

    .protected::before {
        background: url(../images/photo-overlayLock.svg) no-repeat;
        background-position: center center;
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        content: '';
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2
    }

.profileDetails {
    padding-top: 8px;
    background-color: var(--lightBg)
}

    .profileDetails .profileDetailSection {
        display: grid;
        grid-template-columns: 1fr 280px;
        column-gap: 12px
    }

@media (max-width: 991px) {
    .profileDetails .profileDetailSection {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .mainBg {
    background-color: var(--white);
    border-radius: 5px;
    padding: 18px 20px;
    margin-bottom: 6px
}

    .profileDetails .profileDetailSection .profileDetailArea .mainBg:last-child {
        margin-bottom: 32px
    }

    .profileDetails .profileDetailSection .profileDetailArea .mainBg .CmnListSec .listArea ul li span a {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        margin-bottom: 12px;
        color: white;
        padding: 4px;
        cursor: pointer;
        margin-left: 10px
    }

        .profileDetails .profileDetailSection .profileDetailArea .mainBg .CmnListSec .listArea ul li span a:hover {
            background-color: #6fda9d
        }

.profileDetails .profileDetailSection .profileDetailArea .mainBG {
    border-radius: 5px;
    padding: 0px 0px 4px 0px
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead {
    display: grid;
    grid-template-columns: 287px 1fr;
    column-gap: 20px
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead {
        grid-template-columns: 1fr;
        row-gap: 20px
    }
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages {
        overflow: hidden;
        margin-bottom: 20px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget {
    display: flex
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget {
        display: block;
        margin-bottom: 8px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideView {
    position: relative
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vLarge {
    position: relative;
    display: none
}

@media (min-width: 768px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vLarge {
        display: flex !important
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vLarge div .thumbList a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 7px;
    right: 0;
    left: 0
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vLarge div .thumbList a span {
        color: #c52525;
        background-color: white;
        padding: 4px 6px;
        border-radius: 6px
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall {
    position: relative;
    display: none
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall {
        display: block;
        justify-content: center
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .slick-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .slick-dots li {
        margin: 0 4px
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .smMainSNav {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 46px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: solid 1px #f3f3f3;
    background-color: #fff;
    z-index: 5;
    overflow: hidden
}

@media (min-width: 1367px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .smMainSNav.smMainSNavPrev {
        width: 37px;
        height: 37px;
        left: -50px
    }
}

@media (max-width: 1366px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .smMainSNav.smMainSNavPrev {
        left: 0;
        -webkit-border-top-right-radius: 35px;
        -webkit-border-bottom-right-radius: 35px;
        -moz-border-radius-topright: 35px;
        -moz-border-radius-bottomright: 35px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .smMainSNav.smMainSNavPrev:hover {
    box-shadow: 5px 2px 8px 0 rgba(32,33,36,0.28)
}

@media (min-width: 1367px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .smMainSNav.smMainSNavNext {
        width: 37px;
        height: 37px;
        right: -65px
    }
}

@media (max-width: 1366px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .smMainSNav.smMainSNavNext {
        right: 0;
        -webkit-border-top-left-radius: 35px;
        -webkit-border-bottom-left-radius: 35px;
        -moz-border-radius-topleft: 35px;
        -moz-border-radius-bottomleft: 35px;
        border-top-left-radius: 35px;
        border-bottom-left-radius: 35px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .vSmall .smMainSNav.smMainSNavNext:hover {
    box-shadow: -5px 2px 8px 0 rgba(32,33,36,0.28)
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb {
    width: 58px
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .thumbList {
        width: 83px
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .thumbList .thumbImage {
            width: 57px;
            height: 57px;
            padding-top: 73px;
            display: block;
            position: relative;
            padding: 1px;
            background-color: #fff
        }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .thumbList .thumbImage img {
                position: absolute;
                margin: auto;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                max-width: 100%;
                max-height: 100%;
                vertical-align: top;
                border: solid 1px #fff;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .thumbList .thumbImage:hover img {
                border-color: #E69C00
            }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .slick-arrow {
        width: 58px;
        height: 20px;
        border: none;
        background-color: #F0F0F0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .slick-arrow:hover {
            background-color: var(--lightBg)
        }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .slick-arrow:hover svg path {
                fill: var(--theme-colour1)
            }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .slick-arrow.slick-prev {
            margin-bottom: 5px;
            border-radius: 4px
        }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .slick-arrow.slick-next {
            margin-top: 0px;
            border-radius: 4px
        }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .slick-arrow.slick-next svg {
                transform: rotate(-180deg)
            }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .active .thumbList .thumbImage img {
        border-color: #E69C00;
        border-radius: 5px
    }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideThumb .draggable {
        overflow: hidden !important
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .viewWidget {
    width: 185px;
    height: 274px;
    display: block;
    position: relative;
    border: solid 1px #f5f5f5;
    border-radius: 9px
}

@media (min-width: 768px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .viewWidget {
        margin-left: 12px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .viewWidget img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
    opacity: 0;
    border-radius: 9px;
    width: 100%;
    height: 100%;
    object-fit: cover
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .viewWidget img.active {
        opacity: 1
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .magnify {
    position: relative
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .magnify .large {
        z-index: 99;
        width: 175px;
        height: 175px;
        position: absolute;
        border-radius: 100%;
        display: none;
        background-repeat: no-repeat;
        box-shadow: 0 0 0 7px rgba(255,255,255,0.85),0 0 7px 7px rgba(0,0,0,0.25),inset 0 0 40px 2px rgba(0,0,0,0.25)
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner {
    width: 450px
}

@media (min-width: 992px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner {
        margin-left: 15px
    }
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner {
        width: 100%
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner .bannerList .bannerImage {
    display: block;
    position: relative
}

@media (min-width: 768px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner .bannerList .bannerImage img {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 100%;
        vertical-align: top
    }
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner .bannerList .bannerImage img {
        max-width: 100%
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner .owl-dots {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner .owl-dots .owl-dot {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        position: relative;
        width: 12px;
        height: 12px;
        margin: 0 3px;
        background-color: transparent;
        border: none
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner .owl-dots .owl-dot span {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #000000;
            opacity: 0.3;
            margin: 0 8px;
            bottom: 0
        }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileImages .dBannerWidget .slideBanner .owl-dots .owl-dot.active span {
            width: 12px;
            height: 12px;
            background-color: var(--theme-colour1);
            opacity: 1
        }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl {
    position: relative
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        column-gap: 8px
    }

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec {
        position: relative;
        margin-bottom: 10px
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec {
        position: relative;
        margin-bottom: 10px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .print {
    font-size: 11px;
    font-weight: 400;
    line-height: 13px;
    color: #707070;
    width: 107px;
    height: 44px;
    background-color: var(--lightBg);
    border-radius: 22px;
    display: flex;
    column-gap: 10px;
    align-items: center;
    padding: 5px;
    justify-content: center;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .print {
        margin-bottom: 10px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .print svg {
    width: 23px
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .print svg path {
        fill: var(--theme-colour1)
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .print span {
    width: 33px
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .print:hover {
    color: var(--theme-colour1);
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17);
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17)
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro {
    font-size: 11px;
    font-weight: 400;
    line-height: 13px;
    color: #707070;
    width: 107px;
    height: 44px;
    background-color: var(--white);
    border: 1px solid #DDDDDD;
    border-radius: 22px;
    display: flex;
    column-gap: 4px;
    align-items: center;
    padding: 3px 13px 3px 3px;
    justify-content: center;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro span {
        width: 33px
    }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro img {
        border-radius: 50%;
        width: 38px;
        height: 38px;
        max-width: 38px;
        max-height: 38px
    }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro svg {
        transition: ease-in-out 0.4s
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro svg path {
            transition: ease-in-out 0.4s
        }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro:hover {
        color: var(--theme-colour1);
        -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17);
        -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17);
        box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.17)
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro:hover svg path {
            fill: var(--theme-colour1)
        }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro.prevPro {
        padding: 3px 3px 3px 13px
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .printSec .nxtPro.prevPro svg {
            transform: rotate(-180deg)
        }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .recentlyJoined {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--white);
    padding: 6px 26px 6px 15px;
    background-color: #5BA57B;
    display: inline-block;
    border-radius: 0 5px 5px 0;
    clip-path: polygon(0% 0%, 100% 0, 93% 51%, 100% 100%, 0% 100%);
    margin-top: 20px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .recentlyJoined {
        margin-top: 10px
    }
}

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .recentlyJoined.recentlyJoinedno {
        display: none
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .crystalMember {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--white);
    padding: 5px 9px;
    background-color: #5BA57B;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    margin-top: 20px;
    height: 40px;
    width: 135px;
    background: linear-gradient(to bottom, var(--theme-colour1) 0%, var(--theme-colour2) 100%)
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .crystalMember {
        margin-top: 10px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .crystalMember svg {
    margin-right: 4px
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .name {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    color: #434343;
    text-transform: uppercase;
    margin: 18px 0
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .name {
        margin: 18px 0 18px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .name .spc {
    padding: 0 14px;
    color: var(--theme-colour1)
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .name span .p-verified {
    display: inline-block;
    background: none;
    background-position: center;
    width: 20px;
    height: 17px;
    background-size: contain;
    margin-bottom: -1px;
    margin-left: 4px
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .name span .p-verified svg g {
        fill: var(--theme-colour1)
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated {
    margin-bottom: 22px
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        list-style-type: none
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: var(--c2d);
            margin-right: 16px;
            margin-bottom: 5px
        }

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li {
        margin-bottom: 10px
    }
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li {
        margin-right: 12px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .grdn {
    color: var(--theme-colour1);
    margin-left: 6px
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .online, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope {
    color: #6FDA9D;
    display: flex;
    align-items: center;
    column-gap: 8px;
    cursor: pointer
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .online:hover .hovr, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline:hover .hovr, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope:hover .hovr {
        text-decoration: underline
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline {
    color: #E69C00
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope {
    color: #EB6463
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope.gray {
        color: #434343
    }

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .cmnBtn {
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
    color: var(--theme-colour1);
    height: 32px;
    border-radius: 22px;
    border: 1px solid var(--theme-colour1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    width: fit-content;
    margin-top: 26px
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .cmnBtn:hover {
        color: var(--white);
        background-color: var(--theme-colour1)
    }

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .cmnBtn.cmnBtnhid {
        display: none
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget {
        display: none
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul {
        margin-bottom: 10px
    }
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul {
        margin-bottom: 0px
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul {
        margin-bottom: 10px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    position: relative;
    margin-bottom: 20px;
    padding-left: 18px
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul li {
        margin-bottom: 10px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0px;
    width: 10px;
    height: 15px;
    background-image: url(../images/rightArrow.png);
    background-position: center center;
    background-repeat: no-repeat
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileWidget ul li:last-child {
    margin-bottom: 0px
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt {
    grid-template-columns: 251px 1fr;
    column-gap: 32px
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt {
        grid-template-columns: 1fr;
        row-gap: 20px
    }
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages {
        margin-bottom: 0;
        max-width: 251px;
        width: 100%
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget {
    grid-template-columns: 1fr
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget ul:last-child {
        margin-top: 20px
    }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails {
        display: flex;
        margin-top: 20px;
        column-gap: 12px;
        flex-wrap: wrap;
        row-gap: 13px
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .MobileNumber {
            display: flex;
            align-items: center;
            column-gap: 10px;
            padding: 8px 16px;
            border-radius: 5px;
            border: 1px solid #DEDEDE;
            position: relative
        }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .MobileNumber:hover .status {
                opacity: 1;
                pointer-events: all
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .MobileNumber .verifyLogo {
                height: 10px;
                width: 30px;
                background-repeat: no-repeat;
                background-image: url(../images/tick.svg)
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .MobileNumber .notVerify {
                height: 30px;
                width: 30px;
                background-repeat: no-repeat;
                background-image: url(../images/waring.svg)
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .MobileNumber .status {
                font-size: 14px;
                font-weight: 400;
                line-height: 19px;
                color: #fff;
                background-color: #6FDA9D;
                border-radius: 5px;
                height: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 0;
                top: -37px;
                min-width: 94px;
                padding: 5px;
                opacity: 0;
                pointer-events: none;
                transition: 0.2s ease-in-out;
                -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
                -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
                box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16)
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .MobileNumber .verifyDiv .cmnBtn {
                color: var(--theme-colour1);
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
                fill: #F2FAFF;
                border: 1px solid var(--theme-colour1);
                min-width: 77px;
                height: 32px;
                width: fit-content;
                border-radius: 4px;
                margin-top: 0
            }

                .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .MobileNumber .verifyDiv .cmnBtn:hover {
                    color: var(--white)
                }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .emailVerify {
            display: flex;
            align-items: center;
            column-gap: 10px;
            padding: 8px 16px;
            border-radius: 5px;
            border: 1px solid #DEDEDE;
            position: relative
        }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .emailVerify:hover .status {
                opacity: 1;
                pointer-events: all
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .emailVerify .verifyLogo {
                height: 10px;
                width: 30px;
                background-repeat: no-repeat;
                background-image: url(../images/tick.svg)
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .emailVerify .notVerify {
                height: 30px;
                width: 30px;
                background-repeat: no-repeat;
                background-image: url(../images/waring.svg)
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .contactDetails .emailVerify .status {
                font-size: 14px;
                font-weight: 400;
                line-height: 19px;
                color: #fff;
                background-color: #6FDA9D;
                border-radius: 5px;
                height: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 0;
                top: -37px;
                min-width: 94px;
                padding: 5px;
                opacity: 0;
                pointer-events: none;
                transition: 0.2s ease-in-out;
                -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
                -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
                box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16)
            }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .ulGrp {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px
    }

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .ulGrp {
        display: none
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileDtl .profileWidget .ulGrp {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages {
    position: relative
}

    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .pic {
        width: 251px;
        height: 319px;
        border-radius: 9px
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .pic img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 9px
        }

    .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .uploadAreaBtn {
        display: flex;
        align-items: center;
        position: absolute;
        overflow: hidden;
        margin: 14px 0px 12px;
        justify-content: center;
        bottom: 12px;
        left: 0;
        right: 0;
        overflow: hidden;
        width: 190px;
        margin: auto
    }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .uploadAreaBtn:hover .uploadBtn {
            color: var(--white);
            border: 1px solid var(--theme-colour1);
            background-color: var(--theme-colour1)
        }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .uploadAreaBtn:hover .uploadBtn svg path {
                fill: var(--white)
            }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .uploadAreaBtn input[type="file"] {
            cursor: pointer;
            font-size: 100px;
            height: 100%;
            filter: alpha(opacity=1);
            -moz-opacity: 0.01;
            opacity: 0.01;
            position: absolute;
            right: 0;
            top: 0
        }

        .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .uploadAreaBtn .uploadBtn {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            cursor: pointer;
            color: var(--theme-colour1);
            background-color: var(--white);
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            column-gap: 6px;
            border-radius: 4px;
            transition: ease-in-out 0.4s;
            width: auto;
            outline: none;
            padding: 5px 20px;
            border: 1px solid var(--white)
        }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .uploadAreaBtn .uploadBtn:hover {
                color: var(--white);
                border: 1px solid var(--theme-colour1);
                background-color: var(--theme-colour1)
            }

            .profileDetails .profileDetailSection .profileDetailArea .profileHead.profileHeadEdt .profileImages .uploadAreaBtn .uploadBtn svg path {
                fill: var(--theme-colour1);
                transition: ease-in-out 0.4s
            }

.profileDetails .profileDetailSection .profileDetailArea .matchScr {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr {
        align-items: baseline
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec {
    display: grid;
    grid-template-columns: 467px 1fr;
    align-items: center;
    justify-content: space-between
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        row-gap: 4px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .scoreSec {
    display: grid;
    grid-template-columns: 252px 1fr
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .scoreSec {
        width: 100%
    }
}

@media (max-width: 550px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .scoreSec {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        row-gap: 4px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro {
    background-color: var(--white);
    padding: 14px 6px;
    height: 80px;
    border-radius: 5px;
    display: flex;
    align-items: baseline;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro {
        width: 100%;
        margin-left: 0
    }
}

@media (max-width: 1226px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro {
        width: 100%
    }
}

@media (max-width: 1154px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro {
        width: 100%;
        width: 100%
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 12px;
    color: var(--c2d);
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 8px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro h4 {
        flex-direction: column;
        align-items: baseline
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro h4 span {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: #FAFAFA;
    background-color: #E98A89;
    border-radius: 4px;
    padding: 5px 10px;
    height: 35px;
    display: flex;
    align-items: center
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro h4 span {
        margin-bottom: 15px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .likePro p {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--c2d);
    margin: 0;
    text-align: left
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec {
    background-color: var(--white);
    display: grid;
    grid-template-columns: 1fr 30px;
    column-gap: 12px;
    height: 80px;
    border-radius: 5px;
    padding: 28px 20px 28px 10px;
    margin-left: 10px
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec {
        width: 100%;
        margin-left: 0px
    }
}

@media (max-width: 1154px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec {
        width: 100%;
        width: 100%
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec {
        flex-direction: column;
        align-items: baseline;
        height: auto;
        padding: 15px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

@media (max-width: 480px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec ul {
        flex-direction: column;
        align-items: baseline
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    position: relative;
    padding-left: 18px;
    display: flex;
    align-items: center;
    column-gap: 8px;
    cursor: pointer
}

@media (max-width: 1154px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec ul li {
        padding-left: 10px
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec ul li {
        margin-bottom: 10px;
        padding-left: 0px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec ul li .iconSec {
    width: 32px;
    height: 32px;
    background-color: var(--lightBg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec ul li .iconSec svg path {
        fill: var(--theme-colour1)
    }

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail {
    position: relative
}

    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dot {
        width: 32px;
        height: 32px;
        background-color: var(--lightBg);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: ease-in-out 0.4s
    }

        .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dot .remove {
            display: none
        }

        .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dot:hover svg circle {
            fill: var(--theme-colour1)
        }

        .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dot svg {
            transition: ease-in-out 0.4s
        }

            .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dot svg circle {
                transition: ease-in-out 0.4s
            }

        .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dot .inActive2 {
            display: none
        }

            .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dot .inActive2.addIcn {
                display: block
            }

    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dotDrop {
        padding: 6px 4px;
        background-color: var(--lightBg);
        border-radius: 4px;
        min-width: 148px;
        position: absolute;
        right: 0;
        top: 34px;
        display: none;
        transition: ease-in-out 0.4s;
        z-index: 11
    }

        .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dotDrop.open {
            display: block
        }

        .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dotDrop .dropList {
            font-size: 12px;
            font-weight: 400;
            line-height: 14px;
            color: var(--c2d);
            min-height: 30px;
            display: flex;
            align-items: center;
            padding: 5px 12px;
            background-color: var(--white);
            border-radius: 4px;
            margin-bottom: 4px;
            z-index: 1;
            cursor: pointer;
            transition: ease-in-out 0.4s
        }

            .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dotDrop .dropList:last-child {
                margin-bottom: 0px
            }

            .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .intSec .dotSecProfileSetail .dotDrop .dropList:hover {
                color: #E69C00;
                text-decoration: underline
            }

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec.matchScrSec2 {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    padding: 10px 50px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec.matchScrSec2 {
        padding: 10px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec.matchScrSec2 .signUp {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 147px;
    height: 41px;
    background-color: var(--theme-colour1);
    border-radius: 5px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: ease-in-out 0.4s
}

    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec.matchScrSec2 .signUp:hover {
        background: var(--theme-colour2)
    }

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score {
    display: flex;
    position: relative
}

@media (max-width: 375px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score {
        width: 100%
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score .scoreRange {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 165px;
    bottom: 6px;
    color: white
}

@media (max-width: 375px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score .scoreRange {
        left: 204px;
        bottom: 16px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score .scoreRange span {
    font-size: 28px;
    font-weight: 500;
    line-height: 1px
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score .scoreRange label {
    font-size: 12px;
    font-weight: 500;
    line-height: 40px
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score img {
    border-radius: 5px;
    box-shadow: 0px 0px 6px #a2a29f
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .matchScr .matchScrSec .score img {
        width: 100%
    }
}

.profileDetails .profileDetailSection .profileDetailArea .matchScr.matchScr2 {
    grid-template-columns: 1fr
}

.profileDetails .profileDetailSection .profileDetailArea .aboutMySelf {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 8px
}

    .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt {
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        color: #434343
    }

        .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 18px;
            font-weight: 500;
            line-height: 20px;
            color: var(--c2d);
            padding-top: 2px;
            min-height: 32px
        }

            .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span i {
                font-size: 12px;
                font-weight: 400;
                line-height: 20px;
                font-style: normal;
                text-transform: capitalize;
                display: inline-block;
                cursor: pointer;
                margin-left: 8px
            }

                .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span i.pending {
                    color: orange
                }

                    .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span i.pending:before {
                        content: '(pending)'
                    }

                .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span i.approved {
                    color: green
                }

                    .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span i.approved:before {
                        content: '(approved)'
                    }

                .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span i.rejected {
                    color: #f00
                }

                    .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span i.rejected:before {
                        content: '(rejected)'
                    }

            .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span .status {
                font-size: 12px;
                font-weight: 500;
                line-height: 14px;
                color: #FFF;
                border-radius: 25px;
                display: flex;
                padding: 8px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                width: fit-content;
                margin-bottom: 0
            }

                .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span .status.blu {
                    background: var(--theme-colour1)
                }

                .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .txt span .status.red {
                    background: #C92E43
                }

    .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .btnGroup {
        display: flex;
        align-items: center;
        justify-content: end;
        column-gap: 8px;
        row-gap: 8px;
        margin: 8px 0
    }

        .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .btnGroup .save, .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .btnGroup .cancel, .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .CmnListSec .listAreaFormArea .btnGroup .cancel, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .aboutMySelf .btnGroup .cancel {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #FAFAFA;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 96px;
            height: 46px;
            background-color: var(--theme-colour1);
            border-radius: 5px;
            cursor: pointer;
            border: none;
            outline: none;
            transition: ease-in-out 0.4s
        }

            .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .btnGroup .save:hover, .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .btnGroup .cancel:hover {
                background: var(--theme-colour2)
            }

        .profileDetails .profileDetailSection .profileDetailArea .aboutMySelf .btnGroup .cancel {
            color: #2D2D2D;
            background-color: var(--lightBg)
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec:hover .IcnGroup {
    display: flex
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .IcnGroup {
    display: none
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .titleArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    margin-bottom: 15px;
    min-height: 40px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listTextareaFormLow {
    padding: 0px 40px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    color: var(--c2d);
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 8px;
    align-items: center
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 40px
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea {
        grid-template-columns: 1fr
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea {
        padding-left: 0
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea.listAreaSng {
    grid-template-columns: 1fr
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul {
    padding: 0;
    margin: 0
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul.borderLft {
        border-left: 1px dotted #DDDDDD;
        padding-left: 31px
    }

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul.borderLft {
        padding: 0;
        border-left: none
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #434343;
    display: grid;
    grid-template-columns: 198px 1px 1fr;
    column-gap: 16px;
    margin-bottom: 5px;
    word-break: break-word
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li {
        grid-template-columns: 138px 1px 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li:last-child {
    margin-bottom: 0px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li .ansSec img {
    width: 18px;
    margin-left: 10px;
    cursor: pointer
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li .ansSec .edit-section .upload-horo {
    width: 60% !important;
    padding: 6px 0px !important;
    font-size: 12px !important
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li .editArea {
    display: flex;
    align-items: center;
    column-gap: 2px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li .editArea svg {
        cursor: pointer
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li .editArea svg:hover path {
            fill: #daa0a0
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li.editIcon {
    grid-template-columns: 198px 1px 1fr 60px !important
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea ul li.editIcon {
        grid-template-columns: 138px 1px 1fr 60px !important
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea.flWth {
    grid-template-columns: 1fr
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea.flWth ul {
        border-top: 1px dotted #DDDDDD;
        padding-top: 18px;
        margin-top: 20px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea.flWth ul li strong {
            font-weight: 500;
            display: inline
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea.flWth ul li strong .num {
                font-size: 14px;
                font-weight: 400;
                line-height: 26px;
                color: #434343;
                display: inline;
                margin-right: 7px
            }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listArea.flWth ul li .ansSec {
            color: var(--c70)
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard {
    padding-left: 40px;
    padding-top: 40px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard {
        padding-left: 0
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard h4 {
    margin-bottom: 20px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm {
    margin-right: 20px;
    display: inline-block;
    width: 370px;
    margin-bottom: 20px
}

@media (max-width: 480px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm {
        margin-right: 0;
        width: 320px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table {
    width: 100%;
    background: #fff
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr {
        border: 1px solid #ddd
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td {
            position: relative;
            min-width: 70px;
            height: 70px;
            border: 1px solid #ddd
        }

@media (max-width: 480px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td {
        min-width: 70px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-bu .p-ltrs.horo-bu {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-cha .p-ltrs.horo-cha {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-gu .p-ltrs.horo-gu {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ku .p-ltrs.horo-ku {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-la .p-ltrs.horo-la {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ma .p-ltrs.horo-ma {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-maa .p-ltrs.horo-maa {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ra .p-ltrs.horo-ra {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-sa .p-ltrs.horo-sa {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-shi .p-ltrs.horo-shi {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-shu .p-ltrs.horo-shu {
    display: block
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs {
    backface-visibility: hidden;
    display: block;
    display: none;
    min-height: 20px;
    background-position: center !important;
    background-repeat: no-repeat;
    margin-bottom: 2px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-bu {
        background-image: url(../images/horo-bu.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-cha {
        background-image: url(../images/horo-cha.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-gu {
        background-image: url(../images/horo-gu.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ku {
        background-image: url(../images/horo-ku.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-la {
        background-image: url(../images/horo-la.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ma {
        background-image: url(../images/horo-ma.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-maa {
        background-image: url(../images/horo-maa.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ra {
        background-image: url(../images/horo-ra.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-sa {
        background-image: url(../images/horo-sa.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-shi {
        background-image: url(../images/horo-shi.jpg)
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-shu {
        background-image: url(../images/horo-shu.jpg)
    }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCard .p-table-wrap {
    overflow: auto
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited {
    padding-left: 40px;
    padding-top: 40px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited {
        padding-left: 0
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited select, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .filter-single select {
    border-radius: 20px;
    appearance: none;
    width: 100%;
    height: 20px;
    border: 1px solid var(--theme-colour2);
    padding-left: 10px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .horo-select {
    display: grid;
    grid-template-columns: 35% 1fr;
    grid-gap: 30px
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .horo-select {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-horo-grahanila-wrap .p-horo-itm {
        margin-right: 0;
        width: 320px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td {
    min-width: 70px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-bu {
    background-image: url(../images/horo-bu.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-cha {
    background-image: url(../images/horo-cha.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-gu {
    background-image: url(../images/horo-gu.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-ku {
    background-image: url(../images/horo-ku.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-la {
    background-image: url(../images/horo-la.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-ma {
    background-image: url(../images/horo-ma.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-maa {
    background-image: url(../images/horo-maa.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-ra {
    background-image: url(../images/horo-ra.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-sa {
    background-image: url(../images/horo-sa.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-shi {
    background-image: url(../images/horo-shi.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .horoscopeCardEdited .p-ltrs.horo-shu {
    background-image: url(../images/horo-shu.jpg)
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea {
    padding: 0 41px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea {
        padding: 0
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .btnGroup {
    display: flex;
    align-items: center;
    justify-content: end;
    column-gap: 8px;
    row-gap: 8px;
    margin: 8px 0
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .btnGroup .save, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .btnGroup .cancel {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #FAFAFA;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96px;
        height: 46px;
        background-color: var(--theme-colour1);
        border-radius: 5px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: ease-in-out 0.4s
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .btnGroup .save:hover, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .btnGroup .cancel:hover {
            background: var(--theme-colour2)
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .btnGroup .cancel {
        color: #2D2D2D;
        background-color: var(--lightBg)
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea .btnGroup .cancel:hover {
            color: var(--white)
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea.edit-LocationPref .select2-container {
    border: none !important
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea.edit-LocationPref .select2-selection.select2-selection--multiple {
    width: 100%;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--c2d);
    border: 1px solid #DDDDDD;
    background-color: var(--white);
    outline: none
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea.edit-LocationPref .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e8eff4;
    border: 1px solid #ddd;
    height: 24px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea.edit-LocationPref .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #ddd;
    color: #b1b1b1;
    height: 22px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaFormArea.edit-LocationPref .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    height: 22px;
    display: flex;
    align-items: center
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    column-gap: 31px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRowRgt {
    border-right: 1px dotted #DDDDDD
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec {
        grid-template-columns: 1fr
    }
}

@media (max-width: 1279px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow {
        margin-bottom: 16px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch {
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding: 16px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .searchDiv {
        position: relative
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .searchDiv .inputCtrl {
            width: 100%;
            height: 42px;
            border-radius: 4px;
            padding: 5px 12px 5px 46px;
            font-size: 14px;
            font-weight: 400;
            line-height: 26px;
            color: var(--c70);
            border: 1px solid #AEAEAE;
            background-color: var(--white);
            outline: none
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .searchDiv .inputCtrl::placeholder {
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: #707070
            }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .searchDiv .icn {
            position: absolute;
            left: 17px;
            top: 12px
        }

@-moz-document url-prefix() {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv {
        scrollbar-color: #b4b4b4 #f1f1f1;
        scrollbar-width: thin !important
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv {
    margin-top: 24px;
    height: 167px;
    overflow: auto
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv::-webkit-scrollbar {
        width: 8px;
        margin-left: 5px;
        left: 5px
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv::-webkit-scrollbar-track {
        background: #f1f1f1;
        box-shadow: none
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv::-webkit-scrollbar-thumb {
        background: #b4b4b4;
        box-shadow: none
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .titleDrop {
        font-size: 14px;
        font-weight: 500;
        line-height: 26px;
        color: var(--c2d);
        margin-bottom: 16px
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec {
        padding-inline: 7px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box {
            position: relative;
            padding-left: 0px;
            cursor: pointer;
            margin-bottom: 16px
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box:last-child {
                margin-bottom: 0
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box input[type="checkbox"] {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box label {
                display: flex;
                pointer-events: all;
                padding-left: 30px;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                color: #707070;
                position: relative;
                cursor: pointer
            }

                .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box label::before {
                    position: absolute;
                    left: 0;
                    top: 0px;
                    content: "";
                    width: 18px;
                    height: 18px;
                    background-color: var(--white) !important;
                    border: 2px solid #dddddd
                }

                .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box label::after {
                    opacity: 0;
                    position: absolute;
                    content: "";
                    left: 7px;
                    top: 3px;
                    width: 5px;
                    height: 10px;
                    transition: ease-in-out 0.4s;
                    border: solid #2e3191;
                    border-width: 0 2px 2px 0;
                    -webkit-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    transform: rotate(45deg)
                }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box input:checked ~ label::before {
                background-color: var(--theme-colour1) !important;
                border: 2px solid var(--theme-colour1)
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box input:checked ~ label::after {
                opacity: 1;
                border: solid var(--white);
                border-width: 0 2px 2px 0
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .formSearch .dropListDiv .dropListSec .check-box label {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                color: var(--c2d)
            }

@-moz-document url-prefix() {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList {
        scrollbar-color: #b4b4b4 #f1f1f1;
        scrollbar-width: thin !important
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList {
    border: 1px solid #DDDDDD;
    padding: 15px 13px;
    border-radius: 4px;
    height: 192px;
    overflow: auto
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList::-webkit-scrollbar {
        width: 8px;
        margin-left: 5px;
        left: 5px
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList::-webkit-scrollbar-track {
        background: #f1f1f1
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList::-webkit-scrollbar-thumb {
        background: #b4b4b4
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList ul {
        margin: 0;
        padding: 0
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList ul li {
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            color: var(--c2d);
            background-color: var(--light2Bg);
            padding: 9px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 5px;
            border-radius: 22px;
            margin-bottom: 6px;
            width: fit-content;
            max-width: 228px
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList ul li span {
                display: flex;
                cursor: pointer
            }

                .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.moreSec .formRow .degList ul li span svg path {
                    fill: var(--theme-colour1)
                }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.colSplit {
    grid-template-columns: 1fr
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.colSplit .formRow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        row-gap: 18px
    }

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.colSplit .formRow {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.colSplit .formRow .inputRow {
    margin-bottom: 0
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView2 .cmDtl {
    margin-bottom: -56px !important;
    z-index: 1;
    margin-left: 21px;
    margin-top: 30px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView2 .formRow {
    padding: 63px 21px 26px !important
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView {
    border-top: 1px dotted #DDDDDD;
    margin-top: 26px;
    padding-top: 17px;
    grid-template-columns: 1fr
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .subTilteText {
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        color: var(--theme-text-colour);
        border-radius: 5px;
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        padding: 4px 11px;
        height: 33px;
        width: fit-content;
        margin-bottom: -18px;
        z-index: 1;
        margin-left: 21px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .subTilteText span {
            color: red;
            margin-left: 2px
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .cmDtl {
        font-size: 14px;
        font-weight: 500;
        line-height: 26px;
        color: var(--theme-text-colour);
        margin-bottom: 10px
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow {
        padding: 46px 21px 26px;
        border-radius: 4px;
        border: 1px solid #DDDDDD
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            row-gap: 18px
        }

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp.inputGrpThree {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 15px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp.inputGrpThree {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow {
    margin-bottom: 0
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box {
            position: relative;
            padding-left: 0px;
            cursor: pointer;
            margin-bottom: 16px
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box:last-child {
                margin-bottom: 0
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box input[type="checkbox"] {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box label {
                display: flex;
                pointer-events: all;
                padding-left: 30px;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                color: #707070;
                position: relative;
                cursor: pointer
            }

                .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box label::before {
                    position: absolute;
                    left: 0;
                    top: 0px;
                    content: "";
                    width: 18px;
                    height: 18px;
                    background-color: var(--white) !important;
                    border: 2px solid #dddddd
                }

                .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box label::after {
                    opacity: 0;
                    position: absolute;
                    content: "";
                    left: 7px;
                    top: 3px;
                    width: 5px;
                    height: 10px;
                    transition: ease-in-out 0.4s;
                    border: solid #2e3191;
                    border-width: 0 2px 2px 0;
                    -webkit-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    transform: rotate(45deg)
                }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box input:checked ~ label::before {
                background-color: var(--theme-colour1) !important;
                border: 2px solid var(--theme-colour1)
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box input:checked ~ label::after {
                opacity: 1;
                border: solid var(--white);
                border-width: 0 2px 2px 0
            }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .formRow .inputGrp .inputRow .labelGrp .check-box label {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                color: var(--c2d)
            }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .btnGroup {
    margin-top: 14px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .btnGroup button {
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .btnGroup button.cancel:hover {
            color: var(--white)
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .btmSec {
    border-top: 1px dotted #DDDDDD;
    margin-top: 20px;
    padding-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .btmSec .titleSec {
        font-size: 14px;
        font-weight: 500;
        line-height: 26px;
        color: var(--c2d)
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .btmSec .titleSec span {
            display: block;
            font-size: 14px;
            font-weight: 400;
            line-height: 26px;
            color: var(--c70)
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.fullView .btmSec ul {
        display: flex;
        align-items: center;
        gap: 24px;
        margin: 0;
        padding: 0
    }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .InnerDiv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px
}

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .InnerDiv {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow {
    position: relative;
    margin-bottom: 16px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .inputLabel {
        font-size: 14px;
        font-weight: 400;
        line-height: initial;
        color: #434343;
        margin-bottom: 8px;
        display: block;
        position: relative
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .inputLabel span {
            color: red;
            margin-left: 2px
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .inputCtrl {
        width: 100%;
        height: 46px;
        border-radius: 4px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        outline: none
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .inputCtrl::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #707070
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .validateText {
        position: absolute;
        top: 71px;
        right: 5px;
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        color: #ff0000
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .validateText.validateText2 {
            right: auto
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .select2Ctrl .select2-container {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        width: 100% !important;
        border-radius: 4px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
            border: none !important;
            height: 46px;
            display: flex;
            align-items: center;
            outline: 0
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
                padding: 5px 12px;
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: #434343
            }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .select2-container--default .select2-selection--single {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        border-radius: 4px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none
        }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
            background-image: url(../images/dwnArrow2.png);
            background-position: center center;
            background-repeat: no-repeat;
            top: 10px;
            right: 8px
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listAreaForm.ListAreaDiv4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 h4 {
    margin: 10px 0px 10px 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRowRgt {
    border-right: 1px dotted #DDDDDD
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .InnerDiv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px
}

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .InnerDiv {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow {
    position: relative;
    margin-bottom: 16px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .inputLabel {
        font-size: 14px;
        font-weight: 400;
        line-height: initial;
        color: #434343;
        margin-bottom: 8px;
        display: block;
        position: relative
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .inputLabel span {
            color: red;
            margin-left: 2px
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .inputCtrl {
        width: 100%;
        height: 46px;
        border-radius: 4px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        outline: none
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .inputCtrl::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #707070
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .validateText {
        position: absolute;
        top: 71px;
        right: 5px;
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        color: #ff0000
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .validateText.validateText2 {
            right: auto
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .select2Ctrl .select2-container {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        width: 100% !important;
        border-radius: 4px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
            border: none !important;
            height: 46px;
            display: flex;
            align-items: center;
            outline: 0
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
                padding: 5px 12px;
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: #434343
            }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .select2-container--default .select2-selection--single {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        border-radius: 4px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none
        }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv4 .ListAreaDiv4 .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
            background-image: url(../images/dwnArrow2.png);
            background-position: center center;
            background-repeat: no-repeat;
            top: 10px;
            right: 8px
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 h4 {
    margin: 10px 0px 10px 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRowRgt {
    border-right: 1px dotted #DDDDDD
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .InnerDiv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px
}

@media (max-width: 1199px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .InnerDiv {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow {
    position: relative;
    margin-bottom: 16px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .inputLabel {
        font-size: 14px;
        font-weight: 400;
        line-height: initial;
        color: #434343;
        margin-bottom: 8px;
        display: block;
        position: relative
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .inputLabel span {
            color: red;
            margin-left: 2px
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .inputCtrl {
        width: 100%;
        height: 46px;
        border-radius: 4px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        outline: none
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .inputCtrl::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #707070
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .validateText {
        position: absolute;
        top: 71px;
        right: 5px;
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        color: #ff0000
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .validateText.validateText2 {
            right: auto
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .select2Ctrl .select2-container {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        width: 100% !important;
        border-radius: 4px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
            border: none !important;
            height: 46px;
            display: flex;
            align-items: center;
            outline: 0
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
                padding: 5px 12px;
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: #434343
            }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .select2-container--default .select2-selection--single {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        border-radius: 4px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none
        }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .divDiv3 .ListAreaDiv3 .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
            background-image: url(../images/dwnArrow2.png);
            background-position: center center;
            background-repeat: no-repeat;
            top: 10px;
            right: 8px
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listTextareaForm {
    display: grid;
    grid-template-columns: 1fr
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listTextareaForm .formRow .inputRow {
        position: relative;
        margin-bottom: 16px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listTextareaForm .formRow .inputRow .inputLabel {
            font-size: 14px;
            font-weight: 400;
            line-height: initial;
            color: #434343;
            margin-bottom: 8px;
            display: block;
            position: relative
        }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .listTextareaForm .formRow .inputRow .inputCtrl {
            width: 100%;
            height: 53px;
            padding: 0 33px 0 16px;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            border: 1px solid #DDDDDD;
            outline: none;
            border-radius: 4px
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer {
    display: grid;
    grid-template-columns: 76px 1fr 76px;
    column-gap: 28px;
    background-color: var(--lightBg);
    border-radius: 5px;
    padding: 20px 32px;
    align-items: center;
    margin-top: 13px
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer {
        grid-template-columns: 1fr;
        row-gap: 20px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .male, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .female {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--c2d);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .male .pic, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .female .pic {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        margin-bottom: 8px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .male .pic img, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .female .pic img {
            width: 100%;
            border-radius: 50%
        }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .progresSec {
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--c2d);
    text-align: center
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .progresSec span {
        font-size: 18px
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .progresSec .animated-progress {
        width: 100%;
        height: 10px;
        border-radius: 8px;
        background-color: rgba(0,0,0,0.1);
        overflow: hidden;
        position: relative;
        margin-top: 7px
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .progresSec .animated-progress span {
            height: 100%;
            display: block;
            width: 0;
            color: #6FDA9D;
            line-height: 30px;
            position: absolute;
            text-align: end;
            padding-right: 5px
        }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .partnerPrefer .progresSec .progress-green span {
        background-color: #6FDA9D
    }

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea {
    margin-top: 17px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt {
        margin-left: 13px
    }

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt {
        margin-left: 0px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList {
    background-color: var(--lightBg);
    border-radius: 5px;
    padding: 24px 28px;
    margin-bottom: 6px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList {
        padding: 20px 15px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .titleArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    margin-bottom: 0px;
    min-height: 40px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .list {
    padding-left: 0px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .list ul {
        padding: 19px 27px 0px 0;
        border-left: none
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .list ul li {
            grid-template-columns: 198px 1px 1fr
        }

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .list ul li {
        grid-template-columns: 92px 1px 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .list ul li:last-child {
    margin-bottom: 0px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .list.list2 ul li {
    grid-template-columns: 1fr
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .title {
    padding-left: 0px
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .title::after {
        left: -35px;
        top: 6px
    }

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .title::before {
        position: absolute;
        content: "";
        left: -38px;
        top: 2px;
        width: 23px;
        height: 23px;
        border-radius: 50%;
        background-color: #ffffff
    }

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea.preferAreaEdt .preferAreaList .title::before {
        display: none
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    color: var(--c2d);
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 0px;
    align-items: center;
    position: relative;
    padding-left: 37px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .title {
        padding-left: 0px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .title::after {
    position: absolute;
    content: "";
    left: 0;
    top: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--lightBg)
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .title::after {
        display: none
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list {
    padding-left: 7px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list {
        padding-left: 0px
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list.list2 ul li {
    grid-template-columns: 1fr
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul {
    padding: 0;
    margin: 0;
    padding: 19px 27px;
    border-left: 1px solid #F3F3F3
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul {
        padding: 15px 0px;
        border-left: none
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul.borderLft {
    border-left: 1px dotted #DDDDDD;
    padding-left: 31px
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul.borderLft {
        border-left: none
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #434343;
    display: grid;
    grid-template-columns: 18px 198px 1px 1fr;
    column-gap: 8px;
    margin-bottom: 5px;
    word-break: break-all
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul li {
        grid-template-columns: 18px 92px 1px 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul li:last-child {
    margin-bottom: 0px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec .preferArea .preferAreaList .list ul li svg {
    margin-top: 4px
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2:hover .IcnGroup {
    display: none
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList:hover .IcnGroup {
    display: flex
}

.profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup {
    display: none
}

    .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .edit, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .eye, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .delete {
        background-color: var(--white)
    }

        .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .edit:hover, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .eye:hover, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .delete:hover {
            background-color: var(--theme-colour1)
        }

            .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .edit:hover svg path, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .eye:hover svg path, .profileDetails .profileDetailSection .profileDetailArea .CmnListSec.CmnListSec2 .preferAreaList .IcnGroup .delete:hover svg path {
                fill: #FAFAFA
            }

.profileDetails .profileDetailSection .profileDetailArea.profileDetailAreaEdt .mainBg {
    padding: 16px 12px
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailSide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px
    }
}

@media (max-width: 680px) {
    .profileDetails .profileDetailSection .profileDetailSide {
        grid-template-columns: 1fr
    }
}

.profileDetails .profileDetailSection .profileDetailSide .progressbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin-bottom: 8px;
    border-radius: 5px
}

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailSide .progressbar {
        margin-top: 0px;
        margin-bottom: 12px
    }
}

.profileDetails .profileDetailSection .profileDetailSide .progressbar .subHead {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-top: 22px
}

.profileDetails .profileDetailSection .profileDetailSide .progressbar .mainHead {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    margin-top: 8px;
    margin-bottom: 16px
}

.profileDetails .profileDetailSection .profileDetailSide .progressbar .footeehead {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-top: 22px
}

.profileDetails .profileDetailSection .profileDetailSide .progressbar .footerSub {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    margin-top: 8px;
    margin-bottom: 16px
}

.profileDetails .profileDetailSection .profileDetailSide .progressbar .complete button {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    background-color: var(--theme-colour1);
    border: none;
    border-radius: 5px;
    margin-bottom: 12px;
    color: white;
    padding: 12px 19px;
    cursor: pointer
}

    .profileDetails .profileDetailSection .profileDetailSide .progressbar .complete button:hover {
        background-color: #6fda9d
    }

.profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches {
    border-radius: 5px;
    margin-bottom: 8px
}

    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .toparea {
        padding: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

        .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .toparea .headerlist {
            display: flex;
            column-gap: 10px;
            padding: 19px 0px 15px 0px;
            margin-left: 20px
        }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .toparea .headerlist span {
                font-size: 16px;
                font-weight: 600;
                line-height: 26px;
                color: #EB6463;
                font-family: Rubik
            }

    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection {
        background-color: var(--lightBg);
        border: 1px solid #F3F3F3;
        border-radius: 5px;
        padding: 10px 8px
    }

        .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion {
            background-color: var(--lightBg);
            color: #444;
            cursor: pointer;
            padding: 10px 10px 10px 0px;
            width: 100%;
            margin-bottom: 4px;
            border: none;
            text-align: left;
            outline: none;
            color: #252525;
            font-size: 16px;
            font-weight: 700;
            line-height: 19px;
            transition: 0.4s;
            border-radius: 5px;
            display: grid;
            grid-template-columns: 35px 1fr 5px;
            align-items: center
        }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion:hover {
                background-color: #ffffff
            }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion:hover svg path {
                    fill: var(--lightDrkBg)
                }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion:hover .arrow {
                    display: block
                }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion svg {
                margin-left: 4px
            }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion label {
                position: relative;
                bottom: 6px;
                left: 8px;
                font-size: 16px;
                font-weight: 400;
                line-height: 26px;
                color: #434343
            }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion .disMach {
                display: grid;
                grid-template-columns: 1fr 30px;
                align-items: center
            }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion .disMach .edt {
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 15px;
                    color: var(--theme-colour1)
                }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion span {
                position: relative;
                font-size: 16px;
                font-weight: 400;
                line-height: 18px;
                color: #434343;
                margin-bottom: 0
            }

@media (max-width: 767px) {
    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion span {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px
    }
}

.profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .accordion:after {
    content: url("../images/downarrow.jpg");
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px
}

.profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .activeAcco:after {
    content: url("../images/uparrow.jpg")
}

.profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .panel {
    padding: 8px 8px;
    max-height: fit-content;
    background-color: #fff !important;
    border-radius: 8px !important;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    display: none
}

    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .panel.active {
        display: block
    }

    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul {
        padding-left: 0px
    }

        .profileDetails .profileDetailSection .profileDetailSide .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul li a:hover {
            color: blue
        }

.profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar {
    position: relative;
    width: 98%;
    top: 10px
}

    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .sectionheader {
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        margin: 18px 0px
    }

    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody {
        border: 1px solid var(--lightBg);
        border-radius: 5px;
        padding: 4px 2px;
        margin: 6px;
        margin-bottom: 20px
    }

        .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList {
            display: grid;
            grid-template-columns: 150px 1fr;
            padding: 12px 4px
        }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .left {
                display: flex;
                column-gap: 6px;
                align-items: center
            }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .left .content .datahead {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px;
                    white-space: nowrap
                }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px
                }

                    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata label {
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 24px
                    }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .right .value {
                text-align: right;
                margin-top: 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px
            }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .right .progresSec {
                text-align: right;
                margin-top: 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px
            }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .right .progresSec span {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 24px
                }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress {
                    width: 100%;
                    height: 8px;
                    border-radius: 8px;
                    background-color: rgba(0,0,0,0.1);
                    overflow: hidden;
                    position: relative;
                    margin-top: 7px
                }

                    .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress span {
                        height: 100%;
                        display: block;
                        width: 0;
                        color: #6fda9d;
                        line-height: 30px;
                        position: absolute;
                        text-align: end;
                        padding-right: 5px
                    }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-green span {
                    background-color: #6fda9d
                }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-red span {
                    background-color: #eb6463
                }

        .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .footerContent {
            width: 150px;
            margin: auto;
            text-align: center;
            padding: 12px 0px;
            font-size: 14px;
            font-weight: 400;
            line-height: 17px
        }

        .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .upgradeButton {
            display: flex;
            justify-content: center
        }

            .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .upgradeButton button {
                font-size: 14px;
                font-weight: 400;
                line-height: 17px;
                background-color: var(--theme-colour1);
                border: none;
                border-radius: 5px;
                margin-bottom: 12px;
                color: white;
                padding: 12px 19px;
                cursor: pointer
            }

                .profileDetails .profileDetailSection .profileDetailSide .accordinSection .lineprogressbar .progessBody .progressContent .upgradeButton button:hover {
                    background-color: #6fda9d
                }

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailSide .downloadarea {
        display: none
    }
}

.profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails {
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    margin-top: 8px
}

    .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content {
        padding: 8px 8px 30px;
        margin-top: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

        .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content.contentEdt .qucklink .link {
            width: 124px;
            height: 38px;
            margin: 13px auto 16px
        }

        .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content.contentEdt label {
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            margin-top: 32px;
            color: #707070
        }

        .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content img {
            width: 100%;
            cursor: pointer
        }

        .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content label {
            display: flex;
            justify-content: center
        }

        .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .qucklink .link {
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
            column-gap: 10px
        }

            .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .qucklink .link a img {
                width: 100%;
                cursor: pointer
            }

        .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .qucklink .smsLinkText {
            padding: 8px 32px 8px 32px
        }

        .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .downloadlink {
            box-sizing: border-box;
            margin-top: 13px;
            width: 100%;
            height: 49.24px;
            display: flex;
            align-items: center;
            background: #eeeeee;
            border: 0.5px solid #d5d4d4;
            border-radius: 10px
        }

            .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .downloadlink .send {
                width: 30%;
                height: 49.24px;
                color: var(--white);
                background: var(--theme-colour1);
                border: 0.5px solid #eeeeee;
                border-radius: 0px 9px 9px 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer
            }

                .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .downloadlink .send:hover {
                    background: var(--theme-colour2);
                    color: var(--white)
                }

                .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .downloadlink .send button {
                    border: none;
                    background-color: transparent;
                    cursor: pointer;
                    font-size: 21px;
                    font-weight: 400;
                    line-height: 25px;
                    letter-spacing: 0.11em;
                    color: #ffffff
                }

            .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .downloadlink .phone input {
                font-weight: 400;
                font-size: 16px;
                line-height: 28px;
                height: 47px;
                letter-spacing: 0.11em;
                border: none;
                background-color: #eeeeee;
                color: #434343;
                outline: none;
                width: 100%
            }

            .profileDetails .profileDetailSection .profileDetailSide .downloadarea .downloadDetails .content .downloadlink .countrycode {
                width: 53.95px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 10px;
                border-right: 1px solid #d5d4d4;
                height: 48px;
                font-weight: 400;
                font-size: 16px;
                line-height: 19px
            }

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailSide .completedProfile {
        order: 1;
        margin-top: 0px;
        margin-bottom: 8px
    }
}

.profileDetails .profileDetailSection .profileDetailSide .completedProfile img {
    margin: 4px 0
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailSide .completedProfile.completedProfile2 {
        order: 3;
        margin-top: 0px;
        margin-bottom: 8px
    }
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailSide .completedProfile.completedProfile2 img {
        width: 100%
    }
}

.profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin-top: 8px
}

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressbar .subHead {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        margin-top: 22px
    }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressbar .mainHead {
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        margin-top: 8px;
        margin-bottom: 16px
    }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressbar .footeehead {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        margin-top: 22px
    }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressbar .footerSub {
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        margin-top: 8px;
        margin-bottom: 16px
    }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressbar .complete button {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        margin-bottom: 12px;
        color: white;
        padding: 12px 19px;
        cursor: pointer
    }

        .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressbar .complete button:hover {
            background-color: #6fda9d
        }

.profileDetails .profileDetailSection .profileDetailSide .completedProfile .linePrgress {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background-color: white
}

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .linePrgress img {
        width: 100%
    }

.profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressBarHeader {
    background-color: var(--lightBg);
    padding: 10px 15px;
    box-shadow: 0 1px 8px #a8a0a0;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    position: absolute;
    top: 20px
}

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressBarHeader label {
        color: var(--theme-colour1);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px
    }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .progressBarHeader svg path {
        fill: var(--theme-colour1)
    }

.profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar {
    position: relative;
    width: 98%;
    top: 10px
}

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .sectionheader {
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        margin: 16px 0px 0px 0px
    }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent {
        border: 1px solid var(--lightBg);
        border-radius: 5px;
        padding: 4px 2px;
        margin: 6px;
        margin-bottom: 10px
    }

        .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList {
            display: grid;
            grid-template-columns: 150px 1fr;
            padding: 4px
        }

            .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left {
                display: flex;
                column-gap: 6px;
                align-items: center
            }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .icon svg path {
                    fill: var(--theme-colour1)
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .icon .HomeView {
                    height: 20px;
                    width: 20px
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .icon .ChatView {
                    height: 20px;
                    width: 20px
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .icon .ExpressView {
                    height: 20px;
                    width: 20px
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .icon .HoroscopeView {
                    height: 20px;
                    width: 20px
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .icon .Message {
                    height: 20px;
                    width: 20px
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .content .datahead {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px;
                    white-space: nowrap
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px
                }

                    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata label {
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 24px;
                        margin-bottom: 0
                    }

            .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .right .value {
                text-align: right;
                margin-top: 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px
            }

            .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .right .progresSec {
                text-align: right;
                margin-top: 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px
            }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .right .progresSec span {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 24px
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress {
                    width: 100%;
                    height: 8px;
                    border-radius: 8px;
                    background-color: rgba(0,0,0,0.1);
                    overflow: hidden;
                    position: relative;
                    margin-top: 7px;
                    margin-bottom: 6px
                }

                    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress span {
                        height: 100%;
                        display: block;
                        width: 0;
                        color: #6fda9d;
                        line-height: 30px;
                        position: absolute;
                        text-align: end;
                        padding-right: 5px
                    }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-green span {
                    background-color: #6fda9d
                }

                .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-red span {
                    background-color: #eb6463
                }

        .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .progressContent hr {
            width: 100%;
            height: 1px;
            background-color: #f3f3f3 !important;
            border: none;
            margin: 0px
        }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .footerContent {
        width: 150px;
        margin: auto;
        text-align: center;
        padding: 8px 0px 8px 0px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

    .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .upgradeButton {
        display: flex;
        justify-content: center;
        margin-bottom: 20px
    }

        .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .upgradeButton button {
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            background-color: var(--theme-colour1);
            border: none;
            border-radius: 5px;
            margin-bottom: 12px;
            color: white;
            padding: 12px 19px;
            cursor: pointer
        }

            .profileDetails .profileDetailSection .profileDetailSide .completedProfile .lineprogressbar .progessBody .upgradeButton button:hover {
                background-color: #6fda9d
            }

.profileDetails .profileDetailSection .profileDetailSide .happyToHelp {
    background-color: var(--white);
    border-radius: 5px;
    padding: 18px;
    text-align: center;
    margin-top: 8px
}

@media (max-width: 991px) {
    .profileDetails .profileDetailSection .profileDetailSide .happyToHelp {
        order: 0;
        margin-top: 0px;
        margin-bottom: 8px
    }
}

.profileDetails .profileDetailSection .profileDetailSide .happyToHelp .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
    color: var(--c2d)
}

.profileDetails .profileDetailSection .profileDetailSide .happyToHelp .pic {
    padding: 16px 0 20px
}

.profileDetails .profileDetailSection .profileDetailSide .happyToHelp p {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #575757;
    text-align: center
}

.profileDetails .profileDetailSection .profileDetailSide .happyToHelp .mobNum {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: var(--theme-colour1);
    width: 164px;
    height: 38px;
    background-color: var(--lightBg);
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    margin: auto;
    cursor: pointer
}

    .profileDetails .profileDetailSection .profileDetailSide .happyToHelp .mobNum svg circle {
        fill: var(--theme-colour1)
    }

    .profileDetails .profileDetailSection .profileDetailSide .happyToHelp .mobNum svg path {
        fill: var(--white)
    }

.mediaSep {
    display: none
}

@media (max-width: 1199px) {
    .mediaSep {
        display: grid;
        margin-top: 20px
    }
}

@media (max-width: 767px) {
    .mediaSep {
        margin-top: 0px
    }
}

.mediaSep .cmnBtn {
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
    color: var(--theme-colour1);
    height: 32px;
    border-radius: 22px;
    border: 1px solid var(--theme-colour1);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    width: fit-content;
    margin-top: 26px
}

    .mediaSep .cmnBtn:hover {
        color: var(--white);
        background-color: var(--theme-colour1)
    }

@media (max-width: 1199px) {
    .mediaSep .cmnBtn.cmnBtnShw {
        display: flex
    }
}

.mediaSep .profileWidget {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 680px) {
    .mediaSep .profileWidget {
        grid-template-columns: 1fr
    }
}

.mediaSep .profileWidget ul {
    padding: 0;
    margin: 0;
    list-style-type: none
}

@media (max-width: 1199px) {
    .mediaSep .profileWidget ul {
        margin-bottom: 10px
    }
}

@media (max-width: 991px) {
    .mediaSep .profileWidget ul {
        margin-bottom: 0px
    }
}

@media (max-width: 680px) {
    .mediaSep .profileWidget ul {
        margin-bottom: 10px
    }
}

.mediaSep .profileWidget ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    position: relative;
    margin-bottom: 20px;
    padding-left: 18px
}

@media (max-width: 991px) {
    .mediaSep .profileWidget ul li {
        margin-bottom: 10px
    }
}

.mediaSep .profileWidget ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0px;
    width: 10px;
    height: 15px;
    background-image: url(../images/rightArrow.png);
    background-position: center center;
    background-repeat: no-repeat
}

.mediaSep .profileWidget ul li:last-child {
    margin-bottom: 0px
}

.mediaSep .profileWidget .contactDetails {
    display: flex;
    margin-top: 20px;
    row-gap: 12px;
    flex-direction: column
}

    .mediaSep .profileWidget .contactDetails .MobileNumber {
        display: flex;
        align-items: center;
        column-gap: 10px;
        padding: 8px 16px;
        border-radius: 5px;
        border: 1px solid #DEDEDE
    }

        .mediaSep .profileWidget .contactDetails .MobileNumber .verifyDiv .cmnBtn {
            color: var(--theme-colour1);
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
            fill: #F2FAFF;
            border: 1px solid var(--theme-colour1);
            min-width: 77px;
            height: 32px;
            width: fit-content;
            border-radius: 4px;
            margin-top: 0;
            display: flex
        }

            .mediaSep .profileWidget .contactDetails .MobileNumber .verifyDiv .cmnBtn:hover {
                color: var(--white)
            }

    .mediaSep .profileWidget .contactDetails .emailVerify {
        display: flex;
        align-items: center;
        column-gap: 10px;
        padding: 8px 16px;
        border-radius: 5px;
        border: 1px solid #DEDEDE
    }

.mediaSep .contactDetails {
    display: flex;
    margin-top: 20px;
    column-gap: 12px;
    flex-wrap: wrap;
    row-gap: 13px
}

    .mediaSep .contactDetails .MobileNumber {
        display: flex;
        align-items: center;
        column-gap: 10px;
        padding: 8px 16px;
        border-radius: 5px;
        border: 1px solid #DEDEDE;
        position: relative
    }

        .mediaSep .contactDetails .MobileNumber:hover .status {
            opacity: 1;
            pointer-events: all
        }

        .mediaSep .contactDetails .MobileNumber .verifyLogo {
            height: 10px;
            width: 30px;
            background-repeat: no-repeat;
            background-image: url(../images/tick.svg)
        }

        .mediaSep .contactDetails .MobileNumber .notVerify {
            height: 30px;
            width: 30px;
            background-repeat: no-repeat;
            background-image: url(../images/waring.svg)
        }

        .mediaSep .contactDetails .MobileNumber .status {
            font-size: 14px;
            font-weight: 400;
            line-height: 19px;
            color: #fff;
            background-color: #6FDA9D;
            border-radius: 5px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: -37px;
            min-width: 94px;
            padding: 5px;
            opacity: 0;
            pointer-events: none;
            transition: 0.2s ease-in-out;
            -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
            -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
            box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16)
        }

        .mediaSep .contactDetails .MobileNumber .verifyDiv .cmnBtn {
            color: var(--theme-colour1);
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
            fill: #F2FAFF;
            border: 1px solid var(--theme-colour1);
            min-width: 77px;
            height: 32px;
            width: fit-content;
            border-radius: 4px;
            margin-top: 0
        }

            .mediaSep .contactDetails .MobileNumber .verifyDiv .cmnBtn:hover {
                color: var(--white)
            }

    .mediaSep .contactDetails .emailVerify {
        display: flex;
        align-items: center;
        column-gap: 10px;
        padding: 8px 16px;
        border-radius: 5px;
        border: 1px solid #DEDEDE;
        position: relative
    }

        .mediaSep .contactDetails .emailVerify:hover .status {
            opacity: 1;
            pointer-events: all
        }

        .mediaSep .contactDetails .emailVerify .verifyLogo {
            height: 10px;
            width: 30px;
            background-repeat: no-repeat;
            background-image: url(../images/tick.svg)
        }

        .mediaSep .contactDetails .emailVerify .notVerify {
            height: 30px;
            width: 30px;
            background-repeat: no-repeat;
            background-image: url(../images/waring.svg)
        }

        .mediaSep .contactDetails .emailVerify .status {
            font-size: 14px;
            font-weight: 400;
            line-height: 19px;
            color: #fff;
            background-color: #6FDA9D;
            border-radius: 5px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: -37px;
            min-width: 94px;
            padding: 5px;
            opacity: 0;
            pointer-events: none;
            transition: 0.2s ease-in-out;
            -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
            -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
            box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16)
        }

.editProfTitle {
    display: flex;
    align-items: center;
    column-gap: 28px;
    border-bottom: 1px solid #F3F3F3;
    padding-bottom: 20px;
    margin-bottom: 20px
}

@media (max-width: 767px) {
    .editProfTitle {
        flex-direction: column;
        align-items: baseline;
        padding-bottom: 10px;
        margin-bottom: 10px
    }
}

.editProfTitle .name {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    color: #434343
}

@media (max-width: 767px) {
    .editProfTitle .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

.editProfTitle .name .spc {
    padding: 0 13px;
    color: var(--theme-colour1)
}

.editProfTitle .name span {
    text-transform: uppercase
}

.editProfTitle .profileCeration {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--c2d)
}

    .editProfTitle .profileCeration span {
        color: var(--theme-colour1)
    }

.matchScrBg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.editAboutMySelf {
    display: grid;
    grid-template-columns: 1fr 40px;
    column-gap: 10px;
    align-items: baseline
}

    .editAboutMySelf:hover .IcnGroup {
        display: flex
    }

    .editAboutMySelf .IcnGroup {
        display: none
    }

    .editAboutMySelf .form-container {
        margin: 0;
        position: relative
    }

        .editAboutMySelf .form-container .form-content {
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .editAboutMySelf .form-container .form-text {
            font-family: 'Rubik', sans-serif !important;
            width: 100%;
            min-height: 171px;
            padding: 12px 14px;
            border: 1px solid #dddddd;
            border-radius: 6px;
            font-size: 14px;
            line-height: normal;
            font-weight: 400;
            color: #707070;
            resize: vertical;
            outline: none
        }

        .editAboutMySelf .form-container .button-container {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            align-items: center
        }

        .editAboutMySelf .form-container .btn {
            padding: 9px 17px;
            font-size: 14px;
            font-weight: 400;
            min-width: 134px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            height: 36px;
            white-space: nowrap;
            font-family: inherit
        }

        .editAboutMySelf .form-container .btn-generate {
            border: 1px solid #009FEE;
            background: #DEF2FF
        }

            .editAboutMySelf .form-container .btn-generate p {
                background: linear-gradient(90deg, #009FEE 0%, #0066EB 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent
            }

            .editAboutMySelf .form-container .btn-generate:hover {
                background: linear-gradient(90deg, #009FEE 0%, #0066EB 100%);
                border-color: linear-gradient(90deg, #009FEE 0%, #0066EB 100%)
            }

                .editAboutMySelf .form-container .btn-generate:hover p {
                    color: #ffffff
                }

        .editAboutMySelf .form-container .btn-cancel {
            color: #2D2D2D;
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            background-color: #EEF3F8;
            border-color: #EEF3F8
        }

            .editAboutMySelf .form-container .btn-cancel:hover {
                color: #ffffff;
                background: #2D2D2D
            }

        .editAboutMySelf .form-container .btn-save {
            background: var(--theme-colour2);
            border-color: var(--theme-colour2);
            color: white
        }

            .editAboutMySelf .form-container .btn-save:hover {
                background: #1565c0;
                border-color: #1565c0
            }

        .editAboutMySelf .form-container .ai-icon {
            width: 16px;
            height: 16px;
            fill: currentColor;
            display: inline-block
        }

@media (max-width: 768px) {
    .editAboutMySelf .form-container .button-container {
        position: static;
        justify-content: flex-end
    }

    .editAboutMySelf .form-container .form-content {
        padding-bottom: 20px
    }
}

@media (max-width: 580px) {
    .editAboutMySelf .form-container .button-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px
    }

    .editAboutMySelf .form-container .btn {
        justify-content: center
    }
}

.editAi {
    display: flex;
    flex-direction: column;
    gap: 13px
}

    .editAi .editAboutMySelf {
        grid-template-columns: 1fr
    }

        .editAi .editAboutMySelf .aboutMySelf .txt span {
            margin-bottom: 5px
        }

.IcnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px
}

    .IcnGroup .edit, .IcnGroup .eye, .IcnGroup .delete {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        transition: ease-in-out 0.4s;
        position: relative;
        background-color: var(--lightBg)
    }

        .IcnGroup .edit:hover, .IcnGroup .eye:hover, .IcnGroup .delete:hover {
            background-color: var(--theme-colour1)
        }

            .IcnGroup .edit:hover svg path, .IcnGroup .eye:hover svg path, .IcnGroup .delete:hover svg path {
                fill: #FAFAFA
            }

            .IcnGroup .edit:hover .toolTipSec, .IcnGroup .eye:hover .toolTipSec, .IcnGroup .delete:hover .toolTipSec {
                opacity: 1;
                pointer-events: all
            }

        .IcnGroup .edit svg path, .IcnGroup .eye svg path, .IcnGroup .delete svg path {
            fill: var(--theme-colour1)
        }

    .IcnGroup .eye {
        background-color: #F0FBF5
    }

        .IcnGroup .eye:hover {
            background-color: #6FDA9D
        }

    .IcnGroup .delete {
        background-color: #FDF3F3
    }

        .IcnGroup .delete:hover {
            background-color: #EB6463
        }

    .IcnGroup svg path {
        transition: ease-in-out 0.4s
    }

    .IcnGroup .toolTipSec {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #FAFAFA;
        background-color: #434343;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        min-width: 69px;
        max-width: 114px;
        width: max-content;
        padding: 5px 20px;
        position: absolute;
        right: 0;
        top: -43px;
        opacity: 0;
        pointer-events: none;
        transition: ease-in-out 0.4s
    }

.inputLabel span {
    color: red
}

.uploaderArea {
    width: 100%;
    height: 46px;
    border-radius: 4px;
    padding: 5px 35px 5px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--c2d);
    border: 1px solid #DDDDDD;
    background-color: var(--white);
    outline: none;
    display: flex;
    align-items: center;
    position: relative
}

    .uploaderArea .uploadAreaBtn {
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        flex-direction: column;
        width: 118px
    }

        .uploaderArea .uploadAreaBtn input[type="file"] {
            cursor: pointer;
            font-size: 100px;
            height: 100%;
            filter: alpha(opacity=1);
            -moz-opacity: 0.01;
            opacity: 0.01;
            position: absolute;
            right: 0;
            top: 0
        }

        .uploaderArea .uploadAreaBtn .uploadBtn {
            cursor: pointer;
            color: var(--lightBg);
            background-color: var(--lightDrkBg);
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border-radius: 4px;
            transition: ease-in-out 0.4s;
            width: auto !important;
            outline: none;
            padding: 9px 25px;
            border: transparent
        }

    .uploaderArea span {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        margin-left: 10px
    }

    .uploaderArea a {
        margin-left: 10px;
        position: absolute;
        right: 6px
    }

        .uploaderArea a svg {
            width: 23px;
            display: flex
        }

            .uploaderArea a svg path {
                fill: var(--lightDrkBg)
            }

.edit-ReligionPref .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e8eff4;
    border: 1px solid #ddd
}

.edit-ReligionPref .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #ddd;
    color: #b1b1b1
}

.edit-ReligionPref .select2-container--default .select2-selection--multiple {
    border: 1px solid #ffffff
}

.horoscopeCardModal h4 {
    color: var(--c2d) !important;
    margin-bottom: 20px !important
}

@media (max-width: 680px) {
    .horoscopeCardModal .p-horo-grahanila-wrap {
        text-align: center
    }
}

.horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm {
    margin-right: 20px;
    display: inline-block;
    width: 370px;
    margin-bottom: 20px
}

@media (max-width: 680px) {
    .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm {
        width: 300px;
        margin-right: 0px
    }
}

.horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table {
    width: 100%;
    background: #fff
}

    .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr {
        border: 1px solid #ddd
    }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td {
            position: relative;
            min-width: 70px;
            height: 70px;
            border: 1px solid #ddd
        }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-bu .p-ltrs.horo-bu {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-cha .p-ltrs.horo-cha {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-gu .p-ltrs.horo-gu {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ku .p-ltrs.horo-ku {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-la .p-ltrs.horo-la {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ma .p-ltrs.horo-ma {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-maa .p-ltrs.horo-maa {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ra .p-ltrs.horo-ra {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-sa .p-ltrs.horo-sa {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-shi .p-ltrs.horo-shi {
                display: block
            }

            .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-shu .p-ltrs.horo-shu {
                display: block
            }

    .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs {
        backface-visibility: hidden;
        display: block;
        display: none;
        min-height: 20px;
        background-position: center !important;
        background-repeat: no-repeat;
        margin-bottom: 2px
    }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-bu {
            background-image: url(../images/horo-bu.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-cha {
            background-image: url(../images/horo-cha.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-gu {
            background-image: url(../images/horo-gu.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ku {
            background-image: url(../images/horo-ku.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-la {
            background-image: url(../images/horo-la.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ma {
            background-image: url(../images/horo-ma.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-maa {
            background-image: url(../images/horo-maa.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ra {
            background-image: url(../images/horo-ra.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-sa {
            background-image: url(../images/horo-sa.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-shi {
            background-image: url(../images/horo-shi.jpg)
        }

        .horoscopeCardModal .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-shu {
            background-image: url(../images/horo-shu.jpg)
        }

.horoscopeCardModal .p-table-wrap {
    overflow: auto
}

.featuredProfileListHoro {
    grid-template-columns: 1fr !important
}

.marginTop12 {
    margin-top: 12px
}

.editAboutAiModal.modalWidet .modalRow {
    padding: 24px 30px 40px 40px;
    border-radius: 24px;
    max-width: 932px
}

@media (max-width: 680px) {
    .editAboutAiModal.modalWidet .modalRow {
        padding: 24px 10px 30px 20px;
        border-radius: 10px
    }
}

.editAboutAiModal .w3-light-grey {
    border-radius: 40px;
    background-color: #E8E8E8 !important;
    height: 3px;
    margin-top: 6px
}

.editAboutAiModal .w3-green {
    color: #fff !important;
    background-color: var(--theme-colour1) !important;
    height: 3px;
    border-radius: 40px
}

.editAboutAiModal .main-banner {
    display: inline-flex;
    height: 44px;
    padding: 7px 12px;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0 4px 7px 0 rgba(0,0,0,0.1);
    margin-right: 48px
}

.editAboutAiModal .upgrade-button {
    display: flex;
    height: 30px;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 12px;
    background: linear-gradient(180deg, #686868 0%, #040404 100%);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #FFF
}

.editAboutAiModal .credits-section {
    flex: 1;
    text-align: left
}

.editAboutAiModal .credits-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #000000
}

.editAboutAiModal .credits-number .red {
    color: #E20000
}

.editAboutAiModal .credits-progress-bar {
    width: 100%;
    height: 10px;
    background-color: #e5e5e5;
    border-radius: 5px;
    overflow: hidden
}

.editAboutAiModal .credits-progress-fill {
    height: 100%;
    background-color: #e5e5e5;
    width: 0%;
    border-radius: 5px
}

.editAboutAiModal .modalHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    row-gap: 5px;
    position: relative;
    margin-bottom: 40px
}

@media (max-width: 680px) {
    .editAboutAiModal .modalHead {
        flex-direction: column;
        align-items: flex-start
    }
}

.editAboutAiModal .modalHead .title {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    align-items: center
}

    .editAboutAiModal .modalHead .title .txt {
        color: var(--c2d);
        font-size: 18px;
        font-weight: 500;
        line-height: 20px
    }

.editAboutAiModal .modalHead .close {
    position: absolute;
    right: 0;
    top: 10px;
    cursor: pointer
}

    .editAboutAiModal .modalHead .close:hover svg path {
        fill: var(--theme-colour1)
    }

    .editAboutAiModal .modalHead .close svg path {
        transition: ease-in-out 0.4s
    }

.editAboutAiModal .chat-container {
    max-height: 483px;
    height: 100%;
    display: flex;
    flex-direction: column
}

.editAboutAiModal .chat-title {
    color: var(--theme-colour1);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    margin-bottom: 24px
}

.editAboutAiModal .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px
}

.editAboutAiModal .message {
    margin-bottom: 24px
}

    .editAboutAiModal .message:last-child {
        margin-bottom: 0
    }

.editAboutAiModal .message-wrapper {
    display: flex;
    padding: 10px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: #F9F9F9;
    margin-bottom: 8px
}

.editAboutAiModal .message-content {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #707070
}

.editAboutAiModal .btnGrp {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px
}

.editAboutAiModal .message-timestamp {
    font-size: 10px;
    font-weight: 300;
    line-height: 12px;
    color: #989898
}

.editAboutAiModal .apply-button {
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: #ffffff;
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    outline: none;
    border: none;
    background: var(--theme-colour1);
    cursor: pointer;
    opacity: 0
}

.editAboutAiModal .message:hover .apply-button {
    opacity: 1
}

.editAboutAiModal .chat-input-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px
}

.editAboutAiModal .chat-input {
    border-radius: 12px;
    border: 1px solid #DDD;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #707070;
    flex: 1;
    padding: 16px;
    outline: none;
    height: 48px
}

    .editAboutAiModal .chat-input::placeholder {
        color: #707070
    }

.editAboutAiModal .send-button {
    width: 48px;
    height: 48px;
    background-color: var(--theme-colour1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0
}

    .editAboutAiModal .send-button:hover {
        background-color: var(--theme-colour2)
    }

.editAboutAiModal .chat-messages::-webkit-scrollbar {
    width: 6px
}

.editAboutAiModal .chat-messages::-webkit-scrollbar-track {
    background: transparent
}

.editAboutAiModal .chat-messages::-webkit-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 3px
}

    .editAboutAiModal .chat-messages::-webkit-scrollbar-thumb:hover {
        background-color: #adb5bd
    }

.messageDetails {
    padding-top: 8px;
    background-color: #fafafa
}

    .messageDetails .topSetting {
        height: 64px;
        background-color: var(--light2Bg);
        display: flex;
        border-radius: 4px;
        align-items: center
    }

        .messageDetails .topSetting .setting {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: 500;
            line-height: 24px
        }

            .messageDetails .topSetting .setting svg {
                margin-left: 16px;
                margin-right: 8px
            }

                .messageDetails .topSetting .setting svg path {
                    fill: #484848
                }

    .messageDetails .messageDetailSection {
        display: grid;
        grid-template-columns: 280px 1fr;
        column-gap: 12px
    }

@media (max-width: 991px) {
    .messageDetails .messageDetailSection {
        grid-template-columns: 1fr
    }
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px
    }
}

@media (max-width: 680px) {
    .messageDetails .messageDetailSection .messageDetailSide {
        grid-template-columns: 1fr
    }
}

.messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches {
    border-radius: 5px;
    margin-bottom: 8px
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches {
        height: 98%
    }
}

.messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .toparea {
    padding: 8px;
    background-color: #fff;
    position: relative;
    border-radius: 5px
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .toparea {
        height: 100%
    }
}

.messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .toparea .headerlist {
    display: flex;
    column-gap: 10px;
    padding: 19px 0px 15px 0px;
    margin-left: 20px
}

    .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .toparea .headerlist span {
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
        color: #EB6463;
        font-family: Rubik
    }

.messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection {
    background-color: var(--lightBg);
    border: 1px solid #F3F3F3;
    border-radius: 5px;
    padding: 10px 8px
}

    .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--lightBg);
        color: #444;
        cursor: pointer;
        padding: 10px 10px 10px 0px;
        width: 100%;
        margin-bottom: 4px;
        border: none;
        text-align: left;
        outline: none;
        color: #252525;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        transition: 0.4s;
        border-radius: 5px
    }

        .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea .icon svg {
            display: none
        }

        .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea:hover {
            background-color: #ffffff
        }

            .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea:hover svg path {
                fill: #04080a
            }

            .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea:hover .icon svg {
                display: block
            }

        .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea.active {
            background-color: var(--theme-colour1)
        }

            .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea.active svg path {
                fill: #ffffff
            }

            .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea.active .icon svg {
                display: block
            }

            .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea.active .labelSec {
                color: #ffffff
            }

        .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea svg {
            margin-left: 4px
        }

        .messageDetails .messageDetailSection .messageDetailSide .accordinSection .discoverMatches .accordinSection .buttonArea .labelSec {
            position: relative;
            left: 8px;
            font-size: 16px;
            font-weight: 400;
            line-height: 26px;
            color: #434343
        }

@media (max-width: 680px) {
    .messageDetails .messageDetailSection .messageDetailSide .downloadarea {
        display: none
    }
}

.messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails {
    border: 1px px solid #f3f3f3;
    border-radius: 5px;
    margin-top: 8px
}

    .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content {
        padding: 8px;
        margin-top: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

        .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content img {
            width: 100%;
            cursor: pointer
        }

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content img {
        width: auto;
        height: calc((100vh) - 700px)
    }
}

.messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content label {
    display: flex;
    justify-content: center
}

.messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .qucklink .link {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    column-gap: 10px
}

    .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .qucklink .link a img {
        width: 100%;
        cursor: pointer
    }

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .qucklink .link a img {
        height: auto
    }
}

.messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .qucklink .smsLinkText {
    padding: 8px 32px 8px 32px
}

.messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .downloadlink {
    box-sizing: border-box;
    margin-top: 13px;
    width: 100%;
    height: 49.24px;
    display: flex;
    align-items: center;
    background: #eeeeee;
    border: 0.5px solid #d5d4d4;
    border-radius: 10px
}

    .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .downloadlink .send {
        width: 30%;
        height: 49.24px;
        color: var(--white);
        background: var(--theme-colour1);
        border: 0.5px solid #d5d4d4;
        border-radius: 0px 9px 9px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

        .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .downloadlink .send:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

        .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .downloadlink .send button {
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-size: 21px;
            font-weight: 400;
            line-height: 25px;
            letter-spacing: 0.11em;
            color: #ffffff
        }

    .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .downloadlink .phone {
        width: 100%
    }

        .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .downloadlink .phone input {
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            height: 46px;
            padding-left: 10px;
            letter-spacing: 0.11em;
            border: none;
            background-color: #eeeeee;
            color: #434343;
            outline: none;
            width: 100%
        }

    .messageDetails .messageDetailSection .messageDetailSide .downloadarea .downloadDetails .content .downloadlink .countrycode {
        width: 53.95px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        border-right: 1px solid #d5d4d4;
        height: 48px;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px
    }

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .completedProfile {
        order: 1;
        margin-top: 0px;
        margin-bottom: 8px
    }
}

.messageDetails .messageDetailSection .messageDetailSide .completedProfile img {
    margin: 4px 0
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .completedProfile.completedProfile2 {
        order: 3;
        margin-top: 0px;
        margin-bottom: 8px
    }
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .completedProfile.completedProfile2 img {
        width: 100%
    }
}

.messageDetails .messageDetailSection .messageDetailSide .completedProfile .progressbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    margin-top: 8px
}

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .progressbar .subHead {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        margin-top: 22px
    }

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .progressbar .mainHead {
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        margin-top: 8px;
        margin-bottom: 16px
    }

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .progressbar .footeehead {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        margin-top: 22px
    }

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .progressbar .footerSub {
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        margin-top: 8px;
        margin-bottom: 16px
    }

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .progressbar .complete button {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        margin-bottom: 12px;
        color: white;
        padding: 12px 19px;
        cursor: pointer
    }

        .messageDetails .messageDetailSection .messageDetailSide .completedProfile .progressbar .complete button:hover {
            background-color: #6fda9d
        }

.messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background-color: white
}

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress img {
        width: 100%
    }

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .progressBarHeader {
        background-color: #f6fbff;
        padding: 10px 15px;
        box-shadow: 0 1px 8px #a8a0a0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        position: absolute;
        top: 20px
    }

        .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .progressBarHeader label {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 500;
            line-height: 24px
        }

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar {
        position: relative;
        width: 98%;
        top: 10px
    }

        .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .sectionheader {
            font-size: 12px;
            font-weight: 400;
            line-height: 24px;
            text-align: center;
            margin: 16px 0px 0px 0px
        }

        .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent {
            border: 1px solid var(--lightBg);
            border-radius: 5px;
            margin: 6px;
            margin-bottom: 10px
        }

            .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList {
                display: grid;
                grid-template-columns: 150px 1fr;
                padding: 4px
            }

                .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .left {
                    display: flex;
                    column-gap: 6px;
                    align-items: center
                }

                    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .left .content .datahead {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 24px;
                        white-space: nowrap
                    }

                    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 24px
                    }

                        .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .left .content .subdata label {
                            font-size: 14px;
                            font-weight: 600;
                            line-height: 24px
                        }

                .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .right .value {
                    text-align: right;
                    margin-top: 10px;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 24px
                }

                .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .right .progresSec {
                    text-align: right;
                    margin-top: 10px;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 24px
                }

                    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .right .progresSec span {
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 24px
                    }

                    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress {
                        width: 100%;
                        height: 8px;
                        border-radius: 8px;
                        background-color: rgba(0,0,0,0.1);
                        overflow: hidden;
                        position: relative;
                        margin-top: 7px
                    }

                        .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .animated-progress span {
                            height: 100%;
                            display: block;
                            width: 0;
                            color: #6fda9d;
                            line-height: 30px;
                            position: absolute;
                            text-align: end;
                            padding-right: 5px
                        }

                    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-green span {
                        background-color: #6fda9d
                    }

                    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent .progressList .right .progresSec .progress-red span {
                        background-color: #eb6463
                    }

            .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .progressContent hr {
                width: 100%;
                height: 1px;
                background-color: #f3f3f3 !important;
                border: none;
                margin: 0
            }

        .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .footerContent {
            width: 150px;
            margin: auto;
            text-align: center;
            padding: 8px 0px 8px 0px;
            font-size: 14px;
            font-weight: 400;
            line-height: 17px
        }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .footerContent {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .upgradeButton {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .upgradeButton button {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        margin-bottom: 12px;
        color: white;
        padding: 12px 19px;
        cursor: pointer
    }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .upgradeButton button {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.messageDetails .messageDetailSection .messageDetailSide .completedProfile .linePrgress .lineprogressbar .progessBody .upgradeButton button:hover {
    background-color: #6fda9d
}

.messageDetails .messageDetailSection .messageDetailSide .happyToHelp {
    background-color: var(--white);
    border-radius: 5px;
    padding: 18px;
    text-align: center;
    margin-top: 8px
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .messageDetailSide .happyToHelp {
        order: 0;
        margin-top: 0px;
        margin-bottom: 8px
    }
}

.messageDetails .messageDetailSection .messageDetailSide .happyToHelp .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
    color: #2D2D2D
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .messageDetailSide .happyToHelp .title {
        font-size: 16px;
        font-weight: 500;
        line-height: 14px
    }
}

.messageDetails .messageDetailSection .messageDetailSide .happyToHelp .pic {
    padding: 16px 0 20px
}

.messageDetails .messageDetailSection .messageDetailSide .happyToHelp p {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #575757
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .messageDetailSide .happyToHelp p {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px
    }
}

.messageDetails .messageDetailSection .messageDetailSide .happyToHelp .mobNum {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: var(--theme-colour1);
    width: 164px;
    height: 38px;
    background-color: var(--lightBg);
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    margin: auto;
    cursor: pointer
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .messageDetailSide .happyToHelp .mobNum {
        font-size: 14px;
        font-weight: 500;
        line-height: 14px
    }
}

.messageDetails .messageDetailSection .tabContentSection .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: -8px;
    margin-left: 12px
}

@media (max-width: 480px) {
    .messageDetails .messageDetailSection .tabContentSection .header {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 10px
    }
}

.messageDetails .messageDetailSection .tabContentSection .header .interst {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .header .interst {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .header .tabSection .tab .tablinks {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .header .tabSection .tab .tablinks {
        font-size: 14px;
        font-weight: 600;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .header .tabSection .tab .tablinks span {
    font-size: 12px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent {
    margin: 0px !important
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile {
        height: auto;
        background-color: white;
        padding: 16px;
        border-radius: 12px;
        border: 1px solid #ffffff;
        display: grid;
        grid-template-columns: 180px 1fr;
        margin-top: 4px
    }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile {
        grid-template-columns: 1fr;
        height: auto;
        padding: 15px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .photo {
    width: 180px;
    height: 230px;
    border-radius: 8px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content {
    padding-left: 20px
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content {
        padding-left: 0px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap
}

@media (max-width: 680px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent {
        display: grid;
        grid-template-columns: 1fr
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection {
    display: flex;
    align-items: center
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .name {
        font-size: 18px;
        font-weight: 600;
        line-height: 22px;
        color: #313131
    }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .name {
        font-size: 12px;
        font-weight: 600;
        line-height: 18px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .separation {
    width: 2px;
    height: 22px;
    background-color: var(--theme-colour1);
    margin: 0 10px
}

@media (max-width: 480px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .separation {
        width: 2px;
        height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .code {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #313131
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .code {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
}

@media (max-width: 480px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .code {
        font-size: 12px;
        font-weight: 600;
        line-height: 18px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .code .premium {
    padding: 0px 10px;
    color: white;
    background-color: #EB6463;
    margin-left: 16px;
    display: flex;
    border-radius: 5px;
    align-self: center;
    font-size: 11px;
    font-weight: 400;
    line-height: 24px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .code .premIcn {
    width: 20px;
    height: 19px;
    background-image: url(../images/crownSvg.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    position: relative
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .code .premIcn:hover .toolTip {
        opacity: 1;
        pointer-events: all
    }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection .code .premIcn .toolTip {
        position: absolute;
        top: -30px;
        left: 0;
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: var(--white);
        background-color: var(--c2d);
        padding: 2px 15px;
        border-radius: 5px;
        width: max-content;
        white-space: break-spaces;
        opacity: 0;
        pointer-events: none;
        transition: ease-in-out .4s
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection:hover {
    color: var(--theme-colour1);
    text-decoration: underline;
    cursor: pointer
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection:hover .name {
        color: var(--theme-colour1)
    }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .nameSection:hover .code {
        color: var(--theme-colour1)
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection {
    display: flex;
    align-items: center;
    margin-left: 10px
}

@media (max-width: 680px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection {
        margin-left: 0px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection .icon {
    display: flex;
    margin-right: 6px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection .icon svg path {
        fill: #F15957 !important
    }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection .icon.ignor svg path {
        fill: #F15957 !important
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection .dateLabel {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #707070
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection .dateLabel {
        font-size: 12px;
        font-weight: 400;
        line-height: 22px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .topContent .dateSection .dateLabel.ignorDate {
    color: #F15957 !important
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .tagLine {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--white);
    background-color: var(--theme-colour1);
    padding: 2px 9px;
    border-radius: 5px;
    width: fit-content;
    margin-bottom: 10px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

@media (max-width: 480px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history {
        flex-direction: column;
        align-items: baseline
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .author {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 32px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .author .create {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin-right: 4px
    }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .author .create {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .author .createdBy {
    color: var(--theme-colour1);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .author .createdBy {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 32px;
    cursor: pointer
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .icon, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .icon, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .icon, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .icon, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .icon {
        display: flex;
        margin-right: 4px
    }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .onlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .onlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .onlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .onlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .onlineLabel {
        color: #6FDA9D;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        text-decoration: underline
    }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .onlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .onlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .onlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .onlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .onlineLabel {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .offlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .offlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .offlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .offlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .offlineLabel {
    color: #E69C00;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    position: relative
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .offlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .offlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .offlineLabel, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .offlineLabel, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .offlineLabel {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .offlineLabel:hover + .tooltipt, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .offlineLabel:hover + .tooltipt, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .offlineLabel:hover + .tooltipt, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .offlineLabel:hover + .tooltipt, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .offlineLabel:hover + .tooltipt {
    opacity: 1;
    visibility: visible;
    cursor: pointer
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .tooltipt, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .tooltipt, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .tooltipt, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .tooltipt, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .tooltipt {
    font-weight: 500;
    font-size: 12px;
    position: absolute;
    width: auto;
    height: 24px;
    opacity: 0;
    padding: 2px;
    color: white;
    margin: 1px auto;
    transition: ease-in-out .4s;
    visibility: visible;
    pointer-events: none;
    display: flex;
    align-items: center
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .online .tooltipt span, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline .tooltipt span, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .offline .tooltipt span, .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope .tooltipt span, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .horoscope .tooltipt span {
        background-color: #434343;
        padding: 8px;
        font-size: 12px;
        color: white;
        position: relative;
        bottom: 40px;
        left: 20px;
        border-radius: 8px;
        box-shadow: 0px 0px 4px #afa6a6
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .Horoscope {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-right: 32px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .Horoscope.blue .HoroscopeOnline {
        color: #247ac8
    }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .Horoscope.gray .HoroscopeOnline {
        color: #808080
    }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .Horoscope .icon {
        display: flex;
        margin-right: 8px
    }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .Horoscope .HoroscopeOnline {
        color: #EB6463;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px
    }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .Horoscope .HoroscopeOnline {
        font-size: 12px;
        font-weight: 400;
        line-height: 22px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .history .Horoscope .HoroscopeOnline:hover {
    text-decoration: underline
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent {
    display: grid;
    grid-template-columns: 270px 220px 1fr;
    column-gap: 10px;
    margin-bottom: 10px;
    margin-top: 16px
}

@media (max-width: 1366px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 1226px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .age {
    display: flex;
    margin-bottom: 10px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .age .icon {
        margin-right: 12px
    }

        .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .age .icon svg path {
            fill: #cecece
        }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .age .content {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #434343;
        padding-top: 2px;
        padding-left: 0px
    }

@media (max-width: 1199px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .age .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .age .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .cast {
    display: flex;
    margin-bottom: 10px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .cast .icon {
        margin-right: 12px
    }

        .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .cast .icon svg path {
            fill: #cecece
        }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .cast .content {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131;
        padding-top: 2px;
        padding-left: 0px
    }

@media (max-width: 1199px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .cast .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .cast .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .education {
    display: flex;
    margin-bottom: 10px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .education .icon {
        margin-right: 12px
    }

        .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .education .icon svg path {
            fill: #cecece
        }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .education .content {
        padding-top: 2px;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131;
        padding-left: 0px
    }

@media (max-width: 1199px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .education .content {
        margin-right: 8px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .education .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .location {
    display: flex;
    margin-bottom: 10px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .location .icon {
        margin-right: 12px
    }

        .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .location .icon svg path {
            fill: #cecece
        }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .location .content {
        padding-top: 2px;
        padding-left: 0px;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1024px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .location .content {
        margin-right: 20px
    }
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .location .content {
        margin-right: 4px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .location .content {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .religion {
    display: flex;
    margin-bottom: 10px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .religion .icon {
        margin-right: 12px
    }

        .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .religion .icon svg path {
            fill: #cecece
        }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .religion .content {
        margin-right: 30px;
        padding-top: 2px;
        padding-left: 0px;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1024px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .job {
    display: flex;
    margin-bottom: 10px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .job .icon {
        margin-right: 12px
    }

        .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .job .icon svg path {
            fill: #cecece
        }

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .job .content {
        padding-top: 2px;
        margin-right: 30px;
        padding-left: 0px;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: #313131
    }

@media (max-width: 1024px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContent .job .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location {
    display: flex
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location {
        margin-bottom: 10px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location .icon {
    margin-right: 12px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location .icon svg path {
        fill: #cecece
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location .content {
    padding-top: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location .content {
        margin-right: 20px
    }
}

@media (max-width: 991px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location .content {
        margin-right: 4px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .location .content {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .religion {
    display: flex
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .religion {
        margin-bottom: 10px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .religion .icon {
    margin-right: 12px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .religion .icon svg path {
        fill: #cecece
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .religion .content {
    margin-right: 30px;
    padding-top: 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .religion .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .religion .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .job {
    display: flex
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .job {
        margin-bottom: 10px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .job .icon {
    margin-right: 12px
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .job .icon svg path {
        fill: #cecece
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .job .content {
    padding-top: 2px;
    margin-right: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #313131
}

@media (max-width: 1024px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .job .content {
        margin-right: 20px
    }
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .middleContentsecRow .job .content {
        margin-right: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .statusSection {
    align-items: center
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .statusSection .statusLabel {
        color: var(--theme-colour1);
        font-size: 14px;
        font-weight: 400;
        line-height: 24px
    }

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .statusSection .statusLabel {
        font-size: 12px;
        font-weight: 400;
        line-height: 22px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .statusSection .status {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    margin-top: 8px
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .statusSection .status {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #313131;
    margin: 15px 0 0;
    display: flex;
    align-items: center
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup {
    display: flex;
    column-gap: 8px;
    row-gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap
}

@media (max-width: 375px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup {
        flex-direction: column
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccept {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #6FDA9D;
    background-color: #F0FBF5;
    border-radius: 9px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    width: auto;
    padding: 16px;
    border: none;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccept {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccept svg {
    transition: ease-in-out 0.4s;
    margin-right: 8px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccept:hover {
    background-color: #6FDA9D;
    color: #ffffff
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccept:hover svg path {
        fill: #ffffff
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccepted {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #6FDA9D;
    background-color: #F0FBF5;
    border-radius: 9px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    width: auto;
    padding: 16px;
    border: none;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccepted {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccepted svg {
    transition: ease-in-out 0.4s;
    margin-right: 8px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccepted:hover {
    background-color: #6FDA9D;
    color: #ffffff
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnAccepted:hover svg path {
        fill: #ffffff
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnDecline {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #E98A89;
    background-color: #FDF3F3;
    border-radius: 9px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    width: auto;
    padding: 16px;
    border: none;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnDecline {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnDecline svg {
    transition: ease-in-out 0.4s;
    margin-right: 8px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnDecline:hover {
    background-color: #EB6463;
    color: #ffffff
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnDecline:hover svg path {
        fill: #ffffff
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnShortlist {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #247ac8;
    background-color: var(--lightBg);
    border-radius: 9px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    width: auto;
    padding: 16px;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnShortlist {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnShortlist svg {
    transition: ease-in-out 0.4s;
    margin-right: 8px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnShortlist:hover {
    background-color: var(--theme-colour1);
    color: #ffffff
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnShortlist:hover svg path {
        fill: #ffffff
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnSendRequest {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #E69C00;
    background-color: #FDF5E5;
    border-radius: 9px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    width: auto;
    padding: 16px;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

@media (max-width: 767px) {
    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnSendRequest {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px
    }
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnSendRequest svg {
    transition: ease-in-out 0.4s;
    margin-right: 8px
}

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnSendRequest:hover {
    background-color: #E69C00;
    color: #ffffff
}

    .messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile .content .btnGroup .BtnSendRequest:hover svg path {
        fill: #ffffff
    }

.messageDetails .messageDetailSection .tabContentSection .tabcontent .Profile:hover {
    border: 1px solid #e9e9e9
}

.deletedProfileIcn {
    position: relative
}

    .deletedProfileIcn:hover .status {
        opacity: 1;
        pointer-events: all
    }

    .deletedProfileIcn .status {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        color: #fff;
        background-color: #2d2d2d;
        border-radius: 5px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: -37px;
        min-width: 94px;
        padding: 5px;
        opacity: 0;
        pointer-events: none;
        transition: 0.2s ease-in-out;
        -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
        -moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16);
        box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.16)
    }

.communicationHisTryArea {
    background-color: var(--white);
    padding: 20px;
    border-top: 1px solid var(--lightBg)
}

    .communicationHisTryArea .dateArea {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: var(--c2d);
        margin-bottom: 6px
    }

    .communicationHisTryArea .List {
        border: 1px solid var(--lightBg);
        border-radius: 6px;
        padding: 15px 16px;
        margin-bottom: 4px
    }

        .communicationHisTryArea .List:last-child {
            margin-bottom: 16px
        }

        .communicationHisTryArea .List .titleArea {
            display: flex;
            align-items: center;
            margin-bottom: 12px
        }

            .communicationHisTryArea .List .titleArea .title {
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                color: var(--c2d);
                margin: 0 14px
            }

        .communicationHisTryArea .List p {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: var(--c2d);
            margin: 0;
            text-align: left
        }

.serviceTable {
    background-color: var(--lightBg)
}

    .serviceTable .template-container .serviceTableArea {
        padding: 8px 0px 4px 0px;
        background-color: var(--lightBg)
    }

        .serviceTable .template-container .serviceTableArea .title {
            font-size: 16px;
            font-weight: 600;
            line-height: 16px;
            color: var(--theme-text-colour);
            margin-bottom: 20px
        }

        .serviceTable .template-container .serviceTableArea .viewAllBtn {
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            color: var(--theme-colour2);
            text-decoration: underline;
            margin-top: 25px;
            display: block;
            text-align: center
        }

        .serviceTable .template-container .serviceTableArea .serviceTable {
            max-width: 1266px;
            overflow-x: auto;
            overflow-y: hidden
        }

            .serviceTable .template-container .serviceTableArea .serviceTable::-webkit-scrollbar {
                height: 5px;
                margin-left: 3px;
                left: 3px
            }

            .serviceTable .template-container .serviceTableArea .serviceTable::-webkit-scrollbar-track {
                background: #c5bbbb
            }

            .serviceTable .template-container .serviceTableArea .serviceTable::-webkit-scrollbar-thumb {
                background: var(--theme-colour1);
                border-radius: 8px
            }

            .serviceTable .template-container .serviceTableArea .serviceTable .tableHead {
                display: grid;
                grid-template-columns: 65px 1fr 181px 226px 121px 1fr 65px;
                margin-bottom: 2px
            }

                .serviceTable .template-container .serviceTableArea .serviceTable .tableHead .tableHeadList {
                    background-color: var(--light2Bg);
                    min-height: 46px;
                    display: flex;
                    align-items: center;
                    padding: 12px;
                    border-radius: 4px;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 17px;
                    color: var(--c2d);
                    margin-right: 2px
                }

@media (max-width: 1279px) {
    .serviceTable .template-container .serviceTableArea .serviceTable .tableHead .tableHeadList.minWidthHi {
        min-width: 250px
    }

    .serviceTable .template-container .serviceTableArea .serviceTable .tableHead .tableHeadList.minWidthlo {
        min-width: 65px
    }
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec {
    display: grid;
    grid-template-columns: 65px 1fr 181px 226px 121px 1fr 65px;
    margin-bottom: 4px
}

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .tableBodyList {
        background-color: var(--white);
        border: 1px solid #f6f4f4;
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 12px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #2D2D2D;
        margin-right: 2px
    }

        .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .tableBodyList.sendVtn {
            align-items: end
        }

@media (max-width: 1279px) {
    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .tableBodyList.minWidthHi {
        min-width: 250px
    }

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .tableBodyList.minWidthlo {
        min-width: 65px
    }
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .phoneNumber {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    margin-top: 4px
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .labelColor {
    color: #2D2D2D;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .socialMediaIcon {
    display: flex;
    column-gap: 10px;
    margin-top: 10px
}

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .socialMediaIcon .phone svg rect {
        fill: var(--lightBg)
    }

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .socialMediaIcon .phone svg path {
        fill: var(--theme-colour1)
    }

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .socialMediaIcon .phone svg:hover rect {
        fill: var(--theme-colour1);
        opacity: 1
    }

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .socialMediaIcon .phone svg:hover path {
        fill: var(--white)
    }

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .socialMediaIcon .whatup svg:hover rect {
        fill: #2DCA23;
        opacity: 1
    }

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .addressDetails .socialMediaIcon .whatup svg:hover path {
        fill: var(--white)
    }

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea {
    display: flex;
    align-items: center;
    column-gap: 10px
}

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon {
        position: relative
    }

        .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon:hover .status {
            opacity: 1;
            pointer-events: all;
            cursor: pointer;
            z-index: 1
        }

        .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon .status {
            position: absolute;
            right: 0;
            top: 27px;
            width: 280px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: #707070;
            padding: 12px;
            border-radius: 2px;
            background-color: var(--white);
            transition: ease-in-out .4s;
            opacity: 0;
            pointer-events: none;
            cursor: pointer;
            white-space: break-spaces;
            -webkit-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21);
            -moz-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21);
            box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21)
        }

@media (max-width: 680px) {
    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon .status {
        right: auto;
        left: -101px;
        top: 22px;
        width: 217px;
        font-size: 10px;
        line-height: 13px;
        padding: 7px;
        white-space: break-spaces
    }
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea button {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #ffffff;
    background-color: var(--theme-colour1);
    border-radius: 5px;
    height: 34px;
    width: 68px;
    display: flex;
    padding: 10px 24px;
    align-items: center;
    justify-content: center;
    outline: none;
    width: auto;
    border: none;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .profileSec {
    display: flex
}

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .profileSec button {
        padding: 10px 15px;
        margin-left: 10px
    }

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .profilePic {
    width: 58px;
    height: 58px;
    border-radius: 4px;
    margin-bottom: 5px
}

    .serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .profilePic img {
        width: 100%
    }

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .code {
    color: var(--theme-colour1);
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    margin-bottom: 12px
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .sendData {
    display: flex;
    align-items: end;
    background-color: var(--theme-colour1);
    padding: 11px;
    border-radius: 4px;
    cursor: pointer
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec textarea {
    height: 96px;
    width: 268px;
    background-color: var(--lightBg);
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 9px
}

.noData img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0px
}

@media (max-width: 767px) {
    .noData img {
        width: 100%
    }
}

.noData .contentBack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

    .noData .contentBack label {
        font-family: 'Rubik', sans-serif;
        font-size: 29px;
        font-weight: 500;
        line-height: 47px;
        color: #000000
    }

@media (max-width: 767px) {
    .noData .contentBack label {
        font-size: 25px;
        font-weight: 500;
        line-height: 40px
    }
}

.noData .contentBack .backButton {
    margin: 20px 0px 33px;
    display: flex
}

    .noData .contentBack .backButton a {
        font-family: 'Rubik', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 45px;
        background-color: var(--lightBg);
        border: none;
        color: var(--theme-colour1);
        text-decoration: none;
        border-radius: 8px;
        padding: 5px 10px;
        margin-bottom: 12px;
        min-width: 192px;
        height: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer
    }

@media (max-width: 767px) {
    .noData .contentBack .backButton a {
        font-size: 14px;
        font-weight: 400;
        line-height: 40px
    }
}

.noData .contentBack .backButton a:hover {
    background-color: var(--theme-colour1);
    color: var(--white)
}

.ads img {
    margin: auto;
    max-width: 212px;
    width: 100%
}

.scrollbar-innerSec {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: 240px;
    max-width: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important
}

.searchFilter .template-container .wrapTab {
    display: grid;
    grid-template-columns: 1fr 212px;
    column-gap: 10px
}

@media (max-width: 991px) {
    .searchFilter .template-container .wrapTab {
        grid-template-columns: 1fr;
        margin-top: 10px
    }
}

.searchFilter .template-container .wrapTab.wrapTabAll {
    grid-template-columns: 1fr !important
}

.searchFilter .template-container .wrapTab .tabSec {
    padding-bottom: 30px
}

    .searchFilter .template-container .wrapTab .tabSec .searchTab {
        overflow: hidden;
        display: flex;
        justify-content: start;
        border-radius: 9px 9px 0px 0px;
        margin-bottom: 10px;
        column-gap: 0;
        border-bottom: 1px solid #DBDBDB
    }

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .searchTab {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

.searchFilter .template-container .wrapTab .tabSec .searchTab .tablinks {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    padding: 10px 0px 10px 0px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #A8A8A8;
    border-bottom: 2px solid #fff;
    margin-right: 80px
}

@media (max-width: 1279px) {
    .searchFilter .template-container .wrapTab .tabSec .searchTab .tablinks {
        margin-right: 60px
    }
}

@media (max-width: 1199px) {
    .searchFilter .template-container .wrapTab .tabSec .searchTab .tablinks {
        margin-right: 28px
    }
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .searchTab .tablinks {
        margin-right: 25px
    }
}

.searchFilter .template-container .wrapTab .tabSec .searchTab .tablinks.active {
    border-bottom: 2px solid var(--theme-colour1);
    font-size: 16px;
    font-weight: 0;
    line-height: 1;
    color: var(--theme-colour1)
}

@media (max-width: 480px) {
    .searchFilter .template-container .wrapTab .tabSec .searchTab .tablinks.active {
        background-color: var(--theme-colour1);
        color: #FFFFFF;
        border-radius: 8px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent {
    border-top: none;
    margin: auto;
    padding-bottom: 10px
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .headerPara {
        max-width: 960px;
        width: 100%;
        padding: 30px 0px 35px 0px;
        margin: auto;
        text-align: center;
        color: #A8A8A8;
        font-size: 14px;
        font-weight: 400;
        line-height: 1
    }

@media (max-width: 480px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .headerPara {
        padding: 15px 0px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .accordionSearch {
    color: var(--c2d);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    padding: 8px 35px;
    width: 100%;
    border: none;
    height: 82px;
    border-radius: 5px;
    text-align: left;
    outline: none;
    background-color: var(--lightBg);
    transition: 0.4s;
    margin: 3px 0px;
    align-items: center;
    display: flex;
    justify-content: space-between
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .accordionSearch {
        padding: 8px 18px;
        height: 60px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .accordionSearch.active::after {
    content: "\2212";
    font-size: 30px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .accordionSearch::after {
    content: '\002B';
    color: var(--c2d);
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size: 30px
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .accordionSearch {
        font-size: 18px;
        font-weight: 400;
        line-height: 1
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel {
    padding: 0 35px;
    background-color: var(--lightBg);
    overflow: hidden;
    transition: display 0.2s ease-out;
    transform: none;
    margin-top: -4px;
    display: none
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel {
        padding: 0 18px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel.active {
    display: block;
    margin-bottom: 5px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo.datepickerArea .inputLabel {
    margin-bottom: 0
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .select2-container--default .select2-selection--multiple {
    border: 1px solid #fff;
    min-height: 40px;
    display: flex;
    align-items: center;
    outline: 0
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .select2-container--default.select2-search--inline .select2-search__field {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e8eff4;
    border: 1px solid #ddd
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #ddd;
    color: #b1b1b1
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .select2-container .select2-selection--multiple .select2-selection__rendered {
    margin: 0
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-rowLarge .inputLabel {
    line-height: 18px;
    margin-bottom: 13px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-rowLarge .inputRow {
    margin-bottom: 31px
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-rowLarge .inputRow {
        margin-bottom: 15px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea {
    padding: 25px 0px 0;
    border-top: 1px solid #DBDBDB
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea {
        padding: 15px 0px 0
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 73px
}

@media (max-width: 991px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow {
        margin-top: 10px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .inputLabel {
    line-height: 18px;
    margin-bottom: 13px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap {
    padding: 10px;
    background-color: white;
    height: auto
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .sortArea {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%
    }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .sortArea .formcontrol {
            font-family: "Roboto";
            font-weight: 400;
            width: 100%;
            font-size: 12px;
            padding-left: 38px;
            background-color: #fff;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            height: 44px
        }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .sortArea .fIcon {
            position: absolute;
            left: 10px;
            top: 12px;
            cursor: pointer
        }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList {
        overflow-y: auto;
        overflow-x: hidden;
        height: 18vh
    }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList::-webkit-scrollbar-track {
            background-color: #cdcaca
        }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList::-webkit-scrollbar {
            width: 4px;
            background-color: transparent
        }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList::-webkit-scrollbar-thumb {
            background-color: #1565b7
        }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row {
            position: relative
        }

@media (max-width: 375px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row {
        margin-bottom: 10px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row .check-box {
    position: relative;
    padding: 8px 0px 2px 0px
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row .check-box input[type="checkbox"] {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row .check-box label {
        display: flex;
        pointer-events: none;
        padding-left: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #707070;
        position: relative
    }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row .check-box label::before {
            position: absolute;
            left: 0;
            top: 3px;
            content: "";
            width: 18px;
            height: 18px;
            background-color: var(--white);
            border: solid 1px #dddddd
        }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row .check-box label::after {
            opacity: 0;
            position: absolute;
            left: 6px;
            top: 5px;
            content: "";
            width: 6px;
            height: 11px;
            transition: ease-in-out 0.4s;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row .check-box input:checked ~ label::before {
        background-color: var(--theme-colour1)
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row .check-box input:checked ~ label::after {
        opacity: 1
    }

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .form-check-row.marginBottom {
    margin-bottom: 30px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .GroupList .list {
    display: flex;
    align-items: center;
    margin-top: 10px
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .sortWrap .dropDownList .GroupList .list label {
        display: flex;
        pointer-events: none;
        padding-left: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #707070;
        position: relative
    }

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .inputRow {
    margin-bottom: 31px
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .inputRow {
        margin-bottom: 15px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent {
    margin-bottom: 31px
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent {
        margin-bottom: 15px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent .inputLabel {
    font-weight: 400;
    margin-bottom: 13px;
    display: block
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent .WrapDetails {
    display: grid;
    grid-template-columns: 1fr 30px 1fr
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent .WrapDetails {
        grid-template-columns: 1fr
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent .WrapDetails label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent .WrapDetails label {
        margin-top: 3px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow .wrapContent .WrapDetails .inputRow {
    margin-bottom: 0px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow.form-rowLarge {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 73px
}

@media (max-width: 991px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow.form-rowLarge {
        grid-template-columns: 1fr;
        margin-bottom: 0px
    }
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .formArea .formRow.form-rowLarge {
        margin-top: 10px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row {
    position: relative
}

@media (max-width: 375px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row {
        margin-bottom: 10px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row .check-box {
    position: relative
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row .check-box input[type="checkbox"] {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row .check-box label {
        display: flex;
        pointer-events: none;
        padding-left: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #707070;
        position: relative
    }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row .check-box label::before {
            position: absolute;
            left: 0;
            top: 3px;
            content: "";
            width: 18px;
            height: 18px;
            background-color: var(--white);
            border: solid 1px #dddddd
        }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row .check-box label::after {
            opacity: 0;
            position: absolute;
            left: 6px;
            top: 5px;
            content: "";
            width: 6px;
            height: 11px;
            transition: ease-in-out 0.4s;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row .check-box input:checked ~ label::before {
        background-color: var(--theme-colour2)
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row .check-box input:checked ~ label::after {
        opacity: 1
    }

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .personalInfo .form-check-row.marginBottom {
    margin-bottom: 30px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup {
    display: flex;
    margin-bottom: 20px
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup {
        flex-direction: column
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup .check-box {
    position: relative;
    padding: 8px 0px 2px 0px
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup .check-box input[type="checkbox"] {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup .check-box label {
        display: flex;
        pointer-events: all;
        padding-left: 30px;
        margin-right: 120px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #707070;
        position: relative
    }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup .check-box label::before {
            position: absolute;
            left: 0;
            top: 3px;
            content: "";
            width: 18px;
            height: 18px;
            background-color: var(--white);
            border: solid 1px #dddddd
        }

        .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup .check-box label::after {
            opacity: 0;
            position: absolute;
            left: 6px;
            top: 5px;
            content: "";
            width: 6px;
            height: 11px;
            transition: ease-in-out 0.4s;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup .check-box input:checked ~ label::before {
        background-color: var(--theme-colour1)
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent .panel .checkboxGroup .check-box input:checked ~ label::after {
        opacity: 1
    }

.searchFilter .template-container .wrapTab .tabSec .tabcontent .searchButton {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--theme-colour1);
    border-radius: 5px;
    color: white;
    column-gap: 12px;
    width: 100%;
    border: none;
    margin-top: 6px
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .qiuckHeader label {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    margin-top: 30px;
    margin-bottom: 20px
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .qiuckHeader label {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px
    }
}

@media (max-width: 480px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .qiuckHeader label {
        flex-direction: column;
        justify-content: flex-start
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .qiuckHeader label a {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    color: var(--theme-colour1);
    margin-left: 4px
}

@media (max-width: 767px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .qiuckHeader label a {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px
    }
}

@media (max-width: 480px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .qiuckHeader label a {
        margin-left: 0px;
        margin-top: 4px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea {
    background-color: var(--lightBg);
    padding: 16px;
    border-radius: 5px
}

@media (max-width: 1024px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea {
        padding: 8px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #FFFFFF;
    border-radius: 6px
}

@media (max-width: 1024px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 480px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form {
        grid-template-columns: 1fr
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div .AgeDuration {
    display: flex;
    justify-content: center;
    font-weight: 400;
    color: #A8A8A8
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div .inputRow {
    position: relative
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div .inputRow .select2-container--default .select2-selection--single {
        border: 1px solid transparent
    }

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div button {
    align-items: center;
    justify-content: center;
    background-color: var(--theme-colour1);
    width: 100%;
    height: 70px;
    border: none;
    color: white;
    display: flex;
    border-radius: 0px 0px 6px 0px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 400;
    line-height: 20px
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div button svg {
        margin-right: 10px
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div button:hover {
        background-color: var(--theme-colour2);
        color: var(--white)
    }

@media (max-width: 1024px) {
    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div button {
        border-radius: 0px 0px 6px 6px
    }
}

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div .WrapDetails {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    align-items: center;
    justify-content: center;
    column-gap: 10px
}

    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div .WrapDetails .inputRow:first-child .select2Ctrl .select2-container {
        border-right: solid 2px #F7F9FA
    }

    .searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .formArea .form div .WrapDetails .inputRow:last-child .select2Ctrl .select2-container {
        border-left: solid 2px #F7F9FA
    }

.searchFilter .template-container .wrapTab .tabSec .tabcontent.QuickBack .quickSearch .footerArea {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 220px;
    margin-bottom: -12px
}

.searchFilter .template-container .searchTab {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border-radius: 9px 9px 0px 0px;
    margin-bottom: 10px;
    column-gap: 110px;
    margin-top: 20px;
    border-bottom: 1px solid #DBDBDB
}

@media (max-width: 680px) {
    .searchFilter .template-container .searchTab {
        grid-template-columns: 1fr 1fr;
        border-radius: 0px
    }
}

@media (max-width: 480px) {
    .searchFilter .template-container .searchTab {
        grid-template-columns: 1fr;
        margin-top: 10px
    }
}

@media (max-width: 1199px) {
    .searchFilter .template-container .searchTab.searchTab2 {
        flex-direction: column
    }
}

.searchFilter .template-container .searchTab .tabPhoto {
    display: flex;
    column-gap: 40px
}

@media (max-width: 480px) {
    .searchFilter .template-container .searchTab .tabPhoto {
        column-gap: 10px
    }
}

.searchFilter .template-container .searchTab .tabPhoto .tablinks {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    padding: 10px 0px 10px 0px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #A8A8A8;
    border-bottom: 2px solid #fff
}

@media (max-width: 550px) {
    .searchFilter .template-container .searchTab .tabPhoto .tablinks {
        font-size: 14px
    }
}

.searchFilter .template-container .searchTab .tabPhoto .tablinks.active {
    border-bottom: 2px solid var(--theme-colour1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--theme-colour1)
}

.searchFilter .template-container .searchTab ul {
    display: flex;
    column-gap: 40px
}

@media (max-width: 1199px) {
    .searchFilter .template-container .searchTab ul {
        padding-left: 0px;
        margin-top: 10px
    }
}

@media (max-width: 767px) {
    .searchFilter .template-container .searchTab ul {
        flex-direction: column;
        row-gap: 10px
    }
}

.searchFilter .template-container .searchTab ul li {
    display: grid;
    align-items: baseline;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    grid-template-columns: 27px 1fr;
    align-items: center
}

@media (max-width: 375px) {
    .searchFilter .template-container .searchTab ul li {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px
    }
}

.searchFilter .template-container .searchTab ul li svg {
    margin-right: 18px;
    cursor: pointer
}

    .searchFilter .template-container .searchTab ul li svg path {
        fill: var(--theme-colour1)
    }

    .searchFilter .template-container .searchTab ul li svg:hover path {
        fill: red
    }

.searchFilter .template-container .searchTabBody .btngroup {
    display: flex;
    align-items: center
}

    .searchFilter .template-container .searchTabBody .btngroup .cmnBtn {
        color: white;
        background: var(--theme-colour1);
        box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
        border-radius: 6px;
        height: 40px;
        padding: 3px 8px;
        min-width: 140px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .4s ease-in-out;
        margin-right: 10px
    }

        .searchFilter .template-container .searchTabBody .btngroup .cmnBtn:hover {
            background: var(--theme-colour2)
        }

.searchFilter .template-container .searchTabBody .photoSlider {
    display: grid;
    grid-template-columns: 1fr 437px;
    margin-bottom: 56px
}

@media (max-width: 1279px) {
    .searchFilter .template-container .searchTabBody .photoSlider {
        grid-template-columns: 600px 1fr
    }
}

@media (max-width: 1199px) {
    .searchFilter .template-container .searchTabBody .photoSlider {
        grid-template-columns: 500px 1fr
    }
}

@media (max-width: 991px) {
    .searchFilter .template-container .searchTabBody .photoSlider {
        grid-template-columns: 1fr
    }
}

@media (max-width: 767px) {
    .searchFilter .template-container .searchTabBody .photoSlider .main {
        max-width: 500px;
        margin: auto
    }
}

@media (max-width: 480px) {
    .searchFilter .template-container .searchTabBody .photoSlider .main {
        max-width: 330px
    }
}

.searchFilter .template-container .searchTabBody .photoSlider .main .slider-for {
    margin: auto;
    height: 247px;
    display: flex;
    justify-content: center;
    transform: inherit;
    margin-bottom: 21px
}

    .searchFilter .template-container .searchTabBody .photoSlider .main .slider-for .mainPic {
        max-width: 251px;
        border-radius: 4px;
        margin: auto
    }

        .searchFilter .template-container .searchTabBody .photoSlider .main .slider-for .mainPic img {
            border-radius: 4px
        }

.searchFilter .template-container .searchTabBody .photoSlider .main .slider-nav {
    max-width: 818px
}

@media (max-width: 991px) {
    .searchFilter .template-container .searchTabBody .photoSlider .main .slider-nav {
        margin-bottom: 20px
    }
}

.searchFilter .template-container .searchTabBody .photoSlider .main .slider-nav .navPic {
    max-width: 121px;
    max-height: 153px;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    margin: auto
}

    .searchFilter .template-container .searchTabBody .photoSlider .main .slider-nav .navPic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px
    }

.searchFilter .template-container .searchTabBody .photoSlider .photoSliderText {
    padding-left: 29px
}

@media (max-width: 991px) {
    .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText {
        padding-left: 0px
    }
}

.searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea {
    background-color: var(--lightBg);
    border-radius: 5px;
    padding: 24px 18px
}

    .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea .title {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        color: var(--theme-colour1);
        padding-bottom: 6px;
        margin-bottom: 28px;
        border-bottom: 1px solid #DDDDDD
    }

        .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea .title svg {
            margin-right: 9px
        }

            .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea .title svg path {
                stroke: var(--theme-colour1)
            }

    .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList {
        display: grid;
        grid-template-columns: 154px 11px 1fr;
        margin-bottom: 17px
    }

        .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList .cntArea {
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            color: #707070
        }

            .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList .cntArea.cntAreaLft {
                padding-left: 17px
            }

        .searchFilter .template-container .searchTabBody .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList .line {
            width: 11px;
            height: 1px;
            background-color: #707070;
            margin-top: 7px
        }

.toggleSwitch span span {
    display: none
}

.toggleSwitch {
    display: inline-block;
    height: 18px;
    position: relative;
    overflow: visible;
    padding: 0;
    cursor: pointer;
    width: 200px;
    background-color: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 19px;
    height: 37px
}

    .toggleSwitch * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .toggleSwitch label, .toggleSwitch > span {
        line-height: 20px;
        height: 20px;
        vertical-align: middle
    }

    .toggleSwitch input:focus ~ a, .toggleSwitch input:focus + label {
        outline: none
    }

    .toggleSwitch label {
        position: relative;
        z-index: 3;
        display: block;
        width: 100%
    }

    .toggleSwitch input {
        position: absolute;
        opacity: 0;
        z-index: 5
    }

    .toggleSwitch > span {
        position: absolute;
        left: 0;
        width: calc(100% - 6px);
        margin: 0;
        text-align: left;
        white-space: nowrap;
        margin: 0 3px
    }

        .toggleSwitch > span span {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            display: block;
            width: 50%;
            margin-left: 50px;
            text-align: left;
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            width: auto;
            left: 0;
            top: -1px;
            opacity: 1;
            width: 40%;
            text-align: center;
            line-height: 34px
        }

    .toggleSwitch a {
        position: absolute;
        right: 50%;
        z-index: 4;
        display: block;
        top: 0px;
        bottom: 0px;
        padding: 0;
        left: 0px;
        width: 50%;
        background-color: var(--theme-colour1);
        border-radius: 19px;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05)
    }

    .toggleSwitch > span span:first-of-type {
        color: #FFF;
        opacity: 1;
        left: 0;
        margin: 0;
        width: 50%
    }

    .toggleSwitch > span span:last-of-type {
        left: auto;
        right: -2px;
        color: #fff;
        margin: 0;
        width: 50%
    }

    .toggleSwitch > span:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: -2px;
        border-radius: 30px;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out
    }

    .toggleSwitch input:checked ~ a {
        left: calc(50% - 0px)
    }

    .toggleSwitch input:checked ~ span span:first-of-type {
        color: #555252;
        left: -2px
    }

    .toggleSwitch input:checked ~ span span:last-of-type {
        color: #555252
    }

    .toggleSwitch span .left-span.active {
        color: #fff !important
    }

    .toggleSwitch span .right-span.active {
        color: #fff !important
    }

    .toggleSwitch.large {
        width: 60px;
        height: 27px
    }

        .toggleSwitch.large a {
            width: 27px
        }

        .toggleSwitch.large > span {
            height: 29px;
            line-height: 28px
        }

        .toggleSwitch.large input:checked ~ a {
            left: 41px
        }

        .toggleSwitch.large > span span {
            font-size: 1.1em
        }

            .toggleSwitch.large > span span:first-of-type {
                left: 50%
            }

    .toggleSwitch.xlarge {
        width: 80px;
        height: 36px
    }

        .toggleSwitch.xlarge a {
            width: 36px
        }

        .toggleSwitch.xlarge > span {
            height: 38px;
            line-height: 37px
        }

        .toggleSwitch.xlarge input:checked ~ a {
            left: 52px
        }

        .toggleSwitch.xlarge > span span {
            font-size: 1.4em
        }

            .toggleSwitch.xlarge > span span:first-of-type {
                left: 50%
            }

.inputRow {
    position: relative
}

    .inputRow .inputLabel {
        font-size: 16px;
        font-weight: 400;
        line-height: 37px;
        color: #2D2D2D;
        margin-bottom: 8px;
        display: block;
        position: relative
    }

@media (max-width: 991px) {
    .inputRow .inputLabel {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px
    }
}

.inputRow .inputCtrl {
    width: 100%;
    height: 53px;
    padding: 0 33px 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 37px;
    border: 1px solid #DDDDDD;
    outline: none;
    border-radius: 4px
}

    .inputRow .inputCtrl.inputCtrlDis {
        background-color: #E5E5E5
    }

.inputRow .inputCtrlDate {
    width: 100%;
    height: 53px;
    padding: 0 33px 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 37px;
    border-bottom: 1px solid #DDDDDD;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    outline: none;
    background-color: transparent
}

.inputRow .textCtrl {
    display: block;
    height: 172px;
    padding: 19px;
    resize: none;
    width: 100%;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    outline: none
}

    .inputRow .textCtrl::placeholder {
        font-family: 'Open Sans', sans-serif;
        color: #DDDDDD
    }

    .inputRow .textCtrl ::-webkit-input-placeholder {
        font-family: 'Open Sans', sans-serif
    }

    .inputRow .textCtrl :-moz-placeholder {
        font-family: 'Open Sans', sans-serif
    }

    .inputRow .textCtrl ::-moz-placeholder {
        font-family: 'Open Sans', sans-serif
    }

    .inputRow .textCtrl :-ms-input-placeholder {
        font-family: 'Open Sans', sans-serif
    }

.inputRow .validateText {
    position: absolute;
    bottom: -20px;
    right: 5px;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    color: #ff0000
}

.inputRow .icon {
    position: absolute;
    right: 14px;
    bottom: 12px
}

    .inputRow .icon.iconDis svg path {
        fill: #707070
    }

    .inputRow .icon.iconHov {
        width: 20px;
        height: 20px;
        bottom: 17px
    }

        .inputRow .icon.iconHov .hov {
            display: none
        }

        .inputRow .icon.iconHov:hover .status {
            opacity: 1;
            pointer-events: all;
            cursor: pointer;
            z-index: 1
        }

        .inputRow .icon.iconHov:hover .hov {
            display: block
        }

        .inputRow .icon.iconHov:hover .def {
            display: none
        }

        .inputRow .icon.iconHov:hover svg path {
            fill: var(--theme-colour2)
        }

        .inputRow .icon.iconHov .status {
            position: absolute;
            right: 0;
            top: 27px;
            width: 280px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: #707070;
            padding: 12px;
            border-radius: 2px;
            background-color: var(--white);
            transition: ease-in-out .4s;
            opacity: 0;
            pointer-events: none;
            cursor: pointer;
            white-space: break-spaces;
            -webkit-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21);
            -moz-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21);
            box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.21)
        }

@media (max-width: 480px) {
    .inputRow .icon.iconHov .status {
        right: -13px;
        top: -45px;
        width: 217px;
        font-size: 10px;
        line-height: 13px;
        padding: 7px;
        white-space: break-spaces
    }
}

.inputRow .select2Ctrl .select2-container {
    border: solid 1px #F7F9FA;
    background-color: #F7F9FA;
    width: 100% !important;
    border-radius: 4px
}

    .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
        height: 40px;
        display: flex;
        align-items: center;
        outline: 0
    }

.inputRow .inputRow .heightAdj .select2-container .selection .select2-selection--single {
    height: 70px !important
}

.inputRow .heightAdjSec .select2-container .selection .select2-selection--single {
    height: 70px !important
}

.inputRow .heightAdjSec .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 55px
}

.inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
    padding: 0 33px 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343
}

.inputRow .heightAdjSec .select2-container .selection .select2-selection--single .select2-selection__rendered {
    color: #A8A8A8 !important
}

.inputRow .heightAdjSec .select2-container .selection .select2-selection--single {
    height: 70px !important
}

.inputRow .heightAdjS .select2-container .selection .select2-selection--single {
    width: 100%;
    height: 50px;
    font-size: 14px;
    font-weight: 400;
    background-color: var(--lightBg);
    border-radius: 6px;
    border: none
}

.inputRow .heightAdj .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 55px
}

.inputRow .heightAdj .select2-container .selection .select2-selection--single {
    height: 70px !important
}

.inputRow .inputRow .heightAdjSec .select2-container .selection .select2-selection--single .select2-selection__arrow {
    height: 55px
}

.inputRow .select2-container--default .select2-selection--single {
    border: 1px solid #DDDDDD;
    border-radius: 4px
}

    .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none
    }

    .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
        background-image: url(../images/searchArrow.png);
        background-position: center center;
        background-repeat: no-repeat;
        top: 8px;
        right: 8px
    }

.inputRow .location {
    background-color: #F7F9FA;
    display: grid;
    grid-template-columns: 1fr 192px;
    column-gap: 18px;
    align-items: center;
    padding: 6px;
    border-radius: 4px
}

@media (max-width: 767px) {
    .inputRow .location {
        grid-template-columns: 1fr
    }
}

.inputRow .location .select2Ctrl .select2-container {
    border: solid 1px #F7F9FA;
    background-color: #F7F9FA;
    width: 100% !important;
    border-radius: 4px
}

    .inputRow .location .select2Ctrl .select2-container .selection .select2-selection--single {
        height: 40px;
        display: flex;
        align-items: center;
        outline: 0
    }

.inputRow .location .inputRow .heightAdjSec .select2-container .selection .select2-selection--single {
    height: 70px !important
}

.inputRow .location .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
    padding: 0 33px 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343
}

.inputRow .location .select2-container--default .select2-selection--single {
    border: 1px solid #DDDDDD;
    border-radius: 4px
}

    .inputRow .location .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none
    }

.inputRow .location .heightAdj .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url(../images/searchArrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    top: 25px;
    right: 8px
}

.inputRow .location .heightAdjSec .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url(../images/alertdrop.png);
    background-position: center center;
    background-repeat: no-repeat;
    top: 25px;
    right: 8px
}

.inputRow .location .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url(../images/searchArrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    top: 8px;
    right: 8px
}

.inputRow .location .inputArea {
    position: relative
}

    .inputRow .location .inputArea .inputCtrl {
        height: 44px;
        padding: 0 53px 0 16px
    }

    .inputRow .location .inputArea .icoMap {
        position: absolute;
        right: 0;
        bottom: 0
    }

.inputRow .map {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #0A3E6D;
    padding: 12px;
    background-color: #E5ECF5;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: ease-in-out .4s;
    position: relative;
    height: 44px
}

    .inputRow .map:hover {
        color: var(--white);
        background-color: var(--theme-colour2)
    }

        .inputRow .map:hover svg path {
            fill: var(--white)
        }

        .inputRow .map:hover img {
            opacity: 1;
            pointer-events: all
        }

    .inputRow .map svg path {
        transition: ease-in-out .4s
    }

    .inputRow .map img {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        color: var(--white);
        padding: 6px 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: ease-in-out .4s;
        position: absolute;
        right: -24px;
        top: 46px;
        width: max-content;
        opacity: 0;
        pointer-events: none;
        z-index: 999
    }

#Keyword .searchFieldArea {
    display: flex;
    max-width: 700px;
    margin: 0 auto 20px
}

    #Keyword .searchFieldArea .searchButton {
        height: 40px;
        width: 160px;
        border: none;
        border-radius: 0 8px 8px 0;
        margin-top: 0
    }

    #Keyword .searchFieldArea .form-control {
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 8px 0 0 8px
    }

#Web .searchFieldArea {
    display: flex;
    max-width: 700px;
    margin: 0 auto 20px
}

    #Web .searchFieldArea .searchButton {
        height: 40px;
        width: 160px;
        border: none;
        border-radius: 0 8px 8px 0;
        margin-top: 0
    }

    #Web .searchFieldArea .form-control {
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 8px 0 0 8px
    }

.alertDetails {
    padding-top: 8px;
    background-color: var(--lightBg);
    padding-bottom: 40px
}

    .alertDetails .topSetting {
        height: 64px;
        background-color: var(--light2Bg);
        display: flex;
        border-radius: 4px;
        align-items: center
    }

        .alertDetails .topSetting .setting {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: 500;
            line-height: 24px
        }

            .alertDetails .topSetting .setting svg {
                margin-left: 16px;
                margin-right: 8px
            }

                .alertDetails .topSetting .setting svg path {
                    fill: #484848
                }

    .alertDetails .alertDetailSection {
        display: grid;
        grid-template-columns: 280px 1fr;
        column-gap: 12px
    }

@media (max-width: 991px) {
    .alertDetails .alertDetailSection {
        grid-template-columns: 1fr
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea {
    height: 100%
}

@media (max-width: 767px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea {
        display: grid;
        column-gap: 12px
    }
}

@media (max-width: 550px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea {
        grid-template-columns: 1fr
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData {
    padding: 8px;
    margin-top: 8px;
    background-color: #fff;
    position: relative;
    border-radius: 5px;
    height: 100%
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .alertheader {
        margin-top: 20px;
        margin-bottom: 13px
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .alertheader label {
            font-size: 16px;
            font-weight: 500;
            line-height: 19px
        }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .catogary {
        background-color: #e69c00;
        position: absolute;
        padding: 4px;
        border-radius: 5px;
        left: -18px;
        top: 30px;
        z-index: 9
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .catogary::after {
            content: "";
            position: absolute;
            left: -97px;
            right: 0;
            top: 31px;
            margin: 0 auto;
            width: 0;
            height: 0;
            border-top: 12px solid #c59020;
            border-left: 17px solid transparent
        }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .catogary span {
            padding: 8px;
            color: #ffff;
            font-size: 12px;
            font-weight: 400;
            line-height: 24px
        }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist {
        background-color: var(--lightBg);
        border: 1px solid #f3f3f3;
        border-radius: 5px;
        padding: 10px 8px
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList {
            display: grid;
            grid-template-columns: 30px 1fr 16px;
            column-gap: 7px;
            align-items: center;
            height: 48px;
            border-radius: 5px;
            margin-bottom: 4px;
            cursor: pointer;
            transition: ease-in-out 0.4s
        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList svg path {
                transition: ease-in-out 0.4s
            }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList.active {
                background-color: var(--theme-colour1)
            }

                .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList.active .icon svg path {
                    fill: #ffffff
                }

                .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList.active .text {
                    color: white
                }

                .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList.active .arrow {
                    display: block
                }

                    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList.active .arrow svg {
                        -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
                        transition: opacity 0.6s, transform 0.6s
                    }

                        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList.active .arrow svg path {
                            fill: #ffffff
                        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList:hover {
                background-color: #ffffff
            }

                .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList:hover .icon {
                    background-color: #fafafa
                }

                    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList:hover .icon svg path {
                        fill: #989999
                    }

                .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList:hover .arrow {
                    display: block
                }

                    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList:hover .arrow svg {
                        fill: black
                    }

                .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList:hover .text {
                    color: black
                }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList .icon {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: ease-in-out 0.4s;
                margin-left: 4px
            }

                .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList .icon.icon-background {
                    background-color: transparent !important
                }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList .text {
                font-size: 16px;
                font-weight: 400;
                line-height: 16px;
                color: var(--theme-text-colour);
                transition: ease-in-out 0.4s
            }

@media (max-width: 767px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList .text {
        font-size: 14px;
        font-weight: 400;
        line-height: 14px
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList .arrow {
    display: none
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .profileDetailList.userDetailListpadd {
    column-gap: 4px !important;
    grid-template-columns: 25px 1fr 10px !important
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList {
    display: grid;
    grid-template-columns: 30px 1fr 16px;
    column-gap: 7px;
    align-items: center;
    padding: 16px 8px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    cursor: pointer;
    transition: ease-in-out 0.4s
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList svg path {
        transition: ease-in-out 0.4s
    }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList.active {
        background-color: #eaeff2
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList.active .icon {
            background-color: #fafafa
        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList.active .icon svg path {
                fill: #0a3e6d
            }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList.active .arrow svg {
            transform: rotate(180deg);
            -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
            transition: opacity 0.6s, transform 0.6s
        }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList:hover {
        background-color: #eaeff2
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList:hover .icon {
            background-color: #fafafa
        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList:hover .icon svg path {
                fill: #0a3e6d
            }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList .icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #dddddd;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 0.4s
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList .icon.icon-background {
            background-color: transparent !important
        }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .userDetailList .text {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        color: var(--theme-text-colour);
        transition: ease-in-out 0.4s
    }

.alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu {
    background-color: #f3f3f3;
    padding-bottom: 4px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .nav-item {
        display: grid;
        grid-template-columns: 1fr 16px;
        column-gap: 7px;
        align-items: center;
        margin-left: 4px;
        margin-right: 4px;
        border-radius: 5px;
        margin-bottom: 2px;
        cursor: pointer;
        transition: ease-in-out 0.4s;
        border-radius: 5px
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .nav-item a {
            font-size: 13px !important;
            font-weight: 400;
            line-height: 18px;
            padding: 20px 0px 20px 12px !important
        }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .nav-item:hover .active {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            transition: ease-in-out 0.4s;
            color: var(--theme-colour1);
            transition: ease-in-out 0.4s
        }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .nav-item:hover {
            background-color: #fff;
            color: #0a3e6d
        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .nav-item:hover svg {
                transform: rotate(275deg);
                -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
                transition: opacity 0.6s, transform 0.6s
            }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .nav-item a {
            font-size: 10px;
            font-weight: 400;
            line-height: 18px;
            padding: 22px 25px 22px 12px
        }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .nav-item.active {
            background-color: #fff
        }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .dropDown {
        width: 194px;
        display: inline;
        background-color: white;
        height: auto;
        opacity: 0;
        position: absolute;
        z-index: 99;
        border-radius: 2px;
        left: 21.2%;
        transform: translateY(55px);
        pointer-events: none;
        transition: ease-in-out 0.4s;
        box-shadow: 0px 0px 4px #c8b4b4;
        z-index: 5;
        -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
        transition: opacity 0.6s, transform 0.6s
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .dropDown .item {
            padding: 18px 0px 18px 16px;
            font-size: 14px;
            font-weight: 400;
            line-height: 19px;
            transition: ease-in-out 0.4s;
            color: #2d2d2d
        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu .dropDown .item:hover {
                background-color: #fafafa;
                transition: ease-in-out 0.4s
            }

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .alertData .profilelist .menuList .sub-menu.active {
        display: block
    }

.alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches {
    border: 1px px solid #f3f3f3;
    border-radius: 5px;
    margin-top: 8px
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .toparea {
        padding: 8px;
        margin-top: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .toparea .headerlist {
            display: flex;
            column-gap: 10px;
            padding: 19px 0px 15px 0px;
            margin-left: 20px
        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .toparea .headerlist span {
                font-size: 16px;
                font-weight: 600;
                line-height: 26px;
                color: #eb6463;
                font-family: Rubik
            }

@media (max-width: 767px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .toparea .headerlist span {
        font-size: 12px;
        font-weight: 600;
        line-height: 26px
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection {
    background-color: var(--lightBg);
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    padding: 10px 8px
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion {
        background-color: var(--lightBg);
        color: #444;
        cursor: pointer;
        padding: 10px 10px 10px 0px;
        width: 100%;
        margin-bottom: 4px;
        border: none;
        text-align: left;
        outline: none;
        color: #252525;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        transition: 0.4s;
        border-radius: 5px
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion:hover {
            background-color: #ffffff
        }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion:hover svg path {
                fill: #69b3de
            }

            .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion:hover .arrow {
                display: block
            }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion svg {
            margin-left: 4px
        }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion label {
            position: relative;
            bottom: 6px;
            left: 8px;
            font-size: 16px;
            font-weight: 400;
            line-height: 26px;
            color: #434343
        }

@media (max-width: 767px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion label {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .accordion:after {
    content: url("../images/downarrow.jpg");
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .activeAcco:after {
    content: url("../images/uparrow.jpg")
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .panel {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul {
        padding-left: 0px
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .accordinSection .discoverMatches .accordinSection .panel .footerbody .accoList ul li a:hover {
            color: blue
        }

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails {
    border: 1px px solid #f3f3f3;
    border-radius: 5px;
    margin-top: 8px
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content {
        padding: 8px;
        margin-top: 8px;
        background-color: #fff;
        position: relative;
        border-radius: 5px
    }

@media (max-width: 767px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .linkIcon {
        display: none
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content img {
    width: 100%;
    cursor: pointer
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content label {
    display: flex;
    justify-content: center
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .qucklink .link {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    column-gap: 10px
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .qucklink .link a img {
        width: 100%;
        cursor: pointer
    }

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .qucklink .smsLinkText {
    padding: 8px 32px 8px 32px;
    display: flex;
    justify-content: center
}

@media (max-width: 680px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .qucklink .smsLinkText {
        padding: 0px
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .downloadlink {
    box-sizing: border-box;
    margin-top: 13px;
    width: 100%;
    height: 49.24px;
    display: flex;
    align-items: center;
    background: #eeeeee;
    border: 0.5px solid #d5d4d4;
    border-radius: 10px
}

    .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .downloadlink .send {
        width: 30%;
        height: 49.24px;
        color: var(--white);
        background: var(--theme-colour1);
        border: 0.5px solid #7b7b7b;
        border-radius: 0px 9px 9px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer
    }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .downloadlink .send:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

        .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .downloadlink .send button {
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-size: 21px;
            font-weight: 400;
            line-height: 25px;
            letter-spacing: 0.11em;
            color: #ffffff
        }

@media (max-width: 767px) {
    .alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .downloadlink .send button {
        font-size: 18px;
        font-weight: 400;
        line-height: 22px
    }
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .downloadlink .phone input {
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    height: 48px;
    letter-spacing: 0.11em;
    border: none;
    background-color: #eeeeee;
    color: #434343;
    outline: none;
    width: 100%
}

.alertDetails .alertDetailSection .alertDetailSide .alertArea .downloadarea .downloadDetails .content .downloadlink .countrycode {
    width: 53.95px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    border-right: 1px solid #d5d4d4;
    height: 48px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px
}

.alertDetails .alertDetailSection .alertSection {
    padding: 20px 24px;
    margin-top: 8px;
    background-color: #fff;
    position: relative;
    border-radius: 5px;
    height: 100%
}

@media (max-width: 767px) {
    .alertDetails .alertDetailSection .alertSection {
        padding: 20px 15px
    }
}

.alertDetails .alertDetailSection .alertSection p {
    color: #494949;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 0 0 16px;
    text-align: left
}

.alertDetails .alertDetailSection .alertSection .header {
    color: var(--theme-colour1);
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 12px
}

.alertDetails .alertDetailSection .alertSection .bodyContent {
    border-top: 1px solid #E5E5E5;
    padding-top: 40px;
    padding-left: 8px;
    padding-bottom: 20px;
    background-color: transparent;
    margin-top: auto
}

    .alertDetails .alertDetailSection .alertSection .bodyContent .toggleSection {
        display: grid;
        grid-template-columns: 48px 1fr;
        margin-bottom: 20px
    }

        .alertDetails .alertDetailSection .alertSection .bodyContent .toggleSection .label {
            margin-left: 12px;
            font-size: 16px;
            font-weight: 500;
            line-height: 19px
        }

    .alertDetails .alertDetailSection .alertSection .bodyContent .toggleSwitch {
        width: 48px;
        height: 24px;
        background-color: #ccc
    }

        .alertDetails .alertDetailSection .alertSection .bodyContent .toggleSwitch span .active {
            height: 16px;
            width: 16px !important;
            left: 1px !important;
            background-color: #fff;
            top: 3px
        }

.alertSwitch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px
}

    .alertSwitch input {
        opacity: 0;
        width: 0;
        height: 0
    }

.alertSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    width: 48px
}

    .alertSlider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s
    }

input:checked + .alertSlider {
    background-color: var(--theme-colour1)
}

input:focus + .alertSlider {
    box-shadow: 0 0 1px var(--theme-colour1)
}

input:checked + .alertSlider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

.alertSlider.round {
    border-radius: 34px
}

    .alertSlider.round:before {
        border-radius: 50%
    }

.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 9999999;
    -webkit-animation: animation-offcanvas-fade-in 0.6s ease 1;
    animation: animation-offcanvas-fade-in 0.6s ease 1;
    background: rgba(0,0,0,0.4)
}

.offcanvas.offcanvas-right.offcanvas-on {
    -webkit-transition: left 0.3s ease, right 0.3s ease, bottom 0.3s ease, top 0.3s ease;
    transition: left 0.3s ease, right 0.3s ease, bottom 0.3s ease, top 0.3s ease;
    right: 0;
    left: auto;
    z-index: 99999999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -395px;
    width: 320px;
    right: 0;
    left: auto;
    background-color: white
}

    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert {
        overflow-y: scroll;
        height: calc((100vh) - 109px)
    }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            background-color: transparent
        }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert::-webkit-scrollbar {
            width: 6px;
            background-color: transparent
        }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert::-webkit-scrollbar-thumb {
            background-color: #000000
        }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab {
            border-radius: 4px;
            margin-top: 4px;
            z-index: 9999;
            border: 1px solid #F3F3F3;
            padding: 6px 12px;
            position: relative
        }

            .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab:hover .dropDownList {
                opacity: 1;
                pointer-events: all;
                cursor: pointer
            }

            .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link {
                display: flex;
                align-items: center
            }

                .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .bg-light {
                    border-radius: 50%
                }

                    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .bg-light .symbol-label {
                        width: 46px;
                        height: 46px
                    }

                        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .bg-light .symbol-label .svg-icon-md {
                            display: flex;
                            justify-content: center;
                            align-items: center
                        }

                            .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .bg-light .symbol-label .svg-icon-md img {
                                width: 49px;
                                height: 49px
                            }

                            .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .bg-light .symbol-label .svg-icon-md label {
                                font-weight: 400;
                                font-size: 16px;
                                color: #d4c9c9
                            }

                .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link.active {
                    background-color: #e6e9eb
                }

                .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text {
                    color: var(--theme-colour1);
                    margin-left: 8px;
                    position: relative;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 19px
                }

                    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .online, .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .offline, .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .horoscope {
                        position: absolute;
                        top: 25px;
                        left: -22px
                    }

                        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .online.offline svg g, .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline svg g, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .offline svg g {
                            fill: #C91E2D !important
                        }

                    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .text-muted {
                        color: #3D3D3D;
                        margin-top: 6px;
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 14px;
                        display: flex
                    }

                        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .navi-item .navi-link .navi-text .text-muted .label-inline {
                            position: relative;
                            left: 95px;
                            bottom: 12px;
                            background-color: var(--theme-colour1);
                            color: white;
                            font-size: 10px;
                            border-radius: 22px;
                            width: 15px;
                            height: 15px;
                            display: flex;
                            align-items: center;
                            justify-content: center
                        }

            .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList {
                width: 260px;
                background-color: white;
                height: auto;
                opacity: 0;
                position: fixed;
                z-index: 99;
                border-radius: 2px;
                top: auto;
                pointer-events: none;
                border: 1px solid #d0cdcd;
                padding: 10px;
                left: -276px;
                transform: translateY(-50px)
            }

@media (max-width: 615px) {
    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList {
        left: 0px
    }
}

.offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList::after {
    position: absolute;
    content: "";
    width: 0;
    bottom: 10;
    height: 0;
    z-index: 1;
    top: 10px;
    right: -10px;
    border-top: 10px solid transparent;
    border-left: 10px solid #ffffff;
    border-bottom: 10px solid transparent
}

.offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .headerContent {
    display: flex;
    align-items: center;
    padding-bottom: 8px
}

    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .headerContent .imageArea {
        width: 75px;
        height: 75px;
        border-radius: 4px
    }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .headerContent .imageArea img {
            width: 100%;
            border-radius: 4px
        }

    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .headerContent .imgLabel {
        margin-left: 8px
    }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .headerContent .imgLabel .name {
            font-size: 16px;
            font-weight: 500;
            line-height: 19px;
            color: var(--theme-colour1)
        }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .headerContent .imgLabel .code {
            color: #707070;
            font-size: 12px;
            font-weight: 400;
            line-height: 14px
        }

.offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .bodyContent {
    padding-top: 8px;
    border-top: 1px solid #F2F2F2
}

    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .bodyContent .content {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        margin-bottom: 8px;
        color: #000000
    }

    .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .bodyContent .button {
        color: white;
        display: flex;
        justify-content: center;
        background: var(--theme-colour1);
        width: 89px;
        height: 30px;
        border-radius: 4px;
        cursor: pointer
    }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .bodyContent .button button {
            border: none;
            background-color: transparent;
            text-align: center;
            color: #ffffff;
            font-size: 12px;
            font-weight: 400;
            line-height: 14px
        }

        .offcanvas.offcanvas-right.offcanvas-on .wrapAlert .recentTab .dropDownList .content .bodyContent .button:hover {
            background-color: #2196F3
        }

.offcanvas .offcanvas-content {
    margin: 8px
}

    .offcanvas .offcanvas-content::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: transparent
    }

    .offcanvas .offcanvas-content::-webkit-scrollbar {
        width: 6px;
        background-color: transparent
    }

    .offcanvas .offcanvas-content::-webkit-scrollbar-thumb {
        background-color: #000000
    }

    .offcanvas .offcanvas-content .container {
        display: flex;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
        height: 40px;
        padding: 8px;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        background-color: var(--lightBg);
        color: var(--theme-colour1);
        margin-bottom: 2px
    }

        .offcanvas .offcanvas-content .container svg {
            margin-right: 10px
        }

            .offcanvas .offcanvas-content .container svg #Path_4746 {
                fill: var(--theme-colour1)
            }

        .offcanvas .offcanvas-content .container form {
            color: #555;
            display: flex;
            padding: 2px;
            border-radius: 35px;
            background-color: #e6e9eb
        }

            .offcanvas .offcanvas-content .container form input[type="search"] {
                border: none;
                background: transparent;
                margin: 0;
                padding: 7px 8px;
                font-size: 14px;
                color: inherit;
                border: 1px solid #ffffff00;
                width: 100%
            }

                .offcanvas .offcanvas-content .container form input[type="search"]::placeholder {
                    color: #bbb
                }

                .offcanvas .offcanvas-content .container form input[type="search"]:focus {
                    box-shadow: 0 0 3px 0 #1183d6;
                    border-color: #1183d6;
                    outline: none
                }

            .offcanvas .offcanvas-content .container form button {
                text-indent: -999px;
                overflow: hidden;
                width: 40px;
                padding: 0;
                margin: 0;
                border: 1px solid transparent;
                border-radius: inherit;
                background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
                cursor: pointer;
                opacity: 0.7
            }

                .offcanvas .offcanvas-content .container form button:hover {
                    opacity: 1
                }

                .offcanvas .offcanvas-content .container form button:focus {
                    box-shadow: 0 0 3px 0 #1183d6;
                    border-color: #1183d6;
                    outline: none
                }

    .offcanvas .offcanvas-content .close {
        cursor: pointer;
        position: absolute;
        top: 4%;
        left: -65px;
        width: 12%;
        opacity: 0.8;
        right: 0%;
        padding: 12px 16px;
        transform: translate(0%, -50%)
    }

        .offcanvas .offcanvas-content .close:hover svg g g path {
            fill: var(--theme-colour1)
        }

        .offcanvas .offcanvas-content .close:hover svg g #Path_5907 {
            fill: white
        }

        .offcanvas .offcanvas-content .close svg #Path_5907 {
            fill: var(--theme-colour1)
        }

    .offcanvas .offcanvas-content .navi {
        position: relative;
        transform: scale(1)
    }

    .offcanvas .offcanvas-content .inputWrp {
        display: flex;
        align-items: center;
        position: relative
    }

        .offcanvas .offcanvas-content .inputWrp .formcontrol {
            background-color: transparent
        }

        .offcanvas .offcanvas-content .inputWrp .fsClear {
            width: 22px;
            height: 22px;
            position: absolute;
            right: 41px;
            top: 12px;
            background-color: #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1;
            transition: ease-in-out .4s
        }

            .offcanvas .offcanvas-content .inputWrp .fsClear svg {
                width: 10px;
                height: 10px;
                transition: ease-in-out .4s
            }

            .offcanvas .offcanvas-content .inputWrp .fsClear:hover svg path {
                fill: var(--themeColour1)
            }

        .offcanvas .offcanvas-content .inputWrp .fIcon {
            position: absolute;
            cursor: pointer
        }

            .offcanvas .offcanvas-content .inputWrp .fIcon svg path, .offcanvas .offcanvas-content .inputWrp .fIcon svg rect, .offcanvas .offcanvas-content .inputWrp .fIcon svg polygon {
                fill: #a9a9a9
            }

        .offcanvas .offcanvas-content .inputWrp.iconRight .fIcon {
            right: 17px;
            top: 12px
        }

        .offcanvas .offcanvas-content .inputWrp.iconRight .formcontrol {
            font-size: 12px;
            padding-right: 68px;
            border: 1px solid #ECF0F3;
            background-color: #ECF0F3;
            border-radius: 26px;
            height: 48px;
            padding-left: 23px
        }

.lds-dual-ring {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    align-items: center;
    justify-content: center
}

    .lds-dual-ring::after {
        content: " ";
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid var(--theme-colour1);
        border-color: var(--theme-colour1) transparent var(--theme-colour1) transparent;
        animation: lds-dual-ring 1.2s linear infinite
    }

    .lds-dual-ring::before {
        content: " ";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: var(--theme-colour1) 12
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.tabmsg {
    overflow: hidden;
    background-color: #f1f1f1;
    width: 100%;
    padding: 6px
}

    .tabmsg button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
        width: 50%;
        height: 30px;
        border-radius: 4px;
        color: var(--theme-colour1);
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

        .tabmsg button:hover {
            background-color: var(--theme-colour1)
        }

        .tabmsg button:hover {
            background-color: var(--theme-colour1);
            color: white
        }

        .tabmsg button.active {
            background-color: var(--theme-colour1);
            color: white
        }

.tabmsgcontent {
    display: none;
    border-top: none
}

.topright {
    float: right;
    cursor: pointer;
    font-size: 28px
}

.contactUSSection {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding-bottom: 50px;
    width: 100%;
    padding: 120px 180px;
    position: relative
}

    .contactUSSection::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.2)
    }

    .contactUSSection .innerBannerCnt {
        z-index: 1;
        position: relative;
        text-align: center;
        width: 635px;
        margin: auto;
        padding-top: 35px
    }

@media (max-width: 767px) {
    .contactUSSection .innerBannerCnt {
        width: 100%
    }
}

.contactUSSection .innerBannerCnt p {
    text-align: center
}

.contactUSSection h2 {
    font-size: 49px;
    font-weight: 400;
    line-height: 65px;
    color: var(--white);
    margin: 20px 0
}

@media (max-width: 767px) {
    .contactUSSection h2 {
        font-size: 35px;
        font-weight: 500;
        line-height: 37px
    }
}

@media (max-width: 480px) {
    .contactUSSection h2 {
        font-size: 28px;
        font-weight: 500;
        line-height: 32px
    }
}

.contactUSSection p {
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    color: var(--white)
}

@media (max-width: 767px) {
    .contactUSSection p {
        font-size: 15px;
        font-weight: 400;
        line-height: 20px
    }
}

@media (max-width: 991px) {
    .contactUSSection {
        padding: 10px
    }
}

.aboutIcnSec .iconList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
    height: auto;
    border-radius: 8px;
    width: 100%;
    margin: auto;
    padding: 5px 32px;
    margin-top: -60px;
    z-index: 1;
    position: relative
}

@media (max-width: 1024px) {
    .aboutIcnSec .iconList {
        grid-template-columns: 1fr 1fr;
        margin-top: 0px
    }
}

@media (max-width: 680px) {
    .aboutIcnSec .iconList {
        grid-template-columns: 1fr;
        height: auto;
        padding: 0px;
        max-width: 320px;
        margin-top: 8px
    }
}

.aboutIcnSec .iconList .list {
    display: flex;
    align-items: center;
    column-gap: 8px;
    border: 1px solid var(--lightBg);
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    color: var(--textClr);
    padding: 20px;
    border-radius: 6px;
    background-color: var(--white);
    transition: ease-in-out 0.4s;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.09);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.09);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.09)
}

@media (max-width: 767px) {
    .aboutIcnSec .iconList .list {
        padding: 8px
    }
}

.aboutIcnSec .iconList .list .hov {
    opacity: 0;
    transition: ease-in-out 0.4s;
    width: 0
}

.aboutIcnSec .iconList .list .def {
    transition: ease-in-out 0.4s
}

.aboutIcnSec .iconList .list:hover .def {
    opacity: 0;
    width: 0
}

.aboutIcnSec .iconList .list:hover .hov {
    opacity: 1;
    width: auto
}

.aboutIcnSec .iconList .list:hover .content .icon svg #Path_4775 {
    fill: #3a6da1
}

.aboutIcnSec .iconList .list:hover .content .icon svg #Path_4780 {
    fill: #4d8538
}

.aboutIcnSec .iconList .list:hover .content .icon svg #Path_4762 {
    fill: #66baed
}

.aboutIcnSec .iconList .list:hover .content .icon svg #Group_1451-2 path {
    fill: #3d4159
}

.aboutIcnSec .iconList .list .content .subContent label {
    color: var(--theme-colour1);
    font-size: 16px;
    font-weight: 500;
    line-height: 30px
}

.aboutIcnSec .iconList .list .content .subContent .email {
    color: #2D2D2D;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.contactDetailsInt .template-container .addressDetails {
    display: grid;
    grid-template-columns: 300px 1fr;
    column-gap: 113px;
    margin-top: 55px
}

@media (max-width: 991px) {
    .contactDetailsInt .template-container .addressDetails {
        grid-template-columns: 1fr;
        margin-top: 10px
    }
}

.contactDetailsInt .template-container .addressDetails .IntTrade {
    margin-top: 16px
}

@media (max-width: 991px) {
    .contactDetailsInt .template-container .addressDetails .IntTrade {
        padding: 10px
    }
}

@media (max-width: 480px) {
    .contactDetailsInt .template-container .addressDetails .IntTrade {
        padding: 5px
    }
}

.contactDetailsInt .template-container .addressDetails .IntTrade .header {
    display: flex;
    align-items: center;
    margin-bottom: 27px
}

    .contactDetailsInt .template-container .addressDetails .IntTrade .header .red {
        font-size: 24px;
        font-weight: 700;
        line-height: 26px;
        color: #2D2D2D
    }

    .contactDetailsInt .template-container .addressDetails .IntTrade .header .green {
        margin-left: 4px;
        font-size: 20px;
        font-weight: 700;
        line-height: 27px;
        color: #479e45
    }

.contactDetailsInt .template-container .addressDetails .IntTrade .underLine {
    background-color: var(--theme-colour1);
    width: 132px;
    height: 1px
}

.contactDetailsInt .template-container .addressDetails .IntTrade .details p {
    font-style: normal
}

.contactDetailsInt .template-container .addressDetails .IntTrade .details img {
    max-width: 288px;
    width: 100%
}

.contactDetailsInt .template-container .addressDetails .IntTrade .details .detailSection {
    display: flex;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 20px
}

.contactDetailsInt .template-container .addressDetails .IntForm {
    padding: 0px 0px 60px 0px
}

@media (max-width: 991px) {
    .contactDetailsInt .template-container .addressDetails .IntForm {
        padding: 10px
    }
}

@media (max-width: 480px) {
    .contactDetailsInt .template-container .addressDetails .IntForm {
        padding: 5px
    }
}

.contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px
}

    .contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRow .inputRow {
        position: relative;
        margin-bottom: 26px
    }

        .contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRow .inputRow .inputCtrl {
            width: 100%;
            height: 62px;
            padding: 0 33px 0 16px;
            font-size: 14px;
            font-weight: 400;
            line-height: 37px;
            background-color: var(--lightBg);
            border-radius: 6px;
            border: none
        }

        .contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRow .inputRow .heightAdjS .select2-container .selection .select2-selection--single {
            height: 62px
        }

            .contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRow .inputRow .heightAdjS .select2-container .selection .select2-selection--single .select2-selection__arrow {
                top: 18px
            }

.contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRowAbn .inputRow {
    position: relative
}

    .contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRowAbn .inputRow .textCtrl {
        display: block;
        height: 172px;
        padding: 19px;
        resize: none;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #434343;
        background-color: var(--lightBg);
        border-radius: 6px;
        border: none;
        margin-bottom: 20px
    }

        .contactDetailsInt .template-container .addressDetails .IntForm .formArea .formRowAbn .inputRow .textCtrl::placeholder {
            color: #75758b
        }

.contactDetailsInt .template-container .addressDetails .IntForm .formArea .submitBtn {
    display: flex;
    align-items: center;
    justify-content: end
}

    .contactDetailsInt .template-container .addressDetails .IntForm .formArea .submitBtn button {
        padding: 12px 32px;
        color: var(--white);
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 4px
    }

        .contactDetailsInt .template-container .addressDetails .IntForm .formArea .submitBtn button:hover {
            background-color: var(--theme-colour2)
        }

.locateUs {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding-bottom: 50px;
    width: 100%;
    height: auto
}

    .locateUs .locateUsView .template-container .headerArea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

        .locateUs .locateUsView .template-container .headerArea .headC {
            margin-top: 40px;
            font-size: 19px;
            font-weight: 700;
            line-height: 26px
        }

        .locateUs .locateUsView .template-container .headerArea .subHead {
            margin-top: 14px;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px
        }

        .locateUs .locateUsView .template-container .headerArea .search-area {
            margin-top: 17px
        }

            .locateUs .locateUsView .template-container .headerArea .search-area .inputWrp {
                display: flex;
                align-items: center;
                position: relative
            }

                .locateUs .locateUsView .template-container .headerArea .search-area .inputWrp input {
                    width: 820px;
                    height: 62px;
                    border-radius: 4px;
                    background-color: #ffffff;
                    padding: 5px 60px 5px 20px;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 16px;
                    color: #434343;
                    border: none;
                    outline: none
                }

@media (max-width: 991px) {
    .locateUs .locateUsView .template-container .headerArea .search-area .inputWrp input {
        width: 600px
    }
}

@media (max-width: 991px) {
    .locateUs .locateUsView .template-container .headerArea .search-area .inputWrp input {
        width: 400px
    }
}

@media (max-width: 480px) {
    .locateUs .locateUsView .template-container .headerArea .search-area .inputWrp input {
        width: 300px
    }
}

.locateUs .locateUsView .template-container .headerArea .search-area .inputWrp .searchIcon {
    width: 52px;
    height: 52px;
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: ease-in-out .4s
}

    .locateUs .locateUsView .template-container .headerArea .search-area .inputWrp .searchIcon svg #Path_4794 {
        fill: var(--theme-colour1)
    }

    .locateUs .locateUsView .template-container .headerArea .search-area .inputWrp .searchIcon svg rect {
        fill: var(--lightBg)
    }

.tabCo {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

    .tabCo button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px
    }

        .tabCo button:hover {
            text-decoration: underline;
            color: var(--theme-colour1)
        }

        .tabCo button.active {
            text-decoration: underline;
            color: var(--theme-colour1)
        }

.tabCocontent {
    display: none;
    padding: 6px 12px;
    border-top: none
}

@media (max-width: 991px) {
    .tabCocontent {
        padding: 0px
    }
}

.tabCocontent .listView {
    display: grid;
    grid-template-columns: 307px 1fr;
    column-gap: 12px
}

@media (max-width: 991px) {
    .tabCocontent .listView {
        grid-template-columns: 1fr;
        margin-top: 10px
    }
}

.tabCocontent .listView .coporsteOffice {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding-bottom: 50px;
    width: 100%;
    height: 260px;
    border-radius: 6px;
    position: relative
}

    .tabCocontent .listView .coporsteOffice .contentLoc {
        padding: 30px 16px
    }

@media (max-width: 991px) {
    .tabCocontent .listView .coporsteOffice .contentLoc {
        padding: 8px
    }
}

.tabCocontent .listView .coporsteOffice .contentLoc .headerloc {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #FFFFFF
}

.tabCocontent .listView .coporsteOffice .contentLoc .addressLoc {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #FFFFFF;
    margin-top: 30px
}

.tabCocontent .listView .coporsteOffice .contentLoc .phone {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #FFFFFF;
    display: flex;
    margin-top: 30px;
    margin-bottom: 12px
}

    .tabCocontent .listView .coporsteOffice .contentLoc .phone svg {
        margin-right: 10px
    }

.tabCocontent .listView .coporsteOffice .contentLoc .mail {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #FFFFFF;
    display: flex
}

    .tabCocontent .listView .coporsteOffice .contentLoc .mail svg {
        margin-right: 10px
    }

.tabCocontent .listView .ListItem {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px
}

@media (max-width: 1024px) {
    .tabCocontent .listView .ListItem {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 615px) {
    .tabCocontent .listView .ListItem {
        grid-template-columns: 1fr
    }
}

.tabCocontent .listView .ListItem .listView {
    padding: 8px 18px;
    height: 135px;
    background-size: cover;
    border-radius: 6px;
    display: flex;
    flex-direction: column
}

@media (max-width: 767px) {
    .tabCocontent .listView .ListItem .listView {
        width: 280px;
        height: auto
    }
}

@media (max-width: 615px) {
    .tabCocontent .listView .ListItem .listView {
        width: 100%
    }
}

.tabCocontent .listView .ListItem .listView .location {
    display: grid;
    grid-template-columns: 26px 1fr 40px;
    column-gap: 8px;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--theme-colour1)
}

    .tabCocontent .listView .ListItem .listView .location svg {
        margin-right: 8px
    }

    .tabCocontent .listView .ListItem .listView .location .contactUsLink svg path {
        fill: var(--theme-colour1)
    }

    .tabCocontent .listView .ListItem .listView .location .contactUsLink svg circle {
        fill: var(--lightBg)
    }

    .tabCocontent .listView .ListItem .listView .location .contactUsLink {
        position: relative
    }

        .tabCocontent .listView .ListItem .listView .location .contactUsLink:hover svg {
            cursor: pointer
        }

            .tabCocontent .listView .ListItem .listView .location .contactUsLink:hover svg #Ellipse_266 {
                fill: var(--theme-colour1)
            }

            .tabCocontent .listView .ListItem .listView .location .contactUsLink:hover svg g path {
                fill: #fff
            }

        .tabCocontent .listView .ListItem .listView .location .contactUsLink:hover span {
            opacity: 1
        }

        .tabCocontent .listView .ListItem .listView .location .contactUsLink span {
            position: absolute;
            color: #fff;
            background-color: #434343;
            padding: 10px;
            font-size: 14px;
            opacity: 0;
            transition: 0.3s;
            line-height: 17px;
            border-radius: 5px;
            top: -40px;
            left: -90px;
            white-space: nowrap
        }

.tabCocontent .listView .ListItem .listView .phone {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 8px;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px
}

    .tabCocontent .listView .ListItem .listView .phone svg {
        margin-right: 8px;
        margin-left: 8px
    }

        .tabCocontent .listView .ListItem .listView .phone svg path {
            fill: var(--light2Bg)
        }

.tabCocontent .listView .ListItem .listView .email {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 8px;
    align-items: center;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px
}

    .tabCocontent .listView .ListItem .listView .email svg {
        margin-right: 8px;
        margin-left: 6px
    }

        .tabCocontent .listView .ListItem .listView .email svg path {
            fill: var(--light2Bg)
        }

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

.chat-now {
    font: 400 12px "Rubik",sans-serif;
    color: #14a309;
    position: relative;
    text-align: center;
    padding: 20px 0 0;
    margin: 0 0 0 15px;
    text-transform: capitalize
}

    .chat-now:before {
        background: url(../images/chat-now.svg) no-repeat;
        position: absolute;
        top: 0;
        left: 50%;
        content: '';
        width: 20px;
        height: 20px;
        background-size: 20px;
        margin-left: -10px
    }

.ui-widget-content {
    z-index: 99999999
}

.edit-location .select2-container {
    z-index: 99999999
}

.button-anime {
    background: rgba(0,0,0,0.98);
    pointer-events: none;
    display: block;
    z-index: 100;
    border: 1px solid rgba(0,0,0,0.98);
    opacity: 0
}

    .button-anime:before {
        background: url(../images/button-animation.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 32px;
        height: 32px;
        background-size: 32px;
        margin: -16px 0 0 -16px
    }

.disabled {
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    transition: all .2s ease-in;
    opacity: 1;
    pointer-events: all
}

.need-assistance {
    background: #e7e7e7;
    text-align: center;
    padding: 90px 10px 20px;
    margin-top: 10px;
    position: relative
}

    .need-assistance:before {
        background: url(../images/operator.svg) no-repeat;
        position: absolute;
        top: 15px;
        left: 50%;
        content: '';
        width: 66px;
        height: 66px;
        margin-left: -33px;
        background-size: 66px
    }

    .need-assistance p {
        font: 400 18px "Rubik",sans-serif;
        color: #2f2f2f;
        text-transform: uppercase;
        padding: 0 20px;
        text-align: center !important
    }

        .need-assistance p strong {
            font: 700 18px "Rubik",sans-serif
        }

    .need-assistance a {
        font: 700 22px "Rubik",sans-serif;
        color: var(--theme-colour1);
        position: relative;
        padding-left: 35px
    }

        .need-assistance a:before {
            background: url(../images/phone.svg) no-repeat;
            position: absolute;
            top: 4px;
            left: 0;
            content: '';
            width: 26px;
            height: 26px;
            background-size: 26px
        }

.add-yours {
    position: absolute;
    top: 310px;
    right: 30px;
    font: 700 14px "Rubik",sans-serif;
    color: var(--white);
    text-transform: capitalize;
    padding-left: 30px;
    display: inline-block;
    margin-top: 10px
}

    .add-yours:before {
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/pen-yellow.svg) no-repeat;
        content: '';
        width: 20px;
        top: -3px !important;
        height: 20px;
        background-size: 20px
    }

    .add-yours span {
        position: relative;
        padding: 0 2px
    }

        .add-yours span:after {
            position: absolute;
            bottom: -1px;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #fdd606
        }

footer {
    background: var(--theme-colour1);
    padding: 30px 15px
}

    footer .premium {
        width: 180px;
        margin: auto auto 15px
    }

        footer .premium a {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            display: block;
            text-transform: uppercase;
            text-align: center;
            overflow: hidden;
            position: relative;
            border: 1px solid #608eb7;
            margin-bottom: 15px;
            background: #fdd606
        }

            footer .premium a span {
                padding: 4px 10px 4px 40px;
                background: var(--theme-colour1);
                color: var(--white);
                position: relative;
                display: inline-block
            }

                footer .premium a span:before {
                    position: absolute;
                    top: 4px;
                    left: 10px;
                    content: '';
                    width: 20px;
                    height: 20px
                }

        footer .premium [class^='col-']:nth-child(1) a span:before {
            background: url(../images/premium1.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(2) a span:before {
            background: url(../images/premium2.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(3) a span:before {
            background: url(../images/premium3.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(4) a span:before {
            background: url(../images/premium4.svg) no-repeat;
            background-size: 20px
        }

    footer .footer-links .title {
        font: 400 14px "Rubik",sans-serif;
        position: relative;
        text-transform: uppercase;
        color: var(--white);
        padding-bottom: 5px;
        margin-bottom: 20px;
        height: 25px
    }

        footer .footer-links .title:after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 25px;
            height: 1px;
            background: #fdd606
        }

    footer .footer-links a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        color: #f9f9f9;
        text-transform: capitalize;
        margin-bottom: 15px;
        padding-left: 25px;
        position: relative
    }

        footer .footer-links a:before {
            position: absolute;
            top: 3px;
            left: 0;
            background: url(../images/right-arrow.svg) no-repeat;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    footer .footer-logo {
        position: relative;
        text-align: center;
        margin: 20px 0
    }

        footer .footer-logo:before {
            position: absolute;
            top: 50%;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #6591b9
        }

        footer .footer-logo a {
            background: var(--theme-colour1);
            padding: 0 30px;
            position: relative;
            z-index: 10
        }

    footer .footer-social {
        text-align: center
    }

        footer .footer-social a {
            display: block;
            margin-bottom: 10px
        }

            footer .footer-social a.social {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                width: 28px;
                height: 28px;
                margin: auto 2px 10px
            }

                footer .footer-social a.social.fb {
                    background: url(../images/fb.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.in {
                    background: url(../images/in.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.tw {
                    background: url(../images/tw.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.yt {
                    background: url(../images/yt.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.pn {
                    background: url(../images/pn.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.li {
                    background: url(../images/li.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.bl {
                    background: url(../images/bl.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

        footer .footer-social .social {
            display: inline-block;
            vertical-align: middle
        }

    footer .privacy-terms a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        margin-bottom: 10px;
        text-transform: capitalize;
        color: #f9f9f9;
        text-align: center
    }

.footnote {
    background: #074983;
    text-align: center;
    overflow: hidden;
    padding: 0 15px;
    position: relative;
    z-index: 1000
}

    .footnote span {
        font: 400 12px "Rubik",sans-serif;
        color: #ececec;
        text-transform: capitalize;
        padding: 12px 0;
        display: inline-block
    }

        .footnote span a {
            color: #ececec
        }

.notify-popup, .message-popup, .default-popup, .default-popup2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    z-index: 5000;
    opacity: 0;
    display: none
}

    .notify-popup.higher-zindex, .message-popup.higher-zindex, .default-popup.higher-zindex, .default-popup2.higher-zindex {
        z-index: 99999999
    }

    .default-popup .default-section, .default-popup2 .default-section {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        width: 90%;
        text-align: center;
        background: var(--theme-colour1);
        margin: auto;
        padding: 30px;
        position: relative
    }

        .default-popup .default-section .close-default-popup, .default-popup2 .default-section .close-default-popup {
            background: url(../images/close-white.svg) no-repeat;
            position: absolute;
            top: 5px;
            right: 5px;
            width: 30px;
            height: 30px;
            background-size: 15px;
            background-position: center;
            cursor: pointer
        }

            .default-popup .default-section .close-default-popup.blue, .default-popup2 .default-section .close-default-popup.blue {
                background: url(../images/close-blue.svg) no-repeat;
                background-size: 15px;
                background-position: center
            }

        .default-popup .default-section.editor, .default-popup2 .default-section.editor {
            text-align: left
        }

        .default-popup .default-section.fb-form, .default-popup2 .default-section.fb-form {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            background: var(--white);
            padding: 30px 15px
        }

        .default-popup .default-section.service-details, .default-popup2 .default-section.service-details {
            padding-top: 40px;
            padding-bottom: 40px
        }

    .default-popup .pwd-guide, .default-popup2 .pwd-guide {
        background: var(--white);
        border: 1px solid var(--theme-colour1)
    }

        .default-popup .pwd-guide .title, .default-popup2 .pwd-guide .title {
            font: 400 18px "Rubik",sans-serif;
            color: var(--theme-colour1);
            text-transform: capitalize;
            text-align: left;
            margin-bottom: 20px
        }

            .default-popup .pwd-guide .title span, .default-popup2 .pwd-guide .title span {
                position: relative;
                padding-right: 25px
            }

                .default-popup .pwd-guide .title span:after, .default-popup2 .pwd-guide .title span:after {
                    background: url(../images/title-down-arrow-blue.svg) no-repeat;
                    position: absolute;
                    top: 5px;
                    right: 0;
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-size: 15px
                }

        .default-popup .pwd-guide ul, .default-popup2 .pwd-guide ul {
            margin: 0;
            padding: 0
        }

            .default-popup .pwd-guide ul li, .default-popup2 .pwd-guide ul li {
                font: 400 12px "Rubik",sans-serif;
                color: #828282;
                padding-left: 20px;
                position: relative;
                list-style: none;
                margin-bottom: 10px;
                text-align: left
            }

                .default-popup .pwd-guide ul li:before, .default-popup2 .pwd-guide ul li:before {
                    background: url(../images/list-before.svg) no-repeat;
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 12px;
                    height: 12px;
                    background-size: 12px
                }

.confirm-deactivate a, .confirm-deletion a, .account-deleted a, .confirm-reactivate a, .message a {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font: 400 14px "Rubik",sans-serif;
    background: #fdd606;
    color: var(--theme-colour1);
    text-transform: uppercase;
    display: inline-block;
    width: 100px;
    padding: 4px 0;
    border: 1px solid transparent
}

    .confirm-deactivate a:first-of-type, .confirm-deletion a:first-of-type, .account-deleted a:first-of-type, .confirm-reactivate a:first-of-type, .message a:first-of-type {
        margin-right: 15px
    }

.confirm-deactivate, .confirm-deletion, .confirm-reactivate, .message {
    text-align: center
}

    .confirm-deactivate p, .confirm-deletion p, .confirm-reactivate p, .message p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--white);
        text-align: center;
        margin-bottom: 20px
    }

        .confirm-deactivate p:first-letter, .confirm-deletion p:first-letter, .confirm-reactivate p:first-letter, .message p:first-letter {
            text-transform: uppercase
        }

    .account-deleted a, .message a {
        margin-right: 0
    }

    .account-deleted p, .message p {
        font: 400 20px "Rubik",sans-serif;
        color: var(--white);
        text-align: center
    }

.notify-popup .notify-content, .message-popup .notify-content {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: var(--theme-colour1);
    padding: 140px 30px 60px;
    text-align: center;
    width: 90%;
    margin: auto;
    position: relative
}

    .notify-popup .notify-content:before, .message-popup .notify-content:before {
        position: absolute;
        top: 40px;
        left: 50%;
        content: '';
        width: 80px;
        height: 80px;
        margin-left: -40px
    }

    .notify-popup .notify-content.success:before, .message-popup .notify-content.success:before {
        background: url(../images/success-notification.svg) no-repeat;
        background-size: 80px
    }

    .notify-popup .notify-content.error:before, .message-popup .notify-content.error:before {
        background: url(../images/error-notification.svg) no-repeat;
        background-size: 80px
    }

    .notify-popup .notify-content span, .message-popup .notify-content span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        display: block
    }

    .notify-popup .notify-content .show-ok, .message-popup .notify-content .show-ok {
        display: none;
        margin-top: 20px
    }

    .notify-popup .notify-content .ok, .message-popup .notify-content .ok {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        font: 400 14px "Rubik",sans-serif;
        background: #fdd606;
        color: var(--theme-colour1);
        text-transform: uppercase;
        border: 1px solid transparent;
        display: inline-block;
        width: 100px;
        padding: 4px 0
    }

.message-popup .contact-section, .message-popup .horoscope-section {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: var(--theme-colour1);
    padding: 30px;
    text-align: center;
    width: 90%;
    margin: auto;
    position: relative;
    display: none
}

    .message-popup .contact-section .query, .message-popup .horoscope-section .query {
        color: var(--white);
        text-align: center
    }

    .message-popup .contact-section a, .message-popup .horoscope-section a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        background: #fdd606;
        color: var(--theme-colour1);
        text-transform: uppercase;
        margin: 0 10px;
        padding: 4px 0;
        width: 85px;
        border: 1px solid transparent
    }

        .message-popup .contact-section a.download-horo, .message-popup .horoscope-section a.download-horo {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            background: transparent;
            color: var(--white);
            text-decoration: underline;
            border: none;
            width: auto;
            text-transform: capitalize
        }

            .message-popup .contact-section a.download-horo:hover, .message-popup .horoscope-section a.download-horo:hover {
                border: none
            }

    .message-popup .contact-section .inner, .message-popup .horoscope-section .inner {
        display: none;
        color: var(--white)
    }

    .message-popup .contact-section .msgpopup-close, .message-popup .horoscope-section .msgpopup-close {
        font: 400 12px "Rubik",sans-serif;
        text-transform: capitalize;
        margin: 10px 0 0
    }

    .message-popup .contact-section p a, .message-popup .horoscope-section p a {
        font: 400 12px "Rubik",sans-serif;
        background: transparent;
        margin: 0;
        padding: 0;
        width: auto;
        color: var(--white)
    }

.select-dropdown .select-holder {
    display: block;
    position: relative
}

    .select-dropdown .select-holder:after {
        position: absolute;
        top: 12px;
        right: 0;
        content: '';
        pointer-events: none;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--white);
        display: none
    }

.select-dropdown select {
    font: 400 12px "Rubik",sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--white);
    padding-left: 0;
    color: var(--white)
}

    .select-dropdown select option {
        color: var(--black)
    }

.select-dropdown .caption {
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in;
    position: absolute;
    top: 0;
    left: 0;
    font: 400 10px "Rubik",sans-serif;
    font-style: normal;
    color: #fdd606
}

.select-dropdown.inverse .select-holder:after {
    border-top: 5px solid #878787
}

.select-dropdown.inverse select {
    color: var(--theme-colour1);
    border-bottom: 1px solid #878787
}

.select-dropdown.inverse .caption {
    color: var(--theme-colour1)
}

.select-dropdown.show-validation select {
    border-color: #f00
}

.select-dropdown.show-validation .field-validation-error, .select-dropdown.show-validation .field-validation-valid {
    display: none
}

.placeholder input[type="text"], .placeholder input[type="email"], .placeholder input[type="password"], .placeholder input[type="number"], .placeholder textarea {
    font: 400 12px "Rubik",sans-serif;
    width: 100%;
    height: 28px;
    border: none;
    border-bottom: 1px solid var(--white);
    background: transparent;
    color: var(--white)
}

.placeholder textarea {
    resize: none;
    height: 48px;
    padding: 0
}

.placeholder .caption {
    -webkit-transition: all .15s ease-in;
    -moz-transition: all .15s ease-in;
    transition: all .15s ease-in;
    position: absolute;
    top: 20px;
    left: 0;
    font: 400 12px "Rubik",sans-serif;
    pointer-events: none;
    color: var(--white);
    text-transform: capitalize;
    opacity: 0
}

.placeholder.caption-top .caption {
    font: 400 10px "Rubik",sans-serif;
    top: 0;
    color: #fdd606
}

.placeholder.inverse input[type="text"], .placeholder.inverse input[type="email"], .placeholder.inverse input[type="password"], .placeholder.inverse input[type="number"], .placeholder.inverse textarea {
    border-bottom: 1px solid #747474;
    color: var(--theme-colour1)
}

.placeholder.inverse .caption {
    color: var(--theme-colour1)
}

.placeholder.inverse-black input[type="text"], .placeholder.inverse-black input[type="email"], .placeholder.inverse-black input[type="password"], .placeholder.inverse-black input[type="number"], .placeholder.inverse-black textarea {
    border-bottom: 1px solid #747474;
    color: #525151
}

.placeholder.inverse-black .caption {
    color: #525151
}

.placeholder.orange input[type="text"], .placeholder.orange input[type="email"], .placeholder.orange input[type="password"], .placeholder.orange input[type="number"], .placeholder.orange textarea {
    border-bottom: 1px solid #e76045;
    color: #b2b2b2
}

.placeholder.orange .caption {
    color: #b2b2b2
}

.placeholder.text-area .caption {
    top: 15px
}

.placeholder.text-area.caption-top .caption {
    top: 0
}

.placeholder .dtBox input[type="text"], .placeholder .dtBox input[type="email"], .placeholder .dtBox input[type="password"], .placeholder .dtBox input[type="number"] {
    border-bottom: 1px solid transparent
}

.placeholder.show-validation input[type="text"], .placeholder.show-validation input[type="email"], .placeholder.show-validation input[type="password"], .placeholder.show-validation input[type="number"], .placeholder.show-validation textarea {
    border-color: #f00
}

.placeholder.show-validation .field-validation-error, .placeholder.show-validation .field-validation-valid {
    display: none
}

.relative {
    position: relative;
    padding: 15px 0;
    margin-bottom: 8px
}

    .relative.no-space {
        padding: 0;
        margin: 0
    }

    .relative.text-center {
        text-align: left !important
    }

    .relative.check-box {
        padding-top: 0
    }

    .relative:after {
        position: absolute;
        top: 8px;
        right: 15px;
        content: '';
        width: 15px;
        height: 15px
    }

    .relative.username:after {
        background: url(../images/username.svg) no-repeat;
        background-size: 15px
    }

    .relative.password:after {
        background: url(../images/password.svg) no-repeat;
        background-size: 15px
    }

    .relative.change-pwd:after {
        background: url(../images/lock.svg) no-repeat;
        background-size: 15px;
        top: 20px;
        right: 5px
    }

    .relative.edit-email:after {
        background: url(../images/pen-edit.svg) no-repeat;
        background-size: 15px;
        top: 20px;
        right: 5px
    }

    .relative .field-validation-error, .relative .field-validation-valid, .relative .webname {
        position: absolute;
        bottom: -2px;
        left: 0;
        font: 400 10px "Rubik",sans-serif;
        color: red,2%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block
    }

        .relative .field-validation-error:first-letter, .relative .field-validation-valid:first-letter, .relative .webname:first-letter {
            text-transform: uppercase
        }

    .relative .webname {
        color: #089315
    }

    .relative.username-error input {
        border-color: red !important
    }

    .relative.username-error:after {
        background: url(../images/username-red.svg) no-repeat;
        background-size: 15px
    }

    .relative.password-error input {
        border-color: red !important
    }

    .relative.password-error:after {
        background: url(../images/password-red.svg) no-repeat;
        background-size: 15px
    }

    .relative.alt-validation .field-validation-error, .relative.alt-validation .field-validation-valid {
        color: #ff9800
    }

.about {
    padding: 30px 30px 0px;
    margin-bottom: 72px
}

@media (max-width: 767px) {
    .about {
        padding: 15px 0px 0px 0px;
        margin-bottom: 50px
    }
}

@media (max-width: 480px) {
    .about {
        margin-bottom: 0px
    }
}

.about .title {
    font: 400 24px "Rubik",sans-serif;
    display: block;
    text-align: center;
    text-transform: capitalize;
    color: #292929;
    margin-bottom: 30px
}

    .about .title strong {
        font: 700 24px "Rubik",sans-serif
    }

.about p {
    font: 400 16px "Rubik",sans-serif;
    text-align: center;
    line-height: 30px
}

.about .about-icon {
    text-align: center;
    padding-top: 75px;
    position: relative;
    margin: 30px 0
}

    .about .about-icon:before {
        position: absolute;
        top: 5px;
        left: 50%;
        content: '';
        width: 50px;
        height: 50px;
        margin-left: -25px
    }

    .about .about-icon span {
        font: 400 18px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #292929
    }

.about [class^='col-']:nth-of-type(1) .about-icon:before {
    background: url(../images/about1.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(2) .about-icon:before {
    background: url(../images/about2.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(3) .about-icon:before {
    background: url(../images/about3.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(4) .about-icon:before {
    background: url(../images/about4.png) no-repeat;
    background-size: 50px
}

.about.inverse .title {
    text-transform: uppercase;
    color: var(--theme-colour1)
}

.communities {
    padding-left: 15px;
    padding-right: 15px;
    background: var(--theme-colour1)
}

    .communities .title {
        font: 400 24px "Rubik",sans-serif;
        display: block;
        text-align: center;
        color: var(--white);
        text-transform: capitalize;
        margin-bottom: 30px
    }

        .communities .title strong {
            font: 700 24px "Rubik",sans-serif;
            position: relative;
            padding-bottom: 3px
        }

            .communities .title strong:after {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: #fdd606;
                content: ''
            }

    .communities .caste, .communities .all {
        display: block;
        text-align: center
    }

    .communities .caste {
        font: 400 18px "Rubik",sans-serif;
        padding: 15px 0;
        margin-bottom: 0px;
        color: var(--white);
        text-transform: capitalize;
        display: flex;
        align-items: center
    }

        .communities .caste span {
            position: relative;
            padding-left: 5px;
            display: inline-block;
            text-align: left
        }

@media (max-width: 991px) {
    .communities .caste span {
        min-width: 180px
    }
}

@media (max-width: 767px) {
    .communities .caste span {
        font-size: 16px
    }
}

.communities .caste span:before {
    position: absolute;
    top: -3px;
    left: 0;
    background: url(../images/caste-before.jpg) no-repeat;
    content: '';
    width: 30px;
    height: 30px;
    background-size: 30px;
    display: none
}

.communities .caste span.icn {
    padding-left: 0px;
    display: flex
}

    .communities .caste span.icn svg path {
        fill: var(--white)
    }

.communities .all {
    font: 400 18px "Rubik",sans-serif;
    text-transform: capitalize;
    margin-top: 16px
}

    .communities .all span {
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        padding: 5px 50px 5px 30px;
        background: #fdd606;
        color: #292929;
        position: relative;
        border: 1px solid transparent
    }

        .communities .all span:after {
            position: absolute;
            top: 9px;
            right: 25px;
            background: url(../images/reply-right.svg) no-repeat;
            content: '';
            width: 15px;
            height: 15px;
            background-size: 15px
        }

.communities.inverse {
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width: 767px) {
    .communities.inverse {
        justify-content: initial
    }
}

.about-register {
    background: #f3f3f3;
    padding: 30px;
    text-align: center
}

    .about-register p {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        text-align: center
    }

        .about-register p strong {
            font: 700 24px "Rubik",sans-serif;
            display: block
        }

    .about-register a {
        font: 400 18px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        background: var(--theme-colour1);
        color: var(--white);
        padding: 6px 30px;
        text-transform: uppercase;
        margin: 15px 0 0;
        display: inline-block;
        position: relative;
        border: 1px solid transparent
    }

        .about-register a:after {
            background: url(../images/arrow-down.svg) no-repeat;
            position: absolute;
            bottom: -24px;
            left: 50%;
            width: 18px;
            height: 18px;
            background-size: 18px;
            margin-left: -9px;
            content: ''
        }

.about-intimate {
    padding: 30px
}

    .about-intimate .title {
        text-transform: uppercase;
        color: var(--black);
        text-align: center;
        padding: 75px 0 15px;
        margin-bottom: 20px;
        position: relative
    }

        .about-intimate .title:before, .about-intimate .title:after {
            position: absolute;
            left: 50%;
            content: ''
        }

        .about-intimate .title:before {
            background: url(../images/diadem.png) no-repeat;
            top: 0;
            width: 106px;
            height: 62px;
            margin-left: -53px
        }

        .about-intimate .title:after {
            bottom: 0;
            width: 68px;
            height: 2px;
            background: var(--theme-colour1);
            margin-left: -34px
        }

        .about-intimate .title span, .about-intimate .title em {
            display: block
        }

        .about-intimate .title span {
            font: 700 22px "Rubik",sans-serif;
            margin-bottom: 5px
        }

        .about-intimate .title em {
            font: 400 10px "Rubik",sans-serif;
            font-style: normal
        }

    .about-intimate p {
        text-align: center
    }

.basic {
    padding: 30px
}

    .basic .title {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        margin-bottom: 10px
    }

.spanners {
    margin-top: 15px
}

    .spanners span {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #6f7071;
        position: relative;
        padding: 20px 0 20px 45px
    }

        .spanners span:before {
            position: absolute;
            top: 50%;
            left: 0;
            content: '';
            width: 30px;
            height: 30px;
            margin-top: -15px
        }

        .spanners span.spanner1:before {
            background: url(../images/spanner1.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner2:before {
            background: url(../images/spanner2.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner3:before {
            background: url(../images/spanner3.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner4:before {
            background: url(../images/spanner4.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner5:before {
            background: url(../images/spanner5.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner6:before {
            background: url(../images/spanner6.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner7:before {
            background: url(../images/spanner7.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner8:before {
            background: url(../images/spanner8.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner9:before {
            background: url(../images/spanner9.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner10:before {
            background: url(../images/spanner10.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner11:before {
            background: url(../images/spanner11.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner12:before {
            background: url(../images/spanner12.svg) no-repeat;
            background-size: 30px
        }

.popup-buttons input[type="submit"], .popup-buttons input[type="button"], .popup-buttons a {
    font: 400 14px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
    padding: 2px 10px;
    text-transform: capitalize
}

.popup-buttons input[type="submit"], .popup-buttons input[type="button"] {
    background: var(--white);
    color: var(--theme-colour1);
    margin-right: 15px
}

.popup-buttons a {
    background: transparent;
    color: var(--white);
    border-color: var(--white)
}

    .popup-buttons a#erase-password {
        padding-left: 15px;
        padding-right: 15px;
        background: #fdd606;
        color: var(--theme-colour1);
        border-color: #fdd606;
        margin-bottom: 30px
    }

.view-password p, .confirmation p, .erase-password p {
    font: 400 14px "Rubik",sans-serif;
    color: var(--white);
    margin: 30px 0;
    text-align: center
}

@media (max-width: 480px) {
    .view-password p, .confirmation p, .erase-password p {
        margin-bottom: 0px
    }
}

.view-password p:first-letter, .confirmation p:first-letter, .erase-password p:first-letter {
    text-transform: uppercase
}

.view-password p strong, .confirmation p strong, .erase-password p strong {
    font-size: 16px;
    color: #fdd606
}

.confirmation p, .erase-password p {
    margin: 0 0 20px 0
}

.confirmation a, .erase-password a {
    font: 400 14px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
    padding: 2px 30px;
    text-transform: capitalize;
    background: transparent;
    color: var(--white);
    border-color: var(--white);
    margin: 0 15px
}

.cropper-wrapper a, .cropper-wrapper.full-page a {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: #fdd606;
    text-transform: capitalize;
    padding: 4px 20px;
    margin: 20px 0;
    display: inline-block;
    border: 1px solid transparent
}

    .cropper-wrapper a:last-of-type, .cropper-wrapper.full-page a:last-of-type {
        margin-left: 10px
    }

.cropper-wrapper {
    display: none;
    text-align: center
}

    .cropper-wrapper.full-page {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding-bottom: 70px;
        background: var(--theme-colour1);
        z-index: 999999
    }

        .cropper-wrapper.full-page a {
            background: #fff;
            color: #057dc4;
            border: 1px solid transparent;
            width: 120px;
            height: 46px;
            border-radius: 5px;
            padding-top: 14px
        }

    .cropper-wrapper a {
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        color: #FAFAFA;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 44px;
        padding: 10px 25px;
        background-color: var(--theme-colour1);
        border-radius: 5px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: ease-in-out 0.4s
    }

        .cropper-wrapper a:last-of-type {
            margin-left: 0px
        }

        .cropper-wrapper a:hover {
            background: var(--theme-colour2)
        }

.discover {
    background: var(--white);
    margin-bottom: 20px
}

    .discover .title {
        font: 700 16px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: var(--theme-colour1);
        position: relative;
        padding: 15px 15px 15px 40px
    }

        .discover .title:before {
            position: absolute;
            top: 16px;
            left: 12px;
            background: url(../images/two-hearts.svg) no-repeat;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

.discover-profile {
    margin-bottom: 25px
}

    .discover-profile .inner img, .discover-profile .inner .desc {
        display: inline-block;
        vertical-align: middle
    }

    .discover-profile .inner a img {
        width: 49px;
        height: 49px
    }

    .discover-profile .inner img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin: 0 10px 0 0
    }

    .discover-profile .inner .desc p {
        margin-bottom: 0
    }

        .discover-profile .inner .desc p span, .discover-profile .inner .desc p em {
            display: block;
            font-style: normal;
            color: var(--theme-colour1)
        }

        .discover-profile .inner .desc p span {
            font: 400 14px "Rubik",sans-serif;
            text-transform: capitalize
        }

        .discover-profile .inner .desc p em {
            font: 400 12px "Rubik",sans-serif;
            text-transform: uppercase
        }

    .discover-profile .inner .desc .long {
        font: 400 12px "Rubik",sans-serif;
        color: #4e4f50;
        text-transform: capitalize;
        margin-top: 5px
    }

    .discover-profile .decisions {
        overflow: hidden;
        margin-top: 10px
    }

        .discover-profile .decisions a {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font: 400 12px "Rubik",sans-serif;
            width: calc(50% - 4px);
            text-transform: capitalize;
            text-align: center;
            border: 1px solid var(--theme-colour1);
            padding: 2px 0;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px
        }

            .discover-profile .decisions a:hover span.icn svg.strk {
                display: none
            }

            .discover-profile .decisions a:hover span.icn svg.fil {
                display: block
            }

            .discover-profile .decisions a span {
                position: relative;
                padding-left: 0px
            }

                .discover-profile .decisions a span:before {
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 12px;
                    height: 12px;
                    display: none
                }

                .discover-profile .decisions a span.icn {
                    display: flex
                }

                    .discover-profile .decisions a span.icn svg path {
                        fill: var(--theme-colour1)
                    }

                    .discover-profile .decisions a span.icn svg.strk {
                        display: block
                    }

                    .discover-profile .decisions a span.icn svg.fil {
                        display: none
                    }

            .discover-profile .decisions a:first-child {
                float: left;
                background: var(--theme-colour1);
                color: var(--white)
            }

                .discover-profile .decisions a:first-child span:before {
                    background: url(../images/heart-white.svg) no-repeat;
                    background-size: 12px;
                    display: none
                }

            .discover-profile .decisions a:last-child {
                float: right;
                color: var(--theme-colour1)
            }

                .discover-profile .decisions a:last-child span:before {
                    background: url(../images/cancel-blue.svg) no-repeat;
                    background-size: 12px
                }

            .discover-profile .decisions a.active {
                border-color: #369623;
                background: var(--white);
                color: #369623
            }

                .discover-profile .decisions a.active span:before {
                    background: url(../images/shortlisted.svg) no-repeat;
                    background-size: 12px
                }

.discover-all {
    font: 400 14px "Rubik",sans-serif;
    display: block;
    padding: 10px 0;
    text-transform: uppercase;
    color: var(--theme-colour1);
    border-top: 1px solid #e1e1e1;
    text-align: center
}

    .discover-all:after {
        content: attr(data-count)
    }

    .discover-all.no-border {
        margin-top: 10px;
        border-top: none;
        padding-bottom: 0
    }

.all-communities {
    padding: 0 15px 10px;
    margin-bottom: 10px
}

    .all-communities [class^='col-'] {
        background: var(--white);
        overflow: hidden
    }

        .all-communities [class^='col-']:nth-of-type(1) {
            padding-top: 10px
        }

    .all-communities a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        color: #828282;
        text-transform: capitalize;
        margin-bottom: 10px
    }

    .all-communities p {
        font: 400 22px "Rubik",sans-serif;
        background: #0a5191;
        color: var(--white);
        padding: 20px 15px;
        margin-bottom: 0;
        text-align: left
    }

        .all-communities p strong {
            font: 400 23px "Rubik",sans-serif;
            color: #fdd606;
            display: block;
            letter-spacing: 1px
        }

.main-title {
    font: 700 24px "Rubik",sans-serif;
    padding: 15px;
    position: relative;
    z-index: 100;
    text-transform: uppercase;
    background: var(--white);
    color: var(--theme-colour1);
    -webkit-box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25);
    box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25)
}

    .main-title span {
        display: inline-block;
        background: var(--white);
        padding-left: 50px;
        position: relative
    }

        .main-title span:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 35px;
            height: 35px
        }

    .main-title.messages span:before {
        background: url(../images/speech-bubble.svg) no-repeat;
        background-size: 35px
    }

    .main-title.settings span:before {
        background: url(../images/settings-gear.svg) no-repeat;
        background-size: 35px
    }

    .main-title.portfolio {
        box-shadow: none
    }

        .main-title.portfolio span {
            position: relative;
            z-index: 100;
            padding-right: 30px
        }

            .main-title.portfolio span:before {
                background: url(../images/portfolio.svg) no-repeat;
                background-size: 35px
            }

        .main-title.portfolio:after {
            position: absolute;
            top: 50%;
            right: 15px;
            content: '';
            width: 80%;
            height: 1px;
            background: var(--theme-colour1);
            z-index: -1
        }

    .main-title.all-comm {
        box-shadow: none;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px
    }

        .main-title.all-comm span:before {
            background: url(../images/network.svg) no-repeat;
            background-size: 35px;
            top: -3px
        }

        .main-title.all-comm.share span:before {
            background: url(../images/sharer.svg) no-repeat;
            background-size: 35px
        }

.profile-of-day {
    display: block;
    background: var(--lightBg);
    text-align: center;
    padding-bottom: 15px
}

    .profile-of-day .title {
        font: 700 16px "Rubik",sans-serif;
        text-transform: uppercase;
        background: var(--theme-colour1);
        color: var(--white);
        padding: 10px 0
    }

    .profile-of-day img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin: 15px auto
    }

    .profile-of-day span {
        display: block;
        color: var(--c2d);
        text-transform: uppercase
    }

    .profile-of-day .name {
        font: 700 16px "Rubik",sans-serif
    }

    .profile-of-day .code {
        font: 400 12px "Rubik",sans-serif
    }

.profile-absolute .profile-of-day {
    min-height: 300px
}

.site-loader, .gif-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 999999;
    opacity: 0;
    display: none
}

    .site-loader:before, .gif-loader:before {
        background: url(../images/site-loader.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 90px;
        height: 90px;
        margin: -45px 0 0 -45px;
        background-size: 90px
    }

.gif-loader {
    opacity: 1
}

    .gif-loader:before {
        background: url(../images/gif-loader.gif) no-repeat;
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
        background-size: 90px;
        background-position: center
    }

.go-to {
    background: url(../images/go-to-bg.jpg) no-repeat;
    background-size: cover;
    background-position: top right;
    padding-top: 302px;
    margin-bottom: 20px
}

    .go-to.grey .inner {
        background-color: #ececec
    }

    .go-to .inner {
        position: relative;
        background: var(--white);
        padding: 30px 15px;
        text-align: center
    }

        .go-to .inner:before {
            background: url(../images/go-to-before.png) no-repeat;
            position: absolute;
            top: -38px;
            left: 50%;
            content: '';
            width: 70px;
            height: 38px;
            margin-left: -35px;
            background-size: 70px 38px
        }

        .go-to .inner p {
            font: 400 18px "Rubik",sans-serif;
            color: var(--theme-colour1);
            padding: 0 30px;
            text-align: center !important
        }

        .go-to .inner a {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            font: 700 14px "Rubik",sans-serif;
            background: var(--theme-colour1);
            color: var(--white);
            text-transform: capitalize;
            padding: 8px 30px;
            display: inline-block;
            border: 1px solid transparent
        }

.misc-content {
    padding: 0 15px;
    height: 100vh
}

    .misc-content .title {
        font: 400 24px "Rubik",sans-serif;
        color: #2d2d2d;
        text-transform: capitalize;
        border-bottom: 1px solid #ebebeb;
        margin-bottom: 20px;
        padding: 20px 0
    }

        .misc-content .title span {
            position: relative;
            display: flex;
            align-items: center;
            gap: 15px
        }

            .misc-content .title span.advert {
                display: flex;
                align-items: center;
                gap: 15px;
                padding-left: 0
            }

                .misc-content .title span.advert:before {
                    display: none
                }

                .misc-content .title span.advert .icn {
                    display: flex
                }

                .misc-content .title span.advert svg path {
                    fill: var(--theme-colour1)
                }

            .misc-content .title span:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 30px;
                height: 30px;
                display: none
            }

            .misc-content .title span.privacy:before {
                background: url(../images/privacy-before.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.terms:before {
                background: url(../images/terms.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.services:before {
                background: url(../images/services.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.advert:before {
                background: url(../images/advert-before.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.helpline {
                display: flex;
                align-items: center;
                gap: 15px;
                padding-left: 0
            }

                .misc-content .title span.helpline:before {
                    display: none
                }

                .misc-content .title span.helpline .icn {
                    display: flex
                }

                .misc-content .title span.helpline svg path {
                    fill: var(--theme-colour1)
                }

            .misc-content .title span .icn {
                display: flex
            }

                .misc-content .title span .icn svg path {
                    fill: var(--theme-colour1)
                }

    .misc-content .title-terms {
        font: 400 16px "Rubik",sans-serif;
        color: var(--theme-colour1);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px
    }

        .misc-content .title-terms span {
            position: relative
        }

            .misc-content .title-terms span:before {
                background: url(../images/diamond-symbol.svg) no-repeat;
                position: absolute;
                top: 2px;
                left: 0;
                content: '';
                width: 16px;
                height: 16px;
                background-size: 16px;
                display: none
            }

        .misc-content .title-terms.small span {
            padding-left: 0
        }

            .misc-content .title-terms.small span:before {
                display: none
            }

        .misc-content .title-terms.black {
            font-size: 20px;
            color: #2d2d2d;
            text-transform: capitalize
        }

        .misc-content .title-terms .icn {
            display: flex
        }

            .misc-content .title-terms .icn svg path {
                fill: var(--theme-colour1)
            }

    .misc-content p.static {
        font: 400 14px "Rubik",sans-serif;
        color: #363636;
        text-align: justify;
        line-height: 24px;
        margin-bottom: 25px
    }

.terms-list {
    margin: 0 0 30px 0;
    padding: 0
}

    .terms-list li {
        position: relative;
        padding-left: 20px;
        list-style: none;
        margin-bottom: 10px
    }

        .terms-list li:before {
            position: absolute;
            top: 5px;
            left: 0;
            content: '';
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid var(--theme-colour1)
        }

.no-data {
    font: 400 18px "Rubik",sans-serif;
    text-align: center;
    padding: 20px 0;
    color: var(--theme-colour1);
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

    .no-data .icn {
        display: flex
    }

        .no-data .icn svg path {
            fill: var(--theme-colour1)
        }

    .no-data span {
        position: relative;
        text-transform: capitalize
    }

        .no-data span:before {
            background: url(../images/sad-blue.svg) no-repeat;
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px;
            display: none
        }

    .no-data.inverse {
        font-size: 14px;
        color: var(--white)
    }

        .no-data.inverse span:before {
            background: url(../images/sad-white.svg) no-repeat;
            background-size: 20px;
            top: -2px
        }

.search-wrapper {
    margin: 30px 0
}

    .search-wrapper .nice-select {
        font: 400 13px "Rubik",sans-serif;
        height: 55px;
        line-height: 55px;
        color: #171717;
        padding-left: 15px
    }

    .search-wrapper .select-appearance {
        position: relative;
        display: block
    }

        .search-wrapper .select-appearance:after {
            position: absolute;
            top: 20px;
            right: 15px;
            background: url(../images/down-arrow-blue.svg) no-repeat;
            content: '';
            width: 15px;
            height: 15px;
            background-size: 15px;
            pointer-events: none
        }

    .search-wrapper .search-criteria {
        width: 100%;
        border: 1px solid var(--theme-colour1);
        margin-bottom: 10px;
        overflow: hidden;
        position: relative
    }

        .search-wrapper .search-criteria select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            width: 100%;
            height: 55px;
            border: none;
            padding-left: 10px
        }

        .search-wrapper .search-criteria.inverse span {
            display: inline-block;
            vertical-align: middle
        }

            .search-wrapper .search-criteria.inverse span.field-validation-valid {
                display: none
            }

        .search-wrapper .search-criteria.inverse .select-appearance, .search-wrapper .search-criteria.inverse .to {
            width: calc(100% / 3);
            float: left
        }

        .search-wrapper .search-criteria.inverse .to {
            line-height: 55px;
            text-align: center
        }

        .search-wrapper .search-criteria .field-validation-error {
            position: absolute;
            top: -1px;
            right: 5px;
            color: #f00;
            font-size: 20px
        }

    .search-wrapper .search-submit {
        display: block;
        height: 55px;
        background: var(--theme-colour1);
        text-align: center;
        position: relative
    }

        .search-wrapper .search-submit input[type="submit"] {
            opacity: 0;
            z-index: 100;
            cursor: pointer
        }

        .search-wrapper .search-submit span {
            font: 400 18px "Rubik",sans-serif;
            text-transform: uppercase;
            display: inline-block;
            color: #fdd606;
            position: relative;
            padding-right: 35px;
            line-height: 55px
        }

            .search-wrapper .search-submit span:after {
                position: absolute;
                top: 13px;
                right: 0;
                background: url(../images/search-yellow.svg) no-repeat;
                content: '';
                width: 24px;
                height: 24px;
                background-size: 24px
            }

.search-by {
    text-align: center
}

    .search-by .heading {
        font: 400 16px "Rubik",sans-serif;
        display: block;
        color: #292929;
        margin-bottom: 15px
    }

    .search-by a {
        font: 700 16px "Rubik",sans-serif;
        text-transform: capitalize;
        display: inline-block;
        vertical-align: middle;
        color: var(--theme-colour1);
        padding: 0 15px;
        border-right: 1px solid #6f6f6f
    }

        .search-by a:last-of-type {
            border-right: none
        }

.search {
    font: 400 14px "Rubik",sans-serif;
    text-transform: uppercase;
    display: block;
    background: #fdd606;
    color: var(--theme-colour1);
    text-align: center;
    padding: 5px 0
}

    .search em {
        font-style: normal;
        padding-right: 25px;
        position: relative
    }

        .search em:after {
            position: absolute;
            top: 0;
            right: 0;
            background: url(../images/search-blue.svg) no-repeat;
            content: '';
            width: 16px;
            height: 16px;
            background-size: 16px
        }

.register {
    background: var(--theme-colour1);
    padding: 15px 15px 60px;
    position: relative
}

    .register .title span {
        display: block;
        margin-bottom: 10px;
        color: var(--white)
    }

    .register .title .free {
        font: 400 18px "Rubik",sans-serif;
        text-transform: capitalize;
        padding-left: 30px;
        position: relative
    }

        .register .title .free:before {
            background: url(../images/pen.svg) no-repeat;
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

        .register .title .free em {
            font: 700 18px "Rubik",sans-serif;
            text-transform: uppercase
        }

    .register .title .with, .register .title .social {
        display: inline-block;
        vertical-align: middle
    }

    .register .title .with {
        font: 400 12px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-right: 10px
    }

    .register .title .social a {
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-right: 10px
    }

        .register .title .social a.fb {
            background: url(../images/facebook.svg) no-repeat;
            background-size: 25px
        }

        .register .title .social a.gg {
            background: url(../images/google-plus.svg) no-repeat;
            background-size: 25px
        }

    .register .register-submit {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        text-align: center;
        background: #fdd606
    }

        .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button {
            opacity: 0;
            font-size: 0;
            z-index: 100
        }

        .register .register-submit span {
            font: 400 20px "Rubik",sans-serif;
            line-height: 50px;
            color: var(--theme-colour1);
            position: relative;
            padding-left: 30px;
            text-transform: uppercase
        }

            .register .register-submit span:before {
                position: absolute;
                top: 3px;
                left: 0;
                background: url(../images/user-blue.svg) no-repeat;
                content: '';
                width: 20px;
                height: 20px;
                background-size: 20px
            }

        .register .register-submit.inverse {
            -webkit-border-radius: 80px;
            -moz-border-radius: 80px;
            border-radius: 80px;
            background: var(--theme-colour1);
            position: relative;
            bottom: auto;
            left: auto;
            margin: 15px auto
        }

            .register .register-submit.inverse span {
                color: var(--white)
            }

                .register .register-submit.inverse span:before {
                    background: url(../images/user-yellow.svg) no-repeat;
                    background-size: 20px
                }

    .register.inverse {
        background: var(--white);
        padding-bottom: 15px
    }

        .register.inverse .nice-select {
            color: var(--theme-colour1);
            border-bottom-color: var(--theme-colour1)
        }

            .register.inverse .nice-select:after {
                border-bottom: 2px solid var(--theme-colour1);
                border-right: 2px solid var(--theme-colour1)
            }

        .register.inverse .title span {
            color: #282828
        }

        .register.inverse .title .free:before {
            background: url(../images/pen-blue.svg) no-repeat;
            background-size: 18px
        }

        .register.inverse .title .social a.fb {
            background: url(../images/facebook-blue.svg) no-repeat;
            background-size: 25px
        }

        .register.inverse .title .social a.gg {
            background: url(../images/google-plus-blue.svg) no-repeat;
            background-size: 25px
        }

        .register.inverse .title-logo {
            margin: 30px 0 40px
        }

.radio-wrapper {
    display: inline-block;
    margin-right: 15px;
    height: 30px
}

    .radio-wrapper input[type="radio"] {
        display: none
    }

    .radio-wrapper .ghost-radio, .radio-wrapper .note {
        display: inline-block;
        vertical-align: middle
    }

    .radio-wrapper .ghost-radio {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid var(--white);
        width: 15px;
        height: 15px;
        margin-right: 10px;
        cursor: pointer
    }

        .radio-wrapper .ghost-radio[data-status="0"] {
            background: none
        }

        .radio-wrapper .ghost-radio[data-status="1"] {
            background: url(../images/circle-filled.svg) no-repeat;
            background-size: 9px;
            background-position: center
        }

    .radio-wrapper .note {
        font: 400 12px "Rubik",sans-serif;
        color: var(--white);
        text-transform: capitalize
    }

    .radio-wrapper.inverse .ghost-radio {
        border-color: var(--theme-colour1)
    }

        .radio-wrapper.inverse .ghost-radio[data-status="1"] {
            background: url(../images/circle-filled-blue.svg) no-repeat;
            background-size: 9px;
            background-position: center
        }

    .radio-wrapper.inverse .note {
        color: #222222
    }

.dtBox .dtpicker-value {
    color: var(--theme-colour1)
}

.dtBox input.dtpicker-compValue {
    color: var(--theme-colour1);
    font-size: 14px
}

.dtBox a.dtpicker-button {
    background: var(--theme-colour1);
    color: #fdd606
}

.dtBox a.dtpicker-close {
    color: var(--theme-colour1)
}

.search-strip {
    padding-left: 15px;
    padding-right: 15px;
    position: relative
}

    .search-strip .title {
        font: 400 24px "Rubik",sans-serif;
        text-transform: capitalize;
        display: block;
        text-align: center;
        color: #292929
    }

        .search-strip .title strong {
            color: var(--theme-colour1)
        }

        .search-strip .title em {
            font: 700 40px "Rubik",sans-serif;
            background: #fdd606
        }

    .search-strip .branch-locator {
        display: none
    }

.signup-page .register {
    padding-bottom: 50px
}

.signup-page .signup-text {
    display: none
}

.search-result {
    display: block;
    margin-bottom: 15px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #d4d4d4
}

    .search-result .title {
        font: 400 20px "Rubik",sans-serif;
        display: block;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

    .search-result p {
        font: 400 14px "Rubik",sans-serif;
        color: #727272;
        text-align: justify
    }

    .search-result em {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        font: 400 12px "Rubik",sans-serif;
        font-style: normal;
        display: inline-block;
        background: #efefef;
        color: var(--theme-colour1);
        padding: 2px 15px;
        text-transform: capitalize
    }

    .search-result i {
        font-style: normal;
        background: #ff9632;
        color: #000
    }

.search-content {
    margin-bottom: 20px;
    overflow: hidden
}

    .search-content:not(.search-tab1) {
        display: none
    }

.country-code .nice-select .option {
    padding: 0 0 0 5px
}

.f16 {
    font-size: 16px
}

    .f16 a {
        font-size: 14px
    }

.faq-title {
    font: 400 30px "Rubik",sans-serif;
    color: var(--black);
    text-transform: capitalize;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    gap: 15px
}

    .faq-title span {
        position: relative;
        padding: 0 0 0 50px
    }

        .faq-title span:before, .faq-title span:after {
            content: '';
            position: absolute
        }

        .faq-title span:before {
            background: url(../images/faq-before.svg) no-repeat;
            top: 1px;
            left: 0;
            width: 40px;
            height: 40px;
            background-size: 40px
        }

    .faq-title .icn {
        display: flex;
        margin-top: 5px
    }

        .faq-title .icn svg path {
            fill: var(--theme-colour1)
        }

    .faq-title.job-title span:before {
        background: url(../images/job-before.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.careers-title span:before {
        background: url(../images/careers-before.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.success-title span:before {
        background: url(../images/tick-multi.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.short {
        font-size: 20px;
        margin-top: 15px
    }

        .faq-title.short span {
            padding-top: 10px
        }

    .faq-title.featured {
        font-size: 24px
    }

        .faq-title.featured span:before {
            background: url(../images/featured.svg) no-repeat;
            background-size: 40px;
            top: -2px
        }

        .faq-title.featured span:after {
            top: 9px
        }

    .faq-title.search-title span:before {
        background: url(../images/search-blue.svg) no-repeat;
        background-size: 40px
    }

.search-tabs {
    margin-bottom: 20px
}

    .search-tabs span {
        font: 400 16px "Rubik",sans-serif;
        color: #a2a2a2;
        text-transform: capitalize;
        cursor: pointer;
        display: block;
        margin-bottom: 5px;
        position: relative
    }

        .search-tabs span:after {
            position: absolute;
            top: 8px;
            left: 0;
            content: '';
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid var(--theme-colour1);
            opacity: 0
        }

        .search-tabs span.active {
            padding-left: 15px;
            color: var(--theme-colour1)
        }

            .search-tabs span.active:after {
                opacity: 1
            }

.search-keyword {
    height: auto;
    margin-bottom: 30px
}

    .search-keyword p {
        font: 400 20px "Rubik",sans-serif;
        color: #474747;
        text-align: center
    }

        .search-keyword p strong {
            font: 700 24px "Rubik",sans-serif
        }

        .search-keyword p span {
            display: block;
            margin: 15px 0 10px;
            font-size: 14px
        }

        .search-keyword p em {
            font: 400 14px "Rubik",sans-serif
        }

            .search-keyword p em strong {
                font: 700 14px "Rubik",sans-serif
            }

.result-section {
    padding: 15px
}

    .result-section .result-title {
        text-transform: capitalize;
        margin-bottom: 30px
    }

        .result-section .result-title span, .result-section .result-title em {
            display: inline-block
        }

        .result-section .result-title span {
            font: 700 27px "Rubik",sans-serif;
            color: var(--theme-colour1);
            margin-right: 10px
        }

        .result-section .result-title em {
            font: 400 28px "Rubik",sans-serif;
            color: var(--black);
            font-style: normal
        }

.filtered-by {
    margin-bottom: 10px;
    display: none
}

    .filtered-by em, .filtered-by span {
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
        margin-bottom: 5px
    }

    .filtered-by em {
        font: 400 14px "Rubik",sans-serif;
        color: #424242;
        margin-right: 15px;
        text-transform: capitalize;
        font-style: normal
    }

    .filtered-by span {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        font: 400 12px "Rubik",sans-serif;
        background: #f2f2f2;
        color: #727272;
        position: relative;
        padding: 4px 25px 4px 10px
    }

        .filtered-by span i {
            background: url(../images/close-blue.svg) no-repeat;
            position: absolute;
            top: 8px;
            right: 10px;
            cursor: pointer;
            width: 8px;
            height: 8px;
            background-size: 8px
        }

.result-instance {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #fcfcfc;
    border: 1px solid #dedede;
    padding: 15px;
    margin-bottom: 20px;
    position: relative
}

    .result-instance .result-pic {
        margin-bottom: 10px;
        text-align: center
    }

        .result-instance .result-pic img {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            display: inline-block
        }

    .result-instance .name span {
        font: 700 18px "Rubik",sans-serif;
        text-transform: uppercase;
        color: var(--theme-colour1);
        display: block;
        margin-bottom: 5px
    }

    .result-instance .name em {
        font: 400 12px "Rubik",sans-serif;
        color: #797979;
        font-style: normal;
        display: block;
        margin-bottom: 5px
    }

    .result-instance p {
        font: 400 12px "Rubik",sans-serif;
        line-height: 22px;
        color: #858585
    }

        .result-instance p a {
            color: var(--theme-colour1);
            text-transform: capitalize;
            text-decoration: underline;
            margin-left: 5px
        }

    .result-instance .tags {
        border-top: 1px solid #eeeded;
        border-bottom: 1px solid #eeeded;
        padding: 5px 0;
        margin-bottom: 10px
    }

        .result-instance .tags span {
            font: 400 14px "Rubik",sans-serif;
            color: #4d4d4d;
            display: inline-block;
            margin-right: 15px;
            text-transform: capitalize;
            position: relative
        }

            .result-instance .tags span strong {
                display: inline-block;
                color: #282828;
                margin-left: 10px;
                font-weight: 400
            }

            .result-instance .tags span:after {
                position: absolute;
                top: -1px;
                right: -9px;
                content: '|';
                color: #898989
            }

            .result-instance .tags span:last-child {
                margin-right: 0
            }

                .result-instance .tags span:last-child:after {
                    display: none
                }

    .result-instance .connected {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        text-align: center
    }

        .result-instance .connected a, .result-instance .connected button {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            font: 400 14px "Rubik",sans-serif;
            text-transform: capitalize;
            border: 1px solid transparent;
            padding: 4px 0;
            margin-bottom: 10px;
            display: block;
            overflow: hidden;
            position: relative
        }

        .result-instance .connected .short, .result-instance .connected .like, .result-instance .connected .contact, .result-instance .connected .login-to-view {
            border: 1px solid #bfbfbf;
            background: #fcfcfc;
            color: #949494
        }

            .result-instance .connected .short span, .result-instance .connected .like span, .result-instance .connected .contact span, .result-instance .connected .login-to-view span {
                padding-left: 25px;
                position: relative
            }

                .result-instance .connected .short span:before, .result-instance .connected .like span:before, .result-instance .connected .contact span:before, .result-instance .connected .login-to-view span:before {
                    position: absolute;
                    top: 1px;
                    left: 0;
                    content: '';
                    width: 15px;
                    height: 15px
                }

                .result-instance .connected .short span:before {
                    background: url(../images/heart-grey.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .short.active {
                border-color: #f00;
                color: #f00
            }

                .result-instance .connected .short.active span:before {
                    background: url(../images/heart-filled-red.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .like span:before {
                background: url(../images/like-grey.svg) no-repeat;
                background-size: 15px
            }

            .result-instance .connected .like.active {
                border-color: #1696e8;
                color: #1696e8
            }

                .result-instance .connected .like.active span:before {
                    background: url(../images/like-blue.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .contact span:before {
                background: url(../images/phone-grey.svg) no-repeat;
                background-size: 15px
            }

            .result-instance .connected .contact.active {
                border-color: #369623;
                color: #369623
            }

                .result-instance .connected .contact.active span:before {
                    background: url(../images/phone-green.svg) no-repeat;
                    background-size: 15px
                }

        .result-instance .connected .view, .result-instance .connected .login-to-view {
            background: var(--theme-colour1);
            color: var(--white)
        }

    .result-instance .result-desc[data-logged="0"] .connected .contact, .result-instance .result-desc[data-logged="0"] .connected .short {
        display: none
    }

    .result-instance .result-desc[data-logged="0"] .connected .login-to-view {
        display: inline-block
    }

    .result-instance .result-desc[data-logged="1"] .connected .contact {
        display: inline-block
    }

    .result-instance .result-desc[data-logged="1"] .connected .login-to-view {
        display: none
    }

    .result-instance .chat-now {
        position: absolute;
        top: 10px;
        right: 15px
    }

.default-container {
    padding: 0px !important;
    overflow: hidden;
    margin: 30px 0px
}

    .default-container .default-pad {
        padding: 0
    }

    .default-container .search-wrapper {
        width: 100%
    }

.find-match {
    background: #eee;
    padding: 15px 15px 0;
    margin-top: 30px
}

    .find-match .head {
        font: 400 20px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        text-align: left;
        line-height: 22px
    }

        .find-match .head span {
            display: block
        }

            .find-match .head span:nth-child(2) {
                font-size: 28px
            }

            .find-match .head span:nth-child(3) {
                font: 700 30px "Rubik",sans-serif;
                margin-top: -4px
            }

    .find-match .inner {
        background: url(../images/find-match.jpg) no-repeat;
        padding: 30px 0 0 120px;
        background-position: bottom left;
        min-height: 210px;
        text-align: center
    }

        .find-match .inner img {
            margin: auto
        }

        .find-match .inner span {
            font: 400 14px "Rubik",sans-serif;
            color: #2a2a2a;
            text-transform: capitalize;
            margin: 10px 0;
            display: block
        }

        .find-match .inner a {
            display: block
        }

            .find-match .inner a img {
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px
            }

            .find-match .inner a:first-of-type {
                margin-bottom: 10px
            }

    .find-match .dummy-bg {
        background: url(../images/change-password-tab.png) no-repeat;
        background-position: center;
        background-color: var(--theme-colour1);
        height: 100px;
        margin: 2px -15px 0 -15px
    }

    .find-match.whit {
        background: var(--white);
        margin-bottom: 20px
    }

.faq-blocks .title {
    font: 400 16px "Rubik",sans-serif;
    color: #2e2e2e;
    display: block;
    text-transform: capitalize;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative
}

    .faq-blocks .title:after {
        position: absolute;
        bottom: 0;
        left: 50%;
        content: '';
        width: 24px;
        height: 1px;
        margin-left: -12px
    }

.faq-blocks [class^="col-"] {
    text-align: center;
    padding-top: 60px;
    position: relative;
    margin-bottom: 50px
}

    .faq-blocks [class^="col-"]:before {
        position: absolute;
        top: 0;
        left: 50%;
        content: '';
        margin-left: -20px;
        width: 40px;
        height: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(1) .title:after {
        background: #fb1e32
    }

    .faq-blocks [class^="col-"]:nth-child(2) .title:after {
        background: #05ce89
    }

    .faq-blocks [class^="col-"]:nth-child(3) .title:after {
        background: #22a0da
    }

    .faq-blocks [class^="col-"]:nth-child(4) .title:after {
        background: #dda624
    }

    .faq-blocks [class^="col-"]:nth-child(1):before {
        background: url(../images/heart-red.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(2):before {
        background: url(../images/tick-green.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(3):before {
        background: url(../images/keyhole.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(4):before {
        background: url(../images/telemarketer-gold.svg) no-repeat;
        background-size: 40px
    }

.faq-blocks p {
    font: 400 13px "Rubik",sans-serif;
    padding: 0 20px;
    color: #727272;
    line-height: 18px;
    text-align: center !important
}

.faq-call {
    border: 1px solid #ebebeb;
    border-left: none;
    border-right: none;
    padding: 20px 0;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px
}

@media (max-width: 767px) {
    .faq-call {
        flex-direction: column
    }
}

.faq-call span {
    font: 400 14px "Rubik",sans-serif;
    color: #646464;
    text-transform: capitalize;
    display: inline-block
}

@media (max-width: 767px) {
    .faq-call span {
        margin-bottom: 10px
    }
}

.faq-call strong {
    font: 400 24px "Rubik",sans-serif;
    display: block;
    color: var(--black);
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px
}

@media (max-width: 767px) {
    .faq-call strong {
        margin-bottom: 30px
    }
}

.faq-call strong a {
    color: var(--black);
    text-decoration: none
}

.faq-call strong span {
    margin-right: 0
}

    .faq-call strong span svg path {
        fill: var(--theme-colour1)
    }

.faq-search .title {
    font: 400 24px "Rubik",sans-serif;
    color: #646464;
    display: block;
    text-transform: capitalize;
    margin-bottom: 25px
}

.faq-searchbox {
    border: none;
    position: relative;
    height: 40px;
    margin-bottom: 15px
}

    .faq-searchbox input[type="text"] {
        width: 100%;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding-left: 12px
    }

    .faq-searchbox .submit-holder {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        background: var(--theme-colour1);
        text-align: center;
        height: 40px;
        width: 160px;
        border: none;
        border-radius: 0 8px 8px 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 0.4s
    }

@media (max-width: 767px) {
    .faq-searchbox .submit-holder {
        width: 130px
    }
}

.faq-searchbox .submit-holder:hover {
    background-color: var(--theme-colour2)
}

.faq-searchbox .submit-holder input[type="submit"] {
    opacity: 0;
    z-index: 10
}

.faq-searchbox .submit-holder span {
    font: 400 20px "Rubik",sans-serif;
    color: var(--white);
    text-transform: uppercase;
    position: relative;
    padding-right: 0px;
    line-height: 37px;
    display: flex;
    align-items: center;
    gap: 8px
}

.faq-searchbox .submit-holder .icn {
    display: flex;
    height: fit-content
}

    .faq-searchbox .submit-holder .icn svg path {
        fill: var(--white)
    }

.common-list ul {
    margin: 0;
    padding: 0 0 0 35px
}

    .common-list ul li {
        font: 400 14px "Rubik",sans-serif;
        color: #2d2d2d;
        margin-bottom: 10px;
        list-style: none;
        padding-left: 10px;
        position: relative
    }

        .common-list ul li:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '-'
        }

        .common-list ul li a {
            color: var(--theme-colour1)
        }

.common-list.inverse ul {
    padding-left: 0
}

    .common-list.inverse ul li {
        font: 400 14px "Rubik",sans-serif
    }

.result-wrapper {
    border-bottom: 1px solid #afafaf;
    margin-bottom: 30px
}

.new-user .title {
    font: 400 20px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--black);
    margin-bottom: 10px;
    min-height: 48px;
    display: flex;
    align-items: center
}

.side-communities {
    text-align: center;
    margin: 10px 0
}

    .side-communities a {
        font: 400 16px "Rubik",sans-serif;
        padding: 15px 0;
        display: block;
        text-transform: capitalize;
        background: #e7e7e7;
        color: var(--black);
        border-bottom: 1px solid #e0dfdf
    }

        .side-communities a:last-child {
            border-bottom: none
        }

.intimate-join {
    min-height: 195px;
    background: #f0eeee;
    padding: 80px 15px 20px;
    position: relative;
    text-align: center
}

    .intimate-join:before {
        position: absolute;
        top: 15px;
        left: 50%;
        background: url(../images/diadem-black.png) no-repeat;
        content: '';
        width: 106px;
        height: 62px;
        background-size: 106px 62px;
        margin-left: -53px
    }

    .intimate-join .title {
        font: 700 20px "Rubik",sans-serif;
        display: block;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .intimate-join p {
        font: 400 12px "Rubik",sans-serif;
        color: #181818;
        text-transform: uppercase;
        text-align: center !important
    }

    .intimate-join a {
        font: 700 18px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        padding: 8px 30px;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase;
        border: 1px solid transparent;
        margin: auto
    }

.quick-edit {
    position: absolute;
    top: 16px;
    right: 45px;
    color: var(--theme-colour1);
    font-size: 12px !important;
    text-transform: capitalize;
    cursor: pointer;
    padding-left: 10px;
    z-index: 100;
    display: none
}

    .quick-edit:before {
        position: absolute;
        top: -1px;
        left: 0;
        content: '|';
        color: var(--theme-colour1)
    }

.accordion .panel, .default-accordion .panel, .advanced-accordion .panel {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    font: 400 16px "Rubik",sans-serif;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    border-color: var(--white);
    padding: 0px
}

    .accordion .panel.active, .default-accordion .panel.active, .advanced-accordion .panel.active {
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px
    }

.accordion .panel-body, .default-accordion .panel-body, .advanced-accordion .panel-body {
    padding: 0px !important;
    padding-top: 0
}

    .accordion .panel-body.panel-bodyFaq, .default-accordion .panel-body.panel-bodyFaq, .advanced-accordion .panel-body.panel-bodyFaq {
        padding-top: 10px !important;
        padding-bottom: 10px !important
    }

.accordion .panel-primary .panel-heading, .default-accordion .panel-primary .panel-heading, .advanced-accordion .panel-primary .panel-heading {
    background: transparent;
    border-color: transparent;
    color: #000
}

.accordion .panel-heading, .default-accordion .panel-heading, .advanced-accordion .panel-heading {
    position: relative;
    padding-left: 30px;
    color: #4f4f4f
}

    .accordion .panel-heading:before, .default-accordion .panel-heading:before, .advanced-accordion .panel-heading:before {
        background: url(../images/right-arrow-accordion.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        width: 14px;
        height: 14px;
        background-size: 14px;
        margin-top: -7px
    }

.accordion .active .panel-heading, .default-accordion .active .panel-heading, .advanced-accordion .active .panel-heading {
    color: var(--theme-colour1)
}

    .accordion .active .panel-heading:before, .default-accordion .active .panel-heading:before, .advanced-accordion .active .panel-heading:before {
        background: url(../images/down-arrow-accordion.svg) no-repeat;
        background-size: 14px
    }

.accordion .active .quick-edit, .default-accordion .active .quick-edit, .advanced-accordion .active .quick-edit {
    display: inline-block
}

.accordion p, .default-accordion p, .advanced-accordion p {
    @Include reg(14);
    text-align: justify;
    line-height: 22px;
    color: #2d2d2d
}

.accordion.discover-accordion .panel, .default-accordion.discover-accordion .panel, .advanced-accordion.discover-accordion .panel {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0
}

    .accordion.discover-accordion .panel:after, .default-accordion.discover-accordion .panel:after, .advanced-accordion.discover-accordion .panel:after {
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
        background: url(../images/right-arrow-black.svg) no-repeat;
        position: absolute;
        top: 19px;
        right: 17px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        content: '';
        width: 10px;
        height: 10px;
        background-size: 10px;
        pointer-events: none
    }

    .accordion.discover-accordion .panel.denote .panel-heading, .default-accordion.discover-accordion .panel.denote .panel-heading, .advanced-accordion.discover-accordion .panel.denote .panel-heading {
        background-color: #f3f3f3
    }

    .accordion.discover-accordion .panel.denote:after, .default-accordion.discover-accordion .panel.denote:after, .advanced-accordion.discover-accordion .panel.denote:after {
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .accordion.discover-accordion .panel.active, .default-accordion.discover-accordion .panel.active, .advanced-accordion.discover-accordion .panel.active {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0
    }

.accordion.discover-accordion .panel-primary, .default-accordion.discover-accordion .panel-primary, .advanced-accordion.discover-accordion .panel-primary {
    border: none;
    border-top: 1px solid #e1e1e1;
    margin: 0;
    position: relative
}

.accordion.discover-accordion .panel-heading, .default-accordion.discover-accordion .panel-heading, .advanced-accordion.discover-accordion .panel-heading {
    font: 400 14px "Rubik",sans-serif;
    background: var(--white);
    color: #000102;
    text-transform: capitalize;
    border: none;
    padding: 15px 0 15px 15px
}

    .accordion.discover-accordion .panel-heading:before, .default-accordion.discover-accordion .panel-heading:before, .advanced-accordion.discover-accordion .panel-heading:before {
        display: none
    }

.accordion.discover-accordion .panel-body, .default-accordion.discover-accordion .panel-body, .advanced-accordion.discover-accordion .panel-body {
    padding: 15px
}

.accordion.discover-accordion .upgrade-account a, .default-accordion.discover-accordion .upgrade-account a, .advanced-accordion.discover-accordion .upgrade-account a {
    margin-bottom: 8px;
    padding: 4px 0
}

.advanced-accordion .panel, .default-accordion.filter-accordion .panel, .tariff-accordion .panel {
    border-radius: 0;
    padding-left: 0;
    background: #efedee;
    border-color: #efedee;
    margin-bottom: 2px;
    box-shadow: none;
    position: relative
}

    .advanced-accordion .panel:after, .default-accordion.filter-accordion .panel:after, .tariff-accordion .panel:after {
        position: absolute;
        top: 13px;
        right: 15px;
        background: url(../images/as-plus.svg) no-repeat;
        content: '';
        width: 20px;
        height: 20px;
        background-size: 20px;
        pointer-events: none
    }

    .advanced-accordion .panel.active, .default-accordion.filter-accordion .panel.active, .tariff-accordion .panel.active {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: #f9f9f9;
        border-color: #f9f9f9
    }

        .advanced-accordion .panel.active:after, .default-accordion.filter-accordion .panel.active:after, .tariff-accordion .panel.active:after {
            background: url(../images/as-minus.svg) no-repeat;
            background-size: 20px
        }

.advanced-accordion .panel-primary .panel-heading, .default-accordion.filter-accordion .panel-primary .panel-heading, .tariff-accordion .panel-primary .panel-heading {
    font-size: 20px;
    padding-left: 15px;
    padding-right: 30px;
    text-transform: capitalize;
    cursor: pointer
}

    .advanced-accordion .panel-primary .panel-heading:before, .default-accordion.filter-accordion .panel-primary .panel-heading:before, .tariff-accordion .panel-primary .panel-heading:before {
        display: none
    }

.advanced-accordion .panel-body, .default-accordion.filter-accordion .panel-body, .tariff-accordion .panel-body {
    padding-left: 15px
}

.tariff-accordion .panel-primary .panel-heading {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: var(--theme-colour1);
    color: var(--white);
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 17px
}

.tariff-accordion .panel {
    margin-bottom: 0
}

    .tariff-accordion .panel.active {
        color: var(--white)
    }

    .tariff-accordion .panel:after {
        top: 8px
    }

.tariff-accordion .panel-body {
    padding: 0
}

.default-accordion.filter-accordion .panel {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #ededed;
    background: #f8f8f8
}

    .default-accordion.filter-accordion .panel:after {
        background: url(../images/filter-plus.svg) no-repeat;
        background-size: 15px;
        top: 18px;
        right: 20px
    }

    .default-accordion.filter-accordion .panel.active {
        background: #efefef
    }

        .default-accordion.filter-accordion .panel.active:after {
            background: url(../images/filter-minus.svg) no-repeat;
            background-size: 15px
        }

.default-accordion.filter-accordion .panel-primary .panel-heading, .default-accordion.filter-accordion .panel-primary .panel-location {
    font: 700 14px "Rubik",sans-serif;
    font-size: 14px;
    color: #2e2e2e;
    text-transform: uppercase;
    padding: 16px 45px 16px 16px
}

.accordion-wrapper {
    background: #f5f5f5;
    margin-bottom: 10px
}

    .accordion-wrapper .accordion-title {
        cursor: pointer;
        padding: 5px 5px 5px 10px;
        position: relative;
        display: flex;
        gap: 15px
    }

        .accordion-wrapper .accordion-title[data-open="0"] .plus {
            display: flex
        }

        .accordion-wrapper .accordion-title[data-open="0"] .mins {
            display: none
        }

        .accordion-wrapper .accordion-title[data-open="1"] .plus {
            display: none
        }

        .accordion-wrapper .accordion-title[data-open="1"] .mins {
            display: flex
        }

        .accordion-wrapper .accordion-title svg path {
            fill: var(--theme-colour1)
        }

    .accordion-wrapper .accordion {
        display: none;
        padding: 0 10px 15px
    }

.packages-container {
    padding: 30px 15px;
    background: var(--white);
    margin-bottom: 40px
}

    .packages-container .title {
        color: var(--theme-colour1);
        text-align: center
    }

        .packages-container .title span, .packages-container .title strong {
            display: block;
            text-transform: uppercase
        }

        .packages-container .title span {
            font: 400 20px "Rubik",sans-serif
        }

        .packages-container .title strong {
            font: 700 28px "Rubik",sans-serif;
            border-bottom: 1px solid var(--theme-colour1);
            margin-bottom: 10px;
            padding-bottom: 10px
        }

        .packages-container .title p {
            font: 400 14px "Rubik",sans-serif;
            text-align: center;
            color: var(--theme-colour1)
        }

.packages-slider {
    padding: 0 15px;
    margin-bottom: 10px
}

    .packages-slider .pack {
        border-top: 5px solid var(--theme-colour1);
        background: var(--white)
    }

        .packages-slider .pack.current-pack .items span {
            background: #f2f9ff;
            border-color: #dadada
        }

        .packages-slider .pack.current-pack .title, .packages-slider .pack.current-pack .title p strong {
            background: #f2f9ff
        }

        .packages-slider .pack .title {
            padding: 10px 15px;
            text-align: center
        }

            .packages-slider .pack .title span {
                font: 700 26px "Rubik",sans-serif;
                color: var(--theme-colour1);
                text-transform: uppercase;
                display: block;
                height: 68px
            }

            .packages-slider .pack .title p {
                text-align: center;
                position: relative
            }

                .packages-slider .pack .title p:after {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background: var(--theme-colour1);
                    content: ''
                }

                .packages-slider .pack .title p strong {
                    font: 400 18px "Rubik",sans-serif;
                    background: var(--white);
                    color: #3c3e3f;
                    position: relative;
                    z-index: 10;
                    display: inline-block;
                    padding: 0 15px
                }

            .packages-slider .pack .title em {
                font: 400 12px "Rubik",sans-serif;
                font-style: normal;
                color: var(--theme-colour1);
                display: inline-block;
                text-align: center
            }

        .packages-slider .pack .pack-price {
            background: var(--theme-colour1);
            padding: 10px 0;
            text-align: center
        }

            .packages-slider .pack .pack-price span {
                font: 700 25px "Rubik",sans-serif;
                color: var(--white);
                position: relative;
                padding-left: 30px
            }

                .packages-slider .pack .pack-price span:before {
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    background: url(../images/rupee-white.svg) no-repeat;
                    position: absolute;
                    top: 4px;
                    left: 0;
                    content: '';
                    border: 2px solid var(--white);
                    width: 25px;
                    height: 25px;
                    background-size: 12px;
                    background-position: center
                }

        .packages-slider .pack .items {
            text-align: center
        }

            .packages-slider .pack .items span {
                font: 400 16px "Rubik",sans-serif;
                display: block;
                padding: 10px 0;
                color: var(--black);
                text-transform: capitalize;
                border-bottom: 1px solid #f8f8f8
            }

                .packages-slider .pack .items span:after {
                    content: attr(data-count);
                    color: var(--theme-colour1);
                    padding-left: 10px
                }

            .packages-slider .pack .items.active span {
                border-color: #dadada;
                background: #f2f9ff
            }

            .packages-slider .pack .items .items-inner {
                display: none
            }

            .packages-slider .pack .items a {
                font: 400 14px "Rubik",sans-serif;
                background: var(--theme-colour1);
                color: var(--white);
                text-transform: uppercase;
                text-align: center;
                padding: 10px 0;
                display: block
            }

        .packages-slider .pack .make {
            background: var(--theme-colour1),10%;
            text-align: center;
            padding: 10px 0
        }

            .packages-slider .pack .make a {
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                border-radius: 25px;
                font: 400 18px "Rubik",sans-serif;
                display: inline-block;
                padding: 5px 45px;
                border: 1px solid var(--white);
                text-transform: uppercase;
                color: var(--white)
            }

.call {
    padding: 0 15px
}

    .call p {
        font: 400 26px "Rubik",sans-serif;
        padding: 30px;
        background: var(--theme-colour1);
        text-align: left;
        color: var(--white)
    }

        .call p a {
            font: 700 40px "Rubik",sans-serif;
            color: #fdd606;
            text-transform: capitalize;
            display: inline-block;
            margin-right: 15px
        }

.default-content {
    background: var(--white)
}

    .default-content .default-content-inner {
        padding: 0 15px
    }

.pay-title {
    font: 700 22px "Rubik",sans-serif;
    text-transform: uppercase;
    color: var(--theme-colour1);
    border-bottom: 1px solid var(--theme-colour1);
    margin-bottom: 10px
}

    .pay-title span {
        position: relative;
        display: inline-block;
        padding: 20px 20px 20px 40px
    }

        .pay-title span:before {
            background: url(../images/wallet.svg) no-repeat;
            position: absolute;
            top: 20px;
            left: 5px;
            content: '';
            width: 28px;
            height: 28px;
            background-size: 28px
        }

    .pay-title.ignored span:before {
        background: url(../images/ignored.svg) no-repeat;
        background-size: 28px
    }

.pay-form {
    padding-bottom: 50px
}

    .pay-form .relative:after {
        display: none
    }

    .pay-form .relative {
        margin-bottom: 0
    }

    .pay-form .holder {
        font-size: 16px;
        font-weight: 400;
        line-height: initial;
        color: #3D3D3D;
        margin-bottom: 8px;
        display: block;
        position: relative;
        font-style: normal
    }

    .pay-form input[type="text"], .pay-form textarea, .pay-form input[type="submit"] {
        width: 100%;
        height: 44px;
        border-radius: 3px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #BCBCBC;
        background-color: var(--white);
        outline: none
    }

        .pay-form input[type="text"]::placeholder, .pay-form textarea::placeholder, .pay-form input[type="submit"]::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #949191
        }

        .pay-form input[type="text"].disabled-textbox, .pay-form textarea.disabled-textbox, .pay-form input[type="submit"].disabled-textbox {
            background: #ccc;
            pointer-events: none;
            border-color: #afafaf
        }

    .pay-form input[type="submit"] {
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        width: auto;
        padding: 0 100px;
        background: var(--theme-colour1);
        color: var(--white);
        border-radius: 8px
    }

    .pay-form .typer {
        margin-bottom: 30px;
        padding: 0
    }

        .pay-form .typer.special-amount {
            padding-bottom: 20px
        }

        .pay-form .typer:before {
            background: url(../images/rupee-white.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 45px;
            height: 45px;
            background-size: 20px;
            background-color: var(--theme-colour1);
            background-position: center
        }

        .pay-form .typer input[type="text"] {
            font: 700 26px "Rubik",sans-serif;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            color: var(--theme-colour1);
            padding-left: 65px;
            height: 45px;
            border: none;
            border-bottom: 1px solid var(--theme-colour1);
            margin: 0
        }

    .pay-form textarea {
        resize: none;
        width: 100%;
        height: 130px;
        border-radius: 3px;
        padding: 16px 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #BCBCBC;
        background-color: var(--white);
        outline: none
    }

        .pay-form textarea::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #949191
        }

    .pay-form .field-validation-error {
        position: absolute;
        bottom: 0;
        left: 0;
        font: 400 12px "Rubik",sans-serif;
        color: #f00;
        display: block
    }

        .pay-form .field-validation-error:first-letter {
            text-transform: uppercase
        }

    .pay-form .pay-set, .pay-form .pay-reset {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        border: 1px solid transparent;
        height: 44px;
        width: 100%;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .pay-form .pay-set {
        background: var(--theme-colour1);
        color: var(--white)
    }

    .pay-form .pay-reset {
        background: var(--white);
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

.helper {
    font: 400 30px "Rubik";
    color: var(--white);
    line-height: 85px;
    background: var(--light2Bg) !important;
    display: flex
}

@media (max-width: 1199px) {
    .helper {
        color: #25282a;
        flex-direction: column
    }
}

@media (max-width: 767px) {
    .helper span {
        font-size: 25px
    }
}

@media (max-width: 1199px) {
    .helper div {
        height: auto;
        display: flex;
        width: 100%;
        line-height: initial;
        padding: 10px
    }
}

.helper em {
    font-size: 29px
}

@media (max-width: 767px) {
    .helper em {
        font-size: 24px
    }
}

.exclusive {
    margin-bottom: 40px
}

@media (max-width: 991px) {
    .exclusive {
        margin-bottom: 0px
    }
}

@media (max-width: 767px) {
    .exclusive {
        margin: 30px 0
    }
}

.exclusive .inner {
    padding: 25px 30px
}

@media (max-width: 767px) {
    .exclusive .inner {
        padding: 10px
    }
}

.exclusive p {
    font: 400 28px "Rubik",sans-serif;
    color: var(--black);
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 20px
}

@media (max-width: 767px) {
    .exclusive p {
        font-size: 24px
    }
}

@media (max-width: 480px) {
    .exclusive p {
        font-size: 20px
    }
}

.exclusive p em {
    font-style: normal;
    color: var(--theme-colour1)
}

.exclusive p strong {
    font: 400 38px "Rubik",sans-serif;
    display: block
}

@media (max-width: 767px) {
    .exclusive p strong {
        font-size: 33px
    }
}

@media (max-width: 480px) {
    .exclusive p strong {
        font-size: 28px
    }
}

.exclusive a {
    font: 400 16px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    padding: 8px 45px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--theme-colour1);
    border: 1px solid transparent;
    height: 44px;
    width: 235px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px
}

@media (max-width: 767px) {
    .exclusive a {
        margin-bottom: 0
    }
}

.confirmation-container {
    padding: 0 30px;
    background: var(--white)
}

@media (max-width: 480px) {
    .confirmation-container {
        padding: 0px
    }
}

.confirmation-container .innerWrap {
    padding: 0px 20px;
    width: 800px;
    max-width: 100%;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1)
}

    .confirmation-container .innerWrap .inner {
        padding: 50px 0px;
        height: 600px;
        box-shadow: none !important;
        width: 100% !important
    }

.confirmation-container .title {
    font: 400 24px "Rubik",sans-serif;
    color: var(--theme-colour1);
    display: block;
    background: var(--white);
    text-transform: uppercase;
    text-align: center;
    position: relative
}

    .confirmation-container .title span {
        background: var(--white);
        display: inline-block;
        position: relative;
        z-index: 10;
        padding: 0 15px
    }

    .confirmation-container .title:before {
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: var(--theme-colour1);
        z-index: 1
    }

.confirmation-container .c-details {
    margin: 20px 0
}

    .confirmation-container .c-details span, .confirmation-container .c-details em {
        font: 400 15px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #2d2d2d
    }

    .confirmation-container .c-details em {
        font-style: normal;
        color: var(--theme-colour1)
    }

        .confirmation-container .c-details em.lowercase {
            text-transform: lowercase;
            word-break: break-all
        }

.confirmation-container button {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 22px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: var(--white);
    padding: 2px 30px;
    display: inline-block;
    border: 1px solid var(--theme-colour1);
    margin-top: 20px;
    text-transform: uppercase
}

.payment-container {
    padding: 30px;
    background: var(--white)
}

    .payment-container .wrapper {
        padding: 80px 0
    }

    .payment-container .inner {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: 90px 30px 30px;
        background: var(--white);
        position: relative;
        border: 1px solid var(--theme-colour1);
        text-align: center
    }

        .payment-container .inner:before {
            position: absolute;
            top: -30px;
            left: 50%;
            content: '';
            margin-left: -42px;
            width: 84px;
            height: 84px
        }

        .payment-container .inner.success:before {
            background: url(../images/success-tick.png) no-repeat;
            background-size: 84px
        }

        .payment-container .inner.failure:before {
            background: url(../images/success-cross.png) no-repeat;
            background-size: 84px
        }

        .payment-container .inner p {
            font: 700 24px "Rubik",sans-serif;
            text-transform: uppercase;
            color: var(--theme-colour1);
            text-align: center
        }

            .payment-container .inner p strong {
                font: 400 18px "Rubik",sans-serif;
                display: block
            }

            .payment-container .inner p.error-desc {
                font: 400 14px "Rubik",sans-serif;
                color: var(--black);
                margin-top: 40px;
                text-transform: capitalize
            }

                .payment-container .inner p.error-desc strong {
                    font: 700 28px "Rubik",sans-serif;
                    color: var(--theme-colour1);
                    display: block;
                    margin-bottom: 10px
                }

                    .payment-container .inner p.error-desc strong:first-letter {
                        text-transform: uppercase
                    }

        .payment-container .inner .pay-name {
            font: 400 28px "Rubik",sans-serif;
            text-transform: capitalize;
            display: block;
            text-align: center;
            color: var(--black);
            margin: 40px 0 20px
        }

        .payment-container .inner em {
            font: 400 14px "Rubik",sans-serif;
            color: var(--black);
            display: block;
            vertical-align: middle;
            font-style: normal;
            text-align: center;
            margin-bottom: 5px
        }

            .payment-container .inner em i {
                font-style: normal;
                position: relative;
                padding-left: 30px
            }

                .payment-container .inner em i:before {
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 16px;
                    height: 16px
                }

            .payment-container .inner em:nth-of-type(1) i:before {
                background: url(../images/envelope.svg) no-repeat;
                background-size: 16px
            }

            .payment-container .inner em:nth-of-type(2) i:before {
                background: url(../images/phone-blue.svg) no-repeat;
                background-size: 16px
            }

        .payment-container .inner .pay-amount {
            background: var(--theme-colour1);
            color: var(--white);
            display: block;
            padding: 15px;
            text-align: center;
            margin: 40px 0 20px
        }

            .payment-container .inner .pay-amount span {
                font: 400 24px "Rubik",sans-serif;
                display: block;
                vertical-align: middle;
                text-transform: uppercase
            }

                .payment-container .inner .pay-amount span:nth-child(1) {
                    border-bottom: 1px solid var(--white)
                }

                .payment-container .inner .pay-amount span i {
                    font-style: normal;
                    position: relative;
                    padding-left: 20px
                }

                    .payment-container .inner .pay-amount span i:before {
                        background: url(../images/rupee-white.svg) no-repeat;
                        position: absolute;
                        top: 9px;
                        left: 0;
                        content: '';
                        width: 16px;
                        height: 16px;
                        background-size: 16px
                    }

.ignored-container {
    padding: 0 30px;
    background: var(--white)
}

    .ignored-container .inner {
        background: #fefdfd;
        padding-bottom: 20px
    }

    .ignored-container .message-item {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        background: var(--white);
        margin: 15px 0;
        padding: 30px
    }

    .ignored-container .message-content .head .names .user.verified {
        padding-right: 25px;
        position: relative;
        display: inline-block
    }

        .ignored-container .message-content .head .names .user.verified:after {
            background: url(../images/success.svg) no-repeat;
            position: absolute;
            bottom: 1px;
            right: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

.remove-ignore {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 12px "Rubik",sans-serif;
    display: inline-block;
    color: var(--theme-colour1);
    padding: 4px 20px;
    text-transform: capitalize;
    border: 1px solid var(--theme-colour1)
}

    .remove-ignore span {
        position: relative;
        padding-left: 20px
    }

        .remove-ignore span:before {
            background: url(../images/cancel-filled-red.svg) no-repeat;
            position: absolute;
            top: 1px;
            left: 0;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    .remove-ignore:hover {
        color: var(--theme-colour1)
    }

.edit-profile .p-profile-wrap .p-head-wrap {
    padding-right: 0
}

    .edit-profile .p-profile-wrap .p-head-wrap .p-for {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        color: #4f4f4f;
        display: block;
        margin: 10px 0
    }

.upgrade-account p {
    font: 400 14px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-align: left
}

    .upgrade-account p:first-letter {
        text-transform: uppercase
    }

.upgrade-account a {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font: 700 16px "Rubik",sans-serif;
    text-transform: uppercase;
    display: block;
    padding: 8px 30px;
    background: #fdd606;
    color: var(--theme-colour1);
    text-align: center;
    margin-bottom: 5px;
    border: 1px solid transparent
}

.hidden-overflow {
    overflow: hidden
}

.horoscope-section.extend {
    min-width: 430px
}

.horoscope-section .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr {
    border-right: 1px solid #333;
    background: var(--white)
}

.horoscope-section em.victim {
    font: 400 22px "Rubik",sans-serif;
    display: block;
    color: #fdd606;
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 15px
}

    .horoscope-section em.victim span {
        font: 400 12px "Rubik",sans-serif;
        display: inline-block;
        vertical-align: middle;
        color: var(--white);
        padding-left: 15px;
        text-transform: uppercase
    }

.sending-interest p {
    font-size: 16px;
    color: var(--white);
    margin: 10px 0;
    text-align: left
}

    .sending-interest p strong {
        font-size: 16px;
        text-transform: uppercase;
        color: #fdd606
    }

.sending-interest textarea {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 150px;
    padding: 10px 0 0 10px;
    resize: none;
    border: 1px solid transparent
}

.sending-interest .text-interest {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    background: #fdd606;
    color: var(--theme-colour1);
    border: 1px solid transparent;
    text-transform: uppercase;
    padding: 4px 30px;
    margin-top: 20px
}

.upgrade-pack {
    background: var(--theme-colour1);
    color: var(--white);
    text-align: center
}

    .upgrade-pack strong {
        color: #fdd606;
        text-transform: uppercase
    }

    .upgrade-pack .upgrade-title {
        margin-bottom: 20px
    }

        .upgrade-pack .upgrade-title em, .upgrade-pack .upgrade-title span {
            font: 400 14px "Rubik",sans-serif;
            display: block
        }

        .upgrade-pack .upgrade-title em {
            font-style: normal;
            display: block;
            position: relative;
            margin-bottom: 15px
        }

            .upgrade-pack .upgrade-title em:before {
                position: absolute;
                top: 50%;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: var(--white)
            }

            .upgrade-pack .upgrade-title em i {
                font-style: normal;
                display: inline;
                background: var(--theme-colour1);
                padding: 0 5px;
                position: relative;
                z-index: 10
            }

    .upgrade-pack .up {
        margin-bottom: 20px
    }

        .upgrade-pack .up p {
            font: 400 14px "Rubik",sans-serif;
            text-align: center;
            color: var(--white)
        }

            .upgrade-pack .up p span {
                display: block;
                margin-bottom: 10px;
                text-transform: uppercase
            }

    .upgrade-pack a {
        font: 400 15px "Rubik",sans-serif;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        background: #fdd606;
        color: var(--theme-colour1);
        display: inline-block;
        padding: 4px 30px;
        text-transform: uppercase;
        border-color: #fdd606
    }

.editor, .edit-location, .edit-edu-prof {
    z-index: 1000;
    display: none
}

    .editor .editor-title, .edit-location .editor-title, .edit-edu-prof .editor-title {
        font: 400 16px "Rubik",sans-serif;
        color: #fdd606;
        text-transform: uppercase;
        margin-bottom: 10px
    }

    .editor .relative, .edit-location .relative, .edit-edu-prof .relative {
        padding-top: 0
    }

    .editor p, .edit-location p, .edit-edu-prof p {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-bottom: 5px;
        color: var(--white)
    }

    .editor .editor-submit, .edit-location .editor-submit, .edit-edu-prof .editor-submit {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        background: #fdd606;
        color: var(--theme-colour1);
        display: inline-block;
        padding: 4px 30px;
        border: 1px solid transparent
    }

    .editor .text-center {
        display: none
    }

    .editor .select-dropdown {
        display: none
    }

        .editor .select-dropdown.open {
            display: block
        }

.back-dash {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    margin-top: 15px;
    display: inline-block;
    padding: 4px 30px;
    background: #fdd606;
    color: var(--theme-colour1);
    border: 1px solid transparent;
    text-transform: capitalize
}

.fb-form .register {
    background: var(--white);
    position: relative;
    float: none;
    width: 100%
}

.fb-form .select-dropdown.country-code select {
    border-bottom-color: #747474;
    color: var(--theme-colour1)
}

.fb-form .select-dropdown .caption {
    color: var(--theme-colour1)
}

.fb-form .title {
    color: var(--theme-colour1)
}

    .fb-form .title span, .fb-form .title em {
        display: block
    }

    .fb-form .title span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: capitalize
    }

        .fb-form .title span strong {
            font: 700 16px "Rubik",sans-serif
        }

    .fb-form .title em {
        font: 400 14px "Rubik",sans-serif
    }

    .fb-form .title p {
        font: 400 12px "Rubik",sans-serif;
        text-align: center;
        color: var(--theme-colour1)
    }

.fb-form #fb-submit {
    font: 400 15px "Rubik",sans-serif;
    position: relative;
    display: block;
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white);
    padding: 10px 0;
    text-transform: uppercase;
    margin-top: 10px
}

    .fb-form #fb-submit em {
        display: none
    }

    .fb-form #fb-submit input, .fb-form #fb-submit button {
        opacity: 0;
        cursor: pointer
    }

.upgrade-now {
    background: url(../images/upgrade-now.jpg) no-repeat;
    background-position: center;
    background-color: var(--theme-colour1);
    background-size: cover;
    text-align: center;
    min-height: 330px;
    padding: 30px;
    margin-bottom: 20px
}

    .upgrade-now p {
        font: 400 20px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        text-align: center;
        margin-bottom: 15px
    }

        .upgrade-now p strong {
            font: 700 20px "Rubik",sans-serif
        }

    .upgrade-now a {
        font: 700 16px "Rubik",sans-serif;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid transparent;
        display: inline-block;
        padding: 5px 30px;
        background: #e76045;
        color: var(--white);
        text-transform: uppercase;
        margin-top: 20px
    }

.overflow-v {
    overflow-x: visible
}

.default-goto {
    font: 400 15px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--theme-colour1);
    margin-top: 30px;
    display: inline-block;
    text-decoration: underline
}

.add-photo-crumb {
    font: 400 13px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-decoration: underline;
    text-transform: capitalize;
    margin-bottom: 25px
}

.advance-submit {
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white)
}

    .advance-submit span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        display: block;
        position: relative;
        padding: 12px 0
    }

        .advance-submit span input[type="submit"] {
            opacity: 0;
            cursor: pointer;
            z-index: 100
        }

        .advance-submit span em {
            position: relative;
            padding-right: 30px;
            font-style: normal
        }

            .advance-submit span em:after {
                position: absolute;
                top: 3px;
                right: 5px;
                background: url(../images/search-yellow.svg) no-repeat;
                content: '';
                width: 15px;
                height: 15px;
                background-size: 15px
            }

.advanced-p {
    font: 400 14px "Rubik",sans-serif;
    text-align: center;
    color: #a2a2aa;
    padding: 15px 30px;
    line-height: 20px
}

.advanced-accordion, .filter-accordion {
    font-size: 14px
}

.adv-relative {
    position: relative;
    margin-bottom: 30px
}

    .adv-relative i {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #2D2D2D;
        text-transform: capitalize;
        margin-bottom: 10px;
        display: block;
        font-style: inherit
    }

    .adv-relative .select2-container--default .select2-selection--multiple {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: transparent;
        border-color: #afafaf
    }

    .adv-relative .select2-results__option {
        float: left;
        padding: 0 15px
    }

    .adv-relative .pick-dates input[type="text"] {
        width: 100%;
        height: 32px;
        border: none;
        border-bottom: 1px solid #afafaf;
        background: transparent
    }

.gender-switch {
    overflow: hidden;
    height: 30px;
    position: relative
}

    .gender-switch.disabled * {
        pointer-events: none
    }

    .gender-switch span {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        display: block;
        width: 55%;
        height: 30px;
        display: inline-block;
        text-align: center;
        text-transform: capitalize;
        border: 1px solid #afafaf;
        position: absolute;
        line-height: 28px;
        top: 0;
        cursor: pointer
    }

        .gender-switch span:first-of-type {
            left: 0
        }

        .gender-switch span:last-of-type {
            right: 0
        }

        .gender-switch span.active {
            background: var(--theme-colour1);
            color: var(--white);
            z-index: 10;
            border-color: var(--theme-colour1)
        }

    .gender-switch input[type="radio"] {
        display: none
    }

.adv-select {
    position: relative;
    display: block
}

    .adv-select:after {
        background: url(../images/down-arrow-accordion.svg) no-repeat;
        position: absolute;
        top: 7px;
        right: 15px;
        width: 15px;
        height: 15px;
        background-size: 15px;
        content: '';
        pointer-events: none
    }

    .adv-select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        border-bottom: 1px solid #afafaf;
        height: 30px;
        width: 100%;
        background: transparent;
        padding-left: 10px
    }

    .adv-select.rounded select {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid #afafaf
    }

    .adv-select.contact-inverse select {
        font: 400 12px "Rubik",sans-serif;
        padding-left: 0;
        border-bottom-color: #747477;
        color: #525151
    }

.adv-age em {
    font: 400 13px "Rubik",sans-serif;
    font-style: normal;
    display: block;
    margin: 5px 0;
    text-align: center
}

.adv-save input[type="text"] {
    width: 100%;
    height: 32px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #afafaf;
    margin: 0px 28px 20px
}

.adv-save a {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #057DC4;
    text-decoration: underline;
    text-transform: capitalize
}

.adv-save .save-search {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 14px;
    background: var(--theme-colour1);
    display: inline-block;
    color: #ffffff;
    white-space: nowrap;
    padding: 5px 20px;
    border: none;
    text-transform: capitalize
}

.adv-save p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #494949;
    text-align: left
}

.saved-searches {
    padding: 20px 8px 25px 15px;
    background: var(--lightBg);
    margin-bottom: 15px;
    color: var(--theme-text-colour);
    overflow: hidden
}

    .saved-searches .title {
        font: 700 16px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-bottom: 15px
    }

    .saved-searches .instance {
        text-transform: capitalize;
        margin-bottom: 15px
    }

        .saved-searches .instance span {
            font: 400 12px "Rubik",sans-serif;
            display: block;
            margin-bottom: 5px
        }

        .saved-searches .instance a {
            font: 400 12px "Rubik",sans-serif;
            display: inline-block;
            color: var(--theme-colour1);
            position: relative;
            padding-right: 15px
        }

            .saved-searches .instance a:after {
                position: absolute;
                top: -1px;
                right: 5px;
                content: '|';
                color: #e7e7e7
            }

            .saved-searches .instance a:last-of-type {
                padding-right: 0
            }

                .saved-searches .instance a:last-of-type:after {
                    display: none
                }

            .saved-searches .instance a:hover {
                text-decoration: underline
            }

    .saved-searches .ss-viewall {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 12px "Rubik",sans-serif;
        background: #fdd606;
        color: var(--theme-colour1);
        padding: 0 15px;
        border: 1px solid transparent;
        text-transform: capitalize
    }

#filter-mobile, #filter-close {
    font: 700 14px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: #fdd606;
    display: block;
    text-align: center;
    padding: 5px 0;
    text-transform: uppercase
}

#filter-close {
    position: relative
}

    #filter-close span {
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/close-white.svg) no-repeat;
        width: 28px;
        height: 28px;
        display: inline-block;
        background-size: 12px;
        background-position: center;
        cursor: pointer
    }

.edit-select select, .filter-single select {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    border: 1px solid var(--theme-colour1);
    padding-left: 10px
}

.edit-select .select-appearance, .filter-single .select-appearance {
    display: block;
    position: relative
}

    .edit-select .select-appearance:after, .filter-single .select-appearance:after {
        position: absolute;
        top: 14px;
        right: 15px;
        pointer-events: none;
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid var(--theme-colour1)
    }

.filter-section {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 10000;
    overflow-y: scroll;
    display: none
}

    .filter-section .title {
        display: none
    }

    .filter-section .scrollbar-inner > .scroll-element.scroll-y {
        right: 0
    }

.filter-accordion a, .more-filters a {
    font: 400 13px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--theme-colour1);
    display: block
}

    .filter-accordion a.active, .more-filters a.active {
        text-decoration: underline
    }

    .filter-accordion a:hover, .more-filters a:hover {
        text-decoration: underline
    }

    .filter-accordion a.more {
        text-align: right;
        padding-right: 10px
    }

.filter-slider {
    position: relative;
    padding: 0 15px 20px 11px
}

    .filter-slider em {
        font: 400 12px "Rubik",sans-serif;
        color: var(--theme-colour1);
        position: absolute;
        bottom: 0
    }

        .filter-slider em:first-of-type {
            left: 2px
        }

        .filter-slider em:last-of-type {
            right: 10px
        }

.filter-single {
    padding-right: 10px;
    padding-left: 2px
}

    .filter-single select {
        background: transparent
    }

.hide-filter {
    display: none
}

.more-filters {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 20000;
    display: none
}

    .more-filters .inner-title {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        background: var(--theme-colour1);
        color: var(--white);
        position: relative;
        padding: 12px 85px 12px 15px
    }

        .more-filters .inner-title input[type="submit"], .more-filters .inner-title a {
            position: absolute;
            top: 0;
            display: block;
            width: 40px;
            height: 100%;
            border: none
        }

        .more-filters .inner-title input[type="submit"] {
            background: url(../images/tick-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            right: 49px
        }

        .more-filters .inner-title a {
            background: url(../images/close-white.svg) no-repeat;
            background-size: 15px;
            background-position: center;
            right: 8px
        }

    .more-filters .inner {
        padding: 15px;
        background: #efefef
    }

    .more-filters .scrollbar-inner {
        height: 100vh
    }

        .more-filters .scrollbar-inner .scroll-element .scroll-bar {
            background: #ccc
        }

.checkers, .all-checker {
    font: 400 13px "Rubik",sans-serif;
    padding-left: 22px;
    position: relative;
    text-transform: capitalize;
    margin-bottom: 2px;
    color: var(--theme-colour1)
}

    .checkers input[type="checkbox"], .all-checker input[type="checkbox"] {
        display: none
    }

    .checkers i {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: absolute;
        top: 1px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid var(--theme-colour1);
        display: inline-block;
        cursor: pointer
    }

        .checkers i[data-status="1"] {
            background: url(../images/tick-blue.svg) no-repeat;
            background-size: 10px;
            background-position: center
        }

        .checkers i[data-status="0"] {
            background: none
        }

    .all-checker em {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: absolute;
        top: 1px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid var(--theme-colour1);
        display: inline-block;
        cursor: pointer
    }

        .all-checker em[data-all="1"] {
            background: url(../images/tick-blue.svg) no-repeat;
            background-size: 10px;
            background-position: center
        }

        .all-checker em[data-all="0"] {
            background: none
        }

    .all-checker .checkers-inner {
        margin: 10px 0
    }

.filter-location {
    cursor: pointer
}

    .filter-location span {
        font: 700 12px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #333
    }

    .filter-location p {
        font: 400 12px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

.misc-title {
    font: 400 18px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-transform: capitalize;
    margin-bottom: 15px
}

    .misc-title span {
        position: relative;
        padding-right: 30px
    }

        .misc-title span:after {
            background: url(../images/faq-after.svg) no-repeat;
            position: absolute;
            top: 3px;
            right: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

.hype {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #004e93;
    overflow: hidden;
    margin-bottom: 20px
}

    .hype p {
        padding: 50px 30px;
        position: relative;
        color: var(--white);
        margin-bottom: 0
    }

        .hype p:before, .hype p:after {
            position: absolute;
            content: '';
            width: 30px;
            height: 30px
        }

        .hype p:before {
            background: url(../images/quote-left-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            top: 15px
        }

        .hype p:after {
            background: url(../images/quote-right-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            bottom: 15px
        }

.royale {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: url(../images/royale-bg.jpg) no-repeat;
    border: 1px solid #e3e3e3;
    background-position: center bottom;
    background-size: cover;
    margin-bottom: 20px;
    padding-bottom: 30px
}

    .royale .diadem {
        display: block;
        position: relative;
        text-align: center;
        padding: 80px 0 15px
    }

        .royale .diadem span, .royale .diadem em {
            color: #292929;
            text-transform: uppercase
        }

        .royale .diadem span {
            font: 700 16px "Rubik",sans-serif;
            margin-bottom: 5px;
            display: block
        }

        .royale .diadem em {
            font: 400 12px "Rubik",sans-serif
        }

        .royale .diadem:before {
            position: absolute;
            top: 25px;
            left: 50%;
            background: url(../images/diadem.png) no-repeat;
            background-size: 76px 45px;
            content: '';
            width: 76px;
            height: 45px;
            margin-left: -38px
        }

        .royale .diadem:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 30px;
            height: 3px;
            background: var(--theme-colour1);
            content: '';
            margin-left: -15px
        }

.select2-locked {
    pointer-events: none;
    opacity: 0.5
}

.messages-contact {
    text-align: left
}

    .messages-contact div.blocked {
        margin-bottom: 5px
    }

        .messages-contact div.blocked:last-of-type {
            margin-bottom: 0
        }

    .messages-contact span, .messages-contact p {
        font: 400 12px "Rubik",sans-serif;
        color: var(--white)
    }

    .messages-contact span {
        display: block;
        text-transform: capitalize;
        text-decoration: underline
    }

    .messages-contact strong {
        font-weight: 700;
        color: #fdd606
    }

    .messages-contact em {
        font-size: 12px;
        padding-left: 15px;
        font-style: normal;
        text-transform: uppercase
    }

    .messages-contact p {
        text-align: left
    }

        .messages-contact p:first-letter {
            text-transform: uppercase
        }

.apply-now {
    margin-bottom: 30px
}

    .apply-now .title, .apply-now .ap-title {
        font: 700 24px "Rubik",sans-serif;
        color: var(--theme-colour1);
        display: block;
        margin-bottom: 10px;
        text-transform: capitalize
    }

    .apply-now .ap-title {
        font: 400 24px "Rubik",sans-serif
    }

    .apply-now input[type="submit"] {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        width: 100%;
        height: 52px;
        line-height: 52px;
        background: var(--theme-colour1);
        color: var(--white);
        border: 1px solid transparent
    }

    .apply-now.inverse .inner-flex {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

    .apply-now.inverse input[type="submit"], .apply-now.inverse a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid var(--theme-colour1);
        display: flex;
        justify-content: center;
        text-align: center;
        width: 45%;
        align-items: center;
        min-height: 46px;
        padding: 5px 0;
        text-transform: uppercase;
        height: auto
    }

    .apply-now.inverse.solo {
        padding-bottom: 30px
    }

    .apply-now .more {
        background: var(--lightBg);
        padding: 30px 30px 40px;
        margin-top: 30px
    }

        .apply-now .more p {
            font: 400 14px "Rubik",sans-serif;
            color: var(--theme-text-colour);
            margin-bottom: 20px
        }

            .apply-now .more p strong {
                color: var(--theme-colour1)
            }

        .apply-now .more .before {
            font: 400 14px "Rubik",sans-serif;
            border-bottom: 1px solid var(--theme-colour2);
            color: var(--theme-colour2);
            padding: 5px 0 8px 45px;
            position: relative;
            margin-bottom: 20px
        }

            .apply-now .more .before:before {
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
                width: 30px;
                height: 30px
            }

            .apply-now .more .before.one:before {
                background: url(../images/before-one.svg) no-repeat;
                background-size: 30px
            }

            .apply-now .more .before.two {
                margin-bottom: 0
            }

                .apply-now .more .before.two:before {
                    background: url(../images/before-two.svg) no-repeat;
                    background-size: 30px
                }

.highs ul {
    margin: 20px 0 0 0;
    padding: 0
}

.highs li {
    font: 400 14px "Rubik",sans-serif;
    color: #555;
    position: relative;
    padding-left: 55px;
    list-style: none;
    margin-bottom: 20px
}

    .highs li:before {
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        background: var(--theme-colour1);
        width: 35px;
        height: 1px
    }

.site-tables {
    margin: 20px 0
}

    .site-tables .table-title {
        font: 400 20px "Rubik",sans-serif;
        color: #212121;
        text-transform: capitalize;
        margin-bottom: 15px
    }

    .site-tables table {
        font: 400 14px "Rubik",sans-serif;
        margin-bottom: 30px;
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word
    }

        .site-tables table.no-mb {
            margin-bottom: 0
        }

        .site-tables table tr th, .site-tables table tr td {
            text-align: center;
            padding: 10px 5px;
            color: #5c5c5c
        }

        .site-tables table tr th {
            text-transform: uppercase;
            background: #ebebeb
        }

        .site-tables table tr td {
            text-transform: capitalize
        }

        .site-tables table.first tr th:first-child {
            background: var(--theme-colour1);
            color: var(--white)
        }

.here {
    background: var(--lightBg);
    padding: 30px
}

@media (max-width: 991px) {
    .here {
        margin: 30px 0
    }
}

.here .here-title {
    margin-bottom: 20px
}

    .here .here-title p {
        font: 700 20px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .here .here-title span {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-text-colour)
    }

.here .mail-call {
    margin-top: 30px
}

    .here .mail-call p {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-text-colour);
        text-transform: capitalize
    }

    .here .mail-call span {
        font: 400 15px "Rubik",sans-serif;
        color: var(--theme-text-colour)
    }

        .here .mail-call span a {
            color: var(--theme-colour1)
        }

            .here .mail-call span a:hover {
                color: #fdd606
            }

        .here .mail-call span em {
            font: 400 12px "Rubik",sans-serif;
            font-style: normal;
            color: var(--theme-text-colour)
        }

.here.inverse .here-title {
    margin-bottom: 10px
}

.career-apply {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: var(--lightBg);
    overflow: hidden;
    position: relative;
    padding: 70px 15px 55px;
    margin-bottom: 15px
}

    .career-apply .title {
        position: absolute;
        top: 15px;
        left: 0;
        font: 700 20px "Rubik",sans-serif;
        background: var(--light2Bg);
        color: var(--c2d);
        margin-bottom: 15px;
        display: block;
        width: 100%;
        padding: 5px 15px;
        text-transform: capitalize;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .career-apply p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-text-colour);
        line-height: 18px;
        text-align: justify;
        margin-bottom: 15px
    }

    .career-apply .desc {
        padding-left: 30px;
        display: block;
        position: relative
    }

        .career-apply .desc:before {
            background: url(../images/marker-yellow.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

        .career-apply .desc em {
            font: 400 14px "Rubik",sans-serif;
            color: var(--theme-text-colour);
            display: block;
            font-style: normal;
            text-transform: capitalize
        }

            .career-apply .desc em strong {
                color: var(--theme-colour1)
            }

            .career-apply .desc em:first-child {
                margin-bottom: 5px
            }

    .career-apply a {
        font: 400 16px "Rubik",sans-serif;
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase
    }

        .career-apply a:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

.load-more {
    margin: 25px 0;
    text-align: center
}

    .load-more a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font: 400 13px "Rubik",sans-serif;
        display: inline-block;
        padding: 4px 25px;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: capitalize;
        border: 1px solid transparent;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 160px;
        margin: auto;
        text-decoration: none
    }

.job-location, .published {
    font: 400 18px "Rubik",sans-serif;
    display: block;
    color: #3e3e3e;
    text-transform: capitalize;
    padding: 15px 0 15px 45px;
    border: 1px solid #b8b8b8;
    border-left: none;
    border-right: none;
    position: relative;
    margin: 10px 0
}

.published {
    padding: 15px 0;
    border: none;
    margin-top: 0;
    padding-top: 0
}

.job-location:before {
    background: url(../images/marker-blue.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 30px;
    height: 30px;
    background-size: 30px;
    margin-top: -15px
}

.searching-partner {
    background: var(--light2Bg);
    margin-bottom: 20px
}

    .searching-partner .title {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        padding: 10px;
        color: var(--c2d);
        text-transform: uppercase
    }

        .searching-partner .title strong {
            font: 700 50px "Rubik",sans-serif;
            display: block
        }

    .searching-partner .inner {
        padding: 15px 20px 10px;
        text-align: center
    }

        .searching-partner .inner img {
            margin: 10px auto
        }

    .searching-partner .matches {
        font: 400 20px "Rubik",sans-serif;
        color: var(--c2d);
        text-transform: uppercase;
        border: none
    }

        .searching-partner .matches strong {
            font: 700 40px "Rubik",sans-serif;
            display: block
        }

.radius-link {
    font: 700 18px "Rubik",sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white);
    text-transform: uppercase;
    padding: 8px 0;
    display: block;
    margin: 20px 0;
    border: 1px solid transparent
}

.file-upload {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    height: 40px;
    border: 1px solid #939393;
    text-align: center;
    overflow: hidden;
    margin: 15px 0 0;
    padding-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .file-upload span {
        font: 400 13px "Rubik",sans-serif;
        color: #818181;
        position: relative;
        padding-right: 25px;
        line-height: 28px;
        text-transform: capitalize
    }

        .file-upload span:after {
            position: absolute;
            top: 1px;
            right: 0;
            background: url(../images/upload-blue.svg) no-repeat;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    .file-upload input[type="file"] {
        opacity: 0;
        z-index: 100;
        cursor: pointer
    }

.file-ancestor .file-upload {
    margin: 15px;
    padding-bottom: 0
}

.file-ancestor .preview-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    display: grid;
    margin-top: 10px;
    padding: 4px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    column-gap: 10px;
    row-gap: 6px
}

.file-ancestor .add-more {
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in;
    position: relative;
    width: 100%;
    height: 100px;
    padding-top: 65px;
    float: left;
    border: 1px dashed var(--theme-colour1);
    display: none;
    margin-bottom: 5px;
    text-align: center
}

    .file-ancestor .add-more:hover {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        background: #fdd606
    }

    .file-ancestor .add-more span {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

    .file-ancestor .add-more:before {
        background: url(../images/add-more-blue.svg) no-repeat;
        position: absolute;
        top: 15px;
        left: 50%;
        content: '';
        width: 40px;
        height: 40px;
        background-size: 40px;
        margin: 0 0 0 -20px
    }

    .file-ancestor .add-more input[type="file"] {
        opacity: 0;
        z-index: 100;
        cursor: pointer
    }

.file-ancestor .show-more .add-more {
    display: block
}

.file-ancestor .preview {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.25);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    border: 1px solid #afafaf;
    width: 50%;
    height: 100px;
    float: left;
    overflow: hidden;
    margin-bottom: 5px;
    background-size: cover;
    background-position: center;
    position: relative
}

    .file-ancestor .preview .delete {
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.85);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.85);
        box-shadow: 0 0 10px rgba(0,0,0,0.85);
        position: absolute;
        top: 50%;
        left: 50%;
        background: url(../images/delete-white.svg) no-repeat;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-size: 15px;
        background-position: center;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
        border: 1px solid var(--white);
        background-color: var(--theme-colour1);
        display: inline-block;
        position: relative;
        cursor: pointer
    }

.discount {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: var(--theme-colour1);
    padding: 15px;
    text-align: center;
    z-index: 1000
}

    .discount .content {
        padding: 5px 30px 15px;
        border: 2px dashed var(--white);
        position: relative
    }

        .discount .content span {
            font: 700 30px "Rubik",sans-serif;
            color: var(--white);
            display: block
        }

        .discount .content p {
            font: 400 14px "Rubik",sans-serif;
            color: var(--white);
            text-align: center
        }

            .discount .content p:first-letter {
                text-transform: uppercase
            }

        .discount .content a.now {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: #fdd606;
            width: 75px;
            height: 75px;
            padding-top: 16px;
            display: inline-block;
            border: 1px solid transparent;
            color: #181818
        }

            .discount .content a.now em, .discount .content a.now i {
                font-style: normal;
                display: block;
                text-transform: uppercase
            }

            .discount .content a.now i {
                font: 700 12px "Rubik",sans-serif
            }

            .discount .content a.now em {
                font: 700 23px "Rubik",sans-serif
            }

    .discount a#close-discount {
        background: url(../images/close-white.svg) no-repeat;
        position: absolute;
        top: -15px;
        right: -15px;
        width: 44px;
        height: 44px;
        background-color: var(--theme-colour1);
        display: inline-block;
        background-size: 20px;
        background-position: center
    }

.file-upload-relative {
    padding: 0 0 15px;
    margin: 0 0 20px
}

.map-container {
    margin: 20px 0;
    background: var(--theme-colour1)
}

    .map-container .map-title {
        padding: 20px
    }

        .map-container .map-title .desc {
            margin-bottom: 20px
        }

            .map-container .map-title .desc p {
                font: 400 24px "Rubik",sans-serif;
                text-transform: capitalize;
                margin-bottom: 0;
                color: var(--white)
            }

            .map-container .map-title .desc span {
                font: 400 12px "Rubik",sans-serif;
                display: block;
                color: var(--white)
            }

        .map-container .map-title .map-relative {
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            height: 38px;
            position: relative;
            overflow: hidden
        }

            .map-container .map-title .map-relative input[type="text"] {
                padding-left: 20px;
                height: 100%;
                width: 100%;
                padding-right: 70px
            }

            .map-container .map-title .map-relative .submit-button {
                background: url(../images/search-blue.svg) no-repeat;
                position: absolute;
                top: 0;
                right: 0;
                background-color: #fdd606;
                width: 60px;
                height: 100%;
                background-size: 15px;
                background-position: center
            }

                .map-container .map-title .map-relative .submit-button .map-submit {
                    opacity: 0
                }

#intimate-map {
    width: 100%;
    height: 405px;
    text-align: center
}

.tdu {
    font-size: 18px
}

ul#ui-id-1 {
    margin: 0;
    padding: 0;
    background: var(--white)
}

    ul#ui-id-1 li {
        font: 400 14px "Rubik",sans-serif;
        list-style: none;
        padding: 5px;
        text-transform: capitalize
    }

.services-content p {
    line-height: 30px
}

.verify .inner, .verification .inner {
    display: none
}

    .verify .inner input[type="text"], .verification .inner input[type="text"] {
        width: 100%;
        height: 35px;
        border: none;
        border-bottom: 1px solid #afafaf
    }

    .verify .inner .add-hobby, .verification .inner .add-hobby {
        display: block
    }

    .verify .inner.shown, .verification .inner.shown {
        display: block
    }

.verification .outer {
    text-align: left
}

    .verification .outer .add-hobby {
        margin-top: 0
    }

    .verification .outer p {
        font: 400 16px "Rubik",sans-serif;
        margin-bottom: 15px;
        color: var(--white)
    }

.verification .inner input[type="text"] {
    border-color: var(--white);
    background: transparent
}

.verification .inner [placeholder] {
    color: var(--white) !important
}

.verification .inner a, .verification .inner button {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-block;
    background: #fdd606;
    color: var(--theme-colour1);
    padding: 2px 20px;
    text-transform: capitalize;
    margin-right: 15px
}

    .verification .inner a:last-child, .verification .inner button:last-child {
        margin-right: 0
    }

.verify-email .inner {
    display: block
}

.verify-email p {
    color: var(--white)
}

.ad-location {
    background: url(../images/ad-location.jpg) no-repeat;
    background-position: top center;
    padding: 280px 0 35px;
    background-color: var(--theme-colour1);
    text-align: center;
    margin-bottom: 20px
}

    .ad-location .location-title {
        font: 400 16px "Rubik",sans-serif;
        color: var(--white);
        text-transform: capitalize;
        margin-bottom: 20px
    }

        .ad-location .location-title span {
            display: block
        }

        .ad-location .location-title strong {
            font: 700 16px "Rubik",sans-serif
        }

    .ad-location a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        text-transform: capitalize;
        color: var(--white);
        border: 1px solid var(--white);
        display: inline-block;
        padding: 5px 30px
    }

.message-item {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #f5f4f4;
    padding: 15px 10px;
    overflow: hidden;
    margin-bottom: 15px
}

    .message-item.unread {
        background: #e4f1ff
    }

    .message-item .message-pic img, .message-item .message-pic .chat-now {
        display: inline-block;
        vertical-align: middle
    }

    .message-item .message-pic img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin: 0 0 10px
    }

span.quick-or {
    font: 400 16px "Rubik",sans-serif;
    margin: 0;
    display: block;
    text-align: center;
    text-transform: uppercase
}

    span.quick-or em {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: inline-block;
        border: 1px solid var(--theme-colour1);
        color: var(--theme-colour1);
        font-style: normal;
        padding-top: 9px;
        position: relative
    }

        span.quick-or em:before, span.quick-or em:after {
            width: 100px;
            height: 1px;
            background: var(--theme-colour1);
            content: '';
            position: absolute;
            top: 50%
        }

        span.quick-or em:before {
            left: 50%;
            margin-left: -150px
        }

        span.quick-or em:after {
            right: 50%;
            margin-right: -150px
        }

.ov-hidden {
    overflow: hidden
}

.side-panel .profileOfTheDay {
    position: relative;
    background: linear-gradient(169deg, #f3fbff 48%, #fff 34%);
    border-radius: 8px;
    border: 1px solid #F3F3F3;
    margin-bottom: 6px
}

@media (max-width: 991px) {
    .side-panel .profileOfTheDay {
        order: 0;
        margin-top: 12px
    }
}

.side-panel .profileOfTheDay.profileOfTheDayNo {
    background: transparent
}

.side-panel .profileOfTheDay .header {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--theme-colour1);
    padding: 20px 10px 0;
    text-align: center
}

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .header {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.side-panel .profileOfTheDay .photo {
    text-align: center;
    max-width: 141px;
    margin: auto
}

    .side-panel .profileOfTheDay .photo img {
        border: 2px dashed var(--theme-colour1);
        border-radius: 50%;
        padding: 10px;
        display: initial;
        width: 100%
    }

.side-panel .profileOfTheDay .footerData {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px
}

    .side-panel .profileOfTheDay .footerData .name {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #505050;
        margin-top: 8px
    }

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .footerData .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.side-panel .profileOfTheDay .footerData .subName {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #505050;
    margin-top: 8px
}

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .footerData .subName {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.side-panel .profileOfTheDay .buttonRow {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-bottom: 20px
}

    .side-panel .profileOfTheDay .buttonRow button {
        border: none;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        height: 45px;
        border: none;
        color: #434343;
        background-color: transparent;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        cursor: pointer
    }

        .side-panel .profileOfTheDay .buttonRow button:hover {
            background-color: #add3ea;
            color: var(--white)
        }

    .side-panel .profileOfTheDay .buttonRow .cmnBtn {
        width: 95px
    }

        .side-panel .profileOfTheDay .buttonRow .cmnBtn:last-child {
            color: var(--white);
            background-color: var(--theme-colour1)
        }

            .side-panel .profileOfTheDay .buttonRow .cmnBtn:last-child:hover {
                background-color: var(--theme-colour2)
            }

.panel-headingFaq {
    padding-left: 40px !important
}

    .panel-headingFaq::before {
        left: 19px !important;
        transition: ease-in-out .4s
    }

    .panel-headingFaq.activeFaq::before {
        transform: rotate(90deg)
    }

.panel-bodyFaq {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

@media (max-width: 480px) {
    .p-horo-table {
        width: 65% !important
    }
}

.default-popup .default-section .close-default-popup, .default-popup2 .default-section .close-default-popup {
    background-color: #484848
}

.slider.slider-horizontal .tooltip {
    -ms-transform: translateX(-24%) !important;
    transform: translateX(-24%) !important
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon:hover .status {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
    z-index: 1
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon .status {
    width: fit-content !important;
    min-width: 125px !important
}

*:focus {
    outline: none;
    text-decoration: none
}

body {
    width: 100%;
    height: 100%;
    -ms-overflow-style: scrollbar;
    overflow-x: hidden
}

.edecec {
    background: #edecec
}

a, a:hover {
    text-decoration: none
}

    a:visited, a:focus {
        text-decoration: none
    }

select::-ms-expand {
    display: none
}

.totop, .desktop {
    display: none
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: rgba(0,0,0,0.75)
}

::-webkit-scrollbar-thumb {
    background: var(--theme-colour1),15%;
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.75)
}

p {
    font: 400 14px "Rubik",sans-serif;
    color: #828282;
    text-align: justify;
    line-height: 24px
}

    p.border-bottom {
        padding-bottom: 10px;
        border-bottom: 1px solid #ebebeb
    }

    p.caution {
        padding-left: 30px;
        position: relative;
        margin: 20px 0
    }

        p.caution:before {
            background: url(../images/caution.svg) no-repeat;
            position: absolute;
            top: 4px;
            left: 2px;
            content: '';
            width: 15px;
            height: 15px;
            background-size: 15px
        }

.absolute .tabled {
    display: table;
    width: 100%;
    height: 100%
}

.absolute .celled {
    display: table-cell;
    vertical-align: middle
}

header {
    width: 100%;
    background: var(--theme-colour1);
    padding: 0;
    position: relative
}

    header .logo {
        float: left
    }

        header .logo img {
            height: 45px
        }

    header #hamburger {
        position: absolute;
        top: 8px;
        right: 15px;
        width: 30px;
        height: 30px;
        display: inline-block;
        cursor: pointer
    }

        header #hamburger[data-open="0"] {
            background: url(../images/ham-white.svg) no-repeat;
            background-size: 30px
        }

        header #hamburger[data-open="1"] {
            background: url(../images/close-white.svg) no-repeat;
            background-size: 18px;
            background-position: center
        }

    header .menus {
        width: 100%;
        background: var(--theme-colour1);
        display: none;
        padding: 5px 30px 10px;
        background: var(--theme-colour1),3%
    }

        header .menus .links, header .menus .has-dropdown span {
            font: 400 14px "Rubik",sans-serif;
            color: var(--white);
            text-transform: uppercase;
            display: block;
            padding: 8px 0
        }

        header .menus .has-dropdown span {
            cursor: pointer
        }

        header .menus .has-dropdown .inner {
            padding-left: 10px;
            display: none
        }

            header .menus .has-dropdown .inner .links {
                text-transform: capitalize
            }

    header .notification-profile {
        float: right;
        margin-right: 50px
    }

    header .notification, header .profile {
        display: inline-block;
        float: left;
        width: 35px;
        height: 45px;
        margin: 0 10px;
        cursor: pointer;
        text-align: center
    }

        header .notification .icon, header .profile .icon {
            display: inline-block;
            width: 100%;
            height: 100%;
            position: relative
        }

        header .notification .icon {
            background: url(../images/dashboard-notification.svg) no-repeat;
            background-size: 20px;
            background-position: center
        }

            header .notification .icon:after {
                position: absolute;
                top: 7px;
                right: 0;
                font: 400 10px "Rubik",sans-serif;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                content: attr(data-stat);
                background: #fdd606;
                color: var(--theme-colour1);
                width: 16px;
                height: 16px;
                text-align: center;
                padding-top: 1px
            }

            header .notification .icon[data-stat="0"] {
                cursor: default
            }

                header .notification .icon[data-stat="0"]:after {
                    display: none
                }

        header .profile .icon {
            background: url(../images/dashboard-user.svg) no-repeat;
            background-size: 20px;
            background-position: center
        }

    header .dropdown-icon em {
        padding-right: 30px;
        position: relative;
        font-style: normal
    }

        header .dropdown-icon em:after {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            position: absolute;
            top: 8px;
            right: 0;
            content: '';
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid var(--white)
        }

        header .dropdown-icon em a {
            color: var(--white)
        }

    header .dropdown-icon[data-open="0"] em:after {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        transform: rotate(0)
    }

    header .dropdown-icon[data-open="1"] em:after {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    header .count {
        font-style: normal;
        padding-right: 25px;
        position: relative
    }

        header .count:after {
            font: 400 10px "Rubik",sans-serif;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            top: -1px;
            right: 0;
            content: attr(data-count);
            width: 20px;
            height: 20px;
            background: #fdd606;
            color: var(--theme-colour1);
            text-align: center;
            padding-top: 3px
        }

    header .no-count .count:after {
        display: none
    }

.notification-drawer {
    width: 100%;
    background: var(--theme-colour1),3%;
    display: none
}

    .notification-drawer a {
        font: 400 12px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: var(--white)
    }

        .notification-drawer a.notify {
            padding: 15px 15px 15px 40px;
            border-bottom: 1px solid rgba(255,255,255,0.15);
            position: relative
        }

            .notification-drawer a.notify:last-child {
                border-bottom: none
            }

            .notification-drawer a.notify:before {
                background: url(../images/notification-white.svg) no-repeat;
                position: absolute;
                top: 50%;
                left: 15px;
                content: '';
                width: 14px;
                height: 14px;
                margin-top: -7px;
                background-size: 14px
            }

        .notification-drawer a.load-more {
            text-align: center;
            padding: 10px 15px 10px 0;
            margin: 0
        }

.profile-drawer {
    width: 100%;
    background: var(--theme-colour1),3%;
    display: none;
    padding: 15px
}

    .profile-drawer .name, .profile-drawer .account {
        padding: 10px 0
    }

        .profile-drawer .name span, .profile-drawer .account span {
            font: 400 14px "Rubik",sans-serif;
            display: block;
            color: var(--white);
            text-transform: capitalize
        }

            .profile-drawer .name span strong, .profile-drawer .account span strong {
                font: 400 12px "Rubik",sans-serif;
                text-transform: uppercase;
                margin-left: 10px
            }

        .profile-drawer .account a {
            color: #fdd606;
            position: relative;
            padding-left: 30px
        }

            .profile-drawer .account a:before {
                position: absolute;
                top: -1px;
                left: 15px;
                content: '|';
                color: #578cbc
            }

    .profile-drawer .profile-links {
        margin-top: 10px;
        border-top: 1px solid #578cbc
    }

        .profile-drawer .profile-links [class^="col-"]:first-child {
            margin-top: 10px
        }

        .profile-drawer .profile-links a {
            font: 400 14px "Rubik",sans-serif;
            display: block;
            padding: 10px 0;
            color: var(--white);
            text-transform: capitalize;
            position: relative;
            padding-left: 30px
        }

            .profile-drawer .profile-links a:before {
                position: absolute;
                top: 11px;
                left: 0;
                content: '';
                width: 16px;
                height: 16px
            }

            .profile-drawer .profile-links a.edit:before, .profile-drawer .profile-links .IcnGroup a.eye:before, .IcnGroup .profile-drawer .profile-links a.eye:before, .profile-drawer .profile-links .IcnGroup a.delete:before, .IcnGroup .profile-drawer .profile-links a.delete:before {
                background: url(../images/edit-white.svg) no-repeat;
                background-size: 16px
            }

            .profile-drawer .profile-links a.settings:before {
                background: url(../images/settings-white.svg) no-repeat;
                background-size: 16px
            }

            .profile-drawer .profile-links a.contact:before {
                background: url(../images/contact-white.svg) no-repeat;
                background-size: 16px
            }

            .profile-drawer .profile-links a.feedback:before {
                background: url(../images/feedback-white.svg) no-repeat;
                background-size: 16px
            }

            .profile-drawer .profile-links a.logout:before {
                background: url(../images/logout-white.svg) no-repeat;
                background-size: 16px
            }

            .profile-drawer .profile-links a.manager:before {
                background: url(../images/photo-camera.svg) no-repeat;
                background-size: 16px
            }

            .profile-drawer .profile-links a.changer:before {
                background: url(../images/padlock.svg) no-repeat;
                background-size: 16px
            }

.left-panel, .right-panel {
    margin: 10px 0
}

    .left-panel.no-mt, .right-panel.no-mt {
        margin-top: 0
    }

.person {
    background: var(--white);
    margin-bottom: 15px
}

    .person .inner {
        padding: 25px 15px 25px 25px
    }

        .person .inner span, .person .inner em {
            display: block
        }

        .person .inner span {
            font: 400 12px "Rubik",sans-serif;
            color: var(--theme-colour1);
            text-transform: capitalize
        }

        .person .inner em {
            font: 400 12px "Rubik",sans-serif;
            text-transform: uppercase;
            color: #727273
        }

        .person .inner img, .person .inner .desc {
            display: inline-block;
            vertical-align: middle
        }

        .person .inner img {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border: 1px solid var(--theme-colour1);
            margin: 0 5px 5px 0
        }

    .person a.link {
        font: 400 12px "Rubik",sans-serif;
        display: block;
        color: #727273;
        border-top: 1px solid #e1e1e1;
        text-transform: capitalize;
        position: relative;
        padding: 15px 15px 15px 25px
    }

        .person a.link:after {
            position: absolute;
            top: 50%;
            right: 15px;
            background: url(../images/arrow-right.svg) no-repeat;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px;
            margin-top: -7px
        }

.edecec {
    background: #edecec
}

.complete-wrapper {
    background: var(--white);
    margin-bottom: 15px
}

.complete-profile, .complete-suggestions {
    padding: 15px
}

    .complete-profile .complete-all, .complete-suggestions .complete-all {
        position: relative
    }

        .complete-profile .complete-all .title, .complete-suggestions .complete-all .title {
            font: 700 18px "Rubik",sans-serif;
            text-transform: capitalize;
            color: var(--theme-colour1);
            padding: 10px 0;
            display: block;
            border-bottom: 1px solid #e1e1e1;
            position: relative;
            padding-left: 30px
        }

            .complete-profile .complete-all .title:before, .complete-suggestions .complete-all .title:before {
                background: url(../images/edit.svg) no-repeat;
                position: absolute;
                top: 10px;
                left: 0;
                content: '';
                width: 23px;
                height: 23px;
                background-size: 23px
            }

            .complete-profile .complete-all .title.capitalized, .complete-suggestions .complete-all .title.capitalized {
                text-transform: capitalize
            }

                .complete-profile .complete-all .title.capitalized:before, .complete-suggestions .complete-all .title.capitalized:before {
                    background: url(../images/two-hearts.svg) no-repeat;
                    background-size: 23px
                }

.complete-suggestions {
    overflow: hidden;
    display: none
}

    .complete-suggestions .matches {
        border: none
    }

        .complete-suggestions .matches img {
            width: 100px;
            height: 100px;
            margin: auto auto 5px
        }

    .complete-suggestions img {
        width: auto !important;
        margin: auto
    }

    .complete-suggestions .complete-all .title {
        font: 700 18px "Rubik",sans-serif;
        text-transform: uppercase;
        color: var(--theme-colour1);
        padding: 10px 0;
        display: block;
        border-bottom: 1px solid #e1e1e1;
        position: relative;
        padding-left: 30px
    }

        .complete-suggestions .complete-all .title:before {
            background: url(../images/edit.svg) no-repeat;
            position: absolute;
            top: 10px;
            left: 0;
            content: '';
            width: 23px;
            height: 23px;
            background-size: 23px
        }

        .complete-suggestions .complete-all .title.capitalized {
            text-transform: capitalize
        }

            .complete-suggestions .complete-all .title.capitalized:before {
                background: url(../images/two-hearts.svg) no-repeat;
                background-size: 23px
            }

.relative {
    position: relative
}

.complete-owl {
    padding-top: 30px;
    position: relative;
    margin-bottom: 10px
}

    .complete-owl .unload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.95);
        z-index: 100;
        opacity: 0
    }

        .complete-owl .unload:after {
            position: absolute;
            top: 50%;
            left: 0;
            font: 400 14px "Rubik",sans-serif;
            margin-top: -9px;
            text-align: center;
            width: 100%;
            content: 'Skipping Profile...';
            display: block;
            color: #fdd606
        }

    .complete-owl p {
        font: 400 16px "Rubik",sans-serif;
        color: #000203
    }

    .complete-owl .default-wrapper {
        position: relative
    }

        .complete-owl .default-wrapper .inner {
            height: 48px
        }

        .complete-owl .default-wrapper input[type="text"] {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #e76045;
            padding-left: 155px
        }

        .complete-owl .default-wrapper input[type="submit"] {
            font: 400 16px "Rubik",sans-serif;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            width: 100%;
            height: 30px;
            line-height: 30px;
            color: var(--white);
            background: #e76045;
            text-transform: uppercase;
            border: none;
            margin-top: 10px
        }

        .complete-owl .default-wrapper:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 48px;
            content: ''
        }

        .complete-owl .default-wrapper.contact-number:before {
            background: url(../images/phone-call-white.svg) no-repeat;
            background-size: 25px;
            background-position: center;
            background-color: #e76045
        }

        .complete-owl .default-wrapper.add-height:before {
            background: url(../images/add-height.svg) no-repeat;
            background-size: 25px;
            background-position: center;
            background-color: #e76045
        }

        .complete-owl .default-wrapper.edu:before {
            background: url(../images/study.svg) no-repeat;
            background-size: 25px;
            background-position: center;
            background-color: #e76045
        }

        .complete-owl .default-wrapper.occu:before {
            background: url(../images/occupation-white.svg) no-repeat;
            background-size: 25px;
            background-position: center;
            background-color: #e76045
        }

        .complete-owl .default-wrapper select {
            position: absolute;
            top: 10px;
            left: 55px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            width: 90px;
            background: #e4e4e4;
            color: #4d4f51;
            border: none;
            padding: 3px 0;
            text-align: center
        }

        .complete-owl .default-wrapper.add-height select {
            width: calc(100% - 55px);
            background: transparent;
            padding-left: 15px
        }

        .complete-owl .default-wrapper.add-height .inner {
            position: relative
        }

            .complete-owl .default-wrapper.add-height .inner:after {
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: #e76045
            }

        .complete-owl .default-wrapper .second-dropdown {
            position: relative;
            border-bottom: 1px solid #e76045;
            width: 100%
        }

            .complete-owl .default-wrapper .second-dropdown select {
                background: transparent;
                width: calc(100% - 60px);
                text-align: left !important
            }

        .complete-owl .default-wrapper.edu:before {
            height: 96px
        }

        .complete-owl .default-wrapper.edu .inner {
            height: 96px
        }

        .complete-owl .default-wrapper.edu .second-dropdown select:last-child {
            top: 55px
        }

    .complete-owl .owl-nav {
        position: absolute;
        top: 8px;
        right: 0;
        width: 100%;
        height: 16px
    }

        .complete-owl .owl-nav .owl-prev, .complete-owl .owl-nav .owl-next {
            position: absolute;
            bottom: 0;
            font-size: 0;
            width: 16px;
            height: 100%
        }

            .complete-owl .owl-nav .owl-prev.disabled, .complete-owl .owl-nav .owl-next.disabled {
                opacity: 0.35
            }

        .complete-owl .owl-nav .owl-prev {
            background: url(../images/owl-prev-blue.svg) no-repeat;
            background-size: 16px;
            right: 20px
        }

        .complete-owl .owl-nav .owl-next {
            background: url(../images/owl-next-blue.svg) no-repeat;
            background-size: 16px;
            right: 0
        }

.c100 {
    float: none;
    margin: 0 auto 15px
}

.percentage {
    overflow: hidden
}

    .percentage .c100 span {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--theme-colour1)
    }

        .percentage .c100 span:before {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            -webkit-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            transition: all .3s ease-in;
            -webkit-transform: scale(0.98) rotate(135deg);
            -moz-transform: scale(0.98) rotate(135deg);
            transform: scale(0.98) rotate(135deg);
            position: absolute;
            top: 50%;
            left: 50%;
            content: '';
            width: 75%;
            height: 75%;
            background: #fdd606,20%;
            z-index: -1;
            margin: -37.5% 0 0 -37.5%
        }

        .percentage .c100 span:hover:before {
            -webkit-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            transition: all .3s ease-in;
            -webkit-transform: scale(0.85) rotate(90deg);
            -moz-transform: scale(0.85) rotate(90deg);
            transform: scale(0.85) rotate(90deg)
        }

.updates {
    background: var(--white);
    padding: 15px 0 15px 15px;
    margin-bottom: 15px
}

    .updates .all {
        font: 400 12px "Rubik",sans-serif;
        display: block;
        text-align: center;
        color: var(--theme-colour1);
        text-transform: uppercase;
        padding: 8px 0
    }

        .updates .all:after {
            content: attr(data-count)
        }

    .updates .scrollbar-inner {
        position: relative
    }

        .updates .scrollbar-inner:after {
            position: absolute;
            top: 0;
            right: 0;
            content: '';
            width: 15px;
            height: 100%;
            background: var(--white)
        }

    .updates .updates-no-data {
        font: 400 20px "Rubik",sans-serif;
        color: var(--theme-colour1);
        display: block;
        text-transform: capitalize;
        text-align: center;
        padding: 30px 0
    }

.blue-title {
    font: 700 18px "Rubik",sans-serif;
    display: block;
    color: var(--theme-colour1);
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
    text-transform: uppercase
}

    .blue-title:before {
        background: url(../images/update.svg) no-repeat;
        position: absolute;
        top: 1px;
        left: 0;
        content: '';
        width: 20px;
        height: 20px;
        background-size: 20px
    }

    .blue-title.no-before {
        padding-left: 0
    }

        .blue-title.no-before:before {
            display: none
        }

.last-updated {
    font: 400 14px "Rubik",sans-serif;
    color: #898b8c;
    display: block
}

.updates-title {
    margin-bottom: 15px
}

    .updates-title .blue-title {
        margin-bottom: 5px
    }

.update-item {
    padding-right: 15px;
    padding-bottom: 10px;
    padding: 0 70px 15px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    overflow: hidden
}

    .update-item img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px
    }

    .update-item .who {
        font: 400 14px "Rubik",sans-serif;
        color: var(--black);
        display: block;
        margin: 10px 0 0 0
    }

    .update-item .desc a, .update-item .desc i {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        display: inline-block;
        color: var(--theme-colour1);
        font-style: normal;
        margin-right: 10px;
        position: relative
    }

        .update-item .desc a:after, .update-item .desc i:after {
            position: absolute;
            top: -1px;
            right: -8px;
            content: '|';
            color: var(--theme-colour1)
        }

        .update-item .desc a:last-of-type:after {
            display: none
        }

    .update-item .closed {
        position: absolute;
        top: 0;
        right: 20px;
        background: url(../images/cancel-grey.svg) no-repeat;
        display: inline-block;
        width: 15px;
        height: 15px;
        background-size: 15px
    }

    .update-item .timestamp {
        display: none
    }

.get-premium {
    position: relative;
    background: var(--theme-colour1);
    padding: 50px 0 25px;
    margin-bottom: 15px;
    text-align: center
}

    .get-premium .title {
        font: 700 16px "Rubik",sans-serif;
        text-align: center;
        color: #fdd606;
        text-transform: uppercase;
        padding: 20px 5px 0
    }

    .get-premium:before {
        background: url(../images/crownLg.svg) no-repeat;
        position: absolute;
        top: 10px;
        left: 50%;
        content: '';
        width: 60px;
        height: 44px;
        background-size: 60px 44px;
        margin-left: -30px
    }

    .get-premium ul {
        margin: 15px 0 25px;
        padding: 0 10px;
        text-align: center
    }

        .get-premium ul li {
            font: 400 14px "Rubik",sans-serif;
            color: var(--white);
            list-style: none;
            display: block;
            margin-bottom: 10px;
            padding-left: 25px
        }

            .get-premium ul li span {
                position: relative
            }

                .get-premium ul li span:before {
                    background: url(../images/diamond.svg) no-repeat;
                    position: absolute;
                    top: 3px;
                    left: -25px;
                    content: '';
                    width: 13px;
                    height: 13px;
                    background-size: 13px
                }

    .get-premium a {
        border-radius: 8px;
        display: inline-block;
        padding: 9px 30px;
        background: #fdd606;
        color: var(--theme-colour1);
        text-transform: uppercase;
        text-align: center;
        margin-top: 10px
    }

    .get-premium.show-classic:before {
        display: none
    }

.qksbmitfrm {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

    .qksbmitfrm button {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        background-color: var(--theme-colour1);
        border: none;
        border-radius: 5px;
        color: white;
        padding: 12px 19px;
        cursor: pointer;
        width: 120px
    }

        .qksbmitfrm button:hover {
            background-color: var(--theme-colour2)
        }

.classic .classic-title {
    font: 700 16px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #fdd606;
    color: var(--theme-colour1);
    text-transform: uppercase;
    padding: 10px 0
}

.classic .classic-subtitle {
    font: 400 12px "Rubik",sans-serif;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 5px
}

.classic .finger {
    -webkit-border-top-right-radius: 15px;
    -moz-border-top-right-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;
    font: 400 12px "Rubik",sans-serif;
    width: 180px;
    height: 25px;
    line-height: 25px;
    background: var(--white);
    padding: 0 70px 0 40px;
    margin: 10px auto;
    position: relative;
    color: var(--theme-colour1);
    text-transform: capitalize;
    text-align: left;
    overflow: hidden
}

    .classic .finger:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 25px;
        height: 100%
    }

    .classic .finger.message:before {
        background: url(../images/envelope.svg) no-repeat;
        background-size: 13px;
        background-position: center;
        background-color: #fdd606
    }

    .classic .finger.contact:before {
        background: url(../images/phone-blue.svg) no-repeat;
        background-size: 13px;
        background-position: center;
        background-color: #fdd606
    }

    .classic .finger.address:before {
        background: url(../images/house.svg) no-repeat;
        background-size: 13px;
        background-position: center;
        background-color: #fdd606
    }

    .classic .finger.horoscope:before {
        background: url(../images/star-blue.svg) no-repeat;
        background-size: 13px;
        background-position: center;
        background-color: #fdd606
    }

    .classic .finger.default:before {
        background: url(../images/default-blue.svg) no-repeat;
        background-size: 13px;
        background-position: center;
        background-color: #fdd606
    }

    .classic .finger:after {
        position: absolute;
        top: 0;
        right: 0;
        width: 65px;
        height: 100%;
        background: #edecec;
        content: attr(data-count);
        text-align: center
    }

    .classic .finger:last-of-type {
        margin-bottom: 15px
    }

.basic-wrapper {
    background: var(--white);
    padding: 15px;
    margin-bottom: 15px
}

    .basic-wrapper .owl-carousel .owl-item img {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        width: auto
    }

.basic-owl {
    padding-top: 15px
}

    .basic-owl .owl-nav {
        position: absolute;
        top: -12px;
        right: 0;
        width: 100%;
        height: 16px
    }

        .basic-owl .owl-nav .owl-prev, .basic-owl .owl-nav .owl-next {
            position: absolute;
            bottom: 0;
            font-size: 0;
            width: 16px;
            height: 100%
        }

            .basic-owl .owl-nav .owl-prev.disabled, .basic-owl .owl-nav .owl-next.disabled {
                opacity: 0.35
            }

        .basic-owl .owl-nav .owl-prev {
            background: url(../images/owl-prev-blue.svg) no-repeat;
            background-size: 16px;
            right: 20px
        }

        .basic-owl .owl-nav .owl-next {
            background: url(../images/owl-next-blue.svg) no-repeat;
            background-size: 16px;
            right: 0
        }

.matches {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    padding: 18px 0;
    border: 1px solid var(--lightDrkBg)
}

    .matches img {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        margin: 0 auto 5px
    }

    .matches span {
        display: block
    }

    .matches .code {
        font: 500 16px "Rubik",sans-serif;
        text-transform: uppercase;
        color: var(--theme-colour1);
        letter-spacing: 1px;
        margin: 10px 0
    }

    .matches .details {
        font: 400 14px "Rubik",sans-serif;
        color: var(--black);
        margin: 4px 0 10px
    }

    .matches .send-interest {
        font: 400 12px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        padding: 4px 15px;
        border: 1px solid var(--theme-colour1);
        color: var(--theme-colour1);
        text-transform: capitalize;
        position: relative;
        overflow: hidden
    }

        .matches .send-interest em {
            font-style: normal;
            position: relative;
            padding-left: 15px
        }

            .matches .send-interest em:before {
                background: url(../images/heart-filled-red.svg) no-repeat;
                position: absolute;
                top: 3px;
                left: 0;
                content: '';
                width: 10px;
                height: 10px;
                background-size: 10px
            }

        .matches .send-interest.active {
            border-color: #369623;
            color: #369623
        }

            .matches .send-interest.active em:before {
                background: url(../images/interest-sent.svg) no-repeat;
                background-size: 10px
            }

.preference-item {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #bdd6ed;
    padding: 15px 30px 20px
}

    .preference-item img {
        margin: auto auto 15px
    }

    .preference-item .desc em, .preference-item .desc span {
        display: block;
        margin-bottom: 5px
    }

    .preference-item .desc em {
        font: 400 18px "Rubik",sans-serif;
        font-style: normal;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .preference-item .desc span {
        font: 400 14px "Rubik",sans-serif;
        color: #747373;
        position: relative;
        padding-left: 25px
    }

        .preference-item .desc span:before {
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 15px;
            height: 15px
        }

        .preference-item .desc span.physique:before {
            background: url(../images/user-blue.svg) no-repeat;
            background-size: 15px
        }

        .preference-item .desc span.caste:before {
            background: url(../images/book.svg) no-repeat;
            background-size: 15px
        }

        .preference-item .desc span.loc:before {
            background: url(../images/marker-blue.svg) no-repeat;
            background-size: 15px
        }

        .preference-item .desc span.edu:before {
            background: url(../images/graduate.svg) no-repeat;
            background-size: 15px
        }

    .preference-item .desc a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        padding: 8px 30px;
        border: 1px solid var(--theme-colour1);
        color: var(--theme-colour1);
        text-transform: capitalize;
        margin-top: 5px;
        position: relative;
        overflow: hidden
    }

        .preference-item .desc a span {
            position: relative;
            padding-left: 20px;
            margin-bottom: 0
        }

            .preference-item .desc a span:before {
                background: url(../images/heart-filled-red.svg) no-repeat;
                position: absolute;
                top: 3px;
                left: 0;
                content: '';
                width: 13px;
                height: 13px;
                background-size: 13px
            }

        .preference-item .desc a.active {
            border-color: #369623;
            color: #369623
        }

            .preference-item .desc a.active span:before {
                background: url(../images/interest-sent.svg) no-repeat;
                background-size: 13px
            }

        .preference-item .desc a.code {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            font-size: 18px;
            padding: 0;
            border: none
        }

#matches-owl .owl-item, #who-owl .owl-item, #preference-owl .owl-item {
    padding: 1px
}

.admirer {
    margin-bottom: 10px
}

    .admirer img, .admirer .desc {
        display: inline-block;
        vertical-align: middle;
        margin: 0
    }

    .admirer img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-right: 10px
    }

    .admirer .desc span, .admirer .desc em, .admirer .desc a {
        display: block
    }

    .admirer .desc span {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .admirer .desc em, .admirer .desc a {
        font: 400 12px "Rubik",sans-serif;
        color: var(--black);
        font-style: normal
    }

    .admirer .desc em {
        margin: 2px 0
    }

    .admirer .desc a {
        color: var(--theme-colour1);
        text-transform: capitalize
    }

.who-all {
    font: 700 12px "Rubik",sans-serif;
    text-transform: uppercase;
    text-align: center;
    color: var(--theme-colour1);
    display: block;
    border-top: 1px solid #e1e1e1;
    padding: 10px 0 0
}

.latest-updates {
    background: var(--white);
    padding: 15px 0 0;
    margin-bottom: 15px
}

    .latest-updates .padded {
        padding: 0 15px
    }

        .latest-updates .padded .update-item:last-child {
            border-bottom-color: transparent
        }

    .latest-updates .blue-title {
        font-size: 20px
    }

        .latest-updates .blue-title:before {
            top: 2px
        }

    .latest-updates .day {
        font: 400 16px "Rubik",sans-serif;
        background: var(--theme-colour1);
        color: var(--white);
        padding: 8px 15px;
        text-transform: uppercase;
        margin-bottom: 15px;
        border-left: 15px solid #fdd606
    }

        .latest-updates .day:not(:first-of-type) {
            margin-top: 15px
        }

    .latest-updates .update-item .closed, .latest-updates .update-item .timestamp {
        right: 0
    }

.right-panel .latest-updates:not(:first-of-type) {
    padding-top: 0
}

.tabs {
    background: var(--white);
    margin-bottom: 10px
}

    .tabs .title, .tabs span {
        font: 400 16px "Rubik",sans-serif;
        padding: 15px
    }

    .tabs .title {
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase;
        padding: 15px 30px
    }

        .tabs .title i {
            position: relative;
            font-style: normal;
            padding-right: 30px
        }

            .tabs .title i:after {
                background: url(../images/title-down-arrow.svg) no-repeat;
                position: absolute;
                top: 3px;
                right: 0;
                content: '';
                width: 15px;
                height: 15px;
                background-size: 15px
            }

    .tabs span {
        font: 400 14px "Rubik",sans-serif;
        color: #828282;
        display: block;
        text-transform: capitalize;
        cursor: pointer;
        position: relative;
        border-bottom: 1px solid #e1e1e1
    }

        .tabs span:after {
            position: absolute;
            top: 18px;
            right: 15px;
            content: '';
            width: 14px;
            height: 14px
        }

        .tabs span.active {
            color: var(--theme-colour1)
        }

            .tabs span.active:after {
                background: url(../images/double-arrow.svg) no-repeat;
                background-size: 14px
            }

    .tabs .inner {
        padding: 0 15px
    }

        .tabs .inner span:last-child {
            border-bottom: none
        }

.tab-wrapper {
    background: var(--white);
    padding: 15px
}

    .tab-wrapper [class^="tab"]:not(.TabInterests):not(.tab1) {
        display: none
    }

.tab-content .message-tabs-desc:last-of-type {
    display: none
}

.message-tabs {
    overflow: hidden;
    padding-bottom: 25px
}

    .message-tabs a {
        font: 400 16px "Rubik",sans-serif;
        display: block;
        text-transform: uppercase;
        text-align: center;
        float: left;
        width: 50%;
        background: var(--white);
        color: var(--theme-colour1);
        position: relative;
        border: 1px solid var(--theme-colour1)
    }

        .message-tabs a:after {
            position: absolute;
            bottom: -8px;
            left: 50%;
            content: '';
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid var(--theme-colour1);
            margin-left: -8px;
            display: none
        }

        .message-tabs a span {
            position: relative;
            padding: 15px 0 15px 20px;
            display: inline-block
        }

            .message-tabs a span:before {
                position: absolute;
                top: 17px;
                left: 0;
                content: '';
                width: 16px;
                height: 16px
            }

            .message-tabs a span.inbox:before {
                background: url(../images/inbox-blue.svg) no-repeat;
                background-size: 16px
            }

            .message-tabs a span.outbox:before {
                background: url(../images/outbox-blue.svg) no-repeat;
                background-size: 16px
            }

        .message-tabs a.active {
            background: var(--theme-colour1);
            color: var(--white)
        }

            .message-tabs a.active:after {
                display: block
            }

            .message-tabs a.active span.inbox:before {
                background: url(../images/inbox-white.svg) no-repeat;
                background-size: 16px
            }

            .message-tabs a.active span.outbox:before {
                background: url(../images/outbox-white.svg) no-repeat;
                background-size: 16px
            }

.message-content .head {
    border-bottom: 1px solid #dee2e5;
    padding-bottom: 10px;
    margin-bottom: 10px;
    overflow: hidden
}

    .message-content .head .names .user {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: var(--theme-colour1);
        margin-bottom: 10px
    }

        .message-content .head .names .user em {
            font-style: normal;
            color: #747576;
            text-transform: uppercase
        }

    .message-content .head .names .icons a, .message-content .head .names .icons span {
        display: inline-block;
        vertical-align: middle
    }

    .message-content .head .names .icons a {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        margin: 0 5px;
        border: 1px solid var(--theme-colour1)
    }

        .message-content .head .names .icons a.contact {
            background: url(../images/contact-icon.svg) no-repeat;
            background-size: 14px;
            background-position: center;
            background-color: transparent;
            margin-left: 0
        }

        .message-content .head .names .icons a.horoscope {
            background: url(../images/horoscope-icon.svg) no-repeat;
            background-size: 14px;
            background-position: center;
            background-color: transparent
        }

    .message-content .head .names .icons span {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font: 400 10px "Rubik",sans-serif;
        background: #e76045;
        color: var(--white);
        padding: 4px 6px;
        text-transform: capitalize;
        margin-left: 10px
    }

    .message-content .head .date {
        margin: 10px 0
    }

        .message-content .head .date span, .message-content .head .date a {
            display: inline-block;
            vertical-align: middle
        }

        .message-content .head .date span {
            font: 400 12px "Rubik",sans-serif;
            color: #8c8d8d;
            position: relative;
            padding-left: 25px;
            text-transform: capitalize
        }

            .message-content .head .date span:before {
                background: url(../images/calendar-blue.svg) no-repeat;
                position: absolute;
                top: 1px;
                left: 0;
                content: '';
                width: 14px;
                height: 14px;
                background-size: 14px
            }

        .message-content .head .date a {
            background: url(../images/delete-grey.svg) no-repeat;
            display: inline-block;
            width: 16px;
            height: 16px;
            background-size: 16px;
            margin-left: 15px
        }

    .message-content .head .miscellaneous {
        margin: 0 0 10px 0
    }

        .message-content .head .miscellaneous em, .message-content .head .miscellaneous i {
            font: 400 12px "Rubik",sans-serif;
            font-style: normal;
            display: inline-block;
            vertical-align: middle;
            text-transform: capitalize
        }

        .message-content .head .miscellaneous em {
            margin-right: 10px
        }

            .message-content .head .miscellaneous em.offline {
                color: #e76045
            }

            .message-content .head .miscellaneous em.online, .message-content .head .miscellaneous .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li em.offline, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .message-content .head .miscellaneous em.offline, .message-content .head .miscellaneous .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li em.horoscope, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .message-content .head .miscellaneous em.horoscope {
                color: #14a309
            }

        .message-content .head .miscellaneous i {
            color: #919090
        }

        .message-content .head .miscellaneous span {
            font: 400 10px "Rubik",sans-serif;
            display: block;
            color: var(--theme-colour1);
            text-transform: capitalize;
            margin-top: 15px
        }

        .message-content .head .miscellaneous .view-pro {
            font: 400 12px "Rubik",sans-serif;
            color: var(--theme-colour1);
            text-transform: capitalize;
            display: block
        }

            .message-content .head .miscellaneous .view-pro:hover {
                text-decoration: underline
            }

.message-content .minor-details {
    margin-bottom: 10px;
    overflow: hidden
}

    .message-content .minor-details span {
        font: 400 12px "Rubik",sans-serif;
        display: block;
        position: relative;
        padding-left: 22px;
        color: #747373;
        text-transform: capitalize;
        margin-bottom: 8px
    }

        .message-content .minor-details span:before {
            position: absolute;
            top: 1px;
            left: 0;
            content: '';
            width: 13px;
            height: 13px
        }

        .message-content .minor-details span.physique:before {
            background: url(../images/user-blue.svg) no-repeat;
            background-size: 13px
        }

        .message-content .minor-details span.caste:before {
            background: url(../images/book.svg) no-repeat;
            background-size: 13px
        }

        .message-content .minor-details span.location:before {
            background: url(../images/marker-blue.svg) no-repeat;
            background-size: 13px
        }

        .message-content .minor-details span.education:before {
            background: url(../images/graduate.svg) no-repeat;
            background-size: 13px
        }

        .message-content .minor-details span.post:before {
            background: url(../images/briefcase.svg) no-repeat;
            background-size: 13px
        }

        .message-content .minor-details span:last-child {
            margin-bottom: 0
        }

.message-content .text .title {
    font: 400 12px "Rubik",sans-serif;
    display: block;
    color: var(--theme-colour1);
    margin-bottom: 5px
}

.message-content .text p, .message-content .text a {
    font: 400 12px "Rubik",sans-serif
}

.message-content .text p {
    color: #747373;
    text-align: justify;
    margin-bottom: 15px
}

.message-content .text a {
    font-size: 13px;
    text-transform: capitalize;
    color: var(--theme-colour1)
}

.message-content .interested a, .message-content .interested button, .message-content .interested em {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font: 400 12px "Rubik",sans-serif;
    display: block;
    width: 120px;
    padding: 4px 0;
    background: transparent;
    color: var(--theme-colour1);
    border: 1px solid var(--theme-colour1);
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden
}

    .message-content .interested a:last-child, .message-content .interested button:last-child, .message-content .interested em:last-child {
        margin-bottom: 0
    }

    .message-content .interested a span, .message-content .interested button span, .message-content .interested em span {
        position: relative;
        padding-left: 20px
    }

        .message-content .interested a span:before, .message-content .interested button span:before, .message-content .interested em span:before {
            background: url(../images/heart-filled-red.svg) no-repeat;
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 12px;
            height: 12px;
            background-size: 12px
        }

    .message-content .interested a.active, .message-content .interested button.active, .message-content .interested em.active {
        border-color: #369623
    }

        .message-content .interested a.active span, .message-content .interested button.active span, .message-content .interested em.active span {
            color: #369623
        }

            .message-content .interested a.active span:before, .message-content .interested button.active span:before, .message-content .interested em.active span:before {
                background: url(../images/heart-filled-green.svg) no-repeat;
                background-size: 12px
            }

        .message-content .interested a.active.reject, .message-content .interested button.active.reject, .message-content .interested em.active.reject {
            border-color: #e64c3c;
            color: #e64c3c
        }

            .message-content .interested a.active.reject span, .message-content .interested button.active.reject span, .message-content .interested em.active.reject span {
                color: #e64c3c !important
            }

    .message-content .interested a.not span:before, .message-content .interested button.not span:before, .message-content .interested em.not span:before {
        background: url(../images/cancel-filled-red.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.not.active span:before, .message-content .interested button.not.active span:before, .message-content .interested em.not.active span:before {
        background: url(../images/cancel-filled-red.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.accept span:before, .message-content .interested button.accept span:before, .message-content .interested em.accept span:before {
        background: url(../images/heart-filled-red.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.accept.active span:before, .message-content .interested button.accept.active span:before, .message-content .interested em.accept.active span:before {
        background: url(../images/heart-filled-green.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.shortlist.active span:before, .message-content .interested button.shortlist.active span:before, .message-content .interested em.shortlist.active span:before {
        background: url(../images/shortlisted.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.shortlist span:before, .message-content .interested button.shortlist span:before, .message-content .interested em.shortlist span:before {
        background: url(../images/shortlist.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.add-img span:before, .message-content .interested button.add-img span:before, .message-content .interested em.add-img span:before {
        background: url(../images/image-red.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.add-edu span:before, .message-content .interested button.add-edu span:before, .message-content .interested em.add-edu span:before {
        background: url(../images/add-edu.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.add-job span:before, .message-content .interested button.add-job span:before, .message-content .interested em.add-job span:before {
        background: url(../images/add-job.svg) no-repeat;
        background-size: 12px
    }

    .message-content .interested a.add-horo span:before, .message-content .interested button.add-horo span:before, .message-content .interested em.add-horo span:before {
        background: url(../images/horoscope-icon-red.svg) no-repeat;
        background-size: 12px
    }

.message-content .interested em {
    font-style: normal;
    border: none;
    position: relative;
    padding: 10px 10px 10px 25px;
    width: auto;
    display: inline-block
}

    .message-content .interested em:before {
        position: absolute;
        top: 12px;
        left: 6px;
        background: url(../images/tick-gray.svg) no-repeat;
        content: '';
        background-size: 12px;
        width: 12px;
        height: 12px
    }

.checkout-profile {
    padding: 70px 15px 60px;
    overflow: hidden;
    position: relative;
    background: #f3f3f3
}

    .checkout-profile img {
        position: absolute;
        top: 15px;
        left: 50%;
        width: auto !important;
        margin-left: -24px
    }

    .checkout-profile span, .checkout-profile strong {
        display: block;
        text-transform: capitalize;
        margin-bottom: 8px
    }

    .checkout-profile span, .checkout-profile strong, .checkout-profile p {
        font: 400 12px "Rubik",sans-serif
    }

    .checkout-profile span {
        color: var(--theme-colour1)
    }

    .checkout-profile strong, .checkout-profile p {
        color: var(--black)
    }

    .checkout-profile p {
        margin-bottom: 0
    }

    .checkout-profile .ticks {
        position: absolute;
        bottom: 10px;
        right: 0;
        width: 100%;
        text-align: center
    }

        .checkout-profile .ticks a {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: inline-block;
            margin-right: 15px;
            overflow: hidden;
            position: relative
        }

            .checkout-profile .ticks a:last-child {
                margin-right: 0
            }

            .checkout-profile .ticks a.yes {
                background: url(../images/yes.svg) no-repeat;
                background-size: 30px
            }

            .checkout-profile .ticks a.no {
                background: url(../images/no.svg) no-repeat;
                background-size: 30px
            }

            .checkout-profile .ticks a.active {
                background: url(../images/green-heart.svg) no-repeat;
                background-size: 30px
            }

.go-premium {
    margin-bottom: 20px;
    overflow: hidden
}

    .go-premium .go-title {
        font: 400 22px "Rubik",sans-serif;
        color: var(--theme-colour1);
        margin-bottom: 10px
    }

    .go-premium p {
        font: 400 12px "Rubik",sans-serif;
        color: var(--black);
        text-align: justify;
        line-height: 24px
    }

    .go-premium a {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font: 400 12px "Rubik",sans-serif;
        background: #e76045;
        color: var(--white);
        text-transform: uppercase;
        float: right;
        padding: 8px 20px
    }

.load-more {
    font: 400 12px "Rubik",sans-serif;
    background: transparent;
    color: var(--theme-colour1);
    text-align: center;
    display: block;
    width: 100%;
    border: none;
    padding: 10px 0 0;
    text-transform: capitalize;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 5px
}

    .load-more:hover span svg {
        transition: all .4s ease-in;
        transform: rotate(90deg)
    }

    .load-more span {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        position: relative;
        padding: 3px 15px 3px 15px;
        border: 1px solid var(--theme-colour1)
    }

        .load-more span:before {
            background: url(../images/load-more.svg) no-repeat;
            position: absolute;
            top: 5px;
            left: 15px;
            content: '';
            width: 12px;
            height: 12px;
            background-size: 12px;
            display: none
        }

        .load-more span.icn {
            display: flex;
            align-items: center;
            width: fit-content;
            gap: 5px;
            margin: auto
        }

            .load-more span.icn svg path {
                fill: var(--theme-colour1)
            }

.no-messages {
    font: 400 16px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-align: center;
    padding: 50px 0;
    text-transform: uppercase
}

.happy-help {
    position: relative;
    background: var(--theme-colour1);
    padding: 75px 15px 15px;
    margin: 20px 0
}

    .happy-help:before {
        background: url(../images/logo-black.png) no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 75px;
        background-color: #fdd606;
        background-size: 174px 50px;
        background-position: center
    }

    .happy-help .title {
        font: 400 28px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        text-align: center;
        padding: 10px 0 15px
    }

        .happy-help .title strong {
            font: 700 28px "Rubik",sans-serif
        }

    .happy-help .need-assistance {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-top: 0
    }

        .happy-help .need-assistance p {
            padding: 0;
            text-align: center !important
        }

.text-title {
    font: 400 18px "Rubik",sans-serif;
    color: var(--theme-colour1);
    margin-bottom: 15px
}

    .text-title.upper {
        text-transform: uppercase
    }

    .text-title.capital {
        text-transform: capitalize
    }

    .text-title.medium {
        font-size: 14px;
        text-transform: lowercase;
        display: block;
        margin-bottom: 10px
    }

        .text-title.medium:first-letter {
            text-transform: uppercase
        }

.deactivation {
    background: var(--theme-colour1);
    padding: 20px 20px 25px;
    margin-bottom: 10px
}

    .deactivation p {
        color: var(--white) !important
    }

.deactivate {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font: 400 16px "Rubik",sans-serif;
    background: #e76045;
    color: var(--white);
    text-transform: capitalize;
    padding: 8px 30px;
    border: 1px solid transparent;
    margin-left: 30px
}

    .deactivate.no-ml {
        margin-left: 0
    }

@media (max-width: 1199px) {
    .delete-wrapper .delete-tabs {
        padding: 0px
    }
}

.delete-wrapper .delete-tabs a {
    font: 400 14px "Rubik",sans-serif;
    color: var(--theme-colour1);
    display: block;
    margin-bottom: 5px;
    position: relative
}

@media (max-width: 991px) {
    .delete-wrapper .delete-tabs a {
        padding-left: 15px
    }
}

.delete-wrapper .delete-tabs a em {
    font-style: normal
}

.delete-wrapper .delete-tabs a:first-letter {
    text-transform: uppercase
}

.delete-wrapper .delete-tabs a.active {
    padding-left: 15px
}

    .delete-wrapper .delete-tabs a.active:after {
        position: absolute;
        top: 8px;
        left: 0;
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #292929
    }

.delete-wrapper .delete-content {
    display: none
}

    .delete-wrapper .delete-content.delete-tab1 {
        display: block
    }

.delete-desc {
    margin-top: 20px
}

.deletion1 {
    background: var(--theme-colour1);
    padding: 15px 15px 20px
}

    .deletion1 p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--white) !important;
        text-align: left;
        line-height: 24px
    }

        .deletion1 p a {
            color: #fdd606
        }

        .deletion1 p .add-yours {
            font-size: 12px;
            position: relative;
            top: auto;
            right: auto
        }

            .deletion1 p .add-yours:before {
                top: -2px
            }

.deletion2 {
    position: relative;
    overflow: hidden
}

    .deletion2 .blue-part, .deletion2 .grey-part {
        padding: 15px
    }

    .deletion2 .blue-part {
        background: var(--theme-colour1);
        padding-bottom: 35px
    }

        .deletion2 .blue-part p {
            color: var(--white) !important
        }

    .deletion2 .grey-part {
        background: #f3f3f3;
        padding-top: 35px
    }

        .deletion2 .grey-part p {
            color: var(--theme-colour1)
        }

    .deletion2 span.or {
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        font: 400 14px "Rubik",sans-serif;
        -webkit-animation: rotation 4s infinite,linear;
        -moz-animation: rotation 4s infinite,linear;
        animation: rotation 4s infinite,linear;
        background: var(--white);
        color: var(--theme-colour1);
        text-transform: uppercase;
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: -20px 0 0 -20px;
        text-align: center
    }

.delete-link {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    padding: 4px 15px;
    text-transform: capitalize;
    background: var(--white);
    color: var(--theme-colour1);
    margin-top: 5px;
    border: 1px solid transparent
}

    .delete-link.orange {
        background: #e76045;
        color: var(--white)
    }

.delete-caution {
    font: 400 14px "Rubik",sans-serif;
    display: block;
    padding-left: 25px;
    position: relative;
    color: #828282;
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 5px
}

    .delete-caution:before {
        background: url(../images/error-notification-blue.svg) no-repeat;
        position: absolute;
        top: 2px;
        left: 0;
        content: '';
        width: 15px;
        height: 15px;
        background-size: 15px;
        display: none
    }

    .delete-caution:first-letter {
        text-transform: uppercase
    }

    .delete-caution .icn {
        display: flex
    }

        .delete-caution .icn svg path {
            fill: var(--theme-colour1)
        }

.portfolio-wrapper {
    position: relative;
    overflow: hidden;
    background: #f3f3f3
}

    .portfolio-wrapper .easyzoom-flyout {
        display: none
    }

    .portfolio-wrapper .easyzoom {
        width: 100%;
        padding: 30px
    }

        .portfolio-wrapper .easyzoom a {
            display: block
        }

        .portfolio-wrapper .easyzoom img {
            margin: auto;
            max-width: 100%
        }

        .portfolio-wrapper .easyzoom .protect {
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            display: table;
            width: 100%;
            height: 100%
        }

            .portfolio-wrapper .easyzoom .protect .inner {
                display: table-cell;
                vertical-align: middle;
                padding: 0 45px
            }

            .portfolio-wrapper .easyzoom .protect p {
                font: 400 14px "Rubik",sans-serif;
                color: #2d2d2d;
                text-align: center;
                line-height: 22px
            }

            .portfolio-wrapper .easyzoom .protect a {
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
                font: 400 14px "Rubik",sans-serif;
                background: #e76045;
                color: var(--white);
                text-transform: capitalize;
                padding: 3px 15px;
                display: inline-block;
                border: 1px solid transparent
            }

                .portfolio-wrapper .easyzoom .protect a:before {
                    display: none
                }

    .portfolio-wrapper .add-pics {
        text-align: center;
        margin: 50px 0
    }

        .portfolio-wrapper .add-pics p {
            padding: 0 30px;
            text-align: center
        }

        .portfolio-wrapper .add-pics a {
            display: block
        }

            .portfolio-wrapper .add-pics a span {
                font: 400 16px "Rubik",sans-serif;
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                border-radius: 30px;
                display: inline-block;
                width: 200px;
                height: 36px;
                line-height: 34px;
                text-transform: uppercase;
                text-align: center;
                background: #e76045;
                color: var(--white);
                border: 1px solid transparent
            }

.zoom-slider {
    display: none
}

.zoom-horizontal {
    margin-bottom: 30px;
    text-align: center
}

    .zoom-horizontal.owl-carousel .owl-item img {
        width: auto;
        margin: auto
    }

    .zoom-horizontal a {
        display: inline-block;
        position: relative
    }

        .zoom-horizontal a.overlaid:before, .zoom-horizontal a.overlaid:after {
            content: ''
        }

        .zoom-horizontal a.overlaid:before {
            background: url(../images/photo-overlay.png) no-repeat;
            background-repeat: repeat
        }

        .zoom-horizontal a.overlaid:after {
            background: url(../images/locked.svg) no-repeat;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            background-size: 16px;
            margin: -8px 0 0 -8px
        }

.show-overlay a {
    position: relative
}

    .show-overlay a:before {
        background: url(../images/photo-overlay.png) no-repeat;
        background-repeat: repeat;
        content: ''
    }

.portfolio-details {
    background: var(--theme-colour1);
    padding: 30px
}

    .portfolio-details .title {
        font: 400 24px "Rubik",sans-serif;
        padding: 0 0 10px 35px;
        margin-bottom: 15px;
        position: relative;
        color: var(--white);
        text-transform: capitalize
    }

        .portfolio-details .title:before, .portfolio-details .title:after {
            position: absolute;
            content: ''
        }

        .portfolio-details .title:before {
            background: url(../images/user-white.svg) no-repeat;
            width: 20px;
            height: 20px;
            background-size: 20px;
            top: 5px;
            left: 0
        }

        .portfolio-details .title:after {
            width: 100%;
            height: 1px;
            background: var(--white);
            bottom: 0;
            left: 0
        }

    .portfolio-details span, .portfolio-details em {
        font: 400 14px "Rubik",sans-serif;
        color: var(--white);
        text-transform: capitalize;
        display: block;
        text-align: left
    }

    .portfolio-details span {
        margin-bottom: 5px
    }

    .portfolio-details em {
        font-style: normal;
        margin-bottom: 15px
    }

.double {
    margin-top: 15px
}

    .double a, .double button {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        font: 400 12px "Rubik",sans-serif;
        display: inline-block;
        padding: 5px 30px;
        border: 1px solid var(--white);
        background: transparent;
        color: var(--white);
        text-transform: capitalize;
        text-align: center;
        position: relative;
        overflow: hidden
    }

        .double a:first-child, .double button:first-child {
            margin-right: 15px;
            background: var(--white);
            color: var(--theme-colour1)
        }

            .double a:first-child em, .double button:first-child em {
                color: var(--theme-colour1)
            }

        .double a em, .double button em {
            position: relative;
            font-style: normal;
            width: auto;
            margin: 0;
            padding: 0;
            padding-left: 20px
        }

            .double a em:before, .double button em:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 12px;
                height: 12px
            }

            .double a em.hand:before, .double button em.hand:before {
                background: url(../images/hand.svg) no-repeat;
                width: 15px;
                height: 15px;
                background-size: 15px;
                left: -2px;
                top: 2px
            }

            .double a em.heart:before, .double button em.heart:before {
                background: url(../images/heart-white.svg) no-repeat;
                background-size: 12px;
                top: 3px
            }

        .double a.add-animation.active em:before, .double button.add-animation.active em:before {
            background: url(../images/heart-filled-white.svg) no-repeat;
            background-size: 12px
        }

.no-updates {
    font: 400 20px "Rubik",sans-serif;
    padding: 15px 0 30px;
    color: var(--theme-colour1);
    text-transform: uppercase;
    text-align: center
}

.complete-relative {
    position: relative;
    margin-bottom: 25px
}

    .complete-relative .field-validation-error, .complete-relative .field-validation-valid {
        position: absolute;
        bottom: -20px;
        left: 0;
        font: 400 12px "Rubik",sans-serif;
        color: #f00;
        display: block
    }

        .complete-relative .field-validation-error:first-letter, .complete-relative .field-validation-valid:first-letter {
            text-transform: uppercase
        }

.complete-dropdowns.center {
    padding: 0 15px;
    text-align: center
}

    .complete-dropdowns.center p {
        font: 400 18px "Rubik",sans-serif;
        color: #000203;
        text-align: left
    }

        .complete-dropdowns.center p strong {
            font: 700 18px "Rubik",sans-serif
        }

.complete-dropdowns .select-holders {
    position: relative
}

    .complete-dropdowns .select-holders:after {
        position: absolute;
        top: 14px;
        right: 10px;
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid var(--theme-colour1)
    }

    .complete-dropdowns .select-holders select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        width: 100%;
        height: 30px;
        border: 1px solid #e1e1e1;
        padding-left: 10px
    }

.complete-dropdowns input[type="submit"] {
    font: 400 16px "Rubik",sans-serif;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: var(--white);
    background: #e76045;
    text-transform: uppercase;
    border: none
}

.complete-dropdowns.verify .add-hobby {
    border: 1px solid transparent
}

.add-hobby {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font: 400 16px "Rubik",sans-serif;
    background: #e76045;
    color: var(--white);
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 35px;
    text-align: center;
    margin-top: 15px
}

.response {
    padding: 30px 15px;
    text-align: center
}

    .response .title {
        font: 700 18px "Rubik",sans-serif;
        color: var(--theme-colour1)
    }

        .response .title:first-letter {
            text-transform: uppercase
        }

    .response p {
        text-align: center
    }

.add-title p {
    margin: 0;
    position: relative
}

    .add-title p:after {
        position: absolute;
        bottom: -6px;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: var(--theme-colour1)
    }

.add-title a {
    font: 400 14px "Rubik",sans-serif;
    display: inline-block;
    margin: 15px 0 0;
    background: #fdd606;
    color: var(--theme-colour1);
    text-transform: capitalize;
    padding: 5px 30px
}

.add-title span {
    font: 400 16px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: var(--white);
    text-transform: capitalize;
    padding: 8px 30px
}

.add-title em {
    font: 400 12px "Rubik",sans-serif;
    color: #7c7d7f;
    font-style: normal;
    display: block;
    margin: 15px 0;
    position: relative;
    padding-left: 25px
}

    .add-title em:before {
        background: url(../images/portfolio.svg) no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        background-size: 14px;
        width: 14px;
        height: 14px
    }

    .add-title em:first-of-type:before {
        background: url(../images/upload-blue.svg) no-repeat;
        background-size: 14px
    }

.avoid {
    border-top: 4px solid #95b5d3;
    background: var(--white);
    overflow: hidden;
    margin-top: 20px;
    padding: 30px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .avoid .avoid-flex {
        margin-bottom: 20px;
        text-align: center
    }

        .avoid .avoid-flex.info .title {
            font: 400 24px "Rubik",sans-serif;
            color: var(--theme-colour1);
            margin-bottom: 15px
        }

            .avoid .avoid-flex.info .title em {
                font-style: normal;
                position: relative;
                padding-left: 35px
            }

                .avoid .avoid-flex.info .title em:before {
                    background: url(../images/caution2.svg) no-repeat;
                    position: absolute;
                    top: 4px;
                    left: 0;
                    content: '';
                    width: 25px;
                    height: 25px;
                    background-size: 25px
                }

        .avoid .avoid-flex.info p {
            font: 400 14px "Rubik",sans-serif;
            text-align: center;
            color: #7c7d7f;
            line-height: 22px
        }

        .avoid .avoid-flex img {
            margin: 0 auto 10px
        }

        .avoid .avoid-flex span {
            font: 400 14px "Rubik",sans-serif;
            color: #858789;
            text-transform: capitalize;
            position: relative;
            padding-left: 20px
        }

            .avoid .avoid-flex span:before {
                background: url(../images/close-blue.svg) no-repeat;
                position: absolute;
                top: 3px;
                left: 0;
                content: '';
                width: 12px;
                height: 12px;
                background-size: 12px
            }

.flex-wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 10px;
    overflow: hidden
}

    .flex-wrapper .children {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        overflow: hidden;
        width: 166px;
        height: 164px;
        position: relative;
        margin: 0 auto 30px
    }

        .flex-wrapper .children.file {
            border: 1px dashed #b6cfe6;
            width: 166px
        }

            .flex-wrapper .children.file input[type="file"] {
                opacity: 0;
                cursor: pointer;
                z-index: 10
            }

            .flex-wrapper .children.file:before {
                background: url(../images/add-camera.svg) no-repeat;
                position: absolute;
                top: 40px;
                left: 50%;
                content: '';
                width: 40px;
                height: 40px;
                background-size: 40px;
                margin-left: -20px
            }

            .flex-wrapper .children.file:after {
                position: absolute;
                bottom: 40px;
                left: 0;
                font: 400 14px "Rubik",sans-serif;
                color: var(--theme-colour1);
                width: 100%;
                text-align: center;
                content: 'add photo';
                text-transform: uppercase
            }

        .flex-wrapper .children .gear-icon, .flex-wrapper .children.locked i, .flex-wrapper .children.profile-pic:after {
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            border: 1px solid var(--white)
        }

        .flex-wrapper .children.locked i {
            background: url(../images/lock-white.svg) no-repeat;
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-size: 11px;
            background-position: center;
            background-color: var(--theme-colour1);
            display: inline-block;
            z-index: 1
        }

        .flex-wrapper .children .gear-icon {
            background: url(../images/gear.svg) no-repeat;
            position: absolute;
            top: 10px;
            right: 10px;
            background-size: 25px;
            background-position: center;
            background-color: var(--white);
            cursor: pointer;
            z-index: 100
        }

        .flex-wrapper .children .photo-settings {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            position: absolute;
            top: 25px;
            left: 50%;
            width: 146px;
            margin: 0 0 0 -73px;
            border: 1px solid var(--white);
            overflow: hidden;
            display: none;
            z-index: 50
        }

            .flex-wrapper .children .photo-settings a {
                font: 400 11px "Rubik",sans-serif;
                background-color: var(--theme-colour1);
                color: var(--white);
                display: block;
                padding: 8px 0 8px 30px;
                position: relative;
                overflow: hidden;
                border-bottom: 1px solid rgba(255,255,255,0.25)
            }

                .flex-wrapper .children .photo-settings a:before {
                    position: absolute;
                    top: 2px;
                    left: 2px;
                    content: '';
                    width: 25px;
                    height: 25px;
                    background: var(--white)
                }

                .flex-wrapper .children .photo-settings a:nth-child(1):before {
                    background: url(../images/settings1.svg) no-repeat;
                    background-size: 15px;
                    background-position: center
                }

                .flex-wrapper .children .photo-settings a:nth-child(2):before {
                    background: url(../images/settings2.svg) no-repeat;
                    background-size: 15px;
                    background-position: center
                }

                .flex-wrapper .children .photo-settings a:nth-child(3):before {
                    background: url(../images/settings3.svg) no-repeat;
                    background-size: 15px;
                    background-position: center
                }

                .flex-wrapper .children .photo-settings a:nth-child(4):before {
                    background: url(../images/settings4.svg) no-repeat;
                    background-size: 15px;
                    background-position: center
                }

                .flex-wrapper .children .photo-settings a:last-child {
                    border-bottom: none
                }

        .flex-wrapper .children img {
            width: auto;
            height: 100%
        }

        .flex-wrapper .children.profile-pic:after {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            position: absolute;
            top: 10px;
            left: -1px;
            background: url(../images/profile-ribbon.png) no-repeat;
            background-color: none;
            box-shadow: none;
            content: '';
            background-size: 106px 19px;
            width: 106px;
            height: 19px;
            border: none
        }

        .flex-wrapper .children.approved em, .flex-wrapper .children.rejected em, .flex-wrapper .children.pending em {
            position: absolute;
            bottom: 10px;
            right: 10px;
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            border: 1px solid var(--white)
        }

            .flex-wrapper .children.approved em.approved {
                background: url(../images/approved.svg) no-repeat;
                background-size: 13px;
                background-color: var(--white);
                background-position: center
            }

            .flex-wrapper .children.approved em.rejected, .flex-wrapper .children.approved em.pending {
                display: none
            }

            .flex-wrapper .children.rejected em.rejected {
                background: url(../images/rejected.svg) no-repeat;
                background-size: 11px;
                background-color: var(--white);
                background-position: center
            }

            .flex-wrapper .children.rejected em.approved, .flex-wrapper .children.rejected em.pending {
                display: none
            }

            .flex-wrapper .children.pending em.pending {
                background: url(../images/pending.svg) no-repeat;
                background-size: 13px;
                background-color: var(--white);
                background-position: center
            }

            .flex-wrapper .children.pending em.rejected, .flex-wrapper .children.pending em.approved {
                display: none
            }

#upload-error {
    font: 400 14px "Rubik",sans-serif;
    color: #e76045;
    position: relative;
    padding-left: 20px;
    margin-bottom: 30px;
    display: none
}

    #upload-error:before {
        background: url(../images/caution.svg) no-repeat;
        position: absolute;
        top: 2px;
        left: 0;
        content: '';
        width: 15px;
        height: 15px;
        background-size: 15px
    }

#alert-desc {
    font: 400 15px "Rubik",sans-serif;
    text-align: justify;
    line-height: 22px;
    color: #727679;
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 15px;
    margin-bottom: 25px
}

.select-alerts a {
    position: relative;
    background: var(--white);
    display: block;
    width: calc(100% - 15px);
    padding-left: 75px;
    border: 1px solid var(--theme-colour1);
    margin-bottom: 10px
}

    .select-alerts a:last-child {
        margin-bottom: 0
    }

    .select-alerts a span {
        background: url(../images/alert0.svg) no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background-size: 28px;
        background-position: center;
        background-color: var(--white);
        width: 60px;
        height: 100%;
        border-right: 1px solid var(--theme-colour1)
    }

    .select-alerts a p {
        font: 400 13px "Rubik",sans-serif;
        text-align: left;
        line-height: 20px;
        margin-bottom: 0;
        padding: 20px 0;
        color: #727679
    }

    .select-alerts a.active {
        background: var(--theme-colour1);
        color: var(--white)
    }

        .select-alerts a.active span {
            background: url(../images/alert1.svg) no-repeat;
            background-size: 28px;
            background-position: center;
            background-color: #fdd606
        }

        .select-alerts a.active p {
            color: var(--white)
        }

.select-alerts.mail-alerts a p {
    padding-top: 0
}

.select-alerts.mail-alerts a em {
    font: 700 14px "Rubik",sans-serif;
    padding-top: 20px;
    display: block;
    font-style: normal
}

.select-alerts.mail-alerts a.active em {
    color: var(--white)
}

.alert-submit {
    font: 400 14px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: var(--theme-colour1);
    color: var(--white);
    padding: 5px 40px;
    text-transform: capitalize;
    border: 1px solid transparent;
    margin-top: 30px
}

.p-pad {
    padding: 0px 50px
}

.p-profile-wrap {
    padding: 50px 0px 0px 0px;
    background-color: white
}

    .p-profile-wrap .p-separator {
        height: 5px;
        background-color: #ddd;
        display: block;
        margin: 12px 0px
    }

    .p-profile-wrap .p-details-wrap {
        display: block;
        margin-bottom: 20px
    }

        .p-profile-wrap .p-details-wrap .p-itm {
            display: inline-block;
            color: #4f4f4f;
            padding-right: 10px;
            margin-right: 10px;
            position: relative
        }

            .p-profile-wrap .p-details-wrap .p-itm:after {
                position: absolute;
                content: '';
                width: 1px;
                height: calc(100% - 8px);
                top: 4px;
                right: 0px;
                background-color: #4f4f4f
            }

            .p-profile-wrap .p-details-wrap .p-itm:last-child:after {
                display: none
            }

            .p-profile-wrap .p-details-wrap .p-itm .offline {
                color: red;
                font-weight: 700
            }

            .p-profile-wrap .p-details-wrap .p-itm .online, .p-profile-wrap .p-details-wrap .p-itm .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .offline, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .p-profile-wrap .p-details-wrap .p-itm .offline, .p-profile-wrap .p-details-wrap .p-itm .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .horoscope, .profileDetails .profileDetailSection .profileDetailArea .profileHead .profileDtl .profileCreated ul li .p-profile-wrap .p-details-wrap .p-itm .horoscope {
                color: green;
                font-weight: 700
            }

            .p-profile-wrap .p-details-wrap .p-itm .blue {
                color: var(--theme-colour2);
                font-weight: 700
            }

            .p-profile-wrap .p-details-wrap .p-itm.chat-link a {
                font: 400 14px "Rubik",sans-serif;
                text-transform: capitalize;
                color: #369623
            }

                .p-profile-wrap .p-details-wrap .p-itm.chat-link a i {
                    position: relative;
                    padding-left: 20px;
                    margin-left: 5px;
                    color: var(--theme-colour1);
                    font-style: normal;
                    text-transform: capitalize
                }

                    .p-profile-wrap .p-details-wrap .p-itm.chat-link a i:after {
                        background: url(../images/chat-icon-green.svg) no-repeat;
                        position: absolute;
                        top: 2px;
                        left: 0;
                        content: '';
                        width: 15px;
                        height: 15px;
                        background-size: 15px
                    }

    .p-profile-wrap .p-details-sec {
        padding-bottom: 20px
    }

        .p-profile-wrap .p-details-sec .p-img-sec {
            float: left;
            display: inline-block;
            width: 100%;
            max-width: 276px;
            text-align: center;
            margin-right: 5px
        }

            .p-profile-wrap .p-details-sec .p-img-sec .p-img-wrap {
                overflow: hidden;
                height: 270px
            }

                .p-profile-wrap .p-details-sec .p-img-sec .p-img-wrap img {
                    height: 100%;
                    margin: auto
                }

            .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap {
                background-color: #f3f3f3;
                padding: 7px 0px;
                position: relative
            }

                .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap #details-img-thumb {
                    margin: auto;
                    max-width: 160px
                }

                    .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap #details-img-thumb img {
                        cursor: pointer
                    }

                .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap .p-nav {
                    position: absolute;
                    width: 35px;
                    height: 100%;
                    top: 0px;
                    background-repeat: no-repeat;
                    background-position: center !important;
                    background-size: 28px !important;
                    cursor: pointer;
                    transition: all 0.4s;
                    -webkit-transition: all 0.4s;
                    -moz-transition: all 0.4s
                }

                    .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap .p-nav:hover.left {
                        left: 5px
                    }

                    .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap .p-nav:hover.right {
                        right: 5px
                    }

                    .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap .p-nav.left {
                        left: 10px;
                        background: url(../images/nav-left-arrow.svg) no-repeat
                    }

                    .p-profile-wrap .p-details-sec .p-img-sec .p-thumb-wrap .p-nav.right {
                        right: 10px;
                        background: url(../images/nav-right-arrow.svg) no-repeat
                    }

        .p-profile-wrap .p-details-sec .p-dtls-wrap {
            display: inline-block;
            width: 100%;
            max-width: calc(100% - 285px);
            float: left;
            padding: 30px 25px;
            border: 1px solid var(--theme-colour2);
            position: relative
        }

            .p-profile-wrap .p-details-sec .p-dtls-wrap.recent {
                background-position: 0px 0px;
                background: url(../images/recently-added.jpg) no-repeat
            }

            .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap {
                position: absolute;
                right: 20px;
                top: 15px;
                z-index: 9
            }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap .contact, .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap .horoscope {
                    display: inline-block;
                    margin-left: 10px;
                    width: 33px;
                    height: 33px;
                    border: 1px solid #e76045;
                    border-radius: 50%;
                    transition: all 0.4s;
                    -webkit-transition: all 0.4s;
                    -moz-transition: all 0.4s;
                    cursor: pointer
                }

                    .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap .contact:hover, .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap .horoscope:hover {
                        background-size: 13px !important
                    }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap .contact {
                    background: url(../images/mobile-click.svg) no-repeat;
                    background-position: center;
                    background-size: 17px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap .horoscope {
                    background: url(../images/horo-click.svg) no-repeat;
                    background-position: center;
                    background-size: 17px;
                    border-color: #828282
                }

            .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm {
                font: 400 16px "Rubik",sans-serif;
                color: #747373;
                position: relative;
                padding-left: 30px;
                display: block;
                margin-bottom: 14px
            }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm:before {
                    position: absolute;
                    top: 3px;
                    left: 0;
                    content: '';
                    width: 18px;
                    height: 18px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm.physique:before {
                    background: url(../images/user-blue.svg) no-repeat;
                    background-size: 18px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm.caste:before {
                    background: url(../images/book.svg) no-repeat;
                    background-size: 18px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm.caste1:before {
                    background: url(../images/lotus.svg) no-repeat;
                    background-size: 18px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm.loc:before {
                    background: url(../images/marker-blue.svg) no-repeat;
                    background-size: 18px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm.edu:before {
                    background: url(../images/graduate.svg) no-repeat;
                    background-size: 18px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm.job:before {
                    background: url(../images/briefcase.svg) no-repeat;
                    background-size: 18px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-dtls-itm.sal:before {
                    background: url(../images/wallet.svg) no-repeat;
                    background-size: 18px
                }

            .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap {
                padding: 6px 0px 6px 105px;
                position: relative;
                color: var(--theme-colour2);
                font-weight: 700;
                margin-top: 26px
            }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap:after {
                    position: absolute;
                    content: 'MATCH SCORE';
                    left: 0px;
                    top: 0px
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap .p-progressln {
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 8px;
                    background-color: #ddd;
                    border: 2px solid #ddd
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap span {
                    z-index: 2;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    height: 4px;
                    background-color: var(--theme-colour2);
                    width: 0px;
                    transition: all 0.9s;
                    -webkit-transition: all 0.9s;
                    -moz-transition: all 0.9s
                }

                .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap em {
                    z-index: 1;
                    position: absolute;
                    width: 42px;
                    height: 42px;
                    border: 1px solid #ddd;
                    border-radius: 50%;
                    top: 50%;
                    margin-top: -21px;
                    left: 0px;
                    padding: 7px 0px;
                    text-align: center;
                    color: white;
                    font-style: normal;
                    font-size: 18px;
                    font-weight: 400;
                    transition: all 0.9s;
                    -webkit-transition: all 0.9s;
                    -moz-transition: all 0.9s
                }

                    .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap em:after {
                        z-index: -1;
                        position: absolute;
                        content: '';
                        left: 2px;
                        top: 2px;
                        border-radius: 50%;
                        width: calc(100% - 4px);
                        height: calc(100% - 4px);
                        background-color: var(--theme-colour2)
                    }

    .p-profile-wrap .p-head-wrap {
        padding-right: 60px;
        position: relative
    }

        .p-profile-wrap .p-head-wrap .p-arrow-wrap {
            position: absolute;
            right: 0px;
            top: 5px
        }

            .p-profile-wrap .p-head-wrap .p-arrow-wrap .p-arrow {
                display: inline-block;
                width: 27px;
                height: 27px;
                margin-right: 2px;
                background-position: center !important;
                background-size: 27px !important;
                transition: all 0.4s;
                -webkit-transition: all 0.4s;
                -moz-transition: all 0.4s
            }

                .p-profile-wrap .p-head-wrap .p-arrow-wrap .p-arrow:hover {
                    background-size: 21px !important
                }

                .p-profile-wrap .p-head-wrap .p-arrow-wrap .p-arrow.p-left {
                    background: url(../images/left-arrow-blue.svg) no-repeat
                }

                .p-profile-wrap .p-head-wrap .p-arrow-wrap .p-arrow.p-right {
                    background: url(../images/right-arrow-blue.svg) no-repeat
                }

        .p-profile-wrap .p-head-wrap .p-hd {
            display: inline-block;
            font: 400 24px "Rubik",sans-serif;
            padding-left: 34px;
            padding-right: 15px;
            margin-right: 15px;
            color: var(--theme-colour2);
            position: relative;
            background: url(../images/user-blue.svg) no-repeat;
            background-position: 0px center;
            background-size: 24px
        }

            .p-profile-wrap .p-head-wrap .p-hd:after {
                position: absolute;
                content: '';
                width: 1px;
                height: calc(100% - 8px);
                top: 4px;
                right: 0px;
                background-color: #4f4f4f
            }

        .p-profile-wrap .p-head-wrap .p-id {
            font: 400 18px "Rubik",sans-serif;
            color: #4f4f4f;
            display: inline-block;
            text-transform: uppercase;
            margin-right: 5px
        }

        .p-profile-wrap .p-head-wrap .p-verified {
            display: inline-block;
            background: url(../images/success.svg) no-repeat;
            background-position: center;
            width: 20px;
            height: 17px;
            background-size: contain;
            margin-bottom: -3px
        }

.p-no-pad {
    padding: 0px
}

.p-round-btn {
    min-width: 122px;
    background-color: #fdd606;
    border: 1px solid #fdd606;
    padding: 3px 15px;
    font-size: 14px;
    color: var(--theme-colour2);
    border-radius: 50px;
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    position: relative;
    overflow: hidden
}

    .p-round-btn span {
        position: relative;
        padding-left: 20px
    }

        .p-round-btn span:before {
            position: absolute;
            top: 3px;
            left: 0;
            content: '';
            width: 12px;
            height: 12px
        }

    .p-round-btn.int span:before {
        background: url(../images/heart-blue.svg) no-repeat;
        background-size: 12px
    }

    .p-round-btn.short span:before {
        background: url(../images/tick-white.svg) no-repeat;
        background-size: 12px
    }

    .p-round-btn.active span:before {
        background: url(../images/shortlisted-white.svg) no-repeat;
        background-size: 12px
    }

    .p-round-btn.int.active span:before {
        background: url(../images/shortlisted-blue.svg) no-repeat;
        background-size: 12px
    }

    .p-round-btn:hover {
        background-color: transparent;
        color: #fdd606
    }

    .p-round-btn.lined {
        border-color: white;
        background-color: transparent;
        color: white
    }

        .p-round-btn.lined:hover {
            background-color: white;
            color: var(--theme-colour2)
        }

.p-blue-wrap {
    padding: 25px 0;
    background-color: var(--theme-colour2)
}

.p-locator {
    display: inline-block;
    width: 23px;
    height: 23px;
    background-size: 16px !important;
    background-position: center !important;
    border: 1px solid transparent;
    background: url(../images/p-locator.svg) no-repeat;
    border-radius: 50%;
    position: relative;
    bottom: -5px;
    cursor: pointer
}

    .p-locator:hover {
        border-color: #ddd
    }

.p-interest-shortlist-wrap p {
    font-size: 16px;
    font-weight: 300;
    color: white;
    margin: 0;
    margin-right: 15px
}

    .p-interest-shortlist-wrap p strong {
        font-weight: 400
    }

.p-upgrade-wrap {
    text-align: center;
    background-image: url(../images/p-upgrade-wrap.jpg);
    background-size: cover;
    background-position: 100% center;
    margin-bottom: 30px
}

    .p-upgrade-wrap p {
        text-align: center;
        font-size: 18px;
        font-weight: 300;
        color: white
    }

    .p-upgrade-wrap .p-round-btn {
        min-width: 200px;
        margin-top: 15px;
        font-size: 16px;
        padding: 5px 30px;
        background-color: #e76045;
        border-color: #e76045;
        color: white
    }

        .p-upgrade-wrap .p-round-btn:hover {
            background-color: transparent
        }

.p-horo-request-wrap {
    padding: 0px 0px 20px 0px
}

    .p-horo-request-wrap p {
        padding-top: 10px;
        font-size: 20px;
        font-weight: 300;
        margin-bottom: 0px;
        margin-right: 15px !important
    }

    .p-horo-request-wrap .p-round-btn {
        min-width: 200px;
        margin-top: 5px;
        font-size: 16px;
        padding: 5px 30px;
        background-color: #e76045;
        border-color: #e76045;
        color: white
    }

        .p-horo-request-wrap .p-round-btn:hover {
            background-color: transparent;
            color: #e76045
        }

.p-partner-comparison-wrap {
    margin-bottom: 30px
}

    .p-partner-comparison-wrap .p-compare-wrap {
        position: relative;
        min-height: 115px;
        z-index: 1px
    }

        .p-partner-comparison-wrap .p-compare-wrap:after {
            z-index: 1;
            position: absolute;
            content: '';
            width: 100%;
            height: 1px;
            background-color: white;
            left: 0px;
            top: 46px
        }

        .p-partner-comparison-wrap .p-compare-wrap .p-you, .p-partner-comparison-wrap .p-compare-wrap .p-other {
            text-align: center;
            z-index: 2;
            position: absolute;
            top: 20px
        }

            .p-partner-comparison-wrap .p-compare-wrap .p-you .p-pic, .p-partner-comparison-wrap .p-compare-wrap .p-other .p-pic {
                border-radius: 49px;
                border: 1px solid white
            }

            .p-partner-comparison-wrap .p-compare-wrap .p-you em, .p-partner-comparison-wrap .p-compare-wrap .p-other em {
                display: block;
                color: white;
                font-style: normal;
                font-size: 16px;
                font-weight: 300;
                margin-top: 5px
            }

        .p-partner-comparison-wrap .p-compare-wrap .p-you {
            left: 0px
        }

        .p-partner-comparison-wrap .p-compare-wrap .p-other {
            right: 0px
        }

        .p-partner-comparison-wrap .p-compare-wrap .p-rate {
            z-index: 2;
            position: absolute;
            top: 0px;
            left: 50%;
            margin-left: -47.5px;
            width: 85px;
            height: 85px;
            border: 1px solid white;
            border-radius: 50%;
            background-color: var(--theme-colour2)
        }

            .p-partner-comparison-wrap .p-compare-wrap .p-rate em {
                backface-visibility: hidden;
                transform: translateZ(0);
                -webkit-font-smoothing: subpixel-antialiased;
                position: absolute;
                width: 75px;
                height: 75px;
                left: 4px;
                top: 4px;
                background-color: #fdd606;
                border: 1px solid white;
                border-radius: 50%;
                font-size: 23px;
                font-style: normal;
                text-align: center;
                padding: 20px 0px;
                color: var(--theme-colour2);
                font-weight: 300;
                -webkit-animation: leaves 1s infinite;
                animation: leaves 1s infinite
            }

        .p-partner-comparison-wrap .p-compare-wrap .p-txt {
            position: absolute;
            width: 100%;
            text-align: center;
            margin: 0px;
            bottom: 0px;
            left: 0px;
            font-size: 16px;
            font-weight: 300;
            color: white
        }

.p-pnsl-info-wrap {
    padding: 35px 0px 0px 0px;
    background-color: white;
    margin-top: 15px
}

    .p-pnsl-info-wrap.p-partner {
        padding-top: 15px
    }

    .p-pnsl-info-wrap .p-sec {
        margin-bottom: 35px
    }

    .p-pnsl-info-wrap .p-hd {
        display: block;
        padding-bottom: 15px;
        border-bottom: 1px solid #ddd;
        font-size: 28px;
        color: var(--theme-colour2);
        margin-bottom: 20px;
        text-transform: capitalize
    }

        .p-pnsl-info-wrap .p-hd.lite {
            font-size: 24px;
            font-weight: 300;
            padding: 0px;
            border: 0px
        }

        .p-pnsl-info-wrap .p-hd.small {
            margin-bottom: 10px;
            border: none;
            padding: 0;
            font-size: 20px
        }

    .p-pnsl-info-wrap .p-small-hd {
        display: block;
        font-size: 20px;
        color: var(--theme-colour2);
        padding-left: 35px;
        background-repeat: no-repeat;
        background-position: 0px center;
        background-size: 24px !important;
        margin-bottom: 15px
    }

        .p-pnsl-info-wrap .p-small-hd.no-icn {
            padding-left: 0px
        }

        .p-pnsl-info-wrap .p-small-hd.p-about-hd {
            background: url(../images/edit.svg) no-repeat
        }

        .p-pnsl-info-wrap .p-small-hd.p-basic-hd {
            background: url(../images/text-document.svg) no-repeat
        }

        .p-pnsl-info-wrap .p-small-hd.p-religion-hd {
            background: url(../images/book.svg) no-repeat
        }

        .p-pnsl-info-wrap .p-small-hd.p-location-hd {
            background: url(../images/marker-blue.svg) no-repeat
        }

        .p-pnsl-info-wrap .p-small-hd.p-professional-hd {
            background: url(../images/briefcase.svg) no-repeat
        }

        .p-pnsl-info-wrap .p-small-hd.p-family-hd {
            background: url(../images/family.svg) no-repeat
        }

        .p-pnsl-info-wrap .p-small-hd.p-horo-hd {
            background: url(../images/saturn.svg) no-repeat
        }

    .p-pnsl-info-wrap p {
        margin: 0px
    }

    .p-pnsl-info-wrap .p-table {
        width: 100%
    }

        .p-pnsl-info-wrap .p-table.p-comp tr td {
            min-width: 395px
        }

            .p-pnsl-info-wrap .p-table.p-comp tr td.p-sep {
                min-width: 85px
            }

            .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp {
                min-width: 100px;
                position: relative
            }

                .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-checked, .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-not-checked {
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    height: 100%;
                    width: 100%
                }

                    .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-checked em, .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-not-checked em {
                        z-index: 2;
                        position: absolute;
                        width: 30px;
                        height: 100%;
                        right: 0px;
                        top: 0px;
                        background-position: center !important;
                        background-size: 15px !important;
                        background-color: white;
                        background-repeat: no-repeat
                    }

                    .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-checked:after, .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-not-checked:after {
                        position: absolute;
                        content: '';
                        width: 100%;
                        height: 1px;
                        top: 50%;
                        background-color: #ddd
                    }

                    .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-checked em {
                        background-image: url(../images/tick-orange.svg)
                    }

                    .p-pnsl-info-wrap .p-table.p-comp tr td.p-cmp .p-not-checked em {
                        background-image: url(../images/tick-gray.svg)
                    }

        .p-pnsl-info-wrap .p-table tr th {
            font-size: 14px;
            font-weight: 300;
            color: #4f4f4f;
            width: 185px;
            padding-bottom: 10px;
            text-transform: capitalize
        }

        .p-pnsl-info-wrap .p-table tr td {
            font-size: 14px;
            font-weight: 300;
            color: #7a7a7a;
            padding-bottom: 10px;
            word-break: break-all;
            text-transform: capitalize
        }

            .p-pnsl-info-wrap .p-table tr td.p-sep {
                width: 30px
            }

.pad30 {
    padding: 20px 0 35px
}

    .pad30 .p-sec {
        margin: 0
    }

.p-horo-grahanila-wrap .p-horo-itm {
    margin-right: 20px;
    display: inline-block;
    width: 370px;
    margin-bottom: 20px
}

    .p-horo-grahanila-wrap .p-horo-itm .p-horo-table {
        width: 100%;
        background: var(--white)
    }

        .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs {
            backface-visibility: hidden;
            display: block;
            display: none;
            min-height: 20px;
            background-position: center !important;
            background-repeat: no-repeat;
            margin-bottom: 2px
        }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-bu {
                background-image: url(../images/horo/horo-bu.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-cha {
                background-image: url(../images/horo/horo-cha.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-gu {
                background-image: url(../images/horo/horo-gu.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ku {
                background-image: url(../images/horo/horo-ku.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-la {
                background-image: url(../images/horo/horo-la.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ma {
                background-image: url(../images/horo/horo-ma.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-maa {
                background-image: url(../images/horo/horo-maa.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-ra {
                background-image: url(../images/horo/horo-ra.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-sa {
                background-image: url(../images/horo/horo-sa.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-shi {
                background-image: url(../images/horo/horo-shi.jpg)
            }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table .p-ltrs.horo-shu {
                background-image: url(../images/horo/horo-shu.jpg)
            }

        .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr {
            border: 1px solid #ddd
        }

            .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td {
                position: relative;
                min-width: 40px;
                height: 70px;
                border: 1px solid #ddd
            }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.p-horo-title {
                    position: relative
                }

                    .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.p-horo-title .p-tle {
                        display: block;
                        text-align: center;
                        font-size: 20px
                    }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-bu .p-ltrs.horo-bu {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-cha .p-ltrs.horo-cha {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-gu .p-ltrs.horo-gu {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ku .p-ltrs.horo-ku {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-la .p-ltrs.horo-la {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ma .p-ltrs.horo-ma {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ma .p-ltrs.horo-ma {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-maa .p-ltrs.horo-maa {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-ra .p-ltrs.horo-ra {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-sa .p-ltrs.horo-sa {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-shi .p-ltrs.horo-shi {
                    display: block
                }

                .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr td.ltr-shu .p-ltrs.horo-shu {
                    display: block
                }

.p-table-wrap {
    overflow: auto
}

@keyframes leaves {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    100% {
        transform: scale(1)
    }
}

.edit-head {
    text-align: center
}

    .edit-head .add-edit {
        width: 166px;
        height: 200px;
        position: relative;
        display: inline-block;
        margin-bottom: 20px
    }

        .edit-head .add-edit a {
            font: 400 14px "Rubik",sans-serif;
            position: absolute;
            bottom: 0;
            left: 0;
            background: var(--theme-colour1);
            color: var(--white);
            text-transform: capitalize;
            display: block;
            width: 100%;
            height: 36px;
            line-height: 36px;
            border: 1px solid transparent;
            border-top: none;
            text-align: center
        }

    .edit-head .personal {
        border: 1px solid var(--theme-colour1);
        padding: 15px
    }

        .edit-head .personal span {
            font: 400 14px "Rubik",sans-serif;
            color: #4f4f4f;
            text-transform: capitalize;
            margin-bottom: 5px;
            display: block
        }

            .edit-head .personal span:last-child {
                margin-bottom: 0
            }

            .edit-head .personal span strong {
                font-size: 12px;
                color: var(--theme-colour1);
                cursor: pointer
            }

            .edit-head .personal span em {
                font-style: normal
            }

                .edit-head .personal span em.lower {
                    text-transform: lowercase
                }

            .edit-head .personal span.verified-yes strong {
                display: none
            }

            .edit-head .personal span.verified-yes em {
                position: relative;
                padding-right: 20px
            }

                .edit-head .personal span.verified-yes em:after {
                    background: url(../images/verified.svg) no-repeat;
                    position: absolute;
                    top: 3px;
                    right: 0;
                    content: '';
                    width: 12px;
                    height: 12px;
                    background-size: 12px
                }

    .edit-head .completeness {
        background: url(../images/completeness-bg.png) no-repeat;
        background-position: bottom right;
        background-size: 180px 121px;
        position: relative;
        height: 200px;
        border: 1px solid var(--theme-colour1);
        margin: 20px 0
    }

        .edit-head .completeness .title1 {
            font: 400 14px "Rubik",sans-serif;
            background: var(--theme-colour1);
            color: var(--white);
            text-transform: capitalize;
            height: 36px;
            line-height: 36px;
            margin-bottom: 10px
        }

        .edit-head .completeness .c100 {
            margin-bottom: 0
        }

.how-profile {
    padding: 0 15px
}

    .how-profile p, .how-profile a {
        display: inline-block;
        vertical-align: middle
    }

    .how-profile p {
        font: 400 19px "Rubik",sans-serif;
        margin: 0 0 20px 0;
        text-align: left
    }

    .how-profile a {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        border: 1px solid var(--white);
        padding: 3px 35px
    }

.describe {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 15px
}

    .describe span {
        font: 400 18px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--theme-colour1);
        display: inline-block;
        vertical-align: middle
    }

        .describe span i {
            font: 400 12px "Rubik",sans-serif;
            font-style: normal;
            text-transform: capitalize;
            display: inline-block;
            cursor: pointer
        }

            .describe span i.pending {
                color: #e76045
            }

                .describe span i.pending:before {
                    content: '(pending)'
                }

            .describe span i.approved {
                color: #369623
            }

                .describe span i.approved:before {
                    content: '(approved)'
                }

            .describe span i.rejected {
                color: #f00
            }

                .describe span i.rejected:before {
                    content: '(rejected)'
                }

.ed-container {
    padding: 15px 0;
    background: var(--white);
    margin: 15px 0
}

    .ed-container [class^='col-'], .ed-container .edit-section.edit-textarea {
        position: relative;
        padding-bottom: 15px
    }

        .ed-container [class^='col-'].no-pb, .ed-container .edit-section.edit-textarea.no-pb {
            padding-bottom: 0
        }

        .ed-container [class^='col-'] .field-validation-error, .ed-container [class^='col-'] .field-validation-valid, .ed-container .edit-section.edit-textarea .field-validation-error, .ed-container .edit-section.edit-textarea .field-validation-valid {
            font: 400 12px "Rubik",sans-serif;
            position: absolute;
            bottom: -2px;
            left: 15px;
            color: #f00;
            display: block
        }

            .ed-container [class^='col-'] .field-validation-error:first-letter, .ed-container [class^='col-'] .field-validation-valid:first-letter, .ed-container .edit-section.edit-textarea .field-validation-error:first-letter, .ed-container .edit-section.edit-textarea .field-validation-valid:first-letter {
                text-transform: uppercase
            }

        .ed-container .edit-section.edit-textarea .field-validation-error, .ed-container .edit-section.edit-textarea .field-validation-valid {
            left: 0
        }

a.edit-button {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    text-transform: capitalize;
    width: 70px;
    height: 22px;
    line-height: 20px;
    background: var(--theme-colour1);
    color: var(--white);
    text-align: center;
    display: inline-block;
    vertical-align: middle
}

    a.edit-button i {
        position: relative;
        padding-left: 15px;
        font-style: normal
    }

        a.edit-button i:before {
            position: absolute;
            top: 4px;
            left: 0;
            background: url(../images/edit-button.svg) no-repeat;
            content: '';
            width: 10px;
            height: 10px;
            background-size: 10px
        }

.edit-save {
    margin: 10px 0 0 0;
    text-align: right
}

    .edit-save a, .edit-save button {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 14px "Rubik",sans-serif;
        display: inline-block;
        padding: 2px 20px;
        text-transform: capitalize;
        border: 1px solid transparent
    }

        .edit-save a:first-child, .edit-save button:first-child {
            background: var(--theme-colour1);
            color: var(--white);
            margin-right: 10px
        }

        .edit-save a:last-child, .edit-save button:last-child {
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

.edit-section {
    display: none
}

    .edit-section .row {
        margin-bottom: 8px
    }

    .edit-section i.head-name {
        font: 400 14px "Rubik",sans-serif;
        margin-bottom: 5px;
        display: block;
        color: #4f4f4f;
        text-transform: capitalize
    }

        .edit-section i.head-name:after {
            content: attr(data-after);
            color: #f00
        }

        .edit-section i.head-name.bold {
            font: 700 14px "Rubik",sans-serif
        }

        .edit-section i.head-name #permanent {
            display: inline-block;
            vertical-align: middle;
            margin: 0 5px;
            padding: 0
        }

    .edit-section .upload-horo {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 14px "Rubik",sans-serif;
        background: var(--lightBg);
        color: var(--theme-colour1);
        position: relative;
        display: inline-block;
        width: 100px;
        text-align: center;
        padding: 4px 30px;
        text-transform: capitalize
    }

        .edit-section .upload-horo input[type="file"] {
            opacity: 0;
            cursor: pointer
        }

#uploaded-filename {
    font: 400 14px "Rubik",sans-serif;
    color: #4f4f4f;
    padding-left: 10px;
    display: inline-block
}

.edit-textarea textarea {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    width: 100%;
    height: 80px;
    padding: 10px 0 0 10px;
    border: 1px solid var(--theme-colour1);
    resize: none
}

.edit-tb input[type="text"] {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    width: 100%;
    height: 32px;
    padding-left: 10px;
    border: 1px solid var(--theme-colour1)
}

.edit-tb input[readonly] {
    background: #f3f3f3;
    pointer-events: none
}

.edit-tb .dtBox input[type="text"] {
    border: none;
    padding: 0
}

.logout-header {
    background: url(../images/logout-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 110px;
    position: relative
}

    .logout-header img {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -34px 0 0 -69px
    }

.logout-container {
    padding: 30px
}

.logout-title {
    color: var(--theme-colour1);
    margin-bottom: 10px
}

    .logout-title span, .logout-title a {
        display: block;
        text-transform: capitalize
    }

    .logout-title span {
        font: 400 24px "Rubik",sans-serif
    }

        .logout-title span strong {
            font: 700 24px "Rubik",sans-serif
        }

    .logout-title a {
        font: 400 16px "Rubik",sans-serif
    }

.logout-block .matches {
    margin-bottom: 15px;
    padding: 15px
}

    .logout-block .matches .logout-link {
        display: block
    }

    .logout-block .matches .logout-view {
        background-color: var(--theme-colour1);
        border: none;
        color: white;
        border-radius: 4px;
        padding: 10px 14px;
        width: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto
    }

.search-prefer {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden
}

    .search-prefer .title {
        font: 400 24px "Rubik",sans-serif;
        padding: 12px 0;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: capitalize;
        text-align: center;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center
    }

        .search-prefer .title span {
            position: relative;
            padding-right: 0px
        }

            .search-prefer .title span:after {
                background: url(../images/faq-after.svg) no-repeat;
                position: absolute;
                top: 5px;
                right: 0;
                content: '';
                width: 24px;
                height: 24px;
                background-size: 24px;
                display: none
            }

        .search-prefer .title .icn {
            display: flex
        }

            .search-prefer .title .icn svg path {
                fill: var(--white)
            }

    .search-prefer .inner {
        padding: 0 20px 20px;
        background: var(--lightBg)
    }

        .search-prefer .inner a {
            font: 400 16px "Rubik",sans-serif;
            display: block;
            text-align: center;
            color: var(--theme-text-colour);
            text-transform: capitalize;
            padding: 13px 0;
            border-bottom: 1px solid var(--theme-text-colour)
        }

            .search-prefer .inner a:after {
                content: attr(data-val);
                padding-left: 5px
            }

            .search-prefer .inner a:last-child {
                border-bottom: none;
                padding-bottom: 5px
            }

.logout-complete {
    padding: 30px;
    background: var(--theme-colour1);
    text-align: center
}

    .logout-complete p {
        font: 400 16px "Rubik",sans-serif;
        color: var(--white);
        text-align: center;
        padding: 0 30px;
        margin-bottom: 20px
    }

    .logout-complete a {
        border-radius: 4px;
        display: inline-block;
        padding: 3px 30px;
        border: 1px solid #fff;
        color: #fff;
        text-transform: capitalize;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        margin: auto
    }

.checker input[type="checkbox"] {
    margin-top: 10px
}

.graham {
    overflow: hidden;
    margin-bottom: 5px
}

    .graham em {
        font-style: normal;
        width: 20px;
        height: 20px;
        display: inline-block;
        float: left
    }

        .graham em.horo-bu {
            background: url(../images/horo-bu.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-cha {
            background: url(../images/horo-cha.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-gu {
            background: url(../images/horo-gu.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-ku {
            background: url(../images/horo-ku.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-la {
            background: url(../images/horo-la.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-ma {
            background: url(../images/horo-ma.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-maa {
            background: url(../images/horo-maa.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-ra {
            background: url(../images/horo-ra.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-sa {
            background: url(../images/horo-sa.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-shi {
            background: url(../images/horo-shi.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .graham em.horo-shu {
            background: url(../images/horo-shu.jpg) no-repeat;
            background-size: 18px;
            background-position: center
        }

    .graham .select-holder {
        width: calc(100% - 40px);
        float: right
    }

        .graham .select-holder select {
            height: 20px;
            border: 1px solid var(--theme-colour1)
        }

.horo-select .one:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "1"
}

.horo-select .two:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "2"
}

.horo-select .three:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "3"
}

.horo-select .four:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "4"
}

.horo-select .five:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "5"
}

.horo-select .six:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "6"
}

.horo-select .seven:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "7"
}

.horo-select .eight:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "8"
}

.horo-select .nine:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "9"
}

.horo-select .ten:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "10"
}

.horo-select .eleven:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "11"
}

.horo-select .twelve:before {
    font: 400 14px "Rubik",sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    content: "12"
}

.please-add-horo p {
    font: 400 14px "Rubik",sans-serif;
    color: var(--white);
    text-align: center;
    margin-bottom: 20px
}

.please-add-horo a {
    font: 400 12px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #fdd606;
    color: var(--theme-colour1);
    text-transform: capitalize;
    border: 1px solid transparent;
    padding: 2px 30px
}

.p-chatting-wrapper {
    position: fixed;
    display: table-cell;
    right: 50px;
    bottom: 0px;
    z-index: 9999
}

    .p-chatting-wrapper .p-chat-box {
        display: inline-block;
        display: none;
        margin-left: 10px;
        vertical-align: bottom;
        width: 260px;
        border-width: 1px 1px 0px 1px;
        box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
        border-radius: 5px 5px 0px 0px;
        overflow: hidden
    }

        .p-chatting-wrapper .p-chat-box .button-anime {
            background-color: rgba(255,255,255,0.9);
            border: none
        }

        .p-chatting-wrapper .p-chat-box .p-chat-head {
            position: relative;
            z-index: 99;
            background-color: var(--theme-colour1);
            padding: 7px 10px;
            padding-right: 85px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.5)
        }

            .p-chatting-wrapper .p-chat-box .p-chat-head .p-name {
                color: white;
                font: 400 14px "Rubik",sans-serif;
                padding-left: 15px;
                position: relative;
                cursor: pointer
            }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-name:after {
                    position: absolute;
                    content: '';
                    width: 6px;
                    height: 6px;
                    border-radius: 100%;
                    background-color: #2d2d2d;
                    left: 0px;
                    top: 10px;
                    margin-top: -3px
                }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-name:before {
                    position: absolute;
                    content: '';
                    width: calc(260px - 91px);
                    height: 34px;
                    left: -10px;
                    top: -7px
                }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-name[data-status="online"]:after {
                    background-color: #22dd22
                }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-name[data-status="offline"]:after {
                    background-color: #ff0000
                }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-name .cnt {
                    display: inline-block;
                    margin-left: 5px;
                    font-weight: 600;
                    font-size: 12px
                }

                    .p-chatting-wrapper .p-chat-box .p-chat-head .p-name .cnt:after {
                        content: ')'
                    }

                    .p-chatting-wrapper .p-chat-box .p-chat-head .p-name .cnt:before {
                        content: '('
                    }

            .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap {
                right: 5px;
                top: 0px;
                height: 100%;
                position: absolute;
                z-index: 9
            }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap.p-box-minimized .p-settings-toggle {
                    display: none
                }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap.p-box-minimized .p-btnz.p-chatbox-settings {
                    display: none
                }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap .p-settings-toggle {
                    background-color: #2d2d2d;
                    top: 34px
                }

                    .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap .p-settings-toggle:after {
                        background-color: #2d2d2d;
                        right: 25px
                    }

                .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap .p-btnz {
                    height: 34px;
                    width: 25px;
                    display: inline-block;
                    cursor: pointer;
                    background-position: center;
                    background-repeat: no-repeat
                }

                    .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap .p-btnz.p-chatbox-settings {
                        background-image: url(../images/p-chat-settings-icn.png)
                    }

                    .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap .p-btnz.p-chatbox-maximize {
                        background-image: url(../images/p-maximize-icn.png)
                    }

                    .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap .p-btnz.p-chatbox-close {
                        background-image: url(../images/p-close-chatbox-icn.png)
                    }

                    .p-chatting-wrapper .p-chat-box .p-chat-head .p-btns-wrap .p-btnz.p-chatbox-minimize {
                        background-image: url(../images/p-minimize-icn.png)
                    }

        .p-chatting-wrapper .p-chat-box .p-chat-display {
            padding: 0px 2px 0px 5px;
            background-color: white;
            height: 250px;
            overflow: auto
        }

            .p-chatting-wrapper .p-chat-box .p-chat-display .scrollbar-inner {
                padding-right: 5px;
                height: 250px
            }

            .p-chatting-wrapper .p-chat-box .p-chat-display .scroll-element {
                right: 0px;
                width: 3px
            }

            .p-chatting-wrapper .p-chat-box .p-chat-display .scroll-bar {
                background-color: #ddd;
                border-radius: 0px;
                width: 3px
            }

            .p-chatting-wrapper .p-chat-box .p-chat-display .scroll-element_outer {
                border-radius: 0px;
                width: 3px
            }

            .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-grouping {
                display: block;
                font-size: 12px;
                text-align: center;
                position: relative;
                z-index: 1;
                clear: both;
                padding: 10px 0px;
                font-weight: 600
            }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-grouping span {
                    display: inline-block;
                    background-color: white;
                    padding: 0px 5px
                }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-grouping:after {
                    position: absolute;
                    content: '';
                    width: 100%;
                    height: 1px;
                    background-color: #b6b6b6;
                    top: 50%;
                    left: 0px;
                    z-index: -1
                }

            .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-newmsgs {
                display: block;
                font-size: 14px;
                text-align: center;
                position: relative;
                z-index: 1;
                clear: both;
                padding: 15px 0px 10px 0px;
                font-weight: 600
            }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-newmsgs span {
                    display: inline-block;
                    padding: 0px 15px;
                    background-color: #f3f3f3;
                    border-radius: 50px;
                    box-shadow: 2px 2px 5px rgba(0,0,0,0.3)
                }

            .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm {
                z-index: 1;
                position: relative;
                font: 400 12px "Rubik",sans-serif;
                border-radius: 5px;
                display: inline-block;
                clear: both;
                margin: 5px 0px;
                word-break: break-word;
                min-width: 130px
            }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm .p-chat-cnts {
                    display: block;
                    padding: 5px
                }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm .p-chat-dt {
                    position: relative;
                    display: block;
                    font-size: 11px;
                    padding: 2px 5px;
                    border-radius: 0px 0px 5px 5px;
                    overflow: hidden
                }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm .p-chat-tick {
                    position: absolute;
                    background-color: rgba(0,0,0,0.2);
                    width: 20px;
                    height: 100%;
                    right: 0px;
                    top: 0px;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-image: url("../images/p-checked.png")
                }

                    .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm .p-chat-tick.p-double {
                        background-image: url("../images/p-double-checked.png")
                    }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm.p-other {
                    background-color: #dff0ff;
                    margin-left: 10px;
                    float: left
                }

                    .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm.p-other:after {
                        position: absolute;
                        content: '';
                        width: 6px;
                        height: 6px;
                        background-color: #dff0ff;
                        top: 8px;
                        left: -3px;
                        transform: rotate(45deg);
                        z-index: -1
                    }

                    .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm.p-other .p-chat-dt {
                        background-color: #c0e2ff
                    }

                .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm.p-me {
                    background-color: #f3f3f3;
                    color: black;
                    margin-right: 5px;
                    float: right
                }

                    .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm.p-me:after {
                        position: absolute;
                        content: '';
                        width: 6px;
                        height: 6px;
                        background-color: #f3f3f3;
                        top: 8px;
                        right: -3px;
                        transform: rotate(45deg);
                        z-index: -1
                    }

                    .p-chatting-wrapper .p-chat-box .p-chat-display .p-chat-itm.p-me .p-chat-dt {
                        background-color: #e4e4e4
                    }

        .p-chatting-wrapper .p-chat-box .p-chatting-box {
            background-color: #f3f9ff;
            padding: 5px 40px 0px 5px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
            position: relative;
            border-top: 1px solid var(--theme-colour1);
            min-height: 42px
        }

            .p-chatting-wrapper .p-chat-box .p-chatting-box .p-update-ac {
                z-index: 999;
                position: absolute;
                width: 100%;
                height: 100%;
                bottom: 0px;
                left: 0px;
                background-color: var(--theme-colour1);
                color: #fdd606;
                text-align: center;
                padding: 10px 5px;
                padding-left: 40px
            }

                .p-chatting-wrapper .p-chat-box .p-chatting-box .p-update-ac span {
                    text-transform: uppercase;
                    position: relative;
                    display: inline-block;
                    text-align: center
                }

                    .p-chatting-wrapper .p-chat-box .p-chatting-box .p-update-ac span:after {
                        position: absolute;
                        content: '';
                        width: 0px;
                        height: 1px;
                        background-color: #fdd606;
                        bottom: 0px;
                        left: 0px;
                        -webkit-transition: all .4s ease-in;
                        -moz-transition: all .4s ease-in;
                        transition: all .4s ease-in
                    }

                .p-chatting-wrapper .p-chat-box .p-chatting-box .p-update-ac:after {
                    content: '';
                    position: absolute;
                    width: 40px;
                    height: 100%;
                    top: 0px;
                    left: 0px;
                    background-color: #fdd606;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 20px;
                    background-image: url(../images/update.svg)
                }

                .p-chatting-wrapper .p-chat-box .p-chatting-box .p-update-ac:hover span:after {
                    width: 100%
                }

            .p-chatting-wrapper .p-chat-box .p-chatting-box .p-chat-input {
                background-color: #f3f9ff;
                outline: none;
                width: 100%;
                padding: 5px;
                font: 400 14px "Rubik",sans-serif;
                height: 32px;
                border: 0px;
                resize: none;
                overflow: hidden
            }

            .p-chatting-wrapper .p-chat-box .p-chatting-box .p-send-btn {
                cursor: pointer;
                border: 0px;
                position: absolute;
                background-color: var(--theme-colour1);
                width: 40px;
                height: 100%;
                right: 0px;
                top: 0px;
                background-position: center;
                background-repeat: no-repeat;
                background-image: url(../images/p-send-icn.png)
            }

.p-chat-overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(255,255,255,0.8);
    z-index: 9999
}

.p-chat-btn {
    z-index: 99;
    position: fixed;
    right: 0px;
    top: 290px;
    cursor: pointer;
    width: 41px;
    height: 161px;
    background-position: center;
    background-image: url(../images/chat-btn-bg.png);
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in
}

    .p-chat-btn:after {
        position: absolute;
        content: '';
        width: 23px;
        height: 23px;
        top: 14px;
        right: 5px;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(../images/chat-icn.png);
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

    .p-chat-btn:hover:after {
        transform: rotateY(180deg)
    }

    .p-chat-btn .cnt {
        position: absolute;
        top: -3px;
        width: 20px;
        height: 20px;
        padding: 2px 0px;
        left: 0px;
        text-align: center;
        background-color: #fdd606;
        font-size: 10px;
        border: 1px solid var(--theme-colour1);
        border-radius: 100%;
        -webkit-animation: rotation 4s infinite,linear;
        -moz-animation: rotation 4s infinite,linear;
        animation: rotation 4s infinite,linear
    }

.p-settings-toggle {
    display: none;
    z-index: 99;
    position: absolute;
    right: 40px;
    top: 50px;
    width: 200px;
    background-color: var(--theme-colour1);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3)
}

    .p-settings-toggle .p-settings-itm {
        display: block;
        padding: 8px 15px;
        color: white;
        font: 400 14px "Rubik",sans-serif;
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .p-settings-toggle .p-settings-itm:hover {
            background-color: #fdd606;
            color: #2d2d2d
        }

    .p-settings-toggle:after {
        z-index: -1;
        position: absolute;
        content: '';
        width: 5px;
        height: 5px;
        background-color: var(--theme-colour1);
        transform: rotate(45deg);
        top: -2px;
        right: 15px
    }

.p-chat-contact-wrap {
    z-index: 99999;
    position: fixed;
    height: 100vh;
    width: 300px;
    background-color: var(--theme-colour1);
    right: -310px;
    top: 0px;
    box-shadow: -5px 0px 20px rgba(0,0,0,0.3);
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in
}

    .p-chat-contact-wrap .button-anime {
        background-color: rgba(255,255,255,0.9);
        border: none
    }

    .p-chat-contact-wrap.opn {
        right: 0px
    }

    .p-chat-contact-wrap .p-hd {
        position: relative;
        padding-left: 48px;
        background-color: #064e8f;
        background-position: 15px center;
        background-repeat: no-repeat;
        background-image: url(../images/chat-search-icn.png)
    }

        .p-chat-contact-wrap .p-hd.p-chat-icn {
            background-image: url(../images/chat-icn.png)
        }

        .p-chat-contact-wrap .p-hd:after {
            position: absolute;
            content: '';
            width: 8px;
            height: 8px;
            background-color: #064e8f;
            left: 44px;
            top: 50%;
            margin-top: -4px;
            transform: rotate(45deg)
        }

        .p-chat-contact-wrap .p-hd .p-search-txt {
            background-color: #f3f9ff;
            padding: 15px 12px;
            padding-right: 80px;
            color: #7698b6;
            font: 400 14px "Rubik",sans-serif;
            border: 0px;
            width: 100%;
            height: 48px;
            width: 100%;
            display: block
        }

        .p-chat-contact-wrap .p-hd .p-btns {
            position: absolute;
            top: 0px;
            width: 40px;
            height: 100%;
            background-color: #f3f9ff;
            cursor: pointer;
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .p-chat-contact-wrap .p-hd .p-btns:after {
                position: absolute;
                content: '';
                width: 100%;
                height: 100%;
                left: 0px;
                top: 0px;
                background-position: center;
                background-repeat: no-repeat;
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            .p-chat-contact-wrap .p-hd .p-btns.p-chat-back {
                right: 0px
            }

                .p-chat-contact-wrap .p-hd .p-btns.p-chat-back:after {
                    background-image: url(../images/chat-back-icn.png)
                }

            .p-chat-contact-wrap .p-hd .p-btns.p-chat-settings {
                right: 40px
            }

                .p-chat-contact-wrap .p-hd .p-btns.p-chat-settings:after {
                    background-image: url(../images/chat-settings-icn.png)
                }

            .p-chat-contact-wrap .p-hd .p-btns:hover:after {
                transform: rotateY(180deg)
            }

            .p-chat-contact-wrap .p-hd .p-btns:hover.p-chat-back:after {
                transform: rotateX(180deg)
            }

    .p-chat-contact-wrap .p-contacts-header {
        margin-left: 48px;
        font: 400 14px "Rubik",sans-serif;
        display: block;
        background-color: white;
        padding: 10px;
        color: var(--theme-colour1);
        border-bottom: 1px solid #ebebeb
    }

        .p-chat-contact-wrap .p-contacts-header em {
            font-style: normal
        }

    .p-chat-contact-wrap .p-tab-wrap {
        background-color: white;
        border-top: 1px solid #f3f9ff
    }

        .p-chat-contact-wrap .p-tab-wrap .p-tab {
            background-color: #fdd606;
            display: inline-block;
            padding: 8px;
            width: 100%;
            max-width: 50%;
            float: left;
            text-align: center;
            cursor: pointer;
            opacity: 0.8;
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .p-chat-contact-wrap .p-tab-wrap .p-tab:hover {
                opacity: 1
            }

            .p-chat-contact-wrap .p-tab-wrap .p-tab:first-child {
                border-right: 1px solid #064e8f
            }

            .p-chat-contact-wrap .p-tab-wrap .p-tab.active {
                opacity: 1;
                background-color: #064e8f;
                color: white
            }

    .p-chat-contact-wrap .p-contacts-hldr {
        padding-left: 48px;
        height: calc(100vh - 85px) !important;
        display: none
    }

        .p-chat-contact-wrap .p-contacts-hldr.active {
            display: block
        }

            .p-chat-contact-wrap .p-contacts-hldr.active .p-contacts-hldr {
                display: block
            }

        .p-chat-contact-wrap .p-contacts-hldr:after {
            position: absolute;
            content: '';
            width: calc(100% - 48px);
            top: 0px;
            right: 0px;
            background-color: white;
            height: 100%;
            z-index: -1
        }

        .p-chat-contact-wrap .p-contacts-hldr .scroll-bar {
            background-color: #e1e1e1;
            border-radius: 0px
        }

        .p-chat-contact-wrap .p-contacts-hldr .scroll-element_outer {
            border-radius: 0px
        }

        .p-chat-contact-wrap .p-contacts-hldr .p-wrp {
            position: relative;
            padding: 0px 10px;
            background-color: white;
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .p-chat-contact-wrap .p-contacts-hldr .p-wrp:hover {
                background-color: #f3f3f3
            }

            .p-chat-contact-wrap .p-contacts-hldr .p-wrp:after {
                position: absolute;
                content: '';
                width: 6px;
                height: 6px;
                right: 20px;
                top: 50%;
                margin-top: -3px;
                border-radius: 100%
            }

            .p-chat-contact-wrap .p-contacts-hldr .p-wrp[data-status="online"]:after {
                background-color: #22dd22
            }

            .p-chat-contact-wrap .p-contacts-hldr .p-wrp[data-status="offline"]:after {
                background-color: #ff0000
            }

        .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm {
            display: block;
            position: relative;
            cursor: pointer;
            background-color: white;
            padding: 10px 0px;
            border-bottom: 1px solid #ebebeb;
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm .p-name {
                display: block;
                color: #2d2d2d;
                font: 400 14px "Rubik",sans-serif
            }

                .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm .p-name .cnt {
                    display: inline-block;
                    margin-left: 5px;
                    font-weight: 600;
                    font-size: 12px
                }

                    .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm .p-name .cnt:after {
                        content: ')'
                    }

                    .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm .p-name .cnt:before {
                        content: '('
                    }

            .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm .p-webid {
                display: block;
                color: #939393
            }

            .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm .p-pic-wrapper {
                display: block;
                position: absolute;
                width: 48px;
                height: 100%;
                left: -58px;
                top: 0px;
                text-align: center
            }

                .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm .p-pic-wrapper .p-pic {
                    position: relative;
                    width: 36px;
                    top: 10px;
                    border-radius: 100%;
                    backface-visibility: hidden
                }

            .p-chat-contact-wrap .p-contacts-hldr .p-contact-itm:hover {
                background-color: #f3f3f3
            }

    .p-chat-contact-wrap .p-contact-details {
        z-index: -1;
        display: none;
        background-color: white;
        position: fixed;
        width: 385px;
        margin-top: 0px;
        right: 315px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.3)
    }

        .p-chat-contact-wrap .p-contact-details:after {
            position: absolute;
            content: '';
            width: 20px;
            height: 100%;
            top: 0px;
            right: -15px
        }

        .p-chat-contact-wrap .p-contact-details .p-contact-arrow {
            z-index: -1;
            margin-top: 22px;
            position: fixed;
            content: '';
            background-color: white;
            width: 10px;
            height: 10px;
            right: 310px;
            transform: rotate(45deg)
        }

        .p-chat-contact-wrap .p-contact-details .p-dtls-inner {
            padding: 20px 15px 0px 15px
        }

            .p-chat-contact-wrap .p-contact-details .p-dtls-inner .p-dtl-pic {
                display: inline-block;
                max-width: 166px
            }

            .p-chat-contact-wrap .p-contact-details .p-dtls-inner .p-dtls-wrap {
                display: inline-block;
                padding-left: 15px;
                width: 189px;
                float: right
            }

                .p-chat-contact-wrap .p-contact-details .p-dtls-inner .p-dtls-wrap .p-nm {
                    font: 400 16px "Rubik",sans-serif;
                    color: var(--theme-colour1);
                    display: block;
                    line-height: 22px
                }

                .p-chat-contact-wrap .p-contact-details .p-dtls-inner .p-dtls-wrap .p-wbid {
                    font: 400 14px "Rubik",sans-serif;
                    color: black;
                    display: block;
                    line-height: 22px;
                    border-bottom: 1px solid #dbddde;
                    padding-bottom: 5px;
                    margin-bottom: 5px
                }

                .p-chat-contact-wrap .p-contact-details .p-dtls-inner .p-dtls-wrap .p-dtls-itm {
                    font: 400 14px "Rubik",sans-serif;
                    color: #2d2d2d;
                    line-height: 24px;
                    display: block
                }

        .p-chat-contact-wrap .p-contact-details .p-dtl-view {
            display: block;
            margin-top: 20px;
            background-color: var(--theme-colour1);
            color: white;
            font: 400 17px "Rubik",sans-serif;
            padding: 8px;
            text-transform: uppercase;
            text-align: center
        }

.history .back {
    font: 400 14px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-transform: capitalize;
    display: block;
    margin-bottom: 25px;
    text-align: right
}

    .history .back span {
        position: relative;
        padding-left: 25px
    }

        .history .back span:before {
            background: url(../images/arrow-back.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

.history .message-item {
    border-color: #d5d5d5
}

.history .history-instance {
    font: 400 14px "Rubik",sans-serif;
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 10px
}

    .history .history-instance .cover {
        margin-bottom: 25px
    }

    .history .history-instance .title {
        background: var(--theme-colour1);
        color: var(--white);
        padding: 10px 0;
        margin: 0 -10px 20px -10px;
        padding-left: 10px;
        text-transform: capitalize
    }

    .history .history-instance .subtitle {
        color: var(--theme-colour1);
        text-transform: capitalize;
        margin-bottom: 15px
    }

        .history .history-instance .subtitle span {
            position: relative;
            padding: 0 30px 0 25px
        }

            .history .history-instance .subtitle span:before, .history .history-instance .subtitle span:after {
                position: absolute;
                content: ''
            }

            .history .history-instance .subtitle span:before {
                top: 0;
                left: 0;
                width: 15px;
                height: 15px
            }

            .history .history-instance .subtitle span:after {
                top: -4px;
                right: 0;
                width: 25px;
                height: 25px
            }

        .history .history-instance .subtitle.incoming span:before {
            background: url(../images/incoming.svg) no-repeat;
            background-size: 12px;
            background-position: center
        }

        .history .history-instance .subtitle.outgoing span:before {
            background: url(../images/outgoing.svg) no-repeat;
            background-size: 12px;
            background-position: center
        }

        .history .history-instance .subtitle.photo-request-decline span:after {
            background: url(../images/photo-decline.svg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .history .history-instance .subtitle.photo-request-accept span:after {
            background: url(../images/add-photo.svg) no-repeat;
            background-size: 18px;
            background-position: center
        }

        .history .history-instance .subtitle.int-receive span:after, .history .history-instance .subtitle.int-sent span:after {
            background: url(../images/heart-filled-red.svg) no-repeat;
            background-size: 18px;
            background-position: center
        }

    .history .history-instance p {
        color: #4b4b4b;
        margin-bottom: 15px
    }

    .history .history-instance a, .history .history-instance button {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid transparent;
        display: block;
        background: transparent;
        margin-bottom: 8px;
        text-align: center;
        text-transform: capitalize;
        padding: 2px 40px
    }

        .history .history-instance a.first, .history .history-instance a.third, .history .history-instance button.first, .history .history-instance button.third {
            background: #e76045;
            color: var(--white)
        }

        .history .history-instance a.second, .history .history-instance button.second {
            color: #e76045;
            border-color: #e76045
        }

    .history .history-instance.multiple .cover:not(:last-child) {
        border-bottom: 1px solid #dedede;
        padding-bottom: 25px
    }

.share-content {
    padding: 15px;
    background: var(--white)
}

    .share-content .main-title {
        margin-bottom: 15px
    }

.bg-selectors {
    margin-bottom: 30px
}

    .bg-selectors span {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        color: var(--theme-colour1);
        border: 1px solid var(--theme-colour1);
        display: block;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        padding: 0 10px 0 40px;
        height: 35px;
        line-height: 33px;
        text-align: left;
        text-transform: capitalize;
        overflow: hidden
    }

        .bg-selectors span i {
            position: absolute;
            top: 6px;
            left: 10px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid var(--theme-colour1)
        }

        .bg-selectors span input[type="checkbox"] {
            display: none
        }

        .bg-selectors span.selected {
            background: var(--theme-colour1);
            color: var(--white)
        }

            .bg-selectors span.selected i {
                background: url(../images/tick-blue.svg) no-repeat;
                background-size: 10px;
                background-position: center;
                background-color: var(--white);
                border-color: var(--theme-colour1)
            }

.service-table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    margin: 30px 0 40px
}

    .service-table tr th, .service-table tr td {
        font: 400 10px "Rubik",sans-serif;
        text-transform: capitalize;
        text-align: center;
        padding: 15px 5px
    }

    .service-table tr th {
        background: var(--theme-colour1);
        color: var(--white)
    }

    .service-table tr td {
        color: #49494a
    }

    .service-table tr a.upper {
        text-transform: uppercase
    }

.upgrade-dashboard, .packages-dashboard {
    padding: 15px;
    color: #2d2d2d;
    text-align: center;
    margin-bottom: 30px
}

    .upgrade-dashboard .pd-title, .packages-dashboard .pd-title {
        font: 700 22px "Rubik",sans-serif;
        text-transform: uppercase;
        margin-bottom: 10px
    }

    .upgrade-dashboard .pd-subtitle, .packages-dashboard .pd-subtitle {
        font: 400 16px "Rubik",sans-serif;
        margin-bottom: 20px
    }

    .upgrade-dashboard .pd-link, .packages-dashboard .pd-link {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid transparent;
        background: #fdd606;
        color: #2d2d2d;
        display: inline-block;
        text-transform: capitalize;
        padding: 5px 30px
    }

.locator-cell .locator-wrapper {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    padding: 20px 20px 30px;
    margin: -95px 0 0 -150px;
    background: var(--white);
    z-index: 100;
    border: 1px solid #afafaf;
    display: none
}

    .locator-cell .locator-wrapper .title {
        font: 700 14px "Rubik",sans-serif;
        color: var(--theme-colour1);
        margin-bottom: 15px
    }

    .locator-cell .locator-wrapper .close-locator {
        background: url(../images/close-blue.svg) no-repeat;
        position: absolute;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
        background-size: 10px;
        background-position: center;
        display: inline-block;
        cursor: pointer
    }

    .locator-cell .locator-wrapper .inner {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

        .locator-cell .locator-wrapper .inner img {
            margin-right: 15px
        }

        .locator-cell .locator-wrapper .inner p {
            font: 400 14px "Rubik",sans-serif
        }

            .locator-cell .locator-wrapper .inner p a {
                color: var(--theme-colour1)
            }

.ignore-this {
    display: block;
    border: none;
    border-bottom: 1px solid border;
    background: transparent;
    margin-top: 15px;
    padding: 0;
    color: var(--theme-colour1)
}

    .ignore-this span {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        text-decoration: underline
    }

.describe-yourself {
    text-align: left
}

    .describe-yourself .title {
        margin-bottom: 15px
    }

        .describe-yourself .title span {
            font: 400 14px "Rubik",sans-serif;
            color: var(--white);
            text-transform: capitalize;
            position: relative
        }

            .describe-yourself .title span:after {
                position: absolute;
                bottom: -2px;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: var(--white)
            }

            .describe-yourself .title span strong {
                text-transform: uppercase
            }

    .describe-yourself p {
        font: 400 14px "Rubik",sans-serif;
        line-height: 22px;
        color: var(--white);
        margin-bottom: 0
    }

.misc-content .title .contacts {
    color: var(--theme-colour1);
    font: 700 24px "Rubik",sans-serif
}

    .misc-content .title .contacts:before {
        background: url(../images/branches-hd-icn.png) no-repeat;
        height: 45px;
        width: 37px;
        top: -5px
    }

.p-blue-txt {
    color: var(--theme-colour1)
}

.p-search-wrap {
    margin-top: 35px
}

    .p-search-wrap .p-hd {
        display: inline-block;
        font: 700 14px "Rubik",sans-serif;
        color: var(--theme-colour1);
        margin-right: 25px;
        margin-bottom: 5px
    }

    .p-search-wrap input {
        display: inline-block;
        border: 1px solid #d0d0d0;
        border-radius: 50px;
        padding: 8px 20px;
        padding-right: 40px;
        width: 100%;
        max-width: 455px;
        font: 400 14px "Rubik",sans-serif;
        background-size: 14px;
        background-position: calc(100% - 22px) center
    }

    .p-search-wrap .inputFld {
        position: relative;
        width: 100%;
        max-width: 455px
    }

        .p-search-wrap .inputFld .icn {
            position: absolute;
            right: 20px;
            top: 31%
        }

        .p-search-wrap .inputFld svg path {
            fill: var(--theme-colour1)
        }

.p-alternate {
    min-width: 850px;
    margin-bottom: 0px
}

    .p-alternate .p-address-clm {
        width: 40%
    }

    .p-alternate tr:nth-child(odd) {
        background-color: #f3f3f3
    }

    .p-alternate tr th {
        padding: 10px 5px !important;
        border: 1px solid #ddd
    }

    .p-alternate tr td {
        padding: 20px 30px !important;
        font-size: 14px !important;
        color: #828282;
        border: 1px solid #ddd;
        border-width: 0px 1px
    }

    .p-alternate tr:last-child td {
        border-width: 0px 1px 1px 1px
    }

    .p-alternate .p-view-link {
        margin-top: 5px;
        display: block;
        color: var(--theme-colour1)
    }

        .p-alternate .p-view-link:hover {
            text-decoration: underline;
            color: var(--theme-colour2)
        }

.p-tble-wrap {
    overflow: auto;
    margin-bottom: 40px
}

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

@media only screen and (min-width: 480px) {
    .wrap, .all-communities {
        padding: 0 30px
    }

    .register .title .free, .register .title .with, .register .title .social {
        display: inline-block;
        vertical-align: middle;
        margin-top: 0;
        margin-bottom: 0
    }

    .register .title .free {
        margin-right: 10px
    }

    .register .title .social {
        padding-top: 5px
    }

    .find-match {
        margin: 20px auto 0;
        padding: 30px 30px 0
    }

        .find-match .dummy-bg {
            margin-left: -30px;
            margin-right: -30px
        }

    .overflow-v {
        overflow-x: hidden
    }

    .saved-searches {
        width: 460px;
        margin-left: auto;
        margin-right: auto
    }

    .searching-partner {
        width: 460px;
        margin: auto auto 20px
    }
}

@media only screen and (min-width: 480px) {
    .verify {
        padding: 0
    }

        .verify .inner {
            display: none
        }

            .verify .inner input[type="text"] {
                width: 100px;
                margin: 8px 0 0
            }

            .verify .inner.shown {
                display: -webkit-flex;
                display: -moz-flex;
                display: -ms-flex;
                display: -o-flex;
                display: flex;
                flex-direction: row
            }

                .verify .inner.shown input[type="text"], .verify .inner.shown .add-hobby {
                    margin-right: 10px
                }

                .verify .inner.shown .add-hobby {
                    height: 35px;
                    margin-top: 24px
                }

                    .verify .inner.shown .add-hobby:last-of-type {
                        margin-right: 0
                    }
}

.confirmation-container .c-details {
    display: flex;
    align-items: baseline
}

    .confirmation-container .c-details span, .confirmation-container .c-details em {
        display: inline-block !important;
        vertical-align: middle
    }

    .confirmation-container .c-details span {
        width: 50%
    }

@media (max-width: 991px) {
    .confirmation-container .c-details span {
        width: 40%
    }
}

@media (max-width: 767px) {
    .confirmation-container .c-details span {
        width: 30%
    }
}

@media (max-width: 550px) {
    .confirmation-container .c-details span {
        width: 200px
    }
}

.confirmation-container .c-details span:after {
    float: right;
    content: ':'
}

.confirmation-container .c-details em {
    padding-left: 30px
}

@media (max-width: 767px) {
    .confirmation-container .c-details em {
        width: 60%
    }
}

@media (max-width: 550px) {
    .confirmation-container .c-details em {
        width: 100%
    }
}

@media only screen and (min-width: 768px) {
    footer .premium {
        width: 100%;
        overflow: hidden
    }

    footer .footer-social a {
        display: inline-block;
        vertical-align: middle;
        margin: 0 15px 0 0
    }

        footer .footer-social a.app:first-of-type {
            margin-right: 30px
        }

        footer .footer-social a.app:last-of-type {
            margin-left: 20px
        }

        footer .footer-social a.social {
            margin: 0 10px 0 0
        }

    footer .privacy-terms {
        text-align: center;
        margin-top: 25px
    }

        footer .privacy-terms a {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 0;
            padding: 0 20px;
            border-right: 1px solid #f9f9f9
        }

            footer .privacy-terms a:last-child {
                border-right: none
            }

    .notify-popup .notify-content, .message-popup .notify-content {
        width: 500px
    }

    .message-popup .contact-section, .message-popup .horoscope-section {
        width: 700px
    }

        .message-popup .contact-section p a, .message-popup .horoscope-section p a {
            font: 400 14px "Rubik",sans-serif
        }

    .default-popup .default-section, .default-popup2 .default-section {
        width: 500px
    }

        .default-popup .default-section.fb-form, .default-popup2 .default-section.fb-form {
            width: 75%
        }

        .default-popup .default-section.service-details, .default-popup2 .default-section.service-details {
            width: 600px
        }

    .communities {
        overflow: hidden;
        padding-left: 30px;
        padding-right: 30px
    }

        .communities a {
            float: left
        }

            .communities a.all {
                margin-top: 15px
            }

        .communities .caste span {
            min-width: 0
        }

    .register-submit.inverse {
        width: 500px
    }

    .faq-title.short {
        font-size: 30px;
        margin-top: 0
    }

        .faq-title.short span {
            padding-top: 0
        }

    .result-instance .result-pic {
        text-align: left
    }

    .result-instance .name span, .result-instance .name em {
        display: inline-block;
        margin: 0
    }

    .result-instance .name span {
        margin-right: 15px
    }

    .result-instance .name em:after {
        content: '|';
        padding: 0 10px
    }

    .result-instance .name em:last-of-type:after {
        display: none
    }

    .result-instance .connected {
        flex-direction: row;
        justify-content: flex-start
    }

        .result-instance .connected a, .result-instance .connected button {
            padding: 4px 30px;
            margin: 0 10px 0 0
        }

            .result-instance .connected a:last-child, .result-instance .connected button:last-child {
                margin-right: 0
            }

    .faq-call {
        text-align: center
    }

        .faq-call span, .faq-call strong {
            margin: 0;
            display: inline-block;
            vertical-align: middle;
            margin-right: 30px
        }

    .pay-form .mt-adjust {
        margin-top: 43px
    }

    .pay-form .typer {
        margin: 0
    }

    .pay-form input[type="submit"] {
        margin-top: 8px
    }

    .payment-container .inner {
        width: 700px;
        margin-left: auto;
        margin-right: auto
    }

    .edit-profile .p-profile-wrap .p-head-wrap .p-hd, .edit-profile .p-profile-wrap .p-head-wrap .p-for, .edit-profile .p-profile-wrap .p-head-wrap .p-id, .edit-profile .p-profile-wrap .p-head-wrap .p-verified {
        display: inline-block;
        vertical-align: middle
    }

    .edit-profile .p-profile-wrap .p-head-wrap .p-for {
        padding: 0 15px;
        margin: 0 15px 0 -15px;
        border-left: 1px solid #919090;
        border-right: 1px solid #919090
    }

    .edit-profile .p-profile-wrap .p-head-wrap .p-hd:after {
        display: none
    }

    .confirmation-container .c-details span, .confirmation-container .c-details em {
        display: inline-block !important;
        vertical-align: middle
    }

    .confirmation-container .c-details span {
        width: 50%
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .confirmation-container .c-details span {
        width: 40%
    }
}

@media only screen and (min-width: 768px) and (max-width: 767px) {
    .confirmation-container .c-details span {
        width: 30%
    }
}

@media only screen and (min-width: 768px) {
    .confirmation-container .c-details span:after {
        float: right;
        content: ':'
    }

    .confirmation-container .c-details em {
        padding-left: 30px
    }

    .filter-section .filter-accordion {
        width: 700px;
        margin-left: auto;
        margin-right: auto
    }

    .messages-contact span, .messages-contact p {
        font: 400 14px "Rubik",sans-serif
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .go-help {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        margin-bottom: 15px;
        overflow: hidden
    }

        .go-help .go-to, .go-help .happy-help {
            margin: 0
        }

            .go-help .happy-help .title {
                margin-top: 50px
            }
}

@media only screen and (min-width: 992px) {
    .story-relative {
        position: relative;
        overflow: hidden
    }

        .story-relative .profile-absolute {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%
        }

            .story-relative .profile-absolute .profile-of-day {
                min-height: 0
            }

                .story-relative .profile-absolute .profile-of-day img {
                    margin-bottom: 0
                }

            .story-relative .profile-absolute a {
                height: calc(100% - 17px)
            }

    .side-communities.inverse a {
        float: left
    }

    .go-to {
        background-size: auto;
        background-position: top right
    }

    .search-wrapper {
        width: 900px;
        margin: 30px auto
    }

        .search-wrapper.common-search {
            width: 100%
        }

        .search-wrapper .search-criteria {
            width: calc(100% / 3);
            float: left;
            margin-bottom: 0
        }

            .search-wrapper .search-criteria:nth-of-type(1), .search-wrapper .search-criteria:nth-of-type(2), .search-wrapper .search-criteria:nth-of-type(4), .search-wrapper .search-criteria:nth-of-type(5) {
                border-right: none
            }

            .search-wrapper .search-criteria:nth-of-type(4), .search-wrapper .search-criteria:nth-of-type(5) {
                border-top: none
            }

            .search-wrapper .search-criteria:nth-of-type(6) {
                border-bottom: none
            }

    .search-by {
        margin-top: 25px
    }

    .search-tabs {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #d7d7d7
    }

        .search-tabs span {
            width: 150px;
            padding: 10px 0;
            text-align: center;
            display: inline-block
        }

            .search-tabs span:before {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                position: absolute;
                bottom: -7px;
                left: 0;
                content: '';
                width: 100%;
                height: 3px;
                background: var(--theme-colour1);
                opacity: 0
            }

            .search-tabs span.active {
                padding-left: 0
            }

                .search-tabs span.active:before {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    opacity: 1
                }

                .search-tabs span.active:after {
                    display: none
                }

    .exclusive {
        background: url(../images/exclusive-bg.jpg) no-repeat;
        background-repeat: repeat;
        border-bottom: 4px solid var(--theme-colour1)
    }

        .exclusive .inner {
            width: 60%;
            background: var(--white)
        }

    .flex-992 {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

        .flex-992 .adv-select {
            width: calc((100% / 2) - 15px)
        }

            .flex-992 .adv-select.straight {
                width: 100%
            }

    .here {
        margin: 0
    }

    .discount .content {
        padding-top: 15px
    }

        .discount .content span, .discount .content p, .discount .content a {
            display: inline-block;
            vertical-align: middle;
            margin: 0
        }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .intimate-join {
        margin-top: 30px
    }

    .side-panel .intimate-join {
        margin-top: 10px
    }

    .career-apply {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .career-apply p {
            height: 72px;
            text-overflow: ellipsis;
            overflow: hidden
        }

        .career-apply .title {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }
}

@media only screen and (min-width: 1200px) {
    .mobile {
        display: none !important
    }

    .desktop {
        display: block !important
    }

    a, input[type="submit"] {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        a:hover, input[type="submit"]:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

    .totop {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: url(../images/totop.svg) no-repeat;
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        position: fixed;
        right: 25px;
        bottom: 25px;
        width: 30px;
        height: 30px;
        background-color: var(--theme-colour1);
        background-size: 30px;
        z-index: 1000;
        opacity: 0.45;
        cursor: pointer
    }

        .totop:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            opacity: 0.5
        }

    .accordion-wrapper .accordion {
        padding: 0 40px 15px
    }

    .faq-searchbox .submit-holder {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        width: 210px
    }

        .faq-searchbox .submit-holder:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: var(--theme-colour1),15%
        }

    @-webkit-keyframes bluranimation {
        0% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(0.92);
            -moz-transform: scale(0.92);
            transform: scale(0.92)
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }
    }

    @-moz-keyframes bluranimation {
        0% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(0.92);
            -moz-transform: scale(0.92);
            transform: scale(0.92)
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }
    }

    @keyframes bluranimation {
        0% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(0.92);
            -moz-transform: scale(0.92);
            transform: scale(0.92)
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }
    }

    @-webkit-keyframes rotation {
        0% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }

        50% {
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            transform: rotateY(360deg)
        }

        100% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }
    }

    @-moz-keyframes rotation {
        0% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }

        50% {
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            transform: rotateY(360deg)
        }

        100% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }
    }

    @keyframes rotation {
        0% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }

        50% {
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            transform: rotateY(360deg)
        }

        100% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }
    }

    @-webkit-keyframes aboutAnimation {
        0% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }

        50% {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%)
        }

        100% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }
    }

    @-moz-keyframes aboutAnimation {
        0% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }

        50% {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%)
        }

        100% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }
    }

    @keyframes aboutAnimation {
        0% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }

        50% {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%)
        }

        100% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }
    }

    .need-assistance a:hover {
        color: #fdd606,10%
    }

    .default-container {
        padding: 30px 50px
    }

    footer {
        background: url(../images/footer-strip.png) no-repeat;
        background-size: contain;
        padding: 40px 0 0;
        position: relative;
        overflow: hidden;
        background-color: transparent;
        background-position: top center;
        z-index: 1000
    }

        footer.no-bg {
            background: none;
            padding-top: 30px
        }

        footer .footer-content {
            background: var(--theme-colour1);
            padding: 50px 50px 30px;
            overflow: hidden
        }

        footer .premium {
            width: 800px;
            margin: auto auto 30px
        }

            footer .premium a span {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            footer .premium a:hover {
                -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.65);
                -moz-box-shadow: 0 0 10px rgba(0,0,0,0.65);
                box-shadow: 0 0 10px rgba(0,0,0,0.65);
                border-color: #fdd606
            }

                footer .premium a:hover span {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    background: var(--theme-colour1),10%;
                    color: #fdd606
                }

        footer .footer-links a {
            padding: 5px 5px 5px 25px;
            margin-bottom: 5px
        }

            footer .footer-links a:before, footer .footer-links a:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            footer .footer-links a:before {
                top: 8px
            }

            footer .footer-links a:after {
                position: absolute;
                bottom: 0;
                left: 25px;
                content: '';
                width: 0;
                height: 1px;
                background: #fdd606
            }

            footer .footer-links a:hover {
                color: #fdd606
            }

                footer .footer-links a:hover:before, footer .footer-links a:hover:after {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in
                }

                footer .footer-links a:hover:after {
                    width: 50px
                }

                footer .footer-links a:hover:before {
                    -webkit-transform: rotateY(-90deg);
                    -moz-transform: rotateY(-90deg);
                    transform: rotateY(-90deg)
                }

        footer .footer-social a:hover {
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.99);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.99);
            box-shadow: 0 0 20px rgba(0,0,0,0.99)
        }

        footer .footer-social a.social:hover {
            background-color: #fdd606
        }

        footer .privacy-terms a:hover {
            color: #fdd606
        }

        footer.search-results-page {
            margin-top: 250px;
            padding: 0;
            background: none
        }

    .find-match {
        width: 100%;
        margin-top: 0
    }

    .footnote span a:hover {
        color: #fdd606
    }

    .notify-popup .notify-content .ok:hover, .message-popup .notify-content .ok:hover {
        background: transparent;
        border-color: #fdd606;
        color: #fdd606
    }

    .message-popup .contact-section a:hover, .message-popup .horoscope-section a:hover {
        background: transparent;
        border-color: #fdd606;
        color: #fdd606
    }

    .confirm-deactivate a:hover, .confirm-deletion a:hover, .confirm-reactivate a:hover, .message a:hover {
        background: transparent;
        border-color: #fdd606;
        color: #fdd606
    }

    .about {
        background: url(../images/about-bg.jpg) no-repeat;
        background-position: bottom center;
        background-size: contain;
        padding: 40px 60px
    }

        .about .title strong {
            position: relative;
            padding-bottom: 5px
        }

            .about .title strong:after {
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: #fdd606
            }

        .about.inverse {
            background: url(../images/about-inverse-bg.jpg) no-repeat;
            background-size: contain;
            background-position: top center
        }

            .about.inverse .about-icon:before {
                -webkit-transition: all .3s ease-in;
                -moz-transition: all .3s ease-in;
                transition: all .3s ease-in
            }

            .about.inverse .about-icon:hover:before {
                -webkit-transition: all .3s ease-in;
                -moz-transition: all .3s ease-in;
                transition: all .3s ease-in;
                -webkit-transform: scale(1.25);
                -moz-transform: scale(1.25);
                transform: scale(1.25)
            }

    .about-register {
        background: url(../images/cheesy-couple2.jpg) no-repeat;
        background-size: 108px 107px;
        background-position: bottom right;
        background-color: #f3f3f3;
        position: relative
    }

        .about-register:before {
            position: absolute;
            bottom: 0;
            left: 0;
            background: url(../images/about-register-bg.jpg) no-repeat;
            width: 95px;
            height: 120px;
            background-size: 95px 120px;
            content: ''
        }

        .about-register a:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .about-intimate {
        background: url(../images/about-intimate-bg.jpg) no-repeat;
        background-size: contain;
        background-position: bottom center;
        padding: 60px 60px 60px 550px;
        position: relative;
        min-height: 400px
    }

        .about-intimate:before {
            -webkit-animation: aboutAnimation 4s infinite,linear;
            -moz-animation: aboutAnimation 4s infinite,linear;
            animation: aboutAnimation 4s infinite,linear;
            position: absolute;
            top: 50%;
            left: 60px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: url(../images/about-intimate1.jpg) no-repeat;
            content: '';
            width: 335px;
            height: 335px;
            background-size: 335px;
            margin-top: -168px
        }

    .communities {
        overflow: hidden;
        padding-left: 60px;
        padding-right: 60px
    }

        .communities a {
            margin-bottom: 0
        }

            .communities a.caste {
                margin-bottom: 0;
                text-align: left
            }

                .communities a.caste span:before {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in
                }

                .communities a.caste:hover {
                    color: #fdd606
                }

                    .communities a.caste:hover span:before {
                        -webkit-transition: all .4s ease-in;
                        -moz-transition: all .4s ease-in;
                        transition: all .4s ease-in;
                        -webkit-transform: rotateY(180deg);
                        -moz-transform: rotateY(180deg);
                        transform: rotateY(180deg)
                    }

            .communities a.all {
                text-align: right
            }

                .communities a.all span {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in
                }

                    .communities a.all span:hover {
                        -webkit-transition: all .4s ease-in;
                        -moz-transition: all .4s ease-in;
                        transition: all .4s ease-in;
                        background: var(--theme-colour1);
                        color: #fdd606;
                        border-color: #fdd606
                    }

    .basic {
        padding: 45px 50px 20px
    }

    .spanners {
        margin-top: 30px
    }

        .spanners [class^="col-"]:nth-child(1):after, .spanners [class^="col-"]:nth-child(2):after {
            position: absolute;
            top: 50%;
            right: 60px;
            content: '';
            width: 1px;
            height: 150px;
            margin-top: -75px;
            background: #a6c5e0
        }

        .spanners span:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

        .spanners span:hover:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg)
        }

    .default-popup .default-section.password-protect, .default-popup2 .default-section.password-protect {
        width: 700px
    }

    .default-popup .default-section.view-password, .default-popup2 .default-section.view-password {
        background: url(../images/view-password-bg.jpg) no-repeat;
        background-position: bottom right;
        background-color: var(--theme-colour1);
        background-size: 362px 128px
    }

    .default-popup .default-section.upgrade-pack, .default-popup2 .default-section.upgrade-pack {
        background: url(../images/upgrade-bg.jpg) no-repeat;
        background-position: center left;
        padding: 45px 45px 45px 380px;
        width: 920px;
        background-color: var(--theme-colour1)
    }

    .default-popup .default-section.fb-form, .default-popup2 .default-section.fb-form {
        background: url(../images/fb-bg.jpg) no-repeat;
        padding-left: 400px;
        background-position: top left;
        width: 900px;
        background-color: var(--white)
    }

    .password-protect {
        position: relative;
        overflow: hidden
    }

        .password-protect .inner {
            position: relative;
            z-index: 10;
            text-align: left;
            padding: 30px 0 30px 170px
        }

            .password-protect .inner:before {
                background: url(../images/password-protect-lock.png) no-repeat;
                position: absolute;
                top: 50%;
                left: 30px;
                content: '';
                width: 104px;
                height: 157px;
                background-size: 104px 157px;
                margin-top: -79px
            }

        .password-protect:before, .password-protect:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 222px;
            height: 220px;
            margin-top: -110px
        }

        .password-protect:before {
            background: url(../images/password-protect-before.jpg) no-repeat;
            background-size: 222px 220px;
            left: 0
        }

        .password-protect:after {
            background: url(../images/password-protect-after.jpg) no-repeat;
            background-size: 222px 220px;
            right: 0
        }

        .password-protect .close-default-popup {
            z-index: 10
        }

    .popup-buttons input[type="submit"], .popup-buttons a, .popup-buttons input[type="button"] {
        padding: 2px 45px
    }

        .popup-buttons input[type="submit"]:hover, .popup-buttons input[type="button"]:hover {
            background: transparent;
            color: var(--white);
            border-color: var(--white)
        }

        .popup-buttons a:hover {
            background: var(--white);
            color: var(--theme-colour1)
        }

        .popup-buttons a#erase-password:hover {
            background: transparent;
            color: #fdd606
        }

    .confirmation a:hover, .erase-password a:hover {
        background: var(--white);
        color: var(--theme-colour1)
    }

    .discover-profile .decisions a:first-child:hover, .discover-profile .decisions a:last-child:hover {
        border-color: #369623;
        background: #369623;
        color: var(--white)
    }

        .discover-profile .decisions a:first-child:hover span:before {
            background: url(../images/heart-filled-blue.svg) no-repeat;
            background-size: 12px
        }

        .discover-profile .decisions a:last-child:hover span:before {
            background: url(../images/cancel-filled-blue.svg) no-repeat;
            background-size: 12px
        }

    .discover-all:hover {
        color: #e76045
    }

    .content.all-communities {
        padding: 0 50px
    }

    .all-communities {
        padding: 0 50px
    }

        .all-communities [class^='col-'] {
            padding-left: 45px
        }

            .all-communities [class^='col-']:nth-of-type(1):after, .all-communities [class^='col-']:nth-of-type(2):after {
                position: absolute;
                top: 0;
                right: 45px;
                content: '';
                width: 1px;
                height: calc(100% - 20px);
                background: #e2ecf5
            }

            .all-communities [class^='col-']:nth-of-type(1) a:last-of-type, .all-communities [class^='col-']:nth-of-type(2) a:last-of-type {
                margin-bottom: 0
            }

        .all-communities a {
            margin-bottom: 30px
        }

            .all-communities a span {
                position: relative
            }

                .all-communities a span:before, .all-communities a span:after {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    position: absolute;
                    bottom: -4px;
                    content: '';
                    width: 0;
                    height: 1px;
                    background: var(--theme-colour1)
                }

                .all-communities a span:before {
                    right: 50%
                }

                .all-communities a span:after {
                    left: 50%
                }

            .all-communities a:hover {
                color: var(--theme-colour1)
            }

                .all-communities a:hover span:before, .all-communities a:hover span:after {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    width: 50%
                }

        .all-communities p {
            background: url(../images/all-communities-bg.jpg) no-repeat;
            background-size: 85px;
            background-position: bottom right;
            background-color: #0a5191;
            padding: 35px 45px;
            text-align: center
        }

            .all-communities p strong {
                display: inline-block
            }

    .main-title {
        padding: 15px 35px
    }

    .cropper-wrapper.full-page {
        padding-right: 226px
    }

        .cropper-wrapper.full-page .crop-preview {
            position: absolute;
            top: 0;
            right: 0;
            width: 226px;
            height: 100%;
            display: table
        }

            .cropper-wrapper.full-page .crop-preview .v-align {
                display: table-cell;
                vertical-align: middle
            }

            .cropper-wrapper.full-page .crop-preview img {
                outline: 1px solid var(--white);
                outline-offset: 6px;
                display: block;
                margin: auto
            }

                .cropper-wrapper.full-page .crop-preview img#canvas1 {
                    margin-bottom: 30px;
                    width: 166px;
                    height: 164px
                }

                .cropper-wrapper.full-page .crop-preview img#canvas2 {
                    outline-offset: 3px;
                    width: 49px;
                    height: 49px
                }

        .cropper-wrapper.full-page a:hover {
            background: transparent;
            color: #fdd606;
            border-color: #fdd606
        }

    .profile-of-day img {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

    .profile-of-day:hover {
        background: var(--lightBg)
    }

        .profile-of-day:hover img {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg)
        }

    .misc-content {
        padding: 0px !important
    }

        .misc-content .communities {
            padding: 10px 15px
        }

            .misc-content .communities a.caste, .misc-content .communities a.all {
                font-size: 12px
            }

                .misc-content .communities a.caste span {
                    padding-left: 5px
                }

                    .misc-content .communities a.caste span.icn {
                        padding-left: 0px
                    }

                .misc-content .communities a.all span {
                    padding: 5px 40px 5px 20px
                }

                    .misc-content .communities a.all span:after {
                        top: 5px;
                        right: 15px
                    }

            .misc-content .communities .caste span:before {
                width: 20px;
                height: 20px;
                background-size: 20px
            }

    .go-to .inner {
        background: url(../images/go-to-bg2.png) no-repeat;
        background-size: 95px 120px;
        background-position: bottom right;
        background-color: var(--white)
    }

        .go-to .inner a:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .register {
        width: 480px;
        float: right;
        padding: 15px 45px 60px
    }

        .register .title {
            margin-bottom: 10px
        }

        .register .register-submit {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .register .register-submit:hover {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                background: #fdd606,10%
            }

        .register.bottom-border {
            z-index: 100
        }

            .register.bottom-border:after {
                position: absolute;
                bottom: -5px;
                left: 0;
                width: 100%;
                height: 5px;
                background: var(--theme-colour1);
                content: ''
            }

    .search-strip .branch-locator {
        position: absolute;
        top: 50%;
        right: 0;
        background: url(../images/branch-locator.png) no-repeat;
        display: inline-block;
        cursor: pointer;
        width: 29px;
        height: 171px;
        background-size: 29px 171px;
        margin-top: -95px
    }

    .search-wrapper .search-submit {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .search-wrapper .search-submit:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: var(--theme-colour1),20%
        }

    .search-by a:hover {
        color: #fdd606
    }

    .login {
        height: 100vh
    }

        .login .register {
            width: 100%;
            float: none;
            padding-left: 60px;
            padding-right: 60px
        }

        .login .login-forgot {
            margin-top: 30px
        }

            .login .login-forgot a:hover {
                color: var(--theme-colour1)
            }

            .login .login-forgot span a:hover {
                color: #fdd606,10%
            }

    .register-submit.inverse {
        width: 100%
    }

    .signup-page {
        background: url(../images/signup-bg.jpg) no-repeat;
        background-size: cover;
        background-attachment: fixed
    }

        .signup-page .login {
            width: 480px;
            float: right
        }

            .signup-page .login .register {
                padding-left: 50px;
                padding-right: 50px
            }

            .signup-page .login .title-logo {
                margin: 20px 0
            }

    .check-box .checkbox-caption a:hover {
        color: #fdd606;
        text-decoration: none
    }

    .check-box .checkbox-caption.inverse a:hover {
        color: var(--theme-colour1)
    }

    .search-result p, .search-result em {
        display: inline-block;
        margin: 0
    }

    .search-result em {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        margin-left: 10px
    }

    .search-result:hover {
        background: #dfdede
    }

        .search-result:hover em {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: var(--theme-colour1);
            color: var(--white)
        }

    .no-pl {
        padding-left: 0
    }

    .no-pr {
        padding-right: 0
    }

    .result-container .filter-section {
        float: left;
        width: 255px;
        margin-bottom: 30px;
        margin-bottom: 50px;
        background: #f8f8f8
    }

    .result-container .result-section {
        float: right;
        width: calc(100% - 255px);
        min-height: 102vh
    }

    .result-section {
        padding: 30px 50px
    }

        .result-section .result-title span, .result-section .result-title em {
            position: relative
        }

            .result-section .result-title span:before, .result-section .result-title em:before {
                position: absolute;
                content: ''
            }

        .result-section .result-title span {
            padding-left: 35px
        }

            .result-section .result-title span:before {
                background: url(../images/search-blue.svg) no-repeat;
                position: absolute;
                top: 8px;
                left: 0;
                width: 30px;
                height: 30px;
                background-size: 22px
            }

        .result-section .result-title em {
            padding-right: 30px
        }

            .result-section .result-title em:before {
                background: url(../images/title-down-arrow-blue.svg) no-repeat;
                position: absolute;
                top: 9px;
                right: 0;
                width: 22px;
                height: 22px;
                background-size: 20px
            }

    .result-instance {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        overflow: hidden
    }

        .result-instance p {
            padding-left: 30px;
            position: relative
        }

            .result-instance p:before {
                position: absolute;
                top: 1px;
                left: 0;
                background: url(../images/left-quote.svg) no-repeat;
                width: 20px;
                height: 20px;
                background-size: 20px;
                content: ''
            }

        .result-instance .result-pic {
            margin: 0;
            float: left;
            width: 166px
        }

        .result-instance .result-desc {
            float: right;
            width: calc(100% - 185px)
        }

            .result-instance .result-desc .min-height {
                min-height: 50px
            }

        .result-instance .tags {
            margin-bottom: 20px
        }

        .result-instance:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
            box-shadow: 0 0 5px rgba(0,0,0,0.25)
        }

        .result-instance .connected .short:hover span:before, .result-instance .connected .like:hover span:before, .result-instance .connected .contact:hover span:before, .result-instance .connected .login-to-view:hover span:before {
            -webkit-animation: rotation 2s infinite,linear;
            -moz-animation: rotation 2s infinite,linear;
            animation: rotation 2s infinite,linear
        }

        .result-instance .connected .view:hover, .result-instance .connected .login-to-view:hover {
            border-color: var(--theme-colour1);
            color: var(--theme-colour1);
            background: transparent
        }

    .side-communities a:hover {
        color: var(--theme-colour1);
        background: var(--light2Bg)
    }

    .intimate-join a:hover {
        background: transparent;
        border-color: var(--theme-colour1);
        color: var(--theme-colour1)
    }

    .packages-container {
        background: url(../images/packages-bg.jpg) no-repeat;
        background-size: cover
    }

        .packages-container .title span {
            margin-bottom: 5px
        }

        .packages-container .title strong {
            display: inline-block
        }

    .packages-slider .pack {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1)
    }

        .packages-slider .pack:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
            box-shadow: 0 0 15px rgba(0,0,0,0.5)
        }

        .packages-slider .pack .pack-price {
            padding: 0
        }

            .packages-slider .pack .pack-price span {
                font-size: 38px;
                padding-left: 45px
            }

                .packages-slider .pack .pack-price span:before {
                    top: 10px;
                    width: 32px;
                    height: 32px;
                    background-size: 18px
                }

        .packages-slider .pack .make a:hover {
            background: #e76045
        }

        .packages-slider .pack .items span {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .packages-slider .pack .items span:hover {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                background: #eee
            }

        .packages-slider .pack .items a:hover {
            background: #e76045
        }

        .packages-slider .pack.current-pack .items span:hover {
            background: var(--white)
        }

    .packages-owl {
        padding: 0 50px
    }

        .packages-owl .owl-nav {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 40px;
            margin-top: -20px;
            z-index: -1
        }

            .packages-owl .owl-nav .owl-prev, .packages-owl .owl-nav .owl-next {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
                -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
                box-shadow: 0 0 10px rgba(0,0,0,0.15);
                position: absolute;
                top: 0;
                font-size: 0;
                width: 40px;
                height: 40px
            }

            .packages-owl .owl-nav .owl-prev {
                background: url(../images/owl-prev-pack.svg) no-repeat;
                left: 0;
                background-color: var(--white);
                background-size: 20px;
                background-position: center
            }

            .packages-owl .owl-nav .owl-next {
                background: url(../images/owl-next-pack.svg) no-repeat;
                right: 0;
                background-color: var(--white);
                background-size: 20px;
                background-position: center
            }

    .call {
        margin-top: 30px;
        padding: 0 65px
    }

        .call p {
            background: url(../images/all-communities-bg.jpg) no-repeat;
            background-position: bottom right;
            background-color: #0a5191;
            padding-left: 60px;
            padding-right: 150px
        }

    .default-content {
        padding: 0 50px;
        background: transparent
    }

        .default-content .default-content-inner {
            background: url(../images/pay-bg.jpg) no-repeat;
            background-position: bottom right;
            background-color: var(--white);
            padding: 0 80px
        }

    .pay-form .pay-set:hover, .pay-form input[type="submit"]:hover {
        background: transparent;
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

    .pay-form .pay-reset:hover {
        background: var(--theme-colour1);
        color: var(--white)
    }

    .helper {
        padding: 0;
        line-height: 85px;
        overflow: visible;
        font: 400 30px "Rubik";
        background: var(--theme-colour2);
        color: #fdd606
    }

        .helper [class^='col-']:nth-child(1) {
            background: var(--theme-colour1);
            padding-left: 60px
        }

        .helper [class^='col-']:nth-child(2) {
            background: var(--lightBg)
        }

            .helper [class^='col-']:nth-child(2):before {
                position: absolute;
                top: 0;
                left: -51px;
                content: '';
                width: 53px;
                height: 85px;
                background-size: 53px 85px;
                clip-path: polygon(100% 0, 0% 100%, 100% 100%);
                background-color: var(--lightBg)
            }

        .helper em, .helper em a {
            color: var(--theme-colour1)
        }

        .helper span {
            padding-left: 150px;
            position: relative
        }

            .helper span:before {
                position: absolute;
                top: -40px;
                left: 0;
                background: url(../images/helper-before.png) no-repeat;
                content: '';
                width: 123px;
                height: 123px;
                background-size: 123px 123px
            }

    .exclusive {
        margin-top: 20px
    }

        .exclusive a:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .confirmation-container {
        background: url(../images/confirmation-bg.jpg) no-repeat;
        background-size: cover
    }

        .confirmation-container .title {
            margin-bottom: 50px
        }

        .confirmation-container .inner {
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1);
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            width: 800px;
            margin: auto;
            padding: 45px 45px 250px;
            background: var(--white);
            position: relative
        }

            .confirmation-container .inner:after {
                background: url(../images/confirmation-logo.jpg) no-repeat;
                position: absolute;
                bottom: 0;
                left: 50%;
                content: '';
                width: 360px;
                height: 167px;
                background-size: 360px 167px;
                margin-left: -180px
            }

        .confirmation-container .c-details span, .confirmation-container .c-details em {
            font-size: 16px
        }

        .confirmation-container button:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .payment-container {
        padding: 0 50px;
        background: transparent
    }

        .payment-container .wrapper {
            background: url(../images/success-bg.jpg) no-repeat;
            background-repeat: repeat
        }

        .payment-container .inner {
            padding-left: 50px;
            padding-right: 50px;
            text-align: center
        }

            .payment-container .inner p {
                font-size: 28px
            }

                .payment-container .inner p strong {
                    font-size: 34px
                }

            .payment-container .inner em {
                display: inline-block;
                vertical-align: middle
            }

                .payment-container .inner em:nth-of-type(1) {
                    margin-right: 30px
                }

            .payment-container .inner .pay-amount span {
                display: inline-block;
                vertical-align: middle
            }

                .payment-container .inner .pay-amount span:nth-child(1) {
                    border-bottom: none;
                    border-right: 1px solid var(--white);
                    padding-right: 15px;
                    margin-right: 15px
                }

                .payment-container .inner .pay-amount span:nth-child(2) {
                    font: 700 45px "Rubik",sans-serif
                }

                .payment-container .inner .pay-amount span i {
                    padding-left: 35px
                }

                    .payment-container .inner .pay-amount span i:before {
                        top: 15px;
                        width: 30px;
                        height: 30px;
                        background-size: 30px
                    }

    .ignored-container {
        padding: 0 50px;
        background: transparent
    }

        .ignored-container .inner {
            padding: 0 50px 30px;
            background: var(--white)
        }

        .ignored-container .message-content .minor-details span {
            float: none;
            display: block
        }

    .remove-ignore span:before {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

    .remove-ignore:hover {
        background: var(--theme-colour1);
        color: var(--white)
    }

        .remove-ignore:hover span:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            transform: rotate(135deg)
        }

    .upgrade-account a {
        margin-bottom: 20px
    }

        .upgrade-account a:hover {
            background: var(--theme-colour1);
            color: var(--white);
            border-color: #fdd606
        }

    .message-popup .contact-section, .message-popup .horoscope-section {
        width: 1000px
    }

    .horoscope-section.extend {
        width: 1000px
    }

    .upgrade-pack .upgrade-title {
        margin-bottom: 20px
    }

        .upgrade-pack .upgrade-title em {
            font-size: 16px;
            margin-bottom: 20px
        }

            .upgrade-pack .upgrade-title em i {
                padding: 0 45px
            }

        .upgrade-pack .upgrade-title span {
            background: url(../images/upgrade-after.jpg) no-repeat;
            font-size: 28px;
            padding-bottom: 30px;
            background-position: center bottom;
            background-size: 421px 9px
        }

    .upgrade-pack .up {
        font-size: 18px
    }

        .upgrade-pack .up span {
            font-size: 36px;
            margin-bottom: 0
        }

    .upgrade-pack a {
        font: 700 16px "Rubik",sans-serif;
        margin-top: 5px
    }

        .upgrade-pack a:hover {
            background: transparent;
            color: #fdd606;
            border-color: #fdd606
        }

    .editor .editor-submit:hover {
        background: transparent;
        color: #fdd606;
        border-color: #fdd606
    }

    .back-dash:hover {
        background: transparent;
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

    .fb-form .title span, .fb-form .title span strong {
        font-size: 28px
    }

    .fb-form .title em {
        font-size: 22px;
        margin: 0 0 10px 0
    }

    .fb-form .title p {
        font-size: 14px;
        padding: 0 15px;
        margin-bottom: 0
    }

    .fb-form #fb-submit {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        padding: 0;
        height: 50px;
        line-height: 50px;
        outline: 1px solid var(--theme-colour1);
        outline-offset: -6px;
        background: transparent;
        color: var(--theme-colour1);
        font-size: 20px
    }

        .fb-form #fb-submit em {
            position: absolute;
            width: 100%;
            height: 100%;
            display: block
        }

            .fb-form #fb-submit em.one:before, .fb-form #fb-submit em.one:after, .fb-form #fb-submit em.two:before, .fb-form #fb-submit em.two:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                position: absolute;
                content: '';
                background: var(--theme-colour1)
            }

            .fb-form #fb-submit em.one:before, .fb-form #fb-submit em.two:before {
                height: 30px;
                width: 1px
            }

            .fb-form #fb-submit em.one:after, .fb-form #fb-submit em.two:after {
                width: 30px;
                height: 1px
            }

            .fb-form #fb-submit em.one:before, .fb-form #fb-submit em.one:after {
                top: 0;
                left: 0
            }

            .fb-form #fb-submit em.two:before, .fb-form #fb-submit em.two:after {
                bottom: 0;
                right: 0
            }

        .fb-form #fb-submit:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: #fdd606;
            color: var(--theme-colour1)
        }

            .fb-form #fb-submit:hover em.one:before, .fb-form #fb-submit:hover em.one:after, .fb-form #fb-submit:hover em.two:before, .fb-form #fb-submit:hover em.two:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            .fb-form #fb-submit:hover em.one:before, .fb-form #fb-submit:hover em.two:before {
                height: 100%
            }

            .fb-form #fb-submit:hover em.one:after, .fb-form #fb-submit:hover em.two:after {
                width: 100%
            }

    .logout-container {
        padding: 50px
    }

    .upgrade-now p {
        text-align: left
    }

    .upgrade-now a:hover {
        background: transparent;
        border-color: #e76045
    }

    .advanced-p {
        padding: 5px 25% 15px
    }

    .flex-1200 {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

        .flex-1200 i {
            margin-bottom: 0
        }

        .flex-1200 .gender-switch, .flex-1200 .flex-992 {
            width: calc(100% - 130px)
        }

    .adv-relative .pick-dates {
        width: calc(100% - 100px)
    }

    .adv-relative i {
        white-space: nowrap
    }

    .adv-save.inverse {
        margin-top: 20px;
        margin-bottom: 20px
    }

        .adv-save.inverse .flex-1200 {
            justify-content: flex-start
        }

        .adv-save.inverse a:not(.save-search) {
            margin-left: 15px
        }

    .adv-save a:hover {
        background: transparent;
        border-color: var(--theme-colour1)
    }

    .adv-save i, .adv-save input[type="text"], .adv-save a.save-search, .adv-save p {
        margin: 0
    }

    .adv-save input[type="text"] {
        width: calc(100% - 250px)
    }

    .saved-searches {
        width: 100%
    }

        .saved-searches .ss-viewall:hover {
            background: transparent;
            color: #fdd606;
            border-color: #fdd606
        }

    .advance-submit {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .advance-submit:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: #fdd606;
            color: var(--theme-colour1)
        }

    .filter-section {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        display: block;
        overflow-y: auto;
        background: var(--white);
        z-index: 10
    }

        .filter-section .title {
            font: 400 20px "Rubik",sans-serif;
            color: var(--theme-colour1);
            background: #f6f6f6;
            border-bottom: 1px solid #ededed;
            text-transform: uppercase;
            padding: 10px 0;
            display: block
        }

            .filter-section .title span {
                position: relative;
                padding-left: 30px;
                margin-left: 20px
            }

                .filter-section .title span:before {
                    background: url(../images/filter-title.svg) no-repeat;
                    position: absolute;
                    top: 3px;
                    left: 0;
                    content: '';
                    width: 20px;
                    height: 20px;
                    background-size: 20px
                }

        .filter-section .filter-accordion {
            width: 100%
        }

            .filter-section .filter-accordion .panel:last-of-type {
                margin-bottom: 200px
            }

        .filter-section .scroll-wrapper > .scroll-content {
            max-height: 100vh
        }

        .filter-section .scrollbar-inner > .scroll-element .scroll-bar {
            background: #d0d0d0
        }

        .filter-section.sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0
        }

            .filter-section.sticky .scroll-wrapper {
                height: 100%
            }

                .filter-section.sticky .scroll-wrapper > .scroll-content {
                    max-height: 100vh
                }

    .more-filters {
        position: absolute
    }

        .more-filters .inner-title:last-of-type {
            margin-bottom: 200px
        }

        .more-filters .scrollbar-inner {
            height: auto
        }

    .hype, .royale {
        height: 180px
    }

    .hype {
        background: url(../images/hype-bg.png) no-repeat;
        background-position: center left;
        padding: 0 30px 0 240px;
        position: relative;
        background-color: #004e93
    }

        .hype:after {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: url(../images/couple-of-rings.svg) no-repeat;
            content: '';
            width: 40px;
            height: 40px;
            background-size: 40px
        }

    .messages-contact div.blocked {
        overflow: hidden;
        margin-bottom: 15px
    }

    .messages-contact span, .messages-contact p {
        display: inline-block;
        margin: 0
    }

    .messages-contact strong {
        text-transform: uppercase
    }

    .messages-contact span {
        text-decoration: none;
        width: 180px;
        float: left
    }

        .messages-contact span:after {
            content: ':';
            float: right
        }

    .messages-contact p {
        width: calc(100% - 200px);
        float: right
    }

    .apply-now {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        padding: 20px 30px 55px;
        position: relative
    }

        .apply-now input[type="submit"] {
            position: absolute;
            bottom: 0;
            left: 0
        }

            .apply-now input[type="submit"]:hover {
                background: var(--theme-colour2);
                color: var(--white)
            }

        .apply-now.inverse {
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            box-shadow: 0 0 10px rgba(0,0,0,0.15);
            padding-bottom: 0
        }

            .apply-now.inverse .more {
                margin-left: -30px;
                margin-right: -30px
            }

            .apply-now.inverse input[type="submit"] {
                position: relative;
                bottom: auto;
                left: auto
            }

            .apply-now.inverse a {
                color: var(--theme-colour1)
            }

                .apply-now.inverse a:hover {
                    background: var(--theme-colour1);
                    color: var(--white)
                }

            .apply-now.inverse.solo {
                height: 100%;
                margin-bottom: 0
            }

    .site-tables table.first tr th {
        font-size: 18px
    }

    .site-tables table.first tr td {
        font-size: 16px
    }

    .collage {
        padding-right: 430px;
        position: relative
    }

        .collage:after {
            background: url(../images/services-right.png) no-repeat;
            position: absolute;
            top: 30px;
            right: -15px;
            content: '';
            width: 407px;
            height: 380px;
            background-size: 407px 380px
        }

    .services-content {
        background: url(../images/services-content.png) no-repeat;
        background-position: 100% 100px
    }

        .services-content p {
            margin-bottom: 20px
        }

    .here {
        background: url(../images/here-bg.png) no-repeat;
        background-repeat: repeat;
        background-color: var(--theme-colour1);
        padding: 40px 40px 60px
    }

        .here .here-title {
            padding-left: 150px;
            position: relative
        }

            .here .here-title:before {
                position: absolute;
                top: 6px;
                left: 0;
                content: '';
                width: 130px;
                height: 8px;
                background: var(--theme-colour1)
            }

            .here .here-title.inverse {
                padding-left: 80px
            }

                .here .here-title.inverse:before {
                    width: 60px
                }

        .here .mail-call {
            padding-left: 80px;
            position: relative;
            border-bottom: 1px solid #696969;
            padding-bottom: 10px
        }

            .here .mail-call:before {
                position: absolute;
                bottom: -1px;
                left: -3px;
                content: '';
                width: 65px;
                height: 65px
            }

            .here .mail-call.mail:before {
                background: url(../images/mail-multi.svg) no-repeat;
                background-size: 65px
            }

            .here .mail-call.call-us:before {
                background: url(../images/call-multi.svg) no-repeat;
                background-size: 65px
            }

        .here.inverse {
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            box-shadow: 0 0 10px rgba(0,0,0,0.15)
        }

    .career-apply {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .career-apply p {
            height: 72px;
            text-overflow: ellipsis;
            overflow: hidden
        }

        .career-apply .title {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

    .load-more a:hover {
        background: transparent;
        border-color: var(--theme-colour1);
        color: var(--theme-colour1)
    }

    .searching-partner {
        margin: 50px 0 0;
        width: 100%
    }

    .radius-link:hover {
        background: transparent;
        color: #fdd606;
        border-color: #fdd606
    }

    .file-ancestor .preview, .file-ancestor .add-more {
        width: calc((100% / 5) - 5px);
        margin-right: 5px
    }

    .file-ancestor .preview {
        width: 100% !important
    }

        .file-ancestor .preview .delete {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .file-ancestor .preview .delete:hover {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                background-color: var(--theme-colour1),20%;
                border-color: var(--theme-colour1)
            }

    .discount {
        background: var(--theme-colour1),5%;
        padding: 15px 45px;
        overflow: hidden
    }

        .discount .content {
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            background: var(--theme-colour1),10%;
            padding: 5px 160px;
            text-align: center
        }

            .discount .content p {
                margin: 22px 15px;
                font-size: 22px;
                position: relative;
                padding-left: 150px
            }

                .discount .content p span {
                    position: absolute;
                    top: -30px;
                    left: 0;
                    font-size: 65px
                }

            .discount .content .now {
                position: absolute;
                top: 3px;
                right: 6px
            }

                .discount .content .now:hover {
                    background: transparent;
                    border-color: #fdd606;
                    color: var(--white)
                }

        .discount a#close-discount {
            background-color: transparent;
            right: -40px;
            top: -12px
        }

            .discount a#close-discount:hover {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                transform: rotate(90deg)
            }

    .contact-container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch
    }

        .contact-container [class^="col-"].lefty {
            padding-right: 0;
            float: none
        }

        .contact-container [class^="col-"].righty {
            padding-left: 0;
            float: none
        }

        .contact-container .relative {
            margin-bottom: 20px
        }

        .contact-container .bottom-adjust {
            margin-bottom: 30px
        }

    .map-container .map-title {
        padding: 30px 30px 30px 130px;
        position: relative;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

        .map-container .map-title:before {
            background: url(../images/marker-blue.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100px;
            height: 100%;
            background-color: #fdd606;
            background-size: 40px;
            background-position: center
        }

        .map-container .map-title .desc {
            margin-bottom: 0;
            width: 150px
        }

        .map-container .map-title .map-relative {
            width: calc(100% - 180px)
        }

    .default-popup .default-section, .default-popup2 .default-section {
        width: 500px
    }

        .default-popup .default-section.verify-mobile, .default-popup2 .default-section.verify-mobile {
            padding-left: 150px;
            position: relative
        }

            .default-popup .default-section.verify-mobile:before, .default-popup2 .default-section.verify-mobile:before {
                position: absolute;
                top: 50%;
                left: 30px;
                background: url(../images/mobile-otp.svg) no-repeat;
                content: '';
                width: 70px;
                height: 70px;
                background-size: 70px;
                margin-top: -35px
            }

    .verify .inner .add-hobby {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 15px
    }

    .verification .inner a:hover, .verification .inner button:hover {
        border-color: #fdd606;
        background: transparent;
        color: #fdd606
    }

    .ad-location .location-title {
        padding-left: 80px;
        position: relative;
        text-align: left
    }

        .ad-location .location-title:before {
            position: absolute;
            top: 50%;
            left: 15px;
            background: url(../images/intimate-marker2.jpg) no-repeat;
            content: '';
            width: 59px;
            height: 67px;
            background-size: 59px 67px;
            margin-top: -33px
        }

    .ad-location a:hover {
        background: #fdd606;
        color: var(--theme-colour1);
        border-color: #fdd606
    }

    .message-item {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.06);
        -moz-box-shadow: 0 0 4px rgba(0,0,0,0.06);
        box-shadow: 0 0 4px rgba(0,0,0,0.06)
    }

        .message-item:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            box-shadow: 0 0 10px rgba(0,0,0,0.5)
        }
}

@media only screen and (min-width: 1366px) {
    .story-relative .profile-absolute .profile-of-day {
        min-height: 0
    }

        .story-relative .profile-absolute .profile-of-day img {
            margin-bottom: 15px
        }

    .message-item {
        overflow: hidden;
        padding: 25px
    }

        .message-item .message-pic {
            width: 60px;
            float: left
        }

            .message-item .message-pic .chat-now {
                display: block;
                width: calc(100% - 10px);
                margin: 0
            }

        .message-item .message-content {
            width: calc(100% - 65px);
            float: right
        }
}

.input-validation-error {
    border-bottom: 1px solid red
}

.CmnValNo .input-validation-error {
    border-bottom: 1px solid #fff !important
}

.highs p {
    text-align: left !important;
    line-height: 25px !important
}

.misc-content p {
    text-align: left !important;
    line-height: 25px !important
}

.default-container p {
    text-align: left !important;
    line-height: 25px !important
}

@media only screen and (min-width: 480px) {
    .update-item {
        padding-right: 130px
    }

        .update-item .closed {
            right: 35px
        }

        .update-item .timestamp {
            font: 400 12px "Rubik",sans-serif;
            position: absolute;
            bottom: 14px;
            right: 35px;
            color: #8e8e8e;
            display: block
        }

    .latest-updates .action {
        display: inline-block;
        padding-right: 35px;
        position: relative;
        margin: 6px 0 0
    }

        .latest-updates .action:after {
            position: absolute;
            top: -2px;
            right: 0;
            content: '';
            width: 22px;
            height: 22px
        }

        .latest-updates .action.photo-updated:after {
            background: url(../images/photo-updated.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.add-photo:after {
            background: url(../images/add-photo.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.message:after {
            background: url(../images/message.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.contact-requested:after {
            background: url(../images/contact-requested.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.wedding-rings:after {
            background: url(../images/wedding-rings.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.shortlisted:after {
            background: url(../images/shortlisted-updates.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.send-request:after {
            background: url(../images/send-request.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.liked:after {
            background: url(../images/liked.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.viewed-profile:after {
            background: url(../images/viewed-profile.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.partner-prefer:after {
            background: url(../images/partner-prefer.svg) no-repeat;
            background-size: 22px
        }

        .latest-updates .action.none:after {
            display: none
        }

    .message-content .head .miscellaneous span {
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 10px
    }

    .message-content .minor-details span {
        float: left;
        margin-right: 15px
    }

        .message-content .minor-details span:last-child {
            margin-bottom: 8px
        }

    .portfolio-details span, .portfolio-details em {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 15px
    }

    .portfolio-details span {
        width: 175px
    }

        .portfolio-details span:after {
            content: '-';
            padding-right: 50px;
            float: right
        }

    .portfolio-details em {
        width: calc(100% - 200px)
    }

    .add-photo-container {
        padding: 0 15px;
        background: var(--white);
        overflow: hidden
    }

    .avoid {
        background: var(--white)
    }

    .service-table tr th, .service-table tr td {
        font-size: 14px
    }
}

@media only screen and (min-width: 640px) {
    .flex-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start
    }

        .flex-wrapper .children {
            margin: 0 15px 20px 0
        }

    .ignored-container .message-content .head .miscellaneous .view-pro {
        display: inline-block;
        margin-left: 10px
    }

    .message-content .interested a, .message-content .interested button, .message-content .interested em {
        display: inline-block;
        vertical-align: middle;
        margin: 0 10px 0 0;
        padding: 4px 20px;
        width: auto
    }

    .message-content .interested em {
        margin-left: 10px
    }

        .message-content .interested em:before {
            top: 6px;
            left: 2px
        }

    .locator-cell {
        position: relative
    }

        .locator-cell .locator-wrapper {
            position: absolute;
            bottom: 45px;
            left: 25%;
            top: auto;
            width: 400px;
            margin: 0 0 0 -200px
        }

            .locator-cell .locator-wrapper:after {
                position: absolute;
                bottom: -6px;
                left: 50%;
                margin-left: -6px;
                content: '';
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 6px solid var(--white)
            }

    .edit-section i.head-name.inline {
        display: inline-block;
        margin-right: 15px
    }
}

@media only screen and (max-width: 768px) {
    .p-pnsl-info-wrap .p-table tr td {
        word-break: normal
    }
}

@media only screen and (min-width: 768px) {
    .seperator [class^="col-"] {
        margin-bottom: 15px
    }

        .seperator [class^="col-"]:first-child {
            border-right: 1px solid #e1e1e1
        }

    .message-content .head .names .user, .message-content .head .names .icons {
        display: inline-block;
        vertical-align: middle;
        margin: 0
    }

    .message-content .head .names .user {
        font-size: 16px
    }

    .message-content .head .names .icons a.contact {
        margin-left: 10px
    }

    .deactivation {
        padding: 25px 30px 35px
    }

        .deactivation .select-holder {
            width: 350px
        }

    .add-title {
        margin-bottom: 30px
    }

        .add-title .placer {
            position: absolute;
            top: -10px;
            right: 15px
        }

        .add-title em {
            display: inline-block
        }

            .add-title em:first-of-type {
                margin-right: 15px
            }

    .white-bg {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: stretch;
        background: var(--white)
    }

        .white-bg [class^='col-'] {
            margin: 30px 0 20px
        }

            .white-bg [class^='col-']:nth-of-type(1) {
                padding-top: 0
            }

    .logout-block {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap
    }

        .logout-block .matches {
            width: calc((100% / 4) - 15px);
            margin-right: 15px
        }

            .logout-block .matches img {
                width: 100%
            }

    .history .history-instance a, .history .history-instance button {
        display: inline-block;
        margin: 0 15px 0 0
    }

    .ignore-this {
        display: inline-block;
        margin: 0 0 0 15px
    }
}

@media only screen and (max-width: 776px) {
    .p-pad {
        padding: 0 20px
    }

    .p-profile-wrap .p-head-wrap .p-hd {
        font: 400 18px "Rubik",sans-serif
    }

        .p-profile-wrap .p-head-wrap .p-hd:after {
            display: none
        }

    .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap {
        margin-top: -10px;
        right: 5px
    }

        .p-profile-wrap .p-details-sec .p-dtls-wrap .p-btn-wrap .p-btn-itm {
            width: 20px;
            height: 20px;
            background-size: 10px !important
        }

    .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap {
        padding-left: 0px;
        margin-top: 40px
    }

        .p-profile-wrap .p-details-sec .p-dtls-wrap .p-progress-wrap:after {
            top: -30px
        }

    .p-partner-comparison-wrap .p-compare-wrap {
        min-height: 150px
    }
}

@media only screen and (max-width: 991px) {
    .p-profile-wrap .p-details-sec .p-dtls-wrap.recent {
        display: block;
        max-width: 100%
    }

    .p-profile-wrap .p-details-sec .p-img-sec {
        display: inline;
        float: none
    }
}

@media only screen and (min-width: 992px) {
    .left-panel, .right-panel {
        padding: 0;
        margin: 0
    }

    .complete-wrapper {
        overflow: hidden;
        padding-right: 220px;
        position: relative
    }

        .complete-wrapper .complete-profile, .complete-wrapper .complete-suggestions {
            overflow: hidden
        }

        .complete-wrapper .percentage {
            position: absolute;
            top: 50%;
            right: 45px;
            margin: -70px 0 0 -70px;
            padding: 5px;
            margin-bottom: 0
        }

            .complete-wrapper .percentage .c100 {
                margin: 0
            }

    .complete-owl {
        margin-bottom: 0
    }

        .complete-owl .default-wrapper input[type="text"] {
            width: calc(100% - 110px)
        }

        .complete-owl .default-wrapper input[type="submit"] {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 90px
        }

        .complete-owl .default-wrapper .second-dropdown {
            width: calc(100% - 110px)
        }

        .complete-owl .default-wrapper.add-height select {
            width: calc(100% - 160px)
        }

        .complete-owl .default-wrapper.add-height .inner:after {
            width: calc(100% - 100px)
        }

    .updates-title .blue-title, .updates-title .last-updated {
        display: inline-block;
        vertical-align: middle;
        margin: 0
    }

    .updates-title .last-updated {
        float: right;
        padding-top: 3px;
        margin-right: 35px
    }

    .update-item .img {
        width: 60px;
        float: left
    }

    .update-item .desc {
        width: calc(100% - 60px);
        float: right
    }

    .update-item .who {
        margin: 0 0 5px 0
    }

    .basic-owl {
        padding-top: 0
    }

        .basic-owl .owl-nav {
            top: -35px
        }

    .latest-updates .update-item img, .latest-updates .update-item .desc {
        float: left
    }

    .latest-updates .update-item .desc {
        width: calc(100% - 85px);
        margin-left: 20px
    }

    .checkout-profile {
        padding: 15px 110px 15px 65px
    }

        .checkout-profile img {
            left: 15px;
            margin-left: 0
        }

        .checkout-profile span, .checkout-profile strong, .checkout-profile p {
            padding-left: 15px;
            margin-bottom: 0
        }

        .checkout-profile strong {
            margin: 2px 0
        }

        .checkout-profile .ticks {
            width: 90px;
            bottom: auto;
            top: 50%;
            margin-top: -15px;
            right: 15px
        }

    .go-premium {
        margin-bottom: 0;
        overflow: visible
    }

    .tabs .inner {
        padding-bottom: 15px
    }

    .delete-wrapper .material {
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
        box-shadow: 0 0 5px rgba(0,0,0,0.25);
        margin-top: 80px;
        padding: 0 30px 30px
    }

    .delete-wrapper .delete-tabs {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 30px;
        padding: 0 30px
    }

        .delete-wrapper .delete-tabs a {
            display: inline-block;
            text-align: center;
            width: 100px;
            height: 100px;
            padding-top: 70px;
            margin: 0;
            z-index: 10
        }

            .delete-wrapper .delete-tabs a .icon {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                position: absolute;
                top: -50px;
                left: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                display: inline-block;
                width: 100px;
                height: 100px;
                background: var(--theme-colour1);
                margin-left: -50px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: none
            }

                .delete-wrapper .delete-tabs a .icon:before {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
                    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
                    box-shadow: 0 0 5px rgba(0,0,0,0.25);
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    -webkit-transform: scale(1.12);
                    -moz-transform: scale(1.12);
                    transform: scale(1.12);
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    content: '';
                    background: var(--white);
                    z-index: -2
                }

                .delete-wrapper .delete-tabs a .icon svg path {
                    fill: var(--white)
                }

            .delete-wrapper .delete-tabs a:before {
                position: absolute;
                top: 0;
                left: 50%;
                content: '';
                width: 120px;
                height: 70px;
                background: var(--white);
                margin-left: -60px;
                z-index: -1
            }

            .delete-wrapper .delete-tabs a:nth-child(1) .icon {
                background: url(../images/delete1.svg) no-repeat;
                background-position: center;
                background-color: var(--theme-colour1);
                background-size: 36px
            }

            .delete-wrapper .delete-tabs a:nth-child(2) .icon {
                background: url(../images/delete2.svg) no-repeat;
                background-position: center;
                background-color: var(--theme-colour1);
                background-size: 36px
            }

            .delete-wrapper .delete-tabs a:nth-child(3) .icon {
                background: url(../images/delete3.svg) no-repeat;
                background-position: center;
                background-color: var(--theme-colour1);
                background-size: 30px
            }

            .delete-wrapper .delete-tabs a:nth-child(4) .icon {
                background: url(../images/delete4.svg) no-repeat;
                background-position: center;
                background-color: var(--theme-colour1);
                background-size: 30px
            }

            .delete-wrapper .delete-tabs a em {
                display: block
            }

                .delete-wrapper .delete-tabs a em:first-letter {
                    text-transform: uppercase
                }

            .delete-wrapper .delete-tabs a.active {
                padding-left: 0
            }

                .delete-wrapper .delete-tabs a.active:before {
                    display: none
                }

                .delete-wrapper .delete-tabs a.active .icon {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
                    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
                    box-shadow: 0 0 5px rgba(0,0,0,0.25);
                    background: var(--white)
                }

                    .delete-wrapper .delete-tabs a.active .icon:before {
                        -webkit-transition: all .4s ease-in;
                        -moz-transition: all .4s ease-in;
                        transition: all .4s ease-in;
                        box-shadow: none;
                        background: -moz-linear-gradient(top, var(--theme-colour1) 0%, var(--theme-colour1) 50%, rgba(255,255,255,0.95) 50%);
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--theme-colour1)), color-stop(50%, var(--theme-colour1)), color-stop(50%, rgba(255,255,255,0.95)));
                        background: -webkit-linear-gradient(top, var(--theme-colour1) 0%, var(--theme-colour1) 50%, rgba(255,255,255,0.95) 50%);
                        background: -o-linear-gradient(top, var(--theme-colour1) 0%, var(--theme-colour1) 50%, rgba(255,255,255,0.95) 50%);
                        background: -ms-linear-gradient(top, var(--theme-colour1) 0%, var(--theme-colour1) 50%, rgba(255,255,255,0.95) 50%);
                        background: linear-gradient(to bottom, var(--theme-colour1) 0%, var(--theme-colour1) 50%, rgba(255,255,255,0.95) 50%)
                    }

                    .delete-wrapper .delete-tabs a.active .icon svg path {
                        fill: var(--theme-colour1)
                    }

                .delete-wrapper .delete-tabs a.active:after {
                    display: none
                }

    .complete-dropdowns {
        position: relative
    }

        .complete-dropdowns .select-holders {
            width: calc(100% - 110px)
        }

        .complete-dropdowns input[type="submit"] {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 90px
        }

    .avoid {
        flex-direction: row;
        justify-content: space-arpound
    }

        .avoid .avoid-flex {
            margin: 0 30px
        }

            .avoid .avoid-flex.info {
                padding-top: 25px
            }

    .logout-title {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

        .logout-title span, .logout-title a {
            display: inline-block
        }

        .logout-title a {
            margin-top: 8px
        }

    .bg-selectors {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center
    }

        .bg-selectors span {
            margin: 0 30px
        }

    .upgrade-dashboard, .packages-dashboard {
        margin-bottom: 0;
        padding: 50px 30px
    }
}

@media screen and (max-width: 1199px) {
    .p-contact-details {
        display: none !important
    }
}

@media only screen and (min-width: 1200px) {
    .mobile {
        display: none
    }

    .desktop {
        display: block
    }

    a, input[type="submit"], button {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        a:hover, input[type="submit"]:hover, button:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

    .totop {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: url(../images/totop.svg) no-repeat;
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        position: fixed;
        right: 25px;
        bottom: 25px;
        width: 30px;
        height: 30px;
        background-color: var(--theme-colour1);
        background-size: 30px;
        z-index: 1000;
        opacity: 0.45;
        cursor: pointer
    }

        .totop:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            opacity: 0.5
        }

    header {
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
        -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
        box-shadow: 0 0 5px rgba(0,0,0,0.25);
        padding: 0 50px;
        z-index: 1000
    }

        header .clearfix-hack {
            display: none
        }

        header #hamburger {
            display: none
        }

        header .logo img {
            height: auto
        }

        header .notification-profile {
            margin: 0
        }

        header .menus {
            display: block;
            float: left;
            width: calc(100% - 250px);
            height: 60px;
            padding: 0 20px;
            background: var(--theme-colour1)
        }

            header .menus .links, header .menus .has-dropdown {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                text-transform: uppercase;
                display: inline-block;
                vertical-align: middle;
                height: 60px;
                padding: 20px;
                position: relative
            }

                header .menus .links:after {
                    -webkit-transition: all .2s ease-in;
                    -moz-transition: all .2s ease-in;
                    transition: all .2s ease-in;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    content: '';
                    width: 40px;
                    height: 0;
                    background: #fdd606;
                    margin-left: -20px
                }

                header .menus .links:hover:after {
                    -webkit-transition: all .2s ease-in;
                    -moz-transition: all .2s ease-in;
                    transition: all .2s ease-in;
                    height: 4px
                }

                header .menus .has-dropdown span {
                    padding: 0;
                    cursor: default
                }

                header .menus .has-dropdown .inner {
                    position: absolute;
                    top: 60px;
                    left: 0;
                    padding: 0;
                    min-width: 200px;
                    background: var(--theme-colour1),3%;
                    border-top: 1px solid #fdd606
                }

                    header .menus .has-dropdown .inner .links {
                        display: block;
                        height: auto;
                        padding: 10px 15px;
                        position: relative;
                        z-index: 10
                    }

                        header .menus .has-dropdown .inner .links:before {
                            -webkit-transition: all .4s ease-in;
                            -moz-transition: all .4s ease-in;
                            transition: all .4s ease-in;
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: '';
                            width: 0;
                            height: 100%;
                            background: var(--theme-colour1);
                            z-index: -1
                        }

                        header .menus .has-dropdown .inner .links:after {
                            display: none
                        }

                        header .menus .has-dropdown .inner .links:hover:before {
                            -webkit-transition: all .3s ease-in;
                            -moz-transition: all .3s ease-in;
                            transition: all .3s ease-in;
                            width: 100%
                        }

                header .menus .has-dropdown:hover {
                    background: var(--theme-colour1),3%
                }

                    header .menus .has-dropdown:hover .inner {
                        display: block
                    }

        header .dropdown-icon em {
            padding: 0
        }

            header .dropdown-icon em:after {
                display: none
            }

        header .notification, header .profile {
            width: 60px;
            height: 60px
        }

            header .notification .icon:before, header .profile .icon:before {
                position: absolute;
                bottom: 0;
                left: 50%;
                content: '';
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid rgba(255,255,255,0.5);
                margin-left: -6px;
                display: none
            }

            header .notification .icon[data-open="1"]:before, header .profile .icon[data-open="1"]:before {
                display: block
            }

        header .notification {
            margin-right: 0
        }

            header .notification .icon:after {
                top: 12px;
                right: 15px
            }

        header .profile {
            background: #fdd606;
            margin: 0
        }

            header .profile .icon {
                background: url(../images/dashboard-user-blue.svg) no-repeat;
                background-size: 20px;
                background-position: 10px center;
                padding-right: 15px
            }

                header .profile .icon:before {
                    border-bottom: 6px solid rgba(0,0,0,0.45)
                }

                header .profile .icon:after {
                    position: absolute;
                    top: 26px;
                    right: 10px;
                    content: '';
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-top: 6px solid var(--theme-colour1)
                }

        header .notification-drawer, header .profile-drawer {
            position: absolute;
            top: 60px;
            width: 400px
        }

        header .notification-drawer {
            right: 110px;
            padding: 0
        }

            header .notification-drawer a:hover {
                background: var(--theme-colour1),10%
            }

        header .profile-drawer {
            right: 50px;
            padding: 5px 20px 0
        }

            header .profile-drawer .name span {
                font: 700 15px "Rubik",sans-serif
            }

            header .profile-drawer .account a:hover {
                color: var(--white)
            }

            header .profile-drawer .profile-links [class^="col-"] {
                padding-top: 15px;
                padding-bottom: 15px
            }

                header .profile-drawer .profile-links [class^="col-"]:first-child {
                    margin-top: 0
                }

                    header .profile-drawer .profile-links [class^="col-"]:first-child:after {
                        position: absolute;
                        top: 0;
                        right: 15px;
                        content: '';
                        width: 1px;
                        height: 100%;
                        background: #578cbc
                    }

                header .profile-drawer .profile-links [class^="col-"] a:before {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in
                }

                header .profile-drawer .profile-links [class^="col-"] a:hover {
                    color: #fdd606
                }

                    header .profile-drawer .profile-links [class^="col-"] a:hover:before {
                        -webkit-transition: all .4s ease-in;
                        -moz-transition: all .4s ease-in;
                        transition: all .4s ease-in;
                        -webkit-transform: rotateY(180deg);
                        -moz-transform: rotateY(180deg);
                        transform: rotateY(180deg)
                    }

    .person .inner span {
        font: 400 14px "Rubik",sans-serif;
        margin-bottom: 5px
    }

    .person a.link:hover {
        background: var(--theme-colour1),10%
    }

        .person a.link:hover:after {
            -webkitanimation: arrow 1.5s infinite linear;
            -moz-animation: arrow 1.5s infinite linear;
            animation: arrow 1.5s infinite linear
        }

    @-webkit-keyframes arrow {
        0% {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
            right: 15px
        }

        50% {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            transform: rotateX(180deg);
            right: 30px
        }

        100% {
            -webkit-transform: rotateX(360deg);
            -moz-transform: rotateX(360deg);
            transform: rotateX(360deg);
            right: 15px
        }
    }

    @-moz-keyframes arrow {
        0% {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
            right: 15px
        }

        50% {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            transform: rotateX(180deg);
            right: 30px
        }

        100% {
            -webkit-transform: rotateX(360deg);
            -moz-transform: rotateX(360deg);
            transform: rotateX(360deg);
            right: 15px
        }
    }

    @keyframes arrow {
        0% {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
            right: 15px
        }

        50% {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            transform: rotateX(180deg);
            right: 30px
        }

        100% {
            -webkit-transform: rotateX(360deg);
            -moz-transform: rotateX(360deg);
            transform: rotateX(360deg);
            right: 15px
        }
    }

    .complete-wrapper:after {
        background: url(../images/cheesy-couple.png) no-repeat;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 82px;
        height: 77px;
        background-size: 82px 77px;
        content: ''
    }

    .complete-profile {
        padding: 30px 35px
    }

        .complete-profile .complete-all .title {
            font-size: 22px;
            text-transform: uppercase;
            padding-top: 0
        }

            .complete-profile .complete-all .title:before {
                top: 4px
            }

    .complete-suggestions {
        padding: 20px 35px 30px
    }

        .complete-suggestions .title {
            font-size: 22px;
            text-transform: uppercase;
            padding-top: 0
        }

            .complete-suggestions .title:before {
                top: 4px
            }

        .complete-suggestions .matches {
            padding-bottom: 0
        }

            .complete-suggestions .matches:hover {
                box-shadow: none;
                padding-bottom: 0
            }

    .complete-owl .default-wrapper input[type="submit"]:hover {
        background: #fdd606;
        color: var(--theme-colour1)
    }

    .complete-owl .default-wrapper.edu:before {
        height: 48px
    }

    .complete-owl .default-wrapper.edu .inner {
        height: 48px
    }

    .complete-owl .default-wrapper.edu .second-dropdown select {
        width: calc((100% / 2) - 50px)
    }

        .complete-owl .default-wrapper.edu .second-dropdown select:last-of-type {
            top: 10px;
            left: auto;
            right: 0
        }

    .updates {
        width: 100%;
        padding: 15px 0 15px 35px;
        margin-bottom: 0;
        min-height: 320px;
        position: relative
    }

        .updates .all:hover {
            color: #e76045
        }

        .updates .scrollbar-inner:after {
            width: 35px
        }

        .updates .updates-no-data {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            margin-top: -43px
        }

    .update-item .desc a:hover {
        color: #e76045
    }

        .update-item .desc a:hover:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            width: 100%
        }

    .update-item .desc a:before {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 0;
        height: 1px;
        background: #e76045
    }

    .update-premium {
        position: relative;
        padding-right: 265px;
        margin-bottom: 15px
    }

        .update-premium .get-premium {
            background: url(../images/premium-bg.jpg) no-repeat;
            position: absolute;
            top: 0;
            right: 0;
            width: 250px;
            height: 100%;
            background-size: cover;
            padding-left: 15px;
            padding-right: 15px
        }

            .update-premium .get-premium ul {
                text-align: left
            }

            .update-premium .get-premium a:hover {
                background: var(--theme-colour1);
                color: #fdd606
            }

    .basic-wrapper {
        padding: 25px 35px;
        position: relative
    }

        .basic-wrapper.low-pb {
            padding-bottom: 10px
        }

        .basic-wrapper:before {
            background: url(../images/section-before.png) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 59px;
            height: 55px;
            background-size: 59px 55px
        }

    .matches {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.05);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.05);
        box-shadow: 0 0 10px rgba(0,0,0,0.05)
    }

        .matches:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.25);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.25);
            box-shadow: 0 0 10px rgba(0,0,0,0.25)
        }

        .matches .send-interest:hover {
            background: var(--theme-colour1);
            color: var(--white)
        }

    .preference-item a span {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

    .preference-item a:hover {
        background: var(--theme-colour1);
        color: var(--white)
    }

        .preference-item a:hover span {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            color: var(--white)
        }

    .preference-item a.code:hover {
        background: transparent;
        color: #e76045
    }

    .who-all:hover {
        color: #e76045
    }

    .latest-updates .padded {
        padding: 0 30px
    }

    .latest-updates .day {
        padding: 8px 30px
    }

    .more-pl {
        padding-left: 30px
    }

    .tabs-overflow {
        position: relative;
        overflow: hidden
    }

        .tabs-overflow .ml-pl {
            padding-left: 15px;
            margin-left: -15px
        }

    .tabs {
        position: relative;
        z-index: 10
    }

        .tabs span {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            font-size: 16px
        }

            .tabs span:hover {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                background: #e6e6e6
            }

    .tab-wrapper {
        min-height: 85vh;
        padding: 35px;
        position: relative
    }

        .tab-wrapper:before {
            position: absolute;
            top: 0;
            left: -450px;
            content: '';
            width: 435px;
            height: 100%;
            background: var(--white);
            z-index: 1
        }

    .message-content .head .names {
        float: left;
        width: calc(100% - 160px)
    }

        .message-content .head .names .icons a:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg)
        }

    .message-content .head .date {
        float: right;
        width: auto;
        margin: 0
    }

    .message-content .head .miscellaneous {
        margin: 8px 0 0
    }

    .message-content .minor-details {
        margin-bottom: 5px
    }

    .message-content .interested a:hover, .message-content .interested button:hover {
        background: var(--theme-colour1),20%;
        color: var(--white)
    }

        .message-content .interested a:hover span:before, .message-content .interested button:hover span:before {
            -webkit-animation: rotation 2s infinite,linear;
            -moz-animation: rotation 2s infinite,linear;
            animation: rotation 2s infinite,linear
        }

    .go-premium {
        position: relative
    }

        .go-premium a:hover {
            background: #fdd606;
            color: var(--theme-colour1)
        }

        .go-premium:before {
            background: url(../images/go-premium-before.png) no-repeat;
            position: absolute;
            top: -50px;
            left: -35px;
            content: '';
            background-repeat: repeat;
            width: 94px;
            height: 300px
        }

    .load-more span:before {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

    .load-more:hover span:before {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .deactivate:hover {
        background: transparent;
        color: #e76045;
        border-color: #e76045
    }

    .ad {
        position: relative;
        z-index: 50
    }

    .tdu {
        text-decoration: underline
    }

    .change-password {
        width: 70%
    }

    .deletion1 {
        padding: 30px
    }

    .deletion2 .blue-part, .deletion2 .grey-part {
        padding: 30px;
        width: 50%;
        float: left
    }

    .delete-link:hover {
        background: transparent;
        color: var(--white);
        border-color: var(--white)
    }

    .delete-link.orange:hover {
        color: #e76045;
        border-color: #e76045
    }

    .double a:hover:first-child, .double button:hover:first-child {
        background: #fdd606;
        color: var(--theme-colour1);
        border-color: #fdd606
    }

    .double a:hover:last-child, .double button:hover:last-child {
        background: var(--theme-colour1),20%
    }

    .complete-dropdowns input[type="submit"]:hover {
        background: #fdd606;
        color: var(--theme-colour1)
    }

    .complete-dropdowns.center {
        padding: 5px 0 0 200px;
        position: relative;
        text-align: left
    }

        .complete-dropdowns.center:before {
            background: url(../images/hobby-bg.png) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 168px;
            height: 98px;
            background-size: 168px 98px
        }

        .complete-dropdowns.center .add-hobby {
            margin-top: 0
        }

        .complete-dropdowns.center.verify:before {
            background: url(../images/verified.png) no-repeat;
            width: 146px;
            height: 124px;
            background-size: 146px 124px;
            top: -5px
        }

    .complete-dropdowns.prefer:before {
        background: url(../images/prefer-bg.png) no-repeat;
        background-size: 168px 98px
    }

    .add-hobby:hover {
        background: #fdd606;
        color: var(--theme-colour1)
    }

    .response .title {
        font-size: 30px
    }

    .wrap {
        padding: 0 50px
    }

    .avoid {
        background: url(../images/avoid-bg.jpg) no-repeat;
        background-repeat: repeat-x;
        background-color: var(--white)
    }

    .flex-wrapper .children .photo-settings a:hover {
        background: #fdd606;
        color: var(--theme-colour1)
    }

    .alert-submit:hover {
        background: transparent;
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

    .add-title a {
        position: absolute;
        top: -1px;
        left: 145px;
        padding: 2px 30px;
        margin: 0
    }

        .add-title a:hover {
            background: var(--theme-colour1);
            color: var(--white)
        }

    .p-profile-wrap .p-details-wrap .p-itm:last-child {
        width: calc(100% - 400px);
        word-break: break-all;
        vertical-align: top;
        display: inline
    }

    .edit-head {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 20px
    }

        .edit-head .add-edit, .edit-head .completeness {
            margin: 0
        }

        .edit-head .completeness {
            width: 200px
        }

        .edit-head .personal {
            text-align: left;
            width: calc(100% - 396px)
        }

        .edit-head .add-edit a:hover {
            border-color: var(--theme-colour1);
            background: var(--white);
            color: var(--theme-colour1);
            border-top: none
        }

    .how-profile {
        padding: 0 50px
    }

        .how-profile p, .how-profile a {
            margin: 0
        }

        .how-profile p {
            margin-right: 10px
        }

        .how-profile a {
            float: right
        }

            .how-profile a:hover {
                background: #e76045;
                border-color: #e76045
            }

    a.edit-button:hover {
        background: #e76045
    }

    .edit-save a:first-child:hover, .edit-save button:first-child:hover {
        background: transparent;
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

    .edit-save a:last-child:hover, .edit-save button:last-child:hover {
        background: var(--theme-colour1);
        color: var(--white)
    }

    .ed-container {
        padding: 30px 0 35px
    }

    .logout-title a {
        position: relative;
        color: var(--theme-colour1)
    }

        .logout-title a:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--theme-colour1);
            content: ''
        }

        .logout-title a:hover:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            width: 100%
        }

        .logout-title a:hover {
            color: var(--theme-colour2);
            text-decoration: none
        }

    .logout-block .matches .logout-view:hover {
        background: var(--theme-colour2);
        color: var(--white)
    }

    .search-prefer .inner a {
        text-align: left
    }

        .search-prefer .inner a:hover {
            color: var(--theme-colour1)
        }

    .logout-complete a:hover {
        background: #fdd606;
        color: var(--theme-colour1);
        border-color: #fdd606
    }

    .please-add-horo a:hover {
        background: transparent;
        color: #fdd606;
        border-color: #fdd606
    }

    .history .back:hover {
        color: #e76045
    }

    .history .message-item {
        -webkit-transition: none;
        -moz-transition: none;
        transition: none
    }

        .history .message-item:hover {
            box-shadow: none
        }

    .history .history-instance {
        margin-left: -25px;
        margin-right: -25px
    }

        .history .history-instance .title {
            margin-left: -25px;
            margin-right: -25px;
            padding-left: 25px
        }

    .history .history-instance {
        padding: 10px 25px 0
    }

        .history .history-instance .cover {
            margin-bottom: 14px
        }

        .history .history-instance.multiple .cover:not(:last-child) {
            margin-bottom: 25px
        }

        .history .history-instance a.first:hover, .history .history-instance a.third:hover, .history .history-instance button.first:hover, .history .history-instance button.third:hover {
            background: transparent;
            border-color: #e76045;
            color: #e76045
        }

        .history .history-instance a.second:hover, .history .history-instance button.second:hover {
            background: #e76045;
            color: var(--white)
        }

    .share-content {
        padding: 0 50px;
        background: transparent
    }

        .share-content .share-inner {
            background: var(--white);
            padding: 0 50px 40px
        }

        .share-content .select-alerts a {
            width: 100%
        }

    .bg-selectors span {
        width: calc((100% / 4) - 30px)
    }

    .service-table tr th, .service-table tr td {
        padding: 20px 5px
    }

    .service-table tr th {
        font-size: 18px
    }

    .service-table tr td {
        font-size: 16px
    }

    .packages-dashboard {
        background: url(../images/package-bg1.jpg) no-repeat;
        background-position: center left;
        padding-left: 200px
    }

    .upgrade-dashboard {
        background: url(../images/upgrade-bg1.jpg) no-repeat;
        background-position: center left;
        padding-left: 250px;
        text-align: left
    }

        .packages-dashboard .pd-link:hover, .upgrade-dashboard .pd-link:hover {
            background: var(--white);
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .ignore-this:hover {
        color: #e76045
    }
}

@media only screen and (min-width: 1340px) {
    .zoom-horizontal {
        display: none !important
    }

    .zoom-slider {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        position: absolute;
        top: 0;
        left: -60px;
        width: 60px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: block;
        background: #d4d4d4;
        display: block
    }

        .zoom-slider li {
            list-style: none;
            border-bottom: 1px solid rgba(255,255,255,0.5)
        }

            .zoom-slider li a {
                display: block;
                width: 60px;
                height: 60px;
                text-align: center;
                position: relative
            }

                .zoom-slider li a img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 49px;
                    height: 49px;
                    margin: -25px 0 0 -25px;
                    border: 1px solid transparent
                }

                .zoom-slider li a.overlaid:before, .zoom-slider li a.overlaid:after {
                    content: '';
                    z-index: 50
                }

                .zoom-slider li a.overlaid:before {
                    background: url(../images/photo-overlay.png) no-repeat;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-repeat: repeat;
                    width: 100%;
                    height: 100%
                }

                .zoom-slider li a.overlaid:after {
                    background: url(../images/locked.svg) no-repeat;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 16px;
                    height: 16px;
                    background-size: 16px;
                    margin: -8px 0 0 -8px
                }

                .zoom-slider li a.shown img {
                    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.9);
                    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.9);
                    box-shadow: 0 0 4px rgba(0,0,0,0.9);
                    border-color: var(--theme-colour1)
                }

    .portfolio-wrapper {
        padding-left: 60px;
        height: 427px
    }

        .portfolio-wrapper .inner {
            width: calc(100% - 430px);
            height: 100%;
            position: relative
        }

            .portfolio-wrapper .inner:before {
                position: absolute;
                top: 0;
                left: -60px;
                content: '';
                width: 60px;
                height: 100%;
                background: #d4d4d4
            }

        .portfolio-wrapper .easyzoom {
            padding: 15px;
            height: 100%
        }

            .portfolio-wrapper .easyzoom img {
                max-height: 397px
            }

            .portfolio-wrapper .easyzoom .protect a:hover {
                background: var(--theme-colour1);
                color: var(--white);
                border-color: var(--white)
            }

        .portfolio-wrapper .portfolio-details {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 430px;
            overflow: hidden
        }

            .portfolio-wrapper .portfolio-details:after {
                position: absolute;
                top: 0;
                right: 0;
                background: url(../images/portfolio-after.png) no-repeat;
                content: '';
                width: 91px;
                height: 74px;
                background-size: 91px 74px
            }

        .portfolio-wrapper .add-pics {
            position: absolute;
            top: 50%;
            left: 0;
            width: calc(100% - 430px);
            margin: -18px 0 0 0
        }

            .portfolio-wrapper .add-pics span {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            .portfolio-wrapper .add-pics:hover span {
                background: transparent;
                color: #e76045;
                border-color: #e76045
            }

    .set-pad {
        padding-left: 15px;
        padding-right: 15px
    }

    .a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

        .a .b {
            display: table;
            width: 100%;
            height: 100%
        }

        .a .c {
            display: table-cell;
            vertical-align: middle;
            padding-left: 30px;
            padding-right: 30px
        }

    .complete-dropdowns.center {
        padding: 15px 0 0 200px
    }
}

@media only screen and (min-width: 1366px) {
    .preference-item {
        overflow: hidden;
        padding: 15px 20px 20px
    }

        .preference-item img {
            float: left
        }

        .preference-item .desc {
            width: calc(100% - 180px);
            float: right
        }
}

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

.chat-now {
    font: 400 12px "Rubik",sans-serif;
    color: #14a309;
    position: relative;
    text-align: center;
    padding: 20px 0 0;
    margin: 0 0 0 15px;
    text-transform: capitalize
}

    .chat-now:before {
        background: url(../images/chat-now.svg) no-repeat;
        position: absolute;
        top: 0;
        left: 50%;
        content: '';
        width: 20px;
        height: 20px;
        background-size: 20px;
        margin-left: -10px
    }

.ui-widget-content {
    z-index: 99999999
}

.edit-location .select2-container {
    z-index: 99999999
}

.button-anime {
    background: rgba(0,0,0,0.98);
    pointer-events: none;
    display: block;
    z-index: 100;
    border: 1px solid rgba(0,0,0,0.98);
    opacity: 0
}

    .button-anime:before {
        background: url(../images/button-animation.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 32px;
        height: 32px;
        background-size: 32px;
        margin: -16px 0 0 -16px
    }

.disabled {
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    transition: all .2s ease-in;
    opacity: 1;
    pointer-events: all
}

.need-assistance {
    background: #e7e7e7;
    text-align: center;
    padding: 90px 10px 20px;
    margin-top: 10px;
    position: relative
}

    .need-assistance:before {
        background: url(../images/operator.svg) no-repeat;
        position: absolute;
        top: 15px;
        left: 50%;
        content: '';
        width: 66px;
        height: 66px;
        margin-left: -33px;
        background-size: 66px
    }

    .need-assistance p {
        font: 400 18px "Rubik",sans-serif;
        color: #2f2f2f;
        text-transform: uppercase;
        padding: 0 20px;
        text-align: center !important
    }

        .need-assistance p strong {
            font: 700 18px "Rubik",sans-serif
        }

    .need-assistance a {
        font: 700 22px "Rubik",sans-serif;
        color: var(--theme-colour1);
        position: relative;
        padding-left: 35px
    }

        .need-assistance a:before {
            background: url(../images/phone.svg) no-repeat;
            position: absolute;
            top: 4px;
            left: 0;
            content: '';
            width: 26px;
            height: 26px;
            background-size: 26px
        }

.add-yours {
    position: absolute;
    top: 310px;
    right: 30px;
    font: 700 14px "Rubik",sans-serif;
    color: var(--white);
    text-transform: capitalize;
    padding-left: 30px;
    display: inline-block;
    margin-top: 10px
}

    .add-yours:before {
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/pen-yellow.svg) no-repeat;
        content: '';
        width: 20px;
        top: -3px !important;
        height: 20px;
        background-size: 20px
    }

    .add-yours span {
        position: relative;
        padding: 0 2px
    }

        .add-yours span:after {
            position: absolute;
            bottom: -1px;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #fdd606
        }

footer {
    background: var(--theme-colour1);
    padding: 30px 15px
}

    footer .premium {
        width: 180px;
        margin: auto auto 15px
    }

        footer .premium a {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            display: block;
            text-transform: uppercase;
            text-align: center;
            overflow: hidden;
            position: relative;
            border: 1px solid #608eb7;
            margin-bottom: 15px;
            background: #fdd606
        }

            footer .premium a span {
                padding: 4px 10px 4px 40px;
                background: var(--theme-colour1);
                color: var(--white);
                position: relative;
                display: inline-block
            }

                footer .premium a span:before {
                    position: absolute;
                    top: 4px;
                    left: 10px;
                    content: '';
                    width: 20px;
                    height: 20px
                }

        footer .premium [class^='col-']:nth-child(1) a span:before {
            background: url(../images/premium1.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(2) a span:before {
            background: url(../images/premium2.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(3) a span:before {
            background: url(../images/premium3.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(4) a span:before {
            background: url(../images/premium4.svg) no-repeat;
            background-size: 20px
        }

    footer .footer-links .title {
        font: 400 14px "Rubik",sans-serif;
        position: relative;
        text-transform: uppercase;
        color: var(--white);
        padding-bottom: 5px;
        margin-bottom: 20px;
        height: 25px
    }

        footer .footer-links .title:after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 25px;
            height: 1px;
            background: #fdd606
        }

    footer .footer-links a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        color: #f9f9f9;
        text-transform: capitalize;
        margin-bottom: 15px;
        padding-left: 25px;
        position: relative
    }

        footer .footer-links a:before {
            position: absolute;
            top: 3px;
            left: 0;
            background: url(../images/right-arrow.svg) no-repeat;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    footer .footer-logo {
        position: relative;
        text-align: center;
        margin: 20px 0
    }

        footer .footer-logo:before {
            position: absolute;
            top: 50%;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #6591b9
        }

        footer .footer-logo a {
            background: var(--theme-colour1);
            padding: 0 30px;
            position: relative;
            z-index: 10
        }

    footer .footer-social {
        text-align: center
    }

        footer .footer-social a {
            display: block;
            margin-bottom: 10px
        }

            footer .footer-social a.social {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                width: 28px;
                height: 28px;
                margin: auto 2px 10px
            }

                footer .footer-social a.social.fb {
                    background: url(../images/fb.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.in {
                    background: url(../images/in.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.tw {
                    background: url(../images/tw.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.yt {
                    background: url(../images/yt.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.pn {
                    background: url(../images/pn.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.li {
                    background: url(../images/li.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.bl {
                    background: url(../images/bl.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

        footer .footer-social .social {
            display: inline-block;
            vertical-align: middle
        }

    footer .privacy-terms a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        margin-bottom: 10px;
        text-transform: capitalize;
        color: #f9f9f9;
        text-align: center
    }

.footnote {
    background: #074983;
    text-align: center;
    overflow: hidden;
    padding: 0 15px;
    position: relative;
    z-index: 1000
}

    .footnote span {
        font: 400 12px "Rubik",sans-serif;
        color: #ececec;
        text-transform: capitalize;
        padding: 12px 0;
        display: inline-block
    }

        .footnote span a {
            color: #ececec
        }

.notify-popup, .message-popup, .default-popup, .default-popup2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    z-index: 5000;
    opacity: 0;
    display: none
}

    .notify-popup.higher-zindex, .message-popup.higher-zindex, .default-popup.higher-zindex, .default-popup2.higher-zindex {
        z-index: 99999999
    }

    .default-popup .default-section, .default-popup2 .default-section {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        width: 90%;
        text-align: center;
        background: var(--theme-colour1);
        margin: auto;
        padding: 30px;
        position: relative
    }

        .default-popup .default-section .close-default-popup, .default-popup2 .default-section .close-default-popup {
            background: url(../images/close-white.svg) no-repeat;
            position: absolute;
            top: 5px;
            right: 5px;
            width: 30px;
            height: 30px;
            background-size: 15px;
            background-position: center;
            cursor: pointer
        }

            .default-popup .default-section .close-default-popup.blue, .default-popup2 .default-section .close-default-popup.blue {
                background: url(../images/close-blue.svg) no-repeat;
                background-size: 15px;
                background-position: center
            }

        .default-popup .default-section.editor, .default-popup2 .default-section.editor {
            text-align: left
        }

        .default-popup .default-section.fb-form, .default-popup2 .default-section.fb-form {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            background: var(--white);
            padding: 30px 15px
        }

        .default-popup .default-section.service-details, .default-popup2 .default-section.service-details {
            padding-top: 40px;
            padding-bottom: 40px
        }

    .default-popup .pwd-guide, .default-popup2 .pwd-guide {
        background: var(--white);
        border: 1px solid var(--theme-colour1)
    }

        .default-popup .pwd-guide .title, .default-popup2 .pwd-guide .title {
            font: 400 18px "Rubik",sans-serif;
            color: var(--theme-colour1);
            text-transform: capitalize;
            text-align: left;
            margin-bottom: 20px
        }

            .default-popup .pwd-guide .title span, .default-popup2 .pwd-guide .title span {
                position: relative;
                padding-right: 25px
            }

                .default-popup .pwd-guide .title span:after, .default-popup2 .pwd-guide .title span:after {
                    background: url(../images/title-down-arrow-blue.svg) no-repeat;
                    position: absolute;
                    top: 5px;
                    right: 0;
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-size: 15px
                }

        .default-popup .pwd-guide ul, .default-popup2 .pwd-guide ul {
            margin: 0;
            padding: 0
        }

            .default-popup .pwd-guide ul li, .default-popup2 .pwd-guide ul li {
                font: 400 12px "Rubik",sans-serif;
                color: #828282;
                padding-left: 20px;
                position: relative;
                list-style: none;
                margin-bottom: 10px;
                text-align: left
            }

                .default-popup .pwd-guide ul li:before, .default-popup2 .pwd-guide ul li:before {
                    background: url(../images/list-before.svg) no-repeat;
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 12px;
                    height: 12px;
                    background-size: 12px
                }

.confirm-deactivate a, .confirm-deletion a, .account-deleted a, .confirm-reactivate a, .message a {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font: 400 14px "Rubik",sans-serif;
    background: #fdd606;
    color: var(--theme-colour1);
    text-transform: uppercase;
    display: inline-block;
    width: 100px;
    padding: 4px 0;
    border: 1px solid transparent
}

    .confirm-deactivate a:first-of-type, .confirm-deletion a:first-of-type, .account-deleted a:first-of-type, .confirm-reactivate a:first-of-type, .message a:first-of-type {
        margin-right: 15px
    }

.confirm-deactivate, .confirm-deletion, .confirm-reactivate, .message {
    text-align: center
}

    .confirm-deactivate p, .confirm-deletion p, .confirm-reactivate p, .message p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--white);
        text-align: center;
        margin-bottom: 20px
    }

        .confirm-deactivate p:first-letter, .confirm-deletion p:first-letter, .confirm-reactivate p:first-letter, .message p:first-letter {
            text-transform: uppercase
        }

    .account-deleted a, .message a {
        margin-right: 0
    }

    .account-deleted p, .message p {
        font: 400 20px "Rubik",sans-serif;
        color: var(--white);
        text-align: center
    }

.notify-popup .notify-content, .message-popup .notify-content {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: var(--theme-colour1);
    padding: 140px 30px 60px;
    text-align: center;
    width: 90%;
    margin: auto;
    position: relative
}

    .notify-popup .notify-content:before, .message-popup .notify-content:before {
        position: absolute;
        top: 40px;
        left: 50%;
        content: '';
        width: 80px;
        height: 80px;
        margin-left: -40px
    }

    .notify-popup .notify-content.success:before, .message-popup .notify-content.success:before {
        background: url(../images/success-notification.svg) no-repeat;
        background-size: 80px
    }

    .notify-popup .notify-content.error:before, .message-popup .notify-content.error:before {
        background: url(../images/error-notification.svg) no-repeat;
        background-size: 80px
    }

    .notify-popup .notify-content span, .message-popup .notify-content span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        display: block
    }

    .notify-popup .notify-content .show-ok, .message-popup .notify-content .show-ok {
        display: none;
        margin-top: 20px
    }

    .notify-popup .notify-content .ok, .message-popup .notify-content .ok {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        font: 400 14px "Rubik",sans-serif;
        background: #fdd606;
        color: var(--theme-colour1);
        text-transform: uppercase;
        border: 1px solid transparent;
        display: inline-block;
        width: 100px;
        padding: 4px 0
    }

.message-popup .contact-section, .message-popup .horoscope-section {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: var(--theme-colour1);
    padding: 30px;
    text-align: center;
    width: 90%;
    margin: auto;
    position: relative;
    display: none
}

    .message-popup .contact-section .query, .message-popup .horoscope-section .query {
        color: var(--white);
        text-align: center
    }

    .message-popup .contact-section a, .message-popup .horoscope-section a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        background: #fdd606;
        color: var(--theme-colour1);
        text-transform: uppercase;
        margin: 0 10px;
        padding: 4px 0;
        width: 85px;
        border: 1px solid transparent
    }

        .message-popup .contact-section a.download-horo, .message-popup .horoscope-section a.download-horo {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            background: transparent;
            color: var(--white);
            text-decoration: underline;
            border: none;
            width: auto;
            text-transform: capitalize
        }

            .message-popup .contact-section a.download-horo:hover, .message-popup .horoscope-section a.download-horo:hover {
                border: none
            }

    .message-popup .contact-section .inner, .message-popup .horoscope-section .inner {
        display: none;
        color: var(--white)
    }

    .message-popup .contact-section .msgpopup-close, .message-popup .horoscope-section .msgpopup-close {
        font: 400 12px "Rubik",sans-serif;
        text-transform: capitalize;
        margin: 10px 0 0
    }

    .message-popup .contact-section p a, .message-popup .horoscope-section p a {
        font: 400 12px "Rubik",sans-serif;
        background: transparent;
        margin: 0;
        padding: 0;
        width: auto;
        color: var(--white)
    }

.select-dropdown .select-holder {
    display: block;
    position: relative
}

    .select-dropdown .select-holder:after {
        position: absolute;
        top: 12px;
        right: 0;
        content: '';
        pointer-events: none;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--white);
        display: none
    }

.select-dropdown select {
    font: 400 12px "Rubik",sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--white);
    padding-left: 0;
    color: var(--white)
}

    .select-dropdown select option {
        color: var(--black)
    }

.select-dropdown .caption {
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in;
    position: absolute;
    top: 0;
    left: 0;
    font: 400 10px "Rubik",sans-serif;
    font-style: normal;
    color: #fdd606
}

.select-dropdown.inverse .select-holder:after {
    border-top: 5px solid #878787
}

.select-dropdown.inverse select {
    color: var(--theme-colour1);
    border-bottom: 1px solid #878787
}

.select-dropdown.inverse .caption {
    color: var(--theme-colour1)
}

.select-dropdown.show-validation select {
    border-color: #f00
}

.select-dropdown.show-validation .field-validation-error, .select-dropdown.show-validation .field-validation-valid {
    display: none
}

.placeholder input[type="text"], .placeholder input[type="email"], .placeholder input[type="password"], .placeholder input[type="number"], .placeholder textarea {
    font: 400 12px "Rubik",sans-serif;
    width: 100%;
    height: 28px;
    border: none;
    border-bottom: 1px solid var(--white);
    background: transparent;
    color: var(--white)
}

.placeholder textarea {
    resize: none;
    height: 48px;
    padding: 0
}

.placeholder .caption {
    -webkit-transition: all .15s ease-in;
    -moz-transition: all .15s ease-in;
    transition: all .15s ease-in;
    position: absolute;
    top: 20px;
    left: 0;
    font: 400 12px "Rubik",sans-serif;
    pointer-events: none;
    color: var(--white);
    text-transform: capitalize;
    opacity: 0
}

.placeholder.caption-top .caption {
    font: 400 10px "Rubik",sans-serif;
    top: 0;
    color: #fdd606
}

.placeholder.inverse input[type="text"], .placeholder.inverse input[type="email"], .placeholder.inverse input[type="password"], .placeholder.inverse input[type="number"], .placeholder.inverse textarea {
    border-bottom: 1px solid #747474;
    color: var(--theme-colour1)
}

.placeholder.inverse .caption {
    color: var(--theme-colour1)
}

.placeholder.inverse-black input[type="text"], .placeholder.inverse-black input[type="email"], .placeholder.inverse-black input[type="password"], .placeholder.inverse-black input[type="number"], .placeholder.inverse-black textarea {
    border-bottom: 1px solid #747474;
    color: #525151
}

.placeholder.inverse-black .caption {
    color: #525151
}

.placeholder.orange input[type="text"], .placeholder.orange input[type="email"], .placeholder.orange input[type="password"], .placeholder.orange input[type="number"], .placeholder.orange textarea {
    border-bottom: 1px solid #e76045;
    color: #b2b2b2
}

.placeholder.orange .caption {
    color: #b2b2b2
}

.placeholder.text-area .caption {
    top: 15px
}

.placeholder.text-area.caption-top .caption {
    top: 0
}

.placeholder .dtBox input[type="text"], .placeholder .dtBox input[type="email"], .placeholder .dtBox input[type="password"], .placeholder .dtBox input[type="number"] {
    border-bottom: 1px solid transparent
}

.placeholder.show-validation input[type="text"], .placeholder.show-validation input[type="email"], .placeholder.show-validation input[type="password"], .placeholder.show-validation input[type="number"], .placeholder.show-validation textarea {
    border-color: #f00
}

.placeholder.show-validation .field-validation-error, .placeholder.show-validation .field-validation-valid {
    display: none
}

.relative {
    position: relative;
    padding: 15px 0;
    margin-bottom: 8px
}

    .relative.no-space {
        padding: 0;
        margin: 0
    }

    .relative.text-center {
        text-align: left !important
    }

    .relative.check-box {
        padding-top: 0
    }

    .relative:after {
        position: absolute;
        top: 8px;
        right: 15px;
        content: '';
        width: 15px;
        height: 15px
    }

    .relative.username:after {
        background: url(../images/username.svg) no-repeat;
        background-size: 15px
    }

    .relative.password:after {
        background: url(../images/password.svg) no-repeat;
        background-size: 15px
    }

    .relative.change-pwd:after {
        background: url(../images/lock.svg) no-repeat;
        background-size: 15px;
        top: 20px;
        right: 5px
    }

    .relative.edit-email:after {
        background: url(../images/pen-edit.svg) no-repeat;
        background-size: 15px;
        top: 20px;
        right: 5px
    }

    .relative .field-validation-error, .relative .field-validation-valid, .relative .webname {
        position: absolute;
        bottom: -2px;
        left: 0;
        font: 400 10px "Rubik",sans-serif;
        color: red,2%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block
    }

        .relative .field-validation-error:first-letter, .relative .field-validation-valid:first-letter, .relative .webname:first-letter {
            text-transform: uppercase
        }

    .relative .webname {
        color: #089315
    }

    .relative.username-error input {
        border-color: red !important
    }

    .relative.username-error:after {
        background: url(../images/username-red.svg) no-repeat;
        background-size: 15px
    }

    .relative.password-error input {
        border-color: red !important
    }

    .relative.password-error:after {
        background: url(../images/password-red.svg) no-repeat;
        background-size: 15px
    }

    .relative.alt-validation .field-validation-error, .relative.alt-validation .field-validation-valid {
        color: #ff9800
    }

.about {
    padding: 30px 30px 0px;
    margin-bottom: 72px
}

@media (max-width: 767px) {
    .about {
        padding: 15px 0px 0px 0px;
        margin-bottom: 50px
    }
}

@media (max-width: 480px) {
    .about {
        margin-bottom: 0px
    }
}

.about .title {
    font: 400 24px "Rubik",sans-serif;
    display: block;
    text-align: center;
    text-transform: capitalize;
    color: #292929;
    margin-bottom: 30px
}

    .about .title strong {
        font: 700 24px "Rubik",sans-serif
    }

.about p {
    font: 400 16px "Rubik",sans-serif;
    text-align: center;
    line-height: 30px
}

.about .about-icon {
    text-align: center;
    padding-top: 75px;
    position: relative;
    margin: 30px 0
}

    .about .about-icon:before {
        position: absolute;
        top: 5px;
        left: 50%;
        content: '';
        width: 50px;
        height: 50px;
        margin-left: -25px
    }

    .about .about-icon span {
        font: 400 18px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #292929
    }

.about [class^='col-']:nth-of-type(1) .about-icon:before {
    background: url(../images/about1.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(2) .about-icon:before {
    background: url(../images/about2.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(3) .about-icon:before {
    background: url(../images/about3.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(4) .about-icon:before {
    background: url(../images/about4.png) no-repeat;
    background-size: 50px
}

.about.inverse .title {
    text-transform: uppercase;
    color: var(--theme-colour1)
}

.communities {
    padding-left: 15px;
    padding-right: 15px;
    background: var(--theme-colour1)
}

    .communities .title {
        font: 400 24px "Rubik",sans-serif;
        display: block;
        text-align: center;
        color: var(--white);
        text-transform: capitalize;
        margin-bottom: 30px
    }

        .communities .title strong {
            font: 700 24px "Rubik",sans-serif;
            position: relative;
            padding-bottom: 3px
        }

            .communities .title strong:after {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: #fdd606;
                content: ''
            }

    .communities .caste, .communities .all {
        display: block;
        text-align: center
    }

    .communities .caste {
        font: 400 18px "Rubik",sans-serif;
        padding: 15px 0;
        margin-bottom: 0px;
        color: var(--white);
        text-transform: capitalize;
        display: flex;
        align-items: center
    }

        .communities .caste span {
            position: relative;
            padding-left: 5px;
            display: inline-block;
            text-align: left
        }

@media (max-width: 991px) {
    .communities .caste span {
        min-width: 180px
    }
}

@media (max-width: 767px) {
    .communities .caste span {
        font-size: 16px
    }
}

.communities .caste span:before {
    position: absolute;
    top: -3px;
    left: 0;
    background: url(../images/caste-before.jpg) no-repeat;
    content: '';
    width: 30px;
    height: 30px;
    background-size: 30px;
    display: none
}

.communities .caste span.icn {
    padding-left: 0px;
    display: flex
}

    .communities .caste span.icn svg path {
        fill: var(--white)
    }

.communities .all {
    font: 400 18px "Rubik",sans-serif;
    text-transform: capitalize;
    margin-top: 16px
}

    .communities .all span {
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        padding: 5px 50px 5px 30px;
        background: #fdd606;
        color: #292929;
        position: relative;
        border: 1px solid transparent
    }

        .communities .all span:after {
            position: absolute;
            top: 9px;
            right: 25px;
            background: url(../images/reply-right.svg) no-repeat;
            content: '';
            width: 15px;
            height: 15px;
            background-size: 15px
        }

.communities.inverse {
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width: 767px) {
    .communities.inverse {
        justify-content: initial
    }
}

.about-register {
    background: #f3f3f3;
    padding: 30px;
    text-align: center
}

    .about-register p {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        text-align: center
    }

        .about-register p strong {
            font: 700 24px "Rubik",sans-serif;
            display: block
        }

    .about-register a {
        font: 400 18px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        background: var(--theme-colour1);
        color: var(--white);
        padding: 6px 30px;
        text-transform: uppercase;
        margin: 15px 0 0;
        display: inline-block;
        position: relative;
        border: 1px solid transparent
    }

        .about-register a:after {
            background: url(../images/arrow-down.svg) no-repeat;
            position: absolute;
            bottom: -24px;
            left: 50%;
            width: 18px;
            height: 18px;
            background-size: 18px;
            margin-left: -9px;
            content: ''
        }

.about-intimate {
    padding: 30px
}

    .about-intimate .title {
        text-transform: uppercase;
        color: var(--black);
        text-align: center;
        padding: 75px 0 15px;
        margin-bottom: 20px;
        position: relative
    }

        .about-intimate .title:before, .about-intimate .title:after {
            position: absolute;
            left: 50%;
            content: ''
        }

        .about-intimate .title:before {
            background: url(../images/diadem.png) no-repeat;
            top: 0;
            width: 106px;
            height: 62px;
            margin-left: -53px
        }

        .about-intimate .title:after {
            bottom: 0;
            width: 68px;
            height: 2px;
            background: var(--theme-colour1);
            margin-left: -34px
        }

        .about-intimate .title span, .about-intimate .title em {
            display: block
        }

        .about-intimate .title span {
            font: 700 22px "Rubik",sans-serif;
            margin-bottom: 5px
        }

        .about-intimate .title em {
            font: 400 10px "Rubik",sans-serif;
            font-style: normal
        }

    .about-intimate p {
        text-align: center
    }

.basic {
    padding: 30px
}

    .basic .title {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        margin-bottom: 10px
    }

.spanners {
    margin-top: 15px
}

    .spanners span {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #6f7071;
        position: relative;
        padding: 20px 0 20px 45px
    }

        .spanners span:before {
            position: absolute;
            top: 50%;
            left: 0;
            content: '';
            width: 30px;
            height: 30px;
            margin-top: -15px
        }

        .spanners span.spanner1:before {
            background: url(../images/spanner1.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner2:before {
            background: url(../images/spanner2.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner3:before {
            background: url(../images/spanner3.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner4:before {
            background: url(../images/spanner4.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner5:before {
            background: url(../images/spanner5.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner6:before {
            background: url(../images/spanner6.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner7:before {
            background: url(../images/spanner7.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner8:before {
            background: url(../images/spanner8.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner9:before {
            background: url(../images/spanner9.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner10:before {
            background: url(../images/spanner10.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner11:before {
            background: url(../images/spanner11.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner12:before {
            background: url(../images/spanner12.svg) no-repeat;
            background-size: 30px
        }

.popup-buttons input[type="submit"], .popup-buttons input[type="button"], .popup-buttons a {
    font: 400 14px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
    padding: 2px 10px;
    text-transform: capitalize
}

.popup-buttons input[type="submit"], .popup-buttons input[type="button"] {
    background: var(--white);
    color: var(--theme-colour1);
    margin-right: 15px
}

.popup-buttons a {
    background: transparent;
    color: var(--white);
    border-color: var(--white)
}

    .popup-buttons a#erase-password {
        padding-left: 15px;
        padding-right: 15px;
        background: #fdd606;
        color: var(--theme-colour1);
        border-color: #fdd606;
        margin-bottom: 30px
    }

.view-password p, .confirmation p, .erase-password p {
    font: 400 14px "Rubik",sans-serif;
    color: var(--white);
    margin: 30px 0;
    text-align: center
}

@media (max-width: 480px) {
    .view-password p, .confirmation p, .erase-password p {
        margin-bottom: 0px
    }
}

.view-password p:first-letter, .confirmation p:first-letter, .erase-password p:first-letter {
    text-transform: uppercase
}

.view-password p strong, .confirmation p strong, .erase-password p strong {
    font-size: 16px;
    color: #fdd606
}

.confirmation p, .erase-password p {
    margin: 0 0 20px 0
}

.confirmation a, .erase-password a {
    font: 400 14px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
    padding: 2px 30px;
    text-transform: capitalize;
    background: transparent;
    color: var(--white);
    border-color: var(--white);
    margin: 0 15px
}

.cropper-wrapper a, .cropper-wrapper.full-page a {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: #fdd606;
    text-transform: capitalize;
    padding: 4px 20px;
    margin: 20px 0;
    display: inline-block;
    border: 1px solid transparent
}

    .cropper-wrapper a:last-of-type, .cropper-wrapper.full-page a:last-of-type {
        margin-left: 10px
    }

.cropper-wrapper {
    display: none;
    text-align: center
}

    .cropper-wrapper.full-page {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding-bottom: 70px;
        background: var(--theme-colour1);
        z-index: 999999
    }

        .cropper-wrapper.full-page a {
            background: #fff;
            color: #057dc4;
            border: 1px solid transparent;
            width: 120px;
            height: 46px;
            border-radius: 5px;
            padding-top: 14px
        }

    .cropper-wrapper a {
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        color: #FAFAFA;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 44px;
        padding: 10px 25px;
        background-color: var(--theme-colour1);
        border-radius: 5px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: ease-in-out 0.4s
    }

        .cropper-wrapper a:last-of-type {
            margin-left: 0px
        }

        .cropper-wrapper a:hover {
            background: var(--theme-colour2)
        }

.discover {
    background: var(--white);
    margin-bottom: 20px
}

    .discover .title {
        font: 700 16px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: var(--theme-colour1);
        position: relative;
        padding: 15px 15px 15px 40px
    }

        .discover .title:before {
            position: absolute;
            top: 16px;
            left: 12px;
            background: url(../images/two-hearts.svg) no-repeat;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

.discover-profile {
    margin-bottom: 25px
}

    .discover-profile .inner img, .discover-profile .inner .desc {
        display: inline-block;
        vertical-align: middle
    }

    .discover-profile .inner a img {
        width: 49px;
        height: 49px
    }

    .discover-profile .inner img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin: 0 10px 0 0
    }

    .discover-profile .inner .desc p {
        margin-bottom: 0
    }

        .discover-profile .inner .desc p span, .discover-profile .inner .desc p em {
            display: block;
            font-style: normal;
            color: var(--theme-colour1)
        }

        .discover-profile .inner .desc p span {
            font: 400 14px "Rubik",sans-serif;
            text-transform: capitalize
        }

        .discover-profile .inner .desc p em {
            font: 400 12px "Rubik",sans-serif;
            text-transform: uppercase
        }

    .discover-profile .inner .desc .long {
        font: 400 12px "Rubik",sans-serif;
        color: #4e4f50;
        text-transform: capitalize;
        margin-top: 5px
    }

    .discover-profile .decisions {
        overflow: hidden;
        margin-top: 10px
    }

        .discover-profile .decisions a {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font: 400 12px "Rubik",sans-serif;
            width: calc(50% - 4px);
            text-transform: capitalize;
            text-align: center;
            border: 1px solid var(--theme-colour1);
            padding: 2px 0;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px
        }

            .discover-profile .decisions a:hover span.icn svg.strk {
                display: none
            }

            .discover-profile .decisions a:hover span.icn svg.fil {
                display: block
            }

            .discover-profile .decisions a span {
                position: relative;
                padding-left: 0px
            }

                .discover-profile .decisions a span:before {
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 12px;
                    height: 12px;
                    display: none
                }

                .discover-profile .decisions a span.icn {
                    display: flex
                }

                    .discover-profile .decisions a span.icn svg path {
                        fill: var(--theme-colour1)
                    }

                    .discover-profile .decisions a span.icn svg.strk {
                        display: block
                    }

                    .discover-profile .decisions a span.icn svg.fil {
                        display: none
                    }

            .discover-profile .decisions a:first-child {
                float: left;
                background: var(--theme-colour1);
                color: var(--white)
            }

                .discover-profile .decisions a:first-child span:before {
                    background: url(../images/heart-white.svg) no-repeat;
                    background-size: 12px;
                    display: none
                }

            .discover-profile .decisions a:last-child {
                float: right;
                color: var(--theme-colour1)
            }

                .discover-profile .decisions a:last-child span:before {
                    background: url(../images/cancel-blue.svg) no-repeat;
                    background-size: 12px
                }

            .discover-profile .decisions a.active {
                border-color: #369623;
                background: var(--white);
                color: #369623
            }

                .discover-profile .decisions a.active span:before {
                    background: url(../images/shortlisted.svg) no-repeat;
                    background-size: 12px
                }

.discover-all {
    font: 400 14px "Rubik",sans-serif;
    display: block;
    padding: 10px 0;
    text-transform: uppercase;
    color: var(--theme-colour1);
    border-top: 1px solid #e1e1e1;
    text-align: center
}

    .discover-all:after {
        content: attr(data-count)
    }

    .discover-all.no-border {
        margin-top: 10px;
        border-top: none;
        padding-bottom: 0
    }

.all-communities {
    padding: 0 15px 10px;
    margin-bottom: 10px
}

    .all-communities [class^='col-'] {
        background: var(--white);
        overflow: hidden
    }

        .all-communities [class^='col-']:nth-of-type(1) {
            padding-top: 10px
        }

    .all-communities a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        color: #828282;
        text-transform: capitalize;
        margin-bottom: 10px
    }

    .all-communities p {
        font: 400 22px "Rubik",sans-serif;
        background: #0a5191;
        color: var(--white);
        padding: 20px 15px;
        margin-bottom: 0;
        text-align: left
    }

        .all-communities p strong {
            font: 400 23px "Rubik",sans-serif;
            color: #fdd606;
            display: block;
            letter-spacing: 1px
        }

.main-title {
    font: 700 24px "Rubik",sans-serif;
    padding: 15px;
    position: relative;
    z-index: 100;
    text-transform: uppercase;
    background: var(--white);
    color: var(--theme-colour1);
    -webkit-box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25);
    box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25)
}

    .main-title span {
        display: inline-block;
        background: var(--white);
        padding-left: 50px;
        position: relative
    }

        .main-title span:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 35px;
            height: 35px
        }

    .main-title.messages span:before {
        background: url(../images/speech-bubble.svg) no-repeat;
        background-size: 35px
    }

    .main-title.settings span:before {
        background: url(../images/settings-gear.svg) no-repeat;
        background-size: 35px
    }

    .main-title.portfolio {
        box-shadow: none
    }

        .main-title.portfolio span {
            position: relative;
            z-index: 100;
            padding-right: 30px
        }

            .main-title.portfolio span:before {
                background: url(../images/portfolio.svg) no-repeat;
                background-size: 35px
            }

        .main-title.portfolio:after {
            position: absolute;
            top: 50%;
            right: 15px;
            content: '';
            width: 80%;
            height: 1px;
            background: var(--theme-colour1);
            z-index: -1
        }

    .main-title.all-comm {
        box-shadow: none;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px
    }

        .main-title.all-comm span:before {
            background: url(../images/network.svg) no-repeat;
            background-size: 35px;
            top: -3px
        }

        .main-title.all-comm.share span:before {
            background: url(../images/sharer.svg) no-repeat;
            background-size: 35px
        }

.profile-of-day {
    display: block;
    background: var(--lightBg);
    text-align: center;
    padding-bottom: 15px
}

    .profile-of-day .title {
        font: 700 16px "Rubik",sans-serif;
        text-transform: uppercase;
        background: var(--theme-colour1);
        color: var(--white);
        padding: 10px 0
    }

    .profile-of-day img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin: 15px auto
    }

    .profile-of-day span {
        display: block;
        color: var(--c2d);
        text-transform: uppercase
    }

    .profile-of-day .name {
        font: 700 16px "Rubik",sans-serif
    }

    .profile-of-day .code {
        font: 400 12px "Rubik",sans-serif
    }

.profile-absolute .profile-of-day {
    min-height: 300px
}

.site-loader, .gif-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 999999;
    opacity: 0;
    display: none
}

    .site-loader:before, .gif-loader:before {
        background: url(../images/site-loader.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 90px;
        height: 90px;
        margin: -45px 0 0 -45px;
        background-size: 90px
    }

.gif-loader {
    opacity: 1
}

    .gif-loader:before {
        background: url(../images/gif-loader.gif) no-repeat;
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
        background-size: 90px;
        background-position: center
    }

.go-to {
    background: url(../images/go-to-bg.jpg) no-repeat;
    background-size: cover;
    background-position: top right;
    padding-top: 302px;
    margin-bottom: 20px
}

    .go-to.grey .inner {
        background-color: #ececec
    }

    .go-to .inner {
        position: relative;
        background: var(--white);
        padding: 30px 15px;
        text-align: center
    }

        .go-to .inner:before {
            background: url(../images/go-to-before.png) no-repeat;
            position: absolute;
            top: -38px;
            left: 50%;
            content: '';
            width: 70px;
            height: 38px;
            margin-left: -35px;
            background-size: 70px 38px
        }

        .go-to .inner p {
            font: 400 18px "Rubik",sans-serif;
            color: var(--theme-colour1);
            padding: 0 30px;
            text-align: center !important
        }

        .go-to .inner a {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            font: 700 14px "Rubik",sans-serif;
            background: var(--theme-colour1);
            color: var(--white);
            text-transform: capitalize;
            padding: 8px 30px;
            display: inline-block;
            border: 1px solid transparent
        }

.misc-content {
    padding: 0 15px;
    height: 100vh
}

    .misc-content .title {
        font: 400 24px "Rubik",sans-serif;
        color: #2d2d2d;
        text-transform: capitalize;
        border-bottom: 1px solid #ebebeb;
        margin-bottom: 20px;
        padding: 20px 0
    }

        .misc-content .title span {
            position: relative;
            display: flex;
            align-items: center;
            gap: 15px
        }

            .misc-content .title span.advert {
                display: flex;
                align-items: center;
                gap: 15px;
                padding-left: 0
            }

                .misc-content .title span.advert:before {
                    display: none
                }

                .misc-content .title span.advert .icn {
                    display: flex
                }

                .misc-content .title span.advert svg path {
                    fill: var(--theme-colour1)
                }

            .misc-content .title span:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 30px;
                height: 30px;
                display: none
            }

            .misc-content .title span.privacy:before {
                background: url(../images/privacy-before.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.terms:before {
                background: url(../images/terms.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.services:before {
                background: url(../images/services.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.advert:before {
                background: url(../images/advert-before.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.helpline {
                display: flex;
                align-items: center;
                gap: 15px;
                padding-left: 0
            }

                .misc-content .title span.helpline:before {
                    display: none
                }

                .misc-content .title span.helpline .icn {
                    display: flex
                }

                .misc-content .title span.helpline svg path {
                    fill: var(--theme-colour1)
                }

            .misc-content .title span .icn {
                display: flex
            }

                .misc-content .title span .icn svg path {
                    fill: var(--theme-colour1)
                }

    .misc-content .title-terms {
        font: 400 16px "Rubik",sans-serif;
        color: var(--theme-colour1);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px
    }

        .misc-content .title-terms span {
            position: relative
        }

            .misc-content .title-terms span:before {
                background: url(../images/diamond-symbol.svg) no-repeat;
                position: absolute;
                top: 2px;
                left: 0;
                content: '';
                width: 16px;
                height: 16px;
                background-size: 16px;
                display: none
            }

        .misc-content .title-terms.small span {
            padding-left: 0
        }

            .misc-content .title-terms.small span:before {
                display: none
            }

        .misc-content .title-terms.black {
            font-size: 20px;
            color: #2d2d2d;
            text-transform: capitalize
        }

        .misc-content .title-terms .icn {
            display: flex
        }

            .misc-content .title-terms .icn svg path {
                fill: var(--theme-colour1)
            }

    .misc-content p.static {
        font: 400 14px "Rubik",sans-serif;
        color: #363636;
        text-align: justify;
        line-height: 24px;
        margin-bottom: 25px
    }

.terms-list {
    margin: 0 0 30px 0;
    padding: 0
}

    .terms-list li {
        position: relative;
        padding-left: 20px;
        list-style: none;
        margin-bottom: 10px
    }

        .terms-list li:before {
            position: absolute;
            top: 5px;
            left: 0;
            content: '';
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid var(--theme-colour1)
        }

.no-data {
    font: 400 18px "Rubik",sans-serif;
    text-align: center;
    padding: 20px 0;
    color: var(--theme-colour1);
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

    .no-data .icn {
        display: flex
    }

        .no-data .icn svg path {
            fill: var(--theme-colour1)
        }

    .no-data span {
        position: relative;
        text-transform: capitalize
    }

        .no-data span:before {
            background: url(../images/sad-blue.svg) no-repeat;
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px;
            display: none
        }

    .no-data.inverse {
        font-size: 14px;
        color: var(--white)
    }

        .no-data.inverse span:before {
            background: url(../images/sad-white.svg) no-repeat;
            background-size: 20px;
            top: -2px
        }

.search-wrapper {
    margin: 30px 0
}

    .search-wrapper .nice-select {
        font: 400 13px "Rubik",sans-serif;
        height: 55px;
        line-height: 55px;
        color: #171717;
        padding-left: 15px
    }

    .search-wrapper .select-appearance {
        position: relative;
        display: block
    }

        .search-wrapper .select-appearance:after {
            position: absolute;
            top: 20px;
            right: 15px;
            background: url(../images/down-arrow-blue.svg) no-repeat;
            content: '';
            width: 15px;
            height: 15px;
            background-size: 15px;
            pointer-events: none
        }

    .search-wrapper .search-criteria {
        width: 100%;
        border: 1px solid var(--theme-colour1);
        margin-bottom: 10px;
        overflow: hidden;
        position: relative
    }

        .search-wrapper .search-criteria select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            width: 100%;
            height: 55px;
            border: none;
            padding-left: 10px
        }

        .search-wrapper .search-criteria.inverse span {
            display: inline-block;
            vertical-align: middle
        }

            .search-wrapper .search-criteria.inverse span.field-validation-valid {
                display: none
            }

        .search-wrapper .search-criteria.inverse .select-appearance, .search-wrapper .search-criteria.inverse .to {
            width: calc(100% / 3);
            float: left
        }

        .search-wrapper .search-criteria.inverse .to {
            line-height: 55px;
            text-align: center
        }

        .search-wrapper .search-criteria .field-validation-error {
            position: absolute;
            top: -1px;
            right: 5px;
            color: #f00;
            font-size: 20px
        }

    .search-wrapper .search-submit {
        display: block;
        height: 55px;
        background: var(--theme-colour1);
        text-align: center;
        position: relative
    }

        .search-wrapper .search-submit input[type="submit"] {
            opacity: 0;
            z-index: 100;
            cursor: pointer
        }

        .search-wrapper .search-submit span {
            font: 400 18px "Rubik",sans-serif;
            text-transform: uppercase;
            display: inline-block;
            color: #fdd606;
            position: relative;
            padding-right: 35px;
            line-height: 55px
        }

            .search-wrapper .search-submit span:after {
                position: absolute;
                top: 13px;
                right: 0;
                background: url(../images/search-yellow.svg) no-repeat;
                content: '';
                width: 24px;
                height: 24px;
                background-size: 24px
            }

.search-by {
    text-align: center
}

    .search-by .heading {
        font: 400 16px "Rubik",sans-serif;
        display: block;
        color: #292929;
        margin-bottom: 15px
    }

    .search-by a {
        font: 700 16px "Rubik",sans-serif;
        text-transform: capitalize;
        display: inline-block;
        vertical-align: middle;
        color: var(--theme-colour1);
        padding: 0 15px;
        border-right: 1px solid #6f6f6f
    }

        .search-by a:last-of-type {
            border-right: none
        }

.search {
    font: 400 14px "Rubik",sans-serif;
    text-transform: uppercase;
    display: block;
    background: #fdd606;
    color: var(--theme-colour1);
    text-align: center;
    padding: 5px 0
}

    .search em {
        font-style: normal;
        padding-right: 25px;
        position: relative
    }

        .search em:after {
            position: absolute;
            top: 0;
            right: 0;
            background: url(../images/search-blue.svg) no-repeat;
            content: '';
            width: 16px;
            height: 16px;
            background-size: 16px
        }

.register {
    background: var(--theme-colour1);
    padding: 15px 15px 60px;
    position: relative
}

    .register .title span {
        display: block;
        margin-bottom: 10px;
        color: var(--white)
    }

    .register .title .free {
        font: 400 18px "Rubik",sans-serif;
        text-transform: capitalize;
        padding-left: 30px;
        position: relative
    }

        .register .title .free:before {
            background: url(../images/pen.svg) no-repeat;
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

        .register .title .free em {
            font: 700 18px "Rubik",sans-serif;
            text-transform: uppercase
        }

    .register .title .with, .register .title .social {
        display: inline-block;
        vertical-align: middle
    }

    .register .title .with {
        font: 400 12px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-right: 10px
    }

    .register .title .social a {
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-right: 10px
    }

        .register .title .social a.fb {
            background: url(../images/facebook.svg) no-repeat;
            background-size: 25px
        }

        .register .title .social a.gg {
            background: url(../images/google-plus.svg) no-repeat;
            background-size: 25px
        }

    .register .register-submit {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        text-align: center;
        background: #fdd606
    }

        .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button {
            opacity: 0;
            font-size: 0;
            z-index: 100
        }

        .register .register-submit span {
            font: 400 20px "Rubik",sans-serif;
            line-height: 50px;
            color: var(--theme-colour1);
            position: relative;
            padding-left: 30px;
            text-transform: uppercase
        }

            .register .register-submit span:before {
                position: absolute;
                top: 3px;
                left: 0;
                background: url(../images/user-blue.svg) no-repeat;
                content: '';
                width: 20px;
                height: 20px;
                background-size: 20px
            }

        .register .register-submit.inverse {
            -webkit-border-radius: 80px;
            -moz-border-radius: 80px;
            border-radius: 80px;
            background: var(--theme-colour1);
            position: relative;
            bottom: auto;
            left: auto;
            margin: 15px auto
        }

            .register .register-submit.inverse span {
                color: var(--white)
            }

                .register .register-submit.inverse span:before {
                    background: url(../images/user-yellow.svg) no-repeat;
                    background-size: 20px
                }

    .register.inverse {
        background: var(--white);
        padding-bottom: 15px
    }

        .register.inverse .nice-select {
            color: var(--theme-colour1);
            border-bottom-color: var(--theme-colour1)
        }

            .register.inverse .nice-select:after {
                border-bottom: 2px solid var(--theme-colour1);
                border-right: 2px solid var(--theme-colour1)
            }

        .register.inverse .title span {
            color: #282828
        }

        .register.inverse .title .free:before {
            background: url(../images/pen-blue.svg) no-repeat;
            background-size: 18px
        }

        .register.inverse .title .social a.fb {
            background: url(../images/facebook-blue.svg) no-repeat;
            background-size: 25px
        }

        .register.inverse .title .social a.gg {
            background: url(../images/google-plus-blue.svg) no-repeat;
            background-size: 25px
        }

        .register.inverse .title-logo {
            margin: 30px 0 40px
        }

.radio-wrapper {
    display: inline-block;
    margin-right: 15px;
    height: 30px
}

    .radio-wrapper input[type="radio"] {
        display: none
    }

    .radio-wrapper .ghost-radio, .radio-wrapper .note {
        display: inline-block;
        vertical-align: middle
    }

    .radio-wrapper .ghost-radio {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid var(--white);
        width: 15px;
        height: 15px;
        margin-right: 10px;
        cursor: pointer
    }

        .radio-wrapper .ghost-radio[data-status="0"] {
            background: none
        }

        .radio-wrapper .ghost-radio[data-status="1"] {
            background: url(../images/circle-filled.svg) no-repeat;
            background-size: 9px;
            background-position: center
        }

    .radio-wrapper .note {
        font: 400 12px "Rubik",sans-serif;
        color: var(--white);
        text-transform: capitalize
    }

    .radio-wrapper.inverse .ghost-radio {
        border-color: var(--theme-colour1)
    }

        .radio-wrapper.inverse .ghost-radio[data-status="1"] {
            background: url(../images/circle-filled-blue.svg) no-repeat;
            background-size: 9px;
            background-position: center
        }

    .radio-wrapper.inverse .note {
        color: #222222
    }

.dtBox .dtpicker-value {
    color: var(--theme-colour1)
}

.dtBox input.dtpicker-compValue {
    color: var(--theme-colour1);
    font-size: 14px
}

.dtBox a.dtpicker-button {
    background: var(--theme-colour1);
    color: #fdd606
}

.dtBox a.dtpicker-close {
    color: var(--theme-colour1)
}

.search-strip {
    padding-left: 15px;
    padding-right: 15px;
    position: relative
}

    .search-strip .title {
        font: 400 24px "Rubik",sans-serif;
        text-transform: capitalize;
        display: block;
        text-align: center;
        color: #292929
    }

        .search-strip .title strong {
            color: var(--theme-colour1)
        }

        .search-strip .title em {
            font: 700 40px "Rubik",sans-serif;
            background: #fdd606
        }

    .search-strip .branch-locator {
        display: none
    }

.signup-page .register {
    padding-bottom: 50px
}

.signup-page .signup-text {
    display: none
}

.search-result {
    display: block;
    margin-bottom: 15px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #d4d4d4
}

    .search-result .title {
        font: 400 20px "Rubik",sans-serif;
        display: block;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

    .search-result p {
        font: 400 14px "Rubik",sans-serif;
        color: #727272;
        text-align: justify
    }

    .search-result em {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        font: 400 12px "Rubik",sans-serif;
        font-style: normal;
        display: inline-block;
        background: #efefef;
        color: var(--theme-colour1);
        padding: 2px 15px;
        text-transform: capitalize
    }

    .search-result i {
        font-style: normal;
        background: #ff9632;
        color: #000
    }

.search-content {
    margin-bottom: 20px;
    overflow: hidden
}

    .search-content:not(.search-tab1) {
        display: none
    }

.country-code .nice-select .option {
    padding: 0 0 0 5px
}

.f16 {
    font-size: 16px
}

    .f16 a {
        font-size: 14px
    }

.faq-title {
    font: 400 30px "Rubik",sans-serif;
    color: var(--black);
    text-transform: capitalize;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    gap: 15px
}

    .faq-title span {
        position: relative;
        padding: 0 0 0 50px
    }

        .faq-title span:before, .faq-title span:after {
            content: '';
            position: absolute
        }

        .faq-title span:before {
            background: url(../images/faq-before.svg) no-repeat;
            top: 1px;
            left: 0;
            width: 40px;
            height: 40px;
            background-size: 40px
        }

    .faq-title .icn {
        display: flex;
        margin-top: 5px
    }

        .faq-title .icn svg path {
            fill: var(--theme-colour1)
        }

    .faq-title.job-title span:before {
        background: url(../images/job-before.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.careers-title span:before {
        background: url(../images/careers-before.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.success-title span:before {
        background: url(../images/tick-multi.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.short {
        font-size: 20px;
        margin-top: 15px
    }

        .faq-title.short span {
            padding-top: 10px
        }

    .faq-title.featured {
        font-size: 24px
    }

        .faq-title.featured span:before {
            background: url(../images/featured.svg) no-repeat;
            background-size: 40px;
            top: -2px
        }

        .faq-title.featured span:after {
            top: 9px
        }

    .faq-title.search-title span:before {
        background: url(../images/search-blue.svg) no-repeat;
        background-size: 40px
    }

.search-tabs {
    margin-bottom: 20px
}

    .search-tabs span {
        font: 400 16px "Rubik",sans-serif;
        color: #a2a2a2;
        text-transform: capitalize;
        cursor: pointer;
        display: block;
        margin-bottom: 5px;
        position: relative
    }

        .search-tabs span:after {
            position: absolute;
            top: 8px;
            left: 0;
            content: '';
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid var(--theme-colour1);
            opacity: 0
        }

        .search-tabs span.active {
            padding-left: 15px;
            color: var(--theme-colour1)
        }

            .search-tabs span.active:after {
                opacity: 1
            }

.search-keyword {
    height: auto;
    margin-bottom: 30px
}

    .search-keyword p {
        font: 400 20px "Rubik",sans-serif;
        color: #474747;
        text-align: center
    }

        .search-keyword p strong {
            font: 700 24px "Rubik",sans-serif
        }

        .search-keyword p span {
            display: block;
            margin: 15px 0 10px;
            font-size: 14px
        }

        .search-keyword p em {
            font: 400 14px "Rubik",sans-serif
        }

            .search-keyword p em strong {
                font: 700 14px "Rubik",sans-serif
            }

.result-section {
    padding: 15px
}

    .result-section .result-title {
        text-transform: capitalize;
        margin-bottom: 30px
    }

        .result-section .result-title span, .result-section .result-title em {
            display: inline-block
        }

        .result-section .result-title span {
            font: 700 27px "Rubik",sans-serif;
            color: var(--theme-colour1);
            margin-right: 10px
        }

        .result-section .result-title em {
            font: 400 28px "Rubik",sans-serif;
            color: var(--black);
            font-style: normal
        }

.filtered-by {
    margin-bottom: 10px;
    display: none
}

    .filtered-by em, .filtered-by span {
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
        margin-bottom: 5px
    }

    .filtered-by em {
        font: 400 14px "Rubik",sans-serif;
        color: #424242;
        margin-right: 15px;
        text-transform: capitalize;
        font-style: normal
    }

    .filtered-by span {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        font: 400 12px "Rubik",sans-serif;
        background: #f2f2f2;
        color: #727272;
        position: relative;
        padding: 4px 25px 4px 10px
    }

        .filtered-by span i {
            background: url(../images/close-blue.svg) no-repeat;
            position: absolute;
            top: 8px;
            right: 10px;
            cursor: pointer;
            width: 8px;
            height: 8px;
            background-size: 8px
        }

.result-instance {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #fcfcfc;
    border: 1px solid #dedede;
    padding: 15px;
    margin-bottom: 20px;
    position: relative
}

    .result-instance .result-pic {
        margin-bottom: 10px;
        text-align: center
    }

        .result-instance .result-pic img {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            display: inline-block
        }

    .result-instance .name span {
        font: 700 18px "Rubik",sans-serif;
        text-transform: uppercase;
        color: var(--theme-colour1);
        display: block;
        margin-bottom: 5px
    }

    .result-instance .name em {
        font: 400 12px "Rubik",sans-serif;
        color: #797979;
        font-style: normal;
        display: block;
        margin-bottom: 5px
    }

    .result-instance p {
        font: 400 12px "Rubik",sans-serif;
        line-height: 22px;
        color: #858585
    }

        .result-instance p a {
            color: var(--theme-colour1);
            text-transform: capitalize;
            text-decoration: underline;
            margin-left: 5px
        }

    .result-instance .tags {
        border-top: 1px solid #eeeded;
        border-bottom: 1px solid #eeeded;
        padding: 5px 0;
        margin-bottom: 10px
    }

        .result-instance .tags span {
            font: 400 14px "Rubik",sans-serif;
            color: #4d4d4d;
            display: inline-block;
            margin-right: 15px;
            text-transform: capitalize;
            position: relative
        }

            .result-instance .tags span strong {
                display: inline-block;
                color: #282828;
                margin-left: 10px;
                font-weight: 400
            }

            .result-instance .tags span:after {
                position: absolute;
                top: -1px;
                right: -9px;
                content: '|';
                color: #898989
            }

            .result-instance .tags span:last-child {
                margin-right: 0
            }

                .result-instance .tags span:last-child:after {
                    display: none
                }

    .result-instance .connected {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        text-align: center
    }

        .result-instance .connected a, .result-instance .connected button {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            font: 400 14px "Rubik",sans-serif;
            text-transform: capitalize;
            border: 1px solid transparent;
            padding: 4px 0;
            margin-bottom: 10px;
            display: block;
            overflow: hidden;
            position: relative
        }

        .result-instance .connected .short, .result-instance .connected .like, .result-instance .connected .contact, .result-instance .connected .login-to-view {
            border: 1px solid #bfbfbf;
            background: #fcfcfc;
            color: #949494
        }

            .result-instance .connected .short span, .result-instance .connected .like span, .result-instance .connected .contact span, .result-instance .connected .login-to-view span {
                padding-left: 25px;
                position: relative
            }

                .result-instance .connected .short span:before, .result-instance .connected .like span:before, .result-instance .connected .contact span:before, .result-instance .connected .login-to-view span:before {
                    position: absolute;
                    top: 1px;
                    left: 0;
                    content: '';
                    width: 15px;
                    height: 15px
                }

                .result-instance .connected .short span:before {
                    background: url(../images/heart-grey.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .short.active {
                border-color: #f00;
                color: #f00
            }

                .result-instance .connected .short.active span:before {
                    background: url(../images/heart-filled-red.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .like span:before {
                background: url(../images/like-grey.svg) no-repeat;
                background-size: 15px
            }

            .result-instance .connected .like.active {
                border-color: #1696e8;
                color: #1696e8
            }

                .result-instance .connected .like.active span:before {
                    background: url(../images/like-blue.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .contact span:before {
                background: url(../images/phone-grey.svg) no-repeat;
                background-size: 15px
            }

            .result-instance .connected .contact.active {
                border-color: #369623;
                color: #369623
            }

                .result-instance .connected .contact.active span:before {
                    background: url(../images/phone-green.svg) no-repeat;
                    background-size: 15px
                }

        .result-instance .connected .view, .result-instance .connected .login-to-view {
            background: var(--theme-colour1);
            color: var(--white)
        }

    .result-instance .result-desc[data-logged="0"] .connected .contact, .result-instance .result-desc[data-logged="0"] .connected .short {
        display: none
    }

    .result-instance .result-desc[data-logged="0"] .connected .login-to-view {
        display: inline-block
    }

    .result-instance .result-desc[data-logged="1"] .connected .contact {
        display: inline-block
    }

    .result-instance .result-desc[data-logged="1"] .connected .login-to-view {
        display: none
    }

    .result-instance .chat-now {
        position: absolute;
        top: 10px;
        right: 15px
    }

.default-container {
    padding: 0px !important;
    overflow: hidden;
    margin: 30px 0px
}

    .default-container .default-pad {
        padding: 0
    }

    .default-container .search-wrapper {
        width: 100%
    }

.find-match {
    background: #eee;
    padding: 15px 15px 0;
    margin-top: 30px
}

    .find-match .head {
        font: 400 20px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        text-align: left;
        line-height: 22px
    }

        .find-match .head span {
            display: block
        }

            .find-match .head span:nth-child(2) {
                font-size: 28px
            }

            .find-match .head span:nth-child(3) {
                font: 700 30px "Rubik",sans-serif;
                margin-top: -4px
            }

    .find-match .inner {
        background: url(../images/find-match.jpg) no-repeat;
        padding: 30px 0 0 120px;
        background-position: bottom left;
        min-height: 210px;
        text-align: center
    }

        .find-match .inner img {
            margin: auto
        }

        .find-match .inner span {
            font: 400 14px "Rubik",sans-serif;
            color: #2a2a2a;
            text-transform: capitalize;
            margin: 10px 0;
            display: block
        }

        .find-match .inner a {
            display: block
        }

            .find-match .inner a img {
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px
            }

            .find-match .inner a:first-of-type {
                margin-bottom: 10px
            }

    .find-match .dummy-bg {
        background: url(../images/change-password-tab.png) no-repeat;
        background-position: center;
        background-color: var(--theme-colour1);
        height: 100px;
        margin: 2px -15px 0 -15px
    }

    .find-match.whit {
        background: var(--white);
        margin-bottom: 20px
    }

.faq-blocks .title {
    font: 400 16px "Rubik",sans-serif;
    color: #2e2e2e;
    display: block;
    text-transform: capitalize;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative
}

    .faq-blocks .title:after {
        position: absolute;
        bottom: 0;
        left: 50%;
        content: '';
        width: 24px;
        height: 1px;
        margin-left: -12px
    }

.faq-blocks [class^="col-"] {
    text-align: center;
    padding-top: 60px;
    position: relative;
    margin-bottom: 50px
}

    .faq-blocks [class^="col-"]:before {
        position: absolute;
        top: 0;
        left: 50%;
        content: '';
        margin-left: -20px;
        width: 40px;
        height: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(1) .title:after {
        background: #fb1e32
    }

    .faq-blocks [class^="col-"]:nth-child(2) .title:after {
        background: #05ce89
    }

    .faq-blocks [class^="col-"]:nth-child(3) .title:after {
        background: #22a0da
    }

    .faq-blocks [class^="col-"]:nth-child(4) .title:after {
        background: #dda624
    }

    .faq-blocks [class^="col-"]:nth-child(1):before {
        background: url(../images/heart-red.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(2):before {
        background: url(../images/tick-green.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(3):before {
        background: url(../images/keyhole.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(4):before {
        background: url(../images/telemarketer-gold.svg) no-repeat;
        background-size: 40px
    }

.faq-blocks p {
    font: 400 13px "Rubik",sans-serif;
    padding: 0 20px;
    color: #727272;
    line-height: 18px;
    text-align: center !important
}

.faq-call {
    border: 1px solid #ebebeb;
    border-left: none;
    border-right: none;
    padding: 20px 0;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px
}

@media (max-width: 767px) {
    .faq-call {
        flex-direction: column
    }
}

.faq-call span {
    font: 400 14px "Rubik",sans-serif;
    color: #646464;
    text-transform: capitalize;
    display: inline-block
}

@media (max-width: 767px) {
    .faq-call span {
        margin-bottom: 10px
    }
}

.faq-call strong {
    font: 400 24px "Rubik",sans-serif;
    display: block;
    color: var(--black);
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px
}

@media (max-width: 767px) {
    .faq-call strong {
        margin-bottom: 30px
    }
}

.faq-call strong a {
    color: var(--black);
    text-decoration: none
}

.faq-call strong span {
    margin-right: 0
}

    .faq-call strong span svg path {
        fill: var(--theme-colour1)
    }

.faq-search .title {
    font: 400 24px "Rubik",sans-serif;
    color: #646464;
    display: block;
    text-transform: capitalize;
    margin-bottom: 25px
}

.faq-searchbox {
    border: none;
    position: relative;
    height: 40px;
    margin-bottom: 15px
}

    .faq-searchbox input[type="text"] {
        width: 100%;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding-left: 12px
    }

    .faq-searchbox .submit-holder {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        background: var(--theme-colour1);
        text-align: center;
        height: 40px;
        width: 160px;
        border: none;
        border-radius: 0 8px 8px 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 0.4s
    }

@media (max-width: 767px) {
    .faq-searchbox .submit-holder {
        width: 130px
    }
}

.faq-searchbox .submit-holder:hover {
    background-color: var(--theme-colour2)
}

.faq-searchbox .submit-holder input[type="submit"] {
    opacity: 0;
    z-index: 10
}

.faq-searchbox .submit-holder span {
    font: 400 20px "Rubik",sans-serif;
    color: var(--white);
    text-transform: uppercase;
    position: relative;
    padding-right: 0px;
    line-height: 37px;
    display: flex;
    align-items: center;
    gap: 8px
}

.faq-searchbox .submit-holder .icn {
    display: flex;
    height: fit-content
}

    .faq-searchbox .submit-holder .icn svg path {
        fill: var(--white)
    }

.common-list ul {
    margin: 0;
    padding: 0 0 0 35px
}

    .common-list ul li {
        font: 400 14px "Rubik",sans-serif;
        color: #2d2d2d;
        margin-bottom: 10px;
        list-style: none;
        padding-left: 10px;
        position: relative
    }

        .common-list ul li:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '-'
        }

        .common-list ul li a {
            color: var(--theme-colour1)
        }

.common-list.inverse ul {
    padding-left: 0
}

    .common-list.inverse ul li {
        font: 400 14px "Rubik",sans-serif
    }

.result-wrapper {
    border-bottom: 1px solid #afafaf;
    margin-bottom: 30px
}

.new-user .title {
    font: 400 20px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--black);
    margin-bottom: 10px;
    min-height: 48px;
    display: flex;
    align-items: center
}

.side-communities {
    text-align: center;
    margin: 10px 0
}

    .side-communities a {
        font: 400 16px "Rubik",sans-serif;
        padding: 15px 0;
        display: block;
        text-transform: capitalize;
        background: #e7e7e7;
        color: var(--black);
        border-bottom: 1px solid #e0dfdf
    }

        .side-communities a:last-child {
            border-bottom: none
        }

.intimate-join {
    min-height: 195px;
    background: #f0eeee;
    padding: 80px 15px 20px;
    position: relative;
    text-align: center
}

    .intimate-join:before {
        position: absolute;
        top: 15px;
        left: 50%;
        background: url(../images/diadem-black.png) no-repeat;
        content: '';
        width: 106px;
        height: 62px;
        background-size: 106px 62px;
        margin-left: -53px
    }

    .intimate-join .title {
        font: 700 20px "Rubik",sans-serif;
        display: block;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .intimate-join p {
        font: 400 12px "Rubik",sans-serif;
        color: #181818;
        text-transform: uppercase;
        text-align: center !important
    }

    .intimate-join a {
        font: 700 18px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        padding: 8px 30px;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase;
        border: 1px solid transparent;
        margin: auto
    }

.quick-edit {
    position: absolute;
    top: 16px;
    right: 45px;
    color: var(--theme-colour1);
    font-size: 12px !important;
    text-transform: capitalize;
    cursor: pointer;
    padding-left: 10px;
    z-index: 100;
    display: none
}

    .quick-edit:before {
        position: absolute;
        top: -1px;
        left: 0;
        content: '|';
        color: var(--theme-colour1)
    }

.accordion .panel, .default-accordion .panel, .advanced-accordion .panel {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    font: 400 16px "Rubik",sans-serif;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    border-color: var(--white);
    padding: 0px
}

    .accordion .panel.active, .default-accordion .panel.active, .advanced-accordion .panel.active {
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px
    }

.accordion .panel-body, .default-accordion .panel-body, .advanced-accordion .panel-body {
    padding: 0px !important;
    padding-top: 0
}

    .accordion .panel-body.panel-bodyFaq, .default-accordion .panel-body.panel-bodyFaq, .advanced-accordion .panel-body.panel-bodyFaq {
        padding-top: 10px !important;
        padding-bottom: 10px !important
    }

.accordion .panel-primary .panel-heading, .default-accordion .panel-primary .panel-heading, .advanced-accordion .panel-primary .panel-heading {
    background: transparent;
    border-color: transparent;
    color: #000
}

.accordion .panel-heading, .default-accordion .panel-heading, .advanced-accordion .panel-heading {
    position: relative;
    padding-left: 30px;
    color: #4f4f4f
}

    .accordion .panel-heading:before, .default-accordion .panel-heading:before, .advanced-accordion .panel-heading:before {
        background: url(../images/right-arrow-accordion.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        width: 14px;
        height: 14px;
        background-size: 14px;
        margin-top: -7px
    }

.accordion .active .panel-heading, .default-accordion .active .panel-heading, .advanced-accordion .active .panel-heading {
    color: var(--theme-colour1)
}

    .accordion .active .panel-heading:before, .default-accordion .active .panel-heading:before, .advanced-accordion .active .panel-heading:before {
        background: url(../images/down-arrow-accordion.svg) no-repeat;
        background-size: 14px
    }

.accordion .active .quick-edit, .default-accordion .active .quick-edit, .advanced-accordion .active .quick-edit {
    display: inline-block
}

.accordion p, .default-accordion p, .advanced-accordion p {
    @Include reg(14);
    text-align: justify;
    line-height: 22px;
    color: #2d2d2d
}

.accordion.discover-accordion .panel, .default-accordion.discover-accordion .panel, .advanced-accordion.discover-accordion .panel {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0
}

    .accordion.discover-accordion .panel:after, .default-accordion.discover-accordion .panel:after, .advanced-accordion.discover-accordion .panel:after {
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
        background: url(../images/right-arrow-black.svg) no-repeat;
        position: absolute;
        top: 19px;
        right: 17px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        content: '';
        width: 10px;
        height: 10px;
        background-size: 10px;
        pointer-events: none
    }

    .accordion.discover-accordion .panel.denote .panel-heading, .default-accordion.discover-accordion .panel.denote .panel-heading, .advanced-accordion.discover-accordion .panel.denote .panel-heading {
        background-color: #f3f3f3
    }

    .accordion.discover-accordion .panel.denote:after, .default-accordion.discover-accordion .panel.denote:after, .advanced-accordion.discover-accordion .panel.denote:after {
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .accordion.discover-accordion .panel.active, .default-accordion.discover-accordion .panel.active, .advanced-accordion.discover-accordion .panel.active {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0
    }

.accordion.discover-accordion .panel-primary, .default-accordion.discover-accordion .panel-primary, .advanced-accordion.discover-accordion .panel-primary {
    border: none;
    border-top: 1px solid #e1e1e1;
    margin: 0;
    position: relative
}

.accordion.discover-accordion .panel-heading, .default-accordion.discover-accordion .panel-heading, .advanced-accordion.discover-accordion .panel-heading {
    font: 400 14px "Rubik",sans-serif;
    background: var(--white);
    color: #000102;
    text-transform: capitalize;
    border: none;
    padding: 15px 0 15px 15px
}

    .accordion.discover-accordion .panel-heading:before, .default-accordion.discover-accordion .panel-heading:before, .advanced-accordion.discover-accordion .panel-heading:before {
        display: none
    }

.accordion.discover-accordion .panel-body, .default-accordion.discover-accordion .panel-body, .advanced-accordion.discover-accordion .panel-body {
    padding: 15px
}

.accordion.discover-accordion .upgrade-account a, .default-accordion.discover-accordion .upgrade-account a, .advanced-accordion.discover-accordion .upgrade-account a {
    margin-bottom: 8px;
    padding: 4px 0
}

.advanced-accordion .panel, .default-accordion.filter-accordion .panel, .tariff-accordion .panel {
    border-radius: 0;
    padding-left: 0;
    background: #efedee;
    border-color: #efedee;
    margin-bottom: 2px;
    box-shadow: none;
    position: relative
}

    .advanced-accordion .panel:after, .default-accordion.filter-accordion .panel:after, .tariff-accordion .panel:after {
        position: absolute;
        top: 13px;
        right: 15px;
        background: url(../images/as-plus.svg) no-repeat;
        content: '';
        width: 20px;
        height: 20px;
        background-size: 20px;
        pointer-events: none
    }

    .advanced-accordion .panel.active, .default-accordion.filter-accordion .panel.active, .tariff-accordion .panel.active {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: #f9f9f9;
        border-color: #f9f9f9
    }

        .advanced-accordion .panel.active:after, .default-accordion.filter-accordion .panel.active:after, .tariff-accordion .panel.active:after {
            background: url(../images/as-minus.svg) no-repeat;
            background-size: 20px
        }

.advanced-accordion .panel-primary .panel-heading, .default-accordion.filter-accordion .panel-primary .panel-heading, .tariff-accordion .panel-primary .panel-heading {
    font-size: 20px;
    padding-left: 15px;
    padding-right: 30px;
    text-transform: capitalize;
    cursor: pointer
}

    .advanced-accordion .panel-primary .panel-heading:before, .default-accordion.filter-accordion .panel-primary .panel-heading:before, .tariff-accordion .panel-primary .panel-heading:before {
        display: none
    }

.advanced-accordion .panel-body, .default-accordion.filter-accordion .panel-body, .tariff-accordion .panel-body {
    padding-left: 15px
}

.tariff-accordion .panel-primary .panel-heading {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: var(--theme-colour1);
    color: var(--white);
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 17px
}

.tariff-accordion .panel {
    margin-bottom: 0
}

    .tariff-accordion .panel.active {
        color: var(--white)
    }

    .tariff-accordion .panel:after {
        top: 8px
    }

.tariff-accordion .panel-body {
    padding: 0
}

.default-accordion.filter-accordion .panel {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #ededed;
    background: #f8f8f8
}

    .default-accordion.filter-accordion .panel:after {
        background: url(../images/filter-plus.svg) no-repeat;
        background-size: 15px;
        top: 18px;
        right: 20px
    }

    .default-accordion.filter-accordion .panel.active {
        background: #efefef
    }

        .default-accordion.filter-accordion .panel.active:after {
            background: url(../images/filter-minus.svg) no-repeat;
            background-size: 15px
        }

.default-accordion.filter-accordion .panel-primary .panel-heading, .default-accordion.filter-accordion .panel-primary .panel-location {
    font: 700 14px "Rubik",sans-serif;
    font-size: 14px;
    color: #2e2e2e;
    text-transform: uppercase;
    padding: 16px 45px 16px 16px
}

.accordion-wrapper {
    background: #f5f5f5;
    margin-bottom: 10px
}

    .accordion-wrapper .accordion-title {
        cursor: pointer;
        padding: 5px 5px 5px 10px;
        position: relative;
        display: flex;
        gap: 15px
    }

        .accordion-wrapper .accordion-title[data-open="0"] .plus {
            display: flex
        }

        .accordion-wrapper .accordion-title[data-open="0"] .mins {
            display: none
        }

        .accordion-wrapper .accordion-title[data-open="1"] .plus {
            display: none
        }

        .accordion-wrapper .accordion-title[data-open="1"] .mins {
            display: flex
        }

        .accordion-wrapper .accordion-title svg path {
            fill: var(--theme-colour1)
        }

    .accordion-wrapper .accordion {
        display: none;
        padding: 0 10px 15px
    }

.packages-container {
    padding: 30px 15px;
    background: var(--white);
    margin-bottom: 40px
}

    .packages-container .title {
        color: var(--theme-colour1);
        text-align: center
    }

        .packages-container .title span, .packages-container .title strong {
            display: block;
            text-transform: uppercase
        }

        .packages-container .title span {
            font: 400 20px "Rubik",sans-serif
        }

        .packages-container .title strong {
            font: 700 28px "Rubik",sans-serif;
            border-bottom: 1px solid var(--theme-colour1);
            margin-bottom: 10px;
            padding-bottom: 10px
        }

        .packages-container .title p {
            font: 400 14px "Rubik",sans-serif;
            text-align: center;
            color: var(--theme-colour1)
        }

.packages-slider {
    padding: 0 15px;
    margin-bottom: 10px
}

    .packages-slider .pack {
        border-top: 5px solid var(--theme-colour1);
        background: var(--white)
    }

        .packages-slider .pack.current-pack .items span {
            background: #f2f9ff;
            border-color: #dadada
        }

        .packages-slider .pack.current-pack .title, .packages-slider .pack.current-pack .title p strong {
            background: #f2f9ff
        }

        .packages-slider .pack .title {
            padding: 10px 15px;
            text-align: center
        }

            .packages-slider .pack .title span {
                font: 700 26px "Rubik",sans-serif;
                color: var(--theme-colour1);
                text-transform: uppercase;
                display: block;
                height: 68px
            }

            .packages-slider .pack .title p {
                text-align: center;
                position: relative
            }

                .packages-slider .pack .title p:after {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background: var(--theme-colour1);
                    content: ''
                }

                .packages-slider .pack .title p strong {
                    font: 400 18px "Rubik",sans-serif;
                    background: var(--white);
                    color: #3c3e3f;
                    position: relative;
                    z-index: 10;
                    display: inline-block;
                    padding: 0 15px
                }

            .packages-slider .pack .title em {
                font: 400 12px "Rubik",sans-serif;
                font-style: normal;
                color: var(--theme-colour1);
                display: inline-block;
                text-align: center
            }

        .packages-slider .pack .pack-price {
            background: var(--theme-colour1);
            padding: 10px 0;
            text-align: center
        }

            .packages-slider .pack .pack-price span {
                font: 700 25px "Rubik",sans-serif;
                color: var(--white);
                position: relative;
                padding-left: 30px
            }

                .packages-slider .pack .pack-price span:before {
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    background: url(../images/rupee-white.svg) no-repeat;
                    position: absolute;
                    top: 4px;
                    left: 0;
                    content: '';
                    border: 2px solid var(--white);
                    width: 25px;
                    height: 25px;
                    background-size: 12px;
                    background-position: center
                }

        .packages-slider .pack .items {
            text-align: center
        }

            .packages-slider .pack .items span {
                font: 400 16px "Rubik",sans-serif;
                display: block;
                padding: 10px 0;
                color: var(--black);
                text-transform: capitalize;
                border-bottom: 1px solid #f8f8f8
            }

                .packages-slider .pack .items span:after {
                    content: attr(data-count);
                    color: var(--theme-colour1);
                    padding-left: 10px
                }

            .packages-slider .pack .items.active span {
                border-color: #dadada;
                background: #f2f9ff
            }

            .packages-slider .pack .items .items-inner {
                display: none
            }

            .packages-slider .pack .items a {
                font: 400 14px "Rubik",sans-serif;
                background: var(--theme-colour1);
                color: var(--white);
                text-transform: uppercase;
                text-align: center;
                padding: 10px 0;
                display: block
            }

        .packages-slider .pack .make {
            background: var(--theme-colour1),10%;
            text-align: center;
            padding: 10px 0
        }

            .packages-slider .pack .make a {
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                border-radius: 25px;
                font: 400 18px "Rubik",sans-serif;
                display: inline-block;
                padding: 5px 45px;
                border: 1px solid var(--white);
                text-transform: uppercase;
                color: var(--white)
            }

.call {
    padding: 0 15px
}

    .call p {
        font: 400 26px "Rubik",sans-serif;
        padding: 30px;
        background: var(--theme-colour1);
        text-align: left;
        color: var(--white)
    }

        .call p a {
            font: 700 40px "Rubik",sans-serif;
            color: #fdd606;
            text-transform: capitalize;
            display: inline-block;
            margin-right: 15px
        }

.default-content {
    background: var(--white)
}

    .default-content .default-content-inner {
        padding: 0 15px
    }

.pay-title {
    font: 700 22px "Rubik",sans-serif;
    text-transform: uppercase;
    color: var(--theme-colour1);
    border-bottom: 1px solid var(--theme-colour1);
    margin-bottom: 10px
}

    .pay-title span {
        position: relative;
        display: inline-block;
        padding: 20px 20px 20px 40px
    }

        .pay-title span:before {
            background: url(../images/wallet.svg) no-repeat;
            position: absolute;
            top: 20px;
            left: 5px;
            content: '';
            width: 28px;
            height: 28px;
            background-size: 28px
        }

    .pay-title.ignored span:before {
        background: url(../images/ignored.svg) no-repeat;
        background-size: 28px
    }

.pay-form {
    padding-bottom: 50px
}

    .pay-form .relative:after {
        display: none
    }

    .pay-form .relative {
        margin-bottom: 0
    }

    .pay-form .holder {
        font-size: 16px;
        font-weight: 400;
        line-height: initial;
        color: #3D3D3D;
        margin-bottom: 8px;
        display: block;
        position: relative;
        font-style: normal
    }

    .pay-form input[type="text"], .pay-form textarea, .pay-form input[type="submit"] {
        width: 100%;
        height: 44px;
        border-radius: 3px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #BCBCBC;
        background-color: var(--white);
        outline: none
    }

        .pay-form input[type="text"]::placeholder, .pay-form textarea::placeholder, .pay-form input[type="submit"]::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #949191
        }

        .pay-form input[type="text"].disabled-textbox, .pay-form textarea.disabled-textbox, .pay-form input[type="submit"].disabled-textbox {
            background: #ccc;
            pointer-events: none;
            border-color: #afafaf
        }

    .pay-form input[type="submit"] {
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        width: auto;
        padding: 0 100px;
        background: var(--theme-colour1);
        color: var(--white);
        border-radius: 8px
    }

    .pay-form .typer {
        margin-bottom: 30px;
        padding: 0
    }

        .pay-form .typer.special-amount {
            padding-bottom: 20px
        }

        .pay-form .typer:before {
            background: url(../images/rupee-white.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 45px;
            height: 45px;
            background-size: 20px;
            background-color: var(--theme-colour1);
            background-position: center
        }

        .pay-form .typer input[type="text"] {
            font: 700 26px "Rubik",sans-serif;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            color: var(--theme-colour1);
            padding-left: 65px;
            height: 45px;
            border: none;
            border-bottom: 1px solid var(--theme-colour1);
            margin: 0
        }

    .pay-form textarea {
        resize: none;
        width: 100%;
        height: 130px;
        border-radius: 3px;
        padding: 16px 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #BCBCBC;
        background-color: var(--white);
        outline: none
    }

        .pay-form textarea::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #949191
        }

    .pay-form .field-validation-error {
        position: absolute;
        bottom: 0;
        left: 0;
        font: 400 12px "Rubik",sans-serif;
        color: #f00;
        display: block
    }

        .pay-form .field-validation-error:first-letter {
            text-transform: uppercase
        }

    .pay-form .pay-set, .pay-form .pay-reset {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        border: 1px solid transparent;
        height: 44px;
        width: 100%;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .pay-form .pay-set {
        background: var(--theme-colour1);
        color: var(--white)
    }

    .pay-form .pay-reset {
        background: var(--white);
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

.helper {
    font: 400 30px "Rubik";
    color: var(--white);
    line-height: 85px;
    background: var(--light2Bg) !important;
    display: flex
}

@media (max-width: 1199px) {
    .helper {
        color: #25282a;
        flex-direction: column
    }
}

@media (max-width: 767px) {
    .helper span {
        font-size: 25px
    }
}

@media (max-width: 1199px) {
    .helper div {
        height: auto;
        display: flex;
        width: 100%;
        line-height: initial;
        padding: 10px
    }
}

.helper em {
    font-size: 29px
}

@media (max-width: 767px) {
    .helper em {
        font-size: 24px
    }
}

.exclusive {
    margin-bottom: 40px
}

@media (max-width: 991px) {
    .exclusive {
        margin-bottom: 0px
    }
}

@media (max-width: 767px) {
    .exclusive {
        margin: 30px 0
    }
}

.exclusive .inner {
    padding: 25px 30px
}

@media (max-width: 767px) {
    .exclusive .inner {
        padding: 10px
    }
}

.exclusive p {
    font: 400 28px "Rubik",sans-serif;
    color: var(--black);
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 20px
}

@media (max-width: 767px) {
    .exclusive p {
        font-size: 24px
    }
}

@media (max-width: 480px) {
    .exclusive p {
        font-size: 20px
    }
}

.exclusive p em {
    font-style: normal;
    color: var(--theme-colour1)
}

.exclusive p strong {
    font: 400 38px "Rubik",sans-serif;
    display: block
}

@media (max-width: 767px) {
    .exclusive p strong {
        font-size: 33px
    }
}

@media (max-width: 480px) {
    .exclusive p strong {
        font-size: 28px
    }
}

.exclusive a {
    font: 400 16px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    padding: 8px 45px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--theme-colour1);
    border: 1px solid transparent;
    height: 44px;
    width: 235px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px
}

@media (max-width: 767px) {
    .exclusive a {
        margin-bottom: 0
    }
}

.confirmation-container {
    padding: 0 30px;
    background: var(--white)
}

@media (max-width: 480px) {
    .confirmation-container {
        padding: 0px
    }
}

.confirmation-container .innerWrap {
    padding: 0px 20px;
    width: 800px;
    max-width: 100%;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1)
}

    .confirmation-container .innerWrap .inner {
        padding: 50px 0px;
        height: 600px;
        box-shadow: none !important;
        width: 100% !important
    }

.confirmation-container .title {
    font: 400 24px "Rubik",sans-serif;
    color: var(--theme-colour1);
    display: block;
    background: var(--white);
    text-transform: uppercase;
    text-align: center;
    position: relative
}

    .confirmation-container .title span {
        background: var(--white);
        display: inline-block;
        position: relative;
        z-index: 10;
        padding: 0 15px
    }

    .confirmation-container .title:before {
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: var(--theme-colour1);
        z-index: 1
    }

.confirmation-container .c-details {
    margin: 20px 0
}

    .confirmation-container .c-details span, .confirmation-container .c-details em {
        font: 400 15px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #2d2d2d
    }

    .confirmation-container .c-details em {
        font-style: normal;
        color: var(--theme-colour1)
    }

        .confirmation-container .c-details em.lowercase {
            text-transform: lowercase;
            word-break: break-all
        }

.confirmation-container button {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 22px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: var(--white);
    padding: 2px 30px;
    display: inline-block;
    border: 1px solid var(--theme-colour1);
    margin-top: 20px;
    text-transform: uppercase
}

.payment-container {
    padding: 30px;
    background: var(--white)
}

    .payment-container .wrapper {
        padding: 80px 0
    }

    .payment-container .inner {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: 90px 30px 30px;
        background: var(--white);
        position: relative;
        border: 1px solid var(--theme-colour1);
        text-align: center
    }

        .payment-container .inner:before {
            position: absolute;
            top: -30px;
            left: 50%;
            content: '';
            margin-left: -42px;
            width: 84px;
            height: 84px
        }

        .payment-container .inner.success:before {
            background: url(../images/success-tick.png) no-repeat;
            background-size: 84px
        }

        .payment-container .inner.failure:before {
            background: url(../images/success-cross.png) no-repeat;
            background-size: 84px
        }

        .payment-container .inner p {
            font: 700 24px "Rubik",sans-serif;
            text-transform: uppercase;
            color: var(--theme-colour1);
            text-align: center
        }

            .payment-container .inner p strong {
                font: 400 18px "Rubik",sans-serif;
                display: block
            }

            .payment-container .inner p.error-desc {
                font: 400 14px "Rubik",sans-serif;
                color: var(--black);
                margin-top: 40px;
                text-transform: capitalize
            }

                .payment-container .inner p.error-desc strong {
                    font: 700 28px "Rubik",sans-serif;
                    color: var(--theme-colour1);
                    display: block;
                    margin-bottom: 10px
                }

                    .payment-container .inner p.error-desc strong:first-letter {
                        text-transform: uppercase
                    }

        .payment-container .inner .pay-name {
            font: 400 28px "Rubik",sans-serif;
            text-transform: capitalize;
            display: block;
            text-align: center;
            color: var(--black);
            margin: 40px 0 20px
        }

        .payment-container .inner em {
            font: 400 14px "Rubik",sans-serif;
            color: var(--black);
            display: block;
            vertical-align: middle;
            font-style: normal;
            text-align: center;
            margin-bottom: 5px
        }

            .payment-container .inner em i {
                font-style: normal;
                position: relative;
                padding-left: 30px
            }

                .payment-container .inner em i:before {
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 16px;
                    height: 16px
                }

            .payment-container .inner em:nth-of-type(1) i:before {
                background: url(../images/envelope.svg) no-repeat;
                background-size: 16px
            }

            .payment-container .inner em:nth-of-type(2) i:before {
                background: url(../images/phone-blue.svg) no-repeat;
                background-size: 16px
            }

        .payment-container .inner .pay-amount {
            background: var(--theme-colour1);
            color: var(--white);
            display: block;
            padding: 15px;
            text-align: center;
            margin: 40px 0 20px
        }

            .payment-container .inner .pay-amount span {
                font: 400 24px "Rubik",sans-serif;
                display: block;
                vertical-align: middle;
                text-transform: uppercase
            }

                .payment-container .inner .pay-amount span:nth-child(1) {
                    border-bottom: 1px solid var(--white)
                }

                .payment-container .inner .pay-amount span i {
                    font-style: normal;
                    position: relative;
                    padding-left: 20px
                }

                    .payment-container .inner .pay-amount span i:before {
                        background: url(../images/rupee-white.svg) no-repeat;
                        position: absolute;
                        top: 9px;
                        left: 0;
                        content: '';
                        width: 16px;
                        height: 16px;
                        background-size: 16px
                    }

.ignored-container {
    padding: 0 30px;
    background: var(--white)
}

    .ignored-container .inner {
        background: #fefdfd;
        padding-bottom: 20px
    }

    .ignored-container .message-item {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        background: var(--white);
        margin: 15px 0;
        padding: 30px
    }

    .ignored-container .message-content .head .names .user.verified {
        padding-right: 25px;
        position: relative;
        display: inline-block
    }

        .ignored-container .message-content .head .names .user.verified:after {
            background: url(../images/success.svg) no-repeat;
            position: absolute;
            bottom: 1px;
            right: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

.remove-ignore {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 12px "Rubik",sans-serif;
    display: inline-block;
    color: var(--theme-colour1);
    padding: 4px 20px;
    text-transform: capitalize;
    border: 1px solid var(--theme-colour1)
}

    .remove-ignore span {
        position: relative;
        padding-left: 20px
    }

        .remove-ignore span:before {
            background: url(../images/cancel-filled-red.svg) no-repeat;
            position: absolute;
            top: 1px;
            left: 0;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    .remove-ignore:hover {
        color: var(--theme-colour1)
    }

.edit-profile .p-profile-wrap .p-head-wrap {
    padding-right: 0
}

    .edit-profile .p-profile-wrap .p-head-wrap .p-for {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        color: #4f4f4f;
        display: block;
        margin: 10px 0
    }

.upgrade-account p {
    font: 400 14px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-align: left
}

    .upgrade-account p:first-letter {
        text-transform: uppercase
    }

.upgrade-account a {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font: 700 16px "Rubik",sans-serif;
    text-transform: uppercase;
    display: block;
    padding: 8px 30px;
    background: #fdd606;
    color: var(--theme-colour1);
    text-align: center;
    margin-bottom: 5px;
    border: 1px solid transparent
}

.hidden-overflow {
    overflow: hidden
}

.horoscope-section.extend {
    min-width: 430px
}

.horoscope-section .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr {
    border-right: 1px solid #333;
    background: var(--white)
}

.horoscope-section em.victim {
    font: 400 22px "Rubik",sans-serif;
    display: block;
    color: #fdd606;
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 15px
}

    .horoscope-section em.victim span {
        font: 400 12px "Rubik",sans-serif;
        display: inline-block;
        vertical-align: middle;
        color: var(--white);
        padding-left: 15px;
        text-transform: uppercase
    }

.sending-interest p {
    font-size: 16px;
    color: var(--white);
    margin: 10px 0;
    text-align: left
}

    .sending-interest p strong {
        font-size: 16px;
        text-transform: uppercase;
        color: #fdd606
    }

.sending-interest textarea {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 150px;
    padding: 10px 0 0 10px;
    resize: none;
    border: 1px solid transparent
}

.sending-interest .text-interest {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    background: #fdd606;
    color: var(--theme-colour1);
    border: 1px solid transparent;
    text-transform: uppercase;
    padding: 4px 30px;
    margin-top: 20px
}

.upgrade-pack {
    background: var(--theme-colour1);
    color: var(--white);
    text-align: center
}

    .upgrade-pack strong {
        color: #fdd606;
        text-transform: uppercase
    }

    .upgrade-pack .upgrade-title {
        margin-bottom: 20px
    }

        .upgrade-pack .upgrade-title em, .upgrade-pack .upgrade-title span {
            font: 400 14px "Rubik",sans-serif;
            display: block
        }

        .upgrade-pack .upgrade-title em {
            font-style: normal;
            display: block;
            position: relative;
            margin-bottom: 15px
        }

            .upgrade-pack .upgrade-title em:before {
                position: absolute;
                top: 50%;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: var(--white)
            }

            .upgrade-pack .upgrade-title em i {
                font-style: normal;
                display: inline;
                background: var(--theme-colour1);
                padding: 0 5px;
                position: relative;
                z-index: 10
            }

    .upgrade-pack .up {
        margin-bottom: 20px
    }

        .upgrade-pack .up p {
            font: 400 14px "Rubik",sans-serif;
            text-align: center;
            color: var(--white)
        }

            .upgrade-pack .up p span {
                display: block;
                margin-bottom: 10px;
                text-transform: uppercase
            }

    .upgrade-pack a {
        font: 400 15px "Rubik",sans-serif;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        background: #fdd606;
        color: var(--theme-colour1);
        display: inline-block;
        padding: 4px 30px;
        text-transform: uppercase;
        border-color: #fdd606
    }

.editor, .edit-location, .edit-edu-prof {
    z-index: 1000;
    display: none
}

    .editor .editor-title, .edit-location .editor-title, .edit-edu-prof .editor-title {
        font: 400 16px "Rubik",sans-serif;
        color: #fdd606;
        text-transform: uppercase;
        margin-bottom: 10px
    }

    .editor .relative, .edit-location .relative, .edit-edu-prof .relative {
        padding-top: 0
    }

    .editor p, .edit-location p, .edit-edu-prof p {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-bottom: 5px;
        color: var(--white)
    }

    .editor .editor-submit, .edit-location .editor-submit, .edit-edu-prof .editor-submit {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        background: #fdd606;
        color: var(--theme-colour1);
        display: inline-block;
        padding: 4px 30px;
        border: 1px solid transparent
    }

    .editor .text-center {
        display: none
    }

    .editor .select-dropdown {
        display: none
    }

        .editor .select-dropdown.open {
            display: block
        }

.back-dash {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    margin-top: 15px;
    display: inline-block;
    padding: 4px 30px;
    background: #fdd606;
    color: var(--theme-colour1);
    border: 1px solid transparent;
    text-transform: capitalize
}

.fb-form .register {
    background: var(--white);
    position: relative;
    float: none;
    width: 100%
}

.fb-form .select-dropdown.country-code select {
    border-bottom-color: #747474;
    color: var(--theme-colour1)
}

.fb-form .select-dropdown .caption {
    color: var(--theme-colour1)
}

.fb-form .title {
    color: var(--theme-colour1)
}

    .fb-form .title span, .fb-form .title em {
        display: block
    }

    .fb-form .title span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: capitalize
    }

        .fb-form .title span strong {
            font: 700 16px "Rubik",sans-serif
        }

    .fb-form .title em {
        font: 400 14px "Rubik",sans-serif
    }

    .fb-form .title p {
        font: 400 12px "Rubik",sans-serif;
        text-align: center;
        color: var(--theme-colour1)
    }

.fb-form #fb-submit {
    font: 400 15px "Rubik",sans-serif;
    position: relative;
    display: block;
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white);
    padding: 10px 0;
    text-transform: uppercase;
    margin-top: 10px
}

    .fb-form #fb-submit em {
        display: none
    }

    .fb-form #fb-submit input, .fb-form #fb-submit button {
        opacity: 0;
        cursor: pointer
    }

.upgrade-now {
    background: url(../images/upgrade-now.jpg) no-repeat;
    background-position: center;
    background-color: var(--theme-colour1);
    background-size: cover;
    text-align: center;
    min-height: 330px;
    padding: 30px;
    margin-bottom: 20px
}

    .upgrade-now p {
        font: 400 20px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        text-align: center;
        margin-bottom: 15px
    }

        .upgrade-now p strong {
            font: 700 20px "Rubik",sans-serif
        }

    .upgrade-now a {
        font: 700 16px "Rubik",sans-serif;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid transparent;
        display: inline-block;
        padding: 5px 30px;
        background: #e76045;
        color: var(--white);
        text-transform: uppercase;
        margin-top: 20px
    }

.overflow-v {
    overflow-x: visible
}

.default-goto {
    font: 400 15px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--theme-colour1);
    margin-top: 30px;
    display: inline-block;
    text-decoration: underline
}

.add-photo-crumb {
    font: 400 13px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-decoration: underline;
    text-transform: capitalize;
    margin-bottom: 25px
}

.advance-submit {
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white)
}

    .advance-submit span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        display: block;
        position: relative;
        padding: 12px 0
    }

        .advance-submit span input[type="submit"] {
            opacity: 0;
            cursor: pointer;
            z-index: 100
        }

        .advance-submit span em {
            position: relative;
            padding-right: 30px;
            font-style: normal
        }

            .advance-submit span em:after {
                position: absolute;
                top: 3px;
                right: 5px;
                background: url(../images/search-yellow.svg) no-repeat;
                content: '';
                width: 15px;
                height: 15px;
                background-size: 15px
            }

.advanced-p {
    font: 400 14px "Rubik",sans-serif;
    text-align: center;
    color: #a2a2aa;
    padding: 15px 30px;
    line-height: 20px
}

.advanced-accordion, .filter-accordion {
    font-size: 14px
}

.adv-relative {
    position: relative;
    margin-bottom: 30px
}

    .adv-relative i {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #2D2D2D;
        text-transform: capitalize;
        margin-bottom: 10px;
        display: block;
        font-style: inherit
    }

    .adv-relative .select2-container--default .select2-selection--multiple {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: transparent;
        border-color: #afafaf
    }

    .adv-relative .select2-results__option {
        float: left;
        padding: 0 15px
    }

    .adv-relative .pick-dates input[type="text"] {
        width: 100%;
        height: 32px;
        border: none;
        border-bottom: 1px solid #afafaf;
        background: transparent
    }

.gender-switch {
    overflow: hidden;
    height: 30px;
    position: relative
}

    .gender-switch.disabled * {
        pointer-events: none
    }

    .gender-switch span {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        display: block;
        width: 55%;
        height: 30px;
        display: inline-block;
        text-align: center;
        text-transform: capitalize;
        border: 1px solid #afafaf;
        position: absolute;
        line-height: 28px;
        top: 0;
        cursor: pointer
    }

        .gender-switch span:first-of-type {
            left: 0
        }

        .gender-switch span:last-of-type {
            right: 0
        }

        .gender-switch span.active {
            background: var(--theme-colour1);
            color: var(--white);
            z-index: 10;
            border-color: var(--theme-colour1)
        }

    .gender-switch input[type="radio"] {
        display: none
    }

.adv-select {
    position: relative;
    display: block
}

    .adv-select:after {
        background: url(../images/down-arrow-accordion.svg) no-repeat;
        position: absolute;
        top: 7px;
        right: 15px;
        width: 15px;
        height: 15px;
        background-size: 15px;
        content: '';
        pointer-events: none
    }

    .adv-select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        border-bottom: 1px solid #afafaf;
        height: 30px;
        width: 100%;
        background: transparent;
        padding-left: 10px
    }

    .adv-select.rounded select {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid #afafaf
    }

    .adv-select.contact-inverse select {
        font: 400 12px "Rubik",sans-serif;
        padding-left: 0;
        border-bottom-color: #747477;
        color: #525151
    }

.adv-age em {
    font: 400 13px "Rubik",sans-serif;
    font-style: normal;
    display: block;
    margin: 5px 0;
    text-align: center
}

.adv-save input[type="text"] {
    width: 100%;
    height: 32px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #afafaf;
    margin: 0px 28px 20px
}

.adv-save a {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #057DC4;
    text-decoration: underline;
    text-transform: capitalize
}

.adv-save .save-search {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 14px;
    background: var(--theme-colour1);
    display: inline-block;
    color: #ffffff;
    white-space: nowrap;
    padding: 5px 20px;
    border: none;
    text-transform: capitalize
}

.adv-save p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #494949;
    text-align: left
}

.saved-searches {
    padding: 20px 8px 25px 15px;
    background: var(--lightBg);
    margin-bottom: 15px;
    color: var(--theme-text-colour);
    overflow: hidden
}

    .saved-searches .title {
        font: 700 16px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-bottom: 15px
    }

    .saved-searches .instance {
        text-transform: capitalize;
        margin-bottom: 15px
    }

        .saved-searches .instance span {
            font: 400 12px "Rubik",sans-serif;
            display: block;
            margin-bottom: 5px
        }

        .saved-searches .instance a {
            font: 400 12px "Rubik",sans-serif;
            display: inline-block;
            color: var(--theme-colour1);
            position: relative;
            padding-right: 15px
        }

            .saved-searches .instance a:after {
                position: absolute;
                top: -1px;
                right: 5px;
                content: '|';
                color: #e7e7e7
            }

            .saved-searches .instance a:last-of-type {
                padding-right: 0
            }

                .saved-searches .instance a:last-of-type:after {
                    display: none
                }

            .saved-searches .instance a:hover {
                text-decoration: underline
            }

    .saved-searches .ss-viewall {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 12px "Rubik",sans-serif;
        background: #fdd606;
        color: var(--theme-colour1);
        padding: 0 15px;
        border: 1px solid transparent;
        text-transform: capitalize
    }

#filter-mobile, #filter-close {
    font: 700 14px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: #fdd606;
    display: block;
    text-align: center;
    padding: 5px 0;
    text-transform: uppercase
}

#filter-close {
    position: relative
}

    #filter-close span {
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/close-white.svg) no-repeat;
        width: 28px;
        height: 28px;
        display: inline-block;
        background-size: 12px;
        background-position: center;
        cursor: pointer
    }

.edit-select select, .filter-single select {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    border: 1px solid var(--theme-colour1);
    padding-left: 10px
}

.edit-select .select-appearance, .filter-single .select-appearance {
    display: block;
    position: relative
}

    .edit-select .select-appearance:after, .filter-single .select-appearance:after {
        position: absolute;
        top: 14px;
        right: 15px;
        pointer-events: none;
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid var(--theme-colour1)
    }

.filter-section {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 10000;
    overflow-y: scroll;
    display: none
}

    .filter-section .title {
        display: none
    }

    .filter-section .scrollbar-inner > .scroll-element.scroll-y {
        right: 0
    }

.filter-accordion a, .more-filters a {
    font: 400 13px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--theme-colour1);
    display: block
}

    .filter-accordion a.active, .more-filters a.active {
        text-decoration: underline
    }

    .filter-accordion a:hover, .more-filters a:hover {
        text-decoration: underline
    }

    .filter-accordion a.more {
        text-align: right;
        padding-right: 10px
    }

.filter-slider {
    position: relative;
    padding: 0 15px 20px 11px
}

    .filter-slider em {
        font: 400 12px "Rubik",sans-serif;
        color: var(--theme-colour1);
        position: absolute;
        bottom: 0
    }

        .filter-slider em:first-of-type {
            left: 2px
        }

        .filter-slider em:last-of-type {
            right: 10px
        }

.filter-single {
    padding-right: 10px;
    padding-left: 2px
}

    .filter-single select {
        background: transparent
    }

.hide-filter {
    display: none
}

.more-filters {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 20000;
    display: none
}

    .more-filters .inner-title {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        background: var(--theme-colour1);
        color: var(--white);
        position: relative;
        padding: 12px 85px 12px 15px
    }

        .more-filters .inner-title input[type="submit"], .more-filters .inner-title a {
            position: absolute;
            top: 0;
            display: block;
            width: 40px;
            height: 100%;
            border: none
        }

        .more-filters .inner-title input[type="submit"] {
            background: url(../images/tick-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            right: 49px
        }

        .more-filters .inner-title a {
            background: url(../images/close-white.svg) no-repeat;
            background-size: 15px;
            background-position: center;
            right: 8px
        }

    .more-filters .inner {
        padding: 15px;
        background: #efefef
    }

    .more-filters .scrollbar-inner {
        height: 100vh
    }

        .more-filters .scrollbar-inner .scroll-element .scroll-bar {
            background: #ccc
        }

.checkers, .all-checker {
    font: 400 13px "Rubik",sans-serif;
    padding-left: 22px;
    position: relative;
    text-transform: capitalize;
    margin-bottom: 2px;
    color: var(--theme-colour1)
}

    .checkers input[type="checkbox"], .all-checker input[type="checkbox"] {
        display: none
    }

    .checkers i {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: absolute;
        top: 1px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid var(--theme-colour1);
        display: inline-block;
        cursor: pointer
    }

        .checkers i[data-status="1"] {
            background: url(../images/tick-blue.svg) no-repeat;
            background-size: 10px;
            background-position: center
        }

        .checkers i[data-status="0"] {
            background: none
        }

    .all-checker em {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: absolute;
        top: 1px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid var(--theme-colour1);
        display: inline-block;
        cursor: pointer
    }

        .all-checker em[data-all="1"] {
            background: url(../images/tick-blue.svg) no-repeat;
            background-size: 10px;
            background-position: center
        }

        .all-checker em[data-all="0"] {
            background: none
        }

    .all-checker .checkers-inner {
        margin: 10px 0
    }

.filter-location {
    cursor: pointer
}

    .filter-location span {
        font: 700 12px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #333
    }

    .filter-location p {
        font: 400 12px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

.misc-title {
    font: 400 18px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-transform: capitalize;
    margin-bottom: 15px
}

    .misc-title span {
        position: relative;
        padding-right: 30px
    }

        .misc-title span:after {
            background: url(../images/faq-after.svg) no-repeat;
            position: absolute;
            top: 3px;
            right: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

.hype {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #004e93;
    overflow: hidden;
    margin-bottom: 20px
}

    .hype p {
        padding: 50px 30px;
        position: relative;
        color: var(--white);
        margin-bottom: 0
    }

        .hype p:before, .hype p:after {
            position: absolute;
            content: '';
            width: 30px;
            height: 30px
        }

        .hype p:before {
            background: url(../images/quote-left-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            top: 15px
        }

        .hype p:after {
            background: url(../images/quote-right-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            bottom: 15px
        }

.royale {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: url(../images/royale-bg.jpg) no-repeat;
    border: 1px solid #e3e3e3;
    background-position: center bottom;
    background-size: cover;
    margin-bottom: 20px;
    padding-bottom: 30px
}

    .royale .diadem {
        display: block;
        position: relative;
        text-align: center;
        padding: 80px 0 15px
    }

        .royale .diadem span, .royale .diadem em {
            color: #292929;
            text-transform: uppercase
        }

        .royale .diadem span {
            font: 700 16px "Rubik",sans-serif;
            margin-bottom: 5px;
            display: block
        }

        .royale .diadem em {
            font: 400 12px "Rubik",sans-serif
        }

        .royale .diadem:before {
            position: absolute;
            top: 25px;
            left: 50%;
            background: url(../images/diadem.png) no-repeat;
            background-size: 76px 45px;
            content: '';
            width: 76px;
            height: 45px;
            margin-left: -38px
        }

        .royale .diadem:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 30px;
            height: 3px;
            background: var(--theme-colour1);
            content: '';
            margin-left: -15px
        }

.select2-locked {
    pointer-events: none;
    opacity: 0.5
}

.messages-contact {
    text-align: left
}

    .messages-contact div.blocked {
        margin-bottom: 5px
    }

        .messages-contact div.blocked:last-of-type {
            margin-bottom: 0
        }

    .messages-contact span, .messages-contact p {
        font: 400 12px "Rubik",sans-serif;
        color: var(--white)
    }

    .messages-contact span {
        display: block;
        text-transform: capitalize;
        text-decoration: underline
    }

    .messages-contact strong {
        font-weight: 700;
        color: #fdd606
    }

    .messages-contact em {
        font-size: 12px;
        padding-left: 15px;
        font-style: normal;
        text-transform: uppercase
    }

    .messages-contact p {
        text-align: left
    }

        .messages-contact p:first-letter {
            text-transform: uppercase
        }

.apply-now {
    margin-bottom: 30px
}

    .apply-now .title, .apply-now .ap-title {
        font: 700 24px "Rubik",sans-serif;
        color: var(--theme-colour1);
        display: block;
        margin-bottom: 10px;
        text-transform: capitalize
    }

    .apply-now .ap-title {
        font: 400 24px "Rubik",sans-serif
    }

    .apply-now input[type="submit"] {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        width: 100%;
        height: 52px;
        line-height: 52px;
        background: var(--theme-colour1);
        color: var(--white);
        border: 1px solid transparent
    }

    .apply-now.inverse .inner-flex {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

    .apply-now.inverse input[type="submit"], .apply-now.inverse a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid var(--theme-colour1);
        display: flex;
        justify-content: center;
        text-align: center;
        width: 45%;
        align-items: center;
        min-height: 46px;
        padding: 5px 0;
        text-transform: uppercase;
        height: auto
    }

    .apply-now.inverse.solo {
        padding-bottom: 30px
    }

    .apply-now .more {
        background: var(--lightBg);
        padding: 30px 30px 40px;
        margin-top: 30px
    }

        .apply-now .more p {
            font: 400 14px "Rubik",sans-serif;
            color: var(--theme-text-colour);
            margin-bottom: 20px
        }

            .apply-now .more p strong {
                color: var(--theme-colour1)
            }

        .apply-now .more .before {
            font: 400 14px "Rubik",sans-serif;
            border-bottom: 1px solid var(--theme-colour2);
            color: var(--theme-colour2);
            padding: 5px 0 8px 45px;
            position: relative;
            margin-bottom: 20px
        }

            .apply-now .more .before:before {
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
                width: 30px;
                height: 30px
            }

            .apply-now .more .before.one:before {
                background: url(../images/before-one.svg) no-repeat;
                background-size: 30px
            }

            .apply-now .more .before.two {
                margin-bottom: 0
            }

                .apply-now .more .before.two:before {
                    background: url(../images/before-two.svg) no-repeat;
                    background-size: 30px
                }

.highs ul {
    margin: 20px 0 0 0;
    padding: 0
}

.highs li {
    font: 400 14px "Rubik",sans-serif;
    color: #555;
    position: relative;
    padding-left: 55px;
    list-style: none;
    margin-bottom: 20px
}

    .highs li:before {
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        background: var(--theme-colour1);
        width: 35px;
        height: 1px
    }

.site-tables {
    margin: 20px 0
}

    .site-tables .table-title {
        font: 400 20px "Rubik",sans-serif;
        color: #212121;
        text-transform: capitalize;
        margin-bottom: 15px
    }

    .site-tables table {
        font: 400 14px "Rubik",sans-serif;
        margin-bottom: 30px;
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word
    }

        .site-tables table.no-mb {
            margin-bottom: 0
        }

        .site-tables table tr th, .site-tables table tr td {
            text-align: center;
            padding: 10px 5px;
            color: #5c5c5c
        }

        .site-tables table tr th {
            text-transform: uppercase;
            background: #ebebeb
        }

        .site-tables table tr td {
            text-transform: capitalize
        }

        .site-tables table.first tr th:first-child {
            background: var(--theme-colour1);
            color: var(--white)
        }

.here {
    background: var(--lightBg);
    padding: 30px
}

@media (max-width: 991px) {
    .here {
        margin: 30px 0
    }
}

.here .here-title {
    margin-bottom: 20px
}

    .here .here-title p {
        font: 700 20px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .here .here-title span {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-text-colour)
    }

.here .mail-call {
    margin-top: 30px
}

    .here .mail-call p {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-text-colour);
        text-transform: capitalize
    }

    .here .mail-call span {
        font: 400 15px "Rubik",sans-serif;
        color: var(--theme-text-colour)
    }

        .here .mail-call span a {
            color: var(--theme-colour1)
        }

            .here .mail-call span a:hover {
                color: #fdd606
            }

        .here .mail-call span em {
            font: 400 12px "Rubik",sans-serif;
            font-style: normal;
            color: var(--theme-text-colour)
        }

.here.inverse .here-title {
    margin-bottom: 10px
}

.career-apply {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: var(--lightBg);
    overflow: hidden;
    position: relative;
    padding: 70px 15px 55px;
    margin-bottom: 15px
}

    .career-apply .title {
        position: absolute;
        top: 15px;
        left: 0;
        font: 700 20px "Rubik",sans-serif;
        background: var(--light2Bg);
        color: var(--c2d);
        margin-bottom: 15px;
        display: block;
        width: 100%;
        padding: 5px 15px;
        text-transform: capitalize;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .career-apply p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-text-colour);
        line-height: 18px;
        text-align: justify;
        margin-bottom: 15px
    }

    .career-apply .desc {
        padding-left: 30px;
        display: block;
        position: relative
    }

        .career-apply .desc:before {
            background: url(../images/marker-yellow.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

        .career-apply .desc em {
            font: 400 14px "Rubik",sans-serif;
            color: var(--theme-text-colour);
            display: block;
            font-style: normal;
            text-transform: capitalize
        }

            .career-apply .desc em strong {
                color: var(--theme-colour1)
            }

            .career-apply .desc em:first-child {
                margin-bottom: 5px
            }

    .career-apply a {
        font: 400 16px "Rubik",sans-serif;
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase
    }

        .career-apply a:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

.load-more {
    margin: 25px 0;
    text-align: center
}

    .load-more a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font: 400 13px "Rubik",sans-serif;
        display: inline-block;
        padding: 4px 25px;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: capitalize;
        border: 1px solid transparent;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 160px;
        margin: auto;
        text-decoration: none
    }

.job-location, .published {
    font: 400 18px "Rubik",sans-serif;
    display: block;
    color: #3e3e3e;
    text-transform: capitalize;
    padding: 15px 0 15px 45px;
    border: 1px solid #b8b8b8;
    border-left: none;
    border-right: none;
    position: relative;
    margin: 10px 0
}

.published {
    padding: 15px 0;
    border: none;
    margin-top: 0;
    padding-top: 0
}

.job-location:before {
    background: url(../images/marker-blue.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 30px;
    height: 30px;
    background-size: 30px;
    margin-top: -15px
}

.searching-partner {
    background: var(--light2Bg);
    margin-bottom: 20px
}

    .searching-partner .title {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        padding: 10px;
        color: var(--c2d);
        text-transform: uppercase
    }

        .searching-partner .title strong {
            font: 700 50px "Rubik",sans-serif;
            display: block
        }

    .searching-partner .inner {
        padding: 15px 20px 10px;
        text-align: center
    }

        .searching-partner .inner img {
            margin: 10px auto
        }

    .searching-partner .matches {
        font: 400 20px "Rubik",sans-serif;
        color: var(--c2d);
        text-transform: uppercase;
        border: none
    }

        .searching-partner .matches strong {
            font: 700 40px "Rubik",sans-serif;
            display: block
        }

.radius-link {
    font: 700 18px "Rubik",sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white);
    text-transform: uppercase;
    padding: 8px 0;
    display: block;
    margin: 20px 0;
    border: 1px solid transparent
}

.file-upload {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    height: 40px;
    border: 1px solid #939393;
    text-align: center;
    overflow: hidden;
    margin: 15px 0 0;
    padding-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .file-upload span {
        font: 400 13px "Rubik",sans-serif;
        color: #818181;
        position: relative;
        padding-right: 25px;
        line-height: 28px;
        text-transform: capitalize
    }

        .file-upload span:after {
            position: absolute;
            top: 1px;
            right: 0;
            background: url(../images/upload-blue.svg) no-repeat;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    .file-upload input[type="file"] {
        opacity: 0;
        z-index: 100;
        cursor: pointer
    }

.file-ancestor .file-upload {
    margin: 15px;
    padding-bottom: 0
}

.file-ancestor .preview-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    display: grid;
    margin-top: 10px;
    padding: 4px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    column-gap: 10px;
    row-gap: 6px
}

.file-ancestor .add-more {
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in;
    position: relative;
    width: 100%;
    height: 100px;
    padding-top: 65px;
    float: left;
    border: 1px dashed var(--theme-colour1);
    display: none;
    margin-bottom: 5px;
    text-align: center
}

    .file-ancestor .add-more:hover {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        background: #fdd606
    }

    .file-ancestor .add-more span {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

    .file-ancestor .add-more:before {
        background: url(../images/add-more-blue.svg) no-repeat;
        position: absolute;
        top: 15px;
        left: 50%;
        content: '';
        width: 40px;
        height: 40px;
        background-size: 40px;
        margin: 0 0 0 -20px
    }

    .file-ancestor .add-more input[type="file"] {
        opacity: 0;
        z-index: 100;
        cursor: pointer
    }

.file-ancestor .show-more .add-more {
    display: block
}

.file-ancestor .preview {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.25);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    border: 1px solid #afafaf;
    width: 50%;
    height: 100px;
    float: left;
    overflow: hidden;
    margin-bottom: 5px;
    background-size: cover;
    background-position: center;
    position: relative
}

    .file-ancestor .preview .delete {
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.85);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.85);
        box-shadow: 0 0 10px rgba(0,0,0,0.85);
        position: absolute;
        top: 50%;
        left: 50%;
        background: url(../images/delete-white.svg) no-repeat;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-size: 15px;
        background-position: center;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
        border: 1px solid var(--white);
        background-color: var(--theme-colour1);
        display: inline-block;
        position: relative;
        cursor: pointer
    }

.discount {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: var(--theme-colour1);
    padding: 15px;
    text-align: center;
    z-index: 1000
}

    .discount .content {
        padding: 5px 30px 15px;
        border: 2px dashed var(--white);
        position: relative
    }

        .discount .content span {
            font: 700 30px "Rubik",sans-serif;
            color: var(--white);
            display: block
        }

        .discount .content p {
            font: 400 14px "Rubik",sans-serif;
            color: var(--white);
            text-align: center
        }

            .discount .content p:first-letter {
                text-transform: uppercase
            }

        .discount .content a.now {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: #fdd606;
            width: 75px;
            height: 75px;
            padding-top: 16px;
            display: inline-block;
            border: 1px solid transparent;
            color: #181818
        }

            .discount .content a.now em, .discount .content a.now i {
                font-style: normal;
                display: block;
                text-transform: uppercase
            }

            .discount .content a.now i {
                font: 700 12px "Rubik",sans-serif
            }

            .discount .content a.now em {
                font: 700 23px "Rubik",sans-serif
            }

    .discount a#close-discount {
        background: url(../images/close-white.svg) no-repeat;
        position: absolute;
        top: -15px;
        right: -15px;
        width: 44px;
        height: 44px;
        background-color: var(--theme-colour1);
        display: inline-block;
        background-size: 20px;
        background-position: center
    }

.file-upload-relative {
    padding: 0 0 15px;
    margin: 0 0 20px
}

.map-container {
    margin: 20px 0;
    background: var(--theme-colour1)
}

    .map-container .map-title {
        padding: 20px
    }

        .map-container .map-title .desc {
            margin-bottom: 20px
        }

            .map-container .map-title .desc p {
                font: 400 24px "Rubik",sans-serif;
                text-transform: capitalize;
                margin-bottom: 0;
                color: var(--white)
            }

            .map-container .map-title .desc span {
                font: 400 12px "Rubik",sans-serif;
                display: block;
                color: var(--white)
            }

        .map-container .map-title .map-relative {
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            height: 38px;
            position: relative;
            overflow: hidden
        }

            .map-container .map-title .map-relative input[type="text"] {
                padding-left: 20px;
                height: 100%;
                width: 100%;
                padding-right: 70px
            }

            .map-container .map-title .map-relative .submit-button {
                background: url(../images/search-blue.svg) no-repeat;
                position: absolute;
                top: 0;
                right: 0;
                background-color: #fdd606;
                width: 60px;
                height: 100%;
                background-size: 15px;
                background-position: center
            }

                .map-container .map-title .map-relative .submit-button .map-submit {
                    opacity: 0
                }

#intimate-map {
    width: 100%;
    height: 405px;
    text-align: center
}

.tdu {
    font-size: 18px
}

ul#ui-id-1 {
    margin: 0;
    padding: 0;
    background: var(--white)
}

    ul#ui-id-1 li {
        font: 400 14px "Rubik",sans-serif;
        list-style: none;
        padding: 5px;
        text-transform: capitalize
    }

.services-content p {
    line-height: 30px
}

.verify .inner, .verification .inner {
    display: none
}

    .verify .inner input[type="text"], .verification .inner input[type="text"] {
        width: 100%;
        height: 35px;
        border: none;
        border-bottom: 1px solid #afafaf
    }

    .verify .inner .add-hobby, .verification .inner .add-hobby {
        display: block
    }

    .verify .inner.shown, .verification .inner.shown {
        display: block
    }

.verification .outer {
    text-align: left
}

    .verification .outer .add-hobby {
        margin-top: 0
    }

    .verification .outer p {
        font: 400 16px "Rubik",sans-serif;
        margin-bottom: 15px;
        color: var(--white)
    }

.verification .inner input[type="text"] {
    border-color: var(--white);
    background: transparent
}

.verification .inner [placeholder] {
    color: var(--white) !important
}

.verification .inner a, .verification .inner button {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-block;
    background: #fdd606;
    color: var(--theme-colour1);
    padding: 2px 20px;
    text-transform: capitalize;
    margin-right: 15px
}

    .verification .inner a:last-child, .verification .inner button:last-child {
        margin-right: 0
    }

.verify-email .inner {
    display: block
}

.verify-email p {
    color: var(--white)
}

.ad-location {
    background: url(../images/ad-location.jpg) no-repeat;
    background-position: top center;
    padding: 280px 0 35px;
    background-color: var(--theme-colour1);
    text-align: center;
    margin-bottom: 20px
}

    .ad-location .location-title {
        font: 400 16px "Rubik",sans-serif;
        color: var(--white);
        text-transform: capitalize;
        margin-bottom: 20px
    }

        .ad-location .location-title span {
            display: block
        }

        .ad-location .location-title strong {
            font: 700 16px "Rubik",sans-serif
        }

    .ad-location a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        text-transform: capitalize;
        color: var(--white);
        border: 1px solid var(--white);
        display: inline-block;
        padding: 5px 30px
    }

.message-item {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #f5f4f4;
    padding: 15px 10px;
    overflow: hidden;
    margin-bottom: 15px
}

    .message-item.unread {
        background: #e4f1ff
    }

    .message-item .message-pic img, .message-item .message-pic .chat-now {
        display: inline-block;
        vertical-align: middle
    }

    .message-item .message-pic img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin: 0 0 10px
    }

span.quick-or {
    font: 400 16px "Rubik",sans-serif;
    margin: 0;
    display: block;
    text-align: center;
    text-transform: uppercase
}

    span.quick-or em {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: inline-block;
        border: 1px solid var(--theme-colour1);
        color: var(--theme-colour1);
        font-style: normal;
        padding-top: 9px;
        position: relative
    }

        span.quick-or em:before, span.quick-or em:after {
            width: 100px;
            height: 1px;
            background: var(--theme-colour1);
            content: '';
            position: absolute;
            top: 50%
        }

        span.quick-or em:before {
            left: 50%;
            margin-left: -150px
        }

        span.quick-or em:after {
            right: 50%;
            margin-right: -150px
        }

.ov-hidden {
    overflow: hidden
}

.side-panel .profileOfTheDay {
    position: relative;
    background: linear-gradient(169deg, #f3fbff 48%, #fff 34%);
    border-radius: 8px;
    border: 1px solid #F3F3F3;
    margin-bottom: 6px
}

@media (max-width: 991px) {
    .side-panel .profileOfTheDay {
        order: 0;
        margin-top: 12px
    }
}

.side-panel .profileOfTheDay.profileOfTheDayNo {
    background: transparent
}

.side-panel .profileOfTheDay .header {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--theme-colour1);
    padding: 20px 10px 0;
    text-align: center
}

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .header {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.side-panel .profileOfTheDay .photo {
    text-align: center;
    max-width: 141px;
    margin: auto
}

    .side-panel .profileOfTheDay .photo img {
        border: 2px dashed var(--theme-colour1);
        border-radius: 50%;
        padding: 10px;
        display: initial;
        width: 100%
    }

.side-panel .profileOfTheDay .footerData {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px
}

    .side-panel .profileOfTheDay .footerData .name {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #505050;
        margin-top: 8px
    }

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .footerData .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.side-panel .profileOfTheDay .footerData .subName {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #505050;
    margin-top: 8px
}

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .footerData .subName {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.side-panel .profileOfTheDay .buttonRow {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-bottom: 20px
}

    .side-panel .profileOfTheDay .buttonRow button {
        border: none;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        height: 45px;
        border: none;
        color: #434343;
        background-color: transparent;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        cursor: pointer
    }

        .side-panel .profileOfTheDay .buttonRow button:hover {
            background-color: #add3ea;
            color: var(--white)
        }

    .side-panel .profileOfTheDay .buttonRow .cmnBtn {
        width: 95px
    }

        .side-panel .profileOfTheDay .buttonRow .cmnBtn:last-child {
            color: var(--white);
            background-color: var(--theme-colour1)
        }

            .side-panel .profileOfTheDay .buttonRow .cmnBtn:last-child:hover {
                background-color: var(--theme-colour2)
            }

.panel-headingFaq {
    padding-left: 40px !important
}

    .panel-headingFaq::before {
        left: 19px !important;
        transition: ease-in-out .4s
    }

    .panel-headingFaq.activeFaq::before {
        transform: rotate(90deg)
    }

.panel-bodyFaq {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

@media (max-width: 480px) {
    .p-horo-table {
        width: 65% !important
    }
}

.default-popup .default-section .close-default-popup, .default-popup2 .default-section .close-default-popup {
    background-color: #484848
}

.slider.slider-horizontal .tooltip {
    -ms-transform: translateX(-24%) !important;
    transform: translateX(-24%) !important
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon:hover .status {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
    z-index: 1
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon .status {
    width: fit-content !important;
    min-width: 125px !important
}

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

@media only screen and (min-width: 480px) {
    .wrap, .all-communities {
        padding: 0 30px
    }

    .register .title .free, .register .title .with, .register .title .social {
        display: inline-block;
        vertical-align: middle;
        margin-top: 0;
        margin-bottom: 0
    }

    .register .title .free {
        margin-right: 10px
    }

    .register .title .social {
        padding-top: 5px
    }

    .find-match {
        margin: 20px auto 0;
        padding: 30px 30px 0
    }

        .find-match .dummy-bg {
            margin-left: -30px;
            margin-right: -30px
        }

    .overflow-v {
        overflow-x: hidden
    }

    .saved-searches {
        width: 460px;
        margin-left: auto;
        margin-right: auto
    }

    .searching-partner {
        width: 460px;
        margin: auto auto 20px
    }
}

@media only screen and (min-width: 480px) {
    .verify {
        padding: 0
    }

        .verify .inner {
            display: none
        }

            .verify .inner input[type="text"] {
                width: 100px;
                margin: 8px 0 0
            }

            .verify .inner.shown {
                display: -webkit-flex;
                display: -moz-flex;
                display: -ms-flex;
                display: -o-flex;
                display: flex;
                flex-direction: row
            }

                .verify .inner.shown input[type="text"], .verify .inner.shown .add-hobby {
                    margin-right: 10px
                }

                .verify .inner.shown .add-hobby {
                    height: 35px;
                    margin-top: 24px
                }

                    .verify .inner.shown .add-hobby:last-of-type {
                        margin-right: 0
                    }
}

.confirmation-container .c-details {
    display: flex;
    align-items: baseline
}

    .confirmation-container .c-details span, .confirmation-container .c-details em {
        display: inline-block !important;
        vertical-align: middle
    }

    .confirmation-container .c-details span {
        width: 50%
    }

@media (max-width: 991px) {
    .confirmation-container .c-details span {
        width: 40%
    }
}

@media (max-width: 767px) {
    .confirmation-container .c-details span {
        width: 30%
    }
}

@media (max-width: 550px) {
    .confirmation-container .c-details span {
        width: 200px
    }
}

.confirmation-container .c-details span:after {
    float: right;
    content: ':'
}

.confirmation-container .c-details em {
    padding-left: 30px
}

@media (max-width: 767px) {
    .confirmation-container .c-details em {
        width: 60%
    }
}

@media (max-width: 550px) {
    .confirmation-container .c-details em {
        width: 100%
    }
}

@media only screen and (min-width: 768px) {
    footer .premium {
        width: 100%;
        overflow: hidden
    }

    footer .footer-social a {
        display: inline-block;
        vertical-align: middle;
        margin: 0 15px 0 0
    }

        footer .footer-social a.app:first-of-type {
            margin-right: 30px
        }

        footer .footer-social a.app:last-of-type {
            margin-left: 20px
        }

        footer .footer-social a.social {
            margin: 0 10px 0 0
        }

    footer .privacy-terms {
        text-align: center;
        margin-top: 25px
    }

        footer .privacy-terms a {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 0;
            padding: 0 20px;
            border-right: 1px solid #f9f9f9
        }

            footer .privacy-terms a:last-child {
                border-right: none
            }

    .notify-popup .notify-content, .message-popup .notify-content {
        width: 500px
    }

    .message-popup .contact-section, .message-popup .horoscope-section {
        width: 700px
    }

        .message-popup .contact-section p a, .message-popup .horoscope-section p a {
            font: 400 14px "Rubik",sans-serif
        }

    .default-popup .default-section, .default-popup2 .default-section {
        width: 500px
    }

        .default-popup .default-section.fb-form, .default-popup2 .default-section.fb-form {
            width: 75%
        }

        .default-popup .default-section.service-details, .default-popup2 .default-section.service-details {
            width: 600px
        }

    .communities {
        overflow: hidden;
        padding-left: 30px;
        padding-right: 30px
    }

        .communities a {
            float: left
        }

            .communities a.all {
                margin-top: 15px
            }

        .communities .caste span {
            min-width: 0
        }

    .register-submit.inverse {
        width: 500px
    }

    .faq-title.short {
        font-size: 30px;
        margin-top: 0
    }

        .faq-title.short span {
            padding-top: 0
        }

    .result-instance .result-pic {
        text-align: left
    }

    .result-instance .name span, .result-instance .name em {
        display: inline-block;
        margin: 0
    }

    .result-instance .name span {
        margin-right: 15px
    }

    .result-instance .name em:after {
        content: '|';
        padding: 0 10px
    }

    .result-instance .name em:last-of-type:after {
        display: none
    }

    .result-instance .connected {
        flex-direction: row;
        justify-content: flex-start
    }

        .result-instance .connected a, .result-instance .connected button {
            padding: 4px 30px;
            margin: 0 10px 0 0
        }

            .result-instance .connected a:last-child, .result-instance .connected button:last-child {
                margin-right: 0
            }

    .faq-call {
        text-align: center
    }

        .faq-call span, .faq-call strong {
            margin: 0;
            display: inline-block;
            vertical-align: middle;
            margin-right: 30px
        }

    .pay-form .mt-adjust {
        margin-top: 43px
    }

    .pay-form .typer {
        margin: 0
    }

    .pay-form input[type="submit"] {
        margin-top: 8px
    }

    .payment-container .inner {
        width: 700px;
        margin-left: auto;
        margin-right: auto
    }

    .edit-profile .p-profile-wrap .p-head-wrap .p-hd, .edit-profile .p-profile-wrap .p-head-wrap .p-for, .edit-profile .p-profile-wrap .p-head-wrap .p-id, .edit-profile .p-profile-wrap .p-head-wrap .p-verified {
        display: inline-block;
        vertical-align: middle
    }

    .edit-profile .p-profile-wrap .p-head-wrap .p-for {
        padding: 0 15px;
        margin: 0 15px 0 -15px;
        border-left: 1px solid #919090;
        border-right: 1px solid #919090
    }

    .edit-profile .p-profile-wrap .p-head-wrap .p-hd:after {
        display: none
    }

    .confirmation-container .c-details span, .confirmation-container .c-details em {
        display: inline-block !important;
        vertical-align: middle
    }

    .confirmation-container .c-details span {
        width: 50%
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .confirmation-container .c-details span {
        width: 40%
    }
}

@media only screen and (min-width: 768px) and (max-width: 767px) {
    .confirmation-container .c-details span {
        width: 30%
    }
}

@media only screen and (min-width: 768px) {
    .confirmation-container .c-details span:after {
        float: right;
        content: ':'
    }

    .confirmation-container .c-details em {
        padding-left: 30px
    }

    .filter-section .filter-accordion {
        width: 700px;
        margin-left: auto;
        margin-right: auto
    }

    .messages-contact span, .messages-contact p {
        font: 400 14px "Rubik",sans-serif
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .go-help {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        margin-bottom: 15px;
        overflow: hidden
    }

        .go-help .go-to, .go-help .happy-help {
            margin: 0
        }

            .go-help .happy-help .title {
                margin-top: 50px
            }
}

@media only screen and (min-width: 992px) {
    .story-relative {
        position: relative;
        overflow: hidden
    }

        .story-relative .profile-absolute {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%
        }

            .story-relative .profile-absolute .profile-of-day {
                min-height: 0
            }

                .story-relative .profile-absolute .profile-of-day img {
                    margin-bottom: 0
                }

            .story-relative .profile-absolute a {
                height: calc(100% - 17px)
            }

    .side-communities.inverse a {
        float: left
    }

    .go-to {
        background-size: auto;
        background-position: top right
    }

    .search-wrapper {
        width: 900px;
        margin: 30px auto
    }

        .search-wrapper.common-search {
            width: 100%
        }

        .search-wrapper .search-criteria {
            width: calc(100% / 3);
            float: left;
            margin-bottom: 0
        }

            .search-wrapper .search-criteria:nth-of-type(1), .search-wrapper .search-criteria:nth-of-type(2), .search-wrapper .search-criteria:nth-of-type(4), .search-wrapper .search-criteria:nth-of-type(5) {
                border-right: none
            }

            .search-wrapper .search-criteria:nth-of-type(4), .search-wrapper .search-criteria:nth-of-type(5) {
                border-top: none
            }

            .search-wrapper .search-criteria:nth-of-type(6) {
                border-bottom: none
            }

    .search-by {
        margin-top: 25px
    }

    .search-tabs {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #d7d7d7
    }

        .search-tabs span {
            width: 150px;
            padding: 10px 0;
            text-align: center;
            display: inline-block
        }

            .search-tabs span:before {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                position: absolute;
                bottom: -7px;
                left: 0;
                content: '';
                width: 100%;
                height: 3px;
                background: var(--theme-colour1);
                opacity: 0
            }

            .search-tabs span.active {
                padding-left: 0
            }

                .search-tabs span.active:before {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    opacity: 1
                }

                .search-tabs span.active:after {
                    display: none
                }

    .exclusive {
        background: url(../images/exclusive-bg.jpg) no-repeat;
        background-repeat: repeat;
        border-bottom: 4px solid var(--theme-colour1)
    }

        .exclusive .inner {
            width: 60%;
            background: var(--white)
        }

    .flex-992 {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

        .flex-992 .adv-select {
            width: calc((100% / 2) - 15px)
        }

            .flex-992 .adv-select.straight {
                width: 100%
            }

    .here {
        margin: 0
    }

    .discount .content {
        padding-top: 15px
    }

        .discount .content span, .discount .content p, .discount .content a {
            display: inline-block;
            vertical-align: middle;
            margin: 0
        }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .intimate-join {
        margin-top: 30px
    }

    .side-panel .intimate-join {
        margin-top: 10px
    }

    .career-apply {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .career-apply p {
            height: 72px;
            text-overflow: ellipsis;
            overflow: hidden
        }

        .career-apply .title {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }
}

@media only screen and (min-width: 1200px) {
    .mobile {
        display: none !important
    }

    .desktop {
        display: block !important
    }

    a, input[type="submit"] {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        a:hover, input[type="submit"]:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

    .totop {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: url(../images/totop.svg) no-repeat;
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        position: fixed;
        right: 25px;
        bottom: 25px;
        width: 30px;
        height: 30px;
        background-color: var(--theme-colour1);
        background-size: 30px;
        z-index: 1000;
        opacity: 0.45;
        cursor: pointer
    }

        .totop:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            opacity: 0.5
        }

    .accordion-wrapper .accordion {
        padding: 0 40px 15px
    }

    .faq-searchbox .submit-holder {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        width: 210px
    }

        .faq-searchbox .submit-holder:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: var(--theme-colour1),15%
        }

    @-webkit-keyframes bluranimation {
        0% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(0.92);
            -moz-transform: scale(0.92);
            transform: scale(0.92)
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }
    }

    @-moz-keyframes bluranimation {
        0% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(0.92);
            -moz-transform: scale(0.92);
            transform: scale(0.92)
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }
    }

    @keyframes bluranimation {
        0% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }

        50% {
            -webkit-transform: scale(0.92);
            -moz-transform: scale(0.92);
            transform: scale(0.92)
        }

        100% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1)
        }
    }

    @-webkit-keyframes rotation {
        0% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }

        50% {
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            transform: rotateY(360deg)
        }

        100% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }
    }

    @-moz-keyframes rotation {
        0% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }

        50% {
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            transform: rotateY(360deg)
        }

        100% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }
    }

    @keyframes rotation {
        0% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }

        50% {
            -webkit-transform: rotateY(360deg);
            -moz-transform: rotateY(360deg);
            transform: rotateY(360deg)
        }

        100% {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }
    }

    @-webkit-keyframes aboutAnimation {
        0% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }

        50% {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%)
        }

        100% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }
    }

    @-moz-keyframes aboutAnimation {
        0% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }

        50% {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%)
        }

        100% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }
    }

    @keyframes aboutAnimation {
        0% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }

        50% {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%)
        }

        100% {
            -webkit-filter: grayscale(0%);
            -moz-filter: grayscale(0%);
            filter: grayscale(0%)
        }
    }

    .need-assistance a:hover {
        color: #fdd606,10%
    }

    .default-container {
        padding: 30px 50px
    }

    footer {
        background: url(../images/footer-strip.png) no-repeat;
        background-size: contain;
        padding: 40px 0 0;
        position: relative;
        overflow: hidden;
        background-color: transparent;
        background-position: top center;
        z-index: 1000
    }

        footer.no-bg {
            background: none;
            padding-top: 30px
        }

        footer .footer-content {
            background: var(--theme-colour1);
            padding: 50px 50px 30px;
            overflow: hidden
        }

        footer .premium {
            width: 800px;
            margin: auto auto 30px
        }

            footer .premium a span {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            footer .premium a:hover {
                -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.65);
                -moz-box-shadow: 0 0 10px rgba(0,0,0,0.65);
                box-shadow: 0 0 10px rgba(0,0,0,0.65);
                border-color: #fdd606
            }

                footer .premium a:hover span {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    background: var(--theme-colour1),10%;
                    color: #fdd606
                }

        footer .footer-links a {
            padding: 5px 5px 5px 25px;
            margin-bottom: 5px
        }

            footer .footer-links a:before, footer .footer-links a:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            footer .footer-links a:before {
                top: 8px
            }

            footer .footer-links a:after {
                position: absolute;
                bottom: 0;
                left: 25px;
                content: '';
                width: 0;
                height: 1px;
                background: #fdd606
            }

            footer .footer-links a:hover {
                color: #fdd606
            }

                footer .footer-links a:hover:before, footer .footer-links a:hover:after {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in
                }

                footer .footer-links a:hover:after {
                    width: 50px
                }

                footer .footer-links a:hover:before {
                    -webkit-transform: rotateY(-90deg);
                    -moz-transform: rotateY(-90deg);
                    transform: rotateY(-90deg)
                }

        footer .footer-social a:hover {
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.99);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.99);
            box-shadow: 0 0 20px rgba(0,0,0,0.99)
        }

        footer .footer-social a.social:hover {
            background-color: #fdd606
        }

        footer .privacy-terms a:hover {
            color: #fdd606
        }

        footer.search-results-page {
            margin-top: 250px;
            padding: 0;
            background: none
        }

    .find-match {
        width: 100%;
        margin-top: 0
    }

    .footnote span a:hover {
        color: #fdd606
    }

    .notify-popup .notify-content .ok:hover, .message-popup .notify-content .ok:hover {
        background: transparent;
        border-color: #fdd606;
        color: #fdd606
    }

    .message-popup .contact-section a:hover, .message-popup .horoscope-section a:hover {
        background: transparent;
        border-color: #fdd606;
        color: #fdd606
    }

    .confirm-deactivate a:hover, .confirm-deletion a:hover, .confirm-reactivate a:hover, .message a:hover {
        background: transparent;
        border-color: #fdd606;
        color: #fdd606
    }

    .about {
        background: url(../images/about-bg.jpg) no-repeat;
        background-position: bottom center;
        background-size: contain;
        padding: 40px 60px
    }

        .about .title strong {
            position: relative;
            padding-bottom: 5px
        }

            .about .title strong:after {
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: #fdd606
            }

        .about.inverse {
            background: url(../images/about-inverse-bg.jpg) no-repeat;
            background-size: contain;
            background-position: top center
        }

            .about.inverse .about-icon:before {
                -webkit-transition: all .3s ease-in;
                -moz-transition: all .3s ease-in;
                transition: all .3s ease-in
            }

            .about.inverse .about-icon:hover:before {
                -webkit-transition: all .3s ease-in;
                -moz-transition: all .3s ease-in;
                transition: all .3s ease-in;
                -webkit-transform: scale(1.25);
                -moz-transform: scale(1.25);
                transform: scale(1.25)
            }

    .about-register {
        background: url(../images/cheesy-couple2.jpg) no-repeat;
        background-size: 108px 107px;
        background-position: bottom right;
        background-color: #f3f3f3;
        position: relative
    }

        .about-register:before {
            position: absolute;
            bottom: 0;
            left: 0;
            background: url(../images/about-register-bg.jpg) no-repeat;
            width: 95px;
            height: 120px;
            background-size: 95px 120px;
            content: ''
        }

        .about-register a:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .about-intimate {
        background: url(../images/about-intimate-bg.jpg) no-repeat;
        background-size: contain;
        background-position: bottom center;
        padding: 60px 60px 60px 550px;
        position: relative;
        min-height: 400px
    }

        .about-intimate:before {
            -webkit-animation: aboutAnimation 4s infinite,linear;
            -moz-animation: aboutAnimation 4s infinite,linear;
            animation: aboutAnimation 4s infinite,linear;
            position: absolute;
            top: 50%;
            left: 60px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: url(../images/about-intimate1.jpg) no-repeat;
            content: '';
            width: 335px;
            height: 335px;
            background-size: 335px;
            margin-top: -168px
        }

    .communities {
        overflow: hidden;
        padding-left: 60px;
        padding-right: 60px
    }

        .communities a {
            margin-bottom: 0
        }

            .communities a.caste {
                margin-bottom: 0;
                text-align: left
            }

                .communities a.caste span:before {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in
                }

                .communities a.caste:hover {
                    color: #fdd606
                }

                    .communities a.caste:hover span:before {
                        -webkit-transition: all .4s ease-in;
                        -moz-transition: all .4s ease-in;
                        transition: all .4s ease-in;
                        -webkit-transform: rotateY(180deg);
                        -moz-transform: rotateY(180deg);
                        transform: rotateY(180deg)
                    }

            .communities a.all {
                text-align: right
            }

                .communities a.all span {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in
                }

                    .communities a.all span:hover {
                        -webkit-transition: all .4s ease-in;
                        -moz-transition: all .4s ease-in;
                        transition: all .4s ease-in;
                        background: var(--theme-colour1);
                        color: #fdd606;
                        border-color: #fdd606
                    }

    .basic {
        padding: 45px 50px 20px
    }

    .spanners {
        margin-top: 30px
    }

        .spanners [class^="col-"]:nth-child(1):after, .spanners [class^="col-"]:nth-child(2):after {
            position: absolute;
            top: 50%;
            right: 60px;
            content: '';
            width: 1px;
            height: 150px;
            margin-top: -75px;
            background: #a6c5e0
        }

        .spanners span:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

        .spanners span:hover:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg)
        }

    .default-popup .default-section.password-protect, .default-popup2 .default-section.password-protect {
        width: 700px
    }

    .default-popup .default-section.view-password, .default-popup2 .default-section.view-password {
        background: url(../images/view-password-bg.jpg) no-repeat;
        background-position: bottom right;
        background-color: var(--theme-colour1);
        background-size: 362px 128px
    }

    .default-popup .default-section.upgrade-pack, .default-popup2 .default-section.upgrade-pack {
        background: url(../images/upgrade-bg.jpg) no-repeat;
        background-position: center left;
        padding: 45px 45px 45px 380px;
        width: 920px;
        background-color: var(--theme-colour1)
    }

    .default-popup .default-section.fb-form, .default-popup2 .default-section.fb-form {
        background: url(../images/fb-bg.jpg) no-repeat;
        padding-left: 400px;
        background-position: top left;
        width: 900px;
        background-color: var(--white)
    }

    .password-protect {
        position: relative;
        overflow: hidden
    }

        .password-protect .inner {
            position: relative;
            z-index: 10;
            text-align: left;
            padding: 30px 0 30px 170px
        }

            .password-protect .inner:before {
                background: url(../images/password-protect-lock.png) no-repeat;
                position: absolute;
                top: 50%;
                left: 30px;
                content: '';
                width: 104px;
                height: 157px;
                background-size: 104px 157px;
                margin-top: -79px
            }

        .password-protect:before, .password-protect:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 222px;
            height: 220px;
            margin-top: -110px
        }

        .password-protect:before {
            background: url(../images/password-protect-before.jpg) no-repeat;
            background-size: 222px 220px;
            left: 0
        }

        .password-protect:after {
            background: url(../images/password-protect-after.jpg) no-repeat;
            background-size: 222px 220px;
            right: 0
        }

        .password-protect .close-default-popup {
            z-index: 10
        }

    .popup-buttons input[type="submit"], .popup-buttons a, .popup-buttons input[type="button"] {
        padding: 2px 45px
    }

        .popup-buttons input[type="submit"]:hover, .popup-buttons input[type="button"]:hover {
            background: transparent;
            color: var(--white);
            border-color: var(--white)
        }

        .popup-buttons a:hover {
            background: var(--white);
            color: var(--theme-colour1)
        }

        .popup-buttons a#erase-password:hover {
            background: transparent;
            color: #fdd606
        }

    .confirmation a:hover, .erase-password a:hover {
        background: var(--white);
        color: var(--theme-colour1)
    }

    .discover-profile .decisions a:first-child:hover, .discover-profile .decisions a:last-child:hover {
        border-color: #369623;
        background: #369623;
        color: var(--white)
    }

        .discover-profile .decisions a:first-child:hover span:before {
            background: url(../images/heart-filled-blue.svg) no-repeat;
            background-size: 12px
        }

        .discover-profile .decisions a:last-child:hover span:before {
            background: url(../images/cancel-filled-blue.svg) no-repeat;
            background-size: 12px
        }

    .discover-all:hover {
        color: #e76045
    }

    .content.all-communities {
        padding: 0 50px
    }

    .all-communities {
        padding: 0 50px
    }

        .all-communities [class^='col-'] {
            padding-left: 45px
        }

            .all-communities [class^='col-']:nth-of-type(1):after, .all-communities [class^='col-']:nth-of-type(2):after {
                position: absolute;
                top: 0;
                right: 45px;
                content: '';
                width: 1px;
                height: calc(100% - 20px);
                background: #e2ecf5
            }

            .all-communities [class^='col-']:nth-of-type(1) a:last-of-type, .all-communities [class^='col-']:nth-of-type(2) a:last-of-type {
                margin-bottom: 0
            }

        .all-communities a {
            margin-bottom: 30px
        }

            .all-communities a span {
                position: relative
            }

                .all-communities a span:before, .all-communities a span:after {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    position: absolute;
                    bottom: -4px;
                    content: '';
                    width: 0;
                    height: 1px;
                    background: var(--theme-colour1)
                }

                .all-communities a span:before {
                    right: 50%
                }

                .all-communities a span:after {
                    left: 50%
                }

            .all-communities a:hover {
                color: var(--theme-colour1)
            }

                .all-communities a:hover span:before, .all-communities a:hover span:after {
                    -webkit-transition: all .4s ease-in;
                    -moz-transition: all .4s ease-in;
                    transition: all .4s ease-in;
                    width: 50%
                }

        .all-communities p {
            background: url(../images/all-communities-bg.jpg) no-repeat;
            background-size: 85px;
            background-position: bottom right;
            background-color: #0a5191;
            padding: 35px 45px;
            text-align: center
        }

            .all-communities p strong {
                display: inline-block
            }

    .main-title {
        padding: 15px 35px
    }

    .cropper-wrapper.full-page {
        padding-right: 226px
    }

        .cropper-wrapper.full-page .crop-preview {
            position: absolute;
            top: 0;
            right: 0;
            width: 226px;
            height: 100%;
            display: table
        }

            .cropper-wrapper.full-page .crop-preview .v-align {
                display: table-cell;
                vertical-align: middle
            }

            .cropper-wrapper.full-page .crop-preview img {
                outline: 1px solid var(--white);
                outline-offset: 6px;
                display: block;
                margin: auto
            }

                .cropper-wrapper.full-page .crop-preview img#canvas1 {
                    margin-bottom: 30px;
                    width: 166px;
                    height: 164px
                }

                .cropper-wrapper.full-page .crop-preview img#canvas2 {
                    outline-offset: 3px;
                    width: 49px;
                    height: 49px
                }

        .cropper-wrapper.full-page a:hover {
            background: transparent;
            color: #fdd606;
            border-color: #fdd606
        }

    .profile-of-day img {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

    .profile-of-day:hover {
        background: var(--lightBg)
    }

        .profile-of-day:hover img {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg)
        }

    .misc-content {
        padding: 0px !important
    }

        .misc-content .communities {
            padding: 10px 15px
        }

            .misc-content .communities a.caste, .misc-content .communities a.all {
                font-size: 12px
            }

                .misc-content .communities a.caste span {
                    padding-left: 5px
                }

                    .misc-content .communities a.caste span.icn {
                        padding-left: 0px
                    }

                .misc-content .communities a.all span {
                    padding: 5px 40px 5px 20px
                }

                    .misc-content .communities a.all span:after {
                        top: 5px;
                        right: 15px
                    }

            .misc-content .communities .caste span:before {
                width: 20px;
                height: 20px;
                background-size: 20px
            }

    .go-to .inner {
        background: url(../images/go-to-bg2.png) no-repeat;
        background-size: 95px 120px;
        background-position: bottom right;
        background-color: var(--white)
    }

        .go-to .inner a:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .register {
        width: 480px;
        float: right;
        padding: 15px 45px 60px
    }

        .register .title {
            margin-bottom: 10px
        }

        .register .register-submit {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .register .register-submit:hover {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                background: #fdd606,10%
            }

        .register.bottom-border {
            z-index: 100
        }

            .register.bottom-border:after {
                position: absolute;
                bottom: -5px;
                left: 0;
                width: 100%;
                height: 5px;
                background: var(--theme-colour1);
                content: ''
            }

    .search-strip .branch-locator {
        position: absolute;
        top: 50%;
        right: 0;
        background: url(../images/branch-locator.png) no-repeat;
        display: inline-block;
        cursor: pointer;
        width: 29px;
        height: 171px;
        background-size: 29px 171px;
        margin-top: -95px
    }

    .search-wrapper .search-submit {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .search-wrapper .search-submit:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: var(--theme-colour1),20%
        }

    .search-by a:hover {
        color: #fdd606
    }

    .login {
        height: 100vh
    }

        .login .register {
            width: 100%;
            float: none;
            padding-left: 60px;
            padding-right: 60px
        }

        .login .login-forgot {
            margin-top: 30px
        }

            .login .login-forgot a:hover {
                color: var(--theme-colour1)
            }

            .login .login-forgot span a:hover {
                color: #fdd606,10%
            }

    .register-submit.inverse {
        width: 100%
    }

    .signup-page {
        background: url(../images/signup-bg.jpg) no-repeat;
        background-size: cover;
        background-attachment: fixed
    }

        .signup-page .login {
            width: 480px;
            float: right
        }

            .signup-page .login .register {
                padding-left: 50px;
                padding-right: 50px
            }

            .signup-page .login .title-logo {
                margin: 20px 0
            }

    .check-box .checkbox-caption a:hover {
        color: #fdd606;
        text-decoration: none
    }

    .check-box .checkbox-caption.inverse a:hover {
        color: var(--theme-colour1)
    }

    .search-result p, .search-result em {
        display: inline-block;
        margin: 0
    }

    .search-result em {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        margin-left: 10px
    }

    .search-result:hover {
        background: #dfdede
    }

        .search-result:hover em {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: var(--theme-colour1);
            color: var(--white)
        }

    .no-pl {
        padding-left: 0
    }

    .no-pr {
        padding-right: 0
    }

    .result-container .filter-section {
        float: left;
        width: 255px;
        margin-bottom: 30px;
        margin-bottom: 50px;
        background: #f8f8f8
    }

    .result-container .result-section {
        float: right;
        width: calc(100% - 255px);
        min-height: 102vh
    }

    .result-section {
        padding: 30px 50px
    }

        .result-section .result-title span, .result-section .result-title em {
            position: relative
        }

            .result-section .result-title span:before, .result-section .result-title em:before {
                position: absolute;
                content: ''
            }

        .result-section .result-title span {
            padding-left: 35px
        }

            .result-section .result-title span:before {
                background: url(../images/search-blue.svg) no-repeat;
                position: absolute;
                top: 8px;
                left: 0;
                width: 30px;
                height: 30px;
                background-size: 22px
            }

        .result-section .result-title em {
            padding-right: 30px
        }

            .result-section .result-title em:before {
                background: url(../images/title-down-arrow-blue.svg) no-repeat;
                position: absolute;
                top: 9px;
                right: 0;
                width: 22px;
                height: 22px;
                background-size: 20px
            }

    .result-instance {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        overflow: hidden
    }

        .result-instance p {
            padding-left: 30px;
            position: relative
        }

            .result-instance p:before {
                position: absolute;
                top: 1px;
                left: 0;
                background: url(../images/left-quote.svg) no-repeat;
                width: 20px;
                height: 20px;
                background-size: 20px;
                content: ''
            }

        .result-instance .result-pic {
            margin: 0;
            float: left;
            width: 166px
        }

        .result-instance .result-desc {
            float: right;
            width: calc(100% - 185px)
        }

            .result-instance .result-desc .min-height {
                min-height: 50px
            }

        .result-instance .tags {
            margin-bottom: 20px
        }

        .result-instance:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
            box-shadow: 0 0 5px rgba(0,0,0,0.25)
        }

        .result-instance .connected .short:hover span:before, .result-instance .connected .like:hover span:before, .result-instance .connected .contact:hover span:before, .result-instance .connected .login-to-view:hover span:before {
            -webkit-animation: rotation 2s infinite,linear;
            -moz-animation: rotation 2s infinite,linear;
            animation: rotation 2s infinite,linear
        }

        .result-instance .connected .view:hover, .result-instance .connected .login-to-view:hover {
            border-color: var(--theme-colour1);
            color: var(--theme-colour1);
            background: transparent
        }

    .side-communities a:hover {
        color: var(--theme-colour1);
        background: var(--light2Bg)
    }

    .intimate-join a:hover {
        background: transparent;
        border-color: var(--theme-colour1);
        color: var(--theme-colour1)
    }

    .packages-container {
        background: url(../images/packages-bg.jpg) no-repeat;
        background-size: cover
    }

        .packages-container .title span {
            margin-bottom: 5px
        }

        .packages-container .title strong {
            display: inline-block
        }

    .packages-slider .pack {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1)
    }

        .packages-slider .pack:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.5);
            box-shadow: 0 0 15px rgba(0,0,0,0.5)
        }

        .packages-slider .pack .pack-price {
            padding: 0
        }

            .packages-slider .pack .pack-price span {
                font-size: 38px;
                padding-left: 45px
            }

                .packages-slider .pack .pack-price span:before {
                    top: 10px;
                    width: 32px;
                    height: 32px;
                    background-size: 18px
                }

        .packages-slider .pack .make a:hover {
            background: #e76045
        }

        .packages-slider .pack .items span {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .packages-slider .pack .items span:hover {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                background: #eee
            }

        .packages-slider .pack .items a:hover {
            background: #e76045
        }

        .packages-slider .pack.current-pack .items span:hover {
            background: var(--white)
        }

    .packages-owl {
        padding: 0 50px
    }

        .packages-owl .owl-nav {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 40px;
            margin-top: -20px;
            z-index: -1
        }

            .packages-owl .owl-nav .owl-prev, .packages-owl .owl-nav .owl-next {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
                -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
                box-shadow: 0 0 10px rgba(0,0,0,0.15);
                position: absolute;
                top: 0;
                font-size: 0;
                width: 40px;
                height: 40px
            }

            .packages-owl .owl-nav .owl-prev {
                background: url(../images/owl-prev-pack.svg) no-repeat;
                left: 0;
                background-color: var(--white);
                background-size: 20px;
                background-position: center
            }

            .packages-owl .owl-nav .owl-next {
                background: url(../images/owl-next-pack.svg) no-repeat;
                right: 0;
                background-color: var(--white);
                background-size: 20px;
                background-position: center
            }

    .call {
        margin-top: 30px;
        padding: 0 65px
    }

        .call p {
            background: url(../images/all-communities-bg.jpg) no-repeat;
            background-position: bottom right;
            background-color: #0a5191;
            padding-left: 60px;
            padding-right: 150px
        }

    .default-content {
        padding: 0 50px;
        background: transparent
    }

        .default-content .default-content-inner {
            background: url(../images/pay-bg.jpg) no-repeat;
            background-position: bottom right;
            background-color: var(--white);
            padding: 0 80px
        }

    .pay-form .pay-set:hover, .pay-form input[type="submit"]:hover {
        background: transparent;
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

    .pay-form .pay-reset:hover {
        background: var(--theme-colour1);
        color: var(--white)
    }

    .helper {
        padding: 0;
        line-height: 85px;
        overflow: visible;
        font: 400 30px "Rubik";
        background: var(--theme-colour2);
        color: #fdd606
    }

        .helper [class^='col-']:nth-child(1) {
            background: var(--theme-colour1);
            padding-left: 60px
        }

        .helper [class^='col-']:nth-child(2) {
            background: var(--lightBg)
        }

            .helper [class^='col-']:nth-child(2):before {
                position: absolute;
                top: 0;
                left: -51px;
                content: '';
                width: 53px;
                height: 85px;
                background-size: 53px 85px;
                clip-path: polygon(100% 0, 0% 100%, 100% 100%);
                background-color: var(--lightBg)
            }

        .helper em, .helper em a {
            color: var(--theme-colour1)
        }

        .helper span {
            padding-left: 150px;
            position: relative
        }

            .helper span:before {
                position: absolute;
                top: -40px;
                left: 0;
                background: url(../images/helper-before.png) no-repeat;
                content: '';
                width: 123px;
                height: 123px;
                background-size: 123px 123px
            }

    .exclusive {
        margin-top: 20px
    }

        .exclusive a:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .confirmation-container {
        background: url(../images/confirmation-bg.jpg) no-repeat;
        background-size: cover
    }

        .confirmation-container .title {
            margin-bottom: 50px
        }

        .confirmation-container .inner {
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1);
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            width: 800px;
            margin: auto;
            padding: 45px 45px 250px;
            background: var(--white);
            position: relative
        }

            .confirmation-container .inner:after {
                background: url(../images/confirmation-logo.jpg) no-repeat;
                position: absolute;
                bottom: 0;
                left: 50%;
                content: '';
                width: 360px;
                height: 167px;
                background-size: 360px 167px;
                margin-left: -180px
            }

        .confirmation-container .c-details span, .confirmation-container .c-details em {
            font-size: 16px
        }

        .confirmation-container button:hover {
            background: transparent;
            color: var(--theme-colour1);
            border-color: var(--theme-colour1)
        }

    .payment-container {
        padding: 0 50px;
        background: transparent
    }

        .payment-container .wrapper {
            background: url(../images/success-bg.jpg) no-repeat;
            background-repeat: repeat
        }

        .payment-container .inner {
            padding-left: 50px;
            padding-right: 50px;
            text-align: center
        }

            .payment-container .inner p {
                font-size: 28px
            }

                .payment-container .inner p strong {
                    font-size: 34px
                }

            .payment-container .inner em {
                display: inline-block;
                vertical-align: middle
            }

                .payment-container .inner em:nth-of-type(1) {
                    margin-right: 30px
                }

            .payment-container .inner .pay-amount span {
                display: inline-block;
                vertical-align: middle
            }

                .payment-container .inner .pay-amount span:nth-child(1) {
                    border-bottom: none;
                    border-right: 1px solid var(--white);
                    padding-right: 15px;
                    margin-right: 15px
                }

                .payment-container .inner .pay-amount span:nth-child(2) {
                    font: 700 45px "Rubik",sans-serif
                }

                .payment-container .inner .pay-amount span i {
                    padding-left: 35px
                }

                    .payment-container .inner .pay-amount span i:before {
                        top: 15px;
                        width: 30px;
                        height: 30px;
                        background-size: 30px
                    }

    .ignored-container {
        padding: 0 50px;
        background: transparent
    }

        .ignored-container .inner {
            padding: 0 50px 30px;
            background: var(--white)
        }

        .ignored-container .message-content .minor-details span {
            float: none;
            display: block
        }

    .remove-ignore span:before {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

    .remove-ignore:hover {
        background: var(--theme-colour1);
        color: var(--white)
    }

        .remove-ignore:hover span:before {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            transform: rotate(135deg)
        }

    .upgrade-account a {
        margin-bottom: 20px
    }

        .upgrade-account a:hover {
            background: var(--theme-colour1);
            color: var(--white);
            border-color: #fdd606
        }

    .message-popup .contact-section, .message-popup .horoscope-section {
        width: 1000px
    }

    .horoscope-section.extend {
        width: 1000px
    }

    .upgrade-pack .upgrade-title {
        margin-bottom: 20px
    }

        .upgrade-pack .upgrade-title em {
            font-size: 16px;
            margin-bottom: 20px
        }

            .upgrade-pack .upgrade-title em i {
                padding: 0 45px
            }

        .upgrade-pack .upgrade-title span {
            background: url(../images/upgrade-after.jpg) no-repeat;
            font-size: 28px;
            padding-bottom: 30px;
            background-position: center bottom;
            background-size: 421px 9px
        }

    .upgrade-pack .up {
        font-size: 18px
    }

        .upgrade-pack .up span {
            font-size: 36px;
            margin-bottom: 0
        }

    .upgrade-pack a {
        font: 700 16px "Rubik",sans-serif;
        margin-top: 5px
    }

        .upgrade-pack a:hover {
            background: transparent;
            color: #fdd606;
            border-color: #fdd606
        }

    .editor .editor-submit:hover {
        background: transparent;
        color: #fdd606;
        border-color: #fdd606
    }

    .back-dash:hover {
        background: transparent;
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

    .fb-form .title span, .fb-form .title span strong {
        font-size: 28px
    }

    .fb-form .title em {
        font-size: 22px;
        margin: 0 0 10px 0
    }

    .fb-form .title p {
        font-size: 14px;
        padding: 0 15px;
        margin-bottom: 0
    }

    .fb-form #fb-submit {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        padding: 0;
        height: 50px;
        line-height: 50px;
        outline: 1px solid var(--theme-colour1);
        outline-offset: -6px;
        background: transparent;
        color: var(--theme-colour1);
        font-size: 20px
    }

        .fb-form #fb-submit em {
            position: absolute;
            width: 100%;
            height: 100%;
            display: block
        }

            .fb-form #fb-submit em.one:before, .fb-form #fb-submit em.one:after, .fb-form #fb-submit em.two:before, .fb-form #fb-submit em.two:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                position: absolute;
                content: '';
                background: var(--theme-colour1)
            }

            .fb-form #fb-submit em.one:before, .fb-form #fb-submit em.two:before {
                height: 30px;
                width: 1px
            }

            .fb-form #fb-submit em.one:after, .fb-form #fb-submit em.two:after {
                width: 30px;
                height: 1px
            }

            .fb-form #fb-submit em.one:before, .fb-form #fb-submit em.one:after {
                top: 0;
                left: 0
            }

            .fb-form #fb-submit em.two:before, .fb-form #fb-submit em.two:after {
                bottom: 0;
                right: 0
            }

        .fb-form #fb-submit:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: #fdd606;
            color: var(--theme-colour1)
        }

            .fb-form #fb-submit:hover em.one:before, .fb-form #fb-submit:hover em.one:after, .fb-form #fb-submit:hover em.two:before, .fb-form #fb-submit:hover em.two:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in
            }

            .fb-form #fb-submit:hover em.one:before, .fb-form #fb-submit:hover em.two:before {
                height: 100%
            }

            .fb-form #fb-submit:hover em.one:after, .fb-form #fb-submit:hover em.two:after {
                width: 100%
            }

    .logout-container {
        padding: 50px
    }

    .upgrade-now p {
        text-align: left
    }

    .upgrade-now a:hover {
        background: transparent;
        border-color: #e76045
    }

    .advanced-p {
        padding: 5px 25% 15px
    }

    .flex-1200 {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

        .flex-1200 i {
            margin-bottom: 0
        }

        .flex-1200 .gender-switch, .flex-1200 .flex-992 {
            width: calc(100% - 130px)
        }

    .adv-relative .pick-dates {
        width: calc(100% - 100px)
    }

    .adv-relative i {
        white-space: nowrap
    }

    .adv-save.inverse {
        margin-top: 20px;
        margin-bottom: 20px
    }

        .adv-save.inverse .flex-1200 {
            justify-content: flex-start
        }

        .adv-save.inverse a:not(.save-search) {
            margin-left: 15px
        }

    .adv-save a:hover {
        background: transparent;
        border-color: var(--theme-colour1)
    }

    .adv-save i, .adv-save input[type="text"], .adv-save a.save-search, .adv-save p {
        margin: 0
    }

    .adv-save input[type="text"] {
        width: calc(100% - 250px)
    }

    .saved-searches {
        width: 100%
    }

        .saved-searches .ss-viewall:hover {
            background: transparent;
            color: #fdd606;
            border-color: #fdd606
        }

    .advance-submit {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .advance-submit:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            background: #fdd606;
            color: var(--theme-colour1)
        }

    .filter-section {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        display: block;
        overflow-y: auto;
        background: var(--white);
        z-index: 10
    }

        .filter-section .title {
            font: 400 20px "Rubik",sans-serif;
            color: var(--theme-colour1);
            background: #f6f6f6;
            border-bottom: 1px solid #ededed;
            text-transform: uppercase;
            padding: 10px 0;
            display: block
        }

            .filter-section .title span {
                position: relative;
                padding-left: 30px;
                margin-left: 20px
            }

                .filter-section .title span:before {
                    background: url(../images/filter-title.svg) no-repeat;
                    position: absolute;
                    top: 3px;
                    left: 0;
                    content: '';
                    width: 20px;
                    height: 20px;
                    background-size: 20px
                }

        .filter-section .filter-accordion {
            width: 100%
        }

            .filter-section .filter-accordion .panel:last-of-type {
                margin-bottom: 200px
            }

        .filter-section .scroll-wrapper > .scroll-content {
            max-height: 100vh
        }

        .filter-section .scrollbar-inner > .scroll-element .scroll-bar {
            background: #d0d0d0
        }

        .filter-section.sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0
        }

            .filter-section.sticky .scroll-wrapper {
                height: 100%
            }

                .filter-section.sticky .scroll-wrapper > .scroll-content {
                    max-height: 100vh
                }

    .more-filters {
        position: absolute
    }

        .more-filters .inner-title:last-of-type {
            margin-bottom: 200px
        }

        .more-filters .scrollbar-inner {
            height: auto
        }

    .hype, .royale {
        height: 180px
    }

    .hype {
        background: url(../images/hype-bg.png) no-repeat;
        background-position: center left;
        padding: 0 30px 0 240px;
        position: relative;
        background-color: #004e93
    }

        .hype:after {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: url(../images/couple-of-rings.svg) no-repeat;
            content: '';
            width: 40px;
            height: 40px;
            background-size: 40px
        }

    .messages-contact div.blocked {
        overflow: hidden;
        margin-bottom: 15px
    }

    .messages-contact span, .messages-contact p {
        display: inline-block;
        margin: 0
    }

    .messages-contact strong {
        text-transform: uppercase
    }

    .messages-contact span {
        text-decoration: none;
        width: 180px;
        float: left
    }

        .messages-contact span:after {
            content: ':';
            float: right
        }

    .messages-contact p {
        width: calc(100% - 200px);
        float: right
    }

    .apply-now {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        padding: 20px 30px 55px;
        position: relative
    }

        .apply-now input[type="submit"] {
            position: absolute;
            bottom: 0;
            left: 0
        }

            .apply-now input[type="submit"]:hover {
                background: var(--theme-colour2);
                color: var(--white)
            }

        .apply-now.inverse {
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            box-shadow: 0 0 10px rgba(0,0,0,0.15);
            padding-bottom: 0
        }

            .apply-now.inverse .more {
                margin-left: -30px;
                margin-right: -30px
            }

            .apply-now.inverse input[type="submit"] {
                position: relative;
                bottom: auto;
                left: auto
            }

            .apply-now.inverse a {
                color: var(--theme-colour1)
            }

                .apply-now.inverse a:hover {
                    background: var(--theme-colour1);
                    color: var(--white)
                }

            .apply-now.inverse.solo {
                height: 100%;
                margin-bottom: 0
            }

    .site-tables table.first tr th {
        font-size: 18px
    }

    .site-tables table.first tr td {
        font-size: 16px
    }

    .collage {
        padding-right: 430px;
        position: relative
    }

        .collage:after {
            background: url(../images/services-right.png) no-repeat;
            position: absolute;
            top: 30px;
            right: -15px;
            content: '';
            width: 407px;
            height: 380px;
            background-size: 407px 380px
        }

    .services-content {
        background: url(../images/services-content.png) no-repeat;
        background-position: 100% 100px
    }

        .services-content p {
            margin-bottom: 20px
        }

    .here {
        background: url(../images/here-bg.png) no-repeat;
        background-repeat: repeat;
        background-color: var(--theme-colour1);
        padding: 40px 40px 60px
    }

        .here .here-title {
            padding-left: 150px;
            position: relative
        }

            .here .here-title:before {
                position: absolute;
                top: 6px;
                left: 0;
                content: '';
                width: 130px;
                height: 8px;
                background: var(--theme-colour1)
            }

            .here .here-title.inverse {
                padding-left: 80px
            }

                .here .here-title.inverse:before {
                    width: 60px
                }

        .here .mail-call {
            padding-left: 80px;
            position: relative;
            border-bottom: 1px solid #696969;
            padding-bottom: 10px
        }

            .here .mail-call:before {
                position: absolute;
                bottom: -1px;
                left: -3px;
                content: '';
                width: 65px;
                height: 65px
            }

            .here .mail-call.mail:before {
                background: url(../images/mail-multi.svg) no-repeat;
                background-size: 65px
            }

            .here .mail-call.call-us:before {
                background: url(../images/call-multi.svg) no-repeat;
                background-size: 65px
            }

        .here.inverse {
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15);
            box-shadow: 0 0 10px rgba(0,0,0,0.15)
        }

    .career-apply {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in
    }

        .career-apply p {
            height: 72px;
            text-overflow: ellipsis;
            overflow: hidden
        }

        .career-apply .title {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

    .load-more a:hover {
        background: transparent;
        border-color: var(--theme-colour1);
        color: var(--theme-colour1)
    }

    .searching-partner {
        margin: 50px 0 0;
        width: 100%
    }

    .radius-link:hover {
        background: transparent;
        color: #fdd606;
        border-color: #fdd606
    }

    .file-ancestor .preview, .file-ancestor .add-more {
        width: calc((100% / 5) - 5px);
        margin-right: 5px
    }

    .file-ancestor .preview {
        width: 100% !important
    }

        .file-ancestor .preview .delete {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in
        }

            .file-ancestor .preview .delete:hover {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                background-color: var(--theme-colour1),20%;
                border-color: var(--theme-colour1)
            }

    .discount {
        background: var(--theme-colour1),5%;
        padding: 15px 45px;
        overflow: hidden
    }

        .discount .content {
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            background: var(--theme-colour1),10%;
            padding: 5px 160px;
            text-align: center
        }

            .discount .content p {
                margin: 22px 15px;
                font-size: 22px;
                position: relative;
                padding-left: 150px
            }

                .discount .content p span {
                    position: absolute;
                    top: -30px;
                    left: 0;
                    font-size: 65px
                }

            .discount .content .now {
                position: absolute;
                top: 3px;
                right: 6px
            }

                .discount .content .now:hover {
                    background: transparent;
                    border-color: #fdd606;
                    color: var(--white)
                }

        .discount a#close-discount {
            background-color: transparent;
            right: -40px;
            top: -12px
        }

            .discount a#close-discount:hover {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                transform: rotate(90deg)
            }

    .contact-container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch
    }

        .contact-container [class^="col-"].lefty {
            padding-right: 0;
            float: none
        }

        .contact-container [class^="col-"].righty {
            padding-left: 0;
            float: none
        }

        .contact-container .relative {
            margin-bottom: 20px
        }

        .contact-container .bottom-adjust {
            margin-bottom: 30px
        }

    .map-container .map-title {
        padding: 30px 30px 30px 130px;
        position: relative;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

        .map-container .map-title:before {
            background: url(../images/marker-blue.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100px;
            height: 100%;
            background-color: #fdd606;
            background-size: 40px;
            background-position: center
        }

        .map-container .map-title .desc {
            margin-bottom: 0;
            width: 150px
        }

        .map-container .map-title .map-relative {
            width: calc(100% - 180px)
        }

    .default-popup .default-section, .default-popup2 .default-section {
        width: 500px
    }

        .default-popup .default-section.verify-mobile, .default-popup2 .default-section.verify-mobile {
            padding-left: 150px;
            position: relative
        }

            .default-popup .default-section.verify-mobile:before, .default-popup2 .default-section.verify-mobile:before {
                position: absolute;
                top: 50%;
                left: 30px;
                background: url(../images/mobile-otp.svg) no-repeat;
                content: '';
                width: 70px;
                height: 70px;
                background-size: 70px;
                margin-top: -35px
            }

    .verify .inner .add-hobby {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 15px
    }

    .verification .inner a:hover, .verification .inner button:hover {
        border-color: #fdd606;
        background: transparent;
        color: #fdd606
    }

    .ad-location .location-title {
        padding-left: 80px;
        position: relative;
        text-align: left
    }

        .ad-location .location-title:before {
            position: absolute;
            top: 50%;
            left: 15px;
            background: url(../images/intimate-marker2.jpg) no-repeat;
            content: '';
            width: 59px;
            height: 67px;
            background-size: 59px 67px;
            margin-top: -33px
        }

    .ad-location a:hover {
        background: #fdd606;
        color: var(--theme-colour1);
        border-color: #fdd606
    }

    .message-item {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.06);
        -moz-box-shadow: 0 0 4px rgba(0,0,0,0.06);
        box-shadow: 0 0 4px rgba(0,0,0,0.06)
    }

        .message-item:hover {
            -webkit-transition: all .4s ease-in;
            -moz-transition: all .4s ease-in;
            transition: all .4s ease-in;
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
            box-shadow: 0 0 10px rgba(0,0,0,0.5)
        }
}

@media only screen and (min-width: 1366px) {
    .story-relative .profile-absolute .profile-of-day {
        min-height: 0
    }

        .story-relative .profile-absolute .profile-of-day img {
            margin-bottom: 15px
        }

    .message-item {
        overflow: hidden;
        padding: 25px
    }

        .message-item .message-pic {
            width: 60px;
            float: left
        }

            .message-item .message-pic .chat-now {
                display: block;
                width: calc(100% - 10px);
                margin: 0
            }

        .message-item .message-content {
            width: calc(100% - 65px);
            float: right
        }
}

.input-validation-error {
    border-bottom: 1px solid red
}

.CmnValNo .input-validation-error {
    border-bottom: 1px solid #fff !important
}

.highs p {
    text-align: left !important;
    line-height: 25px !important
}

.misc-content p {
    text-align: left !important;
    line-height: 25px !important
}

.default-container p {
    text-align: left !important;
    line-height: 25px !important
}

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

.full-width {
    width: 100%
}

.absolutely, .button-anime, .search-wrapper .search-submit input[type="submit"], .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button, .faq-searchbox .submit-holder input[type="submit"], .fb-form #fb-submit input, .fb-form #fb-submit button, .advance-submit span input[type="submit"], .file-upload input[type="file"], .file-ancestor .add-more input[type="file"], .map-container .map-title .map-relative .submit-button .map-submit, .absolute, .zoom-horizontal a.overlaid:before, .show-overlay a:before, .flex-wrapper .children.file input[type="file"], .edit-section .upload-horo input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.faq-accordion > .panel {
    max-height: fit-content
}

    .faq-accordion > .panel > .panel-body {
        color: #000 !important
    }

    .faq-accordion > .panel > .panel-heading {
        color: #000 !important
    }

.chat-now {
    font: 400 12px "Rubik",sans-serif;
    color: #14a309;
    position: relative;
    text-align: center;
    padding: 20px 0 0;
    margin: 0 0 0 15px;
    text-transform: capitalize
}

    .chat-now:before {
        background: url(../images/chat-now.svg) no-repeat;
        position: absolute;
        top: 0;
        left: 50%;
        content: '';
        width: 20px;
        height: 20px;
        background-size: 20px;
        margin-left: -10px
    }

.ui-widget-content {
    z-index: 99999999
}

.edit-location .select2-container {
    z-index: 99999999
}

.button-anime {
    background: rgba(0,0,0,0.98);
    pointer-events: none;
    display: block;
    z-index: 100;
    border: 1px solid rgba(0,0,0,0.98);
    opacity: 0
}

    .button-anime:before {
        background: url(../images/button-animation.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 32px;
        height: 32px;
        background-size: 32px;
        margin: -16px 0 0 -16px
    }

.disabled {
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    transition: all .2s ease-in;
    opacity: 1;
    pointer-events: all
}

.need-assistance {
    background: #e7e7e7;
    text-align: center;
    padding: 90px 10px 20px;
    margin-top: 10px;
    position: relative
}

    .need-assistance:before {
        background: url(../images/operator.svg) no-repeat;
        position: absolute;
        top: 15px;
        left: 50%;
        content: '';
        width: 66px;
        height: 66px;
        margin-left: -33px;
        background-size: 66px
    }

    .need-assistance p {
        font: 400 18px "Rubik",sans-serif;
        color: #2f2f2f;
        text-transform: uppercase;
        padding: 0 20px;
        text-align: center !important
    }

        .need-assistance p strong {
            font: 700 18px "Rubik",sans-serif
        }

    .need-assistance a {
        font: 700 22px "Rubik",sans-serif;
        color: var(--theme-colour1);
        position: relative;
        padding-left: 35px
    }

        .need-assistance a:before {
            background: url(../images/phone.svg) no-repeat;
            position: absolute;
            top: 4px;
            left: 0;
            content: '';
            width: 26px;
            height: 26px;
            background-size: 26px
        }

.add-yours {
    position: absolute;
    top: 310px;
    right: 30px;
    font: 700 14px "Rubik",sans-serif;
    color: var(--white);
    text-transform: capitalize;
    padding-left: 30px;
    display: inline-block;
    margin-top: 10px
}

    .add-yours:before {
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/pen-yellow.svg) no-repeat;
        content: '';
        width: 20px;
        top: -3px !important;
        height: 20px;
        background-size: 20px
    }

    .add-yours span {
        position: relative;
        padding: 0 2px
    }

        .add-yours span:after {
            position: absolute;
            bottom: -1px;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #fdd606
        }

footer {
    background: var(--theme-colour1);
    padding: 30px 15px
}

    footer .premium {
        width: 180px;
        margin: auto auto 15px
    }

        footer .premium a {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            display: block;
            text-transform: uppercase;
            text-align: center;
            overflow: hidden;
            position: relative;
            border: 1px solid #608eb7;
            margin-bottom: 15px;
            background: #fdd606
        }

            footer .premium a span {
                padding: 4px 10px 4px 40px;
                background: var(--theme-colour1);
                color: var(--white);
                position: relative;
                display: inline-block
            }

                footer .premium a span:before {
                    position: absolute;
                    top: 4px;
                    left: 10px;
                    content: '';
                    width: 20px;
                    height: 20px
                }

        footer .premium [class^='col-']:nth-child(1) a span:before {
            background: url(../images/premium1.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(2) a span:before {
            background: url(../images/premium2.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(3) a span:before {
            background: url(../images/premium3.svg) no-repeat;
            background-size: 20px
        }

        footer .premium [class^='col-']:nth-child(4) a span:before {
            background: url(../images/premium4.svg) no-repeat;
            background-size: 20px
        }

    footer .footer-links .title {
        font: 400 14px "Rubik",sans-serif;
        position: relative;
        text-transform: uppercase;
        color: var(--white);
        padding-bottom: 5px;
        margin-bottom: 20px;
        height: 25px
    }

        footer .footer-links .title:after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 25px;
            height: 1px;
            background: #fdd606
        }

    footer .footer-links a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        color: #f9f9f9;
        text-transform: capitalize;
        margin-bottom: 15px;
        padding-left: 25px;
        position: relative
    }

        footer .footer-links a:before {
            position: absolute;
            top: 3px;
            left: 0;
            background: url(../images/right-arrow.svg) no-repeat;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    footer .footer-logo {
        position: relative;
        text-align: center;
        margin: 20px 0
    }

        footer .footer-logo:before {
            position: absolute;
            top: 50%;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #6591b9
        }

        footer .footer-logo a {
            background: var(--theme-colour1);
            padding: 0 30px;
            position: relative;
            z-index: 10
        }

    footer .footer-social {
        text-align: center
    }

        footer .footer-social a {
            display: block;
            margin-bottom: 10px
        }

            footer .footer-social a.social {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                width: 28px;
                height: 28px;
                margin: auto 2px 10px
            }

                footer .footer-social a.social.fb {
                    background: url(../images/fb.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.in {
                    background: url(../images/in.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.tw {
                    background: url(../images/tw.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.yt {
                    background: url(../images/yt.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.pn {
                    background: url(../images/pn.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.li {
                    background: url(../images/li.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

                footer .footer-social a.social.bl {
                    background: url(../images/bl.svg) no-repeat;
                    background-size: 18px;
                    background-position: center;
                    background-color: var(--white)
                }

        footer .footer-social .social {
            display: inline-block;
            vertical-align: middle
        }

    footer .privacy-terms a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        margin-bottom: 10px;
        text-transform: capitalize;
        color: #f9f9f9;
        text-align: center
    }

.footnote {
    background: #074983;
    text-align: center;
    overflow: hidden;
    padding: 0 15px;
    position: relative;
    z-index: 1000
}

    .footnote span {
        font: 400 12px "Rubik",sans-serif;
        color: #ececec;
        text-transform: capitalize;
        padding: 12px 0;
        display: inline-block
    }

        .footnote span a {
            color: #ececec
        }

.notify-popup, .message-popup, .default-popup, .default-popup2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    z-index: 5000;
    opacity: 0;
    display: none
}

    .notify-popup.higher-zindex, .message-popup.higher-zindex, .default-popup.higher-zindex, .default-popup2.higher-zindex {
        z-index: 99999999
    }

    .default-popup .default-section, .default-popup2 .default-section {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        width: 90%;
        text-align: center;
        background: var(--theme-colour1);
        margin: auto;
        padding: 30px;
        position: relative
    }

        .default-popup .default-section .close-default-popup, .default-popup2 .default-section .close-default-popup {
            background: url(../images/close-white.svg) no-repeat;
            position: absolute;
            top: 5px;
            right: 5px;
            width: 30px;
            height: 30px;
            background-size: 15px;
            background-position: center;
            cursor: pointer
        }

            .default-popup .default-section .close-default-popup.blue, .default-popup2 .default-section .close-default-popup.blue {
                background: url(../images/close-blue.svg) no-repeat;
                background-size: 15px;
                background-position: center
            }

        .default-popup .default-section.editor, .default-popup2 .default-section.editor {
            text-align: left
        }

        .default-popup .default-section.fb-form, .default-popup2 .default-section.fb-form {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            background: var(--white);
            padding: 30px 15px
        }

        .default-popup .default-section.service-details, .default-popup2 .default-section.service-details {
            padding-top: 40px;
            padding-bottom: 40px
        }

    .default-popup .pwd-guide, .default-popup2 .pwd-guide {
        background: var(--white);
        border: 1px solid var(--theme-colour1)
    }

        .default-popup .pwd-guide .title, .default-popup2 .pwd-guide .title {
            font: 400 18px "Rubik",sans-serif;
            color: var(--theme-colour1);
            text-transform: capitalize;
            text-align: left;
            margin-bottom: 20px
        }

            .default-popup .pwd-guide .title span, .default-popup2 .pwd-guide .title span {
                position: relative;
                padding-right: 25px
            }

                .default-popup .pwd-guide .title span:after, .default-popup2 .pwd-guide .title span:after {
                    background: url(../images/title-down-arrow-blue.svg) no-repeat;
                    position: absolute;
                    top: 5px;
                    right: 0;
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-size: 15px
                }

        .default-popup .pwd-guide ul, .default-popup2 .pwd-guide ul {
            margin: 0;
            padding: 0
        }

            .default-popup .pwd-guide ul li, .default-popup2 .pwd-guide ul li {
                font: 400 12px "Rubik",sans-serif;
                color: #828282;
                padding-left: 20px;
                position: relative;
                list-style: none;
                margin-bottom: 10px;
                text-align: left
            }

                .default-popup .pwd-guide ul li:before, .default-popup2 .pwd-guide ul li:before {
                    background: url(../images/list-before.svg) no-repeat;
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 12px;
                    height: 12px;
                    background-size: 12px
                }

.confirm-deactivate a, .confirm-deletion a, .account-deleted a, .confirm-reactivate a, .message a {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font: 400 14px "Rubik",sans-serif;
    background: #fdd606;
    color: var(--theme-colour1);
    text-transform: uppercase;
    display: inline-block;
    width: 100px;
    padding: 4px 0;
    border: 1px solid transparent
}

    .confirm-deactivate a:first-of-type, .confirm-deletion a:first-of-type, .account-deleted a:first-of-type, .confirm-reactivate a:first-of-type, .message a:first-of-type {
        margin-right: 15px
    }

.confirm-deactivate, .confirm-deletion, .confirm-reactivate, .message {
    text-align: center
}

    .confirm-deactivate p, .confirm-deletion p, .confirm-reactivate p, .message p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--white);
        text-align: center;
        margin-bottom: 20px
    }

        .confirm-deactivate p:first-letter, .confirm-deletion p:first-letter, .confirm-reactivate p:first-letter, .message p:first-letter {
            text-transform: uppercase
        }

    .account-deleted a, .message a {
        margin-right: 0
    }

    .account-deleted p, .message p {
        font: 400 20px "Rubik",sans-serif;
        color: var(--white);
        text-align: center
    }

.notify-popup .notify-content, .message-popup .notify-content {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: var(--theme-colour1);
    padding: 140px 30px 60px;
    text-align: center;
    width: 90%;
    margin: auto;
    position: relative
}

    .notify-popup .notify-content:before, .message-popup .notify-content:before {
        position: absolute;
        top: 40px;
        left: 50%;
        content: '';
        width: 80px;
        height: 80px;
        margin-left: -40px
    }

    .notify-popup .notify-content.success:before, .message-popup .notify-content.success:before {
        background: url(../images/success-notification.svg) no-repeat;
        background-size: 80px
    }

    .notify-popup .notify-content.error:before, .message-popup .notify-content.error:before {
        background: url(../images/error-notification.svg) no-repeat;
        background-size: 80px
    }

    .notify-popup .notify-content span, .message-popup .notify-content span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        display: block
    }

    .notify-popup .notify-content .show-ok, .message-popup .notify-content .show-ok {
        display: none;
        margin-top: 20px
    }

    .notify-popup .notify-content .ok, .message-popup .notify-content .ok {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        font: 400 14px "Rubik",sans-serif;
        background: #fdd606;
        color: var(--theme-colour1);
        text-transform: uppercase;
        border: 1px solid transparent;
        display: inline-block;
        width: 100px;
        padding: 4px 0
    }

.message-popup .contact-section, .message-popup .horoscope-section {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: var(--theme-colour1);
    padding: 30px;
    text-align: center;
    width: 90%;
    margin: auto;
    position: relative;
    display: none
}

    .message-popup .contact-section .query, .message-popup .horoscope-section .query {
        color: var(--white);
        text-align: center
    }

    .message-popup .contact-section a, .message-popup .horoscope-section a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        background: #fdd606;
        color: var(--theme-colour1);
        text-transform: uppercase;
        margin: 0 10px;
        padding: 4px 0;
        width: 85px;
        border: 1px solid transparent
    }

        .message-popup .contact-section a.download-horo, .message-popup .horoscope-section a.download-horo {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            background: transparent;
            color: var(--white);
            text-decoration: underline;
            border: none;
            width: auto;
            text-transform: capitalize
        }

            .message-popup .contact-section a.download-horo:hover, .message-popup .horoscope-section a.download-horo:hover {
                border: none
            }

    .message-popup .contact-section .inner, .message-popup .horoscope-section .inner {
        display: none;
        color: var(--white)
    }

    .message-popup .contact-section .msgpopup-close, .message-popup .horoscope-section .msgpopup-close {
        font: 400 12px "Rubik",sans-serif;
        text-transform: capitalize;
        margin: 10px 0 0
    }

    .message-popup .contact-section p a, .message-popup .horoscope-section p a {
        font: 400 12px "Rubik",sans-serif;
        background: transparent;
        margin: 0;
        padding: 0;
        width: auto;
        color: var(--white)
    }

.select-dropdown .select-holder {
    display: block;
    position: relative
}

    .select-dropdown .select-holder:after {
        position: absolute;
        top: 12px;
        right: 0;
        content: '';
        pointer-events: none;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--white);
        display: none
    }

.select-dropdown select {
    font: 400 12px "Rubik",sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--white);
    padding-left: 0;
    color: var(--white)
}

    .select-dropdown select option {
        color: var(--black)
    }

.select-dropdown .caption {
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in;
    position: absolute;
    top: 0;
    left: 0;
    font: 400 10px "Rubik",sans-serif;
    font-style: normal;
    color: #fdd606
}

.select-dropdown.inverse .select-holder:after {
    border-top: 5px solid #878787
}

.select-dropdown.inverse select {
    color: var(--theme-colour1);
    border-bottom: 1px solid #878787
}

.select-dropdown.inverse .caption {
    color: var(--theme-colour1)
}

.select-dropdown.show-validation select {
    border-color: #f00
}

.select-dropdown.show-validation .field-validation-error, .select-dropdown.show-validation .field-validation-valid {
    display: none
}

.placeholder input[type="text"], .placeholder input[type="email"], .placeholder input[type="password"], .placeholder input[type="number"], .placeholder textarea {
    font: 400 12px "Rubik",sans-serif;
    width: 100%;
    height: 28px;
    border: none;
    border-bottom: 1px solid var(--white);
    background: transparent;
    color: var(--white)
}

.placeholder textarea {
    resize: none;
    height: 48px;
    padding: 0
}

.placeholder .caption {
    -webkit-transition: all .15s ease-in;
    -moz-transition: all .15s ease-in;
    transition: all .15s ease-in;
    position: absolute;
    top: 20px;
    left: 0;
    font: 400 12px "Rubik",sans-serif;
    pointer-events: none;
    color: var(--white);
    text-transform: capitalize;
    opacity: 0
}

.placeholder.caption-top .caption {
    font: 400 10px "Rubik",sans-serif;
    top: 0;
    color: #fdd606
}

.placeholder.inverse input[type="text"], .placeholder.inverse input[type="email"], .placeholder.inverse input[type="password"], .placeholder.inverse input[type="number"], .placeholder.inverse textarea {
    border-bottom: 1px solid #747474;
    color: var(--theme-colour1)
}

.placeholder.inverse .caption {
    color: var(--theme-colour1)
}

.placeholder.inverse-black input[type="text"], .placeholder.inverse-black input[type="email"], .placeholder.inverse-black input[type="password"], .placeholder.inverse-black input[type="number"], .placeholder.inverse-black textarea {
    border-bottom: 1px solid #747474;
    color: #525151
}

.placeholder.inverse-black .caption {
    color: #525151
}

.placeholder.orange input[type="text"], .placeholder.orange input[type="email"], .placeholder.orange input[type="password"], .placeholder.orange input[type="number"], .placeholder.orange textarea {
    border-bottom: 1px solid #e76045;
    color: #b2b2b2
}

.placeholder.orange .caption {
    color: #b2b2b2
}

.placeholder.text-area .caption {
    top: 15px
}

.placeholder.text-area.caption-top .caption {
    top: 0
}

.placeholder .dtBox input[type="text"], .placeholder .dtBox input[type="email"], .placeholder .dtBox input[type="password"], .placeholder .dtBox input[type="number"] {
    border-bottom: 1px solid transparent
}

.placeholder.show-validation input[type="text"], .placeholder.show-validation input[type="email"], .placeholder.show-validation input[type="password"], .placeholder.show-validation input[type="number"], .placeholder.show-validation textarea {
    border-color: #f00
}

.placeholder.show-validation .field-validation-error, .placeholder.show-validation .field-validation-valid {
    display: none
}

.relative {
    position: relative;
    padding: 15px 0;
    margin-bottom: 8px
}

    .relative.no-space {
        padding: 0;
        margin: 0
    }

    .relative.text-center {
        text-align: left !important
    }

    .relative.check-box {
        padding-top: 0
    }

    .relative:after {
        position: absolute;
        top: 8px;
        right: 15px;
        content: '';
        width: 15px;
        height: 15px
    }

    .relative.username:after {
        background: url(../images/username.svg) no-repeat;
        background-size: 15px
    }

    .relative.password:after {
        background: url(../images/password.svg) no-repeat;
        background-size: 15px
    }

    .relative.change-pwd:after {
        background: url(../images/lock.svg) no-repeat;
        background-size: 15px;
        top: 20px;
        right: 5px
    }

    .relative.edit-email:after {
        background: url(../images/pen-edit.svg) no-repeat;
        background-size: 15px;
        top: 20px;
        right: 5px
    }

    .relative .field-validation-error, .relative .field-validation-valid, .relative .webname {
        position: absolute;
        bottom: -2px;
        left: 0;
        font: 400 10px "Rubik",sans-serif;
        color: red,2%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block
    }

        .relative .field-validation-error:first-letter, .relative .field-validation-valid:first-letter, .relative .webname:first-letter {
            text-transform: uppercase
        }

    .relative .webname {
        color: #089315
    }

    .relative.username-error input {
        border-color: red !important
    }

    .relative.username-error:after {
        background: url(../images/username-red.svg) no-repeat;
        background-size: 15px
    }

    .relative.password-error input {
        border-color: red !important
    }

    .relative.password-error:after {
        background: url(../images/password-red.svg) no-repeat;
        background-size: 15px
    }

    .relative.alt-validation .field-validation-error, .relative.alt-validation .field-validation-valid {
        color: #ff9800
    }

.about {
    padding: 30px 30px 0px;
    margin-bottom: 72px
}

@media (max-width: 767px) {
    .about {
        padding: 15px 0px 0px 0px;
        margin-bottom: 50px
    }
}

@media (max-width: 480px) {
    .about {
        margin-bottom: 0px
    }
}

.about .title {
    font: 400 24px "Rubik",sans-serif;
    display: block;
    text-align: center;
    text-transform: capitalize;
    color: #292929;
    margin-bottom: 30px
}

    .about .title strong {
        font: 700 24px "Rubik",sans-serif
    }

.about p {
    font: 400 16px "Rubik",sans-serif;
    text-align: center;
    line-height: 30px
}

.about .about-icon {
    text-align: center;
    padding-top: 75px;
    position: relative;
    margin: 30px 0
}

    .about .about-icon:before {
        position: absolute;
        top: 5px;
        left: 50%;
        content: '';
        width: 50px;
        height: 50px;
        margin-left: -25px
    }

    .about .about-icon span {
        font: 400 18px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #292929
    }

.about [class^='col-']:nth-of-type(1) .about-icon:before {
    background: url(../images/about1.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(2) .about-icon:before {
    background: url(../images/about2.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(3) .about-icon:before {
    background: url(../images/about3.png) no-repeat;
    background-size: 50px
}

.about [class^='col-']:nth-of-type(4) .about-icon:before {
    background: url(../images/about4.png) no-repeat;
    background-size: 50px
}

.about.inverse .title {
    text-transform: uppercase;
    color: var(--theme-colour1)
}

.communities {
    padding-left: 15px;
    padding-right: 15px;
    background: var(--theme-colour1)
}

    .communities .title {
        font: 400 24px "Rubik",sans-serif;
        display: block;
        text-align: center;
        color: var(--white);
        text-transform: capitalize;
        margin-bottom: 30px
    }

        .communities .title strong {
            font: 700 24px "Rubik",sans-serif;
            position: relative;
            padding-bottom: 3px
        }

            .communities .title strong:after {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: #fdd606;
                content: ''
            }

    .communities .caste, .communities .all {
        display: block;
        text-align: center
    }

    .communities .caste {
        font: 400 18px "Rubik",sans-serif;
        padding: 15px 0;
        margin-bottom: 0px;
        color: var(--white);
        text-transform: capitalize;
        display: flex;
        align-items: center
    }

        .communities .caste span {
            position: relative;
            padding-left: 5px;
            display: inline-block;
            text-align: left
        }

@media (max-width: 991px) {
    .communities .caste span {
        min-width: 180px
    }
}

@media (max-width: 767px) {
    .communities .caste span {
        font-size: 16px
    }
}

.communities .caste span:before {
    position: absolute;
    top: -3px;
    left: 0;
    background: url(../images/caste-before.jpg) no-repeat;
    content: '';
    width: 30px;
    height: 30px;
    background-size: 30px;
    display: none
}

.communities .caste span.icn {
    padding-left: 0px;
    display: flex
}

    .communities .caste span.icn svg path {
        fill: var(--white)
    }

.communities .all {
    font: 400 18px "Rubik",sans-serif;
    text-transform: capitalize;
    margin-top: 16px
}

    .communities .all span {
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        padding: 5px 50px 5px 30px;
        background: #fdd606;
        color: #292929;
        position: relative;
        border: 1px solid transparent
    }

        .communities .all span:after {
            position: absolute;
            top: 9px;
            right: 25px;
            background: url(../images/reply-right.svg) no-repeat;
            content: '';
            width: 15px;
            height: 15px;
            background-size: 15px
        }

.communities.inverse {
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

@media (max-width: 767px) {
    .communities.inverse {
        justify-content: initial
    }
}

.about-register {
    background: #f3f3f3;
    padding: 30px;
    text-align: center
}

    .about-register p {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        text-align: center
    }

        .about-register p strong {
            font: 700 24px "Rubik",sans-serif;
            display: block
        }

    .about-register a {
        font: 400 18px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        background: var(--theme-colour1);
        color: var(--white);
        padding: 6px 30px;
        text-transform: uppercase;
        margin: 15px 0 0;
        display: inline-block;
        position: relative;
        border: 1px solid transparent
    }

        .about-register a:after {
            background: url(../images/arrow-down.svg) no-repeat;
            position: absolute;
            bottom: -24px;
            left: 50%;
            width: 18px;
            height: 18px;
            background-size: 18px;
            margin-left: -9px;
            content: ''
        }

.about-intimate {
    padding: 30px
}

    .about-intimate .title {
        text-transform: uppercase;
        color: var(--black);
        text-align: center;
        padding: 75px 0 15px;
        margin-bottom: 20px;
        position: relative
    }

        .about-intimate .title:before, .about-intimate .title:after {
            position: absolute;
            left: 50%;
            content: ''
        }

        .about-intimate .title:before {
            background: url(../images/diadem.png) no-repeat;
            top: 0;
            width: 106px;
            height: 62px;
            margin-left: -53px
        }

        .about-intimate .title:after {
            bottom: 0;
            width: 68px;
            height: 2px;
            background: var(--theme-colour1);
            margin-left: -34px
        }

        .about-intimate .title span, .about-intimate .title em {
            display: block
        }

        .about-intimate .title span {
            font: 700 22px "Rubik",sans-serif;
            margin-bottom: 5px
        }

        .about-intimate .title em {
            font: 400 10px "Rubik",sans-serif;
            font-style: normal
        }

    .about-intimate p {
        text-align: center
    }

.basic {
    padding: 30px
}

    .basic .title {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        margin-bottom: 10px
    }

.spanners {
    margin-top: 15px
}

    .spanners span {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #6f7071;
        position: relative;
        padding: 20px 0 20px 45px
    }

        .spanners span:before {
            position: absolute;
            top: 50%;
            left: 0;
            content: '';
            width: 30px;
            height: 30px;
            margin-top: -15px
        }

        .spanners span.spanner1:before {
            background: url(../images/spanner1.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner2:before {
            background: url(../images/spanner2.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner3:before {
            background: url(../images/spanner3.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner4:before {
            background: url(../images/spanner4.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner5:before {
            background: url(../images/spanner5.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner6:before {
            background: url(../images/spanner6.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner7:before {
            background: url(../images/spanner7.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner8:before {
            background: url(../images/spanner8.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner9:before {
            background: url(../images/spanner9.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner10:before {
            background: url(../images/spanner10.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner11:before {
            background: url(../images/spanner11.svg) no-repeat;
            background-size: 30px
        }

        .spanners span.spanner12:before {
            background: url(../images/spanner12.svg) no-repeat;
            background-size: 30px
        }

.popup-buttons input[type="submit"], .popup-buttons input[type="button"], .popup-buttons a {
    font: 400 14px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
    padding: 2px 10px;
    text-transform: capitalize
}

.popup-buttons input[type="submit"], .popup-buttons input[type="button"] {
    background: var(--white);
    color: var(--theme-colour1);
    margin-right: 15px
}

.popup-buttons a {
    background: transparent;
    color: var(--white);
    border-color: var(--white)
}

    .popup-buttons a#erase-password {
        padding-left: 15px;
        padding-right: 15px;
        background: #fdd606;
        color: var(--theme-colour1);
        border-color: #fdd606;
        margin-bottom: 30px
    }

.view-password p, .confirmation p, .erase-password p {
    font: 400 14px "Rubik",sans-serif;
    color: var(--white);
    margin: 30px 0;
    text-align: center
}

@media (max-width: 480px) {
    .view-password p, .confirmation p, .erase-password p {
        margin-bottom: 0px
    }
}

.view-password p:first-letter, .confirmation p:first-letter, .erase-password p:first-letter {
    text-transform: uppercase
}

.view-password p strong, .confirmation p strong, .erase-password p strong {
    font-size: 16px;
    color: #fdd606
}

.confirmation p, .erase-password p {
    margin: 0 0 20px 0
}

.confirmation a, .erase-password a {
    font: 400 14px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid transparent;
    padding: 2px 30px;
    text-transform: capitalize;
    background: transparent;
    color: var(--white);
    border-color: var(--white);
    margin: 0 15px
}

.cropper-wrapper a, .cropper-wrapper.full-page a {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: #fdd606;
    text-transform: capitalize;
    padding: 4px 20px;
    margin: 20px 0;
    display: inline-block;
    border: 1px solid transparent
}

    .cropper-wrapper a:last-of-type, .cropper-wrapper.full-page a:last-of-type {
        margin-left: 10px
    }

.cropper-wrapper {
    display: none;
    text-align: center
}

    .cropper-wrapper.full-page {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding-bottom: 70px;
        background: var(--theme-colour1);
        z-index: 999999
    }

        .cropper-wrapper.full-page a {
            background: #fff;
            color: #057dc4;
            border: 1px solid transparent;
            width: 120px;
            height: 46px;
            border-radius: 5px;
            padding-top: 14px
        }

    .cropper-wrapper a {
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        color: #FAFAFA;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 44px;
        padding: 10px 25px;
        background-color: var(--theme-colour1);
        border-radius: 5px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: ease-in-out 0.4s
    }

        .cropper-wrapper a:last-of-type {
            margin-left: 0px
        }

        .cropper-wrapper a:hover {
            background: var(--theme-colour2)
        }

.discover {
    background: var(--white);
    margin-bottom: 20px
}

    .discover .title {
        font: 700 16px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: var(--theme-colour1);
        position: relative;
        padding: 15px 15px 15px 40px
    }

        .discover .title:before {
            position: absolute;
            top: 16px;
            left: 12px;
            background: url(../images/two-hearts.svg) no-repeat;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

.discover-profile {
    margin-bottom: 25px
}

    .discover-profile .inner img, .discover-profile .inner .desc {
        display: inline-block;
        vertical-align: middle
    }

    .discover-profile .inner a img {
        width: 49px;
        height: 49px
    }

    .discover-profile .inner img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin: 0 10px 0 0
    }

    .discover-profile .inner .desc p {
        margin-bottom: 0
    }

        .discover-profile .inner .desc p span, .discover-profile .inner .desc p em {
            display: block;
            font-style: normal;
            color: var(--theme-colour1)
        }

        .discover-profile .inner .desc p span {
            font: 400 14px "Rubik",sans-serif;
            text-transform: capitalize
        }

        .discover-profile .inner .desc p em {
            font: 400 12px "Rubik",sans-serif;
            text-transform: uppercase
        }

    .discover-profile .inner .desc .long {
        font: 400 12px "Rubik",sans-serif;
        color: #4e4f50;
        text-transform: capitalize;
        margin-top: 5px
    }

    .discover-profile .decisions {
        overflow: hidden;
        margin-top: 10px
    }

        .discover-profile .decisions a {
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font: 400 12px "Rubik",sans-serif;
            width: calc(50% - 4px);
            text-transform: capitalize;
            text-align: center;
            border: 1px solid var(--theme-colour1);
            padding: 2px 0;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px
        }

            .discover-profile .decisions a:hover span.icn svg.strk {
                display: none
            }

            .discover-profile .decisions a:hover span.icn svg.fil {
                display: block
            }

            .discover-profile .decisions a span {
                position: relative;
                padding-left: 0px
            }

                .discover-profile .decisions a span:before {
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 12px;
                    height: 12px;
                    display: none
                }

                .discover-profile .decisions a span.icn {
                    display: flex
                }

                    .discover-profile .decisions a span.icn svg path {
                        fill: var(--theme-colour1)
                    }

                    .discover-profile .decisions a span.icn svg.strk {
                        display: block
                    }

                    .discover-profile .decisions a span.icn svg.fil {
                        display: none
                    }

            .discover-profile .decisions a:first-child {
                float: left;
                background: var(--theme-colour1);
                color: var(--white)
            }

                .discover-profile .decisions a:first-child span:before {
                    background: url(../images/heart-white.svg) no-repeat;
                    background-size: 12px;
                    display: none
                }

            .discover-profile .decisions a:last-child {
                float: right;
                color: var(--theme-colour1)
            }

                .discover-profile .decisions a:last-child span:before {
                    background: url(../images/cancel-blue.svg) no-repeat;
                    background-size: 12px
                }

            .discover-profile .decisions a.active {
                border-color: #369623;
                background: var(--white);
                color: #369623
            }

                .discover-profile .decisions a.active span:before {
                    background: url(../images/shortlisted.svg) no-repeat;
                    background-size: 12px
                }

.discover-all {
    font: 400 14px "Rubik",sans-serif;
    display: block;
    padding: 10px 0;
    text-transform: uppercase;
    color: var(--theme-colour1);
    border-top: 1px solid #e1e1e1;
    text-align: center
}

    .discover-all:after {
        content: attr(data-count)
    }

    .discover-all.no-border {
        margin-top: 10px;
        border-top: none;
        padding-bottom: 0
    }

.all-communities {
    padding: 0 15px 10px;
    margin-bottom: 10px
}

    .all-communities [class^='col-'] {
        background: var(--white);
        overflow: hidden
    }

        .all-communities [class^='col-']:nth-of-type(1) {
            padding-top: 10px
        }

    .all-communities a {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        color: #828282;
        text-transform: capitalize;
        margin-bottom: 10px
    }

    .all-communities p {
        font: 400 22px "Rubik",sans-serif;
        background: #0a5191;
        color: var(--white);
        padding: 20px 15px;
        margin-bottom: 0;
        text-align: left
    }

        .all-communities p strong {
            font: 400 23px "Rubik",sans-serif;
            color: #fdd606;
            display: block;
            letter-spacing: 1px
        }

.main-title {
    font: 700 24px "Rubik",sans-serif;
    padding: 15px;
    position: relative;
    z-index: 100;
    text-transform: uppercase;
    background: var(--white);
    color: var(--theme-colour1);
    -webkit-box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25);
    box-shadow: 0 4px 4px -2px rgba(0,0,0,0.25)
}

    .main-title span {
        display: inline-block;
        background: var(--white);
        padding-left: 50px;
        position: relative
    }

        .main-title span:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 35px;
            height: 35px
        }

    .main-title.messages span:before {
        background: url(../images/speech-bubble.svg) no-repeat;
        background-size: 35px
    }

    .main-title.settings span:before {
        background: url(../images/settings-gear.svg) no-repeat;
        background-size: 35px
    }

    .main-title.portfolio {
        box-shadow: none
    }

        .main-title.portfolio span {
            position: relative;
            z-index: 100;
            padding-right: 30px
        }

            .main-title.portfolio span:before {
                background: url(../images/portfolio.svg) no-repeat;
                background-size: 35px
            }

        .main-title.portfolio:after {
            position: absolute;
            top: 50%;
            right: 15px;
            content: '';
            width: 80%;
            height: 1px;
            background: var(--theme-colour1);
            z-index: -1
        }

    .main-title.all-comm {
        box-shadow: none;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px
    }

        .main-title.all-comm span:before {
            background: url(../images/network.svg) no-repeat;
            background-size: 35px;
            top: -3px
        }

        .main-title.all-comm.share span:before {
            background: url(../images/sharer.svg) no-repeat;
            background-size: 35px
        }

.profile-of-day {
    display: block;
    background: var(--lightBg);
    text-align: center;
    padding-bottom: 15px
}

    .profile-of-day .title {
        font: 700 16px "Rubik",sans-serif;
        text-transform: uppercase;
        background: var(--theme-colour1);
        color: var(--white);
        padding: 10px 0
    }

    .profile-of-day img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin: 15px auto
    }

    .profile-of-day span {
        display: block;
        color: var(--c2d);
        text-transform: uppercase
    }

    .profile-of-day .name {
        font: 700 16px "Rubik",sans-serif
    }

    .profile-of-day .code {
        font: 400 12px "Rubik",sans-serif
    }

.profile-absolute .profile-of-day {
    min-height: 300px
}

.site-loader, .gif-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 999999;
    opacity: 0;
    display: none
}

    .site-loader:before, .gif-loader:before {
        background: url(../images/site-loader.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 90px;
        height: 90px;
        margin: -45px 0 0 -45px;
        background-size: 90px
    }

.gif-loader {
    opacity: 1
}

    .gif-loader:before {
        background: url(../images/gif-loader.gif) no-repeat;
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
        background-size: 90px;
        background-position: center
    }

.go-to {
    background: url(../images/go-to-bg.jpg) no-repeat;
    background-size: cover;
    background-position: top right;
    padding-top: 302px;
    margin-bottom: 20px
}

    .go-to.grey .inner {
        background-color: #ececec
    }

    .go-to .inner {
        position: relative;
        background: var(--white);
        padding: 30px 15px;
        text-align: center
    }

        .go-to .inner:before {
            background: url(../images/go-to-before.png) no-repeat;
            position: absolute;
            top: -38px;
            left: 50%;
            content: '';
            width: 70px;
            height: 38px;
            margin-left: -35px;
            background-size: 70px 38px
        }

        .go-to .inner p {
            font: 400 18px "Rubik",sans-serif;
            color: var(--theme-colour1);
            padding: 0 30px;
            text-align: center !important
        }

        .go-to .inner a {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            font: 700 14px "Rubik",sans-serif;
            background: var(--theme-colour1);
            color: var(--white);
            text-transform: capitalize;
            padding: 8px 30px;
            display: inline-block;
            border: 1px solid transparent
        }

.misc-content {
    padding: 0 15px;
    height: 100vh
}

    .misc-content .title {
        font: 400 24px "Rubik",sans-serif;
        color: #2d2d2d;
        text-transform: capitalize;
        border-bottom: 1px solid #ebebeb;
        margin-bottom: 20px;
        padding: 20px 0
    }

        .misc-content .title span {
            position: relative;
            display: flex;
            align-items: center;
            gap: 15px
        }

            .misc-content .title span.advert {
                display: flex;
                align-items: center;
                gap: 15px;
                padding-left: 0
            }

                .misc-content .title span.advert:before {
                    display: none
                }

                .misc-content .title span.advert .icn {
                    display: flex
                }

                .misc-content .title span.advert svg path {
                    fill: var(--theme-colour1)
                }

            .misc-content .title span:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 30px;
                height: 30px;
                display: none
            }

            .misc-content .title span.privacy:before {
                background: url(../images/privacy-before.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.terms:before {
                background: url(../images/terms.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.services:before {
                background: url(../images/services.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.advert:before {
                background: url(../images/advert-before.svg) no-repeat;
                background-size: 30px
            }

            .misc-content .title span.helpline {
                display: flex;
                align-items: center;
                gap: 15px;
                padding-left: 0
            }

                .misc-content .title span.helpline:before {
                    display: none
                }

                .misc-content .title span.helpline .icn {
                    display: flex
                }

                .misc-content .title span.helpline svg path {
                    fill: var(--theme-colour1)
                }

            .misc-content .title span .icn {
                display: flex
            }

                .misc-content .title span .icn svg path {
                    fill: var(--theme-colour1)
                }

    .misc-content .title-terms {
        font: 400 16px "Rubik",sans-serif;
        color: var(--theme-colour1);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px
    }

        .misc-content .title-terms span {
            position: relative
        }

            .misc-content .title-terms span:before {
                background: url(../images/diamond-symbol.svg) no-repeat;
                position: absolute;
                top: 2px;
                left: 0;
                content: '';
                width: 16px;
                height: 16px;
                background-size: 16px;
                display: none
            }

        .misc-content .title-terms.small span {
            padding-left: 0
        }

            .misc-content .title-terms.small span:before {
                display: none
            }

        .misc-content .title-terms.black {
            font-size: 20px;
            color: #2d2d2d;
            text-transform: capitalize
        }

        .misc-content .title-terms .icn {
            display: flex
        }

            .misc-content .title-terms .icn svg path {
                fill: var(--theme-colour1)
            }

    .misc-content p.static {
        font: 400 14px "Rubik",sans-serif;
        color: #363636;
        text-align: justify;
        line-height: 24px;
        margin-bottom: 25px
    }

.terms-list {
    margin: 0 0 30px 0;
    padding: 0
}

    .terms-list li {
        position: relative;
        padding-left: 20px;
        list-style: none;
        margin-bottom: 10px
    }

        .terms-list li:before {
            position: absolute;
            top: 5px;
            left: 0;
            content: '';
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid var(--theme-colour1)
        }

.no-data {
    font: 400 18px "Rubik",sans-serif;
    text-align: center;
    padding: 20px 0;
    color: var(--theme-colour1);
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

    .no-data .icn {
        display: flex
    }

        .no-data .icn svg path {
            fill: var(--theme-colour1)
        }

    .no-data span {
        position: relative;
        text-transform: capitalize
    }

        .no-data span:before {
            background: url(../images/sad-blue.svg) no-repeat;
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px;
            display: none
        }

    .no-data.inverse {
        font-size: 14px;
        color: var(--white)
    }

        .no-data.inverse span:before {
            background: url(../images/sad-white.svg) no-repeat;
            background-size: 20px;
            top: -2px
        }

.search-wrapper {
    margin: 30px 0
}

    .search-wrapper .nice-select {
        font: 400 13px "Rubik",sans-serif;
        height: 55px;
        line-height: 55px;
        color: #171717;
        padding-left: 15px
    }

    .search-wrapper .select-appearance {
        position: relative;
        display: block
    }

        .search-wrapper .select-appearance:after {
            position: absolute;
            top: 20px;
            right: 15px;
            background: url(../images/down-arrow-blue.svg) no-repeat;
            content: '';
            width: 15px;
            height: 15px;
            background-size: 15px;
            pointer-events: none
        }

    .search-wrapper .search-criteria {
        width: 100%;
        border: 1px solid var(--theme-colour1);
        margin-bottom: 10px;
        overflow: hidden;
        position: relative
    }

        .search-wrapper .search-criteria select {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            width: 100%;
            height: 55px;
            border: none;
            padding-left: 10px
        }

        .search-wrapper .search-criteria.inverse span {
            display: inline-block;
            vertical-align: middle
        }

            .search-wrapper .search-criteria.inverse span.field-validation-valid {
                display: none
            }

        .search-wrapper .search-criteria.inverse .select-appearance, .search-wrapper .search-criteria.inverse .to {
            width: calc(100% / 3);
            float: left
        }

        .search-wrapper .search-criteria.inverse .to {
            line-height: 55px;
            text-align: center
        }

        .search-wrapper .search-criteria .field-validation-error {
            position: absolute;
            top: -1px;
            right: 5px;
            color: #f00;
            font-size: 20px
        }

    .search-wrapper .search-submit {
        display: block;
        height: 55px;
        background: var(--theme-colour1);
        text-align: center;
        position: relative
    }

        .search-wrapper .search-submit input[type="submit"] {
            opacity: 0;
            z-index: 100;
            cursor: pointer
        }

        .search-wrapper .search-submit span {
            font: 400 18px "Rubik",sans-serif;
            text-transform: uppercase;
            display: inline-block;
            color: #fdd606;
            position: relative;
            padding-right: 35px;
            line-height: 55px
        }

            .search-wrapper .search-submit span:after {
                position: absolute;
                top: 13px;
                right: 0;
                background: url(../images/search-yellow.svg) no-repeat;
                content: '';
                width: 24px;
                height: 24px;
                background-size: 24px
            }

.search-by {
    text-align: center
}

    .search-by .heading {
        font: 400 16px "Rubik",sans-serif;
        display: block;
        color: #292929;
        margin-bottom: 15px
    }

    .search-by a {
        font: 700 16px "Rubik",sans-serif;
        text-transform: capitalize;
        display: inline-block;
        vertical-align: middle;
        color: var(--theme-colour1);
        padding: 0 15px;
        border-right: 1px solid #6f6f6f
    }

        .search-by a:last-of-type {
            border-right: none
        }

.search {
    font: 400 14px "Rubik",sans-serif;
    text-transform: uppercase;
    display: block;
    background: #fdd606;
    color: var(--theme-colour1);
    text-align: center;
    padding: 5px 0
}

    .search em {
        font-style: normal;
        padding-right: 25px;
        position: relative
    }

        .search em:after {
            position: absolute;
            top: 0;
            right: 0;
            background: url(../images/search-blue.svg) no-repeat;
            content: '';
            width: 16px;
            height: 16px;
            background-size: 16px
        }

.register {
    background: var(--theme-colour1);
    padding: 15px 15px 60px;
    position: relative
}

    .register .title span {
        display: block;
        margin-bottom: 10px;
        color: var(--white)
    }

    .register .title .free {
        font: 400 18px "Rubik",sans-serif;
        text-transform: capitalize;
        padding-left: 30px;
        position: relative
    }

        .register .title .free:before {
            background: url(../images/pen.svg) no-repeat;
            position: absolute;
            top: 2px;
            left: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

        .register .title .free em {
            font: 700 18px "Rubik",sans-serif;
            text-transform: uppercase
        }

    .register .title .with, .register .title .social {
        display: inline-block;
        vertical-align: middle
    }

    .register .title .with {
        font: 400 12px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-right: 10px
    }

    .register .title .social a {
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-right: 10px
    }

        .register .title .social a.fb {
            background: url(../images/facebook.svg) no-repeat;
            background-size: 25px
        }

        .register .title .social a.gg {
            background: url(../images/google-plus.svg) no-repeat;
            background-size: 25px
        }

    .register .register-submit {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        text-align: center;
        background: #fdd606
    }

        .register .register-submit input[type="submit"], .register .register-submit input[type="button"], .register .register-submit button {
            opacity: 0;
            font-size: 0;
            z-index: 100
        }

        .register .register-submit span {
            font: 400 20px "Rubik",sans-serif;
            line-height: 50px;
            color: var(--theme-colour1);
            position: relative;
            padding-left: 30px;
            text-transform: uppercase
        }

            .register .register-submit span:before {
                position: absolute;
                top: 3px;
                left: 0;
                background: url(../images/user-blue.svg) no-repeat;
                content: '';
                width: 20px;
                height: 20px;
                background-size: 20px
            }

        .register .register-submit.inverse {
            -webkit-border-radius: 80px;
            -moz-border-radius: 80px;
            border-radius: 80px;
            background: var(--theme-colour1);
            position: relative;
            bottom: auto;
            left: auto;
            margin: 15px auto
        }

            .register .register-submit.inverse span {
                color: var(--white)
            }

                .register .register-submit.inverse span:before {
                    background: url(../images/user-yellow.svg) no-repeat;
                    background-size: 20px
                }

    .register.inverse {
        background: var(--white);
        padding-bottom: 15px
    }

        .register.inverse .nice-select {
            color: var(--theme-colour1);
            border-bottom-color: var(--theme-colour1)
        }

            .register.inverse .nice-select:after {
                border-bottom: 2px solid var(--theme-colour1);
                border-right: 2px solid var(--theme-colour1)
            }

        .register.inverse .title span {
            color: #282828
        }

        .register.inverse .title .free:before {
            background: url(../images/pen-blue.svg) no-repeat;
            background-size: 18px
        }

        .register.inverse .title .social a.fb {
            background: url(../images/facebook-blue.svg) no-repeat;
            background-size: 25px
        }

        .register.inverse .title .social a.gg {
            background: url(../images/google-plus-blue.svg) no-repeat;
            background-size: 25px
        }

        .register.inverse .title-logo {
            margin: 30px 0 40px
        }

.radio-wrapper {
    display: inline-block;
    margin-right: 15px;
    height: 30px
}

    .radio-wrapper input[type="radio"] {
        display: none
    }

    .radio-wrapper .ghost-radio, .radio-wrapper .note {
        display: inline-block;
        vertical-align: middle
    }

    .radio-wrapper .ghost-radio {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid var(--white);
        width: 15px;
        height: 15px;
        margin-right: 10px;
        cursor: pointer
    }

        .radio-wrapper .ghost-radio[data-status="0"] {
            background: none
        }

        .radio-wrapper .ghost-radio[data-status="1"] {
            background: url(../images/circle-filled.svg) no-repeat;
            background-size: 9px;
            background-position: center
        }

    .radio-wrapper .note {
        font: 400 12px "Rubik",sans-serif;
        color: var(--white);
        text-transform: capitalize
    }

    .radio-wrapper.inverse .ghost-radio {
        border-color: var(--theme-colour1)
    }

        .radio-wrapper.inverse .ghost-radio[data-status="1"] {
            background: url(../images/circle-filled-blue.svg) no-repeat;
            background-size: 9px;
            background-position: center
        }

    .radio-wrapper.inverse .note {
        color: #222222
    }

.dtBox .dtpicker-value {
    color: var(--theme-colour1)
}

.dtBox input.dtpicker-compValue {
    color: var(--theme-colour1);
    font-size: 14px
}

.dtBox a.dtpicker-button {
    background: var(--theme-colour1);
    color: #fdd606
}

.dtBox a.dtpicker-close {
    color: var(--theme-colour1)
}

.search-strip {
    padding-left: 15px;
    padding-right: 15px;
    position: relative
}

    .search-strip .title {
        font: 400 24px "Rubik",sans-serif;
        text-transform: capitalize;
        display: block;
        text-align: center;
        color: #292929
    }

        .search-strip .title strong {
            color: var(--theme-colour1)
        }

        .search-strip .title em {
            font: 700 40px "Rubik",sans-serif;
            background: #fdd606
        }

    .search-strip .branch-locator {
        display: none
    }

.signup-page .register {
    padding-bottom: 50px
}

.signup-page .signup-text {
    display: none
}

.search-result {
    display: block;
    margin-bottom: 15px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #d4d4d4
}

    .search-result .title {
        font: 400 20px "Rubik",sans-serif;
        display: block;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

    .search-result p {
        font: 400 14px "Rubik",sans-serif;
        color: #727272;
        text-align: justify
    }

    .search-result em {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        font: 400 12px "Rubik",sans-serif;
        font-style: normal;
        display: inline-block;
        background: #efefef;
        color: var(--theme-colour1);
        padding: 2px 15px;
        text-transform: capitalize
    }

    .search-result i {
        font-style: normal;
        background: #ff9632;
        color: #000
    }

.search-content {
    margin-bottom: 20px;
    overflow: hidden
}

    .search-content:not(.search-tab1) {
        display: none
    }

.country-code .nice-select .option {
    padding: 0 0 0 5px
}

.f16 {
    font-size: 16px
}

    .f16 a {
        font-size: 14px
    }

.faq-title {
    font: 400 30px "Rubik",sans-serif;
    color: var(--black);
    text-transform: capitalize;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    gap: 15px
}

    .faq-title span {
        position: relative;
        padding: 0 0 0 50px
    }

        .faq-title span:before, .faq-title span:after {
            content: '';
            position: absolute
        }

        .faq-title span:before {
            background: url(../images/faq-before.svg) no-repeat;
            top: 1px;
            left: 0;
            width: 40px;
            height: 40px;
            background-size: 40px
        }

    .faq-title .icn {
        display: flex;
        margin-top: 5px
    }

        .faq-title .icn svg path {
            fill: var(--theme-colour1)
        }

    .faq-title.job-title span:before {
        background: url(../images/job-before.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.careers-title span:before {
        background: url(../images/careers-before.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.success-title span:before {
        background: url(../images/tick-multi.svg) no-repeat;
        background-size: 40px
    }

    .faq-title.short {
        font-size: 20px;
        margin-top: 15px
    }

        .faq-title.short span {
            padding-top: 10px
        }

    .faq-title.featured {
        font-size: 24px
    }

        .faq-title.featured span:before {
            background: url(../images/featured.svg) no-repeat;
            background-size: 40px;
            top: -2px
        }

        .faq-title.featured span:after {
            top: 9px
        }

    .faq-title.search-title span:before {
        background: url(../images/search-blue.svg) no-repeat;
        background-size: 40px
    }

.search-tabs {
    margin-bottom: 20px
}

    .search-tabs span {
        font: 400 16px "Rubik",sans-serif;
        color: #a2a2a2;
        text-transform: capitalize;
        cursor: pointer;
        display: block;
        margin-bottom: 5px;
        position: relative
    }

        .search-tabs span:after {
            position: absolute;
            top: 8px;
            left: 0;
            content: '';
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid var(--theme-colour1);
            opacity: 0
        }

        .search-tabs span.active {
            padding-left: 15px;
            color: var(--theme-colour1)
        }

            .search-tabs span.active:after {
                opacity: 1
            }

.search-keyword {
    height: auto;
    margin-bottom: 30px
}

    .search-keyword p {
        font: 400 20px "Rubik",sans-serif;
        color: #474747;
        text-align: center
    }

        .search-keyword p strong {
            font: 700 24px "Rubik",sans-serif
        }

        .search-keyword p span {
            display: block;
            margin: 15px 0 10px;
            font-size: 14px
        }

        .search-keyword p em {
            font: 400 14px "Rubik",sans-serif
        }

            .search-keyword p em strong {
                font: 700 14px "Rubik",sans-serif
            }

.result-section {
    padding: 15px
}

    .result-section .result-title {
        text-transform: capitalize;
        margin-bottom: 30px
    }

        .result-section .result-title span, .result-section .result-title em {
            display: inline-block
        }

        .result-section .result-title span {
            font: 700 27px "Rubik",sans-serif;
            color: var(--theme-colour1);
            margin-right: 10px
        }

        .result-section .result-title em {
            font: 400 28px "Rubik",sans-serif;
            color: var(--black);
            font-style: normal
        }

.filtered-by {
    margin-bottom: 10px;
    display: none
}

    .filtered-by em, .filtered-by span {
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
        margin-bottom: 5px
    }

    .filtered-by em {
        font: 400 14px "Rubik",sans-serif;
        color: #424242;
        margin-right: 15px;
        text-transform: capitalize;
        font-style: normal
    }

    .filtered-by span {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        font: 400 12px "Rubik",sans-serif;
        background: #f2f2f2;
        color: #727272;
        position: relative;
        padding: 4px 25px 4px 10px
    }

        .filtered-by span i {
            background: url(../images/close-blue.svg) no-repeat;
            position: absolute;
            top: 8px;
            right: 10px;
            cursor: pointer;
            width: 8px;
            height: 8px;
            background-size: 8px
        }

.result-instance {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #fcfcfc;
    border: 1px solid #dedede;
    padding: 15px;
    margin-bottom: 20px;
    position: relative
}

    .result-instance .result-pic {
        margin-bottom: 10px;
        text-align: center
    }

        .result-instance .result-pic img {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            display: inline-block
        }

    .result-instance .name span {
        font: 700 18px "Rubik",sans-serif;
        text-transform: uppercase;
        color: var(--theme-colour1);
        display: block;
        margin-bottom: 5px
    }

    .result-instance .name em {
        font: 400 12px "Rubik",sans-serif;
        color: #797979;
        font-style: normal;
        display: block;
        margin-bottom: 5px
    }

    .result-instance p {
        font: 400 12px "Rubik",sans-serif;
        line-height: 22px;
        color: #858585
    }

        .result-instance p a {
            color: var(--theme-colour1);
            text-transform: capitalize;
            text-decoration: underline;
            margin-left: 5px
        }

    .result-instance .tags {
        border-top: 1px solid #eeeded;
        border-bottom: 1px solid #eeeded;
        padding: 5px 0;
        margin-bottom: 10px
    }

        .result-instance .tags span {
            font: 400 14px "Rubik",sans-serif;
            color: #4d4d4d;
            display: inline-block;
            margin-right: 15px;
            text-transform: capitalize;
            position: relative
        }

            .result-instance .tags span strong {
                display: inline-block;
                color: #282828;
                margin-left: 10px;
                font-weight: 400
            }

            .result-instance .tags span:after {
                position: absolute;
                top: -1px;
                right: -9px;
                content: '|';
                color: #898989
            }

            .result-instance .tags span:last-child {
                margin-right: 0
            }

                .result-instance .tags span:last-child:after {
                    display: none
                }

    .result-instance .connected {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        text-align: center
    }

        .result-instance .connected a, .result-instance .connected button {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            font: 400 14px "Rubik",sans-serif;
            text-transform: capitalize;
            border: 1px solid transparent;
            padding: 4px 0;
            margin-bottom: 10px;
            display: block;
            overflow: hidden;
            position: relative
        }

        .result-instance .connected .short, .result-instance .connected .like, .result-instance .connected .contact, .result-instance .connected .login-to-view {
            border: 1px solid #bfbfbf;
            background: #fcfcfc;
            color: #949494
        }

            .result-instance .connected .short span, .result-instance .connected .like span, .result-instance .connected .contact span, .result-instance .connected .login-to-view span {
                padding-left: 25px;
                position: relative
            }

                .result-instance .connected .short span:before, .result-instance .connected .like span:before, .result-instance .connected .contact span:before, .result-instance .connected .login-to-view span:before {
                    position: absolute;
                    top: 1px;
                    left: 0;
                    content: '';
                    width: 15px;
                    height: 15px
                }

                .result-instance .connected .short span:before {
                    background: url(../images/heart-grey.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .short.active {
                border-color: #f00;
                color: #f00
            }

                .result-instance .connected .short.active span:before {
                    background: url(../images/heart-filled-red.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .like span:before {
                background: url(../images/like-grey.svg) no-repeat;
                background-size: 15px
            }

            .result-instance .connected .like.active {
                border-color: #1696e8;
                color: #1696e8
            }

                .result-instance .connected .like.active span:before {
                    background: url(../images/like-blue.svg) no-repeat;
                    background-size: 15px
                }

            .result-instance .connected .contact span:before {
                background: url(../images/phone-grey.svg) no-repeat;
                background-size: 15px
            }

            .result-instance .connected .contact.active {
                border-color: #369623;
                color: #369623
            }

                .result-instance .connected .contact.active span:before {
                    background: url(../images/phone-green.svg) no-repeat;
                    background-size: 15px
                }

        .result-instance .connected .view, .result-instance .connected .login-to-view {
            background: var(--theme-colour1);
            color: var(--white)
        }

    .result-instance .result-desc[data-logged="0"] .connected .contact, .result-instance .result-desc[data-logged="0"] .connected .short {
        display: none
    }

    .result-instance .result-desc[data-logged="0"] .connected .login-to-view {
        display: inline-block
    }

    .result-instance .result-desc[data-logged="1"] .connected .contact {
        display: inline-block
    }

    .result-instance .result-desc[data-logged="1"] .connected .login-to-view {
        display: none
    }

    .result-instance .chat-now {
        position: absolute;
        top: 10px;
        right: 15px
    }

.default-container {
    padding: 0px !important;
    overflow: hidden;
    margin: 30px 0px
}

    .default-container .default-pad {
        padding: 0
    }

    .default-container .search-wrapper {
        width: 100%
    }

.find-match {
    background: #eee;
    padding: 15px 15px 0;
    margin-top: 30px
}

    .find-match .head {
        font: 400 20px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase;
        text-align: left;
        line-height: 22px
    }

        .find-match .head span {
            display: block
        }

            .find-match .head span:nth-child(2) {
                font-size: 28px
            }

            .find-match .head span:nth-child(3) {
                font: 700 30px "Rubik",sans-serif;
                margin-top: -4px
            }

    .find-match .inner {
        background: url(../images/find-match.jpg) no-repeat;
        padding: 30px 0 0 120px;
        background-position: bottom left;
        min-height: 210px;
        text-align: center
    }

        .find-match .inner img {
            margin: auto
        }

        .find-match .inner span {
            font: 400 14px "Rubik",sans-serif;
            color: #2a2a2a;
            text-transform: capitalize;
            margin: 10px 0;
            display: block
        }

        .find-match .inner a {
            display: block
        }

            .find-match .inner a img {
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px
            }

            .find-match .inner a:first-of-type {
                margin-bottom: 10px
            }

    .find-match .dummy-bg {
        background: url(../images/change-password-tab.png) no-repeat;
        background-position: center;
        background-color: var(--theme-colour1);
        height: 100px;
        margin: 2px -15px 0 -15px
    }

    .find-match.whit {
        background: var(--white);
        margin-bottom: 20px
    }

.faq-blocks .title {
    font: 400 16px "Rubik",sans-serif;
    color: #2e2e2e;
    display: block;
    text-transform: capitalize;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative
}

    .faq-blocks .title:after {
        position: absolute;
        bottom: 0;
        left: 50%;
        content: '';
        width: 24px;
        height: 1px;
        margin-left: -12px
    }

.faq-blocks [class^="col-"] {
    text-align: center;
    padding-top: 60px;
    position: relative;
    margin-bottom: 50px
}

    .faq-blocks [class^="col-"]:before {
        position: absolute;
        top: 0;
        left: 50%;
        content: '';
        margin-left: -20px;
        width: 40px;
        height: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(1) .title:after {
        background: #fb1e32
    }

    .faq-blocks [class^="col-"]:nth-child(2) .title:after {
        background: #05ce89
    }

    .faq-blocks [class^="col-"]:nth-child(3) .title:after {
        background: #22a0da
    }

    .faq-blocks [class^="col-"]:nth-child(4) .title:after {
        background: #dda624
    }

    .faq-blocks [class^="col-"]:nth-child(1):before {
        background: url(../images/heart-red.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(2):before {
        background: url(../images/tick-green.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(3):before {
        background: url(../images/keyhole.svg) no-repeat;
        background-size: 40px
    }

    .faq-blocks [class^="col-"]:nth-child(4):before {
        background: url(../images/telemarketer-gold.svg) no-repeat;
        background-size: 40px
    }

.faq-blocks p {
    font: 400 13px "Rubik",sans-serif;
    padding: 0 20px;
    color: #727272;
    line-height: 18px;
    text-align: center !important
}

.faq-call {
    border: 1px solid #ebebeb;
    border-left: none;
    border-right: none;
    padding: 20px 0;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px
}

@media (max-width: 767px) {
    .faq-call {
        flex-direction: column
    }
}

.faq-call span {
    font: 400 14px "Rubik",sans-serif;
    color: #646464;
    text-transform: capitalize;
    display: inline-block
}

@media (max-width: 767px) {
    .faq-call span {
        margin-bottom: 10px
    }
}

.faq-call strong {
    font: 400 24px "Rubik",sans-serif;
    display: block;
    color: var(--black);
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px
}

@media (max-width: 767px) {
    .faq-call strong {
        margin-bottom: 30px
    }
}

.faq-call strong a {
    color: var(--black);
    text-decoration: none
}

.faq-call strong span {
    margin-right: 0
}

    .faq-call strong span svg path {
        fill: var(--theme-colour1)
    }

.faq-search .title {
    font: 400 24px "Rubik",sans-serif;
    color: #646464;
    display: block;
    text-transform: capitalize;
    margin-bottom: 25px
}

.faq-searchbox {
    border: none;
    position: relative;
    height: 40px;
    margin-bottom: 15px
}

    .faq-searchbox input[type="text"] {
        width: 100%;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding-left: 12px
    }

    .faq-searchbox .submit-holder {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        background: var(--theme-colour1);
        text-align: center;
        height: 40px;
        width: 160px;
        border: none;
        border-radius: 0 8px 8px 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: ease-in-out 0.4s
    }

@media (max-width: 767px) {
    .faq-searchbox .submit-holder {
        width: 130px
    }
}

.faq-searchbox .submit-holder:hover {
    background-color: var(--theme-colour2)
}

.faq-searchbox .submit-holder input[type="submit"] {
    opacity: 0;
    z-index: 10
}

.faq-searchbox .submit-holder span {
    font: 400 20px "Rubik",sans-serif;
    color: var(--white);
    text-transform: uppercase;
    position: relative;
    padding-right: 0px;
    line-height: 37px;
    display: flex;
    align-items: center;
    gap: 8px
}

.faq-searchbox .submit-holder .icn {
    display: flex;
    height: fit-content
}

    .faq-searchbox .submit-holder .icn svg path {
        fill: var(--white)
    }

.common-list ul {
    margin: 0;
    padding: 0 0 0 35px
}

    .common-list ul li {
        font: 400 14px "Rubik",sans-serif;
        color: #2d2d2d;
        margin-bottom: 10px;
        list-style: none;
        padding-left: 10px;
        position: relative
    }

        .common-list ul li:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '-'
        }

        .common-list ul li a {
            color: var(--theme-colour1)
        }

.common-list.inverse ul {
    padding-left: 0
}

    .common-list.inverse ul li {
        font: 400 14px "Rubik",sans-serif
    }

.result-wrapper {
    border-bottom: 1px solid #afafaf;
    margin-bottom: 30px
}

.new-user .title {
    font: 400 20px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--black);
    margin-bottom: 10px;
    min-height: 48px;
    display: flex;
    align-items: center
}

.side-communities {
    text-align: center;
    margin: 10px 0
}

    .side-communities a {
        font: 400 16px "Rubik",sans-serif;
        padding: 15px 0;
        display: block;
        text-transform: capitalize;
        background: #e7e7e7;
        color: var(--black);
        border-bottom: 1px solid #e0dfdf
    }

        .side-communities a:last-child {
            border-bottom: none
        }

.intimate-join {
    min-height: 195px;
    background: #f0eeee;
    padding: 80px 15px 20px;
    position: relative;
    text-align: center
}

    .intimate-join:before {
        position: absolute;
        top: 15px;
        left: 50%;
        background: url(../images/diadem-black.png) no-repeat;
        content: '';
        width: 106px;
        height: 62px;
        background-size: 106px 62px;
        margin-left: -53px
    }

    .intimate-join .title {
        font: 700 20px "Rubik",sans-serif;
        display: block;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .intimate-join p {
        font: 400 12px "Rubik",sans-serif;
        color: #181818;
        text-transform: uppercase;
        text-align: center !important
    }

    .intimate-join a {
        font: 700 18px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        display: inline-block;
        padding: 8px 30px;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase;
        border: 1px solid transparent;
        margin: auto
    }

.quick-edit {
    position: absolute;
    top: 16px;
    right: 45px;
    color: var(--theme-colour1);
    font-size: 12px !important;
    text-transform: capitalize;
    cursor: pointer;
    padding-left: 10px;
    z-index: 100;
    display: none
}

    .quick-edit:before {
        position: absolute;
        top: -1px;
        left: 0;
        content: '|';
        color: var(--theme-colour1)
    }

.accordion .panel, .default-accordion .panel, .advanced-accordion .panel {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    font: 400 16px "Rubik",sans-serif;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    border-color: var(--white);
    padding: 0px
}

    .accordion .panel.active, .default-accordion .panel.active, .advanced-accordion .panel.active {
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px
    }

.accordion .panel-body, .default-accordion .panel-body, .advanced-accordion .panel-body {
    padding: 0px !important;
    padding-top: 0
}

    .accordion .panel-body.panel-bodyFaq, .default-accordion .panel-body.panel-bodyFaq, .advanced-accordion .panel-body.panel-bodyFaq {
        padding-top: 10px !important;
        padding-bottom: 10px !important
    }

.accordion .panel-primary .panel-heading, .default-accordion .panel-primary .panel-heading, .advanced-accordion .panel-primary .panel-heading {
    background: transparent;
    border-color: transparent;
    color: #000
}

.accordion .panel-heading, .default-accordion .panel-heading, .advanced-accordion .panel-heading {
    position: relative;
    padding-left: 30px;
    color: #4f4f4f
}

    .accordion .panel-heading:before, .default-accordion .panel-heading:before, .advanced-accordion .panel-heading:before {
        background: url(../images/right-arrow-accordion.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        width: 14px;
        height: 14px;
        background-size: 14px;
        margin-top: -7px
    }

.accordion .active .panel-heading, .default-accordion .active .panel-heading, .advanced-accordion .active .panel-heading {
    color: var(--theme-colour1)
}

    .accordion .active .panel-heading:before, .default-accordion .active .panel-heading:before, .advanced-accordion .active .panel-heading:before {
        background: url(../images/down-arrow-accordion.svg) no-repeat;
        background-size: 14px
    }

.accordion .active .quick-edit, .default-accordion .active .quick-edit, .advanced-accordion .active .quick-edit {
    display: inline-block
}

.accordion p, .default-accordion p, .advanced-accordion p {
    @Include reg(14);
    text-align: justify;
    line-height: 22px;
    color: #2d2d2d
}

.accordion.discover-accordion .panel, .default-accordion.discover-accordion .panel, .advanced-accordion.discover-accordion .panel {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0
}

    .accordion.discover-accordion .panel:after, .default-accordion.discover-accordion .panel:after, .advanced-accordion.discover-accordion .panel:after {
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
        background: url(../images/right-arrow-black.svg) no-repeat;
        position: absolute;
        top: 19px;
        right: 17px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        content: '';
        width: 10px;
        height: 10px;
        background-size: 10px;
        pointer-events: none
    }

    .accordion.discover-accordion .panel.denote .panel-heading, .default-accordion.discover-accordion .panel.denote .panel-heading, .advanced-accordion.discover-accordion .panel.denote .panel-heading {
        background-color: #f3f3f3
    }

    .accordion.discover-accordion .panel.denote:after, .default-accordion.discover-accordion .panel.denote:after, .advanced-accordion.discover-accordion .panel.denote:after {
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    .accordion.discover-accordion .panel.active, .default-accordion.discover-accordion .panel.active, .advanced-accordion.discover-accordion .panel.active {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0
    }

.accordion.discover-accordion .panel-primary, .default-accordion.discover-accordion .panel-primary, .advanced-accordion.discover-accordion .panel-primary {
    border: none;
    border-top: 1px solid #e1e1e1;
    margin: 0;
    position: relative
}

.accordion.discover-accordion .panel-heading, .default-accordion.discover-accordion .panel-heading, .advanced-accordion.discover-accordion .panel-heading {
    font: 400 14px "Rubik",sans-serif;
    background: var(--white);
    color: #000102;
    text-transform: capitalize;
    border: none;
    padding: 15px 0 15px 15px
}

    .accordion.discover-accordion .panel-heading:before, .default-accordion.discover-accordion .panel-heading:before, .advanced-accordion.discover-accordion .panel-heading:before {
        display: none
    }

.accordion.discover-accordion .panel-body, .default-accordion.discover-accordion .panel-body, .advanced-accordion.discover-accordion .panel-body {
    padding: 15px
}

.accordion.discover-accordion .upgrade-account a, .default-accordion.discover-accordion .upgrade-account a, .advanced-accordion.discover-accordion .upgrade-account a {
    margin-bottom: 8px;
    padding: 4px 0
}

.advanced-accordion .panel, .default-accordion.filter-accordion .panel, .tariff-accordion .panel {
    border-radius: 0;
    padding-left: 0;
    background: #efedee;
    border-color: #efedee;
    margin-bottom: 2px;
    box-shadow: none;
    position: relative
}

    .advanced-accordion .panel:after, .default-accordion.filter-accordion .panel:after, .tariff-accordion .panel:after {
        position: absolute;
        top: 13px;
        right: 15px;
        background: url(../images/as-plus.svg) no-repeat;
        content: '';
        width: 20px;
        height: 20px;
        background-size: 20px;
        pointer-events: none
    }

    .advanced-accordion .panel.active, .default-accordion.filter-accordion .panel.active, .tariff-accordion .panel.active {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: #f9f9f9;
        border-color: #f9f9f9
    }

        .advanced-accordion .panel.active:after, .default-accordion.filter-accordion .panel.active:after, .tariff-accordion .panel.active:after {
            background: url(../images/as-minus.svg) no-repeat;
            background-size: 20px
        }

.advanced-accordion .panel-primary .panel-heading, .default-accordion.filter-accordion .panel-primary .panel-heading, .tariff-accordion .panel-primary .panel-heading {
    font-size: 20px;
    padding-left: 15px;
    padding-right: 30px;
    text-transform: capitalize;
    cursor: pointer
}

    .advanced-accordion .panel-primary .panel-heading:before, .default-accordion.filter-accordion .panel-primary .panel-heading:before, .tariff-accordion .panel-primary .panel-heading:before {
        display: none
    }

.advanced-accordion .panel-body, .default-accordion.filter-accordion .panel-body, .tariff-accordion .panel-body {
    padding-left: 15px
}

.tariff-accordion .panel-primary .panel-heading {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: var(--theme-colour1);
    color: var(--white);
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 17px
}

.tariff-accordion .panel {
    margin-bottom: 0
}

    .tariff-accordion .panel.active {
        color: var(--white)
    }

    .tariff-accordion .panel:after {
        top: 8px
    }

.tariff-accordion .panel-body {
    padding: 0
}

.default-accordion.filter-accordion .panel {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #ededed;
    background: #f8f8f8
}

    .default-accordion.filter-accordion .panel:after {
        background: url(../images/filter-plus.svg) no-repeat;
        background-size: 15px;
        top: 18px;
        right: 20px
    }

    .default-accordion.filter-accordion .panel.active {
        background: #efefef
    }

        .default-accordion.filter-accordion .panel.active:after {
            background: url(../images/filter-minus.svg) no-repeat;
            background-size: 15px
        }

.default-accordion.filter-accordion .panel-primary .panel-heading, .default-accordion.filter-accordion .panel-primary .panel-location {
    font: 700 14px "Rubik",sans-serif;
    font-size: 14px;
    color: #2e2e2e;
    text-transform: uppercase;
    padding: 16px 45px 16px 16px
}

.accordion-wrapper {
    background: #f5f5f5;
    margin-bottom: 10px
}

    .accordion-wrapper .accordion-title {
        cursor: pointer;
        padding: 5px 5px 5px 10px;
        position: relative;
        display: flex;
        gap: 15px
    }

        .accordion-wrapper .accordion-title[data-open="0"] .plus {
            display: flex
        }

        .accordion-wrapper .accordion-title[data-open="0"] .mins {
            display: none
        }

        .accordion-wrapper .accordion-title[data-open="1"] .plus {
            display: none
        }

        .accordion-wrapper .accordion-title[data-open="1"] .mins {
            display: flex
        }

        .accordion-wrapper .accordion-title svg path {
            fill: var(--theme-colour1)
        }

    .accordion-wrapper .accordion {
        display: none;
        padding: 0 10px 15px
    }

.packages-container {
    padding: 30px 15px;
    background: var(--white);
    margin-bottom: 40px
}

    .packages-container .title {
        color: var(--theme-colour1);
        text-align: center
    }

        .packages-container .title span, .packages-container .title strong {
            display: block;
            text-transform: uppercase
        }

        .packages-container .title span {
            font: 400 20px "Rubik",sans-serif
        }

        .packages-container .title strong {
            font: 700 28px "Rubik",sans-serif;
            border-bottom: 1px solid var(--theme-colour1);
            margin-bottom: 10px;
            padding-bottom: 10px
        }

        .packages-container .title p {
            font: 400 14px "Rubik",sans-serif;
            text-align: center;
            color: var(--theme-colour1)
        }

.packages-slider {
    padding: 0 15px;
    margin-bottom: 10px
}

    .packages-slider .pack {
        border-top: 5px solid var(--theme-colour1);
        background: var(--white)
    }

        .packages-slider .pack.current-pack .items span {
            background: #f2f9ff;
            border-color: #dadada
        }

        .packages-slider .pack.current-pack .title, .packages-slider .pack.current-pack .title p strong {
            background: #f2f9ff
        }

        .packages-slider .pack .title {
            padding: 10px 15px;
            text-align: center
        }

            .packages-slider .pack .title span {
                font: 700 26px "Rubik",sans-serif;
                color: var(--theme-colour1);
                text-transform: uppercase;
                display: block;
                height: 68px
            }

            .packages-slider .pack .title p {
                text-align: center;
                position: relative
            }

                .packages-slider .pack .title p:after {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    height: 1px;
                    background: var(--theme-colour1);
                    content: ''
                }

                .packages-slider .pack .title p strong {
                    font: 400 18px "Rubik",sans-serif;
                    background: var(--white);
                    color: #3c3e3f;
                    position: relative;
                    z-index: 10;
                    display: inline-block;
                    padding: 0 15px
                }

            .packages-slider .pack .title em {
                font: 400 12px "Rubik",sans-serif;
                font-style: normal;
                color: var(--theme-colour1);
                display: inline-block;
                text-align: center
            }

        .packages-slider .pack .pack-price {
            background: var(--theme-colour1);
            padding: 10px 0;
            text-align: center
        }

            .packages-slider .pack .pack-price span {
                font: 700 25px "Rubik",sans-serif;
                color: var(--white);
                position: relative;
                padding-left: 30px
            }

                .packages-slider .pack .pack-price span:before {
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    background: url(../images/rupee-white.svg) no-repeat;
                    position: absolute;
                    top: 4px;
                    left: 0;
                    content: '';
                    border: 2px solid var(--white);
                    width: 25px;
                    height: 25px;
                    background-size: 12px;
                    background-position: center
                }

        .packages-slider .pack .items {
            text-align: center
        }

            .packages-slider .pack .items span {
                font: 400 16px "Rubik",sans-serif;
                display: block;
                padding: 10px 0;
                color: var(--black);
                text-transform: capitalize;
                border-bottom: 1px solid #f8f8f8
            }

                .packages-slider .pack .items span:after {
                    content: attr(data-count);
                    color: var(--theme-colour1);
                    padding-left: 10px
                }

            .packages-slider .pack .items.active span {
                border-color: #dadada;
                background: #f2f9ff
            }

            .packages-slider .pack .items .items-inner {
                display: none
            }

            .packages-slider .pack .items a {
                font: 400 14px "Rubik",sans-serif;
                background: var(--theme-colour1);
                color: var(--white);
                text-transform: uppercase;
                text-align: center;
                padding: 10px 0;
                display: block
            }

        .packages-slider .pack .make {
            background: var(--theme-colour1),10%;
            text-align: center;
            padding: 10px 0
        }

            .packages-slider .pack .make a {
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                border-radius: 25px;
                font: 400 18px "Rubik",sans-serif;
                display: inline-block;
                padding: 5px 45px;
                border: 1px solid var(--white);
                text-transform: uppercase;
                color: var(--white)
            }

.call {
    padding: 0 15px
}

    .call p {
        font: 400 26px "Rubik",sans-serif;
        padding: 30px;
        background: var(--theme-colour1);
        text-align: left;
        color: var(--white)
    }

        .call p a {
            font: 700 40px "Rubik",sans-serif;
            color: #fdd606;
            text-transform: capitalize;
            display: inline-block;
            margin-right: 15px
        }

.default-content {
    background: var(--white)
}

    .default-content .default-content-inner {
        padding: 0 15px
    }

.pay-title {
    font: 700 22px "Rubik",sans-serif;
    text-transform: uppercase;
    color: var(--theme-colour1);
    border-bottom: 1px solid var(--theme-colour1);
    margin-bottom: 10px
}

    .pay-title span {
        position: relative;
        display: inline-block;
        padding: 20px 20px 20px 40px
    }

        .pay-title span:before {
            background: url(../images/wallet.svg) no-repeat;
            position: absolute;
            top: 20px;
            left: 5px;
            content: '';
            width: 28px;
            height: 28px;
            background-size: 28px
        }

    .pay-title.ignored span:before {
        background: url(../images/ignored.svg) no-repeat;
        background-size: 28px
    }

.pay-form {
    padding-bottom: 50px
}

    .pay-form .relative:after {
        display: none
    }

    .pay-form .relative {
        margin-bottom: 0
    }

    .pay-form .holder {
        font-size: 16px;
        font-weight: 400;
        line-height: initial;
        color: #3D3D3D;
        margin-bottom: 8px;
        display: block;
        position: relative;
        font-style: normal
    }

    .pay-form input[type="text"], .pay-form textarea, .pay-form input[type="submit"] {
        width: 100%;
        height: 44px;
        border-radius: 3px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #BCBCBC;
        background-color: var(--white);
        outline: none
    }

        .pay-form input[type="text"]::placeholder, .pay-form textarea::placeholder, .pay-form input[type="submit"]::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #949191
        }

        .pay-form input[type="text"].disabled-textbox, .pay-form textarea.disabled-textbox, .pay-form input[type="submit"].disabled-textbox {
            background: #ccc;
            pointer-events: none;
            border-color: #afafaf
        }

    .pay-form input[type="submit"] {
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        width: auto;
        padding: 0 100px;
        background: var(--theme-colour1);
        color: var(--white);
        border-radius: 8px
    }

    .pay-form .typer {
        margin-bottom: 30px;
        padding: 0
    }

        .pay-form .typer.special-amount {
            padding-bottom: 20px
        }

        .pay-form .typer:before {
            background: url(../images/rupee-white.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 45px;
            height: 45px;
            background-size: 20px;
            background-color: var(--theme-colour1);
            background-position: center
        }

        .pay-form .typer input[type="text"] {
            font: 700 26px "Rubik",sans-serif;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            color: var(--theme-colour1);
            padding-left: 65px;
            height: 45px;
            border: none;
            border-bottom: 1px solid var(--theme-colour1);
            margin: 0
        }

    .pay-form textarea {
        resize: none;
        width: 100%;
        height: 130px;
        border-radius: 3px;
        padding: 16px 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #BCBCBC;
        background-color: var(--white);
        outline: none
    }

        .pay-form textarea::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #949191
        }

    .pay-form .field-validation-error {
        position: absolute;
        bottom: 0;
        left: 0;
        font: 400 12px "Rubik",sans-serif;
        color: #f00;
        display: block
    }

        .pay-form .field-validation-error:first-letter {
            text-transform: uppercase
        }

    .pay-form .pay-set, .pay-form .pay-reset {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        border: 1px solid transparent;
        height: 44px;
        width: 100%;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .pay-form .pay-set {
        background: var(--theme-colour1);
        color: var(--white)
    }

    .pay-form .pay-reset {
        background: var(--white);
        color: var(--theme-colour1);
        border-color: var(--theme-colour1)
    }

.helper {
    font: 400 30px "Rubik";
    color: var(--white);
    line-height: 85px;
    background: var(--light2Bg) !important;
    display: flex
}

@media (max-width: 1199px) {
    .helper {
        color: #25282a;
        flex-direction: column
    }
}

@media (max-width: 767px) {
    .helper span {
        font-size: 25px
    }
}

@media (max-width: 1199px) {
    .helper div {
        height: auto;
        display: flex;
        width: 100%;
        line-height: initial;
        padding: 10px
    }
}

.helper em {
    font-size: 29px
}

@media (max-width: 767px) {
    .helper em {
        font-size: 24px
    }
}

.exclusive {
    margin-bottom: 40px
}

@media (max-width: 991px) {
    .exclusive {
        margin-bottom: 0px
    }
}

@media (max-width: 767px) {
    .exclusive {
        margin: 30px 0
    }
}

.exclusive .inner {
    padding: 25px 30px
}

@media (max-width: 767px) {
    .exclusive .inner {
        padding: 10px
    }
}

.exclusive p {
    font: 400 28px "Rubik",sans-serif;
    color: var(--black);
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 20px
}

@media (max-width: 767px) {
    .exclusive p {
        font-size: 24px
    }
}

@media (max-width: 480px) {
    .exclusive p {
        font-size: 20px
    }
}

.exclusive p em {
    font-style: normal;
    color: var(--theme-colour1)
}

.exclusive p strong {
    font: 400 38px "Rubik",sans-serif;
    display: block
}

@media (max-width: 767px) {
    .exclusive p strong {
        font-size: 33px
    }
}

@media (max-width: 480px) {
    .exclusive p strong {
        font-size: 28px
    }
}

.exclusive a {
    font: 400 16px "Rubik",sans-serif;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    padding: 8px 45px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--theme-colour1);
    border: 1px solid transparent;
    height: 44px;
    width: 235px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px
}

@media (max-width: 767px) {
    .exclusive a {
        margin-bottom: 0
    }
}

.confirmation-container {
    padding: 0 30px;
    background: var(--white)
}

@media (max-width: 480px) {
    .confirmation-container {
        padding: 0px
    }
}

.confirmation-container .innerWrap {
    padding: 0px 20px;
    width: 800px;
    max-width: 100%;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1)
}

    .confirmation-container .innerWrap .inner {
        padding: 50px 0px;
        height: 600px;
        box-shadow: none !important;
        width: 100% !important
    }

.confirmation-container .title {
    font: 400 24px "Rubik",sans-serif;
    color: var(--theme-colour1);
    display: block;
    background: var(--white);
    text-transform: uppercase;
    text-align: center;
    position: relative
}

    .confirmation-container .title span {
        background: var(--white);
        display: inline-block;
        position: relative;
        z-index: 10;
        padding: 0 15px
    }

    .confirmation-container .title:before {
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: var(--theme-colour1);
        z-index: 1
    }

.confirmation-container .c-details {
    margin: 20px 0
}

    .confirmation-container .c-details span, .confirmation-container .c-details em {
        font: 400 15px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #2d2d2d
    }

    .confirmation-container .c-details em {
        font-style: normal;
        color: var(--theme-colour1)
    }

        .confirmation-container .c-details em.lowercase {
            text-transform: lowercase;
            word-break: break-all
        }

.confirmation-container button {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 22px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: var(--white);
    padding: 2px 30px;
    display: inline-block;
    border: 1px solid var(--theme-colour1);
    margin-top: 20px;
    text-transform: uppercase
}

.payment-container {
    padding: 30px;
    background: var(--white)
}

    .payment-container .wrapper {
        padding: 80px 0
    }

    .payment-container .inner {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: 90px 30px 30px;
        background: var(--white);
        position: relative;
        border: 1px solid var(--theme-colour1);
        text-align: center
    }

        .payment-container .inner:before {
            position: absolute;
            top: -30px;
            left: 50%;
            content: '';
            margin-left: -42px;
            width: 84px;
            height: 84px
        }

        .payment-container .inner.success:before {
            background: url(../images/success-tick.png) no-repeat;
            background-size: 84px
        }

        .payment-container .inner.failure:before {
            background: url(../images/success-cross.png) no-repeat;
            background-size: 84px
        }

        .payment-container .inner p {
            font: 700 24px "Rubik",sans-serif;
            text-transform: uppercase;
            color: var(--theme-colour1);
            text-align: center
        }

            .payment-container .inner p strong {
                font: 400 18px "Rubik",sans-serif;
                display: block
            }

            .payment-container .inner p.error-desc {
                font: 400 14px "Rubik",sans-serif;
                color: var(--black);
                margin-top: 40px;
                text-transform: capitalize
            }

                .payment-container .inner p.error-desc strong {
                    font: 700 28px "Rubik",sans-serif;
                    color: var(--theme-colour1);
                    display: block;
                    margin-bottom: 10px
                }

                    .payment-container .inner p.error-desc strong:first-letter {
                        text-transform: uppercase
                    }

        .payment-container .inner .pay-name {
            font: 400 28px "Rubik",sans-serif;
            text-transform: capitalize;
            display: block;
            text-align: center;
            color: var(--black);
            margin: 40px 0 20px
        }

        .payment-container .inner em {
            font: 400 14px "Rubik",sans-serif;
            color: var(--black);
            display: block;
            vertical-align: middle;
            font-style: normal;
            text-align: center;
            margin-bottom: 5px
        }

            .payment-container .inner em i {
                font-style: normal;
                position: relative;
                padding-left: 30px
            }

                .payment-container .inner em i:before {
                    position: absolute;
                    top: 2px;
                    left: 0;
                    content: '';
                    width: 16px;
                    height: 16px
                }

            .payment-container .inner em:nth-of-type(1) i:before {
                background: url(../images/envelope.svg) no-repeat;
                background-size: 16px
            }

            .payment-container .inner em:nth-of-type(2) i:before {
                background: url(../images/phone-blue.svg) no-repeat;
                background-size: 16px
            }

        .payment-container .inner .pay-amount {
            background: var(--theme-colour1);
            color: var(--white);
            display: block;
            padding: 15px;
            text-align: center;
            margin: 40px 0 20px
        }

            .payment-container .inner .pay-amount span {
                font: 400 24px "Rubik",sans-serif;
                display: block;
                vertical-align: middle;
                text-transform: uppercase
            }

                .payment-container .inner .pay-amount span:nth-child(1) {
                    border-bottom: 1px solid var(--white)
                }

                .payment-container .inner .pay-amount span i {
                    font-style: normal;
                    position: relative;
                    padding-left: 20px
                }

                    .payment-container .inner .pay-amount span i:before {
                        background: url(../images/rupee-white.svg) no-repeat;
                        position: absolute;
                        top: 9px;
                        left: 0;
                        content: '';
                        width: 16px;
                        height: 16px;
                        background-size: 16px
                    }

.ignored-container {
    padding: 0 30px;
    background: var(--white)
}

    .ignored-container .inner {
        background: #fefdfd;
        padding-bottom: 20px
    }

    .ignored-container .message-item {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        background: var(--white);
        margin: 15px 0;
        padding: 30px
    }

    .ignored-container .message-content .head .names .user.verified {
        padding-right: 25px;
        position: relative;
        display: inline-block
    }

        .ignored-container .message-content .head .names .user.verified:after {
            background: url(../images/success.svg) no-repeat;
            position: absolute;
            bottom: 1px;
            right: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

.remove-ignore {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 12px "Rubik",sans-serif;
    display: inline-block;
    color: var(--theme-colour1);
    padding: 4px 20px;
    text-transform: capitalize;
    border: 1px solid var(--theme-colour1)
}

    .remove-ignore span {
        position: relative;
        padding-left: 20px
    }

        .remove-ignore span:before {
            background: url(../images/cancel-filled-red.svg) no-repeat;
            position: absolute;
            top: 1px;
            left: 0;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    .remove-ignore:hover {
        color: var(--theme-colour1)
    }

.edit-profile .p-profile-wrap .p-head-wrap {
    padding-right: 0
}

    .edit-profile .p-profile-wrap .p-head-wrap .p-for {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        color: #4f4f4f;
        display: block;
        margin: 10px 0
    }

.upgrade-account p {
    font: 400 14px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-align: left
}

    .upgrade-account p:first-letter {
        text-transform: uppercase
    }

.upgrade-account a {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font: 700 16px "Rubik",sans-serif;
    text-transform: uppercase;
    display: block;
    padding: 8px 30px;
    background: #fdd606;
    color: var(--theme-colour1);
    text-align: center;
    margin-bottom: 5px;
    border: 1px solid transparent
}

.hidden-overflow {
    overflow: hidden
}

.horoscope-section.extend {
    min-width: 430px
}

.horoscope-section .p-horo-grahanila-wrap .p-horo-itm .p-horo-table tr {
    border-right: 1px solid #333;
    background: var(--white)
}

.horoscope-section em.victim {
    font: 400 22px "Rubik",sans-serif;
    display: block;
    color: #fdd606;
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 15px
}

    .horoscope-section em.victim span {
        font: 400 12px "Rubik",sans-serif;
        display: inline-block;
        vertical-align: middle;
        color: var(--white);
        padding-left: 15px;
        text-transform: uppercase
    }

.sending-interest p {
    font-size: 16px;
    color: var(--white);
    margin: 10px 0;
    text-align: left
}

    .sending-interest p strong {
        font-size: 16px;
        text-transform: uppercase;
        color: #fdd606
    }

.sending-interest textarea {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 150px;
    padding: 10px 0 0 10px;
    resize: none;
    border: 1px solid transparent
}

.sending-interest .text-interest {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    background: #fdd606;
    color: var(--theme-colour1);
    border: 1px solid transparent;
    text-transform: uppercase;
    padding: 4px 30px;
    margin-top: 20px
}

.upgrade-pack {
    background: var(--theme-colour1);
    color: var(--white);
    text-align: center
}

    .upgrade-pack strong {
        color: #fdd606;
        text-transform: uppercase
    }

    .upgrade-pack .upgrade-title {
        margin-bottom: 20px
    }

        .upgrade-pack .upgrade-title em, .upgrade-pack .upgrade-title span {
            font: 400 14px "Rubik",sans-serif;
            display: block
        }

        .upgrade-pack .upgrade-title em {
            font-style: normal;
            display: block;
            position: relative;
            margin-bottom: 15px
        }

            .upgrade-pack .upgrade-title em:before {
                position: absolute;
                top: 50%;
                left: 0;
                content: '';
                width: 100%;
                height: 1px;
                background: var(--white)
            }

            .upgrade-pack .upgrade-title em i {
                font-style: normal;
                display: inline;
                background: var(--theme-colour1);
                padding: 0 5px;
                position: relative;
                z-index: 10
            }

    .upgrade-pack .up {
        margin-bottom: 20px
    }

        .upgrade-pack .up p {
            font: 400 14px "Rubik",sans-serif;
            text-align: center;
            color: var(--white)
        }

            .upgrade-pack .up p span {
                display: block;
                margin-bottom: 10px;
                text-transform: uppercase
            }

    .upgrade-pack a {
        font: 400 15px "Rubik",sans-serif;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        background: #fdd606;
        color: var(--theme-colour1);
        display: inline-block;
        padding: 4px 30px;
        text-transform: uppercase;
        border-color: #fdd606
    }

.editor, .edit-location, .edit-edu-prof {
    z-index: 1000;
    display: none
}

    .editor .editor-title, .edit-location .editor-title, .edit-edu-prof .editor-title {
        font: 400 16px "Rubik",sans-serif;
        color: #fdd606;
        text-transform: uppercase;
        margin-bottom: 10px
    }

    .editor .relative, .edit-location .relative, .edit-edu-prof .relative {
        padding-top: 0
    }

    .editor p, .edit-location p, .edit-edu-prof p {
        font: 400 14px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-bottom: 5px;
        color: var(--white)
    }

    .editor .editor-submit, .edit-location .editor-submit, .edit-edu-prof .editor-submit {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 14px "Rubik",sans-serif;
        text-transform: uppercase;
        background: #fdd606;
        color: var(--theme-colour1);
        display: inline-block;
        padding: 4px 30px;
        border: 1px solid transparent
    }

    .editor .text-center {
        display: none
    }

    .editor .select-dropdown {
        display: none
    }

        .editor .select-dropdown.open {
            display: block
        }

.back-dash {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font: 400 14px "Rubik",sans-serif;
    margin-top: 15px;
    display: inline-block;
    padding: 4px 30px;
    background: #fdd606;
    color: var(--theme-colour1);
    border: 1px solid transparent;
    text-transform: capitalize
}

.fb-form .register {
    background: var(--white);
    position: relative;
    float: none;
    width: 100%
}

.fb-form .select-dropdown.country-code select {
    border-bottom-color: #747474;
    color: var(--theme-colour1)
}

.fb-form .select-dropdown .caption {
    color: var(--theme-colour1)
}

.fb-form .title {
    color: var(--theme-colour1)
}

    .fb-form .title span, .fb-form .title em {
        display: block
    }

    .fb-form .title span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: capitalize
    }

        .fb-form .title span strong {
            font: 700 16px "Rubik",sans-serif
        }

    .fb-form .title em {
        font: 400 14px "Rubik",sans-serif
    }

    .fb-form .title p {
        font: 400 12px "Rubik",sans-serif;
        text-align: center;
        color: var(--theme-colour1)
    }

.fb-form #fb-submit {
    font: 400 15px "Rubik",sans-serif;
    position: relative;
    display: block;
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white);
    padding: 10px 0;
    text-transform: uppercase;
    margin-top: 10px
}

    .fb-form #fb-submit em {
        display: none
    }

    .fb-form #fb-submit input, .fb-form #fb-submit button {
        opacity: 0;
        cursor: pointer
    }

.upgrade-now {
    background: url(../images/upgrade-now.jpg) no-repeat;
    background-position: center;
    background-color: var(--theme-colour1);
    background-size: cover;
    text-align: center;
    min-height: 330px;
    padding: 30px;
    margin-bottom: 20px
}

    .upgrade-now p {
        font: 400 20px "Rubik",sans-serif;
        text-transform: capitalize;
        color: var(--white);
        text-align: center;
        margin-bottom: 15px
    }

        .upgrade-now p strong {
            font: 700 20px "Rubik",sans-serif
        }

    .upgrade-now a {
        font: 700 16px "Rubik",sans-serif;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid transparent;
        display: inline-block;
        padding: 5px 30px;
        background: #e76045;
        color: var(--white);
        text-transform: uppercase;
        margin-top: 20px
    }

.overflow-v {
    overflow-x: visible
}

.default-goto {
    font: 400 15px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--theme-colour1);
    margin-top: 30px;
    display: inline-block;
    text-decoration: underline
}

.add-photo-crumb {
    font: 400 13px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-decoration: underline;
    text-transform: capitalize;
    margin-bottom: 25px
}

.advance-submit {
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white)
}

    .advance-submit span {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        display: block;
        position: relative;
        padding: 12px 0
    }

        .advance-submit span input[type="submit"] {
            opacity: 0;
            cursor: pointer;
            z-index: 100
        }

        .advance-submit span em {
            position: relative;
            padding-right: 30px;
            font-style: normal
        }

            .advance-submit span em:after {
                position: absolute;
                top: 3px;
                right: 5px;
                background: url(../images/search-yellow.svg) no-repeat;
                content: '';
                width: 15px;
                height: 15px;
                background-size: 15px
            }

.advanced-p {
    font: 400 14px "Rubik",sans-serif;
    text-align: center;
    color: #a2a2aa;
    padding: 15px 30px;
    line-height: 20px
}

.advanced-accordion, .filter-accordion {
    font-size: 14px
}

.adv-relative {
    position: relative;
    margin-bottom: 30px
}

    .adv-relative i {
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: #2D2D2D;
        text-transform: capitalize;
        margin-bottom: 10px;
        display: block;
        font-style: inherit
    }

    .adv-relative .select2-container--default .select2-selection--multiple {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: transparent;
        border-color: #afafaf
    }

    .adv-relative .select2-results__option {
        float: left;
        padding: 0 15px
    }

    .adv-relative .pick-dates input[type="text"] {
        width: 100%;
        height: 32px;
        border: none;
        border-bottom: 1px solid #afafaf;
        background: transparent
    }

.gender-switch {
    overflow: hidden;
    height: 30px;
    position: relative
}

    .gender-switch.disabled * {
        pointer-events: none
    }

    .gender-switch span {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        display: block;
        width: 55%;
        height: 30px;
        display: inline-block;
        text-align: center;
        text-transform: capitalize;
        border: 1px solid #afafaf;
        position: absolute;
        line-height: 28px;
        top: 0;
        cursor: pointer
    }

        .gender-switch span:first-of-type {
            left: 0
        }

        .gender-switch span:last-of-type {
            right: 0
        }

        .gender-switch span.active {
            background: var(--theme-colour1);
            color: var(--white);
            z-index: 10;
            border-color: var(--theme-colour1)
        }

    .gender-switch input[type="radio"] {
        display: none
    }

.adv-select {
    position: relative;
    display: block
}

    .adv-select:after {
        background: url(../images/down-arrow-accordion.svg) no-repeat;
        position: absolute;
        top: 7px;
        right: 15px;
        width: 15px;
        height: 15px;
        background-size: 15px;
        content: '';
        pointer-events: none
    }

    .adv-select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        border-bottom: 1px solid #afafaf;
        height: 30px;
        width: 100%;
        background: transparent;
        padding-left: 10px
    }

    .adv-select.rounded select {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 1px solid #afafaf
    }

    .adv-select.contact-inverse select {
        font: 400 12px "Rubik",sans-serif;
        padding-left: 0;
        border-bottom-color: #747477;
        color: #525151
    }

.adv-age em {
    font: 400 13px "Rubik",sans-serif;
    font-style: normal;
    display: block;
    margin: 5px 0;
    text-align: center
}

.adv-save input[type="text"] {
    width: 100%;
    height: 32px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #afafaf;
    margin: 0px 28px 20px
}

.adv-save a {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #057DC4;
    text-decoration: underline;
    text-transform: capitalize
}

.adv-save .save-search {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 14px;
    background: var(--theme-colour1);
    display: inline-block;
    color: #ffffff;
    white-space: nowrap;
    padding: 5px 20px;
    border: none;
    text-transform: capitalize
}

.adv-save p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #494949;
    text-align: left
}

.saved-searches {
    padding: 20px 8px 25px 15px;
    background: var(--lightBg);
    margin-bottom: 15px;
    color: var(--theme-text-colour);
    overflow: hidden
}

    .saved-searches .title {
        font: 700 16px "Rubik",sans-serif;
        text-transform: capitalize;
        margin-bottom: 15px
    }

    .saved-searches .instance {
        text-transform: capitalize;
        margin-bottom: 15px
    }

        .saved-searches .instance span {
            font: 400 12px "Rubik",sans-serif;
            display: block;
            margin-bottom: 5px
        }

        .saved-searches .instance a {
            font: 400 12px "Rubik",sans-serif;
            display: inline-block;
            color: var(--theme-colour1);
            position: relative;
            padding-right: 15px
        }

            .saved-searches .instance a:after {
                position: absolute;
                top: -1px;
                right: 5px;
                content: '|';
                color: #e7e7e7
            }

            .saved-searches .instance a:last-of-type {
                padding-right: 0
            }

                .saved-searches .instance a:last-of-type:after {
                    display: none
                }

            .saved-searches .instance a:hover {
                text-decoration: underline
            }

    .saved-searches .ss-viewall {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        font: 400 12px "Rubik",sans-serif;
        background: #fdd606;
        color: var(--theme-colour1);
        padding: 0 15px;
        border: 1px solid transparent;
        text-transform: capitalize
    }

#filter-mobile, #filter-close {
    font: 700 14px "Rubik",sans-serif;
    background: var(--theme-colour1);
    color: #fdd606;
    display: block;
    text-align: center;
    padding: 5px 0;
    text-transform: uppercase
}

#filter-close {
    position: relative
}

    #filter-close span {
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/close-white.svg) no-repeat;
        width: 28px;
        height: 28px;
        display: inline-block;
        background-size: 12px;
        background-position: center;
        cursor: pointer
    }

.edit-select select, .filter-single select {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;
    height: 32px;
    border: 1px solid var(--theme-colour1);
    padding-left: 10px
}

.edit-select .select-appearance, .filter-single .select-appearance {
    display: block;
    position: relative
}

    .edit-select .select-appearance:after, .filter-single .select-appearance:after {
        position: absolute;
        top: 14px;
        right: 15px;
        pointer-events: none;
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid var(--theme-colour1)
    }

.filter-section {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 10000;
    overflow-y: scroll;
    display: none
}

    .filter-section .title {
        display: none
    }

    .filter-section .scrollbar-inner > .scroll-element.scroll-y {
        right: 0
    }

.filter-accordion a, .more-filters a {
    font: 400 13px "Rubik",sans-serif;
    text-transform: capitalize;
    color: var(--theme-colour1);
    display: block
}

    .filter-accordion a.active, .more-filters a.active {
        text-decoration: underline
    }

    .filter-accordion a:hover, .more-filters a:hover {
        text-decoration: underline
    }

    .filter-accordion a.more {
        text-align: right;
        padding-right: 10px
    }

.filter-slider {
    position: relative;
    padding: 0 15px 20px 11px
}

    .filter-slider em {
        font: 400 12px "Rubik",sans-serif;
        color: var(--theme-colour1);
        position: absolute;
        bottom: 0
    }

        .filter-slider em:first-of-type {
            left: 2px
        }

        .filter-slider em:last-of-type {
            right: 10px
        }

.filter-single {
    padding-right: 10px;
    padding-left: 2px
}

    .filter-single select {
        background: transparent
    }

.hide-filter {
    display: none
}

.more-filters {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    z-index: 20000;
    display: none
}

    .more-filters .inner-title {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        background: var(--theme-colour1);
        color: var(--white);
        position: relative;
        padding: 12px 85px 12px 15px
    }

        .more-filters .inner-title input[type="submit"], .more-filters .inner-title a {
            position: absolute;
            top: 0;
            display: block;
            width: 40px;
            height: 100%;
            border: none
        }

        .more-filters .inner-title input[type="submit"] {
            background: url(../images/tick-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            right: 49px
        }

        .more-filters .inner-title a {
            background: url(../images/close-white.svg) no-repeat;
            background-size: 15px;
            background-position: center;
            right: 8px
        }

    .more-filters .inner {
        padding: 15px;
        background: #efefef
    }

    .more-filters .scrollbar-inner {
        height: 100vh
    }

        .more-filters .scrollbar-inner .scroll-element .scroll-bar {
            background: #ccc
        }

.checkers, .all-checker {
    font: 400 13px "Rubik",sans-serif;
    padding-left: 22px;
    position: relative;
    text-transform: capitalize;
    margin-bottom: 2px;
    color: var(--theme-colour1)
}

    .checkers input[type="checkbox"], .all-checker input[type="checkbox"] {
        display: none
    }

    .checkers i {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: absolute;
        top: 1px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid var(--theme-colour1);
        display: inline-block;
        cursor: pointer
    }

        .checkers i[data-status="1"] {
            background: url(../images/tick-blue.svg) no-repeat;
            background-size: 10px;
            background-position: center
        }

        .checkers i[data-status="0"] {
            background: none
        }

    .all-checker em {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: absolute;
        top: 1px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid var(--theme-colour1);
        display: inline-block;
        cursor: pointer
    }

        .all-checker em[data-all="1"] {
            background: url(../images/tick-blue.svg) no-repeat;
            background-size: 10px;
            background-position: center
        }

        .all-checker em[data-all="0"] {
            background: none
        }

    .all-checker .checkers-inner {
        margin: 10px 0
    }

.filter-location {
    cursor: pointer
}

    .filter-location span {
        font: 700 12px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        color: #333
    }

    .filter-location p {
        font: 400 12px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

.misc-title {
    font: 400 18px "Rubik",sans-serif;
    color: var(--theme-colour1);
    text-transform: capitalize;
    margin-bottom: 15px
}

    .misc-title span {
        position: relative;
        padding-right: 30px
    }

        .misc-title span:after {
            background: url(../images/faq-after.svg) no-repeat;
            position: absolute;
            top: 3px;
            right: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

.hype {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #004e93;
    overflow: hidden;
    margin-bottom: 20px
}

    .hype p {
        padding: 50px 30px;
        position: relative;
        color: var(--white);
        margin-bottom: 0
    }

        .hype p:before, .hype p:after {
            position: absolute;
            content: '';
            width: 30px;
            height: 30px
        }

        .hype p:before {
            background: url(../images/quote-left-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            top: 15px
        }

        .hype p:after {
            background: url(../images/quote-right-white.svg) no-repeat;
            background-size: 20px;
            background-position: center;
            bottom: 15px
        }

.royale {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: url(../images/royale-bg.jpg) no-repeat;
    border: 1px solid #e3e3e3;
    background-position: center bottom;
    background-size: cover;
    margin-bottom: 20px;
    padding-bottom: 30px
}

    .royale .diadem {
        display: block;
        position: relative;
        text-align: center;
        padding: 80px 0 15px
    }

        .royale .diadem span, .royale .diadem em {
            color: #292929;
            text-transform: uppercase
        }

        .royale .diadem span {
            font: 700 16px "Rubik",sans-serif;
            margin-bottom: 5px;
            display: block
        }

        .royale .diadem em {
            font: 400 12px "Rubik",sans-serif
        }

        .royale .diadem:before {
            position: absolute;
            top: 25px;
            left: 50%;
            background: url(../images/diadem.png) no-repeat;
            background-size: 76px 45px;
            content: '';
            width: 76px;
            height: 45px;
            margin-left: -38px
        }

        .royale .diadem:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 30px;
            height: 3px;
            background: var(--theme-colour1);
            content: '';
            margin-left: -15px
        }

.select2-locked {
    pointer-events: none;
    opacity: 0.5
}

.messages-contact {
    text-align: left
}

    .messages-contact div.blocked {
        margin-bottom: 5px
    }

        .messages-contact div.blocked:last-of-type {
            margin-bottom: 0
        }

    .messages-contact span, .messages-contact p {
        font: 400 12px "Rubik",sans-serif;
        color: var(--white)
    }

    .messages-contact span {
        display: block;
        text-transform: capitalize;
        text-decoration: underline
    }

    .messages-contact strong {
        font-weight: 700;
        color: #fdd606
    }

    .messages-contact em {
        font-size: 12px;
        padding-left: 15px;
        font-style: normal;
        text-transform: uppercase
    }

    .messages-contact p {
        text-align: left
    }

        .messages-contact p:first-letter {
            text-transform: uppercase
        }

.apply-now {
    margin-bottom: 30px
}

    .apply-now .title, .apply-now .ap-title {
        font: 700 24px "Rubik",sans-serif;
        color: var(--theme-colour1);
        display: block;
        margin-bottom: 10px;
        text-transform: capitalize
    }

    .apply-now .ap-title {
        font: 400 24px "Rubik",sans-serif
    }

    .apply-now input[type="submit"] {
        font: 400 16px "Rubik",sans-serif;
        text-transform: uppercase;
        width: 100%;
        height: 52px;
        line-height: 52px;
        background: var(--theme-colour1);
        color: var(--white);
        border: 1px solid transparent
    }

    .apply-now.inverse .inner-flex {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

    .apply-now.inverse input[type="submit"], .apply-now.inverse a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        border: 1px solid var(--theme-colour1);
        display: flex;
        justify-content: center;
        text-align: center;
        width: 45%;
        align-items: center;
        min-height: 46px;
        padding: 5px 0;
        text-transform: uppercase;
        height: auto
    }

    .apply-now.inverse.solo {
        padding-bottom: 30px
    }

    .apply-now .more {
        background: var(--lightBg);
        padding: 30px 30px 40px;
        margin-top: 30px
    }

        .apply-now .more p {
            font: 400 14px "Rubik",sans-serif;
            color: var(--theme-text-colour);
            margin-bottom: 20px
        }

            .apply-now .more p strong {
                color: var(--theme-colour1)
            }

        .apply-now .more .before {
            font: 400 14px "Rubik",sans-serif;
            border-bottom: 1px solid var(--theme-colour2);
            color: var(--theme-colour2);
            padding: 5px 0 8px 45px;
            position: relative;
            margin-bottom: 20px
        }

            .apply-now .more .before:before {
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
                width: 30px;
                height: 30px
            }

            .apply-now .more .before.one:before {
                background: url(../images/before-one.svg) no-repeat;
                background-size: 30px
            }

            .apply-now .more .before.two {
                margin-bottom: 0
            }

                .apply-now .more .before.two:before {
                    background: url(../images/before-two.svg) no-repeat;
                    background-size: 30px
                }

.highs ul {
    margin: 20px 0 0 0;
    padding: 0
}

.highs li {
    font: 400 14px "Rubik",sans-serif;
    color: #555;
    position: relative;
    padding-left: 55px;
    list-style: none;
    margin-bottom: 20px
}

    .highs li:before {
        position: absolute;
        top: 50%;
        left: 0;
        content: '';
        background: var(--theme-colour1);
        width: 35px;
        height: 1px
    }

.site-tables {
    margin: 20px 0
}

    .site-tables .table-title {
        font: 400 20px "Rubik",sans-serif;
        color: #212121;
        text-transform: capitalize;
        margin-bottom: 15px
    }

    .site-tables table {
        font: 400 14px "Rubik",sans-serif;
        margin-bottom: 30px;
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word
    }

        .site-tables table.no-mb {
            margin-bottom: 0
        }

        .site-tables table tr th, .site-tables table tr td {
            text-align: center;
            padding: 10px 5px;
            color: #5c5c5c
        }

        .site-tables table tr th {
            text-transform: uppercase;
            background: #ebebeb
        }

        .site-tables table tr td {
            text-transform: capitalize
        }

        .site-tables table.first tr th:first-child {
            background: var(--theme-colour1);
            color: var(--white)
        }

.here {
    background: var(--lightBg);
    padding: 30px
}

@media (max-width: 991px) {
    .here {
        margin: 30px 0
    }
}

.here .here-title {
    margin-bottom: 20px
}

    .here .here-title p {
        font: 700 20px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: uppercase
    }

    .here .here-title span {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-text-colour)
    }

.here .mail-call {
    margin-top: 30px
}

    .here .mail-call p {
        font: 400 18px "Rubik",sans-serif;
        color: var(--theme-text-colour);
        text-transform: capitalize
    }

    .here .mail-call span {
        font: 400 15px "Rubik",sans-serif;
        color: var(--theme-text-colour)
    }

        .here .mail-call span a {
            color: var(--theme-colour1)
        }

            .here .mail-call span a:hover {
                color: #fdd606
            }

        .here .mail-call span em {
            font: 400 12px "Rubik",sans-serif;
            font-style: normal;
            color: var(--theme-text-colour)
        }

.here.inverse .here-title {
    margin-bottom: 10px
}

.career-apply {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: var(--lightBg);
    overflow: hidden;
    position: relative;
    padding: 70px 15px 55px;
    margin-bottom: 15px
}

    .career-apply .title {
        position: absolute;
        top: 15px;
        left: 0;
        font: 700 20px "Rubik",sans-serif;
        background: var(--light2Bg);
        color: var(--c2d);
        margin-bottom: 15px;
        display: block;
        width: 100%;
        padding: 5px 15px;
        text-transform: capitalize;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .career-apply p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-text-colour);
        line-height: 18px;
        text-align: justify;
        margin-bottom: 15px
    }

    .career-apply .desc {
        padding-left: 30px;
        display: block;
        position: relative
    }

        .career-apply .desc:before {
            background: url(../images/marker-yellow.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 20px;
            height: 20px;
            background-size: 20px
        }

        .career-apply .desc em {
            font: 400 14px "Rubik",sans-serif;
            color: var(--theme-text-colour);
            display: block;
            font-style: normal;
            text-transform: capitalize
        }

            .career-apply .desc em strong {
                color: var(--theme-colour1)
            }

            .career-apply .desc em:first-child {
                margin-bottom: 5px
            }

    .career-apply a {
        font: 400 16px "Rubik",sans-serif;
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase
    }

        .career-apply a:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

.load-more {
    margin: 25px 0;
    text-align: center
}

    .load-more a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        font: 400 13px "Rubik",sans-serif;
        display: inline-block;
        padding: 4px 25px;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: capitalize;
        border: 1px solid transparent;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 160px;
        margin: auto;
        text-decoration: none
    }

.job-location, .published {
    font: 400 18px "Rubik",sans-serif;
    display: block;
    color: #3e3e3e;
    text-transform: capitalize;
    padding: 15px 0 15px 45px;
    border: 1px solid #b8b8b8;
    border-left: none;
    border-right: none;
    position: relative;
    margin: 10px 0
}

.published {
    padding: 15px 0;
    border: none;
    margin-top: 0;
    padding-top: 0
}

.job-location:before {
    background: url(../images/marker-blue.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    width: 30px;
    height: 30px;
    background-size: 30px;
    margin-top: -15px
}

.searching-partner {
    background: var(--light2Bg);
    margin-bottom: 20px
}

    .searching-partner .title {
        font: 400 14px "Rubik",sans-serif;
        display: block;
        padding: 10px;
        color: var(--c2d);
        text-transform: uppercase
    }

        .searching-partner .title strong {
            font: 700 50px "Rubik",sans-serif;
            display: block
        }

    .searching-partner .inner {
        padding: 15px 20px 10px;
        text-align: center
    }

        .searching-partner .inner img {
            margin: 10px auto
        }

    .searching-partner .matches {
        font: 400 20px "Rubik",sans-serif;
        color: var(--c2d);
        text-transform: uppercase;
        border: none
    }

        .searching-partner .matches strong {
            font: 700 40px "Rubik",sans-serif;
            display: block
        }

.radius-link {
    font: 700 18px "Rubik",sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
    background: var(--theme-colour1);
    color: var(--white);
    text-transform: uppercase;
    padding: 8px 0;
    display: block;
    margin: 20px 0;
    border: 1px solid transparent
}

.file-upload {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    height: 40px;
    border: 1px solid #939393;
    text-align: center;
    overflow: hidden;
    margin: 15px 0 0;
    padding-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .file-upload span {
        font: 400 13px "Rubik",sans-serif;
        color: #818181;
        position: relative;
        padding-right: 25px;
        line-height: 28px;
        text-transform: capitalize
    }

        .file-upload span:after {
            position: absolute;
            top: 1px;
            right: 0;
            background: url(../images/upload-blue.svg) no-repeat;
            content: '';
            width: 14px;
            height: 14px;
            background-size: 14px
        }

    .file-upload input[type="file"] {
        opacity: 0;
        z-index: 100;
        cursor: pointer
    }

.file-ancestor .file-upload {
    margin: 15px;
    padding-bottom: 0
}

.file-ancestor .preview-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    display: grid;
    margin-top: 10px;
    padding: 4px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    column-gap: 10px;
    row-gap: 6px
}

.file-ancestor .add-more {
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    transition: all .4s ease-in;
    position: relative;
    width: 100%;
    height: 100px;
    padding-top: 65px;
    float: left;
    border: 1px dashed var(--theme-colour1);
    display: none;
    margin-bottom: 5px;
    text-align: center
}

    .file-ancestor .add-more:hover {
        -webkit-transition: all .4s ease-in;
        -moz-transition: all .4s ease-in;
        transition: all .4s ease-in;
        background: #fdd606
    }

    .file-ancestor .add-more span {
        font: 400 14px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: capitalize
    }

    .file-ancestor .add-more:before {
        background: url(../images/add-more-blue.svg) no-repeat;
        position: absolute;
        top: 15px;
        left: 50%;
        content: '';
        width: 40px;
        height: 40px;
        background-size: 40px;
        margin: 0 0 0 -20px
    }

    .file-ancestor .add-more input[type="file"] {
        opacity: 0;
        z-index: 100;
        cursor: pointer
    }

.file-ancestor .show-more .add-more {
    display: block
}

.file-ancestor .preview {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.25);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    border: 1px solid #afafaf;
    width: 50%;
    height: 100px;
    float: left;
    overflow: hidden;
    margin-bottom: 5px;
    background-size: cover;
    background-position: center;
    position: relative
}

    .file-ancestor .preview .delete {
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.85);
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.85);
        box-shadow: 0 0 10px rgba(0,0,0,0.85);
        position: absolute;
        top: 50%;
        left: 50%;
        background: url(../images/delete-white.svg) no-repeat;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-size: 15px;
        background-position: center;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
        border: 1px solid var(--white);
        background-color: var(--theme-colour1);
        display: inline-block;
        position: relative;
        cursor: pointer
    }

.discount {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: var(--theme-colour1);
    padding: 15px;
    text-align: center;
    z-index: 1000
}

    .discount .content {
        padding: 5px 30px 15px;
        border: 2px dashed var(--white);
        position: relative
    }

        .discount .content span {
            font: 700 30px "Rubik",sans-serif;
            color: var(--white);
            display: block
        }

        .discount .content p {
            font: 400 14px "Rubik",sans-serif;
            color: var(--white);
            text-align: center
        }

            .discount .content p:first-letter {
                text-transform: uppercase
            }

        .discount .content a.now {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: #fdd606;
            width: 75px;
            height: 75px;
            padding-top: 16px;
            display: inline-block;
            border: 1px solid transparent;
            color: #181818
        }

            .discount .content a.now em, .discount .content a.now i {
                font-style: normal;
                display: block;
                text-transform: uppercase
            }

            .discount .content a.now i {
                font: 700 12px "Rubik",sans-serif
            }

            .discount .content a.now em {
                font: 700 23px "Rubik",sans-serif
            }

    .discount a#close-discount {
        background: url(../images/close-white.svg) no-repeat;
        position: absolute;
        top: -15px;
        right: -15px;
        width: 44px;
        height: 44px;
        background-color: var(--theme-colour1);
        display: inline-block;
        background-size: 20px;
        background-position: center
    }

.file-upload-relative {
    padding: 0 0 15px;
    margin: 0 0 20px
}

.map-container {
    margin: 20px 0;
    background: var(--theme-colour1)
}

    .map-container .map-title {
        padding: 20px
    }

        .map-container .map-title .desc {
            margin-bottom: 20px
        }

            .map-container .map-title .desc p {
                font: 400 24px "Rubik",sans-serif;
                text-transform: capitalize;
                margin-bottom: 0;
                color: var(--white)
            }

            .map-container .map-title .desc span {
                font: 400 12px "Rubik",sans-serif;
                display: block;
                color: var(--white)
            }

        .map-container .map-title .map-relative {
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            height: 38px;
            position: relative;
            overflow: hidden
        }

            .map-container .map-title .map-relative input[type="text"] {
                padding-left: 20px;
                height: 100%;
                width: 100%;
                padding-right: 70px
            }

            .map-container .map-title .map-relative .submit-button {
                background: url(../images/search-blue.svg) no-repeat;
                position: absolute;
                top: 0;
                right: 0;
                background-color: #fdd606;
                width: 60px;
                height: 100%;
                background-size: 15px;
                background-position: center
            }

                .map-container .map-title .map-relative .submit-button .map-submit {
                    opacity: 0
                }

#intimate-map {
    width: 100%;
    height: 405px;
    text-align: center
}

.tdu {
    font-size: 18px
}

ul#ui-id-1 {
    margin: 0;
    padding: 0;
    background: var(--white)
}

    ul#ui-id-1 li {
        font: 400 14px "Rubik",sans-serif;
        list-style: none;
        padding: 5px;
        text-transform: capitalize
    }

.services-content p {
    line-height: 30px
}

.verify .inner, .verification .inner {
    display: none
}

    .verify .inner input[type="text"], .verification .inner input[type="text"] {
        width: 100%;
        height: 35px;
        border: none;
        border-bottom: 1px solid #afafaf
    }

    .verify .inner .add-hobby, .verification .inner .add-hobby {
        display: block
    }

    .verify .inner.shown, .verification .inner.shown {
        display: block
    }

.verification .outer {
    text-align: left
}

    .verification .outer .add-hobby {
        margin-top: 0
    }

    .verification .outer p {
        font: 400 16px "Rubik",sans-serif;
        margin-bottom: 15px;
        color: var(--white)
    }

.verification .inner input[type="text"] {
    border-color: var(--white);
    background: transparent
}

.verification .inner [placeholder] {
    color: var(--white) !important
}

.verification .inner a, .verification .inner button {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-block;
    background: #fdd606;
    color: var(--theme-colour1);
    padding: 2px 20px;
    text-transform: capitalize;
    margin-right: 15px
}

    .verification .inner a:last-child, .verification .inner button:last-child {
        margin-right: 0
    }

.verify-email .inner {
    display: block
}

.verify-email p {
    color: var(--white)
}

.ad-location {
    background: url(../images/ad-location.jpg) no-repeat;
    background-position: top center;
    padding: 280px 0 35px;
    background-color: var(--theme-colour1);
    text-align: center;
    margin-bottom: 20px
}

    .ad-location .location-title {
        font: 400 16px "Rubik",sans-serif;
        color: var(--white);
        text-transform: capitalize;
        margin-bottom: 20px
    }

        .ad-location .location-title span {
            display: block
        }

        .ad-location .location-title strong {
            font: 700 16px "Rubik",sans-serif
        }

    .ad-location a {
        font: 400 14px "Rubik",sans-serif;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        text-transform: capitalize;
        color: var(--white);
        border: 1px solid var(--white);
        display: inline-block;
        padding: 5px 30px
    }

.message-item {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #f5f4f4;
    padding: 15px 10px;
    overflow: hidden;
    margin-bottom: 15px
}

    .message-item.unread {
        background: #e4f1ff
    }

    .message-item .message-pic img, .message-item .message-pic .chat-now {
        display: inline-block;
        vertical-align: middle
    }

    .message-item .message-pic img {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin: 0 0 10px
    }

span.quick-or {
    font: 400 16px "Rubik",sans-serif;
    margin: 0;
    display: block;
    text-align: center;
    text-transform: uppercase
}

    span.quick-or em {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: inline-block;
        border: 1px solid var(--theme-colour1);
        color: var(--theme-colour1);
        font-style: normal;
        padding-top: 9px;
        position: relative
    }

        span.quick-or em:before, span.quick-or em:after {
            width: 100px;
            height: 1px;
            background: var(--theme-colour1);
            content: '';
            position: absolute;
            top: 50%
        }

        span.quick-or em:before {
            left: 50%;
            margin-left: -150px
        }

        span.quick-or em:after {
            right: 50%;
            margin-right: -150px
        }

.ov-hidden {
    overflow: hidden
}

.side-panel .profileOfTheDay {
    position: relative;
    background: linear-gradient(169deg, #f3fbff 48%, #fff 34%);
    border-radius: 8px;
    border: 1px solid #F3F3F3;
    margin-bottom: 6px
}

@media (max-width: 991px) {
    .side-panel .profileOfTheDay {
        order: 0;
        margin-top: 12px
    }
}

.side-panel .profileOfTheDay.profileOfTheDayNo {
    background: transparent
}

.side-panel .profileOfTheDay .header {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: var(--theme-colour1);
    padding: 20px 10px 0;
    text-align: center
}

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .header {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.side-panel .profileOfTheDay .photo {
    text-align: center;
    max-width: 141px;
    margin: auto
}

    .side-panel .profileOfTheDay .photo img {
        border: 2px dashed var(--theme-colour1);
        border-radius: 50%;
        padding: 10px;
        display: initial;
        width: 100%
    }

.side-panel .profileOfTheDay .footerData {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px
}

    .side-panel .profileOfTheDay .footerData .name {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: #505050;
        margin-top: 8px
    }

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .footerData .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px
    }
}

.side-panel .profileOfTheDay .footerData .subName {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #505050;
    margin-top: 8px
}

@media (max-width: 767px) {
    .side-panel .profileOfTheDay .footerData .subName {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.side-panel .profileOfTheDay .buttonRow {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-bottom: 20px
}

    .side-panel .profileOfTheDay .buttonRow button {
        border: none;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        height: 45px;
        border: none;
        color: #434343;
        background-color: transparent;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.22);
        cursor: pointer
    }

        .side-panel .profileOfTheDay .buttonRow button:hover {
            background-color: #add3ea;
            color: var(--white)
        }

    .side-panel .profileOfTheDay .buttonRow .cmnBtn {
        width: 95px
    }

        .side-panel .profileOfTheDay .buttonRow .cmnBtn:last-child {
            color: var(--white);
            background-color: var(--theme-colour1)
        }

            .side-panel .profileOfTheDay .buttonRow .cmnBtn:last-child:hover {
                background-color: var(--theme-colour2)
            }

.panel-headingFaq {
    padding-left: 40px !important
}

    .panel-headingFaq::before {
        left: 19px !important;
        transition: ease-in-out .4s
    }

    .panel-headingFaq.activeFaq::before {
        transform: rotate(90deg)
    }

.panel-bodyFaq {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

@media (max-width: 480px) {
    .p-horo-table {
        width: 65% !important
    }
}

.default-popup .default-section .close-default-popup, .default-popup2 .default-section .close-default-popup {
    background-color: #484848
}

.slider.slider-horizontal .tooltip {
    -ms-transform: translateX(-24%) !important;
    transform: translateX(-24%) !important
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon:hover .status {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
    z-index: 1
}

.serviceTable .template-container .serviceTableArea .serviceTable .tableBody .tableBodyListSec .connectTo .buttonArea .icon .status {
    width: fit-content !important;
    min-width: 125px !important
}

*:focus {
    outline: none;
    text-decoration: none
}

body {
    width: 100%;
    height: 100%;
    -ms-overflow-style: scrollbar
}

a, a:hover {
    text-decoration: none
}

    a:visited, a:focus {
        text-decoration: none
    }

select::-ms-expand {
    display: none
}

p {
    font: 400 14px "Rubik",sans-serif;
    text-align: justify;
    color: #3e3e3e;
    line-height: 30px
}

.default-pad {
    padding-top: 40px;
    padding-bottom: 40px
}

.totop, .desktop {
    display: none
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: rgba(0,0,0,0.75)
}

::-webkit-scrollbar-thumb {
    background: var(--theme-colour1),15%;
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.75)
}

.absolute .tabled {
    display: table;
    width: 100%;
    height: 100%
}

.absolute .celled {
    display: table-cell;
    vertical-align: middle
}

.mobile-header {
    padding: 6px 15px;
    background: var(--theme-colour1)
}

    .mobile-header .mobile-logo, .mobile-header .mobile-login {
        float: left
    }

    .mobile-header .mobile-logo {
        width: 148px
    }

    .mobile-header .mobile-login {
        width: calc(100% - 150px);
        padding: 0 55px 0 10px;
        margin-top: 10px;
        position: relative
    }

        .mobile-header .mobile-login a {
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.45);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.45);
            box-shadow: 0 0 10px rgba(0,0,0,0.45);
            font: 700 12px "Rubik",sans-serif;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            background: var(--white);
            color: var(--theme-colour1);
            text-transform: uppercase;
            padding: 4px;
            width: 50px;
            float: right;
            text-align: center
        }

        .mobile-header .mobile-login .mobile-ham {
            position: absolute;
            top: -2px;
            right: 0;
            width: 30px;
            height: 30px;
            cursor: pointer
        }

            .mobile-header .mobile-login .mobile-ham[data-open="0"] {
                background: url(../images/ham-white.svg) no-repeat;
                background-size: 30px
            }

            .mobile-header .mobile-login .mobile-ham[data-open="1"] {
                background: url(../images/close-white.svg) no-repeat;
                background-size: 20px;
                background-position: center
            }

.desktop-header {
    padding: 15px;
    text-align: right;
    display: none;
    opacity: 0
}

    .desktop-header .desktop-login {
        width: 100%
    }

        .desktop-header .desktop-login .password a.forgot {
            display: none
        }

        .desktop-header .desktop-login input[type="text"], .desktop-header .desktop-login input[type="password"] {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            width: 100%;
            height: 32px;
            padding: 0 35px 0 15px;
            border: 1px solid var(--theme-colour1);
            margin-bottom: 10px;
            line-height: 35px;
            background: transparent
        }

        .desktop-header .desktop-login a.forgot {
            font: 400 12px "Rubik",sans-serif;
            display: block;
            color: var(--theme-colour1);
            text-transform: capitalize;
            text-align: center;
            margin-bottom: 10px
        }

        .desktop-header .desktop-login input[type="submit"] {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            font: 400 14px "Rubik",sans-serif;
            width: 100%;
            height: 32px;
            text-transform: uppercase;
            background: var(--theme-colour1);
            color: var(--white);
            border: 1px solid transparent
        }

    .desktop-header .login-with {
        margin-top: 10px;
        text-align: center
    }

        .desktop-header .login-with span, .desktop-header .login-with a {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px
        }

        .desktop-header .login-with span {
            font: 400 12px "Rubik",sans-serif;
            text-transform: capitalize;
            color: var(--theme-colour1)
        }

        .desktop-header .login-with a {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            width: 30px;
            height: 30px
        }

            .desktop-header .login-with a.fb {
                background: url(../images/fb.png) no-repeat;
                background-size: 30px
            }

            .desktop-header .login-with a.google {
                background: url(../images/google.png) no-repeat;
                background-size: 30px
            }

    .desktop-header .desktop-ham {
        margin-top: 10px;
        text-align: center
    }

        .desktop-header .desktop-ham span {
            width: 30px;
            height: 30px;
            cursor: pointer;
            display: inline-block
        }

            .desktop-header .desktop-ham span[data-open="0"] {
                background: url(../images/ham-blue.svg) no-repeat;
                background-size: 30px
            }

            .desktop-header .desktop-ham span[data-open="1"] {
                background: url(../images/close-blue.svg) no-repeat;
                background-size: 20px;
                background-position: center
            }

        .desktop-header .desktop-ham .inner {
            display: none;
            opacity: 0
        }

            .desktop-header .desktop-ham .inner a {
                font: 400 14px "Rubik",sans-serif;
                display: block;
                text-align: center;
                color: var(--theme-colour1);
                text-transform: capitalize;
                padding: 5px 0
            }

.top-header {
    font: 400 14px "Rubik",sans-serif;
    background: var(--theme-colour1),5%;
    padding: 0 15px 10px;
    text-transform: capitalize;
    display: none;
    opacity: 0
}

    .top-header .link, .top-header .download, .top-header .tour, .top-header .help, .top-header .search {
        padding: 5px 0
    }

    .top-header .link, .top-header .search, .top-header .help {
        display: block;
        color: var(--white);
        text-align: center
    }

    .top-header .download {
        color: var(--white);
        display: block;
        text-align: center
    }

        .top-header .download i {
            font-style: normal;
            position: relative;
            padding-right: 20px;
            cursor: pointer
        }

            .top-header .download i:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                transform: rotate(0deg);
                position: absolute;
                top: 5px;
                right: 0;
                background: url(../images/down-arrow.svg) no-repeat;
                content: '';
                width: 12px;
                height: 12px;
                background-size: 12px
            }

            .top-header .download i.open:after {
                -webkit-transition: all .4s ease-in;
                -moz-transition: all .4s ease-in;
                transition: all .4s ease-in;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                transform: rotate(180deg)
            }

        .top-header .download .download-inner {
            font: 400 14px "Rubik",sans-serif;
            display: none;
            opacity: 0
        }

            .top-header .download .download-inner a {
                display: block;
                text-align: center;
                color: var(--white);
                padding: 5px 0
            }

    .top-header .tour {
        font: 700 13px "Rubik",sans-serif;
        text-transform: uppercase;
        display: block;
        text-align: center
    }

        .top-header .tour span {
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            position: relative;
            padding: 2px 10px 2px 30px;
            background: var(--white);
            color: var(--theme-colour1)
        }

            .top-header .tour span:before {
                position: absolute;
                top: 4px;
                left: 10px;
                background: url(../images/play.svg) no-repeat;
                content: '';
                width: 14px;
                height: 14px;
                background-size: 14px
            }

    .top-header .search {
        display: none;
        margin-top: 5px;
        background: #fdd606
    }

        .top-header .search em {
            font-style: normal;
            padding: 5px 40px 5px 20px;
            position: relative;
            color: var(--theme-colour1);
            text-transform: uppercase
        }

            .top-header .search em:after {
                position: absolute;
                top: 6px;
                right: 16px;
                background: url(../images/search-blue.svg) no-repeat;
                content: '';
                width: 16px;
                height: 16px;
                background-size: 16px
            }

.success-stories {
    background: url(../images/story-bg.jpg) no-repeat;
    background-size: cover;
    padding: 15px 0 0;
    position: relative
}

    .success-stories .stories {
        padding-top: 110px;
        position: relative;
        text-align: center;
        margin: 40px 0 100px
    }

        .success-stories .stories:before {
            position: absolute;
            top: 10px;
            left: 50%;
            background: url(../images/tick-multi.svg) no-repeat;
            content: '';
            width: 100px;
            height: 100px;
            background-size: 100px;
            margin-left: -50px
        }

        .success-stories .stories span {
            font: 400 28px "Rubik",sans-serif;
            text-transform: uppercase;
            color: var(--white);
            display: block;
            margin: 10px 0 15px
        }

            .success-stories .stories span strong {
                font: 700 28px "Rubik",sans-serif
            }

    .success-stories .featured {
        background: var(--theme-colour1);
        padding: 30px 15px;
        text-align: center
    }

        .success-stories .featured .title {
            display: block;
            padding-left: 50px;
            text-align: left;
            position: relative
        }

            .success-stories .featured .title span {
                font: 400 20px "Rubik",sans-serif;
                color: var(--white);
                text-transform: uppercase;
                display: block;
                margin-bottom: 15px
            }

            .success-stories .featured .title:before {
                background: url(../images/featured-before.jpg) no-repeat;
                position: absolute;
                top: -3px;
                left: 0;
                width: 36px;
                height: 36px;
                background-size: 36px;
                content: ''
            }

            .success-stories .featured .title a {
                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                font: 400 12px "Rubik",sans-serif;
                color: var(--theme-colour1);
                background: #fdd606;
                position: relative;
                display: inline-block;
                text-transform: capitalize;
                padding: 2px 40px 2px 10px;
                border: 1px solid transparent
            }

                .success-stories .featured .title a:after {
                    position: absolute;
                    top: -9px;
                    right: -2px;
                    background: url(../images/user-blue.svg) no-repeat;
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    background-color: #fdd606;
                    content: '';
                    width: 36px;
                    height: 36px;
                    background-size: 15px;
                    background-position: center
                }

        .success-stories .featured .featured-profile {
            background: #fdd606;
            padding: 10px 0 20px;
            text-align: center;
            margin: 20px 0
        }

            .success-stories .featured .featured-profile img {
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                padding: 8px;
                border: 1px solid var(--white);
                margin: 10px auto
            }

            .success-stories .featured .featured-profile span, .success-stories .featured .featured-profile em {
                font-style: normal;
                display: block
            }

            .success-stories .featured .featured-profile span {
                font: 700 18px "Rubik",sans-serif;
                text-transform: capitalize;
                color: var(--theme-colour1)
            }

            .success-stories .featured .featured-profile em {
                font: 400 14px "Rubik",sans-serif;
                color: #292929;
                text-transform: capitalize
            }

                .success-stories .featured .featured-profile em:first-of-type {
                    margin: 5px 0
                }

.see-more {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    font: 400 14px "Rubik",sans-serif;
    padding: 10px 30px;
    background: var(--white);
    color: #292929;
    text-transform: capitalize;
    display: inline-block
}

    .see-more.inverse {
        background: transparent;
        color: var(--white);
        border: 1px solid var(--white)
    }

    .see-more.inverse-blue {
        font: 400 18px "Rubik",sans-serif;
        background: var(--theme-colour1);
        color: var(--white);
        text-transform: uppercase;
        margin-bottom: 10px;
        border: 1px solid transparent
    }

.get-started {
    padding: 30px 15px
}

    .get-started .title {
        display: block;
        position: relative;
        text-align: center;
        padding: 80px 0 15px
    }

        .get-started .title span, .get-started .title em {
            color: #292929;
            text-transform: uppercase
        }

        .get-started .title span {
            font: 700 30px "Rubik",sans-serif;
            margin-bottom: 5px;
            display: block
        }

        .get-started .title em {
            font: 400 14px "Rubik",sans-serif
        }

        .get-started .title:before {
            position: absolute;
            top: 0;
            left: 50%;
            background: url(../images/diadem.png) no-repeat;
            content: '';
            width: 106px;
            height: 62px;
            background-size: 106px 62px;
            margin-left: -53px
        }

        .get-started .title:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 56px;
            height: 3px;
            background: var(--theme-colour1);
            content: '';
            margin-left: -28px
        }

    .get-started .step-wrapper {
        text-align: center
    }

    .get-started .step {
        margin: 30px 0;
        padding-bottom: 100px;
        position: relative;
        text-transform: capitalize
    }

        .get-started .step img {
            margin: auto
        }

        .get-started .step:after {
            background: url(../images/step-down.png) no-repeat;
            position: absolute;
            bottom: 0;
            left: 50%;
            content: '';
            margin-left: -7px;
            width: 15px;
            height: 77px;
            background-size: 15px 77px
        }

        .get-started .step span {
            font: 400 14px "Rubik",sans-serif;
            color: #292929;
            display: block;
            margin-top: 10px
        }

        .get-started .step:nth-of-type(5) {
            padding-bottom: 0
        }

            .get-started .step:nth-of-type(5):after {
                display: none
            }

.login-page, .signup-page {
    background: url(../images/login-bg.jpg) no-repeat;
    background-repeat: repeat
}

.login {
    background: var(--white)
}

.login-forgot {
    text-align: center
}

    .login-forgot a, .login-forgot span {
        font: 400 14px "Rubik",sans-serif;
        color: #313131
    }

    .login-forgot a {
        text-decoration: underline;
        text-transform: capitalize;
        display: block;
        margin-bottom: 10px
    }

    .login-forgot span a {
        font: 700 14px "Rubik",sans-serif;
        color: var(--theme-colour1);
        display: inline-block;
        margin-bottom: 0
    }

.blocks {
    margin: 30px 0;
    overflow: hidden
}

    .blocks span {
        display: inline-block;
        float: left;
        width: calc(100% / 3);
        padding-top: 50px;
        position: relative;
        text-align: center;
        text-transform: capitalize
    }

        .blocks span:nth-child(1):before, .blocks span:nth-child(2):before, .blocks span:nth-child(3):before {
            position: absolute;
            top: 0;
            left: 50%;
            content: '';
            margin-left: -18px;
            width: 36px;
            height: 36px
        }

        .blocks span:nth-child(1):before {
            background: url(../images/tick-yellow.svg) no-repeat;
            background-size: 36px
        }

        .blocks span:nth-child(2):before {
            background: url(../images/heart-yellow.svg) no-repeat;
            background-size: 36px
        }

        .blocks span:nth-child(3):before {
            background: url(../images/telemarketer-yellow.svg) no-repeat;
            background-size: 36px
        }

.profiles {
    padding: 30px 0
}

    .profiles .title {
        font: 400 30px "Rubik",sans-serif;
        display: block;
        color: var(--black);
        margin-bottom: 30px;
        padding-left: 50px;
        position: relative
    }

        .profiles .title:first-letter {
            text-transform: uppercase
        }

        .profiles .title:before {
            background: url(../images/search-blue.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 36px;
            height: 36px;
            background-size: 36px
        }

.profile-item {
    background: #fcfcfc;
    border: 1px solid #dedede;
    padding: 15px;
    margin-bottom: 20px;
    display: block
}

    .profile-item .img-wrapper {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        width: 143px;
        height: 143px;
        margin: auto;
        overflow: hidden
    }

    .profile-item .details {
        margin-top: 15px
    }

        .profile-item .details .profile-name {
            font: 700 18px "Rubik",sans-serif;
            color: var(--theme-colour1);
            text-transform: uppercase;
            display: block;
            margin-bottom: 5px
        }

            .profile-item .details .profile-name span {
                position: relative;
                padding-right: 25px
            }

                .profile-item .details .profile-name span:after {
                    background: url(../images/success.svg) no-repeat;
                    position: absolute;
                    bottom: 2px;
                    right: 0;
                    content: '';
                    width: 18px;
                    height: 18px;
                    background-size: 18px
                }

        .profile-item .details .specs {
            display: block;
            margin-bottom: 10px
        }

            .profile-item .details .specs em {
                font: 400 12px "Rubik",sans-serif;
                font-style: normal;
                display: block;
                color: #797979;
                margin-bottom: 5px
            }

        .profile-item .details i {
            font: 400 14px "Rubik",sans-serif;
            color: #4d4d4d;
            display: block;
            font-style: normal;
            margin-bottom: 15px;
            text-transform: capitalize
        }

            .profile-item .details i strong {
                font: 400 14px "Rubik",sans-serif
            }

            .profile-item .details i:last-of-type {
                margin-bottom: 0
            }

.community-desc {
    padding: 15px
}

    .community-desc .title {
        font: 400 36px "Rubik",sans-serif;
        display: block;
        text-transform: capitalize;
        position: relative;
        color: var(--black);
        padding-bottom: 5px;
        margin-bottom: 10px
    }

        .community-desc .title:after {
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 35px;
            height: 5px;
            background: var(--theme-colour1)
        }

        .community-desc .title strong {
            font: 700 36px "Rubik",sans-serif
        }

    .community-desc p {
        font: 400 14px "Rubik",sans-serif;
        line-height: 20px;
        text-align: justify;
        margin-bottom: 0
    }

.how-to {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 25px;
    -webkit-box-shadow: 0 8px 0px -4px #f1efef;
    -moz-box-shadow: 0 8px 0px -4px #f1efef;
    box-shadow: 0 8px 0px -4px #f1efef;
    margin-bottom: 35px
}

    .how-to .title {
        font: 700 24px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-transform: capitalize;
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px
    }

        .how-to .title:before {
            position: absolute;
            top: 4px;
            left: 0;
            background: url(../images/question-blue.svg) no-repeat;
            content: '';
            width: 24px;
            height: 24px;
            background-size: 24px
        }

.side-panel {
    margin-top: 20px
}

.if {
    font: 400 14px "Rubik",sans-serif;
    display: block;
    text-align: center;
    color: var(--black)
}

    .if a {
        font: 700 16px "Rubik",sans-serif;
        color: var(--theme-colour1);
        text-decoration: underline
    }

.add-placement {
    margin-bottom: 20px
}

    .add-placement .success-title {
        margin-bottom: 15px
    }

    .add-placement .add-yours {
        position: relative;
        bottom: auto;
        right: auto;
        color: var(--theme-colour1)
    }

        .add-placement .add-yours:before {
            background: url(../images/pen-blue2.svg) no-repeat;
            background-size: 20px
        }

        .add-placement .add-yours span:after {
            background: var(--theme-colour1)
        }

.owl-story {
    background: var(--theme-colour1);
    padding: 15px;
    margin-bottom: 20px
}

    .owl-story p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--white);
        text-transform: uppercase;
        text-align: left
    }

        .owl-story p strong {
            font: 700 24px "Rubik",sans-serif
        }

    .owl-story .date span {
        padding-left: 25px;
        position: relative;
        color: #fdd606;
        display: block;
        margin-bottom: 10px
    }

        .owl-story .date span:before {
            background: url(../images/calendar-yellow.svg) no-repeat;
            position: absolute;
            top: 1px;
            left: 0;
            content: '';
            width: 18px;
            height: 18px;
            background-size: 18px
        }

    .owl-story .date em {
        font: 400 12px "Rubik",sans-serif;
        color: #c2c2c2;
        text-transform: uppercase
    }

        .owl-story .date em:after {
            content: '|';
            padding: 0 10px
        }

        .owl-story .date em:last-of-type:after {
            display: none
        }

.owl-desc {
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.25);
    box-shadow: 0 5px 10px rgba(0,0,0,0.25);
    padding: 30px;
    background: var(--white);
    margin-bottom: 20px;
    border-bottom: 5px solid var(--theme-colour1)
}

    .owl-desc p {
        font: 400 18px "Rubik",sans-serif;
        line-height: 30px;
        color: #333;
        text-align: justify
    }

.ads {
    margin-bottom: 20px
}

    .ads img {
        margin: auto
    }

.couple-wrapper {
    display: block;
    position: relative
}

.couple-desc {
    background: var(--theme-colour1);
    padding: 15px 0;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative
}

    .couple-desc .absolute {
        position: relative;
        left: auto;
        top: auto
    }

    .couple-desc .love {
        text-align: center
    }

        .couple-desc .love strong {
            font: 700 14px "Rubik",sans-serif;
            display: block;
            color: var(--white);
            padding: 0 15px;
            text-transform: uppercase
        }

        .couple-desc .love em.hearts {
            display: block;
            height: 28px;
            margin: 4px 0;
            position: relative
        }

            .couple-desc .love em.hearts:before {
                position: absolute;
                top: 0;
                left: 50%;
                background: url(../images/love.png) no-repeat;
                content: '';
                width: 34px;
                height: 28px;
                margin-left: -17px;
                background-size: 34px 28px
            }

        .couple-desc .love .love-details {
            background: #f7f7f5;
            padding: 20px 15px;
            position: relative;
            margin-top: 35px;
            text-align: center
        }

            .couple-desc .love .love-details:before {
                background: url(../images/love-after.png) no-repeat;
                position: absolute;
                top: -22px;
                left: 50%;
                content: '';
                margin-left: -22px;
                width: 44px;
                height: 28px;
                background-size: 44px 28px
            }

            .couple-desc .love .love-details .happily {
                font: 400 13px "Rubik",sans-serif;
                text-transform: capitalize;
                display: block;
                color: #1a1a1a;
                margin-bottom: 5px
            }

                .couple-desc .love .love-details .happily i {
                    font: 700 14px "Rubik",sans-serif;
                    position: relative;
                    padding-left: 20px;
                    margin-left: 5px;
                    font-style: normal
                }

                    .couple-desc .love .love-details .happily i:before {
                        background: url(../images/calendar-black.svg) no-repeat;
                        position: absolute;
                        top: 2px;
                        left: 0;
                        content: '';
                        width: 15px;
                        height: 15px;
                        background-size: 15px
                    }

            .couple-desc .love .love-details p {
                font: 400 14px "Rubik",sans-serif;
                color: #1a1a1a;
                line-height: 16px;
                margin: 0;
                text-align: center;
                position: relative
            }

                .couple-desc .love .love-details p:before, .couple-desc .love .love-details p:after {
                    position: absolute;
                    content: ''
                }

                .couple-desc .love .love-details p:before {
                    background: url(../images/p-before.png) no-repeat;
                    top: -15px;
                    left: -10px;
                    width: 57px;
                    height: 45px;
                    background-size: 57px 45px
                }

                .couple-desc .love .love-details p:after {
                    background: url(../images/p-after.png) no-repeat;
                    bottom: -10px;
                    right: -10px;
                    width: 26px;
                    height: 20px;
                    background-size: 26px 20px
                }

.success-couples {
    background: #fbfbfb;
    display: block;
    margin: 15px 0
}

    .success-couples img {
        margin: auto
    }

    .success-couples .inner {
        position: relative;
        padding: 15px;
        text-align: center;
        border-bottom: 5px solid var(--theme-colour1)
    }

        .success-couples .inner:before {
            background: url(../images/love-after.png) no-repeat;
            position: absolute;
            top: -28px;
            left: 50%;
            content: '';
            margin-left: -22px;
            width: 44px;
            height: 28px;
            background-size: 44px 28px;
            z-index: 1
        }

        .success-couples .inner .names {
            display: block
        }

            .success-couples .inner .names strong {
                font: 400 18px "Rubik",sans-serif;
                color: var(--black);
                text-transform: uppercase;
                display: block
            }

            .success-couples .inner .names .heartian {
                background: url(../images/success-middle.png) no-repeat;
                display: block;
                height: 16px;
                background-size: 20px 16px;
                background-position: center;
                margin: 5px 0
            }

        .success-couples .inner .date {
            font: 400 12px "Rubik",sans-serif;
            display: block;
            margin: 10px 0
        }

            .success-couples .inner .date i {
                position: relative;
                padding-left: 25px;
                font-style: normal;
                color: #1a1a1a
            }

                .success-couples .inner .date i:before {
                    background: url(../images/calendar-blue.svg) no-repeat;
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: '';
                    width: 15px;
                    height: 15px;
                    background-size: 15px
                }

.codes {
    text-align: center
}

    .codes em {
        font: 400 12px "Rubik",sans-serif;
        display: inline-block;
        vertical-align: middle;
        color: #5b5b5b;
        text-transform: uppercase;
        margin-bottom: 5px
    }

        .codes em:after {
            content: '|';
            padding: 0 10px
        }

        .codes em:last-of-type:after {
            display: none
        }

.add-story {
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 8px rgba(0,0,0,0.25);
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    padding: 15px;
    margin-bottom: 30px
}

    .add-story p.title {
        font: 400 18px "Rubik",sans-serif;
        color: #525151;
        display: block;
        margin-bottom: 30px;
        text-align: justify
    }

.submit-clear {
    overflow: hidden;
    margin-bottom: 10px
}

    .submit-clear input[type="submit"], .submit-clear a {
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        font: 400 14px "Rubik",sans-serif;
        display: block;
        width: 48%;
        text-align: center;
        text-transform: capitalize;
        border: 1px solid var(--theme-colour1);
        padding: 10px 0
    }

    .submit-clear input[type="submit"] {
        background: var(--theme-colour1);
        color: var(--white);
        float: left
    }

    .submit-clear a {
        background: transparent;
        color: var(--theme-colour1);
        float: right
    }

.ui-widget .custom-combobox {
    display: block
}

.ui-widget .custom-combobox-input, .ui-widget .custom-combobox-input input[type="text"] {
    font: 400 12px "Rubik",sans-serif;
    width: 100%;
    height: 28px;
    border: none;
    border-bottom: 1px solid var(--white);
    background: transparent;
    color: var(--white)
}

.ui-widget .ui-button {
    display: none !important
}

.ui-widget .ui-corner-all, .ui-widget .ui-corner-bottom, .ui-widget .ui-corner-left, .ui-widget .ui-corner-bl {
    border-bottom-left-radius: 0
}

.ui-widget .ui-widget {
    font-size: 12px !important
}

.ui-widget .ui-menu-item-wrapper {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font: 400 12px "Rubik",sans-serif
}

    .ui-widget .ui-menu-item-wrapper:hover {
        border: 1px solid transparent;
        outline: none
    }

.ui-widget.inverse .custom-combobox-input {
    border-bottom-color: #747474;
    color: var(--theme-colour1)
}

.featured-block {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #bdd5ed;
    margin-bottom: 15px;
    display: block
}

    .featured-block img {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        margin: 18px auto
    }

    .featured-block .yellow, .featured-block .inner {
        padding: 10px 15px
    }

    .featured-block .yellow {
        background: #fdd606
    }

        .featured-block .yellow .name {
            font: 700 16px "Rubik",sans-serif;
            display: block;
            color: var(--theme-colour1);
            text-transform: uppercase;
            margin-bottom: 2px
        }

        .featured-block .yellow i {
            font: 400 12px "Rubik",sans-serif;
            color: #656563;
            font-style: normal;
            display: block;
            margin-bottom: 2px
        }

            .featured-block .yellow i:first-of-type {
                text-transform: uppercase
            }

            .featured-block .yellow i:last-of-type {
                margin-bottom: 0
            }

    .featured-block .inner p {
        font: 400 14px "Rubik",sans-serif;
        color: var(--black);
        margin-bottom: 5px
    }

        .featured-block .inner p span, .featured-block .inner p em {
            display: inline-block;
            text-transform: capitalize
        }

        .featured-block .inner p span {
            color: #4d4d4d
        }

            .featured-block .inner p span:after {
                content: ':';
                padding: 0 10px 0 5px
            }

        .featured-block .inner p em {
            font-style: normal
        }

.subHeadTitle {
    background-color: var(--lightBg);
    padding: 31px 0
}

@media (max-width: 767px) {
    .subHeadTitle {
        padding: 15px 0
    }
}

.subHeadTitle .headerCaption {
    font-size: 24px;
    font-weight: 600;
    line-height: 26px;
    color: var(--theme-colour1);
    text-align: center
}

@media (max-width: 767px) {
    .subHeadTitle .headerCaption {
        font-size: 22px;
        font-weight: 600;
        line-height: 24px
    }
}

.subHeadTitle .headerCaption span {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    display: block;
    color: #707070;
    margin-top: 4px
}

.galleryTabArea {
    padding: 43px 0 0;
    background-color: var(--white)
}

@media (max-width: 767px) {
    .galleryTabArea {
        padding: 15px 0 0
    }
}

.galleryTabArea .searchTab {
    column-gap: 80px !important;
    margin-bottom: 27px !important
}

@media (max-width: 991px) {
    .galleryTabArea .searchTab {
        display: flex !important;
        column-gap: 50px !important
    }
}

@media (max-width: 767px) {
    .galleryTabArea .searchTab {
        column-gap: 30px !important
    }
}

.galleryTabArea .searchTab .tablinks {
    padding: 10px 12px !important
}

    .galleryTabArea .searchTab .tablinks.active {
        padding: 10px 12px !important
    }

.galleryTabArea .tabcontent {
    padding-bottom: 0 !important;
    margin: 0
}

    .galleryTabArea .tabcontent .photoSlider {
        display: grid;
        grid-template-columns: 1fr 437px;
        margin-bottom: 56px
    }

@media (max-width: 1279px) {
    .galleryTabArea .tabcontent .photoSlider {
        grid-template-columns: 600px 1fr
    }
}

@media (max-width: 1199px) {
    .galleryTabArea .tabcontent .photoSlider {
        grid-template-columns: 500px 1fr
    }
}

@media (max-width: 991px) {
    .galleryTabArea .tabcontent .photoSlider {
        grid-template-columns: 1fr
    }
}

@media (max-width: 767px) {
    .galleryTabArea .tabcontent .photoSlider .main {
        max-width: 500px;
        margin: auto
    }
}

@media (max-width: 480px) {
    .galleryTabArea .tabcontent .photoSlider .main {
        max-width: 330px
    }
}

.galleryTabArea .tabcontent .photoSlider .main .slider-for {
    margin: auto;
    height: auto !important;
    display: flex;
    justify-content: center;
    transform: inherit;
    margin-bottom: 21px
}

    .galleryTabArea .tabcontent .photoSlider .main .slider-for a img {
        width: 226px;
        height: 226px
    }

    .galleryTabArea .tabcontent .photoSlider .main .slider-for .mainPic {
        max-width: 292px !important;
        max-height: 450px !important;
        height: 100%;
        width: 100%;
        border-radius: 4px;
        margin: auto
    }

        .galleryTabArea .tabcontent .photoSlider .main .slider-for .mainPic img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px
        }

.galleryTabArea .tabcontent .photoSlider .main .slider-nav {
    max-width: 818px
}

@media (max-width: 991px) {
    .galleryTabArea .tabcontent .photoSlider .main .slider-nav {
        margin-bottom: 20px
    }
}

.galleryTabArea .tabcontent .photoSlider .main .slider-nav .navPic {
    max-width: 121px;
    border-radius: 4px;
    margin: auto
}

    .galleryTabArea .tabcontent .photoSlider .main .slider-nav .navPic img {
        border-radius: 4px
    }

.galleryTabArea .tabcontent .photoSlider .photoSliderText {
    padding-left: 29px
}

@media (max-width: 991px) {
    .galleryTabArea .tabcontent .photoSlider .photoSliderText {
        padding-left: 0px
    }
}

.galleryTabArea .tabcontent .photoSlider .photoSliderText .photoSliderTextArea {
    background-color: var(--lightBg);
    border-radius: 5px;
    padding: 24px 18px
}

    .galleryTabArea .tabcontent .photoSlider .photoSliderText .photoSliderTextArea .title {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        color: var(--theme-colour1);
        padding-bottom: 6px;
        margin-bottom: 28px;
        border-bottom: 1px solid #DDDDDD
    }

        .galleryTabArea .tabcontent .photoSlider .photoSliderText .photoSliderTextArea .title svg {
            margin-right: 9px
        }

    .galleryTabArea .tabcontent .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList {
        display: grid;
        grid-template-columns: 154px 11px 1fr;
        margin-bottom: 17px
    }

        .galleryTabArea .tabcontent .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList .cntArea {
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            color: #707070
        }

            .galleryTabArea .tabcontent .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList .cntArea.cntAreaLft {
                padding-left: 17px
            }

        .galleryTabArea .tabcontent .photoSlider .photoSliderText .photoSliderTextArea .photoSliderTextListArea .photoSliderTextList .line {
            width: 11px;
            height: 1px;
            background-color: #707070;
            margin-top: 7px
        }

@media (max-width: 991px) {
    .galleryTabArea .photoSec {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
        row-gap: 15px
    }
}

@media (max-width: 767px) {
    .galleryTabArea .photoSec {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 480px) {
    .galleryTabArea .photoSec {
        grid-template-columns: 1fr 1fr
    }
}

.galleryTabArea .photoSec .uploadBg {
    width: 166px;
    height: 210px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 15px
}

@media (max-width: 991px) {
    .galleryTabArea .photoSec .uploadBg {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 0px
    }
}

.galleryTabArea .photoSec .uploadBg .uploadAreaBtn {
    align-items: center;
    position: relative;
    overflow: hidden
}

@media (max-width: 991px) {
    .galleryTabArea .photoSec .uploadBg .uploadAreaBtn {
        height: 100%
    }
}

.galleryTabArea .photoSec .uploadBg .uploadAreaBtn input[type="file"] {
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0
}

.galleryTabArea .photoSec .uploadBg .uploadAreaBtn .uploadBtn {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    cursor: pointer;
    color: var(--theme-colour1);
    text-transform: uppercase;
    width: 166px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    row-gap: 4px;
    border-radius: 15px;
    transition: ease-in-out 0.4s;
    outline: none;
    padding: 5px 25px;
    background-color: var(--white);
    border: 1px dashed var(--theme-colour1)
}

@media (max-width: 991px) {
    .galleryTabArea .photoSec .uploadBg .uploadAreaBtn .uploadBtn {
        width: 100%;
        height: 100%
    }
}

@media (max-width: 680px) {
    .galleryTabArea .photoSec .uploadBg .uploadAreaBtn .uploadBtn {
        padding: 5px 15px
    }
}

.galleryTabArea .photoSec .uploadBg .uploadAreaBtn .uploadBtn:hover {
    background-color: #EAEFF2
}

.galleryTabArea .photoSec .uploadBg .uploadAreaBtn .uploadBtn svg path {
    fill: var(--theme-colour1)
}

.galleryTabArea .photoSec .pic {
    cursor: pointer;
    position: relative;
    transition: ease-in-out 0.4s;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 15px
}

@media (max-width: 991px) {
    .galleryTabArea .photoSec .pic {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 0
    }
}

.galleryTabArea .photoSec .pic:hover::after {
    opacity: 1
}

.galleryTabArea .photoSec .pic:hover .textarea .text {
    opacity: 1
}

.galleryTabArea .photoSec .pic:hover .text {
    opacity: 1
}

    .galleryTabArea .photoSec .pic:hover .text.textNon {
        opacity: 0;
        pointer-events: none
    }

.galleryTabArea .photoSec .pic .picSec {
    position: relative;
    display: flex;
    z-index: 2;
    width: 166px;
    height: 210px;
    border-radius: 15px
}

@media (max-width: 991px) {
    .galleryTabArea .photoSec .pic .picSec {
        max-width: 223px;
        width: 100%
    }
}

.galleryTabArea .photoSec .pic .picSec::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    transition: ease-in-out 0.4s
}

.galleryTabArea .photoSec .pic .picSec:hover::after {
    opacity: 1
}

.galleryTabArea .photoSec .pic .picSec img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px
}

.galleryTabArea .photoSec .pic .textarea {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-direction: column;
    padding: 14px
}

    .galleryTabArea .photoSec .pic .textarea .text {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #F5EFEF;
        text-transform: uppercase;
        z-index: 3;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0
    }

        .galleryTabArea .photoSec .pic .textarea .text.textNon {
            opacity: 0;
            pointer-events: none
        }

    .galleryTabArea .photoSec .pic .textarea .setting {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--light2Bg);
        z-index: 4
    }

        .galleryTabArea .photoSec .pic .textarea .setting:hover .dotDrop {
            opacity: 1;
            pointer-events: all
        }

        .galleryTabArea .photoSec .pic .textarea .setting .dotDrop {
            opacity: 0;
            pointer-events: none;
            padding: 2px 10px;
            background-color: #ffffff;
            border-radius: 5px;
            min-width: 154px;
            position: absolute;
            right: 24px;
            top: 28px;
            transition: ease-in-out 0.4s;
            z-index: 11;
            -webkit-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.19);
            -moz-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.19);
            box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.19)
        }

@media (max-width: 375px) {
    .galleryTabArea .photoSec .pic .textarea .setting .dotDrop {
        right: -15px
    }
}

.galleryTabArea .photoSec .pic .textarea .setting .dotDrop .dropList {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--c2d);
    min-height: 30px;
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 5px 0px;
    border-radius: 4px;
    z-index: 1;
    cursor: pointer;
    transition: ease-in-out 0.4s;
    border-bottom: 1px solid #F5F4F4
}

    .galleryTabArea .photoSec .pic .textarea .setting .dotDrop .dropList:last-child {
        border-bottom: none
    }

.galleryTabArea .photoSec .pic .textarea .setting svg path {
    fill: var(--theme-colour1)
}

.galleryTabArea .photoSec .pic .textarea .status {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    position: relative;
    z-index: 4
}

    .galleryTabArea .photoSec .pic .textarea .status:hover .toolTip {
        opacity: 1;
        pointer-events: all
    }

    .galleryTabArea .photoSec .pic .textarea .status .toolTip {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        color: #ffffff;
        position: absolute;
        right: 11px;
        top: -23px;
        width: 106px;
        height: 30px;
        background-color: #434343;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none
    }

.galleryTabArea .videoSec {
    height: 459px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

    .galleryTabArea .videoSec .uploadBg {
        width: fit-content;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-inline: auto
    }

        .galleryTabArea .videoSec .uploadBg .uploadAreaBtn {
            align-items: center;
            position: relative;
            overflow: hidden
        }

@media (max-width: 991px) {
    .galleryTabArea .videoSec .uploadBg .uploadAreaBtn {
        height: 100%
    }
}

.galleryTabArea .videoSec .uploadBg .uploadAreaBtn input[type="file"] {
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0
}

.galleryTabArea .videoSec .uploadBg .uploadAreaBtn .uploadBtn {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    cursor: pointer;
    color: var(--white);
    width: fit-content;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 12px;
    border-radius: 8px;
    transition: ease-in-out 0.4s;
    outline: none;
    padding: 16px 29px 16px 31px;
    background-color: var(--theme-colour1);
    border: none
}

@media (max-width: 991px) {
    .galleryTabArea .videoSec .uploadBg .uploadAreaBtn .uploadBtn {
        width: 100%;
        height: 100%
    }
}

@media (max-width: 680px) {
    .galleryTabArea .videoSec .uploadBg .uploadAreaBtn .uploadBtn {
        padding: 5px 15px
    }
}

.galleryTabArea .videoSec .uploadBg .uploadAreaBtn .uploadBtn:hover {
    background-color: #EAEFF2
}

.galleryTabArea .videoSec .uploadBg .uploadAreaBtn .uploadBtn svg {
    width: 24px;
    display: flex;
    height: 24px
}

.galleryTabArea .videoSec .textArea {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-direction: column;
    margin-top: 24px
}

@media (max-width: 680px) {
    .galleryTabArea .videoSec .textArea {
        gap: 0px
    }
}

.galleryTabArea .videoSec .textArea p {
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: var(--white);
    color: #707070;
    margin: 0
}

.galleryTabArea .videoSec .vdo {
    cursor: pointer;
    position: relative;
    transition: ease-in-out 0.4s;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 15px
}

@media (max-width: 550px) {
    .galleryTabArea .videoSec .vdo {
        width: 100%
    }
}

.galleryTabArea .videoSec .vdo:hover::after {
    opacity: 1
}

.galleryTabArea .videoSec .vdo:hover .textarea .text {
    opacity: 1
}

.galleryTabArea .videoSec .vdo:hover .text {
    opacity: 1
}

    .galleryTabArea .videoSec .vdo:hover .text.textNon {
        opacity: 0;
        pointer-events: none
    }

.galleryTabArea .videoSec .vdo .picSec {
    position: relative;
    display: flex;
    z-index: 2;
    width: 496px;
    height: 274px;
    border-radius: 40px
}

@media (max-width: 550px) {
    .galleryTabArea .videoSec .vdo .picSec {
        width: 100%;
        border-radius: 20px
    }
}

.galleryTabArea .videoSec .vdo .picSec::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    transition: ease-in-out 0.4s
}

.galleryTabArea .videoSec .vdo .picSec:hover::after {
    opacity: 1
}

.galleryTabArea .videoSec .vdo .picSec img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px
}

@media (max-width: 550px) {
    .galleryTabArea .videoSec .vdo .picSec img {
        border-radius: 20px
    }
}

.galleryTabArea .videoSec .vdo .textarea {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-direction: column;
    padding: 30px
}

@media (max-width: 550px) {
    .galleryTabArea .videoSec .vdo .textarea {
        padding: 20px
    }
}

.galleryTabArea .videoSec .vdo .textarea .text {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #F5EFEF;
    text-transform: uppercase;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0
}

    .galleryTabArea .videoSec .vdo .textarea .text.textNon {
        opacity: 0;
        pointer-events: none
    }

.galleryTabArea .videoSec .vdo .textarea .setting {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light2Bg);
    z-index: 4
}

    .galleryTabArea .videoSec .vdo .textarea .setting:hover .dotDrop {
        opacity: 1;
        pointer-events: all
    }

    .galleryTabArea .videoSec .vdo .textarea .setting .dotDrop {
        opacity: 0;
        pointer-events: none;
        padding: 2px 10px;
        background-color: #ffffff;
        border-radius: 5px;
        min-width: 154px;
        position: absolute;
        right: 24px;
        top: 28px;
        transition: ease-in-out 0.4s;
        z-index: 11;
        -webkit-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.19);
        -moz-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.19);
        box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.19)
    }

@media (max-width: 375px) {
    .galleryTabArea .videoSec .vdo .textarea .setting .dotDrop {
        right: -15px
    }
}

.galleryTabArea .videoSec .vdo .textarea .setting .dotDrop .dropList {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--c2d);
    min-height: 30px;
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 5px 0px;
    border-radius: 4px;
    z-index: 1;
    cursor: pointer;
    transition: ease-in-out 0.4s;
    border-bottom: 1px solid #F5F4F4
}

    .galleryTabArea .videoSec .vdo .textarea .setting .dotDrop .dropList:last-child {
        border-bottom: none
    }

.galleryTabArea .videoSec .vdo .textarea .setting svg path {
    fill: var(--theme-colour1)
}

.galleryTabArea .videoSec .vdo .textarea .status {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    position: relative;
    z-index: 4
}

    .galleryTabArea .videoSec .vdo .textarea .status:hover .toolTip {
        opacity: 1;
        pointer-events: all
    }

    .galleryTabArea .videoSec .vdo .textarea .status .toolTip {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        color: #ffffff;
        position: absolute;
        right: 11px;
        top: -23px;
        width: 106px;
        height: 30px;
        background-color: #434343;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none
    }

.galleryTabArea .whatToAvoid {
    background-color: var(--lightBg);
    border-radius: 5px;
    padding: 16px 0;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    column-gap: 68px;
    margin-bottom: 33px;
    margin-top: 17px
}

@media (max-width: 991px) {
    .galleryTabArea .whatToAvoid {
        flex-direction: column
    }
}

@media (max-width: 991px) {
    .galleryTabArea .whatToAvoid .text {
        margin-bottom: 10px
    }
}

.galleryTabArea .whatToAvoid .text h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: var(--theme-colour1);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 9px
}

.galleryTabArea .whatToAvoid .text p {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #707070;
    margin-bottom: 0;
    margin-top: 6px;
    text-align: center
}

.galleryTabArea .whatToAvoid .photSec ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    column-gap: 30px
}

    .galleryTabArea .whatToAvoid .photSec ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column
    }

        .galleryTabArea .whatToAvoid .photSec ul li img {
            margin-bottom: 8px
        }

        .galleryTabArea .whatToAvoid .photSec ul li .name {
            font-size: 10px;
            font-weight: 400;
            line-height: 12px;
            color: #707070;
            display: flex;
            align-items: center;
            justify-content: center;
            column-gap: 8px;
            cursor: pointer
        }

            .galleryTabArea .whatToAvoid .photSec ul li .name svg path {
                fill: var(--theme-colour1)
            }

.galleryTabArea .owl-nav {
    display: block !important
}

    .galleryTabArea .owl-nav .owl-next {
        position: absolute;
        right: 0px;
        top: 40px;
        background-color: var(--lightBg) !important;
        width: 35px;
        height: 28px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .galleryTabArea .owl-nav .owl-prev {
        position: absolute;
        left: 0px;
        top: 40px;
        background-color: var(--lightBg) !important;
        width: 35px;
        height: 28px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center
    }

.galleryTabArea .slider-nav {
    padding: 0 20px
}

.addSuccessStories {
    margin-top: -215px
}

    .addSuccessStories .template-container .success {
        display: grid;
        grid-template-columns: 357px 61px 1fr;
        background-color: white;
        padding: 28px 24px;
        border-radius: 6px;
        margin-bottom: 63px;
        margin-top: 16px;
        -webkit-box-shadow: 0px 3px 13px -1px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 3px 13px -1px rgba(0,0,0,0.1);
        box-shadow: 0px 3px 13px -1px rgba(0,0,0,0.1)
    }

@media (max-width: 1199px) {
    .addSuccessStories .template-container .success {
        grid-template-columns: 300px 40px 1fr
    }
}

@media (max-width: 991px) {
    .addSuccessStories .template-container .success {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
        margin-top: 40px
    }
}

@media (max-width: 767px) {
    .addSuccessStories .template-container .success {
        padding: 28px 22px;
        margin-top: 60px
    }
}

@media (max-width: 480px) {
    .addSuccessStories .template-container .success {
        margin-top: 70px
    }
}

.addSuccessStories .template-container .success .bdrCntr {
    width: 1px;
    height: 80%;
    background-color: #E6E5E5;
    margin: auto 61px auto 0
}

.addSuccessStories .template-container .success .left {
    z-index: 1;
    position: relative
}

    .addSuccessStories .template-container .success .left .upload {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 19px
    }

@media (max-width: 767px) {
    .addSuccessStories .template-container .success .left .upload {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px
    }
}

.addSuccessStories .template-container .success .left .upload i {
    font-style: normal
}

.addSuccessStories .template-container .success .left .uploadData {
    padding: 12px 54px 0px
}

@media (max-width: 1199px) {
    .addSuccessStories .template-container .success .left .uploadData {
        padding: 12px 26px 0px
    }
}

.addSuccessStories .template-container .success .left .uploadData .contentData {
    display: grid;
    grid-template-columns: 1fr 1fr
}

@media (max-width: 991px) {
    .addSuccessStories .template-container .success .left .uploadData .contentData {
        max-width: 250px;
        margin: auto
    }
}

.addSuccessStories .template-container .success .left .uploadData .contentData .addPhoto {
    border: 1.5px solid var(--theme-colour1);
    border-style: dashed;
    border-radius: 6px;
    position: relative;
    max-width: 100%;
    max-height: 100px;
    width: 100px;
    height: 100px;
    margin: 12px
}

    .addSuccessStories .template-container .success .left .uploadData .contentData .addPhoto .wrapPhoto {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

        .addSuccessStories .template-container .success .left .uploadData .contentData .addPhoto .wrapPhoto .upLoadPhoto {
            text-align: center
        }

            .addSuccessStories .template-container .success .left .uploadData .contentData .addPhoto .wrapPhoto .upLoadPhoto svg path {
                fill: var(--theme-colour1)
            }

        .addSuccessStories .template-container .success .left .uploadData .contentData .addPhoto .wrapPhoto label {
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            color: var(--theme-colour1);
            display: flex;
            justify-content: center;
            align-items: center
        }

@media (max-width: 767px) {
    .addSuccessStories .template-container .success .left .uploadData .contentData .addPhoto .wrapPhoto label {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px
    }
}

.addSuccessStories .template-container .success .left .uploadData .contentData .addPhoto .wrapPhoto input {
    cursor: pointer;
    font-size: 100px;
    height: 100%;
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    position: absolute;
    right: 0;
    top: 0
}

.addSuccessStories .template-container .success .left .uploadData .contentData .selectioPhoto {
    position: relative;
    margin: 12px;
    max-width: 100%;
    max-height: 100px;
    width: 100px;
    height: 100px
}

    .addSuccessStories .template-container .success .left .uploadData .contentData .selectioPhoto img {
        max-width: 100%;
        max-height: 100px;
        width: 100px;
        height: 100px;
        border-radius: 6px
    }

    .addSuccessStories .template-container .success .left .uploadData .contentData .selectioPhoto .icon {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
        cursor: pointer
    }

        .addSuccessStories .template-container .success .left .uploadData .contentData .selectioPhoto .icon img {
            max-width: inherit;
            width: inherit;
            max-height: inherit;
            height: inherit
        }

    .addSuccessStories .template-container .success .left .uploadData .contentData .selectioPhoto:hover .icon {
        opacity: 1
    }

.addSuccessStories .template-container .success .right .listAreaForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 31px
}

@media (max-width: 680px) {
    .addSuccessStories .template-container .success .right .listAreaForm {
        grid-template-columns: 1fr
    }
}

.addSuccessStories .template-container .success .right .listAreaForm .formRowRgt {
    border-right: 1px dotted #DDDDDD
}

.addSuccessStories .template-container .success .right .listAreaForm .formRow .InnerDiv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px
}

@media (max-width: 1199px) {
    .addSuccessStories .template-container .success .right .listAreaForm .formRow .InnerDiv {
        grid-template-columns: 1fr
    }
}

.addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow {
    position: relative;
    margin-bottom: 16px
}

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .inputLabel {
        font-size: 16px;
        font-weight: 400;
        line-height: initial;
        color: #3D3D3D;
        margin-bottom: 8px;
        display: block;
        position: relative
    }

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .inputCtrl {
        width: 100%;
        height: 44px;
        border-radius: 3px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #BCBCBC;
        background-color: var(--white);
        outline: none
    }

        .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .inputCtrl::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #949191
        }

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .validateText {
        position: absolute;
        top: 71px;
        right: 5px;
        font-size: 10px;
        font-weight: 400;
        line-height: 12px;
        color: #ff0000
    }

        .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .validateText.validateText2 {
            right: auto
        }

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .select2Ctrl .select2-container {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        width: 100% !important;
        border-radius: 4px
    }

        .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single {
            border: none !important;
            height: 46px;
            display: flex;
            align-items: center;
            outline: 0
        }

            .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .select2Ctrl .select2-container .selection .select2-selection--single .select2-selection__rendered {
                padding: 5px 12px;
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: #434343
            }

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .select2-container--default .select2-selection--single {
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        border-radius: 4px
    }

        .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display: none
        }

        .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputRow .select2-container--default .select2-selection--single .select2-selection__arrow {
            background-image: url(../images/dwnArrow2.png);
            background-position: center center;
            background-repeat: no-repeat;
            top: 10px;
            right: 8px
        }

.addSuccessStories .template-container .success .right .listAreaForm .formRow .inputWrp {
    display: flex;
    align-items: start;
    position: relative;
    flex-direction: column
}

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputWrp label {
        color: #434343;
        margin-bottom: 8px;
        display: block;
        position: relative;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px
    }

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputWrp input {
        width: 100%;
        height: 46px;
        border-radius: 4px;
        padding: 5px 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        border: 1px solid #DDDDDD;
        background-color: var(--white);
        outline: none
    }

        .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputWrp input::placeholder {
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: #707070
        }

    .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputWrp .searchIcon {
        width: 52px;
        height: 52px;
        position: absolute;
        right: 4px;
        top: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        cursor: pointer;
        z-index: 1;
        transition: ease-in-out .4s
    }

        .addSuccessStories .template-container .success .right .listAreaForm .formRow .inputWrp .searchIcon svg path {
            fill: var(--theme-colour1)
        }

.addSuccessStories .template-container .success .right .listFormArea {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 31px
}

    .addSuccessStories .template-container .success .right .listFormArea .inputRow {
        position: relative
    }

        .addSuccessStories .template-container .success .right .listFormArea .inputRow .inputLabel {
            font-size: 16px;
            font-weight: 400;
            line-height: initial;
            color: #3D3D3D;
            margin-bottom: 8px;
            display: block;
            position: relative
        }

        .addSuccessStories .template-container .success .right .listFormArea .inputRow .textCtrl {
            width: 100%;
            height: 130px;
            border-radius: 3px;
            padding: 16px 20px;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            color: var(--c2d);
            border: 1px solid #BCBCBC;
            background-color: var(--white);
            outline: none
        }

            .addSuccessStories .template-container .success .right .listFormArea .inputRow .textCtrl::placeholder {
                font-size: 14px;
                font-weight: 400;
                line-height: 16px;
                color: #949191
            }

.addSuccessStories .template-container .success .right .btnGroup {
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 24px 0 0
}

    .addSuccessStories .template-container .success .right .btnGroup .Story, .addSuccessStories .template-container .success .right .btnGroup .clear {
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        color: #FAFAFA;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 44px;
        padding: 10px 25px;
        background-color: var(--theme-colour1);
        border-radius: 5px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: ease-in-out 0.4s
    }

        .addSuccessStories .template-container .success .right .btnGroup .Story:hover, .addSuccessStories .template-container .success .right .btnGroup .clear:hover {
            background: var(--theme-colour2)
        }

    .addSuccessStories .template-container .success .right .btnGroup .clear {
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        color: var(--theme-colour1);
        background-color: transparent;
        border: 1px solid var(--theme-colour1);
        min-width: 120px;
        margin-right: 12px
    }

        .addSuccessStories .template-container .success .right .btnGroup .clear:hover {
            background: var(--theme-colour2);
            color: var(--white)
        }

.headerBack {
    background-color: var(--white)
}

    .headerBack .bannerAll img {
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 25px
    }

.bodyContent {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover
}

    .bodyContent .template-container .AllCommunitycontent {
        position: relative
    }

        .bodyContent .template-container .AllCommunitycontent .allcommunity {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--light2Bg);
            padding-bottom: 12px;
            margin-bottom: 12px
        }

@media (max-width: 550px) {
    .bodyContent .template-container .AllCommunitycontent .allcommunity {
        flex-direction: column;
        justify-content: flex-start;
        align-items: baseline
    }
}

.bodyContent .template-container .AllCommunitycontent .allcommunity .community {
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px
}

@media (max-width: 550px) {
    .bodyContent .template-container .AllCommunitycontent .allcommunity .community {
        margin-bottom: 10px
    }
}

.bodyContent .template-container .AllCommunitycontent .allcommunity .inputWrp {
    position: relative;
    display: flex;
    align-items: center;
    position: relative
}

    .bodyContent .template-container .AllCommunitycontent .allcommunity .inputWrp.iconRight .formcontrol {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        padding-left: 45px;
        background-color: #fff;
        border: 1px solid #ffffff;
        border-radius: 25px;
        height: 49px;
        width: 305px;
        color: #959595
    }

        .bodyContent .template-container .AllCommunitycontent .allcommunity .inputWrp.iconRight .formcontrol::placeholder {
            color: #959595
        }

    .bodyContent .template-container .AllCommunitycontent .allcommunity .inputWrp.iconRight .fIcon {
        position: absolute;
        left: 17px;
        cursor: pointer;
        display: flex
    }

.bodyContent .template-container .AllCommunitycontent .listCast {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-bottom: 42px
}

@media (max-width: 991px) {
    .bodyContent .template-container .AllCommunitycontent .listCast {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 767px) {
    .bodyContent .template-container .AllCommunitycontent .listCast {
        grid-template-columns: 1fr 1fr;
        padding-bottom: 20px
    }
}

@media (max-width: 480px) {
    .bodyContent .template-container .AllCommunitycontent .listCast {
        grid-template-columns: 1fr;
        margin-top: 20px
    }
}

.bodyContent .template-container .AllCommunitycontent .listCast .castAll {
    border-radius: 22px;
    background-color: var(--white);
    height: 44px;
    display: flex;
    align-items: center;
    padding-left: 25px;
    color: #505050;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    margin: 0 7px 7px
}

    .bodyContent .template-container .AllCommunitycontent .listCast .castAll:hover {
        color: var(--white);
        background-color: var(--theme-colour1);
        background-image: linear-gradient(to right, var(--theme-colour1), #fa3)
    }

.bodyContent .easyPay {
    padding-bottom: 32px
}

@media (max-width: 480px) {
    .bodyContent .easyPay {
        margin-top: 10px
    }
}

.bodyContent .easyPay .template-container .content {
    display: flex;
    align-items: center;
    min-height: 185px;
    width: 100%;
    background-image: url(../images/banner1.png);
    border-radius: 19px;
    padding: 10px;
    background-size: cover;
    justify-content: space-around
}

@media (max-width: 991px) {
    .bodyContent .easyPay .template-container .content {
        min-height: 145px
    }
}

@media (max-width: 767px) {
    .bodyContent .easyPay .template-container .content {
        display: flex;
        flex-direction: column;
        column-gap: 10px;
        margin-top: 20px;
        justify-content: center
    }
}

.bodyContent .easyPay .template-container .content .left-content {
    display: grid;
    row-gap: 10px
}

@media (max-width: 480px) {
    .bodyContent .easyPay .template-container .content .left-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }
}

.bodyContent .easyPay .template-container .content .left-content .story {
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
    color: #ffffff
}

@media (max-width: 1199px) {
    .bodyContent .easyPay .template-container .content .left-content .story {
        font-size: 35px;
        font-weight: 700;
        line-height: 35px
    }
}

@media (max-width: 991px) {
    .bodyContent .easyPay .template-container .content .left-content .story {
        font-size: 30px;
        font-weight: 700;
        line-height: 30px
    }
}

@media (max-width: 767px) {
    .bodyContent .easyPay .template-container .content .left-content .story {
        font-size: 25px;
        font-weight: 700;
        line-height: 30px
    }
}

.bodyContent .easyPay .template-container .content .right-content {
    display: flex;
    justify-content: end;
    max-width: 504px
}

@media (max-width: 991px) {
    .bodyContent .easyPay .template-container .content .right-content {
        max-width: 414px
    }
}

@media (max-width: 767px) {
    .bodyContent .easyPay .template-container .content .right-content {
        max-width: 500px;
        text-align: center
    }
}

@media (max-width: 480px) {
    .bodyContent .easyPay .template-container .content .right-content {
        display: block
    }
}

.bodyContent .easyPay .template-container .content .right-content .contentRegister {
    border-radius: 11px;
    font-size: 33px;
    font-weight: 500;
    line-height: 39px;
    color: var(--white)
}

@media (max-width: 1199px) {
    .bodyContent .easyPay .template-container .content .right-content .contentRegister {
        font-size: 30px;
        font-weight: 500;
        line-height: 36px
    }
}

@media (max-width: 991px) {
    .bodyContent .easyPay .template-container .content .right-content .contentRegister {
        font-size: 28px;
        font-weight: 500;
        line-height: 34px
    }
}

@media (max-width: 767px) {
    .bodyContent .easyPay .template-container .content .right-content .contentRegister {
        width: 100%;
        display: flex;
        text-align: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 500;
        line-height: 26px
    }
}

.pagginationSuccess .pagingNumberRowSuccess {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0px
}

.login-widget .form .intimateLogin .formAreaLogin .inputRow .contryCode .select2 .selection .select2-selection {
    border-radius: 7px 0px 0px 7px;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    border-left: 1px solid rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    border-right: 1px solid transparent !important
}

.welComeBannerBlog {
    padding-top: 12px
}

    .welComeBannerBlog .welComeBannerBlogArea {
        border-radius: 12px;
        padding: 35px 84px 43px;
        position: relative;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover
    }

@media (max-width: 767px) {
    .welComeBannerBlog .welComeBannerBlogArea {
        padding: 35px 25px 43px
    }
}

.welComeBannerBlog .welComeBannerBlogArea::after {
    position: absolute;
    content: "";
    background: linear-gradient(to right, #032c44 0%, rgba(3,44,68,0.99) 1%, rgba(8,58,87,0.01) 99%, rgba(8,58,87,0) 100%);
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px
}

.welComeBannerBlog .welComeBannerBlogArea h1 {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: var(--white);
    margin: 0 0 16px;
    padding: 0;
    z-index: 1;
    position: relative
}

.welComeBannerBlog .welComeBannerBlogArea p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--white);
    max-width: 758px;
    width: 100%;
    margin: 0;
    z-index: 1;
    position: relative;
    text-align: left
}

@media (max-width: 767px) {
    .welComeBannerBlog .welComeBannerBlogArea p {
        font-size: 14px;
        line-height: 17px
    }
}

.blogListing .blogListingArea .listHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 0;
    border-bottom: 1px solid #DDDDDD
}

    .blogListing .blogListingArea .listHead .title {
        font-size: 22px;
        font-weight: 600;
        line-height: 27px;
        color: var(--c2d);
        margin-right: 10px
    }

@media (max-width: 991px) {
    .blogListing .blogListingArea .listHead .title {
        font-size: 20px;
        line-height: 25px
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listHead .title {
        font-size: 18px;
        line-height: 23px
    }
}

.blogListing .blogListingArea .listHead .iconSec ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center
}

    .blogListing .blogListingArea .listHead .iconSec ul li {
        list-style: none;
        margin-right: 17px;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--theme-colour1);
        cursor: pointer;
        transition: ease-in-out 0.4s
    }

        .blogListing .blogListingArea .listHead .iconSec ul li.active {
            background-color: var(--theme-colour1)
        }

            .blogListing .blogListingArea .listHead .iconSec ul li.active svg path {
                fill: var(--white)
            }

        .blogListing .blogListingArea .listHead .iconSec ul li:hover {
            background-color: var(--theme-colour1)
        }

            .blogListing .blogListingArea .listHead .iconSec ul li:hover svg path {
                fill: var(--white)
            }

        .blogListing .blogListingArea .listHead .iconSec ul li svg path {
            fill: var(--theme-colour1);
            transition: ease-in-out 0.4s
        }

        .blogListing .blogListingArea .listHead .iconSec ul li:last-child {
            margin-right: 0px
        }

.blogListing .blogListingArea .listArea .listSec {
    display: grid;
    grid-template-columns: 511px 1fr;
    padding: 16px 0;
    border-bottom: 1px solid #DDDDDD
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea .listSec {
        grid-template-columns: 330px 1fr
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec {
        grid-template-columns: 1fr
    }
}

.blogListing .blogListingArea .listArea .listSec .picSec {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec .picSec {
        max-width: 330px
    }
}

.blogListing .blogListingArea .listArea .listSec .picSec .date {
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: var(--c2d)
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea .listSec .picSec .date {
        font-size: 20px;
        line-height: 25px
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec .picSec .date {
        font-size: 18px;
        line-height: 23px
    }
}

.blogListing .blogListingArea .listArea .listSec .picSec .date span {
    font-size: 41px;
    font-weight: 600;
    line-height: 48px;
    color: var(--theme-colour1)
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea .listSec .picSec .date span {
        font-size: 35px;
        line-height: 40px
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec .picSec .date span {
        font-size: 30px;
        line-height: 35px
    }
}

.blogListing .blogListingArea .listArea .listSec .picSec .date hr {
    width: 19px;
    height: 1px;
    background-color: #DDDDDD;
    border: none;
    margin: 0px 0 4px
}

.blogListing .blogListingArea .listArea .listSec .picSec .pic {
    max-width: 412px;
    max-height: 277px;
    width: 100%;
    overflow: hidden
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea .listSec .picSec .pic {
        margin-left: 20px
    }
}

.blogListing .blogListingArea .listArea .listSec .picSec .pic img {
    width: 100%;
    border-radius: 12px
}

.blogListing .blogListingArea .listArea .listSec .textArea {
    padding-left: 47px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea .listSec .textArea {
        padding-left: 30px
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec .textArea {
        margin-top: 15px;
        padding-left: 0
    }
}

.blogListing .blogListingArea .listArea .listSec .textArea .title {
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: var(--c2d);
    margin: 0 0 16px
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea .listSec .textArea .title {
        font-size: 20px;
        line-height: 25px;
        margin: 0 0 10px
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec .textArea .title {
        font-size: 18px;
        line-height: 23px
    }
}

.blogListing .blogListingArea .listArea .listSec .textArea p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--theme-text-colour);
    margin: 0 0 26px;
    text-align: left
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea .listSec .textArea p {
        margin: 0 0 15px
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec .textArea p {
        font-size: 14px;
        line-height: 17px
    }
}

.blogListing .blogListingArea .listArea .listSec .textArea .btnSec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #DDDDDD;
    padding-top: 17px
}

    .blogListing .blogListingArea .listArea .listSec .textArea .btnSec .viewmore {
        font-size: 18px;
        font-weight: 400;
        line-height: 22px;
        color: var(--theme-colour1);
        display: flex;
        align-items: center;
        transition: ease-in-out 0.4s
    }

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea .listSec .textArea .btnSec .viewmore {
        font-size: 16px;
        line-height: 20px
    }
}

.blogListing .blogListingArea .listArea .listSec .textArea .btnSec .viewmore svg {
    margin-left: 7px;
    transition: ease-in-out 0.4s
}

    .blogListing .blogListingArea .listArea .listSec .textArea .btnSec .viewmore svg path {
        fill: var(--theme-colour1);
        transition: ease-in-out 0.4s
    }

.blogListing .blogListingArea .listArea .listSec .textArea .btnSec .viewmore:hover {
    color: var(--theme-colour1)
}

    .blogListing .blogListingArea .listArea .listSec .textArea .btnSec .viewmore:hover svg {
        margin-left: 14px
    }

        .blogListing .blogListingArea .listArea .listSec .textArea .btnSec .viewmore:hover svg path {
            fill: var(--theme-colour2)
        }

.blogListing .blogListingArea .listArea .listSec .textArea .btnSec .socialIcn svg {
    transition: ease-in-out 0.4s
}

    .blogListing .blogListingArea .listArea .listSec .textArea .btnSec .socialIcn svg path {
        fill: var(--theme-colour1);
        transition: ease-in-out 0.4s
    }

.blogListing .blogListingArea .listArea .listSec .textArea .btnSec .socialIcn:hover svg {
    margin-left: 14px
}

    .blogListing .blogListingArea .listArea .listSec .textArea .btnSec .socialIcn:hover svg path {
        fill: var(--theme-colour2)
    }

.blogListing .blogListingArea .listArea.listAreaGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px
}

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea.listAreaGrid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 550px) {
    .blogListing .blogListingArea .listArea.listAreaGrid {
        grid-template-columns: 1fr
    }
}

.blogListing .blogListingArea .listArea.listAreaGrid .listSec {
    grid-template-columns: 1fr
}

    .blogListing .blogListingArea .listArea.listAreaGrid .listSec .picSec {
        position: relative
    }

        .blogListing .blogListingArea .listArea.listAreaGrid .listSec .picSec .date {
            font-size: 16px;
            line-height: 23px;
            position: absolute;
            right: 20px;
            bottom: -16px;
            background-color: #fff;
            border-radius: 4px;
            padding: 8px;
            width: 59px;
            height: 78px;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15)
        }

            .blogListing .blogListingArea .listArea.listAreaGrid .listSec .picSec .date span {
                font-size: 30px;
                line-height: 38px
            }

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea.listAreaGrid .listSec .picSec .pic {
        margin-left: 0px;
        max-width: 100%;
        max-height: fit-content
    }
}

.blogListing .blogListingArea .listArea.listAreaGrid .listSec .textArea {
    padding-left: 0;
    margin-top: 20px
}

    .blogListing .blogListingArea .listArea.listAreaGrid .listSec .textArea .title {
        min-height: 54px;
        height: 54px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

@media (max-width: 991px) {
    .blogListing .blogListingArea .listArea.listAreaGrid .listSec .textArea .title {
        min-height: 47px;
        height: 47px
    }
}

@media (max-width: 767px) {
    .blogListing .blogListingArea .listArea.listAreaGrid .listSec .textArea .title {
        min-height: 44px;
        height: 44px
    }
}

.blogListing .blogListingArea .listArea.listAreaGrid .listSec .textArea p {
    min-height: 54px;
    height: 54px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

@media (max-width: 991px) {
    .blogListing .pagingNumberRow {
        display: flex
    }
}

.breadcrumb {
    background-color: var(--lightBg);
    padding: 23px 0
}

    .breadcrumb .breadcrumbList ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

        .breadcrumb .breadcrumbList ul li {
            font-size: 14px;
            font-weight: 400;
            line-height: 17px;
            color: #000000;
            list-style: none;
            margin-right: 13px
        }

            .breadcrumb .breadcrumbList ul li.active {
                color: var(--theme-colour1)
            }

.blogDetail {
    margin-top: 20px
}

    .blogDetail .blogDetailArea {
        display: grid;
        grid-template-columns: 1fr 280px
    }

@media (max-width: 991px) {
    .blogDetail .blogDetailArea {
        grid-template-columns: 1fr
    }
}

.blogDetail .blogDetailArea .blogDetailCnt {
    padding-right: 38px
}

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .blogDetailCnt {
        padding-right: 0
    }
}

.blogDetail .blogDetailArea .blogDetailCnt .titleSec {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

    .blogDetail .blogDetailArea .blogDetailCnt .titleSec .title .date {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: var(--theme-text-colour);
        margin-bottom: 11px
    }

    .blogDetail .blogDetailArea .blogDetailCnt .titleSec .title h2 {
        font-size: 22px;
        font-weight: 500;
        line-height: 27px;
        color: var(--c2d);
        margin-bottom: 16px
    }

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .blogDetailCnt .titleSec .title h2 {
        font-size: 20px;
        line-height: 25px
    }
}

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .blogDetailCnt .titleSec .title h2 {
        font-size: 18px;
        line-height: 23px
    }
}

.blogDetail .blogDetailArea .blogDetailCnt .titleSec .socialIcnDiv {
    margin-left: 20px
}

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .blogDetailCnt .titleSec .socialIcnDiv {
        margin-top: -9px
    }
}

.blogDetail .blogDetailArea .blogDetailCnt .titleSec .socialIcn {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15)
}

    .blogDetail .blogDetailArea .blogDetailCnt .titleSec .socialIcn svg path {
        fill: var(--theme-colour1)
    }

.blogDetail .blogDetailArea .blogDetailCnt p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--theme-text-colour);
    margin: 0 0 24px;
    text-align: left
}

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .blogDetailCnt p {
        margin: 0 0 15px
    }
}

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .blogDetailCnt p {
        font-size: 14px;
        line-height: 17px
    }
}

.blogDetail .blogDetailArea .blogDetailCnt .mainPic {
    max-width: 880px;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 23px;
    border-bottom: 1px solid #DDDDDD
}

    .blogDetail .blogDetailArea .blogDetailCnt .mainPic img {
        width: 100%;
        border-radius: 12px
    }

.blogDetail .blogDetailArea .blogDetailCnt .subTitle {
    font-size: 22px;
    font-weight: 400;
    line-height: 27px;
    color: var(--c2d);
    margin-bottom: 19px
}

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .blogDetailCnt .subTitle {
        font-size: 20px;
        line-height: 25px
    }
}

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .blogDetailCnt .subTitle {
        font-size: 18px;
        line-height: 23px
    }
}

.blogDetail .blogDetailArea .blogDetailCnt ul {
    margin: 0 0 0 23px;
    padding: 0
}

    .blogDetail .blogDetailArea .blogDetailCnt ul li {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: var(--theme-text-colour);
        list-style: none;
        margin-bottom: 23px;
        position: relative
    }

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .blogDetailCnt ul li {
        font-size: 14px;
        line-height: 17px
    }
}

.blogDetail .blogDetailArea .blogDetailCnt ul li::after {
    position: absolute;
    content: "";
    left: -10px;
    top: 6px;
    background-image: url(../images/blueArrow.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 7px;
    height: 9px
}

.blogDetail .blogDetailArea .blogDetailCnt ul li span {
    font-size: 17px;
    font-weight: 500;
    line-height: 20px
}

.blogDetail .blogDetailArea .blogDetailCnt ol {
    margin: 0 0 0 43px;
    padding: 0
}

    .blogDetail .blogDetailArea .blogDetailCnt ol li {
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
        color: var(--theme-text-colour);
        margin-bottom: 27px;
        list-style: none;
        display: list-item;
        list-style-type: decimal
    }

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .blogDetailCnt ol li {
        font-size: 14px;
        line-height: 17px
    }
}

.blogDetail .blogDetailArea .blogDetailCnt ol li span {
    font-size: 17px;
    font-weight: 500;
    line-height: 20px;
    color: var(--theme-colour1);
    margin-right: 10px
}

.blogDetail .blogDetailArea .blogDetailCnt ol li::marker {
    color: var(--theme-text-colour);
    font-size: 17px;
    font-weight: 500;
    line-height: 20px;
    color: var(--theme-colour1);
    margin-right: 10px
}

.blogDetail .blogDetailArea .blogDetailCnt .subLink {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: var(--theme-colour1);
    margin: 13px 0 23px 23px;
    display: flex;
    word-break: break-all
}

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .completedProfile {
        display: flex;
        margin-bottom: 20px
    }
}

@media (max-width: 480px) {
    .blogDetail .blogDetailArea .completedProfile {
        flex-wrap: wrap;
        justify-content: center
    }
}

.blogDetail .blogDetailArea .completedProfile .letedPro {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    max-width: 280px
}

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .completedProfile .letedPro {
        margin-right: 10px
    }
}

@media (max-width: 480px) {
    .blogDetail .blogDetailArea .completedProfile .letedPro {
        margin-right: 0px
    }
}

.blogDetail .blogDetailArea .completedProfile .letedPro img {
    width: 100%;
    border-radius: 5px
}

.blogDetail .blogDetailArea .completedProfile .happyToHelp {
    background-color: var(--lightBg);
    border-radius: 5px;
    padding: 18px;
    text-align: center;
    margin-bottom: 8px;
    max-width: 280px
}

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .completedProfile .happyToHelp {
        order: 0;
        margin-top: 0px;
        margin-bottom: 8px;
        height: fit-content
    }
}

@media (max-width: 480px) {
    .blogDetail .blogDetailArea .completedProfile .happyToHelp {
        width: 100%
    }
}

.blogDetail .blogDetailArea .completedProfile .happyToHelp .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
    color: var(--c2d)
}

.blogDetail .blogDetailArea .completedProfile .happyToHelp .pic {
    padding: 16px 0 20px
}

.blogDetail .blogDetailArea .completedProfile .happyToHelp p {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #575757;
    text-align: center
}

.blogDetail .blogDetailArea .completedProfile .happyToHelp .mobNum {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: var(--theme-colour1);
    width: 164px;
    height: 38px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    margin: auto;
    cursor: pointer;
    background-color: var(--white);
    border-radius: 19px
}

    .blogDetail .blogDetailArea .completedProfile .happyToHelp .mobNum svg circle {
        fill: var(--theme-colour1)
    }

.blogDetail .blogDetailArea .relatedBlogs {
    padding-top: 21px;
    border-top: 1px solid #DDDDDD
}

    .blogDetail .blogDetailArea .relatedBlogs .title {
        font-size: 22px;
        font-weight: 400;
        line-height: 27px;
        color: var(--c2d);
        padding-bottom: 26px
    }

    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 39px;
        margin-bottom: 36px
    }

@media (max-width: 1199px) {
    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec {
        grid-gap: 20px
    }
}

@media (max-width: 991px) {
    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec {
        grid-gap: 10px
    }
}

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 550px) {
    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec {
        grid-template-columns: 1fr
    }
}

.blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec .relatedBlogsList {
    position: relative
}

    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec .relatedBlogsList::after {
        position: absolute;
        content: "";
        background: linear-gradient(to bottom, transparent 51%, #000 100%);
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px
    }

    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec .relatedBlogsList img {
        width: 100%;
        border-radius: 12px
    }

    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec .relatedBlogsList p {
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
        color: var(--white);
        padding: 21px 24px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        margin: 0;
        text-align: left
    }

@media (max-width: 767px) {
    .blogDetail .blogDetailArea .relatedBlogs .relatedBlogsListSec .relatedBlogsList p {
        font-size: 14px;
        line-height: 17px
    }
}

.header-widget.border {
    padding: 10px 0;
    box-shadow: none;
    position: relative;
    z-index: 3;
    background-color: transparent
}

    .header-widget.border .template-containerExtraLrg {
        height: 65px;
        display: flex;
        justify-content: space-between
    }

@media (max-width: 680px) {
    .header-widget.border .template-containerExtraLrg {
        height: 45px
    }
}

.header-widget.border .template-containerExtraLrg .navWrap {
    display: flex;
    align-items: center
}

    .header-widget.border .template-containerExtraLrg .navWrap ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex
    }

        .header-widget.border .template-containerExtraLrg .navWrap ul.linksPoint li a {
            font-size: 16px;
            font-weight: 400;
            line-height: 19px;
            text-decoration: underline
        }

@media (max-width: 480px) {
    .header-widget.border .template-containerExtraLrg .navWrap ul.linksPoint li a {
        display: none
    }
}

.header-widget.border .template-containerExtraLrg .navWrap ul.linksPoint li:last-child {
    padding-right: 0px
}

.header-widget.border .template-containerExtraLrg .navWrap ul.linksPointFst li {
    padding-right: 62px
}

    .header-widget.border .template-containerExtraLrg .navWrap ul.linksPointFst li a {
        padding: 10px 0px
    }

@media (max-width: 1199px) {
    .header-widget.border .template-containerExtraLrg .navWrap ul {
        flex-direction: column
    }
}

@media (max-width: 1199px) {
    .header-widget.border .template-containerExtraLrg .navWrap ul li {
        padding: 0;
        margin-right: 0;
        margin-bottom: 0
    }
}

.header-widget.border .template-containerExtraLrg .navWrap ul li.linkList {
    padding: 0px
}

    .header-widget.border .template-containerExtraLrg .navWrap ul li.linkList:hover .dropDownSec .dropdown__select {
        transform: scaleY(1);
        z-index: 999
    }

    .header-widget.border .template-containerExtraLrg .navWrap ul li.linkList:hover .dropDownSec .dropdown__select {
        transform: scaleY(1);
        z-index: 999;
        background-color: white;
        border-radius: 5px
    }

@media (max-width: 1199px) {
    .header-widget.border .template-containerExtraLrg .navWrap ul li.linkList:hover .dropDownSec .dropdown__select .dropdown__select-option a {
        font-size: 12px !important;
        padding: 16px
    }
}

.header-widget.border .template-containerExtraLrg .navWrap ul li a {
    padding: 10px 33px 10px 10px;
    align-items: center;
    transition: ease-in-out .4s;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #000000
}

    .header-widget.border .template-containerExtraLrg .navWrap ul li a.link {
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        padding: 10px 33px 10px 10px
    }

    .header-widget.border .template-containerExtraLrg .navWrap ul li a.active {
        color: var(--theme-colour1)
    }

@media (max-width: 1199px) {
    .header-widget.border .template-containerExtraLrg .navWrap ul li a {
        padding-left: 0 !important
    }
}

.header-widget.border .template-containerExtraLrg .navWrap ul li a svg path {
    transition: ease-in-out .4s
}

.header-widget.border .template-containerExtraLrg .navWrap ul li a:hover, .header-widget.border .template-containerExtraLrg .navWrap ul li a .active {
    color: var(--theme-colour1);
    transition: ease-in-out .4s
}

    .header-widget.border .template-containerExtraLrg .navWrap ul li a:hover svg path, .header-widget.border .template-containerExtraLrg .navWrap ul li a .active svg path {
        fill: var(--theme-colour1)
    }

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row {
    display: flex;
    align-items: center;
    column-gap: 17px
}

    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        height: 58px
    }

        .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl:hover .userDrop {
            opacity: 1;
            pointer-events: all;
            top: 50px
        }

        .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop {
            position: absolute;
            width: 202px;
            height: 60px;
            right: 15px;
            top: 0px;
            display: flex;
            align-items: center;
            background: #FFFFFF;
            -webkit-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
            -moz-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
            box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.24);
            border-radius: 16px;
            opacity: 0;
            pointer-events: none;
            transition: ease-in-out .4s
        }

@media (max-width: 1450px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop {
        height: 45px
    }
}

@media (max-width: 680px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop {
        height: 45px;
        width: 150px
    }
}

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop ul {
    padding: 0 0 0 15px;
    margin: 0
}

    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop ul li {
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        padding: 0;
        list-style: none;
        transition: ease-in-out .4s;
        border-radius: 5px
    }

@media (max-width: 767px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop ul li {
        font-size: 12px
    }
}

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop ul li a {
    padding: 0;
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #000000
}

@media (max-width: 991px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop ul li a {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px
    }
}

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop ul li:hover {
    background-color: transparent
}

    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .userDrop ul li:hover a {
        color: #000000
    }

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .icon {
    border-radius: 22px;
    cursor: pointer;
    height: 44px;
    width: 95px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width: 680px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .userControl .icon {
        height: 40px;
        width: 75px
    }
}

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .hamburg {
    display: none;
    cursor: pointer;
    margin-left: 6px;
    border-radius: 4px;
    outline: none;
    background-color: transparent;
    border: solid 1px #f3f3f312
}

    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .hamburg .icon {
        background-color: #FFFFFF;
        padding: 8px 14px 8px 14px;
        border-radius: 22px;
        box-shadow: 0px 2px 15px #707070;
        cursor: pointer
    }

        .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .hamburg .icon .profile {
            display: flex;
            justify-content: space-between;
            align-items: center;
            column-gap: 17px
        }

            .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .hamburg .icon .profile .message span {
                position: absolute;
                top: 20px;
                right: 65px;
                border-radius: 50%;
                height: 12px;
                font-weight: 300;
                padding: 3px 6px;
                background-color: #EB6463;
                color: #fff
            }

            .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row .hamburg .icon .profile .frofile img {
                max-height: 100%;
                width: 28px;
                height: 28px;
                border-radius: 50%
            }

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--theme-text-colour)
}

@media (max-width: 767px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row p {
        font-size: 12px
    }
}

@media (max-width: 991px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row p {
        text-align: right
    }
}

@media (max-width: 480px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row p span {
        display: block;
        margin-bottom: 2px
    }
}

.header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row p a {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--theme-colour2);
    transition: ease-in-out .4s
}

    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row p a:hover {
        color: var(--theme-colour1)
    }

@media (max-width: 767px) {
    .header-widget.border .template-containerExtraLrg .navWrap .nav-ctrl-row p a {
        font-size: 12px
    }
}

.header-widget.border .template-containerExtraLrg .logo {
    display: flex;
    align-items: center
}

    .header-widget.border .template-containerExtraLrg .logo a {
        display: flex;
        justify-content: center
    }

@media (max-width: 680px) {
    .header-widget.border .template-containerExtraLrg .logo a.lg-logo {
        display: none !important
    }
}

@media (min-width: 681px) {
    .header-widget.border .template-containerExtraLrg .logo a.sm-logo {
        display: none !important
    }
}

.header-widget.border .template-containerExtraLrg .logo a img {
    width: 190px;
    height: 54px
}

@media (max-width: 680px) {
    .header-widget.border .template-containerExtraLrg .logo a img {
        width: 140px;
        height: auto
    }
}

.headerBannerSec {
    position: relative;
    z-index: 2;
    padding-bottom: 85px;
    overflow: hidden
}

@media (max-width: 1450px) {
    .headerBannerSec {
        height: auto
    }
}

@media (max-width: 680px) {
    .headerBannerSec {
        padding-bottom: 55px
    }
}

.headerBannerSec::after {
    content: "";
    position: absolute;
    max-width: 655px;
    width: 100%;
    height: 315px;
    bottom: 0;
    right: 0;
    background-image: url("../images/headerD-botttom.svg");
    background-repeat: no-repeat;
    z-index: -1
}

@media (max-width: 1450px) {
    .headerBannerSec::after {
        max-width: 550px
    }
}

@media (max-width: 1199px) {
    .headerBannerSec::after {
        display: none
    }
}

.headerBannerSec::before {
    content: "";
    position: absolute;
    background: transparent linear-gradient(296deg, #037AC0 0%, #fff 100%) 0% 0% no-repeat padding-box;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    z-index: -1;
    right: 0;
    top: 0
}

.headerBannerSec .headerWrapperSec::after {
    content: "";
    position: absolute;
    max-width: 501px;
    width: 100%;
    height: 80%;
    top: -355px;
    right: -240px;
    background-size: cover;
    background: transparent linear-gradient(180deg, #F8BF3B 0%, #9AA570 13%, #067BC5 72%, #1260D5 100%) 0% 0% no-repeat padding-box;
    opacity: 0.18;
    filter: blur(34px)
}

@media (max-width: 1199px) {
    .headerBannerSec .headerWrapperSec::after {
        display: none
    }
}

.headerBannerSec .headerWrapperSec .movingHeaderWrap {
    margin: auto;
    overflow: hidden;
    margin-top: 45px
}

@media (max-width: 1720px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap {
        margin-top: 20px
    }
}

@media (max-width: 991px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap {
        margin-top: 10px
    }
}

@media (max-width: 991px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap {
        margin-top: 20px
    }
}

.headerBannerSec .headerWrapperSec .movingHeaderWrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    max-width: 655px;
    width: 100%;
    height: 315px;
    z-index: -1;
    background-image: url("../images/headerD-top.svg");
    background-repeat: no-repeat
}

@media (max-width: 1450px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap::after {
        max-width: 550px;
        left: -50px
    }
}

@media (max-width: 1199px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap::after {
        max-width: 470px;
        left: -80px
    }
}

@media (max-width: 991px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap::after {
        max-width: 450px;
        left: -90px
    }
}

@media (max-width: 680px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap::after {
        max-width: 400px;
        left: -100px
    }
}

@media (max-width: 680px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap::after {
        margin-top: 24px
    }
}

.headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec {
    gap: 20px;
    margin-bottom: 41px;
    display: flex;
    width: 100%;
    z-index: 1;
    position: relative;
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll 40s forwards linear infinite;
    -webkit-animation: scroll 40s linear infinite
}

@media (max-width: 680px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec {
        margin-bottom: 16px
    }
}

.headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec {
    max-width: 422px;
    width: 100%;
    object-fit: cover;
    height: 507px;
    display: grid;
    gap: 22px
}

@media (max-width: 1720px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec {
        width: 305px;
        height: 360px;
        gap: 12px
    }
}

@media (max-width: 1450px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec {
        width: 265px;
        height: 320px;
        gap: 12px
    }
}

@media (max-width: 680px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec {
        width: 220px;
        height: 265px;
        gap: 10px
    }
}

.headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec img {
    border-radius: 35px;
    width: 100%;
    height: auto
}

@media (max-width: 1720px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec img {
        border-radius: 18px
    }
}

@media (max-width: 991px) {
    .headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec img {
        border-radius: 15px
    }
}

.headerBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .owl-stage {
    display: flex;
    gap: 20px
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.headerBannerSec .tabArea {
    max-width: 1382px;
    width: 100%;
    height: auto;
    margin: auto;
    background: #ffffff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
    border-radius: 19px;
    transform: none;
    position: relative;
    z-index: 1
}

@media (max-width: 1366px) {
    .headerBannerSec .tabArea {
        width: 85%;
        height: auto
    }
}

@media (max-width: 1024px) {
    .headerBannerSec .tabArea {
        width: 85%;
        height: auto
    }
}

@media (max-width: 767px) {
    .headerBannerSec .tabArea {
        width: 90%
    }
}

@media (max-width: 680px) {
    .headerBannerSec .tabArea {
        max-width: 100%;
        width: 100%
    }
}

@media (max-width: 480px) {
    .headerBannerSec .tabArea {
        border-radius: 9px;
        background: #f7f7f7
    }
}

@media (max-width: 375px) {
    .headerBannerSec .tabArea {
        height: auto
    }
}

.headerBannerSec .tabArea .tabcontent {
    display: none;
    border-top: none;
    margin: 0;
    padding: 21px 29px 29px 29px
}

@media (max-width: 1450px) {
    .headerBannerSec .tabArea .tabcontent {
        padding: 15px 20px 20px 20px
    }
}

@media (max-width: 1024px) {
    .headerBannerSec .tabArea .tabcontent {
        padding: 15px;
        margin: 0
    }
}

@media (max-width: 680px) {
    .headerBannerSec .tabArea .tabcontent {
        padding: 15px
    }
}

.headerBannerSec .tabArea .tabcontent .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0
}

.headerBannerSec .tabArea .tabcontent h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    margin-bottom: 23px
}

@media (max-width: 1450px) {
    .headerBannerSec .tabArea .tabcontent h2 {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 500;
        line-height: 32px
    }
}

@media (max-width: 680px) {
    .headerBannerSec .tabArea .tabcontent h2 {
        text-align: start;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 500;
        line-height: 32px
    }
}

.headerBannerSec .tabArea .tabcontent .form-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    column-gap: 12px;
    align-items: center
}

@media (max-width: 550px) {
    .headerBannerSec .tabArea .tabcontent .form-content {
        grid-template-columns: 1fr;
        justify-items: center;
        column-gap: 10px;
        margin-top: 5px
    }
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea {
    display: inline-grid;
    background: #ffffff;
    box-shadow: none;
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    max-width: 322px;
    width: 100%;
    height: fit-content;
    padding: 10px 16px;
    margin-bottom: 10px
}

@media (max-width: 1199px) {
    .headerBannerSec .tabArea .tabcontent .form-content .inputArea {
        width: 100%
    }
}

@media (max-width: 680px) {
    .headerBannerSec .tabArea .tabcontent .form-content .inputArea {
        margin-bottom: 15px;
        max-width: 100%
    }
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea input {
    border: none;
    width: 100%
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea label {
    font-size: 16px;
    font-weight: 500;
    line-height: 17px;
    font-family: "Rubik";
    color: #444444;
    margin-bottom: 6px
}

@media (max-width: 480px) {
    .headerBannerSec .tabArea .tabcontent .form-content .inputArea label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
        color: #000000
    }
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea label sup {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #ff0000
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea select {
    border: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #797373;
    border: none;
    margin-left: -4px;
    background-color: transparent
}

@media (max-width: 480px) {
    .headerBannerSec .tabArea .tabcontent .form-content .inputArea select {
        padding-left: 0;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        height: 30px
    }
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    background: var(--theme-colour1);
    width: 100%;
    height: auto;
    padding: 3px 8px;
    border-radius: 10px
}

    .headerBannerSec .tabArea .tabcontent .form-content .inputArea button:hover {
        background-color: var(--theme-colour2)
    }

.headerBannerSec .tabArea .tabcontent .form-content .inputArea a {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    background: var(--theme-colour1);
    width: 100%;
    height: auto;
    padding: 3px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .headerBannerSec .tabArea .tabcontent .form-content .inputArea a:hover {
        background-color: var(--theme-colour2)
    }

.headerBannerSec .tabArea .tabcontent .form-content .inputArea.button {
    color: white;
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    width: 100%;
    height: 52px;
    padding: 0
}

@media (max-width: 480px) {
    .headerBannerSec .tabArea .tabcontent .form-content .inputArea.button {
        display: none
    }
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea.button:hover {
    background: var(--theme-colour2)
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343
}

    .headerBannerSec .tabArea .tabcontent .form-content .inputArea .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0
    }

.headerBannerSec .tabArea .tabcontent .form-content .inputArea .select2-dropdown {
    border-radius: 12px
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea .select2-container {
    width: 100% !important
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea .select2-results__option--selectable {
    font-size: 14px
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea.profileCntr .select2-container {
    height: 20px
}

.headerBannerSec .tabArea .tabcontent .form-content .inputArea .phNumSplt {
    display: flex
}

    .headerBannerSec .tabArea .tabcontent .form-content .inputArea .phNumSplt .select2-container {
        width: fit-content !important
    }

        .headerBannerSec .tabArea .tabcontent .form-content .inputArea .phNumSplt .select2-container .select2-selection--single {
            height: auto
        }

    .headerBannerSec .tabArea .tabcontent .form-content .inputArea .phNumSplt .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: -4px
    }

    .headerBannerSec .tabArea .tabcontent .form-content .inputArea .phNumSplt .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: normal
    }

.headerBannerSec .tabArea .tabcontent .buttonRespon {
    display: none
}

@media (max-width: 480px) {
    .headerBannerSec .tabArea .tabcontent .buttonRespon {
        display: block
    }
}

.headerBannerSec .tabArea .tabcontent .buttonRespon button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: white;
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    display: flex;
    height: 40px;
    width: 100%;
    justify-content: center;
    align-items: center
}

.headerBannerSec .tabArea .tabcontent .buttonRespon a {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: white;
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    display: flex;
    height: 40px;
    width: 100%;
    justify-content: center;
    align-items: center
}

    .headerBannerSec .tabArea .tabcontent .buttonRespon a:hover {
        background-color: var(--theme-colour2)
    }

.headerBannerSec .tabArea .validateText {
    margin-top: 1px;
    font-size: 11px
}

.aboutSec {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative
}

@media (max-width: 1450px) {
    .aboutSec {
        background-position: left center
    }
}

.aboutSec::after {
    content: "";
    position: absolute;
    max-width: 420px;
    width: 100%;
    min-height: 600px;
    height: fit-content;
    bottom: 0;
    right: 0;
    background-image: url("../images/about-design.png");
    background-repeat: no-repeat
}

@media (max-width: 991px) {
    .aboutSec::after {
        display: none
    }
}

.aboutSec .gridDiv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
    padding: 100px 0 70px 0
}

@media (max-width: 1450px) {
    .aboutSec .gridDiv {
        padding: 70px 0 60px 0;
        grid-template-columns: 1fr 45%
    }
}

@media (max-width: 991px) {
    .aboutSec .gridDiv {
        grid-template-columns: 1fr
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv {
        padding: 43px 0 42px 0
    }
}

.aboutSec .gridDiv .textSec {
    grid-column: 2;
    max-width: 720px;
    width: 100%;
    color: var(--white)
}

@media (max-width: 991px) {
    .aboutSec .gridDiv .textSec {
        margin-left: auto;
        grid-column: 1
    }
}

.aboutSec .gridDiv .textSec .topSec {
    margin-bottom: 40px
}

@media (max-width: 1450px) {
    .aboutSec .gridDiv .textSec .topSec {
        margin-bottom: 30px
    }
}

@media (max-width: 1199px) {
    .aboutSec .gridDiv .textSec .topSec {
        margin-bottom: 25px
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv .textSec .topSec {
        margin-bottom: 20px
    }
}

.aboutSec .gridDiv .textSec .topSec h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 24px
}

@media (max-width: 1720px) {
    .aboutSec .gridDiv .textSec .topSec h2 {
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: 700;
        line-height: 30px
    }
}

@media (max-width: 1199px) {
    .aboutSec .gridDiv .textSec .topSec h2 {
        margin-bottom: 10px;
        font-size: 22px;
        font-weight: 700;
        line-height: 28px
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv .textSec .topSec h2 {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px
    }
}

.aboutSec .gridDiv .textSec .topSec p {
    text-align: start;
    margin: 0;
    color: var(--white);
    margin-bottom: 19px;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px
}

@media (max-width: 1720px) {
    .aboutSec .gridDiv .textSec .topSec p {
        margin-bottom: 25px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv .textSec .topSec p {
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px
    }
}

.aboutSec .gridDiv .textSec .topSec a {
    max-width: fit-content;
    width: 100%;
    min-height: 48px;
    color: var(--theme-text-colour);
    background-color: var(--white);
    padding: 13px 30px;
    border-radius: 8px
}

@media (max-width: 1450px) {
    .aboutSec .gridDiv .textSec .topSec a {
        min-height: 40px;
        padding: 8px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv .textSec .topSec a {
        font-size: 14px;
        font-weight: 400;
        line-height: 36px
    }
}

.aboutSec .gridDiv .textSec .btmSec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 635px;
    width: 100%
}

@media (max-width: 1199px) {
    .aboutSec .gridDiv .textSec .btmSec {
        gap: 15px
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv .textSec .btmSec {
        grid-template-columns: 1fr;
        gap: 10px
    }
}

.aboutSec .gridDiv .textSec .btmSec .singleCard {
    background: #696262ba 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 24px;
    opacity: 1;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    max-width: 308px;
    width: 100%;
    padding: 27px 35px
}

@media (max-width: 1720px) {
    .aboutSec .gridDiv .textSec .btmSec .singleCard {
        padding: 20px 30px;
        border-radius: 15px;
        min-height: 123px
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv .textSec .btmSec .singleCard {
        max-width: 100%
    }
}

.aboutSec .gridDiv .textSec .btmSec .singleCard h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 47px;
    margin-bottom: 7px
}

@media (max-width: 1720px) {
    .aboutSec .gridDiv .textSec .btmSec .singleCard h2 {
        font-size: 30px;
        font-weight: 600;
        line-height: 34px
    }
}

@media (max-width: 680px) {
    .aboutSec .gridDiv .textSec .btmSec .singleCard h2 {
        margin-bottom: 15px;
        font-size: 28px;
        font-weight: 600;
        line-height: 32px
    }
}

.aboutSec .gridDiv .textSec .btmSec .singleCard p {
    text-align: start;
    color: var(--white);
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px
}

@media (max-width: 1720px) {
    .aboutSec .gridDiv .textSec .btmSec .singleCard p {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px
    }
}

.searchSec {
    background-color: #F2F2F2;
    padding: 56px 0 34px
}

@media (max-width: 680px) {
    .searchSec {
        padding: 24px 0 20px
    }
}

.searchSec .searchSecArea {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #fff;
    border-radius: 8px;
    padding: 60px 40px
}

@media (max-width: 1199px) {
    .searchSec .searchSecArea {
        padding: 30px 20px
    }
}

@media (max-width: 767px) {
    .searchSec .searchSecArea {
        padding: 30px 15px;
        flex-direction: column
    }
}

.searchSec .searchSecArea .btnGroup {
    padding-left: 60px;
    margin-top: 62px
}

@media (max-width: 767px) {
    .searchSec .searchSecArea .btnGroup {
        margin-top: 0px;
        padding-left: 0px
    }
}

.searchSec .searchSecArea .btnGroup button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    background: var(--theme-colour1);
    width: 200px;
    height: 50px;
    padding: 3px 8px;
    border-radius: 10px
}

    .searchSec .searchSecArea .btnGroup button:hover {
        background-color: var(--theme-colour2)
    }

@media (max-width: 767px) {
    .searchSec .searchSecArea .btnGroup button {
        width: 170px;
        height: 40px
    }
}

.searchSec .searchSecArea .btnGroup a {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    background: var(--theme-colour1);
    width: 200px;
    height: 50px;
    padding: 3px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .searchSec .searchSecArea .btnGroup a:hover {
        background-color: var(--theme-colour2)
    }

@media (max-width: 767px) {
    .searchSec .searchSecArea .btnGroup a {
        width: 170px;
        height: 40px
    }
}

.searchSec .textSec {
    text-align: left
}

@media (max-width: 1720px) {
    .searchSec .textSec {
        margin-bottom: 20px
    }
}

@media (max-width: 1199px) {
    .searchSec .textSec {
        margin-bottom: 15px
    }
}

@media (max-width: 680px) {
    .searchSec .textSec {
        margin-bottom: 10px
    }
}

.searchSec .textSec h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 23px
}

@media (max-width: 1720px) {
    .searchSec .textSec h2 {
        margin-bottom: 18px;
        font-size: 24px;
        font-weight: 700;
        line-height: 30px
    }
}

@media (max-width: 1199px) {
    .searchSec .textSec h2 {
        margin-bottom: 12px
    }
}

@media (max-width: 680px) {
    .searchSec .textSec h2 {
        margin-bottom: 8px;
        font-size: 20px;
        font-weight: 700;
        line-height: 25px
    }
}

.searchSec .textSec p {
    text-align: left;
    width: 100%;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px
}

@media (max-width: 1720px) {
    .searchSec .textSec p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 680px) {
    .searchSec .textSec p {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px
    }
}

.searchSec .tabArea {
    max-width: 1352px;
    width: 100%;
    height: auto;
    margin: auto;
    background: #ffffff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
    border-radius: 19px;
    transform: none;
    margin-bottom: 34px
}

@media (max-width: 1366px) {
    .searchSec .tabArea {
        width: 85%;
        height: auto
    }
}

@media (max-width: 1024px) {
    .searchSec .tabArea {
        width: 85%;
        height: auto
    }
}

@media (max-width: 767px) {
    .searchSec .tabArea {
        width: 100%
    }
}

@media (max-width: 480px) {
    .searchSec .tabArea {
        border-radius: 9px
    }
}

@media (max-width: 375px) {
    .searchSec .tabArea {
        width: 95%;
        height: auto
    }
}

.searchSec .tabArea .tabcontent {
    display: none;
    border-top: none;
    margin: 0;
    padding: 30px
}

@media (max-width: 1450px) {
    .searchSec .tabArea .tabcontent {
        padding: 20px
    }
}

@media (max-width: 1024px) {
    .searchSec .tabArea .tabcontent {
        padding: 20px 15px;
        margin: 0
    }
}

.searchSec .tabArea .tabcontent .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0
}

.searchSec .tabArea .tabcontent .form-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    align-items: center
}

@media (max-width: 1199px) {
    .searchSec .tabArea .tabcontent .form-content {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 15px
    }
}

@media (max-width: 767px) {
    .searchSec .tabArea .tabcontent .form-content {
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        row-gap: 17px
    }
}

@media (max-width: 480px) {
    .searchSec .tabArea .tabcontent .form-content {
        grid-template-columns: 1fr 1fr;
        margin-top: 0
    }
}

.searchSec .tabArea .tabcontent .form-content .inputArea {
    display: inline-grid;
    background: #ffffff;
    box-shadow: none;
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    max-width: 250px;
    width: 100%;
    height: 64px;
    padding: 10px 16px;
    margin-bottom: 10px;
    position: relative
}

@media (max-width: 1199px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea {
        width: 100%
    }
}

@media (max-width: 767px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea {
        margin-bottom: 0
    }
}

@media (max-width: 480px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea {
        background: transparent;
        box-shadow: none;
        height: auto
    }
}

.searchSec .tabArea .tabcontent .form-content .inputArea input {
    border: none
}

.searchSec .tabArea .tabcontent .form-content .inputArea label {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    font-family: "Rubik";
    color: #444444;
    margin-bottom: 6px
}

@media (max-width: 480px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
        color: #000000
    }
}

.searchSec .tabArea .tabcontent .form-content .inputArea select {
    border: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #797373;
    border: none;
    margin-left: -4px;
    background-color: transparent
}

@media (max-width: 480px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea select {
        padding: 6px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        height: 37px
    }
}

.searchSec .tabArea .tabcontent .form-content .inputArea button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    background: var(--theme-colour1);
    width: 100%;
    height: auto;
    padding: 3px 8px;
    border-radius: 10px
}

    .searchSec .tabArea .tabcontent .form-content .inputArea button:hover {
        background-color: var(--theme-colour2)
    }

.searchSec .tabArea .tabcontent .form-content .inputArea.button {
    color: white;
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    width: 100%;
    height: 52px;
    max-width: 210px;
    padding: 0;
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 1199px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea.button {
        margin-left: 0;
        margin-right: 0
    }
}

@media (max-width: 767px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea.button {
        display: none
    }
}

.searchSec .tabArea .tabcontent .form-content .inputArea.button:hover {
    background: var(--theme-colour2)
}

.searchSec .tabArea .tabcontent .form-content .inputArea .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343
}

    .searchSec .tabArea .tabcontent .form-content .inputArea .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0
    }

.searchSec .tabArea .tabcontent .form-content .inputArea .select2-container {
    width: 100% !important
}

.searchSec .tabArea .tabcontent .form-content .inputArea .ageGrid {
    column-gap: 40px;
    grid-template-columns: 1fr 1fr
}

@media (max-width: 480px) {
    .searchSec .tabArea .tabcontent .form-content .inputArea .ageGrid {
        column-gap: 15px
    }
}

.searchSec .tabArea .tabcontent .form-content .inputArea .line {
    border-right: 1px solid #bcbbbb;
    position: absolute;
    width: 1px;
    background: black;
    height: 55%;
    inset: 0;
    margin: auto;
    top: 10px
}

.searchSec .tabArea .tabcontent .buttonRespon {
    display: none
}

@media (max-width: 767px) {
    .searchSec .tabArea .tabcontent .buttonRespon {
        display: block;
        max-width: 200px;
        width: 100%;
        margin-left: 0;
        margin: 0 auto;
        margin-top: 24px
    }
}

.searchSec .tabArea .tabcontent .buttonRespon button {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    color: white;
    display: flex;
    justify-content: center;
    background: var(--theme-colour1);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
    display: flex;
    height: 40px;
    width: 100%;
    justify-content: center;
    align-items: center
}

.searchSec .tabArea .validateText {
    margin-top: 1px;
    font-size: 11px
}

.searchSec hr {
    margin: 0;
    background-color: #C7C7C7
}

@media (max-width: 680px) {
    .searchSec hr {
        display: none
    }
}

.featuredProfileSec {
    background-color: #F2F2F2;
    padding-bottom: 41px
}

    .featuredProfileSec .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 25px;
        font-size: 22px
    }

@media (max-width: 480px) {
    .featuredProfileSec .header {
        display: block
    }
}

.featuredProfileSec .header .left-contenttitle {
    font-size: 35px;
    font-weight: 700;
    line-height: 42px;
    font-family: Rubik;
    color: #000000;
    margin-left: 0
}

@media (max-width: 1720px) {
    .featuredProfileSec .header .left-contenttitle {
        font-size: 25px;
        font-weight: 700;
        line-height: 25px
    }
}

@media (max-width: 1199px) {
    .featuredProfileSec .header .left-contenttitle {
        font-size: 24px;
        font-weight: 700;
        line-height: 25px
    }
}

@media (max-width: 680px) {
    .featuredProfileSec .header .left-contenttitle {
        font-size: 20px;
        font-weight: 700;
        line-height: 25px
    }
}

.featuredProfileSec .header .left-contenttitle span {
    color: var(--theme-colour1)
}

@media (max-width: 991px) {
    .featuredProfileSec .header .viewMore {
        display: none
    }
}

.featuredProfileSec .header .viewMore a {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--theme-colour1)
}

    .featuredProfileSec .header .viewMore a svg path {
        fill: var(--theme-colour1)
    }

.featuredProfileSec .owl-carouselFirst {
    display: flex
}

.featuredProfileSec .wrapperImg {
    min-width: 252px;
    width: 100%;
    min-height: 370px;
    height: fit-content;
    position: relative
}

@media (max-width: 1450px) {
    .featuredProfileSec .wrapperImg {
        min-width: 225px;
        min-height: 360px
    }
}

@media (max-width: 767px) {
    .featuredProfileSec .wrapperImg {
        min-height: 350px
    }
}

@media (max-width: 680px) {
    .featuredProfileSec .wrapperImg {
        min-height: 320px
    }
}

@media (max-width: 1024px) {
    .featuredProfileSec .wrapperImg:hover img {
        transform: none
    }
}

.featuredProfileSec .wrapperImg:hover .details .fullSize {
    display: grid;
    z-index: 999;
    transform: none
}

.featuredProfileSec .wrapperImg:hover .details .viewprofile {
    display: flex
}

.featuredProfileSec .wrapperImg .pic {
    overflow: hidden;
    display: flex;
    width: 252px;
    -webkit-transform-style: preserve-3d;
    height: 321px;
    object-fit: cover;
    max-height: fit-content;
    border-radius: 16px
}

    .featuredProfileSec .wrapperImg .pic img {
        width: 100%;
        object-fit: cover
    }

.featuredProfileSec .wrapperImg .footername {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    font-family: Rubik;
    margin-top: 7px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    color: #313131
}

.featuredProfileSec .wrapperImg .namecode {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    font-family: Rubik;
    margin-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    color: #000000
}

.featuredProfileSec .wrapperImg .details {
    position: absolute;
    width: 100%;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    bottom: 0;
    opacity: 1;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    border: 1px solid #EFEFEF;
    padding: 10px;
    z-index: 999;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.08)
}

    .featuredProfileSec .wrapperImg .details .namesection {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px
    }

        .featuredProfileSec .wrapperImg .details .namesection .name {
            color: var(--theme-colour1);
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            font-family: Rubik;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100px
        }

    .featuredProfileSec .wrapperImg .details .fullSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        display: none
    }

        .featuredProfileSec .wrapperImg .details .fullSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .featuredProfileSec .wrapperImg .details .fullSize li span {
                width: 16px;
                margin-right: 6px
            }

    .featuredProfileSec .wrapperImg .details .smlSize {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

        .featuredProfileSec .wrapperImg .details .smlSize li {
            color: #4D4D4D;
            font-size: 14px;
            font-weight: 400;
            line-height: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 5px
        }

            .featuredProfileSec .wrapperImg .details .smlSize li span {
                width: 16px;
                margin-right: 6px
            }

    .featuredProfileSec .wrapperImg .details .viewprofile {
        color: var(--white);
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        width: 100px;
        height: 32px;
        background: var(--theme-colour1);
        border-radius: 7px;
        margin: auto;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease-in-out;
        margin-left: 0;
        display: none
    }

        .featuredProfileSec .wrapperImg .details .viewprofile:hover {
            background: var(--theme-colour2)
        }

        .featuredProfileSec .wrapperImg .details .viewprofile a {
            color: var(--white)
        }

.SuccessStoriesSec .sucessGridSec {
    display: grid;
    grid-template-columns: 41% 1fr;
    padding: 70px 0;
    gap: 6.25rem;
    overflow: hidden
}

@media (max-width: 1450px) {
    .SuccessStoriesSec .sucessGridSec {
        gap: 80px;
        padding: 60px 0
    }
}

@media (max-width: 1199px) {
    .SuccessStoriesSec .sucessGridSec {
        gap: 60px
    }
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec {
        padding: 38px 0 60px 0;
        gap: 0;
        grid-template-columns: 1fr
    }
}

.SuccessStoriesSec .sucessGridSec .gridLSec {
    display: grid
}

    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap {
        max-width: 645px;
        width: 100%;
        margin: auto 0
    }

        .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h2 {
            font-size: 40px;
            font-weight: 600;
            line-height: 47px;
            margin-bottom: 42px
        }

@media (max-width: 1720px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h2 {
        margin-bottom: 28px;
        font-size: 35px;
        font-weight: 600;
        line-height: 40px
    }
}

@media (max-width: 1450px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h2 {
        margin-bottom: 22px;
        font-size: 30px;
        font-weight: 600;
        line-height: 35px
    }
}

@media (max-width: 1199px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h2 {
        margin-bottom: 20px;
        font-size: 25px;
        font-weight: 600;
        line-height: 30px
    }
}

@media (max-width: 680px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h2 {
        margin-bottom: 18px;
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

.SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h3 {
    max-width: 404px;
    width: 100%;
    margin-bottom: 28px;
    font-size: 40px;
    font-weight: 400;
    line-height: 47px
}

@media (max-width: 1720px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h3 {
        margin-bottom: 21px;
        font-size: 35px;
        font-weight: 400;
        line-height: 40px
    }
}

@media (max-width: 1450px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h3 {
        margin-bottom: 15px;
        font-size: 30px;
        font-weight: 400;
        line-height: 35px
    }
}

@media (max-width: 1199px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h3 {
        margin-bottom: 12px;
        font-size: 25px;
        font-weight: 400;
        line-height: 30px
    }
}

@media (max-width: 680px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap h3 {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 400;
        line-height: 33px
    }
}

.SuccessStoriesSec .sucessGridSec .gridLSec .textWrap p {
    text-align: start;
    margin: 0 0 35px 0;
    font-size: 21px;
    font-weight: 400;
    line-height: 25px
}

@media (max-width: 1720px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap p {
        font-size: 18px;
        font-weight: 400;
        line-height: 27px
    }
}

@media (max-width: 1450px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 1199px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap p {
        font-size: 16px;
        font-weight: 400;
        line-height: 25px
    }
}

@media (max-width: 680px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap p {
        margin-bottom: 35px;
        font-size: 14px;
        font-weight: 400;
        line-height: 25px
    }
}

.SuccessStoriesSec .sucessGridSec .gridLSec .textWrap a {
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    color: #ffffff;
    background: var(--theme-colour1);
    width: 100%;
    height: auto;
    padding: 14px 35px;
    background: transparent linear-gradient(180deg, var(--theme-colour1) 0%, var(--theme-colour2) 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 10px #00000026;
    border-radius: 8px
}

@media (max-width: 1450px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap a {
        font-size: 16px;
        line-height: 24px
    }
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .gridLSec .textWrap a {
        display: none
    }
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec {
        display: grid;
        place-items: center
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec {
    max-width: 730px;
    width: 100%;
    height: 610px
}

@media (max-width: 1599px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec {
        max-width: 625px;
        height: 600px
    }
}

@media (max-width: 1450px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec {
        max-width: 575px;
        height: 550px
    }
}

@media (max-width: 1366px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec {
        max-width: 540px;
        height: 520px
    }
}

@media (max-width: 1199px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec {
        max-width: 450px;
        height: 450px
    }
}

@media (max-width: 680px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec {
        max-width: 300px;
        height: 350px
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv {
    width: 100%;
    max-width: 771px;
    width: 100%;
    min-height: 620px;
    height: 100%;
    border-radius: 53px
}

@media (max-width: 1599px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv {
        min-height: 290px
    }
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv {
        border-radius: 24px;
        padding: 10px
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    height: 100%;
    border-radius: 40px;
    padding: 44px 65px;
    position: relative;
    z-index: 1
}

@media (max-width: 1199px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv {
        padding: 40px 50px
    }
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv {
        padding: 40px;
        border-radius: 18px;
        background-position: center top
    }
}

@media (max-width: 680px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv {
        padding: 20px;
        background-position: center top
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 40px;
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
    background: linear-gradient(0deg, #000 0%, transparent 45%)
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv::after {
        border-radius: 18px
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap h2 {
    color: var(--white);
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    margin-bottom: 19px
}

@media (max-width: 1720px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap h2 {
        margin-bottom: 12px;
        font-size: 22px;
        font-weight: 500;
        line-height: 25px
    }
}

@media (max-width: 1199px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap h2 {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 500;
        line-height: 25px
    }
}

@media (max-width: 680px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap h2 {
        margin-bottom: 13px;
        font-size: 16px;
        font-weight: 500;
        line-height: 19px
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap p {
    text-align: start;
    color: var(--white);
    font-size: 21px;
    font-weight: 400;
    line-height: 25px;
    margin: 0
}

@media (max-width: 1720px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap p {
        font-size: 18px;
        font-weight: 400;
        line-height: 26px
    }
}

@media (max-width: 1450px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 680px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv .innerDiv .textWrap p {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv.swiper-slide {
    background-color: #FFF8F8;
    padding: 20px
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv.swiper-slide {
        padding: 10px
    }
}

.SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv.swiper-slide-active {
    background-color: var(--white);
    padding: 20px;
    box-shadow: 0px 2px 47px #00000029
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .gridRSec .swiperSec .outterDiv.swiper-slide-active {
        padding: 10px
    }
}

.SuccessStoriesSec .sucessGridSec .responsiveBtn {
    display: none
}

@media (max-width: 991px) {
    .SuccessStoriesSec .sucessGridSec .responsiveBtn {
        border: none;
        display: block;
        background-color: transparent;
        font-size: 18px;
        font-weight: 600;
        line-height: 21px;
        text-align: center;
        color: #ffffff;
        background: var(--theme-colour1);
        width: 100%;
        height: auto;
        padding: 14px 35px;
        background: transparent linear-gradient(180deg, var(--theme-colour1) 0%, #033F62 100%) 0% 0% no-repeat padding-box;
        box-shadow: 0px 0px 10px #00000026;
        border-radius: 8px;
        max-width: 275px;
        margin: 0 auto;
        margin-top: 19px
    }
}

.accordionSec {
    background-color: var(--theme-colour1);
    padding: 53px 0 55px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh !important;
    max-height: 100vh !important;
    display: grid;
    place-items: center
}

@media (max-width: 1720px) {
    .accordionSec {
        display: block;
        height: auto !important;
        max-height: fit-content !important
    }
}

@media (max-width: 680px) {
    .accordionSec {
        padding: 25px 0 30px 0
    }
}

.accordionSec h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 47px;
    margin-bottom: 15px;
    color: var(--white);
    text-align: center
}

@media (max-width: 1720px) {
    .accordionSec h2 {
        font-size: 30px;
        font-weight: 600;
        line-height: 40px
    }
}

@media (max-width: 1199px) {
    .accordionSec h2 {
        font-size: 25px;
        font-weight: 600;
        line-height: 35px
    }
}

@media (max-width: 680px) {
    .accordionSec h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 25px
    }
}

.accordionSec .wrapSec {
    background: var(--white);
    border-radius: 44px;
    max-width: 1458px;
    width: 100%;
    margin: 0 auto
}

@media (max-width: 1720px) {
    .accordionSec .wrapSec {
        max-width: 1150px;
        border-radius: 25px
    }
}

@media (max-width: 1450px) {
    .accordionSec .wrapSec {
        max-width: 1000px;
        border-radius: 25px
    }
}

@media (max-width: 991px) {
    .accordionSec .wrapSec {
        border-radius: 24px
    }
}

.accordionSec .wrapSec .innerWrap {
    padding: 40px 47px
}

@media (max-width: 1450px) {
    .accordionSec .wrapSec .innerWrap {
        padding: 35px 40px
    }
}

@media (max-width: 1199px) {
    .accordionSec .wrapSec .innerWrap {
        padding: 26px 32px 15px 32px
    }
}

@media (max-width: 680px) {
    .accordionSec .wrapSec .innerWrap {
        padding: 24px 14px
    }
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec {
    overflow: hidden
}

    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #707070;
        margin-bottom: 24px;
        padding-bottom: 20px
    }

@media (max-width: 480px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv {
        margin-bottom: 18px;
        padding-bottom: 15px
    }
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h2 {
        margin-bottom: 0;
        color: #000000;
        transition: 0.4s ease-in;
        font-size: 32px;
        font-weight: 500;
        line-height: 38px
    }

@media (max-width: 1720px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h2 {
        font-size: 25px;
        font-weight: 700;
        line-height: 25px
    }
}

@media (max-width: 1199px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h2 {
        font-size: 22px;
        font-weight: 700;
        line-height: 25px
    }
}

@media (max-width: 680px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 25px
    }
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h3 {
    transition: 0.4s ease-in;
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px
}

@media (max-width: 1720px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 991px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h3 {
        max-width: 10ch;
        width: 100%;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

@media (max-width: 680px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .flexDiv h3 {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px
    }
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv {
    background-color: #F8F8F8;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin-top: 20px;
    gap: 20px
}

@media (max-width: 991px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv {
        flex-direction: column;
        gap: 12px
    }
}

@media (max-width: 480px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv {
        margin-top: 10px;
        padding: 10px
    }
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv .imgDiv {
    max-width: 250px;
    width: 100%;
    height: auto
}

@media (max-width: 1199px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv .imgDiv {
        max-width: 200px
    }
}

@media (max-width: 480px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv .imgDiv {
        max-width: 150px
    }
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv .imgDiv img {
    width: 100%;
    height: auto
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv p {
    text-align: start;
    max-width: 856px;
    width: 100%;
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px
}

@media (max-width: 1720px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 991px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv p {
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

@media (max-width: 680px) {
    .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv .innerDiv p {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px
    }
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv:hover .flexDiv h2, .accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv:hover .flexDiv h3 {
    color: var(--theme-colour2)
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec:last-child .innerDiv {
    margin-bottom: 0
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec .outterDiv [role="region"] {
    display: none
}

.accordionSec .wrapSec .innerWrap .accordionSingleSec:first-child .outterDiv .region {
    display: flex
}

.appstoreSec {
    background-color: #F5F7F9;
    padding: 65px 0 25px 0
}

    .appstoreSec .application {
        display: grid;
        grid-template-columns: 46% 1fr;
        column-gap: 30px
    }

@media (max-width: 991px) {
    .appstoreSec .application {
        grid-template-columns: 1fr
    }
}

.appstoreSec .application .left {
    max-width: 720px;
    width: 100%;
    position: relative;
    margin-left: auto
}

@media (max-width: 1720px) {
    .appstoreSec .application .left {
        max-width: 660px
    }
}

@media (max-width: 991px) {
    .appstoreSec .application .left {
        margin-right: auto
    }
}

.appstoreSec .application .left img {
    width: 100%;
    height: auto
}

.appstoreSec .application .left .phn {
    position: relative;
    z-index: 1
}

@media (max-width: 1450px) {
    .appstoreSec .application .left .phn {
        max-width: 480px;
        margin: 0 auto
    }
}

.appstoreSec .application .left .circle {
    position: absolute;
    left: -150px;
    width: fit-content;
    z-index: 0;
    top: 0
}

@media (max-width: 1450px) {
    .appstoreSec .application .left .circle {
        max-width: 550px;
        top: -12px;
        width: 100%;
        left: -35px
    }
}

@media (max-width: 680px) {
    .appstoreSec .application .left .circle {
        max-width: 530px
    }
}

.appstoreSec .application .right {
    max-width: 733px;
    width: 100%;
    margin: 0 auto
}

@media (max-width: 1450px) {
    .appstoreSec .application .right {
        display: grid;
        place-items: center
    }
}

@media (max-width: 991px) {
    .appstoreSec .application .right {
        margin: 0;
        margin-right: auto
    }
}

.appstoreSec .application .right .gridWrapper .headlabel {
    font-size: 40px;
    font-weight: 600;
    line-height: 55px;
    color: var(--theme-colour1);
    margin-top: 82px;
    margin-bottom: 47px
}

@media (max-width: 1720px) {
    .appstoreSec .application .right .gridWrapper .headlabel {
        margin-bottom: 25px;
        margin-top: 30px;
        font-size: 35px;
        font-weight: 600;
        line-height: 45px
    }
}

@media (max-width: 1199px) {
    .appstoreSec .application .right .gridWrapper .headlabel {
        margin-bottom: 30px;
        font-size: 30px;
        font-weight: 600;
        line-height: 35px
    }
}

@media (max-width: 680px) {
    .appstoreSec .application .right .gridWrapper .headlabel {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px
    }
}

@media (max-width: 480px) {
    .appstoreSec .application .right .gridWrapper .headlabel {
        display: none;
        margin-top: 0px;
        text-align: center;
        color: #313131;
        margin: 15px 0px
    }
}

.appstoreSec .application .right .gridWrapper .star svg {
    margin-right: 24px;
    width: 40px;
    height: 40px
}

@media (max-width: 680px) {
    .appstoreSec .application .right .gridWrapper .star svg {
        margin-right: 20px;
        width: 24px;
        height: 24px
    }
}

@media (max-width: 480px) {
    .appstoreSec .application .right .gridWrapper .star {
        display: none
    }
}

.appstoreSec .application .right .gridWrapper .labelcontent {
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    color: #000000;
    max-width: 585px;
    width: 100%;
    margin: 33px 0
}

@media (max-width: 1450px) {
    .appstoreSec .application .right .gridWrapper .labelcontent {
        margin: 20px 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        max-width: 450px;
        width: 100%
    }
}

@media (max-width: 1199px) {
    .appstoreSec .application .right .gridWrapper .labelcontent {
        margin: 20px 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 24px
    }
}

@media (max-width: 680px) {
    .appstoreSec .application .right .gridWrapper .labelcontent {
        margin: 15px 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px
    }
}

.appstoreSec .application .right .gridWrapper .qucklink {
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    color: #000000;
    margin-bottom: 65px
}

@media (max-width: 1720px) {
    .appstoreSec .application .right .gridWrapper .qucklink {
        margin-bottom: 45px
    }
}

@media (max-width: 1199px) {
    .appstoreSec .application .right .gridWrapper .qucklink {
        margin-bottom: 35px
    }
}

@media (max-width: 680px) {
    .appstoreSec .application .right .gridWrapper .qucklink {
        margin-bottom: 20px
    }
}

@media (max-width: 480px) {
    .appstoreSec .application .right .gridWrapper .qucklink {
        text-align: center
    }
}

.appstoreSec .application .right .gridWrapper .qucklink .link {
    display: flex;
    gap: 10px
}

@media (max-width: 480px) {
    .appstoreSec .application .right .gridWrapper .qucklink .link {
        display: block
    }
}

.appstoreSec .application .right .gridWrapper .qucklink .link img {
    margin-right: 10px;
    cursor: pointer;
    max-width: 231px;
    height: auto;
    width: 100%
}

@media (max-width: 480px) {
    .appstoreSec .application .right .gridWrapper .qucklink .link img {
        width: 40%
    }
}

.appstoreSec .application .right .gridWrapper .download {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #000000;
    margin-bottom: 10px
}

@media (max-width: 680px) {
    .appstoreSec .application .right .gridWrapper .download {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px
    }
}

.appstoreSec .application .right .gridWrapper .downloadlink {
    box-sizing: border-box;
    margin-top: 11px;
    max-width: 450px;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    background: #eeeeee;
    border: .5008px solid #DDDDDD;
    border-radius: 10px
}

@media (max-width: 680px) {
    .appstoreSec .application .right .gridWrapper .downloadlink {
        height: 40px
    }
}

@media (max-width: 480px) {
    .appstoreSec .application .right .gridWrapper .downloadlink {
        margin-bottom: 30px
    }
}

.appstoreSec .application .right .gridWrapper .downloadlink .send {
    width: 120px;
    min-width: 120px;
    height: 100%;
    color: var(--white);
    background: var(--theme-colour1);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer
}

@media (max-width: 767px) {
    .appstoreSec .application .right .gridWrapper .downloadlink .send {
        margin-left: auto
    }
}

.appstoreSec .application .right .gridWrapper .downloadlink .send:hover {
    background: var(--theme-colour2);
    color: var(--white)
}

.appstoreSec .application .right .gridWrapper .downloadlink .send button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 21px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0.11em;
    color: #ffffff
}

.appstoreSec .application .right .gridWrapper .downloadlink .phone {
    width: 100%;
    height: 100%
}

    .appstoreSec .application .right .gridWrapper .downloadlink .phone input {
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        height: 100%;
        letter-spacing: 0.11em;
        border: none;
        background-color: var(--white);
        color: #8d8d8d;
        outline: none;
        padding: 16px 0px 16px 12px;
        width: 100%
    }

.appstoreSec .application .right .gridWrapper .downloadlink .countrycode {
    padding: 16px 40px 16px 9px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #DDDDDD;
    height: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    background-color: var(--white);
    background-color: white;
    border-radius: 10px 0 0 10px
}

@media (max-width: 991px) {
    .appstoreSec .application .right .gridWrapper .downloadlink .countrycode {
        padding: 16px 15px 16px 9px
    }
}

.commercialsSec {
    position: relative;
    padding: 60px 0 57px 0;
    overflow: hidden
}

@media (max-width: 1720px) {
    .commercialsSec {
        padding: 50px 0 47px 0
    }
}

@media (max-width: 1199px) {
    .commercialsSec {
        padding: 45px 0 37px 0
    }
}

@media (max-width: 991px) {
    .commercialsSec {
        padding: 38px 0 25px 0
    }
}

.commercialsSec::after {
    content: "";
    position: absolute;
    max-width: 460px;
    width: 100%;
    height: 280px;
    bottom: -5px;
    left: -170px;
    background-image: url("../images/bottom-left.svg");
    background-repeat: no-repeat;
    z-index: -1
}

@media (max-width: 991px) {
    .commercialsSec::after {
        left: -200px;
        bottom: -100px
    }
}

.commercialsSec::before {
    content: "";
    position: absolute;
    max-width: 300px;
    width: 100%;
    height: 280px;
    top: 0;
    right: 0;
    background-image: url("../images/top-right.svg");
    background-repeat: no-repeat;
    z-index: -1
}

@media (max-width: 991px) {
    .commercialsSec::before {
        max-width: 120px
    }
}

.commercialsSec a {
    display: block;
    max-width: 1288px;
    width: 100%;
    position: relative;
    margin: 0 auto
}

    .commercialsSec a .videoPic {
        position: relative;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        border-radius: 78px;
        min-height: 610px;
        height: 100%;
        width: 100%
    }

@media (max-width: 1720px) {
    .commercialsSec a .videoPic {
        margin: 0 auto;
        border-radius: 38px
    }
}

@media (max-width: 1450px) {
    .commercialsSec a .videoPic {
        min-height: 550px;
        max-width: 1000px
    }
}

@media (max-width: 1366px) {
    .commercialsSec a .videoPic {
        min-height: 520px
    }
}

@media (max-width: 1199px) {
    .commercialsSec a .videoPic {
        min-height: 475px;
        border-radius: 24px
    }
}

@media (max-width: 991px) {
    .commercialsSec a .videoPic {
        min-height: 350px
    }
}

@media (max-width: 680px) {
    .commercialsSec a .videoPic {
        min-height: 300px
    }
}

@media (max-width: 480px) {
    .commercialsSec a .videoPic {
        min-height: 250px
    }
}

.commercialsSec a .videoPic::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 78px;
    left: 0;
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
    background: linear-gradient(0deg, #000 0%, transparent 45%)
}

@media (max-width: 1720px) {
    .commercialsSec a .videoPic::after {
        border-radius: 38px
    }
}

@media (max-width: 1199px) {
    .commercialsSec a .videoPic::after {
        border-radius: 24px;
        min-height: 475px;
        height: 100%
    }
}

@media (max-width: 991px) {
    .commercialsSec a .videoPic::after {
        min-height: 350px
    }
}

@media (max-width: 680px) {
    .commercialsSec a .videoPic::after {
        min-height: 300px
    }
}

@media (max-width: 480px) {
    .commercialsSec a .videoPic::after {
        min-height: 250px
    }
}

.commercialsSec a h2 {
    position: absolute;
    inset: 0;
    margin: auto 80px 70px;
    max-width: fit-content;
    width: 100%;
    height: max-content;
    color: var(--white);
    font-size: 36px;
    font-weight: 400;
    line-height: 43px
}

@media (max-width: 1720px) {
    .commercialsSec a h2 {
        font-size: 25px;
        font-weight: 400;
        line-height: 35px
    }
}

@media (max-width: 1450px) {
    .commercialsSec a h2 {
        margin: auto 170px 30px
    }
}

@media (max-width: 1199px) {
    .commercialsSec a h2 {
        margin: auto 30px 30px;
        font-size: 22px;
        font-weight: 400;
        line-height: 30px
    }
}

@media (max-width: 680px) {
    .commercialsSec a h2 {
        font-size: 20px;
        font-weight: 400;
        line-height: 25px;
        margin: auto 24px 50px
    }
}

.commercialsSec .playIcn .playIcnBg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    background: #4341412e 0% 0% no-repeat padding-box;
    opacity: 1;
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100px;
    width: 100%;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer
}

@media (max-width: 1450px) {
    .commercialsSec .playIcn .playIcnBg {
        max-width: 70px;
        height: 70px
    }
}

@media (max-width: 1199px) {
    .commercialsSec .playIcn .playIcnBg {
        max-width: 50px;
        height: 50px
    }
}

@media (max-width: 991px) {
    .commercialsSec .playIcn .playIcnBg {
        max-width: 40px;
        height: 40px
    }
}

.commercialsSec .videoSec .playIcn img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

@media (max-width: 1199px) {
    .commercialsSec .videoSec .playIcn img {
        width: 14px;
        height: 14px
    }
}

.btn-whatsapp-pulse-border.landingPageBtn {
    right: 125px
}

@media (max-width: 1720px) {
    .btn-whatsapp-pulse-border.landingPageBtn {
        right: 20px
    }
}

@media (max-width: 991px) {
    .btn-whatsapp-pulse-border.landingPageBtn img {
        width: 40px;
        height: 40px
    }
}

.footer-widget {
    padding-bottom: 24px;
    background-color: #F2F2F2;
    z-index: 1;
    position: relative
}

    .footer-widget .footer-content-row {
        max-width: 275px
    }

@media (max-width: 1024px) {
    .footer-widget .footer-content-row {
        max-width: 50%
    }
}

@media (max-width: 991px) {
    .footer-widget .footer-content-row {
        max-width: 100%;
        text-align: center
    }
}

.footer-widget .footer-content-row a {
    display: inline-block;
    margin-bottom: 25px
}

.footer-widget .footer-content-row p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #F3F3F3
}

@media (max-width: 767px) {
    .footer-widget .footer-content-row p {
        font-size: 12px
    }
}

.footer-widget .quickLinks {
    padding-top: 37px;
    flex: 1;
    display: flex
}

@media (max-width: 480px) {
    .footer-widget .quickLinks {
        display: none
    }
}

@media (max-width: 1024px) {
    .footer-widget .quickLinks {
        flex: 100%;
        order: -1;
        margin-bottom: 30px;
        border-bottom: solid 1px #859fb682
    }
}

@media (max-width: 991px) {
    .footer-widget .quickLinks {
        flex-wrap: wrap
    }
}

.footer-widget .quickLinks .hiddenDiv {
    display: flex;
    width: 100%
}

@media (max-width: 480px) {
    .footer-widget .quickLinks .hiddenDiv {
        display: none
    }
}

.footer-widget .quickLinks .hiddenDiv .footer-navigation-col {
    display: flex;
    flex-direction: column;
    max-width: 33.33%;
    width: 33.33%;
    flex: 33.33%
}

    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col .topMargin {
        margin-top: 40px
    }

@media (max-width: 1199px) {
    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col {
        padding-left: 20px
    }
}

@media (max-width: 1024px) {
    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col {
        padding-left: 0
    }
}

@media (max-width: 991px) {
    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col {
        max-width: 100%;
        width: 100%;
        flex: 100%;
        flex-wrap: wrap;
        margin-bottom: 15px
    }
}

.footer-widget .quickLinks .hiddenDiv .footer-navigation-col strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #252525;
    width: 100%;
    display: block;
    margin-bottom: 26px
}

@media (max-width: 1199px) {
    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col strong {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col strong {
        margin-bottom: 15px
    }
}

.footer-widget .quickLinks .hiddenDiv .footer-navigation-col a {
    color: #494949;
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    margin-bottom: 20px;
    transition: ease-in-out .4s
}

@media (max-width: 1199px) {
    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col a {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .quickLinks .hiddenDiv .footer-navigation-col a {
        margin-bottom: 10px;
        margin-right: 12px
    }
}

.footer-widget .quickLinks .hiddenDiv .footer-navigation-col a:hover {
    color: var(--theme-colour1)
}

.footer-widget .quickLinks .footer-navigation-col {
    display: flex;
    flex-direction: column;
    max-width: 33.33%;
    width: 33.33%;
    flex: 33.33%
}

@media (max-width: 480px) {
    .footer-widget .quickLinks .footer-navigation-col {
        display: inline
    }
}

.footer-widget .quickLinks .footer-navigation-col .topMargin {
    margin-top: 40px
}

@media (max-width: 480px) {
    .footer-widget .quickLinks .footer-navigation-col .topMargin {
        margin-top: 0px;
        margin-left: 0px
    }
}

@media (max-width: 1199px) {
    .footer-widget .quickLinks .footer-navigation-col {
        padding-left: 20px
    }
}

@media (max-width: 1024px) {
    .footer-widget .quickLinks .footer-navigation-col {
        padding-left: 0
    }
}

@media (max-width: 991px) {
    .footer-widget .quickLinks .footer-navigation-col {
        max-width: 100%;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 15px
    }
}

@media (min-width: 992px) {
    .footer-widget .quickLinks .footer-navigation-col.footer-navigation-col2 {
        width: 360px;
        max-width: 100%;
        flex: auto
    }
}

@media (min-width: 992px) {
    .footer-widget .quickLinks .footer-navigation-col.footer-navigation-col3 {
        width: 270px;
        max-width: 100%;
        flex: auto
    }
}

.footer-widget .quickLinks .footer-navigation-col strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #252525;
    width: 100%;
    display: block;
    margin-bottom: 26px
}

@media (max-width: 1199px) {
    .footer-widget .quickLinks .footer-navigation-col strong {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .quickLinks .footer-navigation-col strong {
        margin-bottom: 15px;
        font-size: 18px
    }
}

.footer-widget .quickLinks .footer-navigation-col a {
    color: #494949;
    display: block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    margin-bottom: 20px;
    transition: ease-in-out .4s
}

@media (max-width: 1199px) {
    .footer-widget .quickLinks .footer-navigation-col a {
        font-size: 16px
    }
}

@media (max-width: 991px) {
    .footer-widget .quickLinks .footer-navigation-col a {
        margin-bottom: 10px;
        margin-right: 12px;
        font-size: 18px
    }
}

.footer-widget .quickLinks .footer-navigation-col a:hover {
    color: var(--theme-colour1)
}

.footer-widget .footerLink {
    display: none
}

@media (max-width: 480px) {
    .footer-widget .footerLink {
        display: block;
        margin-bottom: 20px;
        padding-top: 20px
    }
}

.footer-widget .footerLink .heading {
    font-size: 16px;
    font-weight: 700;
    line-height: 0px;
    color: #252525;
    padding: 18px 0px 13px 0px
}

.footer-widget .footerLink .connectionLinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px
}

    .footer-widget .footerLink .connectionLinks .left {
        padding: 0px 0px 16px 0px
    }

        .footer-widget .footerLink .connectionLinks .left a {
            font-size: 14px;
            font-weight: 400;
            line-height: 245.18%;
            color: #494949;
            margin-bottom: 0;
            display: block
        }

    .footer-widget .footerLink .connectionLinks .right a {
        font-size: 14px;
        font-weight: 400;
        line-height: 245.18%;
        color: #494949;
        margin-bottom: 0;
        display: block
    }

.footer-widget .footerLink .footerDrop {
    margin-bottom: 20px
}

    .footer-widget .footerLink .footerDrop .footerhead {
        color: #252525;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 16px;
        transition: ease-in-out .4s
    }

        .footer-widget .footerLink .footerDrop .footerhead.active svg {
            transform: rotate(0deg) !important
        }

        .footer-widget .footerLink .footerDrop .footerhead svg {
            transform: rotate(180deg)
        }

@media (max-width: 767px) {
    .footer-widget .footerLink .footerDrop .footerhead {
        font-size: 14px
    }
}

.footer-widget .footerLink .footerDropdown {
    display: none;
    width: 100%;
    margin-bottom: 21px
}

@media (max-width: 480px) {
    .footer-widget .footerLink .footerDropdown {
        display: block
    }
}

.footer-widget .footerLink .footerDropdown .inputArea {
    display: flex;
    justify-content: space-between;
    width: 100%
}

    .footer-widget .footerLink .footerDropdown .inputArea label {
        font-size: 16px;
        font-weight: 700;
        line-height: 2;
        color: #252525
    }

@media (max-width: 767px) {
    .footer-widget .footerLink .footerDropdown .inputArea label {
        font-size: 14px
    }
}

.footer-widget .footerLink .footerDropdown .inputArea select {
    border: none;
    background: transparent
}

.footer-widget .footerLink .footerDropdown .inputArea #qksbmitfrm {
    width: 159px;
    height: 43px
}

.footer-widget .footer-media-row {
    padding-top: 22px;
    max-width: 295px
}

@media (max-width: 1024px) {
    .footer-widget .footer-media-row {
        max-width: 50%;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-end
    }
}

@media (max-width: 991px) {
    .footer-widget .footer-media-row {
        max-width: 100%;
        width: 100%;
        align-items: center
    }
}

@media (max-width: 480px) {
    .footer-widget .footer-media-row {
        overflow: hidden
    }
}

.footer-widget .footer-media-row .contact-button {
    position: relative
}

    .footer-widget .footer-media-row .contact-button .call-icon {
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 17px;
        left: 15px;
        cursor: pointer
    }

    .footer-widget .footer-media-row .contact-button .contact-number {
        position: absolute;
        right: 38px;
        top: 14px;
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
        color: #F3F3F3;
        cursor: pointer
    }

@media (max-width: 767px) {
    .footer-widget .footer-media-row .contact-button .contact-number {
        font-size: 18px
    }
}

.footer-widget .footer-media-row .contact-button .call-label {
    position: absolute;
    text-transform: uppercase;
    right: 70px;
    bottom: 21px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #F3F3F3;
    cursor: pointer
}

@media (max-width: 767px) {
    .footer-widget .footer-media-row .contact-button .call-label {
        font-size: 12px
    }
}

.footer-widget .footer-media-row .media-link-row {
    padding-top: 25px;
    display: flex;
    justify-content: center
}

    .footer-widget .footer-media-row .media-link-row .media-link {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #859fb6;
        margin: 0 6px;
        border-radius: 50%;
        transition: ease-in-out .4s
    }

        .footer-widget .footer-media-row .media-link-row .media-link:hover {
            background-color: #5ca6e8
        }

.footer-widget hr {
    margin: 8px 0
}

.footer-widget .socialMedia {
    margin-top: 15px
}

    .footer-widget .socialMedia .icon {
        display: flex;
        justify-content: end
    }

@media (max-width: 480px) {
    .footer-widget .socialMedia .icon {
        justify-content: start;
        flex-wrap: wrap
    }
}

.footer-widget .socialMedia .icon svg {
    margin-right: 20px;
    cursor: pointer
}

@media (max-width: 480px) {
    .footer-widget .socialMedia .icon svg {
        margin-top: 8px
    }
}

.footer-widget .socialMedia .icon svg rect {
    fill: var(--theme-colour1)
}

.footer-widget .socialMedia .icon svg .clr {
    fill: var(--theme-colour1)
}

.headerBannerSec.muslimheaderBannerSec {
    padding-bottom: 32px
}

    .headerBannerSec.muslimheaderBannerSec:before {
        opacity: 0.4
    }

    .headerBannerSec.muslimheaderBannerSec:after {
        display: none
    }

    .headerBannerSec.muslimheaderBannerSec .header-widget .header-container .nav-ctrl-row .hamburg {
        background-color: transparent
    }

@media (max-width: 680px) {
    .headerBannerSec.muslimheaderBannerSec .header-widget .header-container .nav-ctrl-row .hamburg {
        margin-right: -20px;
        margin-top: 11px
    }
}

.headerBannerSec.muslimheaderBannerSec .navWrap {
    gap: 10px;
    column-gap: 10px
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec:after {
    display: none
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .movingHeaderWrap:after {
    display: none
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec {
    overflow: hidden;
    border-radius: 35px
}

@media (max-width: 1720px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec {
        border-radius: 18px
    }
}

@media (max-width: 991px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .movingHeaderWrap .headerImgGridSec .cardSec {
        border-radius: 15px
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .template-containerExtraLrg2.SearchDiv {
    margin-top: -90px
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .template-containerExtraLrg2.SearchDiv .divSep {
        display: grid;
        grid-template-columns: 1fr 2px 1fr;
        grid-gap: 20px
    }

        .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .template-containerExtraLrg2.SearchDiv .divSep .borderRgt {
            width: 1px;
            height: 100%;
            border-right: 1px solid #707070
        }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .template-containerExtraLrg2.SearchDiv label {
        position: relative
    }

@media (max-width: 1279px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .template-containerExtraLrg2.SearchDiv label sup {
        position: absolute
    }
}

@media (max-width: 1024px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea {
        width: 95%
    }
}

@media (max-width: 480px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea {
        width: 100%
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tablinks {
    padding: 26px 15px 8px;
    margin-right: 22px
}

@media (max-width: 480px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tablinks {
        padding: 15px 15px 15px;
        border-bottom: 2px solid #f7f7f7;
        margin-right: 0px;
        height: 53px;
        background-color: transparent !important;
        font-weight: 600;
        font-size: 16px
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tablinks.active {
    color: var(--c2d);
    border-bottom: 2px solid var(--theme-colour1)
}

@media (max-width: 480px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tablinks.active {
        background-color: transparent !important;
        font-weight: 600;
        font-size: 16px
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent {
    padding-top: 0px
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }

@media (max-width: 1199px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 767px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content {
        grid-template-columns: 1fr
    }
}

@media (max-width: 550px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content {
        margin-top: 0
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea {
    position: relative
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea .validateText {
        position: absolute;
        right: 0;
        bottom: -13px
    }

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 {
    grid-template-columns: 1fr 644px;
    grid-gap: 12px
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 1199px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 {
        grid-template-columns: 1fr;
        grid-gap: 0px
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .divSplit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
    width: 100%
}

@media (max-width: 550px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .divSplit {
        grid-template-columns: 1fr;
        grid-gap: 0px
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputMobile .phNumSplt {
    gap: 8px
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputMobile .phNumSplt .borderRgt {
        width: 1px;
        height: 100%;
        border-right: 1px solid #707070
    }

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputArea {
    position: relative
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputArea input {
        padding: 0;
        margin-bottom: 4px
    }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputArea .validateText {
        position: absolute;
        right: 0;
        bottom: -13px
    }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputArea.profileCnt .select2-container {
        height: 20.8px
    }

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputArea2 {
    padding: 10px 16px
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputArea2 input {
        padding: 0
    }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content.form-content2 .inputArea2 .validateText {
        position: absolute;
        right: 0;
        bottom: -13px
    }

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea {
    max-width: 100%;
    padding: 8px 16px
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea.select2Ctrl {
        padding: 12px 16px
    }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea.button {
        padding: 0
    }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea a {
        font-weight: 500;
        background: var(--theme-colour1);
        border-radius: 8px
    }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea .formsrc {
        background: var(--theme-colour1)
    }

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea2 {
    max-width: 100%;
    padding: 12px 16px;
    display: inline-grid;
    background: #ffffff;
    box-shadow: none;
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    width: 100%;
    height: fit-content;
    margin-bottom: 10px;
    position: relative
}

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea2 input {
        border: none;
        width: 100%
    }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea2 .icon {
        position: absolute;
        right: 16px;
        bottom: 6px
    }

        .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea2 .icon svg path {
            fill: var(--theme-colour1)
        }

    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea2 label {
        font-size: 16px;
        font-weight: 500;
        line-height: 17px;
        font-family: "Rubik";
        color: #444444;
        margin-bottom: 6px
    }

@media (max-width: 480px) {
    .headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea2 label {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
        color: #000000
    }
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .form-content .inputArea2 label sup {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #ff0000
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .buttonRespon a {
    font-weight: 500;
    background: var(--theme-colour1);
    border-radius: 8px
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .tabArea .tabcontent .buttonRespon .formsrc {
    background: var(--theme-colour1)
}

.headerBannerSec.muslimheaderBannerSec .headerWrapperSec .movingHeaderWrap {
    margin-top: 22px
}

.headerBannerSec.muslimheaderBannerSec .countSection {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 60px;
    margin-top: 54px;
    align-items: center
}

@media (max-width: 1680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection {
        margin-top: 50px;
        grid-gap: 50px
    }
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection {
        margin-top: 40px;
        grid-gap: 40px
    }
}

@media (max-width: 1024px) {
    .headerBannerSec.muslimheaderBannerSec .countSection {
        grid-gap: 30px
    }
}

@media (max-height: 800px) {
    .headerBannerSec.muslimheaderBannerSec .countSection {
        grid-gap: 30px
    }
}

@media (max-width: 767px) {
    .headerBannerSec.muslimheaderBannerSec .countSection {
        margin-top: 30px;
        grid-gap: 30px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 24px
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea {
        grid-gap: 20px
    }
}

@media (max-width: 1199px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 991px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea {
        grid-gap: 15px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea .count {
    border-radius: 25px;
    padding: 23px 32px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 29px
}

@media (max-width: 1680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count {
        border-radius: 20px;
        padding: 25px 25px
    }
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count {
        border-radius: 18px;
        gap: 15px
    }
}

@media (max-width: 1024px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count {
        border-radius: 15px;
        padding: 20px 20px
    }
}

@media (max-width: 991px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count {
        border-radius: 10px
    }
}

@media (max-width: 550px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea .count::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme-colour1);
    opacity: 0.09;
    border-radius: 25px
}

@media (max-width: 1680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count::before {
        border-radius: 20px
    }
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count::before {
        border-radius: 18px
    }
}

@media (max-width: 1024px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count::before {
        border-radius: 15px
    }
}

@media (max-width: 991px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count::before {
        border-radius: 10px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea .count .icn {
    width: 57px;
    display: flex
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count .icn {
        width: 40px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea .count .icn svg path {
    fill: var(--theme-colour1)
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 {
    font-size: 40px;
    font-weight: 500;
    line-height: 47px;
    color: #000000;
    margin-bottom: 6px;
    display: flex
}

@media (max-width: 1680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 {
        font-size: 38px;
        line-height: 45px
    }
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 {
        font-size: 35px;
        line-height: 40px
    }
}

@media (max-width: 991px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 {
        font-size: 30px;
        line-height: 35px
    }
}

@media (max-height: 800px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 {
        font-size: 35px;
        line-height: 40px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 .countSpn {
    font-size: 40px;
    font-weight: 500;
    line-height: 47px;
    color: #000000;
    width: auto
}

@media (max-width: 1680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 .countSpn {
        font-size: 38px;
        line-height: 45px
    }
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 .countSpn {
        font-size: 35px;
        line-height: 40px
    }
}

@media (max-width: 991px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 .countSpn {
        font-size: 30px;
        line-height: 35px
    }
}

@media (max-height: 800px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count h4 .countSpn {
        font-size: 35px;
        line-height: 40px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection .countArea .count span {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000000;
    max-width: 226px;
    width: 100%;
    display: block
}

@media (max-width: 1680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count span {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count span {
        font-size: 16px;
        line-height: 22px
    }
}

@media (max-height: 800px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count span {
        font-size: 16px;
        line-height: 22px
    }
}

@media (max-width: 680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection .countArea .count span {
        font-size: 14px;
        line-height: 20px
    }
}

.headerBannerSec.muslimheaderBannerSec .countSection p {
    font-size: 24px;
    font-weight: 600;
    line-height: 38px;
    color: #434343;
    max-width: 921px;
    width: 100%;
    padding-right: 0;
    margin: auto;
    text-align: center
}

@media (max-width: 1680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection p {
        font-size: 20px;
        line-height: 28px
    }
}

@media (max-width: 1366px) {
    .headerBannerSec.muslimheaderBannerSec .countSection p {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 1279px) {
    .headerBannerSec.muslimheaderBannerSec .countSection p {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-height: 800px) {
    .headerBannerSec.muslimheaderBannerSec .countSection p {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-width: 680px) {
    .headerBannerSec.muslimheaderBannerSec .countSection p {
        font-size: 14px;
        line-height: 22px
    }
}

.headerBannerSec.muslimheaderBannerSec .dtBox .dtpicker-header .dtpicker-title {
    color: var(--theme-colour1)
}

.headerBannerSec.muslimheaderBannerSec .dtBox input.dtpicker-compValue {
    color: var(--theme-colour1)
}

.headerBannerSec.muslimheaderBannerSec .dtBox a.dtpicker-button {
    color: var(--white);
    background-color: var(--theme-colour1)
}

.headerBannerSec.muslimheaderBannerSec .dtBox a.dtpicker-close {
    color: var(--theme-colour1)
}

.headerBannerSec.muslimheaderBannerSec .tabArea .tabcontent .buttonRespon button {
    background: var(--theme-colour1)
}

.muslimAboutSec .muslimAboutArea {
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr 638px;
    align-items: center;
    grid-gap: 30px
}

@media (max-width: 1279px) {
    .muslimAboutSec .muslimAboutArea {
        grid-template-columns: 1fr 450px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea {
        grid-template-columns: 1fr 390px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 680px) {
    .muslimAboutSec .muslimAboutArea {
        grid-template-columns: 1fr;
        min-height: auto
    }
}

.muslimAboutSec .muslimAboutArea .textArea {
    max-width: 702px;
    width: 100%;
    padding: 30px 0
}

    .muslimAboutSec .muslimAboutArea .textArea h2 {
        font-family: "Playfair Display", serif;
        font-size: 55px;
        font-weight: 400;
        line-height: 70px;
        color: var(--c2d);
        margin-bottom: 8px
    }

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 {
        font-size: 45px;
        line-height: 60px
    }
}

@media (max-width: 1366px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 {
        font-size: 40px;
        line-height: 55px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 {
        font-size: 35px;
        line-height: 50px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 {
        font-size: 30px;
        line-height: 40px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 {
        font-size: 40px;
        line-height: 55px
    }
}

@media (max-width: 680px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 {
        font-size: 25px;
        line-height: 35px
    }
}

.muslimAboutSec .muslimAboutArea .textArea h2 span {
    font-family: 'Rubik', sans-serif !important;
    font-size: 25px;
    font-weight: 400;
    line-height: 35px;
    color: var(--theme-colour1);
    margin-bottom: 13px;
    display: block
}

@media (max-width: 1366px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 span {
        font-size: 22px;
        line-height: 30px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 span {
        font-size: 20px;
        line-height: 28px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 span {
        font-size: 18px;
        line-height: 26px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 span {
        font-size: 20px;
        line-height: 28px
    }
}

@media (max-width: 680px) {
    .muslimAboutSec .muslimAboutArea .textArea h2 span {
        font-size: 16px;
        line-height: 24px
    }
}

.muslimAboutSec .muslimAboutArea .textArea p {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: var(--theme-text-colour);
    margin-bottom: 20px;
    text-align: left
}

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .textArea p {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 1366px) {
    .muslimAboutSec .muslimAboutArea .textArea p {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .textArea p {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-width: 680px) {
    .muslimAboutSec .muslimAboutArea .textArea p {
        font-size: 14px;
        line-height: 22px
    }
}

.muslimAboutSec .muslimAboutArea .textArea .cmnBtn {
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: #000000;
    height: 43px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    column-gap: 15px;
    padding: 7px 15px 7px 19px;
    width: fit-content;
    border: 1px solid #DDDDDD;
    background-color: var(--white);
    transition: ease-in-out 0.4s
}

    .muslimAboutSec .muslimAboutArea .textArea .cmnBtn:hover {
        color: var(--white);
        border: 1px solid var(--theme-colour1);
        background-color: var(--theme-colour1)
    }

        .muslimAboutSec .muslimAboutArea .textArea .cmnBtn:hover svg path {
            fill: var(--white)
        }

    .muslimAboutSec .muslimAboutArea .textArea .cmnBtn svg path {
        transition: ease-in-out 0.4s;
        fill: var(--theme-colour1)
    }

@media (max-width: 680px) {
    .muslimAboutSec .muslimAboutArea .pic {
        display: none
    }
}

.muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap {
    max-height: 702px;
    overflow: hidden;
    position: relative
}

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap {
        max-height: 620px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap {
        max-height: 600px
    }
}

.muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%)
}

.muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 25px;
    width: max-content;
    flex-wrap: nowrap;
    animation: scrolly 40s linear infinite
}

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec {
        grid-gap: 20px;
        width: 500px;
        margin-left: auto
    }
}

@media (max-width: 1279px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec {
        width: 450px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec {
        width: 390px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec {
        width: 50vw
    }
}

.muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 25px
}

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left {
        grid-gap: 20px
    }
}

@media (max-width: 1279px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left {
        grid-gap: 18px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left {
        grid-gap: 15px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left {
        grid-gap: 10px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left {
        grid-gap: 18px
    }
}

.muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left .cardSec {
    max-width: 306px;
    width: 100%;
    object-fit: cover;
    max-height: 426px;
    height: auto
}

    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left .cardSec img {
        border-radius: 40px;
        width: 100%;
        height: auto
    }

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left .cardSec img {
        border-radius: 30px
    }
}

@media (max-width: 1279px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left .cardSec img {
        border-radius: 25px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left .cardSec img {
        border-radius: 20px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left .cardSec img {
        border-radius: 15px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .left .cardSec img {
        border-radius: 25px
    }
}

.muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 25px
}

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right {
        grid-gap: 20px
    }
}

@media (max-width: 1279px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right {
        grid-gap: 18px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right {
        grid-gap: 15px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right {
        grid-gap: 10px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right {
        grid-gap: 18px
    }
}

.muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right .cardSec {
    max-width: 306px;
    width: 100%;
    object-fit: cover;
    max-height: 426px;
    height: auto
}

    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right .cardSec img {
        border-radius: 40px;
        width: 100%;
        height: auto
    }

@media (max-width: 1680px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right .cardSec img {
        border-radius: 30px
    }
}

@media (max-width: 1279px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right .cardSec img {
        border-radius: 25px
    }
}

@media (max-width: 1199px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right .cardSec img {
        border-radius: 20px
    }
}

@media (max-width: 991px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right .cardSec img {
        border-radius: 15px
    }
}

@media (max-height: 800px) {
    .muslimAboutSec .muslimAboutArea .pic .muslimAboutPicWrap .muslimAboutPicWrapSec .right .cardSec img {
        border-radius: 25px
    }
}

@keyframes scrolly {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-50%)
    }

    100% {
        transform: translateY(0)
    }
}

.featuredProfileSec {
    padding: 53px 0 59px;
    background-color: var(--white)
}

@media (max-width: 991px) {
    .featuredProfileSec {
        padding: 40px 0 30px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .cmnBtn {
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: #000000;
    height: 43px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    column-gap: 15px;
    padding: 7px 15px 7px 19px;
    width: fit-content;
    border: 1px solid #DDDDDD;
    background-color: var(--white);
    transition: ease-in-out 0.4s;
    display: none
}

@media (max-width: 480px) {
    .featuredProfileSec.muslimFeaturedProfileSec .cmnBtn {
        display: flex;
        margin: 10px auto 0
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .cmnBtn:hover {
    color: var(--white);
    border: 1px solid var(--theme-colour1);
    background-color: var(--theme-colour1)
}

    .featuredProfileSec.muslimFeaturedProfileSec .cmnBtn:hover svg path {
        fill: var(--white)
    }

.featuredProfileSec.muslimFeaturedProfileSec .cmnBtn svg path {
    transition: ease-in-out 0.4s
}

@media (max-width: 480px) {
    .featuredProfileSec.muslimFeaturedProfileSec .header {
        display: flex
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .header .left-contenttitle span {
    color: var(--theme-colour1)
}

.featuredProfileSec.muslimFeaturedProfileSec .header .cmnBtn {
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: #000000;
    height: 43px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    column-gap: 15px;
    padding: 7px 15px 7px 19px;
    width: fit-content;
    border: 1px solid #DDDDDD;
    background-color: var(--white);
    margin-bottom: -100px;
    transition: ease-in-out 0.4s
}

@media (max-width: 480px) {
    .featuredProfileSec.muslimFeaturedProfileSec .header .cmnBtn {
        margin-bottom: 0px;
        display: none
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .header .cmnBtn:hover {
    color: var(--white);
    border: 1px solid var(--theme-colour1);
    background-color: var(--theme-colour1)
}

    .featuredProfileSec.muslimFeaturedProfileSec .header .cmnBtn:hover svg path {
        fill: var(--white)
    }

.featuredProfileSec.muslimFeaturedProfileSec .header .cmnBtn svg path {
    transition: ease-in-out 0.4s;
    fill: var(--theme-colour1)
}

.featuredProfileSec.muslimFeaturedProfileSec .tabArea {
    width: 100%;
    max-width: 100%;
    transform: none;
    box-shadow: none;
    background-color: transparent
}

    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab {
        justify-content: flex-start;
        border-bottom: 1px solid #C7C7C7;
        margin-bottom: 58px
    }

@media (max-width: 991px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab {
        margin-bottom: 40px
    }
}

@media (max-width: 480px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab {
        display: flex
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks {
    border-bottom: none;
    padding-bottom: 18px;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--c2d);
    padding-top: 5px
}

@media (max-width: 1680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 1366px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-height: 800px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-width: 480px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks {
        padding: 9px 15px 18px;
        width: fit-content
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks.active {
    font-family: "Rubik",sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--c2d);
    border-bottom: none;
    position: relative
}

@media (max-width: 1680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks.active {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 1366px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks.active {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-height: 800px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks.active {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-width: 480px) {
    .featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks.active {
        background-color: transparent !important;
        height: auto;
        width: fit-content;
        padding: 9px 15px 18px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .tabArea .tab .tablinks.active::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--theme-colour1)
}

.featuredProfileSec.muslimFeaturedProfileSec .tabArea .tabcontent {
    margin: auto 0;
    padding: 0
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg {
    width: 303px;
    min-height: 487px;
    border-radius: 30px;
    border: 1px solid #F2F1F1;
    cursor: pointer;
    display: flex
}

@media (max-width: 1680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg {
        border-radius: 20px
    }
}

@media (max-width: 1199px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg {
        max-width: 362px
    }
}

@media (max-width: 991px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg {
        min-height: 420px;
        min-width: auto
    }
}

@media (max-width: 680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg {
        min-height: 480px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg:hover .pic {
    height: 324px
}

@media (max-width: 991px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg:hover .pic {
        height: 250px
    }
}

@media (max-width: 680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg:hover .pic {
        height: 320px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: var(--theme-colour1);
    opacity: .02
}

@media (max-width: 1680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg::after {
        border-radius: 20px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic {
    max-width: 302px;
    width: 100%;
    height: 350px;
    transition: ease-in-out 0.4s;
    z-index: 1;
    position: relative
}

@media (max-width: 1450px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic {
        max-width: 303px
    }
}

@media (max-width: 1199px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic {
        max-width: 362px
    }
}

@media (max-width: 991px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic {
        height: 280px
    }
}

@media (max-width: 680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic {
        height: 320px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic img {
    border-radius: 30px
}

@media (max-width: 1680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic img {
        border-radius: 20px
    }
}

@media (max-height: 800px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic img {
        border-radius: 20px
    }
}

@media (max-width: 680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .pic img {
        border-radius: 10px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details {
    padding: 20px 20px 22px;
    border-radius: 0 0 30px 30px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    z-index: 1
}

@media (max-width: 1680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details {
        padding: 20px 20px 22px;
        border-radius: 0 0 20px 20px
    }
}

@media (max-height: 800px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details {
        padding: 20px 20px 22px;
        border-radius: 0 0 20px 20px
    }
}

@media (max-width: 680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details {
        padding: 18px 15px 20px;
        border-radius: 0 0 10px 10px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .namesection {
    margin-bottom: 12px;
    transition: ease-in-out 0.4s
}

    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .namesection .name {
        font-size: 18px;
        font-weight: 500;
        line-height: 22px;
        color: var(--theme-colour1);
        max-width: 170px;
        width: 100%
    }

@media (max-width: 1199px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .namesection .name {
        font-size: 16px;
        line-height: 20px
    }
}

@media (max-height: 800px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .namesection .name {
        font-size: 16px;
        line-height: 20px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .smlSize {
    transition: ease-in-out 0.4s;
    grid-gap: 5px;
    row-gap: 0
}

    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .smlSize li {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: var(--c2d);
        margin-bottom: 7px
    }

@media (max-width: 1199px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .smlSize li {
        font-size: 12px;
        line-height: 14px
    }
}

@media (max-height: 800px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .smlSize li {
        font-size: 12px;
        line-height: 14px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize {
    transition: ease-in-out 0.4s;
    grid-gap: 5px;
    row-gap: 0
}

@media (max-width: 680px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize {
        display: grid
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize li {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--c2d);
    margin-bottom: 7px
}

@media (max-width: 1199px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize li {
        font-size: 12px;
        line-height: 14px
    }
}

@media (max-height: 800px) {
    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize li {
        font-size: 12px;
        line-height: 14px
    }
}

.featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize li.posRel {
    position: relative
}

    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize li.posRel:hover .toolTip {
        opacity: 1;
        pointer-events: all
    }

    .featuredProfileSec.muslimFeaturedProfileSec .listSec .wrapperImg .details .fullSize li.posRel .toolTip {
        background-color: rgba(45,45,45,0.8);
        padding: 5px;
        font-size: 12px;
        line-height: 16px;
        color: #ffffff;
        position: absolute;
        left: 16px;
        bottom: 25px;
        border-radius: 6px;
        width: 160%;
        opacity: 0;
        pointer-events: none
    }

.muslimhowItWork {
    overflow: hidden
}

    .muslimhowItWork .muslimhowItWorkArea {
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 40px;
        margin: 85px 0
    }

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea {
        background-image: none !important;
        margin: 60px 0
    }
}

@media (max-width: 767px) {
    .muslimhowItWork .muslimhowItWorkArea {
        margin: 50px 0
    }
}

.muslimhowItWork .muslimhowItWorkArea hr {
    margin: 0 0 68px;
    background-color: #C7C7C7;
    width: 100%;
    height: 1px;
    border: none
}

.muslimhowItWork .muslimhowItWorkArea .headerCaption {
    max-width: 818px;
    width: 100%;
    background-color: var(--white);
    padding-bottom: 37px;
    padding-right: 50px;
    margin-bottom: 142px;
    border-radius: 0 0 40px 0;
    position: relative
}

@media (max-width: 1680px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption {
        max-width: 680px
    }
}

@media (max-width: 1279px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption {
        max-width: 610px
    }
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption {
        margin-bottom: 20px;
        padding-bottom: 0
    }
}

.muslimhowItWork .muslimhowItWorkArea .headerCaption::after {
    position: absolute;
    content: "";
    right: -36px;
    top: 0;
    width: 36px;
    height: 36px;
    background-image: url(../images/cornerTriangle.svg);
    background-position: center;
    background-repeat: no-repeat
}

.muslimhowItWork .muslimhowItWorkArea .headerCaption::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -36px;
    width: 36px;
    height: 36px;
    background-image: url(../images/cornerTriangle.svg);
    background-position: center;
    background-repeat: no-repeat
}

.muslimhowItWork .muslimhowItWorkArea .headerCaption h2 {
    font-family: "Playfair Display", serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 64px;
    color: var(--c2d);
    margin-bottom: 8px;
    max-width: 781px;
    width: 100%
}

@media (max-width: 1680px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 {
        font-size: 45px;
        line-height: 60px;
        max-width: 701px
    }
}

@media (max-width: 1366px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 {
        font-size: 40px;
        line-height: 55px
    }
}

@media (max-width: 1199px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 {
        font-size: 35px;
        line-height: 50px
    }
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 {
        font-size: 30px;
        line-height: 40px
    }
}

@media (max-height: 800px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 {
        font-size: 40px;
        line-height: 55px
    }
}

@media (max-width: 680px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 {
        font-size: 25px;
        line-height: 35px
    }
}

.muslimhowItWork .muslimhowItWorkArea .headerCaption h2 span {
    font-family: 'Rubik', sans-serif !important;
    font-size: 25px;
    font-weight: 400;
    line-height: 35px;
    color: var(--theme-colour1);
    margin-bottom: 13px;
    display: block
}

@media (max-width: 1366px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 span {
        font-size: 22px;
        line-height: 30px
    }
}

@media (max-width: 1199px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 span {
        font-size: 20px;
        line-height: 28px
    }
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 span {
        font-size: 18px;
        line-height: 26px
    }
}

@media (max-height: 800px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 span {
        font-size: 22px;
        line-height: 30px
    }
}

@media (max-width: 680px) {
    .muslimhowItWork .muslimhowItWorkArea .headerCaption h2 span {
        font-size: 16px;
        line-height: 24px
    }
}

.muslimhowItWork .muslimhowItWorkArea .countSection {
    display: grid;
    grid-template-columns: 636px 1fr;
    grid-gap: 20px;
    margin-top: 28px;
    align-items: flex-end;
    padding-left: 96px
}

@media (max-width: 1680px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection {
        padding-left: 10px
    }
}

@media (max-width: 1279px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection {
        grid-template-columns: 506px 1fr
    }
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection {
        padding-left: 0px;
        grid-template-columns: 1fr;
        margin-top: 20px
    }
}

.muslimhowItWork .muslimhowItWorkArea .countSection .countArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-bottom: 50px
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea {
        order: 1;
        max-width: 700px;
        margin-bottom: 0
    }
}

.muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count {
    background-color: rgba(0,0,0,0.5);
    border-radius: 24px;
    padding: 26px 36px
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count {
        background-color: rgba(0,0,0,0.08);
        border-radius: 14px
    }
}

@media (max-width: 480px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count {
        padding: 16px 17px;
        border-radius: 10px
    }
}

.muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count h4 {
    font-size: 40px;
    font-weight: 500;
    line-height: 47px;
    color: #E8E8E8;
    margin-bottom: 7px
}

@media (max-width: 1366px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count h4 {
        font-size: 35px;
        line-height: 40px
    }
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count h4 {
        font-size: 30px;
        line-height: 35px;
        color: var(--c2d)
    }
}

@media (max-height: 800px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count h4 {
        font-size: 35px;
        line-height: 40px
    }
}

@media (max-width: 680px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count h4 {
        font-size: 25px;
        line-height: 30px
    }
}

.muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count span {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #E8E8E8;
    max-width: 171px;
    width: 100%;
    display: block
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .countArea .count span {
        color: var(--c2d)
    }
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection .para {
        order: 0
    }
}

.muslimhowItWork .muslimhowItWorkArea .countSection p {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    color: var(--theme-text-colour);
    max-width: 781px;
    width: 100%;
    padding-right: 51px;
    margin-left: auto;
    padding: 84px 20px 84px 89px;
    background-color: var(--white);
    border-radius: 40px 0 0 0;
    margin-bottom: 0;
    text-align: left;
    position: relative
}

@media (max-width: 1680px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection p {
        font-size: 20px;
        line-height: 30px;
        padding: 60px 20px 50px 60px
    }
}

@media (max-width: 1366px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection p {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 1279px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection p {
        padding: 40px 20px 40px 40px
    }
}

@media (max-width: 991px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection p {
        font-size: 16px;
        line-height: 26px;
        max-width: 910px;
        padding: 0;
        margin: 0;
        font-weight: 400
    }
}

@media (max-height: 800px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection p {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 680px) {
    .muslimhowItWork .muslimhowItWorkArea .countSection p {
        font-size: 14px;
        line-height: 22px
    }
}

.muslimhowItWork .muslimhowItWorkArea .countSection p::after {
    position: absolute;
    content: "";
    right: 0;
    top: -36px;
    width: 36px;
    height: 36px;
    background-image: url(../images/cornerTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg)
}

.muslimhowItWork .muslimhowItWorkArea .countSection p::before {
    position: absolute;
    content: "";
    left: -36px;
    bottom: 0;
    width: 36px;
    height: 36px;
    background-image: url(../images/cornerTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg)
}

.muslimAccodian {
    padding-bottom: 85px
}

@media (max-width: 1024px) {
    .muslimAccodian {
        padding-bottom: 50px
    }
}

.muslimAccodian .accoList {
    margin-bottom: 10px;
    padding: 17px 46px 16px;
    background-color: var(--lightBg);
    border-radius: 26px;
    position: relative
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList {
        padding: 17px 35px 16px;
        border-radius: 10px
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList {
        padding: 15px 20px 14px;
        border-radius: 8px
    }
}

@media (max-height: 800px) {
    .muslimAccodian .accoList {
        padding: 17px 35px 16px;
        border-radius: 10px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList {
        padding: 8px 15px 8px;
        border-radius: 4px
    }
}

.muslimAccodian .accoList .accordionMus {
    font-family: 'Rubik', sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 29px;
    color: #000000;
    background-color: var(--lightBg);
    cursor: pointer;
    padding: 10px 10px 10px 0px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-radius: 26px
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus {
        font-size: 22px;
        line-height: 26px
    }
}

@media (max-width: 1366px) {
    .muslimAccodian .accoList .accordionMus {
        font-size: 20px;
        line-height: 24px
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus {
        padding: 0
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus {
        font-size: 18px;
        line-height: 22px
    }
}

@media (max-height: 800px) {
    .muslimAccodian .accoList .accordionMus {
        font-size: 20px;
        line-height: 24px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .accordionMus {
        font-size: 16px;
        line-height: 20px
    }
}

.muslimAccodian .accoList .accordionMus span {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: var(--theme-text-colour);
    display: block;
    margin-top: 10px
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus span {
        font-size: 18px;
        line-height: 28px;
        margin-top: 4px
    }
}

@media (max-width: 1366px) {
    .muslimAccodian .accoList .accordionMus span {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus span {
        font-size: 14px;
        line-height: 24px
    }
}

@media (max-height: 800px) {
    .muslimAccodian .accoList .accordionMus span {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .accordionMus span {
        font-size: 13px;
        line-height: 22px;
        margin-top: 0
    }
}

.muslimAccodian .accoList .active {
    border-radius: 26px 26px 0 0
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .active {
        padding-top: 10px
    }
}

.muslimAccodian .accoList .accordionMus.active .outerSec::before {
    position: absolute;
    content: "";
    right: 0px;
    left: auto;
    bottom: -50px !important;
    width: 36px;
    height: 36px;
    background-image: url(../images/cornerTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(90deg)
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus.active .outerSec::before {
        right: 0px;
        bottom: -36px !important;
        width: 26px;
        height: 26px
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus.active .outerSec::before {
        bottom: -34px !important
    }
}

.muslimAccodian .accoList .accordionMus .outerSec {
    position: absolute;
    right: 0;
    top: 0;
    width: 116px;
    height: 116px;
    border-radius: 20px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-items: center
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus .outerSec {
        width: 110px;
        height: 110px
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus .outerSec {
        width: 90px;
        height: 90px
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus .outerSec {
        width: 80px;
        height: 80px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .accordionMus .outerSec {
        width: 60px;
        height: 60px
    }
}

.muslimAccodian .accoList .accordionMus .outerSec::after {
    position: absolute;
    content: "";
    left: -45px;
    top: 0;
    width: 36px;
    height: 26px;
    background-image: url(../images/cornerTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(90deg)
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus .outerSec::after {
        left: -36px;
        top: -1px
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus .outerSec::after {
        left: -34px
    }
}

.muslimAccodian .accoList .accordionMus .outerSec::before {
    position: absolute;
    content: "";
    left: -39px;
    bottom: 0px !important;
    width: 26px;
    height: 26px;
    background-image: url(../images/cornerTriangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg)
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus .outerSec::before {
        left: -36px;
        bottom: -1px !important
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus .outerSec::before {
        left: -34px;
        bottom: 3px !important
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus .outerSec::before {
        left: -30px;
        bottom: 1px !important
    }
}

.muslimAccodian .accoList .accordionMus .icn {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 116px;
    height: 116px;
    background-color: var(--lightBg);
    border-radius: 20px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-items: center
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus .icn {
        width: 110px;
        height: 110px
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus .icn {
        width: 90px;
        height: 90px
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus .icn {
        width: 80px;
        height: 80px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .accordionMus .icn {
        width: 60px;
        height: 60px
    }
}

.muslimAccodian .accoList .accordionMus .icn svg {
    transform: rotate(45deg);
    z-index: 2;
    margin: auto;
    transition: ease-in-out 0.4s
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus .icn svg {
        width: 15px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .accordionMus .icn svg {
        width: 11px
    }
}

.muslimAccodian .accoList .accordionMus .icn svg path {
    fill: var(--theme-colour1)
}

.muslimAccodian .accoList .accordionMus .icn::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 116px;
    height: 116px;
    border-radius: 20px;
    z-index: 1;
    background-color: var(--lightBg)
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus .icn::after {
        width: 107px;
        height: 107px;
        border-radius: 10px
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus .icn::after {
        width: 87px;
        height: 87px
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus .icn::after {
        width: 77px;
        height: 77px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .accordionMus .icn::after {
        width: 57px;
        height: 57px
    }
}

.muslimAccodian .accoList .accordionMus .icn::before {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 0 20px 0 20px
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .accordionMus .icn::before {
        width: 120px;
        height: 120px;
        border-radius: 0 10px 0 10px
    }
}

@media (max-width: 1199px) {
    .muslimAccodian .accoList .accordionMus .icn::before {
        width: 98px;
        height: 98px
    }
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .accordionMus .icn::before {
        width: 88px;
        height: 88px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .accordionMus .icn::before {
        width: 68px;
        height: 68px
    }
}

.muslimAccodian .accoList .active .icn:after {
    background-color: var(--theme-colour1);
    opacity: 0.1
}

.muslimAccodian .accoList .active .icn svg {
    transform: rotate(0deg)
}

    .muslimAccodian .accoList .active .icn svg path {
        fill: var(--theme-colour1)
    }

.muslimAccodian .accoList .panel {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #727273;
    padding: 0;
    background-color: var(--lightBg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 0;
    border-radius: 0 0 26px 26px;
    padding-right: 212px;
    box-shadow: none
}

@media (max-width: 991px) {
    .muslimAccodian .accoList .panel {
        padding-right: 100px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .panel {
        padding-right: 0px
    }
}

.muslimAccodian .accoList .panel p {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #727273;
    text-align: left
}

@media (max-width: 1680px) {
    .muslimAccodian .accoList .panel p {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 1366px) {
    .muslimAccodian .accoList .panel p {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-height: 800px) {
    .muslimAccodian .accoList .panel p {
        font-size: 16px;
        line-height: 26px
    }
}

@media (max-width: 680px) {
    .muslimAccodian .accoList .panel p {
        font-size: 14px;
        line-height: 22px;
        margin: 17px 0
    }
}

.muslimSuccessStories {
    background-color: #F4F4F4;
    padding: 118px 0 73px;
    position: relative
}

@media (max-width: 1024px) {
    .muslimSuccessStories {
        padding: 80px 0 70px
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories {
        padding: 80px 0 70px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories {
        padding: 50px 0 40px
    }
}

.muslimSuccessStories .bgPic {
    position: absolute;
    left: 0;
    top: 0
}

.muslimSuccessStories .muslimSuccessStoriesArea {
    background-color: var(--white);
    padding: 117px 77px 35px;
    border-radius: 26px;
    z-index: 1;
    position: relative
}

@media (max-width: 1680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea {
        padding: 90px 55px 35px;
        border-radius: 22px
    }
}

@media (max-width: 1450px) {
    .muslimSuccessStories .muslimSuccessStoriesArea {
        padding: 90px 35px 35px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea {
        padding: 70px 25px 35px
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .muslimSuccessStoriesArea {
        padding: 90px 35px 35px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea {
        padding: 40px 15px 35px;
        border-radius: 10px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .muslimSuccessStoriesTop {
    display: grid;
    grid-template-columns: 317px 1fr 317px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .muslimSuccessStoriesTop {
        grid-template-columns: 280px 1fr 280px
    }
}

@media (max-width: 1450px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .muslimSuccessStoriesTop {
        grid-template-columns: 220px 1fr 220px
    }
}

@media (max-width: 1024px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .muslimSuccessStoriesTop {
        grid-template-columns: 150px 1fr 150px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .muslimSuccessStoriesTop {
        grid-template-columns: 100px 1fr 100px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .muslimSuccessStoriesTop {
        grid-template-columns: 1fr
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .leftPic {
    position: relative
}

@media (max-width: 680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .leftPic {
        display: none
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftLgPic {
    width: 188px;
    height: 188px;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    bottom: 180px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftLgPic {
        width: 168px;
        height: 168px;
        bottom: 230px
    }
}

@media (max-width: 1024px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftLgPic {
        width: 120px;
        height: 120px;
        bottom: 180px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftLgPic {
        width: 80px;
        height: 80px;
        bottom: auto;
        top: 110px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftLgPic img {
    width: 100%;
    border-radius: 50%
}

.muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftSmPic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    right: 20px;
    bottom: 40px
}

@media (max-width: 1024px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftSmPic {
        width: 80px;
        height: 80px;
        bottom: 70px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftSmPic {
        width: 50px;
        height: 50px;
        bottom: 70px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .leftPic .lftSmPic img {
    width: 100%;
    border-radius: 50%
}

.muslimSuccessStories .muslimSuccessStoriesArea .rightPic {
    position: relative
}

@media (max-width: 680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .rightPic {
        display: none
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtLgPic {
    width: 188px;
    height: 188px;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0
}

@media (max-width: 1680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtLgPic {
        width: 168px;
        height: 168px
    }
}

@media (max-width: 1024px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtLgPic {
        width: 120px;
        height: 120px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtLgPic {
        width: 80px;
        height: 80px;
        top: 40px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtLgPic img {
    width: 100%;
    border-radius: 50%
}

.muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtSmPic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    left: 20px;
    bottom: 10px
}

@media (max-width: 1024px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtSmPic {
        width: 80px;
        height: 80px;
        bottom: 70px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtSmPic {
        width: 50px;
        height: 50px;
        bottom: 70px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .rightPic .rgtSmPic img {
    width: 100%;
    border-radius: 50%
}

.muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 {
    font-family: "Playfair Display", serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 64px;
    color: var(--c2d);
    margin-bottom: 32px;
    max-width: 781px;
    width: 100%;
    text-align: center
}

@media (max-width: 1680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 {
        font-size: 45px;
        line-height: 60px
    }
}

@media (max-width: 1366px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 {
        font-size: 40px;
        line-height: 55px
    }
}

@media (max-width: 1199px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 {
        font-size: 35px;
        line-height: 50px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 20px
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 {
        font-size: 40px;
        line-height: 55px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 {
        font-size: 25px;
        line-height: 35px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 span {
    font-family: 'Rubik', sans-serif !important;
    font-size: 25px;
    font-weight: 400;
    line-height: 35px;
    color: var(--theme-colour1);
    margin-bottom: 13px;
    display: block
}

@media (max-width: 1366px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 span {
        font-size: 22px;
        line-height: 30px
    }
}

@media (max-width: 1199px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 span {
        font-size: 20px;
        line-height: 28px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 span {
        font-size: 18px;
        line-height: 26px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec h2 span {
        font-size: 16px;
        line-height: 24px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .aparSec p {
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: var(--c2d);
    margin-bottom: 40px;
    text-align: center
}

@media (max-width: 1680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec p {
        font-size: 20px;
        line-height: 30px
    }
}

@media (max-width: 1366px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec p {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec p {
        font-size: 16px;
        line-height: 26px;
        font-weight: 400
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec p {
        font-size: 18px;
        line-height: 28px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec p {
        font-size: 14px;
        line-height: 22px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec {
    font-family: "Playfair Display", serif;
    font-size: 90px;
    font-weight: 400;
    line-height: 90px;
    color: var(--c2d);
    display: flex;
    gap: 23px;
    column-gap: 23px;
    align-items: center;
    justify-content: center
}

@media (max-width: 1680px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec {
        font-size: 80px;
        line-height: 90px
    }
}

@media (max-width: 1366px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec {
        font-size: 70px;
        line-height: 70px
    }
}

@media (max-width: 1024px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec {
        font-size: 60px;
        line-height: 60px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec {
        font-size: 50px;
        line-height: 50px
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec {
        font-size: 70px;
        line-height: 70px
    }
}

.muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec span {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #000000;
    max-width: 187px
}

@media (max-width: 1024px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec span {
        font-size: 16px;
        line-height: 28px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec span {
        font-size: 14px;
        line-height: 24px
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .muslimSuccessStoriesArea .aparSec .countSec span {
        font-size: 16px;
        line-height: 28px
    }
}

.muslimSuccessStories hr {
    margin: 50px 0 52px;
    background-color: #C7C7C7;
    width: 100%;
    height: 1px;
    border: none
}

.muslimSuccessStories .testimonialsWidget {
    position: relative;
    padding: 60px 0 40px 0;
    overflow-x: hidden
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget {
        padding: 30px 0 30px 0
    }
}

@media (max-width: 1024px) {
    .muslimSuccessStories .testimonialsWidget {
        padding: 0px 0 30px 0
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .testimonialsWidget {
        padding: 0px 0 30px 0
    }
}

@media (max-width: 767px) {
    .muslimSuccessStories .testimonialsWidget {
        padding: 40px 10px 25px 10px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget {
        padding: 0px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .testimonialsWidget.smBgFa {
        background-color: var(--bgFa)
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow {
    max-width: 1499px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 657px 1fr;
    column-gap: 23px;
    -moz-column-gap: 23px;
    grid-column-gap: 23px;
    min-height: 631px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow {
        grid-template-columns: 1fr 560px 1fr
    }
}

@media (max-width: 1279px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow {
        grid-template-columns: 1fr 460px 1fr;
        -moz-column-gap: 20px;
        grid-column-gap: 20px
    }
}

@media (max-width: 1199px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow {
        grid-template-columns: 1fr 400px 1fr
    }
}

@media (max-width: 1024px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow {
        display: flex;
        column-gap: 0;
        -moz-column-gap: 0;
        grid-column-gap: 0;
        min-height: auto
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut {
    display: flex;
    align-items: flex-start;
    position: relative
}

@media (max-width: 1024px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem {
        display: none !important
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .prevBtnOwl {
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5
}

@media (max-width: 767px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .prevBtnOwl {
        left: -10px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .nextBtnOwl {
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5
}

@media (max-width: 767px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .nextBtnOwl {
        right: -10px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem {
    width: 100%;
    height: 508px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 40px;
    position: relative
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem {
        border-radius: 30px;
        border-radius: 30px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme-colour1);
    border: solid 1px var(--theme-colour1);
    opacity: 0.09;
    border-radius: 40px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem::before {
        border-radius: 30px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem::before {
        border-radius: 10px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .sideImg {
    max-width: 398px;
    width: 100%;
    height: 410px;
    overflow: hidden
}

    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .sideImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 28px;
        border: none;
        border-radius: 25px
    }

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevName, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextName {
    display: block;
    text-align: center;
    position: relative;
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: var(--c2d);
    margin-bottom: 0px;
    height: 97px;
    display: flex;
    align-items: center;
    padding: 0 10px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevName, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextName {
        font-size: 20px;
        margin-bottom: 0
    }
}

@media (max-width: 1199px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevName, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextName {
        font-size: 18px;
        margin-bottom: 0
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevName, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextName {
        font-size: 16px
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevName, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextName {
        font-size: 18px;
        margin-bottom: 0
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevDes, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextDes {
    width: 100%;
    display: block;
    padding: 0 70px;
    text-align: center;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #808080;
    position: relative;
    margin-bottom: 20px
}

@media (max-width: 1199px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevDes, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextDes {
        font-size: 14px
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .prevDes, .muslimSuccessStories .testimonialsWidget .testimonialsRow .colOut .testimonialItem .nextDes {
        font-size: 14px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow {
    overflow: hidden
}

    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage-outer {
        overflow: hidden
    }

    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-nav {
        display: none
    }

    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-dots {
        display: flex;
        justify-content: center;
        height: 22px;
        margin-top: 97px
    }

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-dots {
        margin-top: 80px
    }
}

@media (max-width: 1366px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-dots {
        margin-top: 40px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    background-color: transparent;
    border: none;
    padding: 0 4px;
    cursor: pointer
}

    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-dots .owl-dot.active span {
        width: 33px;
        background-color: var(--theme-colour1)
    }

    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-dots .owl-dot span {
        width: 11px;
        height: 11px;
        border-radius: 7px;
        background-color: #DDDDDD;
        margin: 0
    }

.muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList {
    border: solid 1px #E3F1F9;
    border-radius: 40px;
    transition: all 300ms ease;
    padding: 40px 20px 20px 20px;
    margin: 0 8px;
    position: relative
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList {
        border-radius: 30px
    }
}

@media (max-width: 1279px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList {
        margin: 0px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList {
        padding: 28px 20px 20px 20px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .widgetImage img {
    width: 87px;
    height: auto;
    border: solid 1px #f3f3f3;
    border-radius: 50%;
    margin: 0 auto
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .widgetImage img {
        width: 64px;
        height: auto;
        margin-bottom: 14px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .nameLabel {
    display: block;
    text-align: left;
    position: relative;
    font-size: 22px;
    font-weight: 500;
    line-height: 27px;
    color: var(--c2d);
    margin-bottom: 11px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .nameLabel {
        font-size: 20px
    }
}

@media (max-width: 1199px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .nameLabel {
        font-size: 18px
    }
}

@media (max-width: 991px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .nameLabel {
        font-size: 16px;
        margin-bottom: 0
    }
}

@media (max-height: 800px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .nameLabel {
        font-size: 18px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .testimonialContent {
    display: none;
    transition: ease-in-out 0.4s;
    position: relative;
    opacity: 0
}

    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .testimonialContent::before {
        position: absolute;
        right: 0;
        bottom: 0;
        content: "";
        width: 66px;
        height: 47px;
        background-image: url(../images/q02.png);
        background-repeat: no-repeat;
        background-size: contain
    }

@media (max-width: 991px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .testimonialContent::before {
        width: 52px;
        height: 52px;
        background-size: 75%
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .testimonialContent p {
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: var(--theme-text-colour);
    margin-bottom: 0;
    min-height: 114px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .testimonialContent p {
        min-height: 134px
    }
}

@media (max-width: 1024px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .testimonialContent p {
        min-height: auto
    }
}

@media (max-width: 480px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .testimonialList .testimonialContent p {
        font-size: 14px;
        line-height: 22px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage {
    display: flex;
    align-items: center
}

    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList {
        background-color: #ffffff;
        padding: 43px;
        text-align: left
    }

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList {
        padding: 30px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList {
        padding: 20px 15px;
        border-radius: 10px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .desLabel::before {
    background-image: url(../images/q01.png);
    background-repeat: no-repeat;
    background-size: contain
}

@media (max-width: 991px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .desLabel::before {
        background-size: 75%
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .testimonialContent {
    display: block;
    opacity: 1;
    padding-bottom: 0px
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .widgetImage {
    max-width: 392px;
    width: 100%;
    height: 245px;
    overflow: hidden;
    border-radius: 28px;
    margin-bottom: 24px;
    z-index: 1;
    position: relative
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .widgetImage {
        border-radius: 10px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .widgetImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    border: none
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .widgetImage img {
        border-radius: 25px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .widgetImage img {
        border-radius: 10px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme-colour1);
    opacity: 0.09;
    border-radius: 40px
}

@media (max-width: 1680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList::before {
        border-radius: 30px
    }
}

@media (max-width: 680px) {
    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList::before {
        border-radius: 10px
    }
}

.muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .bgPicInner {
    position: absolute;
    top: 59px;
    right: 0
}

    .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .bgPicInner svg {
        opacity: .3
    }

        .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .bgPicInner svg .pathCls {
            fill: var(--theme-colour1)
        }

        .muslimSuccessStories .testimonialsWidget .testimonialRow .owl-stage .owl-item.center .testimonialList .bgPicInner svg circle {
            fill: var(--theme-colour1)
        }

.appstoreSec.muslimAppstoreSec {
    background-color: #ffffff
}

    .appstoreSec.muslimAppstoreSec .application .right .gridWrapper .headlabel {
        color: var(--theme-colour1)
    }

    .appstoreSec.muslimAppstoreSec .application .right .gridWrapper .downloadlink .send {
        background: var(--theme-colour1)
    }

    .appstoreSec.muslimAppstoreSec .application .right .downloadlink {
        position: relative
    }

        .appstoreSec.muslimAppstoreSec .application .right .downloadlink .validateText {
            position: absolute;
            left: 0;
            bottom: -17px
        }

.footer-widget.footer-widgetMuslim .socialMedia .icon svg rect {
    fill: var(--theme-colour1)
}

.footer-widget.footer-widgetMuslim .socialMedia .icon svg circle {
    fill: var(--theme-colour1)
}

.footer-widget.footer-widgetMuslim .panel {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 0
}

    .footer-widget.footer-widgetMuslim .panel .footerbody {
        padding: 10px 18px 8px;
        background-color: #fff;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
        box-shadow: 0 1px 1px rgba(0,0,0,0.05)
    }

.footer-widget.footer-widgetMuslim .socialMedia .icon svg {
    margin-right: 17px
}

.footer-widget.footer-widgetMuslim .footeraccordion {
    background-color: #f2f2f2
}

.footer-widget.footer-widgetMuslim a:hover {
    color: var(--theme-colour1) !important
}

.copy-right.copy-rightMuslim {
    background-color: var(--theme-colour1)
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete::-webkit-scrollbar-thumb {
    background: var(--theme-colour3)
}

.ui-autocomplete .ui-menu-item:hover {
    background-color: var(--theme-colour3)
}

.template-container3 {
    max-width: var(--container-width3);
    width: 100%;
    margin: 0 auto
}

@media (max-width: 1850px) {
    .template-container3 {
        padding-left: 50px !important;
        padding-right: 50px !important
    }
}

@media (max-width: 1366px) {
    .template-container3 {
        padding-left: 30px !important;
        padding-right: 30px !important
    }
}

@media (max-width: 1199px) {
    .template-container3 {
        padding-left: 20px !important;
        padding-right: 20px !important
    }
}

@media (max-width: 991px) {
    .template-container3 {
        padding-left: 15px !important;
        padding-right: 15px !important
    }
}

.muslimHeader-widget .header-container {
    width: 100% !important;
    max-width: var(--container-width3) !important
}

@media (max-width: 1850px) {
    .muslimHeader-widget .header-container {
        padding-left: 50px !important;
        padding-right: 50px !important
    }
}

@media (max-width: 1366px) {
    .muslimHeader-widget .header-container {
        padding-left: 30px !important;
        padding-right: 30px !important
    }
}

@media (max-width: 1199px) {
    .muslimHeader-widget .header-container {
        padding-left: 20px !important;
        padding-right: 20px !important
    }
}

@media (max-width: 991px) {
    .muslimHeader-widget .header-container {
        padding-left: 15px !important;
        padding-right: 15px !important
    }
}

.muslimHeader-widget .header-container .navigation-row {
    width: 100%;
    justify-content: flex-end
}

@media (max-width: 1199px) {
    .muslimHeader-widget .header-container .navigation-row {
        justify-content: space-between;
        flex-direction: column
    }
}

.muslimHeader-widget .header-container .navigation-row .linksPoint {
    transform: none !important
}

    .muslimHeader-widget .header-container .navigation-row .linksPoint li a {
        text-decoration: underline;
        padding-right: 4px !important;
        font-size: 16px !important
    }

        .muslimHeader-widget .header-container .navigation-row .linksPoint li a:hover {
            color: var(--theme-colour1) !important
        }

    .muslimHeader-widget .header-container .navigation-row .linksPoint.moblinksPoint {
        display: none
    }

@media (max-width: 1199px) {
    .muslimHeader-widget .header-container .navigation-row .linksPoint.moblinksPoint {
        display: block
    }
}

.muslimHeader-widget .header-container .navigation-row .linksPoint.moblinksPoint li a {
    text-decoration: none !important
}

.muslimHeader-widget .nav-ctrl-row .userControl .userDrop ul li:hover {
    background-color: var(--theme-colour1) !important
}

.muslimHeader-widget .userControl .iconFill, .muslimHeader-widget .hamburg .iconFill {
    fill: var(--theme-colour1);
    stroke: var(--theme-colour1)
}

.muslimHeader-widget .userControl .icon svg .iconFill, .muslimHeader-widget .hamburg .icon svg .iconFill {
    fill: var(--theme-colour1);
    stroke: var(--theme-colour1)
}

.muslimSearchProfile {
    position: relative;
    z-index: 1
}

    .muslimSearchProfile .headerSearch {
        gap: 16px
    }

@media (max-width: 680px) {
    .muslimSearchProfile .headerSearch {
        height: auto !important;
        padding: 15px 0 !important;
        flex-wrap: wrap
    }
}

.muslimSearchProfile .downArrow #Path_4766 {
    fill: var(--theme-colour1) !important
}

.muslimSearchProfile .searchDiv .content {
    color: var(--theme-colour1) !important
}

.muslimSearchProfile .right .icon {
    gap: 16px
}

@media (max-width: 991px) {
    .muslimSearchProfile .right .icon {
        margin-top: 0 !important
    }
}

@media (max-width: 480px) {
    .muslimSearchProfile .right .icon {
        justify-content: end !important
    }
}

.muslimSearchProfile .right .icon .icon1, .muslimSearchProfile .right .icon .icon2 {
    transition: all ease-in-out 0.3s
}

    .muslimSearchProfile .right .icon .icon1:hover svg, .muslimSearchProfile .right .icon .icon2:hover svg {
        border: 1px solid #D1D1D1
    }

        .muslimSearchProfile .right .icon .icon1:hover svg rect, .muslimSearchProfile .right .icon .icon2:hover svg rect {
            fill: #fff !important
        }

        .muslimSearchProfile .right .icon .icon1:hover svg g path, .muslimSearchProfile .right .icon .icon2:hover svg g path {
            fill: var(--theme-colour1) !important
        }

    .muslimSearchProfile .right .icon .icon1 svg, .muslimSearchProfile .right .icon .icon2 svg {
        border-radius: 4px;
        transition: all ease-in-out 0.3s;
        border: 1px solid transparent
    }

        .muslimSearchProfile .right .icon .icon1 svg rect, .muslimSearchProfile .right .icon .icon2 svg rect {
            fill: #fff !important
        }

        .muslimSearchProfile .right .icon .icon1 svg g path, .muslimSearchProfile .right .icon .icon2 svg g path {
            fill: #A1A1A1 !important
        }

    .muslimSearchProfile .right .icon .icon1.active svg rect, .muslimSearchProfile .right .icon .icon2.active svg rect {
        fill: var(--theme-colour1) !important
    }

    .muslimSearchProfile .right .icon .icon1.active svg g path, .muslimSearchProfile .right .icon .icon2.active svg g path {
        fill: #fff !important
    }

.muslimSearchProfile .filterDrop:hover {
    background-color: var(--theme-colour1)
}

.muslimSearchDataSection {
    background-color: #F9FAFB
}

    .muslimSearchDataSection::after {
        content: '';
        position: absolute;
        top: 110px;
        left: 0;
        width: 100%;
        height: 600px;
        z-index: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url("../images/bg-sticky.svg")
    }

    .muslimSearchDataSection .filterArea {
        border: none !important;
        padding: 0 !important;
        margin-bottom: 14px !important
    }

        .muslimSearchDataSection .filterArea #accordinSectionCmnGap {
            display: grid
        }

        .muslimSearchDataSection .filterArea#filterAreaLast .accoList {
            background-color: #F5F6F7 !important
        }

            .muslimSearchDataSection .filterArea#filterAreaLast .accoList .check-box label::after {
                border-color: var(--theme-colour1) !important
            }

        .muslimSearchDataSection .filterArea .moreButton {
            color: var(--theme-colour1) !important
        }

        .muslimSearchDataSection .filterArea.sepAccordion {
            background-color: #FFFFFF !important;
            border: 1px solid #F3F3F3 !important;
            padding: 32px !important
        }

            .muslimSearchDataSection .filterArea.sepAccordion .label {
                color: #484848 !important;
                font-size: 16px !important;
                font-weight: 500 !important;
                line-height: 20px !important
            }

            .muslimSearchDataSection .filterArea.sepAccordion .location {
                align-items: center
            }

                .muslimSearchDataSection .filterArea.sepAccordion .location.margin26 {
                    margin-bottom: 34px
                }

        .muslimSearchDataSection .filterArea .filterHead {
            max-width: 355px !important;
            margin: 0 auto
        }

            .muslimSearchDataSection .filterArea .filterHead .headerLeft {
                font-size: 26px !important;
                font-weight: 500 !important;
                line-height: 30px !important;
                color: #0C0C0C !important
            }

@media (max-width: 1680px) {
    .muslimSearchDataSection .filterArea .filterHead .headerLeft {
        font-size: 24px !important
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .filterArea .filterHead .headerLeft {
        font-size: 22px !important
    }
}

@media (max-width: 1226px) {
    .muslimSearchDataSection .filterArea .filterHead .headerLeft {
        font-size: 20px !important
    }
}

.muslimSearchDataSection .filterArea .headerRight {
    color: #2d2d2d !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important
}

.muslimSearchDataSection .filterArea .accordinSection {
    background-color: #FFFFFF !important;
    border-radius: 12px;
    padding: 24px 20px !important;
    margin-block-start: 12px;
    border: 1px solid #F3F3F3
}

@media (max-width: 680px) {
    .muslimSearchDataSection .filterArea .accordinSection {
        padding: 24px 8px !important
    }
}

.muslimSearchDataSection .filterArea .accordinSection .accordinWrap button::after {
    margin-top: -5px
}

.muslimSearchDataSection .filterArea .accordinSection .accordinWrap .accoList {
    height: 62px !important;
    display: grid;
    align-items: center
}

@media (max-width: 680px) {
    .muslimSearchDataSection .filterArea .accordinSection .accordinWrap.acrdn-prfltype {
        margin-left: 0px !important
    }
}

.muslimSearchDataSection .filterArea .accordinSection .accordinInnerWrap {
    min-height: 22px
}

.muslimSearchDataSection .filterArea .accordinSection .accordion {
    margin-bottom: 0 !important
}

    .muslimSearchDataSection .filterArea .accordinSection .accordion.active::after {
        transform: rotate(180deg)
    }

    .muslimSearchDataSection .filterArea .accordinSection .accordion::after {
        transition: ease-in-out 0.4s
    }

    .muslimSearchDataSection .filterArea .accordinSection .accordion label {
        color: #484848 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important
    }

.muslimSearchDataSection .filterArea .accordinSection #range::-webkit-slider-thumb, .muslimSearchDataSection .filterArea .accordinSection #rangecm::-webkit-slider-thumb {
    background: #2D2D2D !important;
    border: 0.5rem solid #2D2D2D !important
}

.muslimSearchDataSection .filterArea .accordinSection #range::-webkit-slider-runnable-track, .muslimSearchDataSection .filterArea .accordinSection #rangecm::-webkit-slider-runnable-track {
    height: 1px !important;
    background-color: #C7D0D9 !important
}

.muslimSearchDataSection .filterArea .accordinSection #range::after, .muslimSearchDataSection .filterArea .accordinSection #range::before, .muslimSearchDataSection .filterArea .accordinSection #rangecm::after, .muslimSearchDataSection .filterArea .accordinSection #rangecm::before {
    color: #2D2D2D !important
}

.muslimSearchDataSection .filterArea .accordinSection .form-check-row .check-box label {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #2D2D2D !important;
    margin-bottom: 0
}

    .muslimSearchDataSection .filterArea .accordinSection .form-check-row .check-box label::after {
        border-color: #2D2D2D !important;
        top: 1px !important
    }

    .muslimSearchDataSection .filterArea .accordinSection .form-check-row .check-box label.activeColor {
        color: var(--theme-colour1) !important
    }

.muslimSearchDataSection .filterArea .accordinSection .footerbody {
    height: fit-content !important;
    padding-top: 12px
}

    .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .addedMartialStatusWraper {
        -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2) !important;
        -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2) !important;
        box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2) !important;
        padding: 11px !important;
        border-radius: 8px !important
    }

    .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .inputSearch {
        border: 1px solid var(--theme-colour1) !important;
        border-radius: 8px !important;
        height: 58px !important;
        color: #3D3D3D;
        font-size: 16px;
        font-weight: 400;
        line-height: 19px
    }

        .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .inputSearch::placeholder {
            color: #3D3D3D !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            line-height: 19px !important
        }

    .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .dropdownArea li {
        background-color: #DDDDDD !important;
        border-radius: 4px !important;
        padding: 8px 16px !important
    }

        .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .dropdownArea li span svg {
            width: 10px;
            height: 10px
        }

            .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .dropdownArea li span svg path {
                fill: #2D2D2D !important
            }

        .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .dropdownArea li a {
            color: #2D2D2D !important;
            font-size: 16px !important;
            font-weight: 400 !important;
            line-height: 19px !important
        }

    .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .dropDown ul {
        margin: 0;
        margin-top: 16px
    }

        .muslimSearchDataSection .filterArea .accordinSection .footerbody .accoList .dropDown ul li:hover {
            background-color: #F5F6F7 !important;
            border-radius: 4px !important
        }

.muslimSearchDataSection .filterArea .accordinSection .slider-track-high, .muslimSearchDataSection .filterArea .accordinSection .slider-track-low {
    background: var(--theme-colour1)
}

.muslimSearchDataSection .filterArea .overlayMore .content .contentWraper .filterData .searchSection .form-group .inputWrp.iconRight .formcontrol {
    color: #2d2d2d
}

.muslimSearchDataSection .featuredProfileList {
    grid-template-columns: 400px 1fr !important
}

@media (max-width: 1680px) {
    .muslimSearchDataSection .featuredProfileList {
        grid-template-columns: 300px 1fr !important
    }
}

@media (max-width: 991px) {
    .muslimSearchDataSection .featuredProfileList {
        grid-template-columns: 1fr !important
    }
}

.muslimSearchDataSection .searchData {
    padding-inline: 8px
}

    .muslimSearchDataSection .searchData .miniBannerSec {
        background-color: var(--theme-colour1);
        width: 100%;
        height: fit-content;
        padding: 43px 125px 43px 25px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        justify-items: end;
        position: relative
    }

@media (max-width: 1680px) {
    .muslimSearchDataSection .searchData .miniBannerSec {
        padding: 40px 100px 35px 25px
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .searchData .miniBannerSec {
        padding: 35px 50px 30px 25px
    }
}

@media (max-width: 1279px) {
    .muslimSearchDataSection .searchData .miniBannerSec {
        padding: 35px 25px 30px 25px;
        border-radius: 8px
    }
}

.muslimSearchDataSection .searchData .miniBannerSec::after {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    width: 160px;
    height: 100%;
    z-index: 0;
    background-image: url("../images/mini-bannerImg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    mix-blend-mode: normal
}

.muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper {
    z-index: 1;
    max-width: 846px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper .left {
        max-width: 480px
    }

        .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper .left h2 {
            font-size: 22px;
            font-weight: 500;
            line-height: 27px;
            color: #FFFFFF;
            margin-block-end: 8px
        }

@media (max-width: 1680px) {
    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper .left h2 {
        margin-block-end: 6px;
        font-size: 20px;
        line-height: 26px
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper .left h2 {
        margin-block-end: 4px;
        font-size: 18px;
        line-height: 26px
    }
}

.muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper .left p {
    margin: 0;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 400;
    line-height: 24px;
    text-align: left
}

.muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper button {
    border: none;
    min-width: 226px;
    width: fit-content;
    padding: 14px;
    background-color: #FFFFFF;
    border-radius: 8px
}

@media (max-width: 1680px) {
    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper button {
        min-width: 175px;
        padding: 12px
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper button {
        padding: 10px;
        min-width: 150px
    }
}

@media (max-width: 1279px) {
    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper button {
        min-width: 130px
    }
}

.muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper button span {
    margin: 0 auto;
    color: var(--theme-colour1);
    font-weight: 500;
    font-size: 20px;
    line-height: 24px
}

@media (max-width: 1680px) {
    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper button span {
        line-height: 24px;
        font-size: 18px
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .searchData .miniBannerSec .miniBannerSecwrapper button span {
        line-height: 24px;
        font-size: 16px
    }
}

.muslimSearchDataSection .searchData .Profile {
    grid-template-columns: 160px 1fr !important;
    padding: 28px !important;
    margin-block-start: 16px !important;
    border: 1px solid #F3F3F3 !important;
    transition: all .3s ease-in-out
}

@media (max-width: 680px) {
    .muslimSearchDataSection .searchData .Profile {
        padding: 20px 20px !important
    }
}

.muslimSearchDataSection .searchData .Profile:hover {
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.15)
}

@media (max-width: 680px) {
    .muslimSearchDataSection .searchData .Profile {
        grid-template-columns: 1fr !important
    }
}

.muslimSearchDataSection .searchData .Profile .photo {
    width: 160px !important;
    height: 200px !important;
    max-height: 200px !important;
    border-radius: 12px
}

    .muslimSearchDataSection .searchData .Profile .photo img {
        border-radius: inherit;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center
    }

.muslimSearchDataSection .searchData .Profile .content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding-top: 6px
}

@media (max-width: 1226px) {
    .muslimSearchDataSection .searchData .Profile .content {
        flex-wrap: wrap;
        gap: 5px
    }
}

.muslimSearchDataSection .searchData .Profile .content .middleContentWrap {
    max-width: 820px;
    width: 100%
}

.muslimSearchDataSection .searchData .Profile .content .topContent {
    flex-wrap: wrap
}

@media (max-width: 1680px) {
    .muslimSearchDataSection .searchData .Profile .content .topContent {
        margin-bottom: 8px
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .searchData .Profile .content .topContent {
        margin-bottom: 6px
    }
}

.muslimSearchDataSection .searchData .Profile .content .topContent .name, .muslimSearchDataSection .searchData .Profile .content .topContent .code {
    font-size: 20px !important;
    font-weight: 500;
    line-height: 24px !important;
    color: #2D2D2D !important
}

@media (max-width: 1680px) {
    .muslimSearchDataSection .searchData .Profile .content .topContent .name, .muslimSearchDataSection .searchData .Profile .content .topContent .code {
        font-size: 19px !important
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .searchData .Profile .content .topContent .name, .muslimSearchDataSection .searchData .Profile .content .topContent .code {
        font-size: 18px !important
    }
}

.muslimSearchDataSection .searchData .Profile .content .paraContent p {
    font-size: 16px !important;
    font-weight: 400;
    line-height: 24px !important;
    color: #434343 !important;
    margin-bottom: 34px !important;
    text-align: left
}

@media (max-width: 1680px) {
    .muslimSearchDataSection .searchData .Profile .content .paraContent p {
        margin-bottom: 28px !important
    }
}

@media (max-width: 1450px) {
    .muslimSearchDataSection .searchData .Profile .content .paraContent p {
        margin-bottom: 22px !important
    }
}

@media (max-width: 1199px) {
    .muslimSearchDataSection .searchData .Profile .content .paraContent p {
        margin-bottom: 18px !important
    }
}

@media (max-width: 1599px) {
    .muslimSearchDataSection .searchData .Profile .content .middleContent {
        grid-template-columns: 1fr 1fr !important
    }
}

@media (max-width: 1199px) {
    .muslimSearchDataSection .searchData .Profile .content .middleContent {
        grid-template-columns: 1fr !important
    }
}

.muslimSearchDataSection .searchData .Profile .content .middleContent .cmnClass {
    align-items: center
}

    .muslimSearchDataSection .searchData .Profile .content .middleContent .cmnClass .content {
        font-size: 16px !important;
        font-weight: 400;
        line-height: 19px !important;
        padding-top: 0 !important
    }

.muslimSearchDataSection .searchData .Profile .content .footerContent {
    display: grid !important;
    max-width: 142px;
    width: 100%;
    margin: 0 !important
}

    .muslimSearchDataSection .searchData .Profile .content .footerContent .right {
        gap: 8px !important
    }

@media (max-width: 480px) {
    .muslimSearchDataSection .searchData .Profile .content .footerContent .right {
        flex-direction: row !important
    }
}

.muslimSearchDataSection .searchData .Profile .content .footerContent .tooltipWrapper {
    position: relative
}

    .muslimSearchDataSection .searchData .Profile .content .footerContent .tooltipWrapper:hover .content {
        opacity: 1;
        visibility: visible
    }

    .muslimSearchDataSection .searchData .Profile .content .footerContent .tooltipWrapper .content {
        margin: 0 !important;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: -40px;
        right: 0px;
        white-space: nowrap;
        font-size: 12px !important;
        font-weight: 400;
        line-height: 14px !important;
        -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
        box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
        padding: 7px 10px !important;
        background: #FFFFFF;
        text-align: center;
        border-radius: 4px
    }

@media (max-width: 1226px) {
    .muslimSearchDataSection .searchData .Profile .content .footerContent .tooltipWrapper .content {
        display: none
    }
}

.muslimSearchDataSection .searchData .Profile .content .footerContent .tooltipWrapper .icon {
    margin-right: 0 !important;
    background-color: #F9FAFB !important
}

    .muslimSearchDataSection .searchData .Profile .content .footerContent .tooltipWrapper .icon svg path {
        fill: var(--theme-colour1)
    }

.muslimSearchDataSection .searchData .paggination .pagingNumberRow ul li a svg path {
    fill: var(--theme-colour1)
}

.muslimSearchDataSection .featuredProfileList {
    position: relative;
    z-index: 1
}

    .muslimSearchDataSection .featuredProfileList .filterSide {
        padding: 15px 5px !important
    }

@media (max-width: 991px) {
    .muslimSearchDataSection .featuredProfileList .filterSide .filterHead {
        padding-inline: 10px !important
    }
}

.muslimSearchDataSection:has(.filterSide.togClass) .featuredProfileList {
    position: static !important
}

.muslimSearchDataSection .separation {
    background-color: var(--theme-colour1) !important
}

.muslimSearchDataSection .shortList .icon, .muslimSearchDataSection .contact .icon, .muslimSearchDataSection .interst .icon {
    height: 42px !important;
    width: 42px !important
}

.muslimSearchDataSection .paggination .pageLink, .muslimSearchDataSection .paggination .prevArrow, .muslimSearchDataSection .paggination .nextArrow {
    background-color: #FFFFFF !important;
    border: 1px solid #F3F3F3 !important;
    color: var(--theme-colour1) !important
}

    .muslimSearchDataSection .paggination .pageLink:hover, .muslimSearchDataSection .paggination .prevArrow:hover, .muslimSearchDataSection .paggination .nextArrow:hover {
        background-color: var(--theme-colour1) !important;
        color: #FFFFFF !important
    }

    .muslimSearchDataSection .paggination .pageLink.active, .muslimSearchDataSection .paggination .prevArrow.active, .muslimSearchDataSection .paggination .nextArrow.active {
        background-color: var(--theme-colour1) !important;
        color: #FFFFFF !important
    }

.muslimSearchDataSection .default-popup .default-section .close-default-popup {
    display: flex;
    align-items: center;
    justify-content: center
}

.muslimSearchDataSection .default-popup .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    order: 1
}

.muslimSearchDataSection .default-popup .select2-container .select2-search--inline {
    order: 0
}

@media (max-width: 991px) {
    .muslimSearchDataSection .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown ul {
        margin-top: 0
    }
}

.muslimSearchDataSection .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown ul li {
    padding: 0;
    border-radius: 0
}

    .muslimSearchDataSection .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown ul li a {
        width: 100%;
        display: block;
        padding: 9px 8px;
        border-radius: 2px
    }

@media (max-width: 991px) {
    .muslimSearchDataSection .featuredProfileList .filterSide .filterArea .accordinSection .accordinInnerWrap .panel .footerbody .accoList .addedMartialStatusWraper .dropDown ul li a {
        padding: 0
    }
}

.muslimSearchDataSection .featuredProfileList .filterSide .filterArea.sepAccordion {
    padding: 32px 20px !important
}

@media (max-width: 991px) {
    .muslimSearchDataSection .featuredProfileList .filterSide .filterArea.sepAccordion {
        padding: 25px 18px !important
    }
}

@media (max-width: 680px) {
    .muslimSearchDataSection .featuredProfileList .filterSide .filterArea.sepAccordion {
        padding: 25px 10px !important
    }
}

.muslimSearchDataSection .overlayMore .content .contentWraper .moreContent .allCheckBoxData .checkBox .form-check-row .check-box .activeColor {
    color: var(--theme-colour1)
}

.muslimFooter-widget .footer-navigation-col strong, .muslimFooter-widget .footer-navigation-col a {
    font-size: 20px !important
}

@media (max-width: 1680px) {
    .muslimFooter-widget .footer-navigation-col strong, .muslimFooter-widget .footer-navigation-col a {
        font-size: 18px !important
    }
}

@media (max-width: 1279px) {
    .muslimFooter-widget .footer-navigation-col strong, .muslimFooter-widget .footer-navigation-col a {
        font-size: 16px !important
    }
}

.muslimFooter-widget .footer-navigation-col a:hover {
    color: var(--theme-colour1) !important
}

.muslimFooter-widget .socialMedia .icon svg rect {
    fill: var(--theme-colour1)
}

.muslimFooter-widget .footerLink .accordion {
    border: none !important;
    background-color: transparent;
    color: #252525;
    font-size: 16px !important;
    font-weight: 700
}

.muslimFooter-widget .footerLink .accoList ul li a {
    font-size: 16px !important;
    color: #252525 !important;
    font-weight: 400
}

.muslimCopy-right {
    background-color: var(--theme-colour1)
}

.minMaxSlider input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    border-radius: 1px;
    box-shadow: none;
    border: 0
}

.minMaxSlider input[type=range]::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #000000;
    cursor: pointer;
    -webkit-appearance: none
}

.minMaxSlider input[type=range]::-moz-range-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    animate: 0.2s;
    border-radius: 1px;
    box-shadow: none;
    border: 1px solid #2D2D2D
}

.minMaxSlider input[type=range]::-moz-range-thumb {
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px #000;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #000000;
    cursor: pointer
}

.minMaxSlider input[type=range]::-ms-track {
    width: 100%;
    height: 1px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: #2D2D2D;
    color: transparent
}

.minMaxSlider input[type=range]::-ms-fill-lower, .minMaxSlider input[type=range]::-ms-fill-upper {
    border-radius: 1px;
    box-shadow: none;
    border: 0
}

.minMaxSlider.range-slider input[type=range] {
    position: absolute;
    border-radius: 11px;
    padding-inline: 10px;
    inset: 0;
    background-color: #f2f2f2
}

.modalWidetSuccess.muslmModal .editor-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #434343;
    text-transform: uppercase;
    margin-bottom: 20px
}

.modalWidetSuccess.muslmModal .modalRowWarn {
    height: auto;
    padding: 30px
}

.modalWidetSuccess.muslmModal .inputRow {
    width: 100%
}

@media (max-width: 991px) {
    .modalWidetSuccess.muslmModal .inputRow {
        margin-bottom: 20px
    }
}

.modalWidetSuccess.muslmModal .editor-submit {
    background-color: var(--theme-colour1);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 218px;
    height: 46px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: ease-in-out 0.4s;
    margin: auto;
    text-transform: capitalize;
    margin-top: 20px
}

    .modalWidetSuccess.muslmModal .editor-submit:hover {
        background-color: var(--theme-colour2)
    }

.modalWidetSuccess.muslmModal .closeBTN .closeBtn {
    width: 30px;
    height: 30px;
    left: 461px;
    background-color: #dddddd;
    top: -207px;
    border-radius: 4px;
    z-index: 5
}

@media (max-width: 991px) {
    .modalWidetSuccess.muslmModal .closeBTN .closeBtn {
        top: -190px
    }
}

@media (max-width: 550px) {
    .modalWidetSuccess.muslmModal .closeBTN .closeBtn {
        top: 11px;
        left: auto
    }
}

.mobPh .select2-container--open .select2-dropdown {
    width: 130px !important
}
/*# sourceMappingURL=app.css.map */