:root {
    --primary-color: linear-gradient(90deg, #9333ea 0%, #db2777 100%);
    --secondary-color: #222227;
    --white: #fff;
    --black: #000;
    --gray-balck: #222227;
    --border-color: #e8e8e8;
    --text-color: #5c5c5c;
    --heading-color: #272643;
    --border-color: #ebebed;
    --gray-color: #727272;
    --sec-black: #101012;
}
body:has(.main) {
    background-color: var(--black);
}

body:has(.home) {
    background-color: var(--sec-black);
}
/* =============== hero-sec CSS ============================= */
.hero-sec {
    padding: 80px 0;
    overflow: hidden;
}
.hero-wrapper h1 {
    color: var(--white);
    text-align: center;
    font-size: 52px;
    line-height: 48px;
    background: linear-gradient(180deg, #D7277D 0%, #9E31D8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 30px;
}
.hero-wrapper .white-text{
    background: linear-gradient(45deg, white, white);
    background-clip: text;
}
.hero-wrapper .small-text{
    text-align: center;
    color: #fff;
    font-size: 34px !important;
    line-height: 48px !important;
    font-weight: 400 !important;
}
.hero-filter {
    padding:  36px;
    max-width: 1152px;
    margin: 0 auto 60px;
    border-radius: 15px;
    background-color: var(--gray-balck);
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
    gap: 15px;
}
.hero-filter > form {
    display: grid;
    grid-template-columns: 250px 250px auto;
    gap: 17px;
    grid-template-columns: 1fr 1fr 1fr;
}
.hero-filter .form-group .form-control {
    background-color: var(--gray-balck);
    border-radius: 10px;
    border: 1px solid #575a65;
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}
.hero-filter .form-group .form-control::placeholder {
    color: var(--white);
}

.form-search-btn {
    background: linear-gradient(90deg, #9333ea 0%, #db2777 100%);
    width: 44px;
    min-width: 58px;
    height: 58px;
    display: flex;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    /* position: absolute; */
    /* top: 50%; */
    right: 6px;
    border: 0;
    bottom: 0;
    /* transform: translateY(-50%); */
}

.top-search-head h2 {
    color: var(--white);
    font-size: 28px;
}
.formfield:has(.form-search-btn) .form-control {
    padding-right: 60px;
}
.more-filter .dropdown-toggle {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    padding: 1px;
    border-radius: 10px;
    width: 100%;
    min-height: 58px;
}
.more-filter .dropdown-toggle .dropdown-toggle-inner {
    background-color: var(--gray-balck);
    height: 100%;
    border-radius: 10px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    color: #fff;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}
.more-filter .dropdown-toggle::after {
    display: none;
}
.hero-filter .view-all-btn {
    min-height: 58px;
    padding: 10px;
    border-radius: 10px;
    min-width: 102px;
}

.more-filter-haed .nav-tabs{
    padding: 0;
}

.more-filter-btn {
    display: flex;
    align-items: center;
    gap: 15px;
}
.more-filter .dropdown-menu {
    width: 100%;
    min-width: 1116px;
    /* border: 1px solid; */
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    padding: 1px;
    border-radius: 12px;
    margin-top: 10px !important;
}
.more-filter .dropdown-menu .more-filter-inner {
    background-color: var(--gray-balck);
    border-radius: 12px;
    margin: 1px;
}

.more-filter-haed .nav {
    display: grid;
    grid-template-columns: repeat(9, auto);
    border: 0;
}
.more-filter-haed {
    padding: 30px 45px;
    border-bottom: 1px solid #f2f2f230;
}
.more-filter-haed .nav-tabs .nav-link:focus,
.more-filter-haed .nav-tabs .nav-link:hover {
    border-color: transparent;
}
.more-filter-haed .nav-tabs .nav-item .nav-link.active {
    color: var(--white);
    background-color: #ffffff00;
    border-color: transparent;
    font-weight: 700;
}
.more-filter-haed .nav-tabs .nav-item .nav-link {
    color: #b0b0b0;
    font-size: 18px;
    font-weight: 400;
    line-height: 23px;
}
.more-filter-body {
    padding: 20px 45px;
    border-bottom: 1px solid #f2f2f230;
    max-height: 320px;
    min-height: 130px;
    overflow: auto;
}

.more-filter-haed ul li:first-child button{
    padding-left: 0 !important;
} 

.more-filter-haed ul li:last-child button{
    padding-right: 0 !important;
} 

.custom-checkbox label {
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    padding-left: 30px;
    position: relative;
    cursor: pointer;
}

.custom-checkbox label::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border: 2px solid #f2f2f2;
    border-radius: 4px;
}
.custom-checkbox:has(input:checked) label::after {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border: none;
}
.custom-checkbox label::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(314deg);
    z-index: 1;
    display: none;
}
.custom-checkbox:has(input:checked) label::before {
    display: block;
}
#morefilter1 .more-filter-content {
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: 25px;
}

 .more-filter-content {
    display: flex;
    gap: 45px;
}
.more-filter-footer {
    padding: 20px 38px;
}
.more-filter-footer .flex-end-div .primary-btn {
    border-radius: 10px;
    min-width: 85px;
    min-height: 55px;
    padding: 10px;
    font-weight: 600;
}
.hero-slider-card {
    position: relative;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.hero-slider-card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(33, 34, 38, 0) 0%,
        #000000 100.17%
    );
    top: 0;
    left: 0;
}
.hero-slider-card-content {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.hero-slider-card-content h3 {
    text-align: left;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
}
.hero-slider-card-content p {
    text-align: center;
    font-size: 14px;
    color: #b0b0ae;
}
.hero-slide {
    position: relative;
}
.swiper-button-next,
.swiper-button-prev {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50%;
    background-image: linear-gradient(
        180deg,
        #d7277d 0%,
        #9e31d8 100%
    ) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: unset !important;
    background-repeat: unset !important;
    background-size: unset !important;
}
.swiper-button-next svg path,
.swiper-button-prev svg path {
    fill: #fff;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: 0.8;
    cursor: auto;
    pointer-events: none;
    background-color: #000;
    background-image: unset !important;
    border: 1px solid #fff;
}
.swiper-button-prev.swiper-button-disabled svg path,
.swiper-button-next.swiper-button-disabled svg path {
    fill: #b72db1;
}
/* .swiper-slide.hero-slider-card.swiper-slide-active {
    scale: 1.1;
    transform: translateY(-10px);
    transition: all 0.6s ease;
    background: linear-gradient(180deg, white, #101012);
    padding: 1px;
} */
.swiper-slide.hero-slider-card:hover{
    scale: 1.1 !important;
    transform: translateY(-10px) !important;
    transition: all 0.6s ease;
    background: linear-gradient(180deg, white, #101012);
    padding: 1px;
}
.swiper-slide.hero-slider-card > img{
    border-radius: 20px 20px 0px 0px;
}

.hero-slide-wrap h2 {
    font-size: 24px;
    line-height: 51px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 15px;
}
.hero-slide-wrap {
    position: relative;
}
.hero-slide-wrap::after {
    content: "";
    position: absolute;
    width: 227px;
    height: 332px;
    /* background: linear-gradient(
        232deg,
        rgba(16, 16, 18, 0) -41.79%,
        #101012 93.9%
    ); */
    background: linear-gradient(90deg, rgba(16, 16, 18, 0) -41.79%, #101012 93.9%);

    top: 48px;
    right: -157px;
    z-index: 2;
    mix-blend-mode: multiply;
    filter: blur(50px);
}
.hero-slide-wrap::before {
    content: "";
    position: absolute;
    width: 227px;
    height: 332px;
    /* background: linear-gradient(
        232deg,
        rgba(16, 16, 18, 0) -41.79%,
        #101012 93.9%
    ); */
    background: linear-gradient(90deg, rgba(16, 16, 18, 0) -41.79%, #101012 93.9%);

    top: 48px;
    left: -157px;
    z-index: 2;
    mix-blend-mode: multiply;
    filter: blur(50px);
    transform: rotate(-180deg);
}

.hero-slide.swiper-container-horizontal::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 100%;
    right: -157px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(33, 34, 38, 0) 0%, #000000 92.17%);
    top: 0;
    filter: blur(80px);
    mix-blend-mode: multiply;
    filter: blur(50px);
}

.hero-slide.swiper-container-horizontal::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 100%;
    left: -157px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(33, 34, 38, 0) 0%, #101012 92.17%);
    top: 0;
    filter: blur(80px);
    mix-blend-mode: multiply;
    filter: blur(50px);
}




/* =============== hero-sec CSS ============================= */

/* =================== top-serach CSS ======================== */

section.top-search-section {
    padding: 1px 0 0;
    position: relative;
}
section.top-search-section::after {
    background: linear-gradient(
        90deg,
        #101012 15%,
        #d7277d 34.5%,
        #9e31d8 65%,
        #101012 85%
    );
    content: "";
    position: absolute;
    width: 100%;
    height: 98%;
    top: -2px;
    left: 0;
    border-radius: 30px;
    z-index: 0;
}
.top-search-section-inner {
    background: linear-gradient(180deg, #222227 -54.55%, #101012 68.38%);
    z-index: 1;
    position: relative;
    padding: 55px 0 246px;
}
.top-search-card {
    border-radius: 15px;
    padding: 15px;
    background-color: var(--gray-balck);
}
.top-search-card .top-search-img img {
    transition: all 0.6s ease;
}
.top-search-card:hover .top-search-img img {
    scale: 1.1;
}
.top-search-img {
    width: 100%;
    height: 206px;
    overflow: hidden;
    border-radius: 12px;
}
.top-search-img img,
.top-search-img video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-search-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 30px;
}
.top-search-head-left h3 {
    color: var(--white);
    font-size: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 15em;
    line-height: 1.5;
}
.top-search-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.top-search-content {
    padding: 18px 0 15px;
}
.top-search-head span {
    color: var(--white);
    font-size: 14px;
    white-space: nowrap;
}
.top-search-content > p {
    font-size: 15px;
    color: #b0b0b0;
    line-height: 23px;
    margin: 0 0 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 23em;
    line-height: 1.5;
}
.top-search-loc {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}
.top-search-loc p,
.top-search-eye p {
    color: #b0b0b0;
    font-size: 15px;
}
.top-search-eye {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-search-head-left img {
    height: 20px;
}

.top-search-content .top-search-head{
    margin-bottom: 20px;
}

.fw-600{
    font-weight: 600 !important;
}
/* =================== top-serach CSS ======================== */

/* ================== Discover Sec CSS ========================= */

.discover-section {
    background-color: var(--sec-black);
    position: relative;
    padding: 86px 0 118px;
}
.discover-wrapper {
    max-width: 1298px;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}
.discover-left-content h2 {
    font-size: 86px;
    line-height: 88px;
    margin: 0 00 10px;
    color: var(--white);
}
.discover-left-content  h4{
    font-size: 23px;
    line-height: 44px;
    margin: 0 0 23px;
    color: var(--white);
    font-weight: 400;
    text-transform: capitalize;
}
.discover-left-content p {
    font-size: 16px;
    line-height: 26px;
    color: #b0b0b0;
    margin: 0 0 25px;
    text-align: justify;
    max-width: 607px;
}
.discover-left-content p span {
    color: var(--white);
    font-style: italic;
    font-weight: 700;
}
.discover-left-content a.primary-btn {
    border-radius: 15px;
}
.bg-linaer-gred {
    font-size: 360px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -4px;
    background: linear-gradient(
        180deg,
        rgb(255 255 255 / 4%) 22%,
        #101012a3 77%
    );
    /* background: linear-gradient(to right, red, blue); */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: -253px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
img.six-image {
    position: absolute;
    top: 137px;
    left: -198px;
}

/* ================== Discover Sec CSS ========================= */

/* ==================== footer sec CSS ========================= */
footer {
    background-color: var(--sec-black);
}
.footer-wrapper {
    background-color: var(--gray-balck);
    padding: 48px 92px 0 78px;
    border-radius: 40px 40px 0 0;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 66px;
}
.footer-left {
    max-width: 398px;
    width: 100%;
}
.footer-left p {
    color: var(--white);
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
}
.footer-logo {
    margin: 0 0 16px;
}
.footer-right {
    display: flex;
    max-width: 770px;
    width: 100%;
    justify-content: space-between;
}
.footer-right .footer-links h3 {
    color: var(--white);
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 27px;
}
.footer-links-list {
    display: flex;
    gap: 60px;
}
.footer-links-list ul li .footer-link {
    color: var(--white);
    font-size: 16px;
    line-height: 25px;
    display: inline-flex;
    white-space: nowrap;
    gap: 12px;
    align-items: center;
    position: relative;
}
.footer-links-list ul li + li {
    margin-top: 25px;
}
.footer-links-list ul li .footer-link span {
    display: flex;
    flex: 0 0 20px;
}
.footer-right .footer-links:first-child .footer-links-list .footer-link:before {
    content: "";
    height: 1px;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transition: 0.6s;
    display: block;
}
.footer-right
    .footer-links:first-child
    .footer-links-list
    .footer-link:hover::before {
    width: 100%;
}
.footer-bottom {
    padding: 26px 0;
    border-top: 1px solid #ffffff2b;
}
.footer-bottom p {
    text-align: center;
    color: #ffffff79;
}

/* ==================== footer sec CSS ========================= */

/* ======================= profile-page CSS ======================= */

section.profile-page-section {
    padding: 20px 0 75px;
}
.pro-sliderwrapper {
    overflow: hidden;
    margin: 0 0 48px;
}
.profile-slide-box img {
    width: 100%;
    max-height: 637px;
}
.pro-button-prev,
.pro-button-next {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    right: 35px;
}
.pro-button-prev {
    transform: translateY(-50%) rotate(180deg);
    right: auto;
    left: 35px;
}
.pro-slider {
    position: relative;
}
.nav-tabs {
    border-bottom: 0;
    box-shadow: 0px 313px 87px 0px #00000000;
    background-color: var(--gray-balck);
    padding: 5px;
    display: inline-flex;
    border-radius: 12px;
}
.bio-content-nav .nav-tabs .nav-item button {
    color: var(--white);
    margin-bottom: 0;
    border: 0;
    border-radius: 8px;
    font-size: 18px;
}
.bio-content-nav .nav-tabs .nav-item button.nav-link.active {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border: 0;
}
.bio-content-nav {
    margin: 0 0 18px;
}
.bio-exclusive-content {
    display: flex;
    gap: 20px;
}
.bio-exclusive-right {
    max-width: 481px;
    width: 100%;
}
.bio-exclusive-left {
    width: 100%;

}
.follow-exclusive {
    background-color: var(--gray-balck);
    padding: 20px 16px;
    border-radius: 15px;
    margin: 0 0 28px;
}
.exclusive-follow-box .primary-btn {
    min-height: 55px;
    border-radius: 10px;
    margin: 0 0 18px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    font-weight: 600;
    font-size: 22px;
}
.exclusive-card .exclusive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px;
}
.exclusive-card .exclusive-card-header h3 {
    color: var(--white);
    font-size: 20px;
    line-height: 24px;
}
.exclusive-card p {
    color: var(--white);
    font-size: 16px;
    margin: 0 0 40px;
}
.exclusive-card {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    padding: 30px 25px;
    border-radius: 10px;
}
.white-btn {
    background-color: var(--white);
    color: var(--sec-black);
    min-height: 55px;
    border-radius: 10px;
    font-weight: 600;
}
.bio-exclusive-btns {
    display: flex;
    align-items: center;
    gap: 18px;
}
a.gradient-outline-btn.full-btn {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border-radius: 10px;
    min-height: 50px;
    padding: 1px;
    transition: all 0.6s ease;
    &:hover {
        scale: 0.9;
    }
}
.gradient-outline-inner {
    background-color: var(--black);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    min-height: 48px;
    gap: 5px;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
}
a.whatsaap-btn {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #22c55e;
    border-radius: 10px;
    gap: 6px;
    color: #3bf25e;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.6s ease;
    &:hover {
        scale: 0.9;
    }
}
.bio-exclusive-left {
    padding: 30px 40px 40px;
    background-color: #222227;
    border-radius: 15px;
}
.bio-profile-box {
    width: 181px;
    height: 181px;
    min-width: 181px;
    overflow: hidden;
    border-radius: 50%;
    overflow: hidden;
    padding: 5px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}
.bio-profile-box img {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.pro-bio-header {
    display: flex;
    align-items: center;
    gap: 23px;
    margin: 0 0 32px;
}
.bio-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.bio-profile-head h2 {
    color: var(--white);
    font-size: 56px;
    margin: 0 0 23px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 15em;
    line-height: 1.5;
}
.bio-profile-head img {
    width: 38px;
    margin-top: 20px;
}
.bio-profile-head p {
    color: var(--white);
    font-size: 24px;
    line-height: 26px;
}
.bio-content-para > p {
    color: var(--white);
    font-weight: 600;
    max-height: 265px;
    overflow: auto;
}
.bio-content-para > p::-webkit-scrollbar {
    width: 2px;
}
.bio-content-para > p + p {
    margin-top: 15px;
}
.bio-content-stats {
    display: flex;
    align-items: center;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid rgb(79 79 79 / 10%);
    gap: 30px;
}
.bio-content-stats p {
    color: var(--white);
    font-weight: 600;
}
.bio-content-stats p:last-child {
    position: relative;
}
.bio-content-stats p:last-child::after {
    content: "";
    position: absolute;
    left: -13px;
    height: 21px;
    width: 1px;
    background-color: #f2f2f230;
    top: 2px;
}
.bio-content-box {
    display: flex;
    gap: 32px;
}
.bio-content-right {
    max-width: 380px;
    width: 100%;
    min-width: 380px;
}
.bio-content-listing {
    border: 1px solid #4F4F4F;
    padding: 30px 40px;
    border-radius: 10px;
    max-height: 527px;
    overflow: auto;
}
.bio-content-list-box h5 {
    color: var(--white);
    font-size: 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
ul.bio-content-list li {
    color: var(--white);
    padding-left: 30px;
    position: relative;
    font-weight: 600;
    word-wrap: break-word;
}
ul.bio-content-list li + li {
    margin-top: 15px;
}
.bio-content-left {
    width: 100%;
    /* height: 100%; */
}
ul.bio-content-list li:first-child {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_434_6850)'%3E%3Cpath d='M17.9564 2.75097C16.1823 0.97686 13.8234 -9.92265e-05 11.3146 7.55898e-09C10.9034 7.55898e-09 10.5703 0.333228 10.5703 0.744255C10.5703 1.15528 10.9035 1.48851 11.3146 1.48851C13.4259 1.48841 15.4108 2.31056 16.9038 3.80354C18.3969 5.29652 19.2191 7.28159 19.219 9.39299C19.219 9.80402 19.5521 10.1372 19.9632 10.1372C20.3742 10.1372 20.7075 9.80402 20.7075 9.39309C20.7076 6.88396 19.7306 4.52507 17.9564 2.75097Z' fill='url(%23paint0_linear_434_6850)'/%3E%3Cpath d='M14.8948 9.39314C14.8948 9.80416 15.2281 10.1374 15.6392 10.1373C16.0502 10.1373 16.3833 9.80407 16.3833 9.39304C16.3831 6.59861 14.1093 4.32486 11.3147 4.32446C11.3146 4.32446 11.3148 4.32446 11.3147 4.32446C10.9036 4.32446 10.5704 4.65759 10.5703 5.06862C10.5703 5.47965 10.9034 5.81287 11.3145 5.81297C13.2885 5.81327 14.8946 7.41927 14.8948 9.39314Z' fill='url(%23paint1_linear_434_6850)'/%3E%3Cpath d='M13.2481 13.1878C12.1136 13.129 11.5357 13.9727 11.2585 14.378C11.0264 14.7173 11.1133 15.1804 11.4526 15.4125C11.7919 15.6446 12.255 15.5577 12.4871 15.2184C12.8146 14.7396 12.963 14.6643 13.1642 14.6738C13.8083 14.7495 16.3453 16.6086 16.5993 17.1899C16.663 17.3611 16.6606 17.5289 16.5923 17.733C16.3259 18.5235 15.885 19.079 15.317 19.3394C14.7774 19.5868 14.1158 19.5644 13.4042 19.2748C10.747 18.1918 8.42549 16.6803 6.50432 14.7824C6.50353 14.7816 6.50273 14.7809 6.50204 14.7801C4.60806 12.8608 3.09941 10.5423 2.01815 7.88918C1.72849 7.17698 1.70606 6.51529 1.95345 5.97575C2.21384 5.40774 2.76935 4.96684 3.55916 4.70079C3.76398 4.63212 3.93148 4.62994 4.10107 4.69305C4.68447 4.94799 6.54342 7.4848 6.61844 8.12169C6.62916 8.33048 6.55325 8.47873 6.07484 8.80561C5.73546 9.03742 5.64823 9.50054 5.88014 9.83992C6.11195 10.1793 6.57498 10.2664 6.91446 10.0346C7.31993 9.75776 8.16342 9.18141 8.10487 8.04309C8.04037 6.85407 5.72742 3.70528 4.62225 3.29891C4.13074 3.11573 3.61374 3.11255 3.08502 3.28998C1.8954 3.69059 1.03623 4.40488 0.600396 5.35554C0.177659 6.27782 0.191055 7.34786 0.639593 8.45055C1.79676 11.2898 3.41576 13.7742 5.45155 15.8348C5.45651 15.8398 5.46157 15.8448 5.46673 15.8496C7.52584 17.8816 10.0073 19.4977 12.8428 20.6535C13.4106 20.8844 13.9698 21 14.5046 21C15.0081 21 15.4902 20.8976 15.9373 20.6926C16.8881 20.2568 17.6023 19.3977 18.0032 18.2073C18.1802 17.6796 18.1773 17.1628 17.9955 16.6736C17.5878 15.5654 14.439 13.2525 13.2481 13.1878Z' fill='url(%23paint2_linear_434_6850)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_434_6850' x1='15.6389' y1='0' x2='15.6389' y2='10.1372' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_434_6850' x1='13.4768' y1='4.32446' x2='13.4768' y2='10.1373' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_434_6850' x1='9.21345' y1='3.15918' x2='9.21345' y2='21' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_434_6850'%3E%3Crect width='21' height='21' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 0px 2px;
}
ul.bio-content-list li:last-child {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3491 5.36249C16.9947 2.52311 14.2034 0.728738 11.0616 0.687488C7.91281 0.646238 5.12156 2.37874 3.71906 5.22499C2.26156 8.17436 2.60531 11.5912 4.62656 14.1556L9.84468 20.7831C10.1128 21.12 10.5116 21.3125 10.9378 21.3125C11.3641 21.3125 11.7628 21.12 12.0309 20.7831L17.3866 13.9769C19.3322 11.5019 19.6966 8.20874 18.3491 5.36936V5.36249ZM16.3141 13.1244L10.9309 19.9306L5.71281 13.3031C4.02843 11.165 3.73968 8.29811 4.95656 5.83686C6.12531 3.47186 8.35968 2.06936 10.9447 2.06936H11.0478C13.7016 2.11061 15.9703 3.56124 17.1116 5.96061C18.2528 8.35999 17.9572 11.0344 16.3141 13.1244Z' fill='url(%23paint0_linear_434_6825)'/%3E%3Cpath d='M10.9383 4.92249C8.86895 4.92249 7.18457 6.60686 7.18457 8.67624C7.18457 10.7456 8.86895 12.43 10.9383 12.43C13.0077 12.43 14.6921 10.7456 14.6921 8.67624C14.6921 6.60686 13.0077 4.92249 10.9383 4.92249ZM10.9383 11.0481C9.6252 11.0481 8.55957 9.98249 8.55957 8.66936C8.55957 7.35624 9.6252 6.29061 10.9383 6.29061C12.2514 6.29061 13.3171 7.35624 13.3171 8.66936C13.3171 9.98249 12.2514 11.0481 10.9383 11.0481Z' fill='url(%23paint1_linear_434_6825)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_434_6825' x1='10.9894' y1='0.686768' x2='10.9894' y2='21.3125' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_434_6825' x1='10.9383' y1='4.92249' x2='10.9383' y2='12.43' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 0px 2px;
}
ul.bio-content-list.bio-same-list li {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_434_6828)'%3E%3Cpath d='M15.1415 7.16828C15.4619 7.48872 15.4619 8.00814 15.1415 8.32841L9.63835 13.8317C9.31792 14.152 8.79865 14.152 8.47822 13.8317L5.85851 11.2118C5.53807 10.8916 5.53807 10.3721 5.85851 10.0519C6.17878 9.73144 6.6982 9.73144 7.01848 10.0519L9.0582 12.0916L13.9814 7.16828C14.3018 6.84801 14.8212 6.84801 15.1415 7.16828ZM21 10.5C21 16.3039 16.3031 21 10.5 21C4.69613 21 0 16.3031 0 10.5C0 4.69613 4.69693 0 10.5 0C16.3039 0 21 4.69693 21 10.5ZM19.3594 10.5C19.3594 5.60296 15.3964 1.64062 10.5 1.64062C5.60296 1.64062 1.64062 5.6036 1.64062 10.5C1.64062 15.397 5.6036 19.3594 10.5 19.3594C15.397 19.3594 19.3594 15.3964 19.3594 10.5Z' fill='url(%23paint0_linear_434_6828)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_434_6828' x1='10.5' y1='0' x2='10.5' y2='21' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_434_6828'%3E%3Crect width='21' height='21' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 0px 2px;
}
.bio-content-list-box + .bio-content-list-box {
    margin-top: 40px;
}
.bio-content-para {
    margin-top: 15px;
}
.photo-video-tab .nav-tabs {
    display: flex;
    padding: 0;
    gap: 45px;
    border-bottom: 1px solid #f2f2f23b;
    border-radius: 0;
}
.photo-video-tab .nav-tabs .nav-item button {
    padding: 0;
    border: 3px solid;
    background: linear-gradient(90.26deg, #d7277d 0.1%, #9e31d8 50.22%);
    border: 0;
    color: var(--white);
    font-size: 24px;
    line-height: 26px;
    font-weight: 700;
    padding-bottom: 0px;
}
.photo-video-tab .nav-tabs .nav-item button div {
    background-color: var(--gray-balck);
    padding-bottom: 30px;
}
.photo-video-tab .nav-tabs .nav-item button.active {
    padding-bottom: 2px;
}
.exclusive-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin: 27px 0 0;
}
.exclusive-img-card {
    height: 236px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}
p.exclusive-img-content {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 15em;
    line-height: 1.5;
}
.exclusive-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pay-with-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 15px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 1;
}
.pay-with-time-left {
    display: flex;
    align-items: center;
    gap: 8px;
    display: none;
}
.pay-badge {
    height: 29px;
    width: 41px;
    background: linear-gradient(90deg, #9333ea 0%, #db2777 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.lock-content {
    object-fit: unset !important;
    position: absolute;
    z-index: 1;
    left: 50%;
    width: unset !important;
    height: unset !important;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: none;
    z-index: 1;
}
.pay-with-time > p {
    display: none;
}
.exclusive-img-card::after {
    background: linear-gradient(
        180deg,
        rgba(16, 16, 18, 0) 37.77%,
        #000000 100%
    );
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
}
.exclusive-img-card.lock .pay-with-time > p {
    display: block;
}
.exclusive-img-card.lock .lock-content {
    display: block;
}
.exclusive-img-card.lock .pay-with-time-left {
    display: flex;
}
.exclusive-img-card.lock img.exclusive-content-img,
.exclusive-img-card.lock video {
    filter: blur(5px);
}
.exclusive-img-slider .swiper-slide {
    height: 236px;
}
.exclusive-img-grid .exclusive-img-card video {
    position: relative;
    z-index: 1;
    object-fit: cover;
}

.pro-bio-content {
    margin: 0 0 75px;
}
.also-like-content h2 {
    font-size: 28px;
    line-height: 30px;
    margin: 0 0 28px;
    color: var(--white);
}
body:has(.profile-page-section) footer {
    background-color: #000000;
}
.payment-details-modal .modal-dialog {
    max-width: 537px;
}
.payment-details-modal .modal-content {
    border-radius: 20px;
    background-color: var(--gray-balck);
    overflow: hidden;
}
.payment-details-modal .modal-body {
    background-color: var(--gray-balck);
    padding: 35px 40px;
}
.payment-modal-box h3 {
    text-align: center;
    color: var(--white);
    font-size: 28px;
    line-height: 30px;
    margin: 0 0 23px;
}
.payment-modal-box p {
    text-align: center;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 15px;
    gap: 7px;
    font-size: 18px;
    font-weight: 600;
}

.payment-modal-box hr {
    background-color: #F2F2F2;
    margin: 15px 0px 30px;
}
.hero-slider-card {
    height: auto;
    transition: all 0.3s ease;
}
.check-amount-card {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    padding: 20px;
    border-radius: 10px;
    margin: 0 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.checkbox-amount {
    display: flex;
}
.check-amount-card {
    position: relative;
    cursor: pointer;
}
.check-amount-card::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 30px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--white);
    border-radius: 5px;
    background-color: var(--white);
}
.check-amount-card::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 26px;
    transform: rotate(320deg);
    width: 12px;
    height: 7px;
    border-left: 2px solid #ac2ec1;
    border-bottom: 2px solid #d02888;
    z-index: 1;
    display: none;
}
.check-amount-card:has(input:checked)::before {
    display: block;
}
.checkbox-amount h4 {
    color: var(--white);
    font-size: 20px;
    line-height: 22px;
    margin-left: 30px;
    margin-bottom: 20px;
}
.check-amount-right h4 {
    font-size: 20px;
    color: var(--white);
    line-height: 22px;
}
.check-amount-left p {
    color: var(--white);
    margin-left: 30px;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 0;
}
.white-outline-btn {
    border: 1px solid var(--white);
    color: var(--white);
    &:hover {
        color: var(--white);
    }
}
a.modal-close {
    position: absolute;
    top: 38px;
    right: 40px;
    cursor: pointer;
}

/* ======================= profile-page CSS ======================= */

/* ========================= exclusive content CSS ======================= */

section.exclusive-content-sec {
    padding: 70px 0;
}
body:has(.exclusive-content-sec) footer {
    background-color: var(--black);
}
.exclusive-content-wrapper h2 {
    text-align: center;
    font-size: 28px;
    margin: 0 0 26px;
    line-height: 30px;
    color: var(--white);
}
.exclusive-content-tabs .nav-tabs {
    border-bottom: 0;
    box-shadow: 0px 313px 87px 0px #00000000;
    background-color: var(--gray-balck);
    padding: 5px;
    display: flex;
    border-radius: 12px;
    margin: 0 auto 26px;
    align-items: center;
    justify-content: center;
    max-width: 331px;
}
.exclusive-content-tabs .nav-tabs .nav-link {
    margin-bottom: 0px;
    background: 0 0;
    border: 0;
    font-size: 18px;
    color: #fff;
}
.exclusive-content-tabs .nav-tabs .nav-link.active {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border: 0;
    border-radius: 8px;
}
.exclusive-content-collections .exclusive-img-card {
    height: 372px;
}

/* ========================= exclusive content CSS ======================= */

/* ===================== profile page client css ============================= */

section.profile-section {
    padding: 50px 0 150px;
}
.profile-wrapper {
    max-width: 1040px;
    margin: 0 auto;
}
.profile-wrapper.change {
    max-width: 738px;
}
.profile-card {
    border-radius: 15px;
    padding: 45px 40px;
    background-color: var(--gray-balck);
}
.profile-wrapper > h2 {
    text-align: center;
    font-size: 28px;
    line-height: 30px;
    margin: 0 0 26px;
    text-transform: capitalize;
    color: var(--white);
}
.profile-flex {
    display: flex;
    gap: 40px;
}
.client-profile-box {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    padding: 4px;
    border-radius: 50%;
    overflow: hidden;
    width: 158px;
    min-width: 158px;
    height: 158px;
}
.client-profile-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-heading-para h3 {
    color: var(--white);
    font-size: 56px;
    line-height: 58px;
    margin: 0 0 23px;
}
.profile-heading-para p {
    font-size: 24px;
    line-height: 26px;
    margin: 0 0 27px;
    color: var(--white);
}
.linear-gredient-btn {
    min-height: 60px;
    border: 1.91px solid;
    background-image: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    min-width: 152px;
    border-radius: 5px;
    padding: 1px;
    transition: all 0.6s ease;
    border: 0px !important;
    &:hover {
        scale: 0.9;
    }
}
.linear-gredient-inner {
    background-color: var(--gray-balck);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 58px;
    border-radius: 5px;
    color: #fff;
    border: 0px !important;
}
.client-profile-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}
.client-profile-content {
    width: 100%;
}
.profile-details-box {
    background-color: #2f2f35;
    border-radius: 10px;
    padding: 23px 26px;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 30px;
    width: fit-content;
}
.profile-details-stats {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.profile-details-stats img {
    margin-top: 2px;
}
.profile-details-stats p {
    color: var(--white);
    font-size: 16px;
    line-height: 24px;
}
.client-profile-head {
    padding-bottom: 30px;
    border-bottom: 1px solid #f2f2f230;
}
.client-profile-body {
    padding: 30px 0;
    border-bottom: 1px solid #f2f2f230;
    max-height: 300px;
    overflow: auto;
}
.client-profile-body::-webkit-scrollbar {
    width: 2px; 
}
.client-profile-body > p + p {
    margin-top: 15px;
}
.client-profile-body > p {
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
}
.client-profile-footer {
    padding: 55px 0 0;
}
.prefer-box p {
    color: #fff;
    margin: 0 0 10px;
}
.client-profile-footer .primary-btn {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}
body:has(.profile-section) footer {
    background-color: var(--black);
}

/* ===================== profile page client css ============================= */

/* ================== eighteen plus modal ======================== */

.eighteen-plus-modal .modal-content {
    border-radius: 20px;
    background-color: var(--gray-balck);
    overflow: hidden;
}
.eighteen-plus-modal .modal-dialog {
    max-width: 583px;
}
.eighteen-plus-modal .modal-body {
    padding: 30px 45px 45px;
    background-color: var(--gray-balck);
}
.eighteen-plus {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.eighteen-plus img {
    margin: 0 0 16px;
}

.eighteen-plus h2 {
    font-size: 36px;
    line-height: 49px;
    text-align: center;
    color: var(--white);
    text-transform: capitalize;
    margin: 0 0 6px;
}
.eighteen-plus p {
    text-align: center;
    color: var(--white);
    margin: 0 0 37px;
    font-size: 18px;
    font-weight: 600;
    opacity: 0.7;
    max-width: 357px;
}
.eighteen-plus .primary-btn,
.eighteen-plus .linear-gredient-btn {
    text-transform: capitalize;
}
.eighteen-plus-modal .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

/* ================== eighteen plus modal ======================== */

/* ===================== profile-page client edit page ================== */

.setting-profile-box-inner {
    width: 158px;
    height: 158px;
    min-width: 158px;
    border-radius: 50%;
    overflow: hidden;
    padding: 5px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}
.acc-setting-profile-box img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-upload {
    background-color: #fff;
    z-index: 1;
    width: 35px;
    height: 35px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    bottom: 8px;
    right: 6px;
}
.account-setting-profile {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.acc-setting-profile-box {
    cursor: pointer;
}
.acc-setting-profile-box {
    position: relative;
    width: fit-content;
}
.account-setting-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0 0 30px;
}
.account-setting-field .flex-end-div .primary-btn {
    max-width: 269px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}
.account-setting-field .flex-end-div {
    padding: 30px 0 30px;
    border-bottom: 1px solid #f2f2f223;
}
.check-field-box {
    background-color: #2f2f35;
    padding: 15px;
    border-radius: 5px;
    margin: 0 0 10px;
}
.custom-checkfield {
    display: flex;
    align-items: center;
    gap: 5px;
}
.custom-checkfield p {
    color: #fff;
}
.check-field-box h3 {
    font-size: 16px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 500;
}
.check-field-inner {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.custom-checkfield p {
    font-size: 13px;
    font-weight: 600;
}
.check-field-inner .custom-checkfield {
    padding: 6px;
    margin: 0;
    border: 2px solid #575a65;
    border-radius: 10px;
    cursor: pointer;
}
.check-field-inner .custom-checkfield:has(input:checked) {
    background: linear-gradient(90deg, #9333ea 0%, #db2777 100%);
    /* border: 2px solid transparent; */
}
.check-field-inner .custom-checkfield input {
    display: none;
}

/* ===================== profile-page client edit page ================== */

/* ===================== Payment-hostory CSS ========================== */

body:has(.payment-section) footer {
    background-color: var(--black);
}
.payment-section {
    padding: 70px 0;
}
.payment-his-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 40px;
    border-bottom: 1px solid #f2f2f238;
}
.payment-his-left h2 {
    font-size: 28px;
    line-height: 30px;
    margin: 0 0 24px;
    color: var(--white);
}
.payment-his-left p {
    font-size: 16px;
    line-height: 18px;
    color: var(--white);
}
.payment-his-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.payment-his-table table.table {
    border-collapse: separate;
    border-spacing: 0 15px;
    margin: 0;
    border: 0;
    width: 99%;
    margin: 0 auto;
}
.payment-his-right .linear-gredient-btn,
.payment-his-right .primary-btn {
    min-height: 55px;
}
.payment-his-right .primary-btn {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}
.payment-his-table table tr td {
    background-color: var(--gray-balck);
    padding: 20px 45px;
    font-weight: 600;
    color: var(--white);
    border: 0;
}
.payment-his-table table tr th {
    border: 0;
    padding: 10px 45px;
    font-size: 18px;
    line-height: 20px;
    color: #b0b0b0;
    font-weight: 600;
}
.payment-his-table table tbody tr {
    position: relative;
}
.payment-his-table table tbody tr td:first-child {
    border-radius: 10px 0 0 10px;
}
.payment-his-table table tbody tr td:last-child {
    border-radius: 0px 10px 10px 0px;
}
.payment-his-table table tbody tr::after {
    content: "";
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    position: absolute;
    z-index: -1;
    border-radius: 10px;
    display: none;
    transition: all 0.6s ease;
}
.payment-his-table table tbody tr:hover::after {
    display: block;
}
.status-text {
    position: relative;
}
.status-text::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 8px;
    background-color: #22c55e;
    width: 9px;
    height: 9px;
    border-radius: 50px;
}

/* ===================== Payment-hostory CSS ========================== */

/* ===================== plans css ============================ */
section.plan-section {
    padding: 20px 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/plans-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.plan-box {
    padding: 65px 60px;
    background-color: #101012;
    border-radius: 20px;
    backdrop-filter: blur(42px);
}

.plan-box-inner {
    max-width: 1152px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}
.plans-card {
    padding: 30px;
    border: 1px solid #ffffff29;
    border-radius: 10px;
    cursor: pointer;
    background-color: #101012;
    position: relative;
}
.plan-box > h2 {
    text-align: center;
    margin: 0 0 4px;
    font-size: 40px;
    line-height: 42px;
    color: var(--white);
}
.plan-box > p {
    text-align: center;
    color: #ffffff3f;
    margin: 0 0 35px;
}
.plans-card h3 {
    font-size: 24px;
    line-height: 52px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.plans-card > p {
    font-size: 14px;
    line-height: 19px;
    color: #b0b0b0;
    margin: 0 0 20px;
}
.plans-card > h2 {
    font-size: 30px;
    line-height: 40px;
    margin: 0 0 28px;
    color: #fff;
}
.plans-card .linear-gredient-inner {
    background-color: #101012;
    height: 42px;
    border-radius: 5px;
}

.plans-card .linear-gredient-btn {
    min-height: 45px;
    min-width: 152px;
    border-radius: 5px;
    margin: 0 0 30px;
}
.plans-card ul li {
    padding: 0 0 12px 30px;
    border-bottom: 1px solid #ffffff1e;
    position: relative;
    color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.31528 2.36589C-0.788538 5.50345 -0.77167 10.5809 2.36589 13.6847C5.50345 16.7885 10.5809 16.7717 13.6847 13.6341C16.7885 10.4966 16.7717 5.4191 13.6341 2.31528C10.4966 -0.788538 5.41911 -0.77167 2.31528 2.36589ZM11.8966 6.46496L7.54455 10.8677C7.17344 11.2388 6.56617 11.2388 6.19506 10.8677L6.02637 10.699L5.52032 10.1929L4.10335 8.79282C3.73225 8.42172 3.73225 7.81445 4.10335 7.44334C4.47446 7.07223 5.08173 7.07223 5.45284 7.44334L6.8698 8.84343L10.5472 5.13234C10.9183 4.76123 11.5255 4.76123 11.8966 5.13234C12.2678 5.48658 12.2678 6.09385 11.8966 6.46496Z' fill='%23DB2777'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 3px 4px;
}
.plans-card ul li + li {
    margin-top: 15px;
}
.plans-card::after {
    content: "";
    width: 102%;
    height: 101%;
    position: absolute;
    left: -3px;
    top: -2px;
    background-image: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    z-index: -1;
    border-radius: 10px;
    display: none;
    transition: all 0.3s ease;
}
.plans-card:hover::after,
.plans-card.active::after {
    display: block;
}
.plans-card:hover .linear-gredient-inner,
.plans-card.active .linear-gredient-inner {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}

/* ===================== plans css ============================ */

/* ====================== dashboard page CSS ============================  */

.db-wrapper {
    display: flex;
    min-height: 100vh;
}
.db-sidebar {
    max-width: 327px;
    width: 100%;
    background-color: var(--gray-balck);
}
.sidebar-logo {
    min-height: 110px;
    display: flex;
    justify-content: center;
    align-content: center;
    border-bottom: 1px solid #2b2b2e;
}
.sidebar-menu-link {
    padding: 20px 40px 20px 40px;
    display: block;
    border-bottom: 1px solid #2b2b2e;
    color: var(--white);
    display: flex;
    align-items: center;
}
.sidebar-menu-link span {
    flex: 0 0 40px;
}
.sidebar-menu-link:hover,
.sidebar-menu-link.active {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    color: var(--white);
}
.db-content-wrapper {
    width: 100%;
}

/* ====================== dashboard page CSS ============================  */

/* ==================== CMS CSS Start ======================= */

.cms-sec {
    padding: 50px 0 150px;
}
.cms-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}
.cms-card {
    border-radius: 15px;
    padding: 45px 40px;
    background-color: var(--gray-balck);
}
.cms-wrapper > h2 {
    text-align: center;
    margin: 0 0 20px;
    color: #fff;
    text-transform: capitalize;
    font-size: 40px;
}

.cms-card h3 {
    color: #fff;
    font-size: 26px;
    line-height: 28px;
    margin-bottom: 20px;
}
.cms-card p {
    color: #fff;
    font-size: 16px;
    line-height: 22px;
}
.cms-card p + p {
    margin-top: 15px;
}
body:has(.cms-sec) footer {
    background-color: var(--black);
}

/* ==================== CMS CSS End ======================= */

a:has(.top-search-card) {
    width: 100%;
    height: 100%;
}
.more-filter-content.service-content {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 25px;
}
.no-data-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 160px 0;
    border-radius: 8px;
    padding: 30px;
    min-height: 300px;
    flex-direction: column;
}
.no-data-div h3 {
    color: #fff;
    text-transform: capitalize;
}

/* ====================== dashboard page CSS ============================  */

.db-wrapper {
    display: flex;
    min-height: 100vh;
}
.db-sidebar {
    max-width: 327px;
    width: 100%;
    background-color: var(--gray-balck);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sidebar-logo {
    min-height: 110px;
    display: flex;
    justify-content: center;
    align-content: center;
    border-bottom: 1px solid #2b2b2e;
    align-items: center;
}
.sidebar-menu-link {
    padding: 20px 40px 20px 40px;
    display: block;
    border-bottom: 1px solid #2b2b2e;
    color: var(--white);
    display: flex;
    align-items: center;
    font-weight: 600;
}
.sidebar-menu-link span {
    flex: 0 0 40px;
}
.sidebar-menu-link:hover,
.sidebar-menu-link.active {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    color: var(--white);
}
.db-content-wrapper {
    width: 100%;
    padding: 30px 145px 10px 53px;
    height: 100vh;
    overflow: auto;
}
.my-card {
    margin: 0 40px 20px;
    background-image: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border-radius: 12px;
    padding: 1px;
}
.my-card-inner {
    background-color: var(--gray-balck);
    padding: 15px 16px 20px;
    border-radius: 12px;
}
.card-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0 28px;
}
.card-head-left p {
    font-size: 14px;
    color: var(--white);
    line-height: 20px;
    margin-bottom: 9px;
}
.card-head-left h4 {
    font-size: 20px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.outline-badge {
    border: 1px solid var(--white);
    border-radius: 50px;
    min-height: 22px;
    min-width: 67px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}
.my-card-inner h3 {
    color: var(--white);
    font-size: 20px;
    line-height: 40px;
    margin: 0 0 12px;
}
.my-card-inner .primary-btn {
    min-height: 40px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}
ul.sidebar-list {
    height: calc(100vh - 338px);
    overflow: auto;
}
.db-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 15px;
}
.db-content-head h3 {
    font-size: 24px;
    line-height: 26px;
    color: var(--white);
    font-weight: 600;
    text-transform: capitalize;
}
.db-stats-box {
    padding: 27px 26px;
    border-radius: 15px;
    background-color: var(--gray-balck);
    position: relative;
    cursor: pointer;
}
.db-stats-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.db-stats-box p {
    font-size: 18px;
    line-height: 20px;
    color: var(--white);
    text-transform: capitalize;
    margin: 0 0 80px;
}
.db-stats-footer h4 {
    font-size: 30px;
    font-weight: 600;
    line-height: 32px;
    color: var(--white);
}
.db-stats-box::before {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50px;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17.5' cy='17.5' r='17' stroke='white'/%3E%3Cpath d='M23.3913 10.77L15.4981 10.8166C15.289 10.8215 15.0893 10.9082 14.9418 11.0582C14.7944 11.2082 14.7111 11.4094 14.7099 11.6184C14.7087 11.8275 14.7896 12.0277 14.9352 12.176C15.0809 12.3242 15.2797 12.4086 15.4887 12.411L21.4571 12.3758L11.4836 22.3493C11.3332 22.4997 11.248 22.703 11.2467 22.9145C11.2455 23.126 11.3283 23.3283 11.4769 23.4769C11.6256 23.6256 11.8279 23.7084 12.0393 23.7071C12.2508 23.7059 12.4541 23.6207 12.6045 23.4703L22.578 13.4968L22.5428 19.4652C22.5403 19.571 22.559 19.6761 22.5976 19.7742C22.6363 19.8723 22.6942 19.9615 22.768 20.0366C22.8417 20.1116 22.9299 20.1711 23.0273 20.2115C23.1247 20.2518 23.2294 20.2723 23.3352 20.2717C23.4411 20.271 23.5461 20.2493 23.6439 20.2078C23.7418 20.1663 23.8307 20.1058 23.9053 20.0299C23.98 19.9539 24.0389 19.864 24.0788 19.7655C24.1186 19.6669 24.1385 19.5616 24.1372 19.4558L24.1838 11.5625C24.185 11.3511 24.1022 11.1489 23.9536 11.0002C23.805 10.8516 23.6027 10.7688 23.3913 10.77Z' fill='url(%23paint0_linear_1003_606)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1003_606' x1='13.2383' y1='12.7617' x2='22.2059' y2='21.7293' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 25px;
    top: 27px;
}

.db-stats-box:hover::before {
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17.5' cy='17.5' r='17.5' fill='url(%23paint0_linear_1003_601)'/%3E%3Cpath d='M23.3913 10.77L15.4981 10.8166C15.289 10.8215 15.0893 10.9082 14.9418 11.0582C14.7944 11.2082 14.7111 11.4094 14.7099 11.6184C14.7087 11.8275 14.7896 12.0277 14.9352 12.176C15.0809 12.3242 15.2797 12.4086 15.4887 12.411L21.4571 12.3758L11.4836 22.3493C11.3332 22.4997 11.248 22.703 11.2467 22.9145C11.2455 23.126 11.3283 23.3283 11.4769 23.4769C11.6256 23.6256 11.8279 23.7084 12.0393 23.7071C12.2508 23.7059 12.4541 23.6207 12.6045 23.4703L22.578 13.4968L22.5428 19.4652C22.5403 19.571 22.559 19.6761 22.5976 19.7742C22.6363 19.8723 22.6942 19.9615 22.768 20.0366C22.8417 20.1116 22.9299 20.1711 23.0273 20.2115C23.1247 20.2518 23.2294 20.2723 23.3352 20.2717C23.4411 20.271 23.5461 20.2493 23.6439 20.2078C23.7418 20.1663 23.8307 20.1058 23.9053 20.0299C23.98 19.9539 24.0389 19.864 24.0788 19.7655C24.1186 19.6669 24.1385 19.5616 24.1372 19.4558L24.1838 11.5625C24.185 11.3511 24.1022 11.1489 23.9536 11.0002C23.805 10.8516 23.6027 10.7688 23.3913 10.77Z' fill='white'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1003_601' x1='17.5' y1='0' x2='17.5' y2='35' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D7277D'/%3E%3Cstop offset='1' stop-color='%239E31D8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
}
.db-stats-box::after {
    content: "";
    width: 101%;
    height: 101%;
    position: absolute;
    left: -1px;
    top: -1px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border-radius: 15px;
    z-index: -1;
    display: none;
}
.db-stats-box:hover::after {
    display: block;
}
.db-content-head .linear-gredient-btn {
    min-height: 38px;
    border-radius: 5px;
}
.db-content-head .linear-gredient-btn .linear-gredient-inner {
    padding: 5px 10px;
    border-radius: 5px;
    height: 37px;
}
.db-content-head .linear-gredient-btn .linear-gredient-inner p {
    font-size: 14px;
}
.db-content-head .linear-gredient-inner span {
    display: flex;
}

/* ====================== dashboard page CSS ============================  */

/* ===================== content management CSS Start ======================= */

.content-maanage-box {
    border-radius: 15px;
    background-color: var(--gray-balck);
    overflow: hidden;
}
.gredient-tab .nav-tabs {
    padding: 0;
}
.gredient-tab .nav-tabs .nav-link {
    background: linear-gradient(90deg, #d7277d 7.22%, #9e31d8 80.78%);
}
.gredient-tab .nav-tabs .nav-link > div {
    background-color: var(--gray-balck);
    padding: 20px;
    color: #b0b0b0;
    font-weight: 600;
}
.gredient-tab .nav-tabs .nav-link {
    background: linear-gradient(90deg, #d7277d 7.22%, #9e31d8 80.78%);
    padding: 0;
    border: 0;
}
.gredient-tab .nav-tabs .nav-link.active {
    padding-bottom: 3px;
}
.gredient-tab .nav-tabs .nav-link.active > div {
    color: var(--white);
}
.content-maanage-head {
    border-bottom: 1px solid #ffffff26;
}
.content-maanage-body {
    padding: 27px 35px;
}
.content-card {
    background-color: #2f2f35;
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content-card-body {
    padding: 12px;

}
.content-card-body img,
.content-card-body video {
    height: 170px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 0 20px;
}
.content-card-body p {
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 17em;
    line-height: 1.5;
}
.content-card-footer {
    padding: 15px 12px;
    display: flex;
    border-top: 1px solid #f2f2f229;
    align-items: center;
    justify-content: space-between;
}
.content-card-action {
    display: flex;
    align-items: center;
    gap: 13px;
}
.form-switch .form-check-input {
    background-color: #424248;
    width: 36px;
    border: 0;
    height: 19px;
    cursor: pointer;
}
.form-switch .form-check-input:checked {
    background-color: #d7277d;
}
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    &:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }
}
.form-check-input:focus {
    border-color: unset;
    outline: 0;
    box-shadow: unset;
}

/* ===================== content management CSS Start ======================= */

/* ======================= Add content CSS =========================== */

.add-content-box {
    padding: 30px;
    border-radius: 15px;
    background-color: var(--gray-balck);
    max-width: 1026px;
}
.image-and-preview {
    background-color: #2f2f35;
    padding: 18px;
    border-radius: 10px;
}
.add-image-video {
    border: 2px dashed #c2c2c2;
    border-radius: 10px;
    padding: 85px 20px;
    background: #222227;
}
.add-image-video-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.add-image-video-inner > p {
    color: var(--white);
    font-size: 14px;
    line-height: 16px;
}
label.upload-media-btn {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    width: 100%;
    max-width: 208px;
    padding: 1px;
    border-radius: 5px;
    cursor: pointer;
}
.upload-media-btn-inner {
    background-color: #222227;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 8px;
}
.upload-media-btn-inner p {
    font-size: 15px;
}
.uploaded-media-preview {
    border-radius: 10px;
    overflow: hidden;
    height: 250px;
}
.uploaded-media-preview img,
.uploaded-media-preview video {
    height: 250px;
    width: 100%;
    object-fit: cover;
    display: block;
}
.add-content-more-details ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.add-content-more-details ul li + li {
    margin-top: 23px;
}
.add-content-more-details {
    padding: 30px 25px;
    background-color: #2f2f35;
    border-radius: 5px;
    margin: 18px 0;
}
.add-content-more-details ul li p {
    color: var(--white);
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}
.paid-price-input {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    max-width: 60px;
    padding: 1px;
    border-radius: 5px;
    position: relative;
}
.paid-price-input input {
    width: 58px;
    min-height: 40px;
    border-radius: 5px;
    background-color: #2f2f35;
    color: var(--white);
    border: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    padding: 5px 5px 5px 20px;
    &::placeholder {
        color: var(--white);
    }
}
span.dollor-sign {
    display: flex;
    position: absolute;
    color: #fff;
    top: 9px;
    left: 11px;
    font-size: 16px;
    font-weight: 600;
}

/* ======================= Add content CSS End =========================== */

/* ==================== Your Subscriptions CSS start =====================*/

.your-subscription-box {
    padding: 40px;
    background-color: var(--gray-balck);
    border-radius: 15px;
}
.subscription-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 25px 15px 15px;
    border-right: 1px solid #f2f2f23b;
}
.your-subscription-box .subscription-profile:nth-child(5n + 5) {
    border-right: 0;
}
.subscription-profile-name h4 {
    font-size: 15px;
    color: var(--white);
    font-weight: 600;
    margin: 0 0 12px;
}
.subscription-profile-name p {
    font-size: 14px;
    color: #b0b0b0;
    font-weight: 400;
    margin: 0 0 0px;
}
.subscription-profile img {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 50px;
    object-fit: cover;
}
.your-subscription-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0px 10px;
}

/* ==================== Your Subscriptions CSS End =====================*/

/* ==================== Your Subscriptions details start  ======================== */
.subscription-details-page {
    border-radius: 15px;
    padding: 40px;
    max-width: 1040px;
    background-color: var(--gray-balck);
}
.subscription-details-page .client-profile-body {
    border-bottom: 0;
}

/* ==================== Your Subscriptions details End  ======================== */

/* ====================== dashboard notification pages Start ===================== */

.db-notification-box {
    border-radius: 15px;
    padding: 40px;
    background-color: var(--gray-balck);
}
.db-notification-box .notify-content {
    width: 100%;
}

/* ====================== dashboard notification pages End ===================== */

/* ==================== payment history page start ========================== */

.db-payment-history-box {
    border-radius: 15px;
    padding: 10px 30px 20px;
    background-color: var(--gray-balck);
    position: relative;
    overflow: hidden;
}
.db-payment-history-box::after {
    content: "";
    width: 100%;
    height: 50px;
    background-color: #2b2b2e;
    position: absolute;
    left: 0;
    top: 0;
}
.payment-history-table table tr th {
    color: var(--white);
    padding: 8px 0;
    border-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}
.payment-history-table table tr th a {
    color: var(--white);
}
.payment-history-table table tr th:last-child,
.payment-history-table table tr td:last-child {
    text-align: right;
}
.payment-history-table table tr td {
    color: var(--white);
    border-bottom: 1px solid #f2f2f223;
    padding: 16px 0 18px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}
.table-check-box label {
    padding-left: 30px;
    position: relative;
    cursor: pointer;
}
.table-check-box input[type="checkbox"] {
    display: none;
}
.table-check-box label::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid #f2f2f2;
    border-radius: 4px;
    position: absolute;
    left: 5px;
    top: 1px;
}
.table-check-box label::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 7px;
    width: 9px;
    height: 4px;
    border-left: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    transform: rotate(315deg);
    display: none;
    z-index: 1;
}
.table-check-box:has(input:checked) label::after {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border: 0;
}
.table-check-box:has(input:checked) label::before {
    display: block;
}
.payment-history-table {
    position: relative;
    z-index: 1;
}

/* ==================== payment history page End ========================== */
.paid-price-input span#price-error {
    position: absolute !important;
    right: 35px;
    left: auto;
    white-space: nowrap;
    bottom: -19px;
}

/* ===================== plan management CSS Start ==================== */

.plan-management-box {
    border-radius: 15px;
    padding: 40px;
    background-color: var(--gray-balck);
    min-height: 800px;
}
.plan-management-card {
    max-width: 364px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    border-radius: 10px;
    padding: 1px;
}
.plan-management-inner {
    background-color: #101012;
    border-radius: 10px;
    padding: 40px 30px;
    position: relative;
}
.plan-management-inner h2 {
    color: #fff;
    font-size: 24px;
    line-height: 26px;
    margin: 0 0 20px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.plan-management-inner > p {
    color: #b0b0b0;
    font-size: 14px;
    line-height: 19px;
    margin: 0 0 20px;
}
.plan-management-inner h1 {
    font-size: 30px;
    line-height: 40px;
    margin: 0 0 28px;
    color: #fff;
}
.plan-management-inner .primary-btn {
    min-height: 42px;
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    margin: 0 0 32px;
    font-size: 14px;
}
.plan-management-inner ul li {
    padding: 0 0 12px 30px;
    border-bottom: 1px solid #ffffff25;
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.31528 2.36589C-0.788538 5.50345 -0.77167 10.5809 2.36589 13.6847C5.50345 16.7885 10.5809 16.7717 13.6847 13.6341C16.7885 10.4966 16.7717 5.4191 13.6341 2.31528C10.4966 -0.788538 5.41911 -0.77167 2.31528 2.36589ZM11.8966 6.46496L7.54455 10.8677C7.17344 11.2388 6.56617 11.2388 6.19506 10.8677L6.02637 10.699L5.52032 10.1929L4.10335 8.79282C3.73225 8.42172 3.73225 7.81445 4.10335 7.44334C4.47446 7.07223 5.08173 7.07223 5.45284 7.44334L6.8698 8.84343L10.5472 5.13234C10.9183 4.76123 11.5255 4.76123 11.8966 5.13234C12.2678 5.48658 12.2678 6.09385 11.8966 6.46496Z' fill='%23DB2777'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 3px 4px;
}
.plan-management-inner ul li + li {
    margin-top: 15px;
}
.linear-badge {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
    width: fit-content;
    padding: 0 10px;
    border-radius: 100px;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    position: absolute;
    top: 25px;
    right: 23px;
    min-height: 22px;
}
.plan-management-inner ul li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ===================== plan management CSS End ==================== */

/* 07-03-2025 */
#veriff-root .veriff-submit {
    min-height: 39px;
    height: 39px;
    font-size: 14px !important;
}

.db-content-head .linear-gredient-btn {
    /* margin-left: auto; */
    margin-right: 10px;
}

.gredient-tab .nav-tabs {
    gap: 45px;
}

.gredient-tab .nav-tabs .nav-link > div {
    padding-inline: 0;
}

.content-maanage-box .content-maanage-head {
    padding-inline: 35px;
}

.form-check.form-switch {
    position: relative;
}

/* .form-switch .form-check-input:checked {
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
}

.form-switch .form-check-input input{
    background-image: none !important;
}

.form-switch .form-check-input + div.form-switch-toggle {
    background-position: left center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    position: absolute;
    width: 100%;
    background-repeat: no-repeat;
}

.form-switch .form-check-input:checked + div.form-switch-toggle {
    background-position: right center;
} */

.my-card-inner .button{
    font-size: 15px;
    font-weight: 600;
}

.db-stats-footer img {
    max-width: 60px;
}

.content-wrapper{
    padding-inline: 30px;
}

.content-wrapper .gredient-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-wrapper .gredient-tab .nav-tabs {
    gap: 25px;
}

.content-wrapper .gredient-tab p{
    font-size: 18px;
}

.content-wrapper .content-maanage-head{
    padding-inline: 0px;
}

.content-wrapper .content-maanage-body {
    padding: 22px 0px 26px 0px;
}

.content-wrapper .content-card-body{
    padding: 0;
    position: relative;
    height: 100%;
}

.content-wrapper .content-card-body p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 9em;
    line-height: 1.5;
}
.content-wrapper .content-card-body img, .content-wrapper .content-card-body video {
    border-radius: 8px;
    margin: 0;
    display: block;
    height: 145px;
}
.content-wrapper .content-card-body video{
    min-height: 145px;
}
.content-maanage-footer {
    border-top: 1px solid rgb(255 255 255 / 10%);
    padding: 20px 0px 0px 0px;
    text-align: center;
    margin-top: 30px;
}
.content-maanage-footer a{
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 25px;
    color: #fff;
    text-decoration: underline !important;
}

.content-card-footer .form-check-input{
    position: unset !important;
}

.content-card-footer .form-check{
    margin: 0;
    min-height: auto;
}


.add-content-box .flex-end-div{
    gap: 32px;
}

.payment-history-table table tr th {
    border: 0;
    padding: 17px 0;
    vertical-align: middle;
}

.db-payment-history-box::after{
    height: 55px;
} 

.db-payment-history-box{
    padding-top: 0;
}

.payment-history-table table tr td{
    vertical-align: middle;
}

.table-check-box label{
    margin: 0;
}

.linear-badge{
    right: 15px;
    top: 15px;
}

.veriff-submit{
    transition: all 0.3s ease !important;
    &:hover{
        scale: 0.9;
    }
}

/* .payment-history-table table tr th {
    padding: 18px 33px;
    background: #2b2b2e;
    border: 0;
}

.payment-history-table table tr td{
    padding: 20px 33px;
    background-color: var(--gray-balck);
}

.db-payment-history-box{
    padding: 0;
}

.db-payment-history-box::after{
    display: none;
} */


.profile-details-stats img {
    height: 20px;
    width: 20px;
    object-fit: contain;
}

#customerProfileUpdate .flex-end-div a{
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
}

#customerProfileUpdate .flex-end-div {
    border-top: 1px solid #f2f2f223;
    margin-top: 50px;
    gap: 30px;
}

.custom.theme-toggle{
    display: flex;
    gap: 5px;
    align-items: center;
    color: #fff;
    font-size: 14px;
}

.custom.theme-toggle label{
    margin-bottom: 0;
}

.custom.theme-toggle label::after{
    background-image: none;
}

.profile-details-stats p{
    margin-bottom: 0;
}

.submit-form h2{
    font-size: 28px !important;
}

.profile-banner{
    position: relative;
}

/* .profile-banner .pro-button-next,
.profile-banner .pro-button-prev{
    display: none;
} */

/* .profile-banner video, .profile-banner img {
    object-fit: cover;
} */

.form-floating>label {
   color: var(--white);
}

.form-floating textarea{
    height: auto !important;
}

.formfield .iti{
    width: 100% !important;
}

.form-floating>.form-control:-webkit-autofill~label {
    color: #ffffff !important;
}
.hero-wrapper {
    overflow: hidden;
}
.iti--separate-dial-code .iti__selected-dial-code {
    color: #fff;
    font-size: 14px;
}
.form-floating:has(.form-icon) .form-control {
    padding-right: 3.75rem;
}
.bio-content-list li p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 17em;
    line-height: 1.5;
}
.register-tabs-box span#profilePic-error {
    text-align: center;
}


.more-filter-btn .primary-btn {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}


.no-data-content {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.no-data-content p,.also-like-slider .no-data p,.cm-no-data p,.yc-no-data p{
    background: linear-gradient(180deg, #d7277d 0%, #9e31d8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-size: 22px;
    font-weight: 600;
}

.also-like-slider .no-data {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.cm-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.yc-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.form-floating textarea{
    color: #fff;
}

.age-verify-modal .modal-dialog {
    max-width: 650px;
}
.age-rule-box img{
    display: flex;
    margin: 0 auto 20px;
}
.age-verify-modal  .modal-body {
    padding: 2rem;
}
.smal-wd-content-head{
    max-width: 1040px;
}
.delete-btn{
    display: flex;
    align-items: center;
    min-width: 150px;
    justify-content: center;
}