@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Medium.eot');
    src: url('Gotham-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gothammedium.woff2?v=1698475502') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gothammedium.woff?v=1698475501') format('woff'),
        url('Gotham-Medium.ttf') format('truetype'),
        url('Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('Gotham-BookItalic.eot');
    src: url('Gotham-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gothambookitalic.woff2?v=1698475814') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gothambookitalic.woff?v=1698475814') format('woff'),
        url('Gotham-BookItalic.ttf') format('truetype'),
        url('Gotham-BookItalic.svg#Gotham-BookItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Book.eot');
    src: url('Gotham-Book.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gothambook.woff2?v=1698475928') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gothambook.woff?v=1698475927') format('woff'),
        url('Gotham-Book.ttf') format('truetype'),
        url('Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Light.eot');
    src: url('Gotham-Light.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gotham-light.woff2?v=1698476043') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gotham-light.woff?v=1698476043') format('woff'),
        url('Gotham-Light.ttf') format('truetype'),
        url('Gotham-Light.svg#Gotham-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Bold.eot');
    src: url('Gotham-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gotham-bold.woff2?v=1698476122') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0593/4681/3079/files/gotham-bold.woff?v=1698476123') format('woff'),
        url('Gotham-Bold.ttf') format('truetype'),
        url('Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body{
    font-family: 'Gotham';
}

div:is(h1, h2, h3, h4, h6, p) {
    font-family: 'Gotham';
    font-size: 1rem;
    font-weight: 500;
}

img {
    width: 100%;
}

.offcanvas-header {
    justify-content: flex-end;
    padding: 1rem 1rem;
}

.btn:hover {
    background-color: #F1666E !important;
    color: #fff !important;
}
.signup-form-section .custom-input::placeholder{
    color: #878786 !important;
}
.form-control:focus {
    box-shadow:none;
}
.search-bar-section select:focus-visible {
    border:0px;
    outline:0px;
}
.custom-footer li.footer-menu-main .footer-menu-link:hover {
    color: #fff !important;
    opacity: 1 !important;
}

.custom-footer li.footer-menu-main .footer-menu-link svg:hover {
    fill: #fff !important;
}

.btn-close {
    background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EB5F6A'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") center/1em auto no-repeat;
    opacity: 1;
}

.offcanvas-body {
    padding: 1.9rem 1.9rem;
}

.pe-4 {
    padding-right: 2.2rem !important;
}

/* sidebar css start here */
.custom-side-bar .sidebar-links {
    color: #000;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 300%;
    text-decoration: none;
    padding-left: 10px;
    display: inline-block;
    margin-top: 0px;
}

/* sidebar css end here */
/* header css start here */
.custom-header-menu.custom-login-form {
    background-color: #1A1919 !important;
    position: unset !important;
}

.icon-2-footer {
    width: 125px;
}



.member-btn-log {
    border: 1px solid #EB5F6A;
    background: #EB5F6A;
    flex-shrink: 0;
    padding: 0.3rem 1rem;
    color: #F5F5F5;
    /* font-family: 'Gotham';*/
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
}

.member-btn-log:hover {
    border: 1px solid transparent !important;
    background: #F5F5F5 !important;
    color: #EB5F6A !important;
}

.member-btn-sign:hover {
    color: #F1666E !important;
    background-color: transparent !important;
}

.member-btn-sign {
    color: #F5F5F5;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    border-radius: 20px;
    /* 178.571% */
    display: inline-block;
}

header.custom-header-menu {
    position: absolute;
    width: 100%;
    z-index: 9;
    background-color: unset !important;
}

.text-end {
    display: flex;
    align-items: center;
}

/* header css end here */
/* home page hero banner start here */
section.hero-section {
    position: relative;
}

.hero-section .slick-next {
    right: 0;
}

.sliderContainer {
    position: relative;
}

.hero-section .hero-btn:hover {
    color: #fff !important;
}

.hero-section .slider {
    width: 100%;
}

.hero-section .slick-slide {
    color: white;
}

.hero-section .slick-prev:before,
.hero-section .slick-next:before {
    color: black;
}

.hero-section .slick-dots {
    bottom: -30px;
}

.hero-section .progressBarContainer {
    position: absolute;
    bottom: 40px;
    width: 300px;
    right: 150px;
}

.item1 .inProgress.inProgress0::before{
    content: "01";
    display: block;
    font-family: 'Gotham';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    position: absolute;
    top: -30px;
}
.item1 .inProgress.on.inProgress0::before{
    color: #fff;
}

span.progressBar.color div::before {
    color:#EB5F6A !important;
}

.item2 .inProgress.inProgress1::before{
    content: "02";
    display: block;
    font-family: 'Gotham';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    position: absolute;
    top: -30px;
}

.item2 .inProgress.on.inProgress1::before{
    color: #fff;
}
.item3 .inProgress.inProgress2::before{
    content: "03";
    display: block;
    font-family: 'Gotham';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    position: absolute;
    top: -30px;
}

.item3 .inProgress.on.inProgress2::before{
    color: #fff;
}
.hero-section .progressBarContainer div {
    display: block;
    width: 30%;
    padding: 0;
    cursor: pointer;
    margin-right: 5%;
    float: left;
    color: white;
}

.hero-section .progressBarContainer .item h3 {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.hero-section .progressBarContainer div:last-child {
    margin-right: 0;
}

.hero-section .progressBarContainer div span.progressBar {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.4);
    display: block;
}

.hero-section .progressBarContainer div span.progressBar .inProgress {
    background-color: #EB5F6A;
    width: 0%;
    height: 4px;
}

.hero-section .slick-slide img {
    width: 100%;
}

.hero-section .hero-text-content {
    position: absolute;
    z-index: 1;
    /* height: 50%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 40%;
    padding: 10px;
    /* transform: translate(0, -50%); */
    background: rgba(0, 0, 0, 0.5); /* Overlay color with transparency */

}

.hero-section .hero-text-content .hero-pre-title {

    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 59.353px;
    font-style: normal;
    font-weight: 500;
    line-height: 70.036px;
    text-transform: capitalize;
}
.successfully_login .hero-pre-title {
    margin-top: 20px;
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 59.353px;
    font-style: normal;
    font-weight: 500;
    line-height: 70.036px;
    text-transform: capitalize;
}

.successfully_login .hero-title {
    color: black;
    font-family: 'Gotham';
    font-size: 59.353px;
    font-style: normal;
    font-weight: 500;
    line-height: 70.036px;
    text-transform: capitalize;
    margin-top: -15px;
}

.hero-section .hero-text-content .hero-title {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 59.353px;
    font-style: normal;
    font-weight: 500;
    line-height: 70.036px;
    text-transform: capitalize;
}

.hero-section .hero-text-content .hero-description {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    width: 358px;
    z-index: 0;
}

.hero-section .hero-btn {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    display: inline-block;
}

/* home page hero banner end here */

/* home page 3rd section start here */
.why-talk-about-us {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}

.why-talk-about-us .fun-feature-img {
    width: 80%;
    margin: 0 0 0 auto;
}

.why-talk-about-us h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 16%;
    height: 52%;
    display: block;
    position: absolute;
    right: -35%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -40%;
}

.why-talk-about-us .why-talk-about-us-wrapper {
    position: relative;
}

.why-talk-about-us::after {
    content: "";
    width: 81px;
    height: 277px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: 0;
    left: 310px;
}

.why-talk-about-us .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 6rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.why-talk-about-us h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 90px;
    width: 201px;
}

.why-talk-about-us .talk-text-description {
    margin: 38px 0 0 118px;
}

.why-talk-about-us .talk-text-description .third-section-description {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    max-width: 401px;
}

.why-talk-about-us .talk-about-us-btn {
    margin-top: 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    display: inline-flex;
    padding: 20px 20px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background-color: transparent;
}

.why-talk-about-us .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    height: 100%;
}

.why-talk-about-us .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 29%;
    height: 18%;
    display: block;
    position: absolute;
    right: -18%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 10px;
}

.why-talk-about-us .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 7%;
    height: 19%;
    display: block;
    position: absolute;
    left: -12px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 39%;
}

.why-talk-about-us .talk-about-us-btn:hover {
    background-color: #fff;
}

/* home page 3rd section end here */
/* home page 4th section start here */
.fun-features-section {
    padding: 114px 0 98px 0;
    background-color: #000;
    position: relative;
}

.fun-features-section::before {
    content: "";
    width: 14%;
    height: 38%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url("../images/1.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.fun-features-section .why-talk-about-us-wrapper .fun-feature-img {
    width: 80%;
}

.fun-features-section h4.talk-text-wrapper {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0 40% 0 0;
}

.fun-features-section h4.talk-text-wrapper:after {
    content: "";
    border: 0.2px solid #fff;
    display: block;
    margin: 30px 0 0 90px;
    width: 201px;
}
.cookiealert .btn {
    padding: 13px 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    background-color: transparent;
    color: #EB5F6A;
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}
.cookiealert .btn:hover {
    background-color: #F1666E !important;
    color: #fff !important;
}
.fun-features-section .why-talk-about-us-wrapper {
    position: relative;
}

.fun-features-section::after {
    content: "";
    width: 81px;
    height: 287px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -4.5%;
    z-index: 0;
    right: 16%;
}

.fun-features-section .talk-text-description {
    margin: 38px 0 0 93px;
}

.fun-features-section .talk-content-icon h5.third-section-description {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 72%;
    margin-bottom: 10px;
}

.fun-features-section .talk-content-text p {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.fun-features-section .talk-content-icon {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.fun-features-section .talk-btn-wrapper {
    margin: 0 0 0 14.5%;
}

.fun-features-section .talk-about-us-btn {
    display: inline-flex;
    padding: 20px 20px;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.fun-features-section .talk-about-us-btn:hover {
    border: 1px solid #F1666E;
    color: #EB5F6A;
    background-color: transparent;
}

.fun-features-section .talk-content-icon-wrapper {
    
    height: 60px;
    padding-left: 10px;
    object-fit: contain;
}

.footer-signup-content {
    gap: 10px;
}

@media (max-width: 768px) {
    .footer-signup-content {
        flex-direction: column;
        text-align: center;
    }

    .ssl-image {
        max-width: 150px;
        margin-bottom: 10px;
    }
}

@media (min-width: 768px) {
    .ssl-image {
        max-width: 150px;
    }
}

/* home page 5th section start here */
.home-fifth-section {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}

.home-fifth-section h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 167px;
    height: 140px;
    display: block;
    position: absolute;
    right: -65%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -56%;
}

.home-fifth-section::after {
    content: "";
}

.home-fifth-section .why-talk-about-us-wrapper {
    position: relative;
}

.home-fifth-section::after {
    content: "";
    width: 81px;
    height: 277px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: 0;
    left: 16%;
}

.home-fifth-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 11rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.home-fifth-section h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 90px;
    width: 201px;
}

.home-fifth-section .talk-text-description {
    margin: 38px 0 0 118px;
}

.home-fifth-section .talk-text-description .third-section-description {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    max-width: 401px;
}

.home-fifth-section .talk-about-us-btn {
    margin-top: 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    display: inline-flex;
    padding: 20px 20px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.home-fifth-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    height: 100%;
}

.home-fifth-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 16%;
    height: 10%;
    display: block;
    position: absolute;
    right: 25%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 4%;
}

.home-fifth-section .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 5%;
    height: 13%;
    display: block;
    position: absolute;
    left: -9px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 39%;
}

.home-fifth-section .talk-about-us-btn:hover {
    background-color: #fff;
}

.home-fifth-section .why-talk-about-us-wrapper .home-fifth-img-section {
    position: relative;
    width: 80%;
    margin: 0 0 0 auto;
}

.home-fifth-section .why-talk-about-us-wrapper .home-fifth-img-section::after {
    content: "";
    background-image: url(../images/5.png);
    display: block;
    position: absolute;
    width: 148px;
    height: 124px;
    bottom: 2%;
    right: 4%;
}

/* home page 5th section end here */

/* home page 6th section start here */
.real-quality-members {
    padding: 114px 0 98px 0;
    background-color: #000;
    position: relative;
}

.real-quality-members::before {
    content: "";
    width: 8%;
    height: 19%;
    position: absolute;
    bottom: 36%;
    right: 0%;
    background-image: url("../images/6.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.real-quality-members .why-talk-about-us-wrapper .fun-feature-img {
    width: 80%;
}

.real-quality-members h4.talk-text-wrapper {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0 40% 0 0;
}

.real-quality-members h4.talk-text-wrapper:after {
    content: "";
    border: 0.2px solid #eb5f6a;
    display: block;
    margin: 30px 0 0 0;
    width: 201px;
}

.real-quality-members .why-talk-about-us-wrapper {
    position: relative;
}

.real-quality-members::after {
    content: "";
    width: 81px;
    height: 287px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: 0;
    right: 23%;
}

.real-quality-members .talk-text-description {
    margin: 38px 0 0 0;
}

.real-quality-members .talk-content-icon h5.third-section-description {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 72%;
    margin-bottom: 10px;
}

.real-quality-members .talk-content-text p {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.real-quality-members .talk-content-icon {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.real-quality-members .talk-btn-wrapper {
    margin: 0 0 0 0;
}

.real-quality-members .talk-about-us-btn {
    display: inline-flex;
    padding: 20px 20px;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.real-quality-members .talk-about-us-btn:hover {
    border: 1px solid #F1666E;
    color: #EB5F6A;
    background-color: transparent;
}

.real-quality-members .talk-content-icon-wrapper {
    width: 90px;
    height: 60px;
    text-align: center;
}

.real-quality-members .title-nd-text-wrapper {
    padding: 10% 0 0 0;
    height: 100%;
    position: relative;
}

.real-quality-members .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 14%;
    height: 11%;
    display: block;
    position: absolute;
    right: 51%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -10%;
}

.real-quality-members h4.talk-text-wrapper {
    position: relative;
}

.real-quality-members h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 35%;
    height: 84%;
    display: block;
    position: absolute;
    right: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -90%;
}

/* home page 6th section end here */

/* home page 5th section start here */
.home-seventh-section {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}

.home-seventh-section h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 24%;
    height: 46%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -75%;
    right: -60%;
}

.home-seventh-section::after {
    content: "";
}

.home-seventh-section .why-talk-about-us-wrapper {
    position: relative;
}

.home-seventh-section::after {
    content: "";
    width: 81px;
    height: 277px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: 0;
    left: 308px;
}

.home-seventh-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 19rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.home-seventh-section h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 90px;
    width: 201px;
}

.home-seventh-section .talk-text-description {
    margin: 38px 0 0 118px;
}

.home-seventh-section .talk-text-description .third-section-description {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    max-width: 401px;
}

.home-seventh-section .talk-about-us-btn {
    margin-top: 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    display: inline-flex;
    padding: 20px 20px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.home-seventh-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    height: 100%;
}

.home-seventh-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 167px;
    height: 140px;
    display: block;
    position: absolute;
    right: -12%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 2%;
}

.home-seventh-section .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 6.1%;
    height: 11%;
    display: block;
    position: absolute;
    left: 1%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 39%;
}

.home-seventh-section .talk-about-us-btn:hover {
    background-color: #fff;
}

.home-seventh-section .why-talk-about-us-wrapper .home-fifth-img-section {
    position: relative;
    width: 80%;
    margin: 0 0 0 auto;
}

/* home page 5th section end here */

/* home page TESTIMONIALS section start here */
.testimonials-section {
    padding: 114px 0 98px 0;
    background-color: #000;
    position: relative;
}

.testimonials-section .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 5%;
    height: 18%;
    display: block;
    position: absolute;
    right: 30%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -6%;
}

.testimonials-section::before {
    content: "";
   /* background-image: url(../images/1.png);*/
    width: 6%;
    height: 18%;
    display: block;
    position: absolute;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 18%;
}

.testimonials-section .why-talk-about-us-wrapper {
    position: relative;
}

.testimonials-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    /* 125% */
    text-transform: uppercase;
}

.testimonials-section h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 0;
    width: 201px;
}

.testimonials-section .talk-text-description {
    margin: 38px 0 0 78px;
}

.testimonials-section .talk-text-description h5.third-section-description {
    color: #C5C5C5;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    max-width: 45%;
    width: 100%;
    margin-bottom: 41px;
}

.testimonials-section ul.testimonials-items-ul {
    flex-wrap: wrap;
    row-gap: 60px;
}

.testimonials-section li.testimonials-items-li {
    width: 50%;
    display: flex;
    gap: 41px;
}

.testimonials-section .testimonials-items-name-review .reviewer-name {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 15px;
}

.testimonials-section .testimonials-items-name-review .reviewer-comment {
    color: #A9A9A9;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0 16% 0 0;
}

.testimonials-section .slick-arrow {
    width: 49px;
    height: 49px;
}

.testimonials-section .slick-prev {
    right: 10%;
    top: -20%;
    left: unset;
}

.testimonials-section .slick-next {
    right: 4%;
    top: -20%;
}

/* home page TESTIMONIALS section end here */

/* footer section start here */
.custom-footer {
    background-color: #1A1919;
    padding: 80px 0 0;
}

.custom-footer .footer-menu .footer-heading {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 23px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    margin-bottom: 20px;
}

.custom-footer .footer-menu {
    padding: 0 0 0 17%;
}

.custom-footer li.footer-menu-main .footer-menu-link {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    text-transform: capitalize;
    text-decoration: none;
    opacity: 0.5;
    display: inline-block;
}

.custom-footer .footer-btn {
    width: auto;
    height: 57px;
    padding: 13px 20px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    background-color: transparent;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin-top: 50px;
}

.custom-footer li.footer-menu-main.social-media-li {
    display: flex;
    padding-top: 50px;
    justify-content: space-between;
    padding: 35px 100px 30px 0;
}

.footer-menu-main .footer-copyright {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-transform: capitalize;
    opacity: 0.5;
    text-decoration: none;
}

ul.footer-ul.list-unstyled.social-media-wrapper {
    height: 100%;
    padding: 0% 0 0 0;
}

/* footer section end here */

/* Login form start here */
/* Login form first section start here */
.login-form-section {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}

.login-form-section h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 12%;
    height: 126%;
    display: block;
    position: absolute;
    right: -42.5%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 40%;
}

.login-form-section .why-talk-about-us-wrapper {
    position: relative;
}

.login-form-section::after {
    content: "";
    width: 80px;
    /* height: calc(205px - 60px) !important; */
    background: #EB5F6A;
    display: block;
    position: absolute;
    left:calc(50.7% - 660px);
    top: 0;
    z-index: -1;
    height: 145px;
    /* display: none; */
}
.login-form-section .login-forget-link-wrapper .login-forget-link  {
    text-decoration: none !important;
}
.login-form-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #000 !important;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0;
    z-index: 1;
    position: relative;
}

.login-form-section .talk-text-description {
    margin: 65px 0 0 0;
}

.login-form-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    /* height: 100%; */
    width: 50%;
}

.login-form-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 29%;
    height: 29%;
    display: block;
    position: absolute;
    right: -40%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -50px;
}
.social-media-share-wrapper .social-media-link a:hover{
    transform: translateY(-5px);
}
.social-media-share-wrapper .social-media-link a{
   transition: all 0.35s ease-in-out;
}
.login-form-section .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 5%;
    height: 23%;
    display: block;
    position: absolute;
    left: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 27%;
}
.login-form-section .forgot-mx{
    margin-top: 45px;
    margin-bottom: 25px;
}
.mac-os .signup-form-section .title-nd-text-wrapper .talk-text-wrapper{
    line-height: 100px;
}

.login-form-section .custom-user-name {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.login-form-section .custom-input {
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
}

.login-form-section .login-forget-link-wrapper .login-forget-link {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    display: inline-block;
}

.login-form-section .login-forget-link-wrapper {
    text-align: right;
}

.login-form-section .btn.custom-login-btn {
    display: flex;
    width: 153px;
    height: 57px;
    padding: 6px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1px solid #EB5F6A;
    color: #EB5F6A;
    text-align: right;
    font-family: 'Gotham';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
}

.login-form-section .need-account-section {
    padding: 20px 0 0 0;
    text-align: center;
}

.login-form-section p.need-account-text {
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.login-form-section p.need-account-text .sign-up-form-link {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration-line: underline;
    display: inline-block;
}

.login-form-section .policy-link-wrapper {
    margin: 32px 0 0 0;
}

.login-form-section .policy-link-wrapper .policy-link {
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    text-decoration-line: underline;
    display: inline-block;
}

.login-form-section .login-images-wrapper {
    position: absolute;
    top: -80px;
    right: 0px;
    z-index: -1;
}

/* Login form first section end here */
/* Login form end here */


/* sign up form start here */
/* Login form first section start here */
.signup-form-section {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 130px 0 40px 0px;
    position: relative;
}

.signup-form-section h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 28%;
    height: 320%;
    display: block;
    position: absolute;
    right: -39%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -200%;
}

.signup-form-section .date-input {
    position: relative;
}

.signup-form-section .date-label {
    position: absolute;
    top: 12px;
    left: 12px;
}
.signup-form-section .why-talk-about-us-wrapper .modal-dialog .modal-content{
    border: none !important;
}

.modal-content {
    color: #333;
}

.modal-content table {
    color: #333;
}

#userTransactionDialog .modal-content,
#userAllocateCreditsDialog .modal-content,
#adminLoginDialog .modal-content {
    background-color: #fff; /* White background */
    color: #333; /* Dark text */
}

.modal-content th,
.modal-content td {
    color: #333 !important; /* Force dark text for table cells */
}

/* Fix for modal headers */
.modal-header {
    background-color: #f8f9fa; /* Light gray background */
    color: #333;
    border-bottom: 1px solid #dee2e6;
}

/* Fix for modal titles */
.modal-title {
    color: #333 !important;
}

/* Modal body text */
.modal-body {
    color: #333;
}

/* Make sure forms within modals have proper colors */
.modal-body .form-control {
    color: #333;
    background-color: #fff;
}

/* Fix for dark mode conflicts */
.modal-content .text-primary,
.modal-content .text-info,
.modal-content .text-success {
    color: inherit !important;
}

/* NOTIFICATIONS */


/* Add to your custom.css file
.hero-section .hero-text-content {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 40%;
    padding: 25px 30px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    margin-left: 15px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.hero-section .hero-text-content .hero-pre-title {
    color: #EB5F6A;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-section .hero-text-content .hero-description {
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-section .hero-btn {
    color: #EB5F6A;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
}

.hero-section .hero-btn span {
    color: #FFF;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

.hero-section .hero-btn:hover span {
    color: #EB5F6A;
}


@media (max-width: 768px) {
    .hero-section .hero-text-content {
        padding: 20px;
        top: 30%;
    }
    
    .hero-section .hero-text-content .hero-pre-title {
        font-size: 36px;
    }
    
    .hero-section .hero-text-content .hero-description {
        font-size: 16px;
    }
}

*/
/*
.signup-form-section input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}

.signup-form-section input[type=date]::-webkit-datetime-edit-month-field {
    -webkit-appearance: none;
    display: none;
}

.signup-form-section input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}

.signup-form-section input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

.signup-form-section .fa-caret-down {
    display: none;
}

.signup-form-section .why-talk-about-us-wrapper {
    position: relative;
} */

.signup-form-section input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('../images/date-icon.png');
    /* Replace 'custom-calendar-icon.png' with your icon's path */
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.custom-date-input-container {
    position: relative;
}

a.ui-state-default.ui-state-highlight {
    text-decoration: none;
}
.ui-datepicker-calendar th{
    padding: 5px;
}
a.ui-state-default {
    color: #000;
    text-decoration: none;
}
span.ui-icon.ui-icon-circle-triangle-e{
    color: #000;

}
a.ui-datepicker-prev.ui-corner-all{
    text-decoration: none;
    margin-right: 10px;
}
a.ui-datepicker-next.ui-corner-all{
    text-decoration: none;
}
span.ui-icon.ui-icon-circle-triangle-w{
    color: #000;
    text-decoration: none;
}
.date-of-birth i{
    position: absolute;
    top: 15px;
    right: 15px;
    color: #dc3545;
}
div#ui-datepicker-div{
    background-color: #fff;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    padding: 25px;
}
.signup-form-section .custom-input::placeholder {
    color: #000;
    opacity: 1;
    position: relative;
    z-index: 99;
}
.placeholder {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.signup-form-section::after {
    content: "";
    width: 80px;
    height: 255px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    left: 16%;
    top: -55px;
    z-index: -1;
}
.custom-date-input-container {
    position: relative;
}

.signup-form-section .mb-4 {
    margin-bottom:32px !important;
}

.signup-form-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0;
    z-index: 1;
    position: relative;
}

.signup-form-section .talk-text-description {
    margin: 45px 0 0 0;
}

.talk-text-description p {
    color: black;
}

.signup-form-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    /* height: 100%; */
    width: 50%;
}
/* date of birth css start*/
.datepicker-time{
    width: 100%;
    padding: 0 10px;
}
/* date of birth css end*/
.signup-form-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 83.672px;
    height: 70px;
    display: block;
    position: absolute;
    right: -25%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 45%;
}

.signup-form-section .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 119.531px;
    height: 100px;
    display: block;
    position: absolute;
    left: -15px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 25%;
}

.signup-form-section .why-talk-about-us-wrapper::after {
    content: "";
    background-image: url(../images/3.png);
    width: 5%;
    height: 9%;
    display: block;
    position: absolute;
    left: 2%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 14%;
}

.signup-form-section .custom-user-name {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.signup-form-section .custom-input {
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}
.signup-form-section .form-text{
    font-size: 13px;
    line-height: 150%;
    font-weight: 400;
    color: #3E3E3EE5;
    opacity: .9;
}
.signup-form-section .login-forget-link-wrapper .login-forget-link {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.signup-form-section .login-forget-link-wrapper {
    text-align: right;
}

.signup-form-section .btn.custom-login-btn {
    display: flex;
    width: 239px;
    height: 57px;
    padding: 6px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1px solid #EB5F6A;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.signup-form-section .need-account-section {
    text-align: left;
}
.signup-form-section .form-check .form-check-label{
    color: #3E3E3E;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}
.signup-form-section p.need-account-text {
    color: #000;
    text-align: left;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.signup-form-section p.need-account-text {
    margin-bottom: 30px;
    margin-top: 36px;
}
.signup-form-section p.need-account-text .sign-up-form-link {
    color: #EB5F6A;
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration-line: underline;
    display: inline-block;
}

.signup-form-section .policy-link-wrapper .policy-link {
    color: #3E3E3E;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
}

.signup-form-section .login-images-wrapper {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
}

.signup-form-section .talk-text-description h4 {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 30px;
}

.signup-form-section .custom-input.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("../images/drop.png");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.signup-form-section .modal-header {
    justify-content: center;
    position: relative;
    background-image: url(../../..//imgs/home/file.jpg);
}
.signup-form-section .modal-header-continue {
    justify-content: center;
    position: relative;
    background-color: black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 18px;
}
.signup-form-section .modal-dialog {
    max-width: 590px;
}

.signup-form-section .modal-title {
    color: #EB5F6A;
    text-align: center;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
}

.signup-form-section .btn-close {
    position: absolute;
    top: 6px; /* -20px */;
    right: 10px; /* 0 */
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
}

.signup-form-section .custom-modal-img {
    width: 17%;
    position: relative;
}

.signup-form-section .custom-modal-body-text {
    text-align: center;
    margin: 0 20px 30px;
}

.signup-form-section .modal-body {
    padding: 2rem;
}

.signup-form-section .custom-modal-img-wrapper {
    display: flex;
    gap: 16px;
}

.signup-form-section .custom-modal-img::after {
    content: "";
    /* background-color: #EB5F6A; */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.89;
}
.form-control-plaintext-continue{
    display: block;
    /* width: 100%; */
    padding: 0.375rem 0;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #858796;
    background-color: transparent;
    /* border: solid transparent; */
    border-width: 1px;
    width: 250px;
      height: 40px;
      border-radius: 10px;
      padding-left: 10px;
      background-color: transparent;
      border-color: #858796;
  }
.signup-form-section .custom-modal-img::before {
    content: "";
    /* background: transparent url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 28 19' fill='none'%3e%3cpath d='M1.19922 7.66667L10.2162 17L26.7992 1' stroke='white' stroke-width='2' /%3e %3c/svg%3e") center/1em auto no-repeat; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    display: block;
    color: #fff;
    z-index: 99;
}

.signup-form-section .custom-modal-img-wrapper .custom-modal-img img {
    position: relative;
}

.signup-form-section .custom-img-main {
    row-gap: 22px;
    display: flex;
    flex-direction: column;
}

.signup-form-section .modal-footer {
    justify-content: center;
    border-top: 0px solid #dee2e6;
}

.custom-sign-up-continue {
    padding: 12px 20px;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid #EB5F6A;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    background-color: transparent;
}

/* Login form first section end here */
/* sign up form start here */

/* after login header start here */
.custom-header-after-login.navbar {
    position: absolute;
    width: 100%;
    z-index: 9;
}

.custom-header-after-login .notification .dropdown-toggle::after {
    display: none;
}

.custom-header-after-login .notification-main {
    margin-bottom: 20px;
}

.custom-header-after-login .notification-date {
    color: #8D8D8D;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

.custom-header-after-login .notification-author-name {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin: 0;
}

.custom-header-after-login .notification-description {
    margin: 0;
    color: #fff;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.custom-header-after-login a.notification-view-all-btn {
    text-align: center;
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    text-decoration-line: underline;
    padding: 0;
    background-color: unset;
}

.custom-header-after-login ul.dropdown-menu.notification-drop-down.show::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 15px;
    transform: rotate(45deg);
}

.notification-drop-down .notification-author-name {
    color: #EB5F6A;
}
.notification-drop-down .notification-main {
    border-bottom: 1px solid #eee;
}



.custom-header-after-login .dropdown-menu[data-bs-popper] {
    right: 1em;
    left: unset;
    top: 150%;
    width: 100%;
    min-width: 18rem;
    padding: 1.5rem 1rem;
}

.custom-header-after-login.navbar .navbar-nav .nav-link {
    color: #F5F5F5;
    font-family: 'Gotham';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
}

.custom-header-after-login.navbar .navbar-collapse {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 5px;
    position: relative;
}
#navbarSupportedContent .navbar-nav{
    position: absolute;
    /* right: 55px; */
    top: 39px;
    right: 70px;
    margin-right: -70px;
}
.mr-50{
    margin-right: 50px;
}
.humbarger{
    position: relative;
    display: inline-block;
}
.custom-header-after-login .search-and-icons form input {
    border-radius: 0;
    height: 2em;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='grey' 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/svg%3E") no-repeat 95%;
}

.custom-header-after-login .search-and-icons form input:focus {
    background: #fff;
    box-shadow: none;
}

.custom-header-after-login .search-and-icons .user-icons .notification {
    padding-right: 2em;
}

.custom-header-after-login .contact-info p,
.custom-header-after-login .contact-info a {
    font-size: 0.9em;
    padding-right: 1em;
    color: grey;
}

.custom-header-after-login .contact-info a {
    padding-right: 0;
}

/* after login header end here */
/* faq hero banner start here */
.faq-banner-section {
    width: 100%;
    background-image: url("../images/sexy-art-banner-1.png");
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0% 5.5% 0%;
}

.faq-banner-section .page-title-main .page-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

/* faq hero banner end here */

/* faq tab section start here */

section.faq-tab-section {
    padding: 80px 0;
    position: relative;
}

.faq-tab-section::after {
    content: "";
    background-image: url(../images/6.png);
    width: 5%;
    height: 12%;
    display: block;
    position: absolute;
    right: 1px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 42px;
}

.faq-tab-section::before {
    content: "";
    background-image: url(../images/1.png);
    width: 6%;
    height: 15%;
    display: block;
    position: absolute;
    left: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 28%;
}

.faq-tab-section button.nav-link.active {
    color: #000;
    font-family: 'Gotham';
    font-size: 17px;
    font-style: normal;
    font-weight: 500;

    text-transform: capitalize;
}

.faq-tab-section button.nav-link.active:after {
    content: "";
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' viewBox='0 0 9 11' fill='none'%3e%3cpath d='M9 5.5L0.750001 10.2631L0.750001 0.73686L9 5.5Z' fill='%23EB5F6A'/%3e%3c/svg%3e") no-repeat 95%;
    width: 10px;
    height: 10px;
    display: inline-block;
}

.faq-tab-section .nav-pills .nav-link {
    background: transparent;
    border-bottom: 1px solid #878786;
    text-align: left;
    padding: 0;
    border-radius: 0;
    color: #575756;
    font-family: 'Gotham';
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    padding: 16px 0px;
    text-transform: capitalize;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-tab-section div#v-pills-tab {
    width: 100%;
}

.faq-tab-section .faq-tab-title-main .faq-tab-title {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin-bottom: 13px;
}

.faq-tab-section .faq-tab-title-main .faq-tab-description {
    width: 655.68px;
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 23px;
}

.faq-tab-section .accordion-item {
    margin-bottom: 10px;
    /* border: 1px solid #EB5F6A; */
    border: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.faq-tab-section .accordion-collapse.collapse.show {
    border: 1px solid #EB5F6A;
    border-top: 0px;
    border-radius: 0px 0px 15px 15px;
}

.faq-tab-section .accordion .accordion-item .accordion-header button.accordion-button {
    background-color: #EB5F6A;
    border-radius: 15px;
    box-shadow: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: #fff;
    padding: 2rem 1.25rem;
    column-gap: 5px;
}

.faq-tab-section .accordion .accordion-item .accordion-header button.accordion-button.collapsed {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 0;
    background-color: #F6F6F6;
    color: #000;
    font-size: 15px;
    column-gap: 5px;
    padding: 2rem 1.25rem;
}

.faq-tab-section .accordion-button::after {
    content: "";
    background-image: url(../images/pluse.svg);
    background-size: 0.9rem;
    transform: rotate(0deg);
    width: 1rem;
    height: 1rem;
}

.faq-tab-section .accordion-button:not(.collapsed)::after {
    content: "";
    background-image: url(../images/minus.svg);
    background-position: 0px;
    background-size: 0.9rem;
}

/* faq tab section end here */

/* blog detail page css start here */
/* blog detail banner section start here */
.blog-detail-banner-section {
    width: 100%;
    /* background-image: url("../images/blog-details.png"); */
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0% 5.5% 0%;
}

.blog-section .tab-pane .row>* {
    padding-left: 15px;
    padding-right: 15px;
}

.blog-details-section .social-media-share-main {
    margin-top: 10px;
}

.blog-detail-banner-section .page-title-main .page-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

.custom-pagination-main .pagination {
    justify-content: center;
    margin-bottom: 0rem;
}

.custom-pagination-main .pagination li a {
    margin-right: 12px;
}

.custom-pagination-main .page-item .page-link {
    border-radius: 100%;
    background: #D9D9D9;
    padding: 9px 17px;
    color: #484848;
    border-color: transparent;

}

.blog-details-section ul.blog-content-ul {
    list-style: none;
}


.custom-pagination-main .page-item .page-link:focus {
    box-shadow: none;
    background: var(--Pink, #EB5F6A);
    color: #FFF;
}

.custom-pagination-main .page-item .page-link:hover {
    background: var(--Pink, #EB5F6A);
    color: #FFF;
}

/* blog detail banner section end here */
/* blog detail breadcrumb section start here */
/* .blog-details-section .custom-breadcrumb {
    margin: 20px 0 0 0;
} */

.blog-details-section .custom-breadcrumb .breadcrumb .breadcrumb-item .breadcrumb-link,
.blog-details-section .custom-breadcrumb .breadcrumb .breadcrumb-item {
    color: #575756;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 22.5px */
    text-decoration: none;
}

/* .blog-details-section .blog-details-main-section {
    padding: 40px 0 30px 0;
} */

.blog-details-section .blog-details-main-section .blog-details-date-author .blog-detail-date {
    color: #575756;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* margin: 0 0 10px 0; */
}
.blog-details-section .custom-breadcrumb{
    margin-bottom: 30px;
}
.blog-details-section .blog-details-main-section .blog-details-date-author .blog-detail-date span {
    padding-left: 30px;
}

.blog-details-section .blog-detail-page-title {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0;
}

.blog-details-section .blog-details-content .blog-content {
    color: #575756;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    list-style: disc;
}

/* .blog-details-section .blog-details-content {
    margin-top: 50px;
} */

.blog-details-section ul.blog-content-ul {
    padding: 0 15px 0;
}
.blog-details-section .more-like-this-wrapper .more-like-this-titler{
    color: #000;
    font-size: 22px;
    font-weight: 500;
    line-height: 150%;
}
.blog-details-section .blog-details-content .blog-content li:before {
    display: inline-block;
    content: '';
    -webkit-border-radius: 0.375rem;
    border-radius: 0.375rem;
    height: 0.75rem;
    width: 0.75rem;
    margin-right: 0.5rem;
    background-color: #000;
}

/* .blog-details-section .blog-details-main-wrapper-section {
    margin-top: 36px;
} */
.mb-25{
    margin-bottom: 0px !important;
}
.blog-details-main-wrapper-section{
    margin-top: 36px;
}
.blog-details-section .blog-details-main-wrapper-section .blog-details-main-wrapper {
    margin: 0 0 30px 0;
}

.blog-details-section .blog-details-main-wrapper-section .blog-details-main-wrapper .blog-details-main-wrapper-title {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.blog-details-section .blog-details-main-wrapper-section .blog-details-main-wrapper .blog-details-main-wrapper-content {
    color: #484848;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.blog-details-section .social-media-link a.share-icon {
    text-decoration: none;
}

.blog-details-section .social-media-share-wrapper {
    display: flex;
    align-items: center;
}

.blog-details-section .social-media-link {
    gap: 20px;
    display: flex;
    margin-left: 30px;
}

.blog-details-section .social-media-share-main h4 {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin: 0px;
}

/* more-like-this-wrapper section start here */
.blog-details-section .more-like-this-wrapper {
    margin: 40px 0 0 0;
}

section.blog-details-section {
   padding-top: 19px;
   padding-bottom:20px ;
}

.blog-details-section .read-more-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.blog-details-section .card.custom-more-like-card p.card-text {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: .6;
    margin-bottom: 10px;
    min-height: 66px;
}

.blog-details-section .read-more-wrapper .card-link {
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;
}

.blog-details-section .card.custom-more-like-card h5.card-title {
    color: #1A1A1A;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

/* more-like-this-wrapper section end here */
/* blog detail breadcrumb section end here */
/* blog detail page css end here */

/* blog page css start here */
/* blog page banner section start here */
.blog-banner-section {
    width: 100%;
    background-image: url("../images/AdobeStock_212329616.png");
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0% 5.5% 0%;
}

.blog-banner-section .page-title-main .page-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

/* blog page banner section end here */
/* blog page tabing section start here */
.blog-section .more-like-this-wrapper {
    margin: 60px 0 0 0;
}

section.blog-section {
    padding: 0 0 35px 0;
}

.blog-section .read-more-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(235, 95, 106);;

}

.blog-section .card.custom-more-like-card p.card-text {
    color: white;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: .6;
    margin-bottom: 10px;
    min-height: 66px;
}

.blog-section .read-more-wrapper .card-link {
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;
}

.blog-section .card.custom-more-like-card h5.card-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 25px;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px; */
}

.blog-section .more-like-this-wrapper .nav-item .nav-link {
    color: #878786;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    background-color: transparent;
    padding: 0 30px 0 0;
}

.blog-section .more-like-this-wrapper .nav-item .nav-link.active {
    color: #000;
}

.blog-section .card.custom-more-like-card {
    margin-bottom: 30px;
    background-color: #1A1919 !important    ;
}

/* blog page tabing section end here */
/* blog page css end here */

/* about page css start here */
/* about page banner section start here */
.about-banner-section {
    width: 100%;
    background-image: url("../images/AdobeStock_478700806.png");
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0 5.5% 0%;
}

.about-banner-section .page-title-main .page-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

/* about page banner section end here */
/* about page 2nd section start here */
.about-why-talk {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}

.about-why-talk h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 37%;
    height: 132%;
    display: block;
    position: absolute;
    right: -45%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -70%;
}

.about-why-talk .why-talk-about-us-wrapper {
    position: relative;
}

.about-why-talk::after {
    content: "";
    width: 81px;
    height: 220px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -4%;
    z-index: 0;
    left: 16.5%;
}

.about-why-talk .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 6rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.about-why-talk h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 90px;
    width: 201px;
}

.about-why-talk .talk-text-description {
    margin: 30px 0 0 118px;
    max-width: 430px;
}

.about-why-talk .talk-text-description .third-section-description {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.about-why-talk .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    height: 100%;
}

.about-why-talk .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 19%;
    height: 13%;
    display: block;
    position: absolute;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 7%;
}

.about-testimonials-section .testimonials-slider-items .slick-slide {
    margin: 0px 20px;
}

.about-testimonials-section::before {
    content: "";
    background-image: url(../images/testi-about.png);
    width: 7%;
    height: 25%;
    display: block;
    position: absolute;
    right: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0%;
}

.about-testimonials-section .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/testi-about-1.png);
    width: 5%;
    height: 18%;
    display: block;
    position: absolute;
    left: -1%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0%;
    top: 22%;
}

.about-why-talk .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 7%;
    height: 19%;
    display: block;
    position: absolute;
    left: -1%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 56%;
}

.about-why-talk .talk-about-us-btn:hover {
    background-color: #fff;
}

.about-why-talk .why-talk-about-us-wrapper .fun-feature-img {
    width: 80%;
    margin: 0 0 0 auto;
}

/* about page 2nd section end here */
/* about page about-key-features-section start here */
.about-key-features-section {
    padding: 114px 0 98px 0;
    background-color: #000;
    position: relative;
}

.about-key-features-section::after {
    content: "";
    width: 16%;
    height: 43%;
    position: absolute;
    bottom: 0;
    right: 0px;
    background-image: url("../images/1.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.about-key-features-section .why-talk-about-us-wrapper .fun-feature-img {
    width: 80%;
    position: relative;
}

.about-key-features-section .why-talk-about-us-wrapper .fun-feature-img::after {
    content: "";
    width: 19%;
    height: 12%;
    position: absolute;
    bottom: 16%;
    right: -24%;
    background-image: url(../images/3.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.about-key-features-section .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/key-features.png);
    width: 8%;
    height: 21%;
    display: block;
    position: absolute;
    left: -1%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 7%;
}

.about-key-features-section h4.talk-text-wrapper {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 0 40% 0 0;
}

.about-key-features-section h4.talk-text-wrapper:after {
    content: "";
    border: 0.2px solid #fff;
    display: block;
    margin: 30px 0 0 90px;
    width: 201px;
}

.about-key-features-section .why-talk-about-us-wrapper {
    position: relative;
}

.about-key-features-section::before {
    content: "";
    width: 81px;
    height: 230px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -4%;
    z-index: 0;
    right: 15.9%;
}

.about-key-features-section .talk-text-description {
    margin: 38px 0 0 93px;
}

.about-key-features-section .talk-content-icon h5.third-section-description {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 72%;
    margin-bottom: 10px;
}

.about-key-features-section .talk-content-text p {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.about-key-features-section .talk-content-icon {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.about-key-features-section .talk-btn-wrapper {
    margin: 0 0 0 60px;
}

.about-key-features-section .talk-about-us-btn {
    display: inline-flex;
    padding: 12px 20px;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.about-key-features-section .talk-about-us-btn:hover {
    border: 1px solid #F1666E;
    color: #EB5F6A;
    background-color: transparent;
}

.about-key-features-section .talk-content-icon-wrapper {
    width: 30px;
    height: 60px;
    text-align: center;
}

/* about page about-key-features-section end here */
/* about page about-why-us section start here */
.about-why-us-section {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}

.about-why-us-section .why-talk-about-us-wrapper .fun-feature-img {
    width: 80%;
    margin: 0 0 0 auto;
}

.about-why-us-section h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 26%;
    height: 83%;
    display: block;
    position: absolute;
    right: -19%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -40%;
}

.about-why-us-section .why-talk-about-us-wrapper {
    position: relative;
}

.about-why-us-section::before {
    content: "";
    width: 81px;
    height: 227px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -4%;
    z-index: 0;
    left: 16%;
}

.about-why-us-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 6rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.about-why-us-section h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 90px;
    width: 201px;
}

.about-why-us-section .talk-text-description {
    margin: 38px 0 0 118px;
}

.about-why-us-section .talk-text-description .third-section-description {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.about-why-us-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    height: 100%;
}

.about-why-us-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 25%;
    height: 20%;
    display: block;
    position: absolute;
    right: -16%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0%;
}

.about-why-us-section .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 5%;
    height: 13%;
    display: block;
    position: absolute;
    left: -12px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 39%;
}

.about-why-us-section .talk-about-us-btn:hover {
    background-color: #fff;
}

.about-why-us-section .why-talk-about-us-wrapper .home-fifth-img-section {
    position: relative;
}

/* about page about why-us section end here */


/* about page TESTIMONIALS section start here */
.about-testimonials-section {
    padding: 114px 0 98px 0;
    background-color: #000;
    position: relative;
}

.about-testimonials-section .why-talk-about-us-wrapper {
    position: relative;
}

.about-testimonials-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    /* 125% */
    text-transform: uppercase;
}

.about-testimonials-section h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 0;
    width: 201px;
}

.about-testimonials-section .talk-text-description {
    margin: 38px 0 0 78px;
}

.about-testimonials-section .talk-text-description h5.third-section-description {
    color: #C5C5C5;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    max-width: 45%;
    width: 100%;
    margin-bottom: 41px;
}

.about-testimonials-section ul.testimonials-items-ul {
    flex-wrap: wrap;
    row-gap: 60px;
}

.about-testimonials-section li.testimonials-items-li {
    width: 50%;
    display: flex;
    gap: 41px;
    padding-right: 50px;
}

.about-testimonials-section .testimonials-items-name-review .reviewer-name {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 15px;
}

.about-testimonials-section .testimonials-items-name-review .reviewer-comment {
    color: #A9A9A9;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0 0% 0 0;
}

.about-testimonials-section .slick-arrow {
    width: 49px;
    height: 49px;
}

.about-testimonials-section .slick-prev {
    right: -10%;
    top: -20%;
    left: unset;
}

.about-testimonials-section .slick-next {
    right: -15%;
    top: -20%;
}

/* about page TESTIMONIALS section end here *

/* about page get in touch section start here */
.get-in-touch {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}
.h-500{
    height: 500px;
}
.get-in-touch h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/1.png);
    width: 71.688px;
    height: 60px;
    display: block;
    position: absolute;
    right: -56%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 90%;
}

.get-in-touch .why-talk-about-us-wrapper {
    position: relative;
}

.get-in-touch::after {
    content: "";
    width: 81px;
    height: 237px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -4%;
    z-index: 0;
    right: 22%;
}

.get-in-touch .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 6rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.get-in-touch h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #000;
    display: block;
    margin: 20px 0 0 90px;
    width: 201px;
}

.get-in-touch .talk-text-description {
    margin: 20px 0 0 118px;
    color: #575756;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}

.get-in-touch .talk-text-description .third-section-description {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.get-in-touch .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper {
    position: relative;
    height: 100%;
}

.get-in-touch .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/3.png);
    width: 143.377px;
    height: 120px;
    display: block;
    position: absolute;
    right: 97%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 44px;
}

.get-in-touch .why-talk-about-us-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 143.377px;
    height: 120px;
    display: block;
    position: absolute;
    left: -27px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 25%;
}

.get-in-touch .talk-about-us-btn:hover {
    background-color: #fff;
}

.get-in-touch .why-talk-about-us-wrapper .fun-feature-img {
    width: 80%;
}

.get-in-touch .custom-input {
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
}

textarea#about_message {
    height: unset;
}

.get-in-touch .get-in-touch-form {
    margin: 20px 0 0 118px;
}

.get-in-touch .custom-input.form-select {
    background-image: url("../images/drop.png");
    display: block;
    -moz-padding-start: calc(0.75rem - 3px);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -moz-appearance: none;
    text-transform: capitalize;
}

.get-in-touch-form .fa-caret-down {
    display: none;
}

.get-in-touch .btn.custom-login-btn {
    display: inline-block;
    padding: 11px 45px;
    border-radius: 100px;
    border: 1px solid #EB5F6A;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
}

/* about page get in touch section end here */
/* about page css start here */

/* get in touch css start here */
/* get in touch page banner section start here */
.get-in-touch-banner-section {
    width: 100%;
   
    background-image: url("/imgs/home/AdobeStock_392920212.png");

    /* background-image: url("../images/AdobeStock_392920211.png"); */
    height: 75vh;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 13% 0% 5.5% 0%;
}

.get-in-touch-form .form-label {
    font-family: 'Gotham';
    color:#000;
    font-size: 15px;
    font-weight: 500;
    line-height: 150%; /* 22.5px */
}

.get-in-touch-banner-section .page-title-main .page-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

/* get in touch page banner section end here */
/* get-in-touch-title-description-section start here */
.get-in-touch-title-description-section {
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0 0 0;
    position: relative;
}
.get-in-touch-title-description-section .talk-text-wrapper{
    margin-bottom: 45px !important;
}
.get-in-touch-title-description-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 6rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.get-in-touch-title-description-section h4.talk-text-wrapper:before {
    content: "";
    background-image: url(../images/get-in-touch-1.png);
    width: 10%;
    height: 200%;
    display: block;
    position: absolute;
    right: -8%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: -170%;
}

.get-in-touch-title-description-section::after {
    content: "";
    width: 81px;
    height: 237px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -15%;
    z-index: 0;
    left: 16%;
}

.get-in-touch-title-description-section .why-talk-about-us-wrapper .container .row .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/get-in-touch-1.png);
    width: 187px;
    height: 156px;
    display: block;
    position: absolute;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -197%;
}
.get-in-touch-title-description-section .get-in-touch-title-description {
    margin: 40px 0 20px 0;
    width: 734.801px;
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    font-weight: 500;
    text-transform: uppercase;

}

.get-in-touch-title-description-section .get-in-touch-title-description a {
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    text-decoration-line: underline;
}

.get-in-touch-title-description-section .get-in-touch-fill-form-text {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 18px !important;
    margin-top: 21px !important;
}

/* get-in-touch-title-description-section end here */
/* get-in-touch-title-description-section end here */

.get-in-touch-form .custom-input {
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
    color: var(--Dark-gray, #575756);
    /* para */
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-weight: 400;
}

section.get-in-touch-form {
    padding: 18px 0 63px 0;
}

.get-in-touch-form .custom-input.custom-textarea {
    height: auto;
}

.get-in-touch-form .modal-header {
    justify-content: center;
    position: relative;
    background-image: url(/imgs/home/AdobeStock_392920212.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.get-in-touch-form .modal-body {
    display: flex;
    width: 100%;
    height: 169.5px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #575756;
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.get-in-touch-form .modal-body::after {
    content: "";
    background-image: url(../images/3.png);
    width: 16%;
    height: 29%;
    display: block;
    position: absolute;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
    top: -17px;
    background-size: contain;
}

.get-in-touch-form .btn-close {
    position: absolute;
    top: -20px;
    right: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
}

.get-in-touch-form .modal-title {
    color: #EB5F6A;
    text-align: center;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
}

.get-in-touch-form .text-area {
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 7px;
}

.get-in-touch-form .custom-login-btn {
    margin-top: 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    display: inline-flex;
    padding: 15px 45px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham'; */
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.get-in-touch-form .g-3 {
    row-gap: 40px;
}

.get-in-touch-form .row>* {
    margin-top: 0px;
}

/* get-in-touch-title-description-section end here */
/* get in touch css end here */

.no-results-container {
    padding: 40px 15px;
    display: flex;
    justify-content: center;
}

.no-results-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 40px;
    max-width: 600px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(235, 95, 106, 0.1);
}

.no-results-header {
    margin-bottom: 25px;
}

.no-results-logo {
    margin: 0 auto 20px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animated-logo {
    width: 100%;
    height: auto;
    animation: pulse 2s infinite;
}

.no-results-title {
    font-size: 28px;
    color: #333;
    font-weight: 600;
    margin-bottom: 5px;
}

.no-results-message {
    margin-bottom: 30px;
}

.no-results-message p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.no-results-suggestions {
    margin: 0 auto 30px;
    max-width: 450px;
    background-color: #FFF1F2;
    border-radius: 15px;
    padding: 20px 30px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    text-align: left;
}

.suggestion-item:last-child {
    margin-bottom: 0;
}

.suggestion-icon {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion-text {
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

.no-results-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.reset-filters-btn {
    background-color: #fff;
    color: #EB5F6A;
    border: 2px solid #EB5F6A;
    border-radius: 10px;
    padding: 12px 25px;
    font-weight: 600;
    transition: all 0.3s;
}

.reset-filters-btn:hover {
    background-color: #EB5F6A;
    color: white;
}

.try-advanced-btn {
    background-color: #EB5F6A;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 25px;
    font-weight: 600;
    transition: all 0.3s;
}

.try-advanced-btn:hover {
    background-color: #d5505b;
    transform: translateY(-2px);
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 576px) {
    .no-results-card {
        padding: 30px 20px;
    }
    
    .no-results-suggestions {
        padding: 15px;
    }
    
    .no-results-title {
        font-size: 24px;
    }
    
    .suggestion-item {
        margin-bottom: 12px;
    }

    .no-results-logo {
        width: 80px;
        height: 80px;
    }
}

.user-list-wrapper {
    position: relative;
}


/* find my spark css start here */

/* find my spark banner section start here */
.find-my-spark-banner-section {
    width: 100%;
    background-image: url("../images/sexy-art-banner-1.png");
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0% 5.5% 0;
}

.find-my-spark-banner-section .page-title-main .page-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

.find-my-spark-banner-section .page-title-main .page-sub-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.search-bar-section .searh-bar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-bar-section .age-wrapper {
    display: flex;
    flex-direction: column;
}


.search-bar-section .search-bar-form {
    padding: 8px 9px 8px 29px;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 0px 15px 20px 0px rgba(116, 116, 116, 0.10);
    position: absolute;
    width: 100%;;
    left: 0;
    top: -50px;
}

.age-select-wrapper {
    flex: 1;
    min-width: 200px;
    margin-bottom: 10px;
    margin-right: 20px;
}

.location-wrapper {
    margin-left: 20px;
    margin-right: 20px;
}



.search-bar-section .county-wrapper {
    display: flex;
    flex-direction: column;
}


 /* Match the styling between country and county dropdowns */
 .county-wrapper {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
}

.county-dropdown-menu.compact-dropdown {
        max-height: 250px;
        overflow-y: auto;
        width: 91%;
        min-width: 250px;
        max-width: 100%;
        padding-bottom: 10px;
    }
    
    /* Make the checkboxes more compact */
    #advancedCountyCheckboxesContainer .form-check {
        padding-bottom: 5px;
        margin-left: 5px;
    }

    /* Add this to your custom.css file */
    .view-all-btn {
        display: inline-block;
        background-color: #f0f0f0;
        border-radius: 15px;
        padding: 4px 10px;
        font-size: 12px;
        cursor: pointer;
        margin-left: 5px;
        color: #EB5F6A;
        transition: background-color 0.2s;
    }

    .view-all-btn:hover {
        background-color: #EB5F6A;
        color: white;
    }
    
    /* Make selected counties preview look better */
    .selected-counties-tags {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
    }
    
    /* Make dropdown positioning more accurate */
    .dropdown-menu[data-bs-popper] {
        margin-top: 0;
    }

.county-dropdown-menu {
    width: 120%;
    padding: 10px 0;
    background-color: white !important;
    overflow-y: auto !important;
    overflow-x: hidden  !important;
}

.county-dropdown-menu li {
    white-space: normal !important;
    padding: 0 10px;
}

#country-checkbox-container .form-check {
    padding-right: 10px;
    word-break: break-off !important;
}

.county_select {
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#county-checkboxes-container {
    max-height: 200px;
    overflow-y: auto;
}

.location-wrapper  button,
.county-wrapper button {
    background-color: white;
    color: black;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: initial;
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
}

.location-wrapper button:focus,
.county-wrapper button:focus {
    background-color: #EB5F6A; 
    outline: none;
}

.location-wrapper  button::after,
.county-wrapper button::after {
    display: none !important;
}

.search-list-location {
    max-height: 250px;
    overflow-y: auto;
    background-color: white !important;
    padding-top: 20px;
    text-transform: capitalize;
}

.search-list-location label,
.county-dropdown-menu label {
    margin-bottom: 0 !important;
    margin-right: 10px;
}

.search-list-location-allbox {
    padding-left: 25% !important;
    display: flex !important;
    align-items: center;
}

.search-list-county-allbox {
    padding-left: 23.5% !important;
}

.search-bar-section .vl {
    width: 1px;
    border-left: 1px solid #000;
    height: 50px;
}

.search-bar-section .age-label {
    color: var(--Border-light-gray, #878786);
    font-family: 'Gotham';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

#selected-countries-box {
    display: none !important;
}

/* Advanced search horizontal form fields */
.select-wrapper-row {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.select-wrapper-row .select-wrapper {
    flex: 1;
}

/* Make dropdown width match container */
.select-wrapper-row .county-dropdown-menu.compact-dropdown {
    width: 100%;
    min-width: 250px;
}

/* Make dropdown match select element width */
.select-wrapper-row .county-dropdown-menu.compact-dropdown {
    width: 100% !important;
    min-width: 100% !important;
    max-height: 250px;
    overflow-y: auto;
}

/* Make Counties dropdown button match Current Situation select - FIXED VERSION */
.location-dropdown button#advancedCountyDropdown {
    width: 100%;
    height: 50px;
    color: rgba(62, 62, 62, 0.90);
    font-size: 15px;
    font-weight: 400;
    background-color: #FFF;
    border: 1px solid #878786;
    padding-left: 12px;
    text-align: left;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    background-image: url("../images/drop.png");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* Add dropdown arrow as pseudo-element instead of background image */
.location-dropdown button#advancedCountyDropdown::after {
    display: none;
}

/* Remove default Bootstrap dropdown arrow */
.location-dropdown .dropdown-toggle::after {
    display: none !important;
}
/*
.wishlist-icon:hover svg path {
    fill: #EB5F6A;
    stroke: transparent;
} */
.liked {
    fill: #EB5F6A;
    stroke: transparent;
}
.likedadvance {
    fill: #EB5F6A;
    stroke: transparent;
}

/* SVG Icon Hover Effects */
.user-profile-icons .access-icon:hover svg path,
.user-profile-icons .wishlist-icon:hover svg path:not(.liked),
.user-profile-icons .smile-icon:hover svg path,
.user-profile-icons .edit-icon:hover svg circle {
    fill: #d14651; /* Darker shade of pink */
    transition: fill 0.2s ease;
}

/* Access key icon specific hover */
.user-profile-icons .access-icon:hover {
    cursor: pointer;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Gift icon specific hover */
.user-profile-icons .smile-icon:hover {
    cursor: pointer;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Three dots menu hover */
.user-profile-icons .edit-icon:hover {
    cursor: pointer;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Lock icon hover effect in gallery */
.lock-icon:hover svg path {
    fill: #d14651; /* Darker shade of pink */
    transition: fill 0.2s ease;
}

/* SVG Edit Icons Hover Effects */
.edit-text-icon:hover circle {
    fill: #EB5F6A;
    transition: fill 0.2s ease;
}

.edit-text-icon:hover path {
    fill: #F8F8F8;
    transition: fill 0.2s ease;
}

/* Gallery Image Delete Icons */
.gallery-img-edit-icon:hover circle {
    fill: #d14651;
    transition: fill 0.2s ease;
}

/* Upload Gallery Button */
.upload-gallery-image-button:hover svg path {
    fill: #EB5F6A;
    transition: fill 0.2s ease;
}

.upload-gallery-image-button:hover {
    background: #F8F8F8 !important;
}

.edit-text-iconEditor:hover circle {
    fill: #EB5F6A;
    transition: fill 0.2s ease;
}
.edit-text-iconEditor:hover path {
    fill: #F8F8F8;
    transition: fill 0.2s ease;
}

/* Back Button */
.back-button:hover svg path {
    stroke: #EB5F6A;
    transition: stroke 0.2s ease;
}

/* Add transform scale effect for better visual feedback */
.edit-text-icon:hover,
.gallery-img-edit-icon:hover {
    transform: scale(1.05);
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Request gallery access button hover */
.request-gallery-access-button:hover svg path {
    fill: #d14651; /* Darker shade of pink */
    transition: fill 0.2s ease;
}

.search-bar-section .age-select-wrapper select {
    border: none;
    width: 50px;
    color: #000;
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0rem center;
    text-transform: capitalize;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-bar-section .age-select-wrapper select:focus-visible {
    outline: none;
}

.search-bar-section .location-wrapper {
    display: flex;
    flex-direction: column;
}

.search-bar-section .location-wrapper select {
    border: none;
    width: 300px;
    color: #000;
    /* Subtitle */
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    text-transform: capitalize;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-bar-section .location-wrapper select:focus-visible {
    outline: none;
}

.search-bar-section label {

    color: var(--Border-light-gray, #878786);
    font-family: 'Gotham';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 9px;
}

.age-select-wrapper span {
    /*margin-left: 48px;
    margin-right: 48px;*/
    color: #000;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
} 

/* Add to your custom.css file */
body.modal-open[data-modal="advanced-search"] .modal-backdrop:not(.advanced-search-backdrop) {
    display: none !important;
}

#get-in-touch {
    z-index: 1060 !important;
}

#get-in-touch + .modal-backdrop {
    z-index: 1050 !important;
    background-color: rgba(0, 0, 0, 0.5);
}


/* Advanced County Selection Styling */
#advancedSelectedCountiesPreview {
    margin-top: 10px;
    padding: 5px 0;
    transition: all 0.3s ease;
}

#advancedSelectedCountiesTags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.county-tag {
    background-color: #f0f0f0;
    border-radius: 15px;
    padding: 4px 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.county-tag .remove-county {
    cursor: pointer;
    color: #999;
}

.county-tag .remove-county:hover {
    color: #EB5F6A;
}

.county-dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

#advancedCountySearch {
    border-radius: 15px;
    margin-bottom: 5px;
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    background: #FFF;
    padding: 14px 20px;
    color: rgba(62, 62, 62, 0.90);
    /* font-family: 'Gotham'; */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    text-transform: capitalize;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Ensure audio/video elements stay behind when advanced search is active */
body.modal-open[data-modal="advanced-search"] .video-pop-up,
body.modal-open[data-modal="advanced-search"] .incoming-call-container {
    z-index: 1040 !important;
}

body.modal-open[data-modal="advanced-search"] .modal-backdrop.advanced-search-backdrop {
    z-index: 0 !important;
}

/* Keep the modal itself at a higher z-index */
#get-in-touch {
    z-index: 1060 !important;
    position: fixed;
}

/* Ensure modal content has proper positioning */
#get-in-touch .modal-dialog {
    position: relative;
    z-index: 1061;
}

/* Display counties box */
.selected-counties-container {
    position: fixed;
    right: 20px;
    top: 35%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    width: 290px;
    overflow-y: auto;
    z-index: 100;
    padding: 15px;
    margin-top: 5px;
    border: 1px solid #EB5F6A;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease-in-out;
}

.selected-counties-container.show {
    opacity: 1;
    transform: translatex(0);
}

.selected-counties-container label {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}

.selected-counties-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selected-counties-container li {
    padding: 8px 12px;
    background-color: #f8f8f8;
    margin-bottom: 5px;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-counties-container li:hover {
    background-color: #f0f0f0;
}

.selected-counties-container li .remove-item {
    cursor: pointer;
    color: #EB5F6A;
    font-weight: bold;
}

.selected-counties-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #EB5F6A;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 12px;
    margin-left: 8px;
}
 /* Premium user filter locked */
 .premium-locked {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
 }

 .premium-locked:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    z-index: 10;
 }

 .premium-locked select,
 .premium-locked input {
    background-color: #f0f0f0 !important;
    border-color: #ddd !important;
    cursor: not-allowed !important;
 }

 .premium-locked input[type="checkbox"] {
    opacity: 0.6;
    cursor: not-allowed !important;
 }

 .premium-locked .slider-handle,
 .premium-locked slider-selection {
    pointer-events: none !important;
    cursor: not-allowed !important;
 }

 /* Make labels appear disabled too */
 .premium-locked label {
    opacity: 0.7;
 }

 .upgrade-account-text p:hover {
    background-color: #EB5F6A;
    color: white;
 }

 /* Make the upgrade text more prominent 
 .upgrade-account-text a {
    display: block;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #EB5F6A;
    margin-bottom: 15px;
    text-align: center;
    transition: all 0.3s ease;
 }



 .upgrade-account-text p {
    margin: 0;
    font-weight: 500;
 }
    */





.Advance-search-link {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    max-width: 300px;
    margin: 1.5rem auto;
    padding: 15px 15px;
    border-radius: 10px;
    position: relative;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.45);
}

.Advance-search-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.Advance-search-link:hover {
    background-color: rgba(0, 0, 0, 0.55);
}

.Advance-search-link.my-5 {
    margin-top: 5rem !important;
}

.Advance-search-link p {
    color: white !important;
    margin: 0;
    font-weight: 700 !important;
    text-align: center;
    cursor: pointer;
}

.Advance-search-link p:hover {
    text-decoration: underline;
    
}




/* For large screens (1025px and above) */
@media (max-width: 1300px) {
    /*.Advance-search-link {
        margin-left: 9%;
    }*/
}
@media (min-width: 1301px) and (max-width: 1700px) {
    /*.Advance-search-link {
        margin-left: 15%;
    }*/
}
@media (min-width: 1701px) and (max-width: 2000px) {
    /*.Advance-search-link {
        margin-left: 10%;
    }*/
}
.search-bar-section .Advance-search-link a {
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
    margin-top: 20px;
    display: inline-block;
}

.user-listing .sorting-filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.user-listing .sorting-label {
    color: #000;
    /* Subtitle */
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-right: 9px;
}

.search-bar-section .search-bar-form-mobile {
    display: none;
}

.user-listing select {
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    background: #FFF;
    padding: 6px 110px 6px 15px;
    color: var(--Border-light-gray, #878786);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    text-transform: capitalize;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#login option.selcted {
    background: #D9D9D9;
}

.custom-header-after-login.navbar .navbar-nav .nav-link::after {
    content: "";
    display: block;
    margin: auto;
    height: 1px;
    width: 100%;
    top: 5px;
    background: transparent;
    transition: all 0.3s;
}

.custom-header-after-login.navbar .navbar-nav .nav-link:hover::after {
    width: 100%;
    background: #EB5F6A;
}

.user-listing .user-status {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    align-items: center;
}

.user-listing .user-status .online-status {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin-left: 5px;
    margin-right: 17px;
}

.user-status .user-name {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 19px !important;
    font-style: normal;
    font-weight: 500;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.w-70px{
    width: 70px;
}
.f-w{
    font-weight: 500 !important;
}
input[type="checkbox"] {
   width: 16px;
   height: 16px;
}
.user-detail {
    margin-top: 3px;
    display: flex;
    align-items: center;
}
.user-detail .user-location{
    margin-left: 25px;
}

.user-detail .user-age {
    color:  #575756;
    font-family: 'Gotham';
    font-size: 17px;
    font-style: normal;
    font-weight: 400;

}
.costom-destop-menu{
    display: none !important;
}
.find-my-spark-box{
    margin-bottom: 5px;
}
.user-detail .user-location {
    color: #3E3E3E;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.user-description p {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

.user-description .more {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.user-list {
    position: relative;
    width: 100%;
}

.user-list .wishlist-icon {
    position: absolute;
    top: 0;
    right: 0;
}

.user-listing .user-list-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 25px;
    row-gap: 25px;

}

.user-listing {
    padding-bottom: 50px;
}

.search-bar-section {
    /* padding: 50px 0px; */
    padding: 0;
    position: relative;
}

#login .selected {
    opacity: 0.3;
    background: #D9D9D9;
    padding: 15px;
}

#login option {
    padding: 15px;
}

.user-list-wrapper {
    margin-top: 42px;
}

.user-listing .sorting-filter .dropdown .dropdown-toggle {
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    background-color: #FFF;
    padding: 5px 95px 5px 15px;
    color: #000;
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    text-transform: capitalize;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.user-listing .sorting-filter .dropdown .dropdown-toggle::after {
    display: none;
}

.user-listing .sorting-filter .dropdown-menu {
    padding: 1rem 0.8rem 1rem 1rem;
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 225px;
    transform: translate3d(-75px, 37px, 0px) !important;

}

.user-listing .sorting-filter .dropdown-item {
    color: var(--Dark-gray, #575756);
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    padding: 13px 0px 13px 8px;
}

.kill-switch-btn{
    margin-top: 45px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    display: inline-flex;
    padding: 12px 20px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham'; */
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background-color: transparent;
}
.user-listing .sorting-filter .dropdown-item:hover {
    background: rgba(217, 217, 217, 0.3);
    font-weight: 500;
}

.search-bar-section .modal-header {
    justify-content: center;
    position: relative;
    background-image: url(/images/banner-advance.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2.8rem 0px 2.2rem 0;
}

.search-bar-section .modal-title {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

/*
.user-list .user-name {
    margin-top: 10px;
} */

.search-bar-section .btn-close {
    position: absolute;
    top: -20px;
    right: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
}

.search-bar-section .modal-dialog {
    max-width: 859px;
}

.search-bar-section .modal-body::after {
    content: "";
    background-image: url(../images/advance-search-icon.png);
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    right: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    top: -22px;
    background-size: contain;
}

.search-bar-section .modal-body {
    padding: 0rem;
}

.search-bar-section .advance-search-form select {
    width: 100%;
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    background: #FFF;
    padding: 14px 20px;
    color: rgba(62, 62, 62, 0.90);
    /*
 font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    text-transform: capitalize;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-bar-section .advance-search-form .advance-location-text {
    color: #000;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    margin-top: 6px;
}

.search-bar-section .advance-search-form .advance-location-text .light-text {
    color: #3E3E3E;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}
.humbarger {
    list-style: none;
}
.search-bar-section .adavance-seach-label {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.upgrade-account-text p {
    color: #EB5F6A;
    text-align: center;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    padding: 10px 50px 10px 50px;
    margin: 0px;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.upgrade-account-text {
    display: flex;
    justify-content: center;
}

.upgrade-account-text {
    background-image: url(../images/hr-upgrade.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.advance-search-form .upgrade-account-filter {
    margin-top: 25px;
    padding-left: 30px;
    padding-right: 30px;
}

.search-bar-section .advance-search-form .select-wrapper {
    margin-bottom: 25px;
}

.search-bar-section .upgrade-account-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 35px;
}

.search-bar-section .upgrade-account-filter select {
    background-image: url(../images/upgrade-filter.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.search-bar-section .range-input-text-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-bar-section .range-input-text {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

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

.search-bar-section .fantasies-checkbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.search-bar-section .advance-search-form .form-content {
    padding: 40px 40px 25px 40px;
}

.submit-button-wrapper {
    padding: 22px 45px;
    background: #F5F5F5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eaeaea;
    margin-top: 20px;
}

.clear-all-button {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid #333;
    background-color: transparent;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.clear-all-button:hover {
    background-color: #333;
    color: white;
}

.submit-button {
    color: #EB5F6A;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 35px;
    border-radius: 50px;
    border: 1px solid #EB5F6A;
    background-color: transparent;
    transition: all 0.3s ease;
}

.submit-button:hover {
    background-color: #EB5F6A;
    color: #fff;
}

/* Make buttons consistent on mobile */
@media (max-width: 576px) {
    .search-bar-section .advance-search-form .submit-button-wrapper {
        padding: 15px;
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .search-bar-section .advance-search-form .clear-all-button,
    .search-bar-section .advance-search-form .submit-button {
        width: 100%;
    }
}

.search-bar-section .advance-search-form .submit-button {
    color: #EB5F6A;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 35px;
    border-radius: 50px;
    border: 1px solid #EB5F6A;
    background-color: transparent;
    transition: all 0.3s ease;
}

.search-bar-section .advance-search-form .submit-button:hover {
    background-color: #EB5F6A;
    color: #fff;
}

.search-bar-section .advance-search-form .checkbox-label {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.search-bar-section .advance-search-form .submit-button-wrapper {
    background: #F5F5F5;
    display: flex;
    justify-content: space-between;
}

.slider-selection {
    background: #f77500 !important;
    height: 3px !important;
}

.slider.slider-horizontal {
    width: 100% !important;
    height: 20px;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #bdbdbd !important;
    text-align: center;
    background-color: transparent !important;
    border-radius: 4px;
    font-size: 18px;
}

.tooltip.top .tooltip-arrow {
    display: none !important;
}

.slider .tooltip.top {
    margin-top: -25px !important;
}

.well {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 0;
}

.slider-ghost .slider-track {
    height: 5px !important;
}

.tooltip {
    top: 200%;
}

.slider-track-low {
    border-radius: 100px;
    background: #D9D9D9;
    height: 3px;
}

.slider-track-high {
    border-radius: 100px;
    background: #D9D9D9;
    height: 3px;
}

.slider-handle {
    background-color: #A49C9A !important;
    background-image: none !important;
}

.slider-selection {
    background-color: #A49C9A !important;
}

.slider .tooltip.top {
    opacity: 1;
}

.slider .tooltip-inner {
    color: #A49C9A !important;
    /* font-family: 'Gotham';*/
}

.slider .slider-handle {
    top: -4px;
}

.advance-search-form .checkbox-wrapper {
    margin-top: 58px;
}

.advance-search-form .clear-all-button:hover {
    background-color: #000;
    color: #fff;
}

.advance-search-form .checkbox-wrapper-input .checkbox-wrapper-input-label {
    display: flex;
    column-gap: 11px;
    align-items: baseline;
    margin-bottom: 30px;
}

.advance-search-form .adavance-seach-label-height {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 3px;
}

.range-input-text-wrapper .height-range {
    font-family: 'Gotham';
    font-size: 16px;
    color: var(--Dark-gray, #575756);
    font-weight: 400;
}

.searchbar-search-button .search-button {
    background-color: transparent;
    border: none;
    padding: 29px 48px;
    background-color: #EB5F6A;
    border-radius: 12px;
}
.setAndRedirectBelowText{
    font-size: 10px;
    margin-top: 3px;


}
.security-and-privacy-checkbox-text{
    margin-top: -5%;
    font-size: 10px;
    font-weight: bold;
}
.adv-btn-asl{
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 15px !important;
   /*margin-top: 12px !important;*/
}
.Advance-search-link .search-button {
    background-color: #EB5F6A;
    border: none;
    height: 30px;
    /*padding: 0px 12px 0px 12px;*/
    margin-left: 5px;
    margin-top: -3px;
    color: #fff;
    border-radius: 50px;
}

.searchbar-search-button {
    margin-left: 20px;
}

.searchbar-search-button .search-button svg {
    width: 25px;
    height: 25px;
}


.range-input .slider-wrapper {
    padding: 0px 10px;
}

.range-input, .checkbox-wrapper {

    padding-left: 30px;
    padding-right: 30px;
}

.advance-search-form .checkbox-wrapper-input .open-to-Experimentation-checkbox {
    margin-bottom: 10px;
}

/* find my spark page banner section end here */
/* find my spark css end here */

/* how it works section start here */

.how-it-works-section {
    width: 100%;
    background-image: url(../images/AdobeStock_843953943.png);
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 14% 0 9% 0%;
    z-index: -1;
}

.how-it-works-section .page-title {
    color: var(--Pink, #EB5F6A);
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

.step-1-section {
    padding: 80px 0px;
}

.step-1-section .talk-text-wrapper {
    color: #000;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin: 3rem 6rem 0 0.8rem;
}

.step-1-section .talk-text-wrapper::after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 90px;
    width: 201px;
}

.step-1-section .talk-text-description {
    margin: 38px 0 0 118px;
    max-width: 430px;
    color: #000;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;

}

.step-1-section .talk-text-description::before {
    content: "";
    background-image: url(../images/1.png);
    width: 4%;
    height: 10%;
    display: block;
    position: absolute;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.step-1-section .talk-text-description::after {
    content: "";
    background-image: url(../images/1.png);
    width: 8%;
    height: 26%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0%;
    right: 50%;
}

.step-1-section .talk-text-description .description-break {
    margin-top: 20px;
}

.step-1-img {
    position: relative;
    width: 79%;
    margin-left: auto;
}

.step-1-img .play-button-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.step-1-section {
    position: relative;
}

.step-1-wrapper::after {
    content: "";
    /* background-image: url(../images/step-1-1.png); */
        background-image: url(../images/1.png);

    width: 7%;
    height: 22%;
    display: block;
    position: absolute;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 30%;
}

.step-1-wrapper .description-break {
    margin: 38px 0 0 118px;
    max-width: 430px
}

.step-1-section .title-nd-text-wrapper::before {
    content: "";
    width: 81px;
    height: 227px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: -1;
    left: 16%;
}

.step-2-section {
    padding: 97px 0px;
    background: #000;
}

.step-2-section .talk-text-wrapper {
    color: #FFF;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    margin: 0 40% 0 0;
    text-transform: uppercase;
}

.step-2-section .talk-text-description {
    color: #FFF;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.step-2-section .talk-text-wrapper::after {
    content: "";
    border: 0.2px solid #fff;
    display: block;
    margin: 30px 0 0 90px;
    width: 201px;
}

.step-2-section .talk-text-description {
    margin: 38px 0 0 93px;
    max-width: 400px;
}

.step-2-section .title-nd-text-wrapper {
    margin-top: 80px;
    margin-left: 20%;
}

.step-2-section {
    position: relative;
}

.step-2-section .title-nd-text-wrapper::before {
    content: "";
    width: 81px;
    height: 237px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: 0;
    right: 16%;
}

.step-2-section-img  {
    width: 80%;
}

.step-2-section .title-nd-text-wrapper::after {
    content: "";
    width: 10%;
    height: 30%;
    position: absolute;
    bottom: 0;
    right: 0px;
    background-image: url(../images/1.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.step-2-section .step-2-section-img::after {
    content: "";
    background-image: url(../images/1.png);
    width: 5%;
    height: 10%;
    display: block;
    position: absolute;
    right: 46%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 40%;
}

.step-3-section .talk-btn-wrapper .feel-alive-button {
    color: #EB5F6A;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    background-color: #fff;
    border: 1px solid var(--Pink, #EB5F6A);
    border-radius: 100px;
    padding: 10px 20px;
}

.step-3-section {
    padding: 80px 0px;
    position: relative;
}

.step-3-section .talk-text-wrapper {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin: 3rem 6rem 0 1.5rem;
    z-index: 1;
    position: relative;
}

.step-3-section .talk-text-wrapper::after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 0 90px;
    width: 201px;

}

.step-3-section .talk-text-description {
    margin: 30px 0 0 118px;
    font-family: 'Gotham';
    max-width: 400px;
    color: #000;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}

.step-3-section .talk-btn-wrapper {
    margin: 38px 0 0 118px;
}

.step-3-section .title-nd-text-wrapper::before {
    content: "";
    background-image: url(../images/step-3-1.png);
    width: 4%;
    height: 13%;
    display: block;
    position: absolute;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 58%;
}

.step-3-section .title-nd-text-wrapper::after {
    content: "";
    background-image: url(../images/1.png);
    width: 4%;
    height: 7%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    right: 55%;
    bottom: 9%;
}

.step-3-img {
    width: 80%;
}

.text-right {
    text-align: right;
}

.step-3-section .step-3-img::before {
    content: "";
    background-image: url(../images/1.png);
    width: 9%;
    height: 17%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    right: 46%;
    top: 6%;
}

.step-3-section .step-3-img::after {
    content: "";
    background-image: url(../images/step-1-1.png);
    width: 4%;
    height: 13%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    right: 0%;
    top: 13%;
}

.how-it-works-faq {
    position: relative;
    padding: 80px 0px;
}

.how-it-works-faq::before {
    content: "";
    background-image: url(../images/1.png);
    width: 7%;
    height: 10%;
    display: block;
    position: absolute;
    right: 1%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 2%;
}

.how-it-works-faq::after {
    content: "";
    background-image: url(../images/1.png);
    width: 7%;
    height: 10%;
    display: block;
    position: absolute;
    left: 183px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 20px;
}

.how-it-works-testimonials-section {
    padding: 120px 0px;
    background: #000;
    position: relative;
}

.how-it-works-testimonials-section .title-nd-text-wrapper .talk-text-wrapper {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

.how-it-works-testimonials-section h4.talk-text-wrapper:after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin: 32px 0 32px 0%;
    width: 201px;
}

.how-it-works-testimonials-section .talk-text-description {
    margin: 38px 0 0 78px;
}

.how-it-works-testimonials-section ul.testimonials-items-ul {
    flex-wrap: wrap;
    row-gap: 60px;
}

.how-it-works-testimonials-section .talk-text-description h5.third-section-description {
    color: #C5C5C5;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    max-width: 45%;
    width: 100%;
    margin-bottom: 41px;
}

.how-it-works-testimonials-section .slick-arrow {
    width: 49px;
    height: 49px;
}

.how-it-works-testimonials-section li.testimonials-items-li {
    width: 50%;
    display: flex;
    gap: 41px;
    padding-right: 50px;
}

.how-it-works-testimonials-section .slick-prev {
    right: -10%;
    top: -20%;
    left: unset;
}

.how-it-works-testimonials-section .testimonials-slider-items .slick-slide {
    margin: 0px 20px;
}

.how-it-works-testimonials-section .slick-next {
    right: -15%;
    top: -20%;
}

.how-it-works-testimonials-section .testimonials-items-name-review .reviewer-comment {
    color: #A9A9A9;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0 0% 0 0;
}

.how-it-works-testimonials-section .testimonials-items-name-review .reviewer-name {
    color: #FFF;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 15px;
}

.how-it-works-testimonials-section .title-nd-text-wrapper::before {
    content: "";
    width: 81px;
    height: 227px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: 0;
    right: 16%;
}

.how-it-works-faq .faq-tab-title-main .faq-tab-title {
    color: #000;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    margin-bottom: 13px;
    text-align: center;

}

.step-3-wrapper::before {
    content: "";
    width: 81px;
    height: 227px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    top: -5%;
    z-index: 0;
    left: 16%;
}

.how-it-works-faq .faq-tab-title-main .faq-tab-title::after {
    content: "";
    border: 1px solid #eb5f6a;
    display: block;
    margin-left: 46%;
    width: 100px;
    margin-top: 9px;
    margin-bottom: 34px;
}
input::placeholder {
    opacity: 0.5;
 }

.step-1-section .modal-dialog {
    max-width: 865px;
}

.step-1-section .video-slider video {
    width: 100%;
    height: 0px;
    max-width: 100%;
    object-fit: cover;
}

.step-1-section .slick-next:before {
    content: '';
}

.step-1-section .slick-prev:before {
    content: '';
}

.step-1-section .slick-next {
    right: -40px;
}

.step-1-section .slick-prev {
    left: -40px;
}

.step-1-section .modal-body {
    max-height: 574px;
}

.how-it-works-faq .accordion-button:not(.collapsed)::after {
    content: "";
    background-image: url(../images/minus.svg);
    background-position: 0px;
    background-size: 0.9rem;
}

.step-1-section .video-slider .video-slide {
    position: relative;
    width: 100%;
}

.step-1-section .modal .btn-close {
    position: absolute;
    top: -30px;
    right: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
}

.step-1-section .video-slider .fa-angle-left {
    position: absolute;
    top: 50%;
    left: -5%;
    font-size: 20px;
    color: #fff;
}

.step-1-section .video-slider .fa-angle-right {
    position: absolute;
    top: 50%;
    right: -5%;
    font-size: 20px;
    color: #fff;
}

.step-1-section .modal-body {
    padding: 0px;
}

.step-1-section .video-slider .video-slide .play-pause {
    background-color: transparent;
    border: none;
}

.step-1-section .custom-video-player {
    position: relative;
}

.step-1-section .play-pause {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Style your custom control buttons here */
}

.how-it-works-faq .accordion .accordion-item .accordion-header button.accordion-button.collapsed {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border: 0;
    background-color: #F6F6F6;
    color: #000;
    font-size: 15px;
    column-gap: 5px;
    padding: 2rem 1.25rem;
}

.how-it-works-faq .accordion .accordion-item .accordion-header button.accordion-button {
    background-color: #EB5F6A;
    border-radius: 15px;
    box-shadow: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: #fff;
    padding: 2rem 1.25rem;
    column-gap: 5px;
    font-family: 'Gotham';
    font-size: 15px;
    font-weight: 500;
    line-height: 150%; /* 22.5px */
}
.how-it-works-faq .accordion-body {
    color: #161616;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
}
.how-it-works-faq .accordion-collapse.collapse.show {
    border: 1px solid #EB5F6A;
    border-top: 0px;
    border-radius: 0px 0px 15px 15px;
}

.how-it-works-faq .accordion-item {
    margin-bottom: 10px;

    border: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.how-it-works-faq .accordion-button::after {
    content: "";
    background-image: url(../images/pluse.svg);
    background-size: 0.9rem;
    transform: rotate(0deg);
    width: 1rem;
    height: 1rem;
}

/* how it works section end here */
/* user profile css starts here */

.user-profile {
    padding: 113px 0px 40px 0px;
    position: relative;
}

.user-profile .user-name {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
}

.user-profile .user-detail .user-age {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.user-profile .user-detail .user-location {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.user-profile .user-profile-messge-button {
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background-color: #fff;
    padding: 14px 27px;
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.user-profile .user-message-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-profile .user-profile-icons {
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
}

.user-profile .user-profile-icons .access-icon {
    padding: 11px 12.5px 11px 12.5px;
    background-color: #F8F8F8;
    border-radius: 100%;
}

.user-profile .user-profile-icons .wishlist-icon {
    padding: 11px 12.5px 11px 12.5px;
    background-color: #F8F8F8;
    border-radius: 100%;
}

.user-profile .user-profile-icons .smile-icon {
    padding: 11px 12.5px 11px 12.5px;
    background-color: #F8F8F8;
    border-radius: 100%;
}

.user-profile .user-profile-icons .edit-icon {
    padding: 11px 12.5px 11px 12.5px;
    background-color: #F8F8F8;
    border-radius: 100%;
}

.user-profile .user-message-wrapper {
    margin-top: 40px;
}

.user-profile .about-user {
    margin-top: 40px;
}

.user-profile .about-user-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 15px;
}

.user-profile .about-user-description {
    color: var(--Dark-gray, #575756);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}



.user-profile .about-us-bold-text {
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--Dark-gray, #575756);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.user-profile .user-gallry-image-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 11px;
}

.user-profile .gallaer-img {
    position: relative;
    margin: 6px 0;
}

.gallaer-img img {
    width: 110px;
    height: 110px;
    border: 1px solid transparent;
    border-radius: 15px;
    object-fit: cover;
}

.user-profile .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.user-profile .request-gallery-access-button {
    border-radius: 15px;
    background: var(--Pink, #EB5F6A);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    width: 110px;
    height: 110px;
    border: none;
    row-gap: 5px;
    margin: 5px 0;
}

.user-profile .user-data-wrapper {
    display: flex;
    justify-content: space-between;
    /* flex-wrap: wrap; */
}
.success-message-Change-Password-class{
    background-color: #EB5F6A;
    padding: 15px 10px;
    color: #fff;
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 10px;
}
.user-profile .user-gallery-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 9px;

}

.user-profile .user-gallery {
    margin-bottom: 40px;
}

.user-profile .user-profile-data-left {
    display: flex;
    column-gap: 30px;
}

.user-profile .user-profile-data-right {
    display: flex;
    column-gap: 30px;
}

.user-profile .user-information .dark-text {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.user-profile .user-information .light-text {
    color: var(--Dark-gray, #575756);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
}

.user-profile .user-information-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 14px;
}

.user-profile .user-information-text span {
    margin-left: 30px;
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.user-profile .user-information-text {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.user-profile .fantasies-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 14px;
}

.user-profile .request-access-modal .modal-header {
    background-image: url(../images/lock-banner.png);
    justify-content: inherit;
    padding: 2rem 3rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.user-profile .request-access-modal .modal-dialog {
    max-width: 754px;
}

.user-profile .modal-header::after {
    content: "";
    background-image: url(../images/1.png);
    width: 10%;
    height: 18%;
    display: none;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 15%;
    right: 2%;
    z-index: 2;
}

.report-modal .modal-content{
    background-color: transparent;
}

/*
.user-profile .btn-close {
    position: absolute;
    top: -30px;
    right: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
}
*/
.user-profile .request-access-modal .modal-title {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-left: 29%;
    line-height: 1;
}

.user-profile .gift-modal .modal-header {
    background-image: url(../images/gift-header-bg.png);
    justify-content: center;
    background-size: cover;
    padding: 2rem 3rem;
    background-repeat: no-repeat;
}
#gift-emoji-modal .modal-header{
    background-image: url(../images/gift-header-bg.png);
    justify-content: center;
    background-size: cover;
    padding: 2rem 3rem;
    background-repeat: no-repeat;
}
#reportchat .modal-header{
    background-image: url(../images/gift-header-bg.png);
    justify-content: center;
    background-size: cover;
    padding: 2rem 3rem;
    background-repeat: no-repeat;
}
#openInputBoxBtn .modal-header{
    background-image: url(../images/gift-header-bg.png);
    justify-content: center;
    background-size: cover;
    padding: 2rem 3rem;
    background-repeat: no-repeat;
}
#openInputBoxBtn .modal-header .modal-title {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* font-family: 'Gotham'; */
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}
/* #openInputBoxBtn .modal-body {
    height: 165px;
} */
#openInputBoxBtn .modal-body {
    border: 1px solid #000;
}
#openInputBoxBtn .modal-body {
    border-radius: 0px 0px 0px 0px;
    background: #FFF;
    border-color: #000;
}
#request_key.form-control{
    width: 60%;
    margin: 0 auto;
}
#openInputBoxBtn .btn{
    color: var(--Pink, #EB5F6A);
    text-align: right;
    /* font-family: 'Gotham'; */
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    border: none;
    background-color: transparent;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    padding: 12px 29px;
    margin: 25px 0;
}
#reportchat .modal-header .modal-title {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* font-family: 'Gotham'; */
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}
#reportchat .modal-body {
    border-radius: 0px 0px 0px 0px;
    background: #FFF;
    border-color: #000;
}
#reportchat .modal-body {
    padding:20px 10px;
}
#reportchat #lwReportUserForm{
    border: 1px solid #000;
}
#reportchat .submit-button{
    color: var(--Pink, #EB5F6A);
    text-align: right;
    /* font-family: 'Gotham'; */
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    border: none;
    background-color: transparent;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    padding: 12px 29px;
    margin-top: 25px;
}
#gift-emoji-modal .modal-header .modal-title {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* font-family: 'Gotham'; */
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

#gift-emoji-modal .modal-body {
    border-radius: 0px 0px 0px 0px;
    background: #FFF;
    border-color: #000;
}
#gift-emoji-modal .modal-body{
    border: 1px solid #000;
}

#gift-emoji-modal .gift-list-wrapper{
    display: flex;
}
#gift-emoji-modal .gift-list-wrapper .gift-icon{
    padding-right: 25px;
    width: 70px;
    height: 70px;
}
.user-profile .gift-modal .gift-list-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 4px;
    row-gap: 4px;
}

.user-profile .gift-modal .gift-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-top: 16px;
}

.user-profile .gift-modal .gift-credit-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 20px;
}

.user-profile .gift-modal .credit-remaining-text {
    color: #4F4F4F;
    /* para */
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.user-profile .gift-modal .buy-credit-button {
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
    margin: 0px;
    padding: 7px 22px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    margin-left: 32px;
    background-color: transparent;
}

.user-profile .modal-dialog {
    max-width: 764px;
}

.user-profile .upgrade-account-modal .modal-header {
    background-image: url(../images/upgrade-account-bg.png);
    justify-content: center;
   /* background-size: cover;*/
    padding: 2rem 3rem;
    background-repeat: no-repeat;
    border: none;
}

.user-profile .modal-title {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;/
}

.user-profile .upgrade-account-modal .modal-header::after {
    top: 13%;
    z-index: 2;
}

.user-profile .upgrade-account-modal .upgrade-account-button {
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background-color: #fff;
    color: var(--Pink, #EB5F6A);
    text-align: right;
    /* font-family: 'Gotham'; */
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    padding: 13px 19px;
}

.request-access-modal .modal-content{
    background-color: transparent;
}
.user-profile .upgrade-account-modal .modal-body {
    padding: 34px 48px 43px 57px;
    text-align: center;
    background-color: #fff;
}

.user-profile .upgrade-account-modal .modal-description {
    text-align: left;
    margin-bottom: 31px;
}

.user-profile .upgrade-account-modal .modal-content{
    border: none;
    background-color: transparent;
}
.user-profile .gift-modal .send-gift-button {
    color: var(--Pink, #EB5F6A);
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    border: none;
    background-color: transparent;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    padding: 12px 29px;
}

.user-profile .dropdown .dropdown-item {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    padding: 0.8rem 1rem;
}

.user-profile .dropdown .dropdown-item:hover {
    font-weight: 500;
    background: rgba(217, 217, 217, 0.3);
}

.user-profile .gift-modal .send-gift-wrapper {
    text-align: center;
    margin-top: 33px;
}

.user-profile .gift-modal .modal-header::after {
    top: 17%
}

.user-profile .gift-modal .credit-text {
    color: #4F4F4F;
    text-align: center;
    font-family: 'Gotham';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 5px;
    margin-top: 8px;
}



.user-profile .gift-modal .modal-body {
    padding: 1rem 1rem 2rem 1rem;
}

.user-profile .gift-modal .gift-icon {
    text-align: center;
    background-color: #FAFAFA;
}

.request-access-modal .request-access-key-button {
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background-color: #fff;
    color: var(--Pink, #EB5F6A);
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    padding: 13px 19px;
}

.user-profile .gift-modal .modal-title {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

.user-profile .gift-modal .modal-dialog {
    max-width: 764px;
}

.request-access-modal .modal-description {
    text-align: left;
    margin-bottom: 30px;
}

.request-access-modal .modal-body {
    padding: 34px 48px 43px 57px;
}

.request-access-modal .modal-body {
    text-align: center;
    background-color: #fff;
}

.user-profile .fantasies {
    margin-top: 40px;
}

.user-profile .interests-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 14px;
}

.user-profile .interests {
    margin-top: 40px;
}

.user-profile .love-language-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 14px;
}

.user-profile .user-profile-img::before {
    content: "";
    background-image: url(../images/1.png);
    width: 6%;
    height: 5%;
    display: block;
    position: absolute;
    left: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 26%;
    left: 3%;
}

.user-profile .user-profile-img::after {
    content: "";
    background-image: url(../images/1.png);
    width: 6%;
    height: 5%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    right: 6%;
    bottom: 19%;
}

.user-profile .dropdown .dropdown-menu {
    padding: 1rem 0.6rem 1rem 0.7rem;
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 216px;
    transform: translate3d(-165px, 50px, 0px) !important;
}

.user-profile .user-gallery {
    margin-top: 40px;
}

.user-profile .user-name-title {
    margin-top: 10px;
}

.user-profile .love-language {
    margin-top: 40px;

}
#getUserAllMessageData .user-profile-img img{
    width: 45px;
    height: 45px;
    border-radius: 100%;
    object-fit: cover;
}
.user-profile .user-information-wrapper::before {
    content: "";
    background-image: url(../images/profile-before-1.png);
    width: 10%;
    height: 18%;
    display: block;
    position: absolute;
    left: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 68%;
    left: 0%;
}

.user-profile .user-information-wrapper::after {
    content: "";
    background-image: url(../images/profile-before-1.png);
    width: 6%;
    height: 11%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 36%;
    right: 0%;
}

.user-profile .about-user-wrapper {
    max-width: 726px;
}

.user-profile-wrapper {
    display: flex;
    margin-top: 32px;
    column-gap: 56px;
}

.user-profile .user-information-wrapper {
    width: 76%;
}

.user-profile .user-profile-img {
    width: 280px;
    height: 280px;
    border-radius: 100%;
    object-fit: cover;
}

.user-profile .back-button {
    color: #3E3E3E;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-top: 18px;
}

.user-profile .report-modal .modal-header {
    background-image: url(../images/report-bg.png);
    justify-content: center;
    padding: 2rem 3rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.user-profile .report-modal .modal-header::after {
    top: 8%;
}

.user-profile .report-modal .submit-button {
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background-color: #fff;
    color: var(--Pink, #EB5F6A);
    text-align: right;
    /* font-family: 'Gotham'; */
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    padding: 13px 35px;
}

.user-profile .report-modal .modal-title {
    text-transform: uppercase;
}

.user-profile .upgrade-account-modal .modal-title {
    text-transform: uppercase;
}

.user-profile .report-modal .modal-body {
    text-align: center;
}

.user-profile .report-modal .modal-body {
    padding: 32px;
    background-color: #fff;
}

.user-profile .report-modal .modal-description {
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    padding: 18px 16px 175px 23px;
    text-align: left;
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.user-profile .user-profile-icons .edit-icon::after {
    display: none;
}

.user-profile .back-button svg {
    margin-right: 10px;
}

/* user profile css end here */
/* my profile css starts here */

.my-profile {
    padding: 113px 0px 40px 0px;
}

.message-online-icon{
    margin-top: 3px;
}
.my-profile .back-button {
    color: #3E3E3E;
    font-family: 'Gotham';
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-top: 18px;
}
/* #message .user-online-icon{
    margin: -25px 0 0 140px;
} */
#getUserAllMessageData .user-online-icon{
    margin: 0px 0 0 86px;
}
.my-profile .my-profile-wrapper {
    display: flex;
    column-gap: 56px;
    margin-top: 32px;
}

.my-profile .my-profile-img {
    width: 24%;
}

.my-profile .my-information-wrapper {
    width: 76%;
}

.my-profile .my-profile-img {
    position: relative;
    height: 100%;
}

.video-pop-up .modal-dialog {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.video-pop-up .modal-content{
    height: 100%;
}

.my-profile .my-profile-img img {
    border-radius: 100%;
}

/*.my-profile .profile-img-upload-icon {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/

.profile-img-upload-icon {
    position: absolute;
    bottom: 17px !important;
    left: 49%;
    transform: translateX(-50%);
    z-index: 10;
    transition: all 0.2s ease;
}

.my-profile .profile-img-upload-icon:hover {
    cursor: pointer;
}
.change-profile-pic-header {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

#profileImageEditModal .modal-dialog {
    max-width: 800px;
    width: 800px;
}

#profileImageEditModal .custom-modal-img-wrapper {
    display : flex;
    justify-content: space-around;
    margin-top: 20px;
}

.custom-modal-img-wrapper .custom-modal-img {
    transition: background-color 0.3s;
    border-radius: 50%;
}

.custom-modal-img-wrapper .custom-modal-img:hover {
    cursor: pointer;
    background-color: rgba(255, 0, 0, 0.5);

}

/* Image Preview Modal Styling */
#imagePreviewModal .modal-dialog {
    width: 100%;
    max-width: 1250px;
    height: auto;
}

#imagePreviewModal .modal-content {
    height: auto;
    min-height: 500px;
    max-height: 90vh;
}

#imagePreviewModal .image-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#imagePreviewModal .modal-body {
    padding: 0;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    overflow: hidden;

}

#previewedImage {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.gallaer-img img {
    cursor: pointer;
    transition: transform 0.2s;
}

.gallaer-img img:hover {
    transform: scale(1.05);
}

#prevImageBtn, #nextImageBtn {
    background-color: #EB5F6A;
    border-color: #EB5F6A;
    color: white;
}

#prevImageBtn:hover, #nextImageBtn:hover {
    background-color: #d64a55;
    border-color: #d64a55;
}

.visibility-toggle-container {
    text-align: right;
}

.form-check-input {
    cursor: pointer;
    width: 3em;
    height: 1.5em;
}

.form-check-input:checked {
    background-color: #EB5F6A;
    border-color: #EB5F6A;
}

#visibilityStatusText {
    font-weight: bold;
}

#imagePasswordContainer {
    max-width: 250px;
    margin-left: auto;
}

/*------*/

/* Private image styling */
.gallaer-img.private-image {
    position: relative;
}

.gallaer-img.private-image img {
    filter: blur(8px);
    transition: filter 0.3s ease;
}

.gallaer-img.private-image:hover img {
    filter: blur(5px); /* Reduce blur slightly on hover */
}

.private-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allow clicks to pass through to image */
    z-index: 2;
}

.lock-icon {
    background-color: rgba(235, 95, 106, 0.7); /* #EB5F6A with opacity */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*------*/

#about-custom-modal .modal-dialog {
    max-width: 800px;
    width: 800px;
}

.note-placeholder {
    color: #ccc !important;
}

.video-pop-up .user-image-wrapper{
    position: relative;
    height: 100%;
    object-fit: cover;
}

.video-pop-up .user-image-wrapper .main-user-img img{
    height: 100%;
    object-fit: cover;
}

.video-pop-up .user-image-wrapper .main-user-img{
    height: 100%;

}
.video-pop-up .user-image-wrapper .remote-user-img{
    position: absolute;
    top: 40px;
    right: 40px;
    width: 20%;
    border: 1px solid #FFF;
}

.video-pop-up .video-call-settings{
    position: absolute;
    bottom: 17px;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-pop-up .video-call-audio-setting{
    margin-top: 17px;
    display: flex;
    align-items: center;
    column-gap: 20px;
}
.video-pop-up .video-call-settings-icon{
    display: flex;
    column-gap: 23px;
}

.my-profile .user-name-title-wrapper {
    display: flex;
    align-items: center;
}

.my-profile .edit-text-icon {
    margin-left: 11px;
}

/* Fix message popup positioning */
.messgae-popup {
    position: fixed !important;
    right: 26px !important;
    bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    width: 308px !important;
    height: auto !important;
    z-index: 1055 !important;
}

.messgae-popup .modal-body {
    padding: 0.8rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 20px 20px 0px 0px;
    background: #F8F8F8;
}

.messgae-popup .modal-content {
    background-color: transparent;
    border: none;
}

.messgae-popup .modal-dialog {
    margin: 0px;
}

.messgae-popup .message-notifiaction {
    display: flex;
    justify-content: space-between;
}

.messgae-popup .message-notifiaction-pop-up-text {
    color: #282828;
    /* Subtitle */
   /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-left: 11px;
    margin-right: 15px;
    margin-bottom: 0px;
}

.messgae-popup .message-notifiaction-text {
    display: flex;
    align-items: center;
}

.messgae-popup .modal-dialog {
    position: static;
    margin: 0;
    width: 100%;
    height: auto;
}




/* Fix modal backdrop conflicts */
body.modal-open .modal-backdrop {
    z-index: 1040 !important;
}



.my-profile-information-answer p {
    text-transform: capitalize;
}

.my-profile .about-user-title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.my-profile .user-information-title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.my-profile .fantasies-title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.my-profile.interests-title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.my-profile .love-language-title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.my-profile .gallaer-img {
    position: relative;
}

.my-profile .gallery-img-edit-icon {
    position: absolute;
    top: 1%;
    right: 5%;
}

.my-profile .upload-gallery-image-button {
    width: 110px;
    height: 110px;
    border-radius: 15px;
    background: var(--Pink, #EB5F6A);
    border-color: transparent;
}

.my-profile .my-profile-gallery-image-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}

.my-profile .recently-receive-items .gift-items {
    display: flex;
    column-gap: 39px;
    flex-wrap: wrap;
}

.my-profile .recently-receive-items .gift-items {
    row-gap: 20px;
    column-gap: 25px;

}
.my-profile .recently-receive-items .gift-img{
    width: 40px;
    height: 40PX;
}

.gift-img img{
    height: 100%;
    object-fit: contain;
}
.my-profile .recently-receive-items .recently-receive-items-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 12px;
}

.my-profile .recently-receive-items {
    margin-top: 14px;
}

.my-profile .my-profile-data-wrapper {
    display: flex;
    justify-content: space-between;
    /* flex-wrap: wrap; */
}

.my-profile .my-profile-data-text-wrapper {
    display: flex;
    column-gap: 30px;
}

.my-profile .interests-title-wrapper {
    display: flex;
    align-items: center;
}

.my-profile .user-name-title {
    color: var(--Black, #000);
    /* font-family: 'Gotham';*/
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
}

/*
.my-profile .profile-button {
    border-radius: 10px;
    border: 1px solid var(--Border-light-gray, #878786);
    background: #FFF;
    color: var(--Dark-gray, #575756);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    padding: 4px 40px;
}
    */

.my-profile .about-user-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.my-profile {
    position: relative;
}

.my-profile .about-user {
    margin-top: 28px;
}

.about-user p {
    color: var(--Dark-gray, #575756);
}

.my-profile .my-profile-wrapper::before {
    content: "";
    background-image: url(../images/1.png);
    width: 6%;
    height: 5%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    right: 9%;
    top: 21.5%;
}

.my-profile .my-profile-wrapper::after {
    content: "";
    background-image: url(../images/6.png);
    width: 10%;
    height: 11%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    right: 0%;
    bottom: 5.5%;
}

.my-profile::after {
    content: "";
    background-image: url(../images/1.png);
    width: 5%;
    height: 4%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    left: 6%;
    bottom: 19%;
}

.my-profile::before {
    content: "";
    background-image: url(../images/1.png);
    width: 6%;
    height: 8%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    left: 0%;
    top: 35.5%;
}



.modal {
    z-index: 1050 !important;
}

/* Ensure proper z-index ordering */
.modal-backdrop {
    z-index: 1040 !important;
}

/* Prevent multiple backdrops */
.modal-backdrop + .modal-backdrop {
    display: none !important;
}

#get-in-touch {
    z-index: 1060 !important;
}

#get-in-touch .modal-content {
    position: relative;
    z-index: 1065 !important;
    pointer-events: auto !important;
}

.my-profile .my-profile-gallery-title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.top-modal-text-gal {
    padding-left: 20px;
    padding-right: 20px;
}

/* Override any inline styles */
#chatbox[style*="display: block"] {
    display: none !important;
}

#chatbox.show[style*="display: block"] {
    display: block !important;
}

/* Fix body classes when modal closes */
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}



.user-chat-main-profile .back-button {
    color: var(--Black, #000);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
    text-decoration: none;
}

.user-chat-main-profile .back-button svg {
    margin-right: 15px;
}



#chatbox .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}



.user-message-3 .user-message-date {
    margin-left: 20px;
}


.user-message-sent-img .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.user-main-chat-wrapper {
    min-height: 680px;
}



.user-chat-main-profile .user-chat-profile-detail {
    max-width: 100%;
    display: flex;
    align-items: center;
    margin: 25px 0px;
}

.user-chat-main-profile .user-chat-profile-nav {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.user-chat-main-profile .user-chat-profile-nav li a {
    color: var(--Dark-gray, #575756);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 5px;
    display: inline-block;
    opacity: 0.7;
}

.user-chat-main-profile .user-chat-profile-media-gallery {
    margin-top: 10px;
}

.user-chat-main-profile .user-chat-profile-media-gallery .user-chat-profile-media-gallery-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom: 15px;
}
.user-chat-profile-media-gallery-img img {
    width: 99px;
    height: 98px;
    border: 1px solid transparent;
    border-radius: 15px;
    object-fit: cover;
}
.user-chat-profile-media-gallery-img .lock-icon {
    position: absolute;
    left: 47%;
    transform: translate(-50%, -50%);
    bottom: 22%;
}
.user-chat-profile-media-gallery .user-chat-profile-media-gallery-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 15px;
}

.user-chat-main-profile .user-chat-profile-detail .user-chat-profile-information {
    margin-left: 20px;
    margin-top: 15px;
}



.user-message-2 .user-message-verified-wrapper {
    position: relative;
    border-radius:15px 0 15px 15px;
    background: #FA8B94;
    margin-right: 20px;
}



.user-message-2 .user-message-text {
    color: #FFF;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    /* margin-right: 15px; */
    padding: 17px 11px 17px 14px;
    background: #FA8B94;
    border-radius: 15px 0px 15px 15px;
    word-wrap: break-word;
}


#user-profile .user-online-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    top: 5px;
}
#profile .user-chat-profile-media-gallery-img{
    margin: 5px;
    position: relative;
}

.back-button{
    padding-right: 15px;
}


.user-main-chat-wrapper .user-profile-location {
    color: #3E3E3E;
    /* para */
   /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    margin-bottom: 0px;
}

.user-profile-information-wrapper .user-profile-detail {
    display: flex;
}

.user-profile-information-wrapper .user-online-icon {
    margin-left: 7px;
    margin-bottom: 3px;
}

.user-main-chat-wrapper .user-profile-name {
    color: #282828;
   /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.user-chat-main-profile .user-chat-profile-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}


.user-message-2 .user-message-date {
    text-align: right;
}


#v-pills-tabContent .faq-tab-description br{
    display: none;
}
#lwReportUserForm .submit-button{
    margin-top: 25px;
}
.user-profile .lock-icon:hover {
    cursor: pointer;
}


.my-profile .my-profile-gallery-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.my-profile .about-us-bold-text {
    color: var(--Dark-gray, #575756);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.my-profile .back-button svg {
    margin-right: 10px;
}

.my-profile .my-information-wrapper {
    max-width: 724px;
}

.my-profile .profile-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 25px;
}
.my-profile .my-information-wrapper .user-detail .user-age span{
    color: #575756;
    font-size: 15px;
    font-weight: 400;
    line-height: 150%;
}
.my-profile .my-profile-information {
    margin-top: 30px;
}

.my-profile .user-information-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.my-profile .fantasies-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.my-profile .fantasies {
    margin-top: 40px;
}

.my-profile .fantasies-title-wrapper {
    margin-bottom: 8px;
}

.my-profile .interests-title-wrapper {
    margin-bottom: 8px;
}

.my-profile .interests {
    margin-top: 45px;
}

.my-profile .interests-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.my-profile .love-language {
    margin-top: 45px;
}

.my-profile .love-language-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.my-profile .my-profile-information .dark-text {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.my-profile .my-profile-information .light-text {
    color: #575756;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
}

.my-profile .my-profile-data-left {
    display: flex;
    column-gap: 30px;
}

.my-profile .my-profile-data-right {
    display: flex;
    column-gap: 30px;
}

.my-profile .love-language-title-wrapper {
    margin-bottom: 8px;
}

.my-profile .about-user-description {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

/* my profile css ends here */

/* kil-switch css starts here */

.kill-switch {
    width: 119px;
    z-index: 5;
}

.kill-switch-icon {
    display: flex;
    align-items: center;
    padding: 4px 18px 4px 7px;
    border-radius: 50px 0px 0px 50px;
    background: #424242;
    color: #FFF;
    /* font-family: 'Gotham';*/
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    column-gap: 12px;
}

.kill-switch-icon img {
    width: 34px;
    height: 34px;
}

.kill-switch {
    position: fixed;
    top: 22%;
    right: 0;
}

/* kil-switch css ends here */

/* viewed me css starts here */

.user-listing .viewed-me-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-listing .viewed-me-filter .favourites-filter-list {
    list-style: none;
    display: flex;
    column-gap: 30px;
    margin: 0px;
    padding: 0px;
}

.user-listing .viewed-me-filter .favourites-filter-list li {
    color: var(--Border-light-gray, #878786);
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
}

.user-listing .viewed-me-filter .favourites-filter-list .active {
    color: #000;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

.user-listing .sorting--user-filter {
    display: flex;
    align-items: center;
}

.viewed-me-banner-section {
    width: 100%;
    background-image: url('../images/sexy-art-banner-1.png');
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 13% 0% 7% 0;
}

.viewed-me-banner-section .page-title {
    color: #EB5F6A;
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
}

.viewed-me-user-listing {
    padding: 70px 0px;
}
.user-message-wrapper .lock-icon-video-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.user-message-wrapper .lock-icon-audio-block{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.user-message-wrapper .user-message-text .tick{
    position: absolute;
    bottom: 5px;
    right: 15px;
}
.emoji-width {
    height: 210px;

}
/* viewed me css end here */
/* account setting css start here */
/* faq tab section start here */

.account-section {
    padding: 158px 0 43px 0px;
    position: relative;
}

.account-section button.nav-link.active ~ ::after {
    display: none;
}

.account-section button.nav-link.active {
    color: #000;
    /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    align-items: center;
    text-transform: capitalize;
}

.account-section button.nav-link.active:after {
    content: "";
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' viewBox='0 0 9 11' fill='none'%3e%3cpath d='M9 5.5L0.750001 10.2631L0.750001 0.73686L9 5.5Z' fill='%23EB5F6A'/%3e%3c/svg%3e") no-repeat 95%;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-left: 10px;
}

.account-section .nav-pills {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.account-section .nav-pills .nav-link {
    color: #575756;
    font-family: 'Gotham';
    font-size: 17px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 16px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-section .nav-pills .nav-link:hover {
    background-color: #f8f8f8;
    color: #333;
}

.account-section .nav-pills .nav-link.active {
    background-color: #f8f8f8;
    color: #000;
    font-weight: 500;
}

.account-section .nav-pills .nav-link.active::after {
    content: "";
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' viewBox='0 0 9 11' fill='none'%3e%3cpath d='M9 5.5L0.750001 10.2631L0.750001 0.73686L9 5.5Z' fill='%23EB5F6A'/%3e%3c/svg%3e") no-repeat center;
    width: 9px;
    height: 11px;
    display: inline-block;
    margin-left: 10px;
}

.account-section .nav-pills .nav-link:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* Special styling for the request button */
.account-section .nav-pills .request-button {
    position: relative;
}

.account-section .nav-pills .request-button::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #EB5F6A;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: 15px;
    display: none; /* Show this when there are pending requests */
}

/* Show notification dot when there are pending requests */
.account-section .nav-pills .request-button.has-requests::before {
    display: block;
}

#v-pills-tabContent .notification-card-wrapper .accept-reject-btn{
    display: flex;
    justify-content: end;
    width: 100%;
}
#v-pills-tabContent .notification-card-wrapper .accept-reject-btn a{
    margin-left: 15px;
}
/* .account-section .nav-pills .notification-button{
    border-bottom: 1px solid transparent;
} */
.account-section div#v-pills-tab {
    width: 100%;
    margin-bottom: 185px;
}

.account-section .faq-tab-title-main .faq-tab-title {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px;
    text-transform: capitalize;
    margin-bottom: 0px;
    margin-top: 10px;
}

.account-section .faq-tab-title-main .faq-tab-description {
    width: 655.68px;
    color: #000;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 23px;
}

.account-section .user-account-name .dark-text {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.account-section .user-account-detail {
    margin-top: 34px;
}

.account-section .user-account-name .light-text {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.account-section .account-setting-tab-content .user-gender {
    margin-bottom: 27px;
}
.account-section .account-setting-tab-content .save-changes{
    display: none;
}
.account-section .user-account-name {
    margin-bottom: 27px;
}

.account-section .account-setting-tab-content .user-membership-status {
    margin-bottom: 27px;
}

.account-section .account-setting-tab-content .user-credit-status {
    margin-bottom: 27px;
}
.account-section .account-setting-tab-content  .post-code-wrapper{
    display: flex;
    align-items: center;
}

.account-section .account-setting-tab-content .edit-icon{
    margin-left: 300px;
}
.account-section .account-setting-tab-content .never-disclose-text {
    color: var(--Dark-gray, #575756);
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.account-section .account-setting-tab-content .dark-text {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 3px;
}

.account-section .account-setting-tab-content .light-text {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.account-section .account-setting-tab-content .user-email-address {
    margin-bottom: 27px;
}

.account-section .account-setting-tab-content .user-joined-date {
    margin-bottom: 27px;
}

.account-section .account-setting-tab-content .post-code {
    margin-bottom: 27px;
}

.account-section .account-setting-tab-content .save-changes {
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
    padding: 12px 20px;
    background-color: transparent;
}

.account-section .account-setting-tab-content .user-membership-status {
    display: flex;
    flex-wrap: wrap;
}

.account-section .account-setting-tab-content .upgrade-membership {
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    color: #EB5F6A;
    text-align: right;
   /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    padding: 12px 20px;
    background-color: transparent;
    margin-left: 76px;
}

.account-section .account-setting-tab-content .user-credit-status {
    display: flex;
    flex-wrap: wrap;
}

.account-section .account-setting-tab-content .get-credit {
    color: #EB5F6A;
    text-align: right;
   /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    margin-left: 122px;
    padding: 12px 20px;
}

.account-section .account-setting-tab-content .post-code-input {
    max-width: 139px;
    height: auto;
    border-radius: 10px;
    border: none;
    background: #FFF;
    padding: 0;
}

.account-section .account-setting-tab-content .save-changes {
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    color: #EB5F6A;
    text-align: right;
   /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
}
.cover-background{
    background-repeat: no-repeat!important;
    background-size: cover!important;
    overflow: hidden;
    position: relative;
    background-position: center center!important;
}

/* account setting css end here */
/* kill-switch  setting css start here */
.account-section .rangeSlider {
    position: relative
}

.account-section .rangeSlider .rsBar {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    outline: 0;
    border-radius: 100px;
    background: #D9D9D9;
}

.account-section .rangeSlider .rsBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3;
    position: relative
}

.account-section .rangeSlider .rsBar::-moz-range-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3;
    position: relative
}

.account-section .rangeSlider .rsBar::-moz-focus-outer {
    border: 0
}

.account-section .rangeSlider .rsThumb,
.rangeSlider .rsThumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.account-section .rangeSlider .rsThumb {
    width: 30px;
    height: 30px;
    font-size: 18px;
    border-radius: 4px;
    z-index: 2;
    cursor: pointer
}

.account-section .rangeSlider .rsThumb::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #EB5F6A;
    border-radius: 100%;
    transition: .3s
}

.account-section .rangeSlider .rsThumb span {
    position: absolute;
    left: 0;
    bottom: -62px;
    width: 100%;
    font-size: 14px;
    color: #959595
}

.account-section .rangeSlider .rsTooltip {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translate(-25%, -50%);
    width: 80px;
    height: 34px;
    background: transparent;
    border-radius: 8px;
    font-weight: 500;
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

.account-section .rangeSlider .rsProgress {
    width: 50%;
    height: .4em;
    border-radius: 8px;
    border-radius: 100px;
    background: var(--Pink, #EB5F6A);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.account-section .rsMinMax {
    display: none;
}

.kill-switch-setting-contnt .kill-swich-title {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 23px;
    margin-top: 10px;
}

.kill-switch-setting-contnt .kill-switch-content {
    color: var(--Black, #000);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 20px;
}

.kill-switch-setting-contnt .redirect-website-title {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 20px;
}

.kill-switch-setting-contnt .redirect-website-input {
    border-radius: 15px;
    border: 1px solid var(--Dark-gray, #575756);
    background: #FFF;
    width: 470px;
    padding: 13px 20px 14px;
    color: var(--Dark-gray, #575756);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 38px;
}

.kill-switch-setting-contnt .activate-kill-switch-title-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 27px;
}

.kill-switch-setting-contnt .activate-kill-switch-title {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 10px;
}

.kill-switch-setting-contnt .activate-kill-switch {
    margin-bottom: 30px;
}

.activate-kill-switch-limit {
    color: var(--Black, #000);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 10px;
}

/* kill-switch  setting css end here */
/* notification settings starts */

.notification-tab-content .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

/* Hide default HTML checkbox */
.notification-tab-content .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.notification-tab-content .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.notification-tab-content .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 0px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.notification-tab-content input:checked+.slider {
    background-color: #EB5F6A;
}

.notification-tab-content input:focus+.slider {
    box-shadow: 0 0 1px #EB5F6A;
}

.notification-tab-content input:checked+.slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* Rounded sliders */
.notification-tab-content .slider.round {
    border-radius: 34px;
}

.notification-tab-content .slider.round:before {
    border-radius: 100%;
}

.notification-tab-content .notifiaction-setting-title {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 40px;
    margin-top: 10px;
}

.notification-tab-content .notification-wrapper .email-notification {
    color: var(--Black, #000);
    /* Subtitle */
   /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin: 0px;
}

.notification-tab-content .notification-wrapper {
    display: flex;
    max-width: 330px;
    justify-content: space-between;
}
/* notification settings ends */
/* notification css starts */
.notification-card-tab-content .notification-detail-wrapper {
    display: flex;
}

.notification-card-tab-content .notification-detail {
    margin-left: 36px;
}

.notification-card-tab-content .notification-read-more-link {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    text-decoration: underline;
}

.notification-card-tab-content .notification-card {
    border-radius: 15px;
    border: 1px solid #E1E1E1;
    background: #FFF;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 25px 22px 5px 17px;
    max-width: 900px;
}

.notification-card-tab-content .notification-card-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.notification-card-tab-content .notification-img img {
    width: 85px;
}

.notification-card-tab-content .notification-title {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 30px;
    margin-top: 10px;
}

.notification-card-tab-content .notification-detail-title {
    color: #000;
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.notification-card-tab-content .notification-detail-date {
    color: var(--Border-light-gray, #878786);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.notification-card-tab-content .notification-content {
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-right: 50px;
}

.notification-card-tab-content .custom-pagination-main {
    margin-top: 45px;
}

/* notification css end */
/* security privecy css start */
.account-section .rangeSlider-2 {
    position: relative;
}

.account-section .rangeSlider-2 .rsBar-2 {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    outline: 0;
    border-radius: 100px;
    background: #D9D9D9;
}

.account-section .rangeSlider-2 .rsBar-2::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3;
    position: relative
}

.account-section .rangeSlider-2 .rsBar-2::-moz-range-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3;
    position: relative
}

.account-section .rangeSlider-2 .rsBar-2::-moz-focus-outer {
    border: 0
}

.account-section .rangeSlider-2 .rsThumb-2,
.rangeSlider-2 .rsThumb-2::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.account-section .rangeSlider-2 .rsThumb-2 {
    width: 30px;
    height: 30px;
    font-size: 18px;
    border-radius: 4px;
    z-index: 2;
    cursor: pointer
}

.account-section .rangeSlider-2 .rsThumb-2::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #EB5F6A;
    border-radius: 100%;
    transition: .3s
}
.account-section .rangeSlider-2 .rsThumb-2 span {
    position: absolute;
    left: 0;
    bottom: -62px;
    width: 100%;
    font-size: 14px;
    color: #959595
}

.account-section .rangeSlider-2 .rsTooltip-2 {
    position: absolute;
    top: 45px;
    left: 225%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 34px;
    background: transparent;
    border-radius: 8px;
    font-weight: 500;
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

.account-section .rangeSlider-2 .rsProgress-2 {
    width: 100%;
    height: .4em;
    border-radius: 8px;
    border-radius: 100px;
    background: var(--Pink, #EB5F6A);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.account-section .rsMinMax-2 {
    display: none;
}

.security-and-privacy-title {
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 39px;
    margin-top: 10px;
}

.security-privacy-switch .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 22px;
    border: 1px solid #000;
    border-radius: 34px;
}

/* Hide default HTML checkbox */
.security-privacy-switch .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.security-privacy-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
}

.security-privacy-switch .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #575756;
    -webkit-transition: .4s;
    transition: .4s;
}

.security-privacy-switch input:checked+.slider {
    background-color: #EB5F6A;
}

.security-privacy-switch input:focus+.slider {
    box-shadow: 0 0 1px #EB5F6A;
}

.security-privacy-switch input:checked+.slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
    background-color: #fff;
}

/* Rounded sliders */
.security-privacy-switch .slider.round {
    border-radius: 34px;
}

.security-privacy-switch .slider.round:before {
    border-radius: 100%;
}

.security-privacy-switch .slider.round {
    border-radius: 34px;
}

.security-tab-content .status-offline-wrapper {
    display: flex;
    justify-content: space-between;
    max-width: 420px;
    margin-bottom: 45px;
}

.security-tab-content .status-offline-title {
    color: var(--Black, #000);
    /* Subtitle */
    /* font-family: 'Gotham';*/
    font-size: 15px !important;
    font-style: normal;
    font-weight: 500;
}

.security-tab-content .show-profile-up-to-title-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

}

.security-tab-content .show-profile-limit {
    margin-bottom: 0px;
    color: var(--Black, #000);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-top: 5px;
}

.security-tab-content .show-profile-up-to-title {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0px;
}

.account-section .rangeSlider-2 .rsTooltip-2 {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

.security-tab-content .security-question {
    margin-top: 50px;
}

.security-tab-content .security-question-title {
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 19px;
}

.security-tab-content .security-question-input {
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
    display: block;
    width: 49%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: 25px;
}

.security-tab-content .security-answer {
    display: block;
    width: 49%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
}

.security-tab-content .change-password {
    color: var(--Black, #000);
    /* Subtitle */
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.security-tab-content .change-password {
    text-decoration: none;
}

.security-tab-content .change-password {
    display: flex;
    align-items: center;
    margin-top: 36px;
    margin-bottom: 7px;
}

.security-tab-content .change-password svg {
    display: flex;
    align-items: center;
    margin-left: 22px;
}

.security-tab-content .change-password-text {
    margin-bottom: 25px;
    color: var(--Black, #000);
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

.security-tab-content .save-answer {
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    color: #EB5F6A;
    text-align: right;
   /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
    background-color: transparent;
    padding: 12px 51px;
}

.security-tab-content .how-to-stay-safe {
    margin-top: 30px;
}

.security-tab-content .how-to-stay-safe-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 4px;
}

.security-tab-content .how-to-stay-safe-list {
    padding-left: 15px;
    color: var(--Black, #000);
    /* font-family: 'Gotham';*/
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
}

.security-tab-content .rules-of-lost-spark-list {
    padding-left: 15px;
    color: var(--Black, #000);
   /* font-family: 'Gotham';*/
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
}

.security-tab-content .rules-of-lost-spark {
    margin-top: 35px;
}

.security-tab-content .rules-of-lost-spark-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 4px;
}

/* security privecy css end*/

/* checkout css start*/
.checkout-banner-section {
    width: 100%;
    background-image: url(../images/sexy-art-banner-1.png);
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0% 5.5% 0%;
}

.checkout-banner-section .page-title {
    color: var(--Pink, #EB5F6A);
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

.checkout-banner-section .terms-and-condition-link{
    color: var(--Pink, #EB5F6A);
    font-family: 'Gotham';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-decoration-line: underline;
    display: inline-block;
}
.checkout-banner-section .checkout-content {
    color: var(--Pink, #EB5F6A);
    font-family: 'Gotham';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.checkout-main {
    padding: 80px 0px 60px 0px;
    position: relative;
}

.checkout-main input {
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
    color: var(--Dark-gray, #575756);
    /* para */
    /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.checkout-main label {
    display: block;
    margin-bottom: 14px;
    color: var(--Black, #000);
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.checkout-main .payment-methods-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 24px;
}

.checkout-main select {
    border-radius: 15px;
    background: #FFF;
    border: 1px solid #878786;
    height: 50px;
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-image: url(../images/drop.png);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: 15px;
    color: var(--Dark-gray, #575756);
    /* para */
   /* font-family: 'Gotham';*/
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.checkout-main .payment-methods {
    margin-bottom: 47px;
}

.checkout-main .billing-address-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 38px;
}

.checkout-main .billing-address-wrapper {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
}

.checkout-main .billing-address-wrapper .input-wrapper {
    margin-bottom: 30px;
}

.checkout-main .payment-type-wrapper {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    margin-bottom: 15px;
}

.checkout-main .credit-card-wrapper {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 48% 22% 22%;
    column-gap: 30px;
}

.checkout-main .purchse-name-credit-points{
    margin-bottom: 0px;
    color: #282828;
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.checkout-main::before{
    content: "";
    background-image: url(../images/1.png);
    width: 119px;
    height: 100px;
    display: block;
    position: absolute;
    right: 8%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 5%;
}

.checkout-main::after{
    content: "";
    background-image: url(../images/6.png);
    width: 150px;
    height: 156px;
    display: block;
    position: absolute;
    right: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 11%;
}
.checkout-main .purchase-item{
    margin-bottom: 0px;
    color: #3E3E3E;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    opacity: 0.7;
    margin-bottom: 19px;
}

.checkout-main  .purchse-discount{
    margin-bottom: 28px;
    color: #282828;
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}
.checkout-main input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}

.checkout-main input[type=date]::-webkit-datetime-edit-month-field {
    -webkit-appearance: none;
    display: none;
}

.checkout-main input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}

.checkout-main .checkbox-input {
    width: auto;
    height: auto;
}

.checkout-main .agreement-checkbox .input-wrapper {
    display: flex;
    align-items: baseline;
    column-gap: 10px;
}

.checkout-main .agreement-checkbox .agreement-checkbox-text {
    margin-bottom: 0px;
}

.checkout-main .whats-this-text a {
    color: var(--Pink, #EB5F6A);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-left: 7px;
}

.checkout-main .whats-this-text {
    margin-bottom: 0px;
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.checkout-main .agreement-checkbox-text {
    color: var(--Dark-gray, #575756);
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.checkout-main .agreement-checkbox {
    margin-bottom: 39px;
}

.checkout-main input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

.checkout-main .pay-button {
    color: #EB5F6A;
    text-align: right;
   /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-transform: capitalize;
    padding: 15px 20px;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background-color: transparent;
    text-transform: capitalize;
}

.checkout-main .purchase-detail-card {
    max-width: 414px;
    border-radius: 15px;
    border: 1px solid var(--Border-light-gray, #878786);
    margin: 0 auto;
}

.checkout-main .purchase-detail-wrapper {
    padding: 22px 26px 16px 20px;
    background: #FBFBFB;
    border-radius: 15px;
}

.checkout-main .purchase-detail-card-title {
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 25px;
}

.checkout-main .purchse-name {
    color: #282828;
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.checkout-main .purchase-detail {
    display: flex;
    justify-content: space-between;
}

.checkout-main .purchse-price {
    color: #282828;
    /* Subtitle */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.checkout-main .total-price {
    display: flex;
    justify-content: space-between;
    padding: 22px 26px 16px 20px;
    border-radius: 0px 0px 15px 15px;
    align-items: center;
    background: #F3F3F3;
}

.checkout-main .total-price-text {
    color: var(--Black, #000);
    /* subtitlr-2 */
   /* font-family: 'Gotham';*/
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-top: 5px;
}

.checkout-main .total-price-value {
    color: var(--Pink, #EB5F6A);
    text-align: right;
   /* font-family: 'Gotham';*/
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    margin: 0px;
}
.border{
    height: 50px!important;
    padding: 13px 39px 13px 33px!important;
    border: 1px solid var(--Border-light-gray, #878786)!important;
}

/* checkout css end*/
/* videopopup css starts */
.video-pop-up .rangeSlider {
    position: relative
}

.video-pop-up .rangeSlider .rsBar {
    -webkit-appearance: none;
    width: 75px;
    height: 4px;
    outline: 0;
    border-radius: 100px;
    background: #D9D9D9;
}

.video-pop-up .rangeSlider .rsBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3;
    position: relative
}

.video-pop-up .rangeSlider .rsBar::-moz-range-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 3;
    position: relative
}

.video-pop-up .rangeSlider .rsBar::-moz-focus-outer {
    border: 0
}

.video-pop-up .rangeSlider .rsThumb,
.rangeSlider .rsThumb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.video-pop-up .rangeSlider .rsThumb {
    width: 30px;
    height: 30px;
    font-size: 18px;

    border-radius: 4px;
    z-index: 2;
    cursor: pointer
}
.video-pop-up  .rsTooltip{
    display: none;
}
.video-pop-up .rangeSlider .rsThumb::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #EB5F6A;
    border-radius: 100%;
    transition: .3s
}
.video-pop-up .rangeSlider .rsThumb span {
    position: absolute;
    left: 0;
    bottom: -62px;
    width: 100%;
    font-size: 14px;
    color: #959595
}

.video-pop-up .rangeSlider .rsTooltip {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 34px;
    background: transparent;
    border-radius: 8px;
    font-weight: 500;
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;

}

.video-pop-up .rangeSlider .rsProgress {
    width: 50%;
    height: .3em;
    border-radius: 8px;
    border-radius: 100px;
    background: var(--Pink, #EB5F6A);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    pointer-events: none
}

.video-pop-up .rsMinMax {
    display: none;
}

.video-pop-up .modal-body {
    padding: 0px;
}
/* videopopup css ends */
/* sidebar css starts */
header .offcanvas-header{
    background: #F8F8F8;
}

header .offcanvas-body{
    background: #F8F8F8;
}
header .offcanvas-body .custom-side-bar .mobile-link{
    display: none;
}
header .offcanvas-body .custom-side-bar::before{
    content: "";
    background-image: url(../images/1.png);
    width: 33%;
    height: 15%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    left:30px;
    bottom: 8%;
}

.custom-side-bar-li{
    display: flex;
    align-items: center;
}
header .offcanvas-body .custom-side-bar::after{
    content: "";
    background-image: url(../images/6.png);
    width: 15%;
    height: 10%;
    display: block;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    right:0%;
    bottom: 25%;
}
/* sidebar css ends */
/* buy-credits css starts */

.buy-credit-banner-section{
    width: 100%;
    background-image: url('../images/sexy-art-banner-1.png');
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0% 5.5% 0%;
}

.buy-credit-banner-section .page-title{
    color: var(--Pink, #EB5F6A);
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

.my-credit-balence-wrapper{
    text-align: center;
    padding: 80px 0px;
}

.my-credit-balence-wrapper .my-credit-balence-title{
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 43px;
}

.my-credit-balence-wrapper .select-your-credits-title{
    color: var(--Black, #000);
    text-align: center;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.my-credit-balence-wrapper .my-credit-content{
    color: #484848;
    text-align: center;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    max-width: 658px;
    margin: 0 auto 89px auto;
}

.credit-packag-wrapper{
    display: flex;
    justify-content: space-between;
}

.credit-packag-wrapper .credit-package{
    padding: 31px 24px 19px 24px;
}

.user-profile .user-profile-img #updatedProfilePicture{
    width: 250px;
    height: 250px;
    border-radius: 100%;
    object-fit: cover;
}
.account-setting-tab-content::after{
    content: "";
    background-image: url(../images/6.png);
    width: 150px;
    height: 156px;
    display: block;
    position: absolute;
    right: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 20%;
}

.kill-switch-setting-contnt::after{
    content: "";
    background-image: url(../images/6.png);
    width: 150px;
    height: 156px;
    display: block;
    position: absolute;
    right: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 15%;
}

.security-tab-content::after{
    content: "";
    background-image: url(../images/6.png);
    width: 150px;
    height: 156px;
    display: block;
    position: absolute;
    right: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 20%;
}

.security-tab-content::before{
    content: "";
    background-image: url(../images/1.png);
    width: 150px;
    height: 180px;
    display: block;
    position: absolute;
    left: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 25%;
}

.notification-tab-content::after{
    content: "";
    background-image: url(../images/6.png);
    width: 150px;
    height: 156px;
    display: block;
    position: absolute;
    right: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 43%;
}

.notification-card-tab-content::after{
    content: "";
    background-image: url(../images/6.png);
    width: 150px;
    height: 156px;
    display: block;
    position: absolute;
    right: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 22%;
}

.notification-card-tab-content::before{
    content: "";
    background-image: url(../images/tab-content-after.png);
    width: 150px;
    height: 180px;
    display: block;
    position: absolute;
    left: 0%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 25%;
}

.credit{
    padding-top: 70px;
    padding-bottom: 80px;
}

.credit .center-tital{
    margin-bottom: 89px;
 }
.credit .select-credits-title{
    color: var(--Black, #000);
    text-align: center;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.credit-package .pricing_footer{
   margin: 20px 0 !important;
}
.credit_box .credit-value{
    color: var(--Black, #000);
    /* subtitlr-2 */
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 7px;
}
.credit_box:hover .credit-text{
    margin-top: 15px;
}

.package .credit_box:hover .credit-value{
    margin-top: 17px;
}
.credit_box .credit-text{
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-left: 10px;
}

.credit_box .credit-list li{
    color: #484848;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
}
.credit  .credit-content{
    color: #484848;
    text-align: center;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    opacity: 0.68;
    max-width: 658px;
    margin: 0 auto;
}
.credit .center-tital p{
    color: #484848;
    font-size: 15px;
    font-weight: 400;
}
.credit .credit_box{
    border-radius: 24px;
    border: 1px solid  #EB5F6A;
    background: #FCFCFC;
    padding: 30px 24px 19px 24px;
}
.credit .credit_box:hover{
    background-color: #EB5F6A;
    color: #fff;
}
.credit .credit_box:hover .credit-value{
    color: #fff;
}

.credit .credit_box:hover .credit-text{
    color: #fff;
}
.credit .credit_box:hover .credit-text{
    color: #fff;
}
.credit .credit_box:hover .credit-list li{
    color: #fff;
    transition: all 0.35s ease-in-out;
}

.credit .credit_box:hover .credit-list i{
    color: #fff;
}

.credit .credit_box:hover .pricing_price h5 span{
    color: #fff;
}

.credit .credit_box:hover .chose-button {
    border-color: #fff;
    color: #fff;
    transition: all 0.35s ease-in-out;
}
.credit .credit_box .pricing_header h3{
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    color: #000000;
}

.credit .credit-list{
    padding: 0px;
    list-style: none;
}

.credit .chose-button{
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
    padding: 13px 42px;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background-color: transparent;
    text-transform: capitalize;
}

.credit .pricing_footer{
    text-align: center;
}

.credit .credit-balance-title{
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 43px;
}
.credit .credit_box .pricing_body{
    margin-bottom: 25px;
}
.credit .credit_box .pricing_body li{
    font-size: 15px;
    font-weight: 400;
    color: #484848;
}
.credit .credit_box .pricing_body li i{
    font-size: 12px;
    color: #EB5F6A;
    margin-right: 15px;
}
.credit .pricing_price .price_text{
    text-transform: uppercase;
    font-size: 15px;
    color: #484848;
}
.credit .pricing_price .price{
    font-size: 22px;
    color: #000;
    margin-left: 5px;
}
.credit .pricing_price h5{
    font-size: 15px;
    margin-bottom: 15px;
}

.credit  .credit_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.credit  .credit-value-text{
    display: flex;
    align-items: center;
}
.credit  .save-badge{
    color: #000;
    font-family: 'Gotham';
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    padding: 6px 10px 6px 10px;
    display: none;
    border-radius: 100px;
    background: #FFF;
}

.credit .credit_box:hover .save-badge{
  display: block;
}

.credit .credit_box:hover .credit-value{
    display: none;
}

.credit .credit_box:hover {
    transform: translateY(-28px);
    transition: all 0.35s ease-in-out;
}
.credit .credit_box:hover .try-month{
    display: block;
}

.credit .try-month{
    display: none;
}
.credit .credit_box:hover .try-month{
    display: block;
}

/* .credit .credit_box:hover .chose-button-text{
 display: none;
} */
/* buy-credits css ends */
/* buy package css starts */
.buy-packge-banner-section{
    width: 100%;
    background-image: url('../images/sexy-art-banner-1.png');
    /* height: 75vh; */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 11% 0% 5.5% 0%;
}

.buy-packge-banner-section .page-title {
    color: var(--Pink, #EB5F6A);
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}
.package{
    padding: 80px 0px;
}
.package .center-tital{
    margin-bottom: 70px;
 }
.package .select-credits-title{
    color: var(--Black, #000);
    text-align: center;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.package .credit_box .credit-value{
    color: #000;
    font-family: 'Gotham';
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 20px;
}

.package .credit_box .credit-text{
    color: var(--Dark-gray, #575756);
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-left: 10px;
}

.package .credit_box .credit-list li{
    color: #484848;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
}
.package  .credit-content{
    color: #484848;
    text-align: center;
    /* para */
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    opacity: 0.68;
    max-width: 658px;
    margin: 0 auto;
}
.package .center-tital p{
    color: #484848;
    font-size: 15px;
    font-weight: 400;
}
.package .credit_box{
    border-radius: 24px;
    border: 1px solid  #EB5F6A;
    background: #FCFCFC;
    padding: 30px 24px 19px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
}

.package .credit_box:hover{
    background-color: #EB5F6A;
    color: #fff;
}
.package .credit_box:hover .credit-value{
    color: #fff;
}

.package .credit_box:hover .credit-text{

    color: #fff;
}
.package .credit_box:hover .credit-text{

    color: #fff;
}
.package .credit_box:hover .credit-list li{
    color: #fff;
}

.package .credit_box:hover .credit-list i{
    color: #fff;
}

.package .credit_box:hover .pricing_price h5 span{
    color: #fff;
}

.package .credit_box:hover .chose-button {
    border-color: #fff;
    color: #fff;
}
.package .credit_box .pricing_header h3{
    font-size: 22px;
    line-height: 22px;
    font-weight: 500;
    color: #000000;
}

.package .credit-list{
    padding: 0px;
    list-style: none;
}

.package .chose-button{
    color: #EB5F6A;
    text-align: right;
    /* font-family: 'Gotham';*/
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
    padding: 13px 42px;
    border-radius: 100px;
    border: 1px solid var(--Pink, #EB5F6A);
    background-color: transparent;
    text-transform: capitalize;
}

.package .pricing_footer{
    text-align: center;
}

.package .credit-balance-title{
    color: var(--Pink, #EB5F6A);
    text-align: center;
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 43px;
}
.package .credit_box .pricing_body{
    margin-bottom: 25px;
}
.package .credit_box .pricing_body li{
    font-size: 15px;
    font-weight: 400;
    color: #484848;
}
.package .credit_box .pricing_body li i{
    font-size: 12px;
    color: #EB5F6A;
    margin-right: 15px;
}
.package .pricing_price .price_text{
    text-transform: uppercase;
    font-size: 15px;
    color: #484848;
}
.package .pricing_price .price{
    font-size: 22px;
    color: #000;
    margin-left: 5px;
}
.package .pricing_price h5{
    font-size: 15px;
    margin-bottom: 20px;
}

.package .credit_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.package .credit-value-text{
    display: flex;
    align-items: center;
}
.package .save-badge{
    color: var(--Black, #000);
    /* font-family: 'Gotham';*/
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    padding: 6px 10px 6px 10px;
    display: none;
    border-radius: 100px;
    background: #FFF;
}

.package .credit_box:hover .save-badge{
    display: block;
}

.credit .per-month{
    margin-left: 3px;
}

.package .per-month{
    margin-left: 3px;
}

.package .credit_box:hover .credit-value{
    display: none;
}
.package .credit_box{
    transition: all 0.35s ease-in-out;
}
.package .credit_box:hover {
    transform: translateY(-28px);
}
.package .credit_box:hover .try-month{
    display: block;
}

.package .try-month{
    display: none;
}
.package .credit_box:hover .try-month{
    display: block;
}

.package .credit_box:hover .chose-button-text{
 /*display: none;*/
}

.package  .women-title{
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    margin: 50px 0px 50px 0px;
}

.package  .men-title{
    /* Text */
    font-family: 'Gotham';
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    margin: 0px 0px 50px 0px;
}

.credit{
    position: relative;
}
.credit::after{
    content: "";
    background-image: url(../images/3.png);
    width: 7%;
    height: 15%;
    display: block;
    position: absolute;
    right: 12%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 12%;
}
.credit .credit-package{
    max-width: 1100px;
    margin: 0 auto;
}
.credit::before{
    content: "";
    background-image: url(../images/3.png);
    width: 6%;
    height: 10%;
    display: block;
    position: absolute;
    left: 11%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 32%;
}

.package::after{
    content: "";
    background-image: url(../images/3.png);
    width: 7%;
    height: 8%;
    display: block;
    position: absolute;
    right: 13%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 5%;
}
.package{
    position: relative;
}

.package .package-wrapper{
    max-width: 1100px;
    margin: 0 auto;
}
.package::before{
    content: "";
    background-image: url(../images/3.png);
    width: 8%;
    height: 7%;
    display: block;
    position: absolute;
    left: 5%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 38%;
}
.package .credit_box .credit-value {
    display: block!important;
}

/* buy package css ends */
.successfully .successfully-btn{
    margin-top: 25px;
    display: block;
}
.successfully .successfully-btn {
color: #EB5F6A;
}
.successfully .successfully-btn:hover {
color: #000;
}

/* .login-form-section::after {
line-height: 60px;
} */
.signup-form-section::after {
line-height: 80px;
}

#userdetail-custom-modal   input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('../images/date-icon.png');
    /* Replace 'custom-calendar-icon.png' with your icon's path */
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.forgot-password::after{
    content: "";
    width: 80px;
    height: 190px;
    background: #EB5F6A;
    display: block;
    position: absolute;
    left: 16%;
    top: -42px;
    z-index: -1;
}
.unblock-button-wrapper {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.unblock-button-wrapper .unblock-button{
    background-color:#EB5F6A;
    color: #fff;
    border: none;
    padding: 5px 15px;
    text-transform: uppercase;
    font-size: 16px;
    text-decoration: none;
}

/* .step-1-img  .modal-content .modal-body .play-pause:hover{
    opacity: 0;
} */
.step-1-section .modal-body {
    max-height: 485px;
}

.filter{
    filter: blur(14px);
}

.remove-lock{
    display: none;
}

.gallery-image-modal .modal-header{
    padding: 0px;
}

.gallery-image-modal .modal-header::after {
   display: none;
}

.gallery-image-modal .gallaer-img img{
    width: 100%;
    height: auto;
}

.notification-card-tab-content .acceptButton{
    display: inline-block;
    background-color: green;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 20px;
    cursor: pointer;
}

.notification-card-tab-content .rejectButton{
    display: inline-block;
    background-color: #EB5F6A;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 20px;
    cursor: pointer;
}
.read-more-text{
    text-align: center;
    justify-content: space-between;
    align-items: center;
    display: flex;
    margin-top: 15px;
}
#pills-tabContent .card .card-body .card-link{
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
}
.blog-details-section .card .card-body .read-more-wrapper .read-more-text{
    text-align: center;
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.blog-details-section .card .card-body .read-more-wrapper .read-more-icon{
    color: #000;
    text-align: center;
    font-family: 'Gotham';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
}
.alert-get-in-touch{
    background-color: #EB5F6A;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    padding: 15px;
    width: 122%;
}
.my-profile-img #updatedProfilePicture {
    width: 250px;
    height: 250px;
    object-fit: cover;
}

/*.my-profile .profile-img-upload-icon {
    position: absolute;
    bottom: 2%;
    left: 40%;
    transform: translate(-50%, -50%);
}*/



.my-profile .my-information-wrapper .gallaer-img{
    margin: 5px 0;
}
.my-profile .my-information-wrapper .upload-gallery-image-button{
    margin: 5px 0;
}

#completeGalleryModal .modal-dialog {
    width: 800px;
    max-width: 800px;
}

#filePreview {
    margin-top: 20px;
}

#filePreview img {
    width: auto;
}

#completeGalleryModal #cropperContainer {
    max-height: 400px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#completeGaelleryModal #imageToEdit {
    max-height: 400px;
    width: auto;
}

.notification-card-tab-content .notification-card {
    border-radius: 15px;
    border: 1px solid #E1E1E1;
    background: #FFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px;
    max-width: 900px;
}

.notification-card-tab-content .notification-read-more-link {
    color: var(--Pink, #EB5F6A);
    text-align: center;
    font-family: 'Gotham';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    text-decoration: underline;
    justify-content: end;
    display: flex;
    margin: 0 0 0 auto;
}

.notification-card-tab-content .notification-img img{
    width: 85px;
    height: 85px;
    border-radius: 100%;
    object-fit: cover;
}
.notification-card-tab-content .notification-detail-wrapper {
    display: flex;
    align-items: center;
}
.notification-card-tab-content .notification-content{
    margin-bottom: 0;
}
#videoModal .modal-content{
    background-color: transparent;
}

.user-listing #dataAppendForAdvancedSearch .user-description a{
    text-decoration: none !important;
    color: #EB5F6A;
}
.user-listing #dataAppendForAdvancedSearch .chat{
    align-items: center;
    display: flex;
}
#dataAppendForAdvancedSearch .user-list-img img{
    width: 280px;
    height: 280px;
    border-radius: 100%;
    object-fit: cover;
}
.user-list-img img{
    width: 280px;
    height: 280px;
    border-radius: 100%;
    object-fit: cover;
}
.user-listing .user-list-wrapper .user-description a{
    text-decoration: none !important;
}

.user-list-img img.placeholder-image {
    object-fit: contain;
    padding: 115px;
    background-image: url('/images/default_img/default_profile.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

#change-password-form{
    border: 1px solid var(--Pink, #EB5F6A);
    border-radius: 20px;
    color:#EB5F6A;
    font-size: 16px;
}

@media screen and (max-width: 1499px) {
    .login-form-section::after {
        height: calc(205px - 60px);
        left: calc(51% - 660px);
        top: 0;
    }
}
@media screen and (max-width: 1399px) {
    .login-form-section::after {
        height: calc(205px - 60px);
        left: calc(51% - 570px);
        top: 0;
    }
}
@media screen and (max-width: 1299px) {
    .login-form-section::after {
        height: calc(205px - 60px);
        left: calc(58% - 660px);
        top: 0;
    }
}
@media screen and (max-width: 1199px) {

    .login-form-section::after {
        height: calc(205px - 60px);
        left: calc(58% - 660px);
        top: 0;
    }

    .my-profile-img .profile-img-upload-icon {
        left: 57% !important;
    }
}
@media screen and (max-width: 991px) {
    .login-form-section::after {
        height: calc(205px - 60px);
        left: calc(58% - 660px);
        top: 0;
    }
}
@media screen and (max-width: 767px) {
    .login-form-section::after {
        height: calc(205px - 60px);
        left: calc(58% - 660px);
        top: 0;
    }
}
@media screen and (max-width: 576px) {
    .login-form-section::after {
        height: calc(30% - 60px);
        left: calc(58% - 660px);
        top: 0;
    }
}
@media screen and (max-width: 360px) {}

.chatUserListAppend.scroll {
    width: 335px;
    height: 393px;
    overflow: auto;
    float: left;
    margin: 0px 0px;
}

.content {
    height: 500px;
}
.scroll1::-webkit-scrollbar {
    width: 5px;
}

.scroll1::-webkit-scrollbar-track {
    background: #ddd;
}

.scroll1::-webkit-scrollbar-thumb {
    background: #666;
}

#postcode-input{
    display: none;
    border-radius: 10px;
    border: 1px solid var(--Border-light-gray, #878786);
    padding: 14px 39px;
    color: var(--Border-light-gray, #878786);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.drop-icon{
    min-height: 82px;
    position: relative;
}

#country {
    position: absolute;
    height: auto;
    background-color: white;
    z-index: 1;
    min-height: 50px;
    background-position: right 0.75rem top 20px;
}
.search-bar-form #country{
    position: absolute;
    height: auto;
    background-color: white;
    z-index: 1;
    min-height: 50px;
    background-position: right 0.75rem top 20px;
    bottom: 0;
    left: -15px;
}

.search-bar-form .drop-icon{
    width: 100%;
    max-width: 300px;
}
.signup-form-section .custom-input.form-select[size='10'],
.search-bar-form #country[size='0']{
    background-image: none;
}
.signup-form-section .custom-input.form-select[size='0'],
.search-bar-form #country[size='0']{
    background-image: url(../images/drop.png);
}
.tp-15{
    top: 15px;
}
.scroll {
    width: 335px;
    height: 393px;
    overflow: auto;
    float: left;
    margin: 0px 0px;
}

#Information-custom-modal .scroll {
    width: 495px;
    height: 500px;
    overflow: auto;
    float: left;
    margin: 0px 0px;
}

.search-bar-form .custom-input.form-select[size='10']{
    background-image: none;
}
.search-bar-form .custom-input.form-select[size='0']{
    background-image: url(../images/drop.png);
}
/* select::-ms-expand {
    display: none;
  }
   */
.gift-selected{
    background-color: #EB5F6A!important;
}
.imagex-box{
    overflow: hidden;
}
.imagex-box img{
    max-width: 100%;
    display: block;
    width: 100%;
    height: auto;
    transition: all .5s;
    transform: scale(1);
}
.imagex-box:hover img {
    transform: scale(1.1);
}
.pink-color {
    background-color: pink;
}
/* #gift-emoji-modal .btn-close{
    color:#000;
    background-color: #000;
} */

#gift-emoji-modal .modal-body{
    height:175px;
}
.gift-icon-design {

}
.gift-icon-box{
    padding: 20px;
    text-align: center;
    background-color: #EEE;
    margin: 0 5px;
    border-radius: 10px;
}
.gift-icon-design .gift-icon-img img{
    width: 40px;
    height: 40px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}
.gift-icon-design .gift-Purchase{
    margin-bottom: 10px;
}
.gift-icon-design .gift-price p{
    font-size: 13px;
    color: #000;
}
.gift-icon-design  .gift-Purchase span{
    font-size: 15px;
    color: #000;
}
.gift-icon-btn{
    border: 1px solid #F1666E;
    color: #EB5F6A;
    background-color: #fff;
}

.loader-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
  }

  .loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: 15% auto;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
.hover-box:hover{
    cursor: pointer;
}
.search-button-mobile{
    display: none;
}

.chat-box-input-utility-icon svg{
    margin: 10px;
}
.emoji-width{
    width: 510px !important;
}
.btn-back-chat{
    display: none;
}


#toast-container .toast-success{
    background-color: #EB5F6A;
}


.shareKeyLink-box i{
    color: #EB5F6A;
    line-height: 50px;
}
.shareKeyLink-box i{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.shareKeyLink-box i {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}



#imageModalchat #modalImage{
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    /* margin-top: 10%; */
    /* right: -68%;
    top: 50%; */
}
#imageModalchat img {
    width: auto !important;
    height: auto !important;
}
#imageModalchat{
    position: absolute;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}
#imageModalchat .imageModalchatcenter{
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    position: absolute;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
#imageModalchat .close{
    font-size: 40px;
    color: #fff;
    opacity: 1;
    top: 20px;
    right: 40px;
}




.notification-icon::before{
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #EB5F6A;
    border-radius: 100%;
    right: 29px;
    top: 5px;
}

#toast-container .toast-error{
    background-color: #EB5F6A;
}
.gallaer-img{
    width: 16%;
    position: relative;
    overflow: hidden;
    display: block;
    padding: 6%;
    background-color: #f5f5f5;
    border-radius: 15px;
}
.gallaer-img img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    object-fit: contain;
    object-position: center center;
    transition: all .8s ease;
}




/* Base styles for the hero section */
.hero-section {
    position: relative;
    height: 100vh;
    /* overflow: hidden; */
}

.sliderContainer {
    height: 100%;
}

.hero-slider img {
    object-fit: cover;
    height: 100vh;
    width: 100%;
}

/* Hero text slider */
.hero-text-slider {
    position: absolute;
    top: 47%;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 20px;
}

.hero-text-content {
    max-width: 600px;
}

/* Adjustments for tablets (768px and below) */
@media (max-width: 768px) {
    .hero-text-slider {
        top: 25%;
        padding: 15px;
    }

    .hero-text-content h4 {
        font-size: 1.5rem;
    }

    .hero-text-content p {
        font-size: 1rem;
    }

    .hero-text-content span {
        font-size: 1.2rem;
    }
    .progressBarContainer{
        display: none !important;
    }
}

/* Adjustments for mobile screens (480px and below) */
@media (max-width: 480px) {
    .hero-text-slider {
        top: 20%;
        padding: 10px;
    }

    .hero-text-content h4 {
        font-size: 1.2rem;
    }

    .hero-text-content p {
        font-size: 0.9rem;
    }

    .hero-text-content span {
        font-size: 1rem;
    }

    .hero-slider img {
        height: 100vh;
        width: 100%;
        object-fit: cover;
    }
    .progressBarContainer{
        display: none !important;
    }
}

/* Adjustments for very small screens (320px and below) */
@media (max-width: 320px) {
    .hero-text-slider {
        top: 15%;
        padding: 8px;
    }

    .hero-text-content h4 {
        font-size: 1rem;
    }

    .hero-text-content p {
        font-size: 0.8rem;
    }

    .hero-text-content span {
        font-size: 0.9rem;
    }

    .hero-slider img {
        height: 100vh;
        width: 100%;
        object-fit: cover;
    }
    .progressBarContainer{
        display: none !important;
    }
}

/* KDG NEW STYLES */

/* ========================================
   SIGNUP PICTURE POPUP
======================================== */

#staticBackdropLabel {
    color: white !important;
}

/* ========================================
   END SIGNUP PICTURE POPUP
======================================== */

/* ========================================
   MODAL  MY MODAL PROFILE PICTURE
======================================== */

#male-images .custom-modal-img {
    max-width: 107px;
    max-height: 107px;
}

/* ========================================
   END MODAL  MY MODAL PROFILE PICTURE
======================================== */


/* ========================================
   CHATBOX MODAL - FIXED DESIGN
======================================== */

/* Modal Base */
.chatbox-modal {
    z-index: 1050 !important;
}

.chatbox-modal .modal-dialog.modal-dialog-centered {
    width: 90vw !important;
    height: 85vh !important;
    max-width: 1200px !important;
    max-height: 800px !important;
    margin: 1.75rem auto !important;
}

.chatbox-modal .modal-content {
    height: 100% !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #fff !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* Modal Header */
.chatbox-modal .modal-header {
    padding: 20px 25px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important;
}

.chatbox-modal .btn-close {
    position: absolute !important;
    top: 7px !important;
    right: 20px !important;
    z-index: 10 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

.chatbox-modal .btn-close:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* Modal Body */
.chatbox-modal .modal-body {
    flex: 1 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
}

.chatbox-modal .container {
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
}

.chatbox-modal .row {
    flex: 1 !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
}

/* ========================================
   USER LIST SIDEBAR
======================================== */

.chatbox-modal .user-messages-wrapper {
    height: 100% !important;
    border-right: 1px solid #e9ecef !important;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    width: 320px !important;
    min-width: 320px !important;
    flex-shrink: 0 !important;
}

/* Search Bar */
.chatbox-modal .chatbox-user-search {
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
    background: #fff !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.chatbox-modal .chatbox-user-search:focus-within {
    border-color: #EB5F6A !important;
    box-shadow: 0 0 0 3px rgba(235, 95, 106, 0.1) !important;
}

.chatbox-modal .chatbox-search {
    border: none !important;
    outline: none !important;
    flex: 1 !important;
    color: #495057 !important;
    font-size: 14px !important;
    background: transparent !important;
}

/* User List */
.chatbox-modal .chatUserListAppend {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}

.chatbox-modal .user-message-tab-button {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    padding: 12px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
}

.chatbox-modal .user-message-tab-button:hover {
    background: rgba(235, 95, 106, 0.05) !important;
    transform: translateY(-1px) !important;
}

.chatbox-modal .user-message-tab-button.active {
    background: linear-gradient(135deg, #EB5F6A 0%, #FA8B94 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(235, 95, 106, 0.3) !important;
}

.chatbox-modal .user-message-profile-img img {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.chatbox-modal .user-information {
    margin-left: 12px !important;
    flex: 1 !important;
}

.chatbox-modal .user-name {
    color: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
}

/* ========================================
   CHAT AREA - 3 COLUMN LAYOUT
======================================== */

.chatbox-modal .col-lg-7 {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    flex: 1 !important;
    position: relative !important;
}

/* ========================================
   CHAT HEADER - CLEAN LAYOUT FIX
======================================== */

.chatbox-modal .user-profile-information-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
    min-height: 70px;
}

.chatbox-modal .user-profile-detail-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

/* Back Button */
.chatbox-modal .back-button {
    background: none;
    border: none;
    padding: 5px;
    color: #4F4F4F;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.chatbox-modal .back-button:hover {
    color: #EB5F6A;
}

.chatbox-modal .back-button svg {
    width: 16px;
    height: 16px;
}

/* Profile Image */
.chatbox-modal .user-profile-img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.chatbox-modal .user-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Profile Details */
.chatbox-modal .user-profile-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.chatbox-modal .user-profile-detail-text {
    flex: 1;
}

.chatbox-modal .user-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 2px 0;
    line-height: 1.2;
}

.chatbox-modal .user-profile-location {
    font-size: 13px;
    color: #666;
    margin: 0;
    text-transform: capitalize;
    line-height: 1.2;
}

/* Online Status */
.chatbox-modal .user-online-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
}

.chatbox-modal .user-online-icon svg {
    width: 8px;
    height: 8px;
}

/* Utility Icons */
.chatbox-modal .user-profile-utitlity-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chatbox-modal .user-profile-utitlity-icon svg {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.chatbox-modal .user-profile-utitlity-icon svg:hover {
    transform: scale(1.1);
}

/* Hide search and navigation elements that are not needed */
.chatbox-modal #search_message,
.chatbox-modal .up-aero,
.chatbox-modal .down-aero {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .chatbox-modal .user-profile-information-wrapper {
        padding: 12px 15px;
        min-height: 60px;
    }
    
    .chatbox-modal .user-profile-detail-wrapper {
        gap: 10px;
    }
    
    .chatbox-modal .user-profile-img {
        width: 40px;
        height: 40px;
    }
    
    .chatbox-modal .user-profile-name {
        font-size: 14px;
    }
    
    .chatbox-modal .user-profile-location {
        font-size: 12px;
    }
    
    .chatbox-modal .user-profile-utitlity-icon {
        gap: 6px;
    }
    
    .chatbox-modal .user-profile-utitlity-icon svg {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .chatbox-modal .user-profile-information-wrapper {
        padding: 10px 12px;
        flex-wrap: wrap;
        min-height: auto;
    }
    
    .chatbox-modal .user-profile-detail-wrapper {
        flex: 1;
        min-width: 0;
    }
    
    .chatbox-modal .user-profile-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    
    .chatbox-modal .user-profile-utitlity-icon {
        gap: 4px;
    }
    
    .chatbox-modal .user-profile-utitlity-icon svg {
        width: 26px;
        height: 26px;
    }
}

/* Additional fixes for better alignment */
.chatbox-modal .user-profile-detail-wrapper#user-profile {
    align-items: center;
    justify-content: flex-start;
}

/* Fix any potential overflow issues */
.chatbox-modal .user-profile-information-wrapper * {
    box-sizing: border-box;
}

/* Ensure proper text wrapping */
.chatbox-modal .user-profile-detail-text {
    min-width: 0; /* Allows text to shrink properly */
}

/* Messages Area */
.chatbox-modal .user-message-box {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%) !important;
    min-height: 0 !important;
    max-height: 790px;
    height: 790px;;
}

/* Message Layout - Left and Right */
.chatbox-modal .user-message-wrapper {
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    animation: fadeInUp 0.3s ease !important;
}

.user-message-1 .user-message-wrapper {
    flex-direction: column !important;
}

/* Received Messages - Left Side */
.chatbox-modal .user-message-1 {
    display: flex;
    justify-content: flex-start !important;
}

.user-message-1 img {
    margin-right: 20px !important;
}

.chatbox-modal .user-message-1 .user-message-text {
    background: #fff !important;
    color: #495057 !important;
    padding: 12px 16px !important;
    border-radius: 18px 18px 18px 4px !important;
    max-width: 320px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #f0f0f0 !important;
}

/* Sent Messages - Right Side */
.chatbox-modal .user-message-2 {
    display: flex;
    justify-content: end !important;
    flex-direction: row-reverse !important;
}

.chatbox-modal .user-message-2 .user-message-text {
    background: linear-gradient(135deg, #EB5F6A 0%, #FA8B94 100%) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border-radius: 18px 18px 4px 18px !important;
    max-width: 320px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-shadow: 0 4px 15px rgba(235, 95, 106, 0.3) !important;
}

.chatbox-modal .user-message-img {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.user-message-2 .user-message-img {
    margin-left: 20px !important;
}

/* ========================================
   CHAT INPUT - FIXED POSITIONING
======================================== */

.chatbox-modal .chat-input {
    background: #fff !important;
    padding: 20px !important;
    border-top: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
    min-height: 90px !important;
}

.chatbox-modal .chat-box-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    position: relative !important;
}

/* Fixed Textarea Size */
.chatbox-modal .chatbox-input {
    width: 669px !important;
    height: 123px !important;
    max-width: 100% !important;
    padding: 15px 60px 15px 20px !important;
    border-radius: 20px !important;
    border: 2px solid #e9ecef !important;
    background: #f8f9fa !important;
    color: #495057 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    resize: none !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    line-height: 1.4 !important;
    flex: 1 !important;
}

.chatbox-modal .chatbox-input:focus {
    border-color: #EB5F6A !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(235, 95, 106, 0.15) !important;
}

.chatbox-modal .chatbox-input::placeholder {
    color: #adb5bd !important;
    font-weight: 400 !important;
}

/* Send button - Inside input at bottom right */
.chatbox-modal .chat-sent-button {
    position: absolute !important;
    right: 15px !important;
    bottom: 15px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: none !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(235, 95, 106, 0.3) !important;
    z-index: 10 !important;
}

.chatbox-modal .chat-sent-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(235, 95, 106, 0.4) !important;
}

.chatbox-modal .chat-sent-button svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* Utility icons */
.chatbox-modal .chat-box-input-utility-icon {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
    flex-shrink: 0 !important;
}

.chatbox-modal .chat-box-input-utility-icon svg {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    border-radius: 50% !important;
    background: #f8f9fa !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid #e9ecef !important;
    fill: #6c757d !important;
}

.chatbox-modal .chat-box-input-utility-icon svg:hover {
    border-color: #EB5F6A !important;
    fill: #fff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(235, 95, 106, 0.3) !important;
}

/* Form styling */
.chatbox-modal #send_chat_message_form {
    display: flex !important;
    align-items: flex-end !important;
    gap: 15px !important;
    width: 100% !important;
    position: relative !important;
}

/* ========================================
   PROFILE SIDEBAR - FORCE SHOW
======================================== */

.chatbox-modal .user-chat-main-profile {
    /*display: flex !important; /* Force show */
    visibility: visible !important; /* Force visible */
    opacity: 1 !important; /* Force opacity */
    padding: 20px !important;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%) !important;
    border-left: 1px solid #e9ecef !important;
    height: 100% !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    width: 300px !important;
    min-width: 300px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    display: none;
}

/* Back Button */
.chatbox-modal .back-button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #6c757d !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    width: fit-content !important;
}

.chatbox-modal .back-button:hover {
    background: rgba(235, 95, 106, 0.05) !important;
    color: #EB5F6A !important;
}

/* Profile Detail Section */
.chatbox-modal .user-chat-profile-detail {
    text-align: center !important;
    margin-bottom: 25px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.chatbox-modal .user-chat-profile-img img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.chatbox-modal .user-chat-profile-title {
    color: #212529 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 10px 0 5px 0 !important;
}

.chatbox-modal .user-chat-profile-location {
    color: #6c757d !important;
    font-size: 12px !important;
    margin: 0 !important;
}

/* Navigation Menu */
.chatbox-modal .user-chat-profile-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}

.chatbox-modal .user-chat-profile-nav li {
    margin-bottom: 8px !important;
}

.chatbox-modal .user-chat-profile-nav li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    color: #495057 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

.chatbox-modal .user-chat-profile-nav li a:hover {
    background: rgba(235, 95, 106, 0.05) !important;
    color: #EB5F6A !important;
}

/* Media Gallery */
.chatbox-modal .user-chat-profile-media-gallery-title {
    color: #212529 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.chatbox-modal .user-chat-profile-media-gallery-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    gap: 8px !important;
}

.chatbox-modal .user-chat-profile-media-gallery-img {
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    aspect-ratio: 1 !important;
}

.chatbox-modal .user-chat-profile-media-gallery-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ========================================
   USER MESSAGES NAV TAB BUTTONS - MISSING STYLES
======================================== */

.chatbox-modal .user-messages-nav-tab {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    padding: 12px 15px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    color: #6c757d !important;
    font-family: 'Gotham' !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    cursor: pointer !important;
    position: relative !important;
    outline: none !important;
}

.chatbox-modal .user-messages-nav-tab:hover {
    background: rgba(235, 95, 106, 0.05) !important;
    color: #EB5F6A !important;
    transform: translateX(2px) !important;
}

.chatbox-modal .user-messages-nav-tab.active {
    background: rgba(235, 95, 106, 0.1) !important;
    color: #EB5F6A !important;
    font-weight: 600 !important;
    border-left: 3px solid #EB5F6A !important;
    padding-left: 12px !important;
}

.chatbox-modal .user-messages-nav-tab:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(235, 95, 106, 0.2) !important;
}

/* Add icon to Messages tab */
.chatbox-modal .user-messages-nav-tab#message-tab::before {
    content: "💬" !important;
    margin-right: 8px !important;
    font-size: 14px !important;
}

/* Alternative version without emoji - using CSS shapes */
.chatbox-modal .user-messages-nav-tab.no-emoji::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background: currentColor !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    opacity: 0.6 !important;
}

.chatbox-modal .user-messages-nav-tab.active.no-emoji::before {
    opacity: 1 !important;
}

/* Wrapper for the navigation tabs */
.chatbox-modal .user-messages-nav {
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border-bottom: 1px solid #e9ecef !important;
    padding-bottom: 15px !important;
}

/* Counter badges for tabs */
.chatbox-modal .user-messages-nav-tab .nav-counter {
    background: #EB5F6A !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    float: right !important;
}

.chatbox-modal .user-messages-nav-tab:not(.active) .nav-counter {
    background: #adb5bd !important;
}

/* Tab content styling */
.chatbox-modal .user-message-tab-content {
    margin-top: 10px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .chatbox-modal .user-messages-nav-tab {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
    
    .chatbox-modal .user-messages-nav-tab .nav-counter {
        font-size: 9px !important;
        padding: 1px 4px !important;
        min-width: 16px !important;
    }
}

/* If you want a more modern tab style */
.chatbox-modal .user-messages-nav.modern-tabs {
    display: flex !important;
    border-bottom: 2px solid #f0f0f0 !important;
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
}

.chatbox-modal .user-messages-nav.modern-tabs .user-messages-nav-tab {
    flex: 1 !important;
    text-align: center !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    border-left: none !important;
    padding: 12px 15px !important;
}

.chatbox-modal .user-messages-nav.modern-tabs .user-messages-nav-tab.active {
    background: transparent !important;
    border-bottom-color: #EB5F6A !important;
    color: #EB5F6A !important;
    border-left: none !important;
}

.chatbox-modal .user-messages-nav.modern-tabs .user-messages-nav-tab:hover {
    background: rgba(235, 95, 106, 0.05) !important;
    transform: none !important;
}

/* ========================================
   USER MESSAGES NAVIGATION - MISSING STYLES
======================================== */

.chatbox-modal .user-messages-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    border-bottom: 1px solid #e9ecef !important;
    padding-bottom: 15px !important;
}

.chatbox-modal .user-messages-nav li {
    margin-bottom: 0 !important;
}

.chatbox-modal .user-messages-nav li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    color: #6c757d !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    text-transform: capitalize !important;
}

.chatbox-modal .user-messages-nav li a:hover {
    background: rgba(235, 95, 106, 0.05) !important;
    color: #EB5F6A !important;
    transform: translateX(2px) !important;
}

.chatbox-modal .user-messages-nav li a.active {
    background: rgba(235, 95, 106, 0.1) !important;
    color: #EB5F6A !important;
    font-weight: 600 !important;
}

/* Add icons to navigation items if needed */
.chatbox-modal .user-messages-nav li a[href*="all"]::before {
    content: "💬" !important;
    margin-right: 6px !important;
    font-size: 12px !important;
}

.chatbox-modal .user-messages-nav li a[href*="favorites"]::before {
    content: "❤️" !important;
    margin-right: 6px !important;
    font-size: 12px !important;
}

.chatbox-modal .user-messages-nav li a[href*="online"]::before {
    content: "🟢" !important;
    margin-right: 6px !important;
    font-size: 10px !important;
}

.chatbox-modal .user-messages-nav li a[href*="unread"]::before {
    content: "📩" !important;
    margin-right: 6px !important;
    font-size: 12px !important;
}

/* Alternative cleaner approach without emojis - using SVG icons */
.chatbox-modal .user-messages-nav.no-emoji li a::before {
    content: none !important;
}

.chatbox-modal .user-messages-nav.no-emoji li a {
    position: relative !important;
}

.chatbox-modal .user-messages-nav.no-emoji li a::after {
    content: "" !important;
    width: 3px !important;
    height: 0 !important;
    background: #EB5F6A !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 0 3px 3px 0 !important;
    transition: height 0.3s ease !important;
}

.chatbox-modal .user-messages-nav.no-emoji li a:hover::after,
.chatbox-modal .user-messages-nav.no-emoji li a.active::after {
    height: 20px !important;
}

/* Counter badges for navigation items */
.chatbox-modal .user-messages-nav li a .nav-counter {
    background: #EB5F6A !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.chatbox-modal .user-messages-nav li a:not(.active) .nav-counter {
    background: #adb5bd !important;
}

/* Responsive adjustments for navigation */
@media (max-width: 768px) {
    .chatbox-modal .user-messages-nav li a {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    .chatbox-modal .user-messages-nav li a .nav-counter {
        font-size: 9px !important;
        padding: 1px 4px !important;
        min-width: 16px !important;
    }
}

/* If you want a more compact navigation */
.chatbox-modal .user-messages-nav.compact {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

.chatbox-modal .user-messages-nav.compact li a {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* Navigation with tabs style */
.chatbox-modal .user-messages-nav.tabs {
    display: flex !important;
    border-bottom: 2px solid #f0f0f0 !important;
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
    gap: 5px !important;
}

.chatbox-modal .user-messages-nav.tabs li {
    flex: 1 !important;
}

.chatbox-modal .user-messages-nav.tabs li a {
    text-align: center !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 10px 8px !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
}

.chatbox-modal .user-messages-nav.tabs li a.active {
    background: transparent !important;
    border-bottom-color: #EB5F6A !important;
    color: #EB5F6A !important;
}

.chatbox-modal .user-messages-nav.tabs li a:hover {
    background: rgba(235, 95, 106, 0.05) !important;
    transform: none !important;
}

/* Profile chat specific styles */
.user-profile-chatbox-demo .user-message-tab {
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
}

.user-profile-chatbox-demo .user-message-tab .user-info {
    display: flex;
    flex-direction: column;
}

.user-profile-chatbox-demo .user-message-tab .user-name {
    font-weight: bold;
    color: #333;
}

.user-profile-chatbox-demo .user-message-tab .last-message {
    font-size: 12px;
    color: #666;
}

/* ========================================
   SCROLLBARS
======================================== */

.chatbox-modal .chatUserListAppend::-webkit-scrollbar,
.chatbox-modal .user-message-box::-webkit-scrollbar,
.chatbox-modal .user-chat-main-profile::-webkit-scrollbar {
    width: 6px !important;
}

.chatbox-modal .chatUserListAppend::-webkit-scrollbar-track,
.chatbox-modal .user-message-box::-webkit-scrollbar-track,
.chatbox-modal .user-chat-main-profile::-webkit-scrollbar-track {
    background: transparent !important;
}

.chatbox-modal .chatUserListAppend::-webkit-scrollbar-thumb,
.chatbox-modal .user-message-box::-webkit-scrollbar-thumb,
.chatbox-modal .user-chat-main-profile::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 3px !important;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

@media (max-width: 992px) {
    .chatbox-modal .modal-dialog.modal-dialog-centered {
        width: 95vw !important;
        height: 90vh !important;
    }
    
    .chatbox-modal .user-messages-wrapper {
        width: 280px !important;
        min-width: 280px !important;
    }
    
    .chatbox-modal .user-chat-main-profile {
        width: 250px !important;
        min-width: 250px !important;
    }
}

@media (max-width: 768px) {
    .chatbox-modal .modal-dialog.modal-dialog-centered {
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
    }
    
    .chatbox-modal .modal-content {
        border-radius: 0 !important;
    }
    
    .chatbox-modal .chatbox-input {
        width: 100% !important;
        height: 80px !important;
    }
}

@media (max-width: 576px) {
    .chatbox-modal .user-messages-wrapper,
    .chatbox-modal .user-chat-main-profile {
        display: none !important;
    }
    
    .chatbox-modal .col-lg-7 {
        width: 100% !important;
    }
    
    .chatbox-modal .chatbox-input {
        height: 60px !important;
    }
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(10px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* Show/Hide Modal */
.chatbox-modal.show {
    display: block !important;
}

.chatbox-modal:not(.show) {
    display: none !important;
}


/* ========================================
   ENHANCED GIFT MODAL - BASE STRUCTURE
======================================== */

.enhanced-gift-modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
}

/* ========================================
   ENHANCED GIFT MODAL - HEADER SECTION
======================================== */

.enhanced-gift-header {
    background: linear-gradient(135deg, #EB5F6A 0%, #ff8a9a 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-bottom: none;
    position: relative;
}

.gift-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gift-icon-header {
    font-size: 2.5rem;
    animation: bounce 2s infinite;
}

.gift-title-section .enhanced-gift-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    font-family: 'Gotham', sans-serif;
}

.gift-subtitle {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
    color: white;
    font-family: 'Gotham', sans-serif;
}

.enhanced-gift-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.enhanced-gift-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* ========================================
   ENHANCED GIFT MODAL - BODY SECTION
======================================== */

.enhanced-gift-body {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* ========================================
   GIFT FILTER TABS
======================================== */

.gift-filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.gift-tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Gotham', sans-serif;
}

.gift-tab-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.gift-tab-btn.active {
    background: #EB5F6A;
    color: white;
    box-shadow: 0 4px 15px rgba(235, 95, 106, 0.3);
}

/* ========================================
   ENHANCED GIFT GRID LAYOUT
======================================== */

.enhanced-gift-grid-container {
    position: relative;
}

.enhanced-gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

/* ========================================
   ENHANCED GIFT CARDS
======================================== */

.enhanced-gift-card {
    background: white;
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    animation: fadeInUp 0.5s ease forwards;
}

.enhanced-gift-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: #EB5F6A;
}

.enhanced-gift-card.pink-color {
    border-color: #EB5F6A !important;
    background: linear-gradient(135deg, #fff 0%, #ffeef0 100%) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(235, 95, 106, 0.25) !important;
}

.enhanced-gift-card.pink-color::before {
    content: '✓';
    position: absolute;
    top: -5px;
    right: -5px;
    background: #EB5F6A;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    z-index: 10;
}

.enhanced-gift-card.purchased {
    border-color: #28a745;
}

.enhanced-gift-card.purchased:hover {
    border-color: #28a745;
}

/* ========================================
   GIFT CARD IMAGE CONTAINER
======================================== */

.enhanced-gift-image-container {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #f8f9fa;
}

.enhanced-gift-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.enhanced-gift-card:hover .enhanced-gift-image {
    transform: scale(1.1);
}

/* ========================================
   GIFT CARD STATUS BADGES
======================================== */

.enhanced-gift-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Gotham', sans-serif;
}

.purchased-badge {
    background: #28a745;
    color: white;
}

.price-badge {
    background: #EB5F6A;
    color: white;
}

/* ========================================
   GIFT CARD HOVER OVERLAY
======================================== */

.enhanced-gift-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.enhanced-gift-card:hover .enhanced-gift-hover-overlay {
    opacity: 1;
}

.enhanced-gift-action-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Gotham', sans-serif;
}

.enhanced-gift-action-btn.send-btn {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
}

.enhanced-gift-action-btn.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.enhanced-gift-action-btn.buy-btn {
    background: linear-gradient(135deg, #EB5F6A 0%, #ff8a9a 100%);
}

.enhanced-gift-action-btn.buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(235, 95, 106, 0.4);
}

/* ========================================
   GIFT CARD INFORMATION
======================================== */

.enhanced-gift-info {
    text-align: center;
}

.enhanced-gift-name {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
    font-family: 'Gotham', sans-serif;
}

.enhanced-gift-price {
    font-size: 0.9rem;
    color: #EB5F6A;
    font-weight: 600;
    font-family: 'Gotham', sans-serif;
}

/* ========================================
   ENHANCED GIFT MODAL - EMPTY STATE
======================================== */

.enhanced-gift-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.enhanced-gift-empty-state h4 {
    margin-bottom: 0.5rem;
    color: #495057;
    font-family: 'Gotham', sans-serif;
}

.enhanced-gift-empty-state p {
    font-family: 'Gotham', sans-serif;
}

/* ========================================
   ENHANCED GIFT MODAL - FOOTER SECTION
======================================== */

.enhanced-gift-footer {
    background: #f8f9fa;
    padding: 1.5rem 2rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gift-footer-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
    font-family: 'Gotham', sans-serif;
}

.enhanced-gift-cancel-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'Gotham', sans-serif;
}

.enhanced-gift-cancel-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
    color: white;
}

/* ========================================
   LOADING STATE
======================================== */

.enhanced-gift-loading {
    text-align: center;
    padding: 3rem 1rem;
}

.enhanced-gift-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #EB5F6A;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

/* ========================================
   TOAST NOTIFICATIONS
======================================== */

.enhanced-gift-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    font-family: 'Gotham', sans-serif;
}

.enhanced-gift-toast.show {
    transform: translateX(0);
}

.enhanced-gift-toast-success {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
}

.enhanced-gift-toast-error {
    background: linear-gradient(135deg, #dc3545 0%, #e55a6b 100%);
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Delays for Cards */
.enhanced-gift-card:nth-child(2) { animation-delay: 0.1s; }
.enhanced-gift-card:nth-child(3) { animation-delay: 0.2s; }
.enhanced-gift-card:nth-child(4) { animation-delay: 0.3s; }

/* ========================================
   RESPONSIVE DESIGN - TABLET
======================================== */

@media (max-width: 768px) {
    .gift-emoji-modal .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .enhanced-gift-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
    }
    
    .enhanced-gift-header,
    .enhanced-gift-body,
    .enhanced-gift-footer {
        padding: 1rem;
    }
    
    .gift-filter-tabs {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .gift-tab-btn {
        padding: 0.5rem;
    }
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE
======================================== */

@media (max-width: 480px) {
    .enhanced-gift-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gift-header-content {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .gift-icon-header {
        font-size: 2rem;
    }
    
    .enhanced-gift-footer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}


/* ========================================
   FIND MY SPARK HOVER EFFECTS - CORRECTED
======================================== */

/* User Card Hover Effects - Subtle and Clean */
.user-card-clickable {
    padding: 0 10px;;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
}

.user-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(235, 95, 106, 0.1);
}

/* Profile Image Hover Effect - No scaling */
.user-card-clickable .user-list-img {
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
}

/*
.user-card-clickable:hover .user-list-img {
    box-shadow: 0 0 0 3px rgba(235, 95, 106, 0.2);
}
    */

/* Username Hover Effect */
.user-card-clickable:hover .user-name {
    color: #EB5F6A;
    transition: color 0.3s ease;
}

/* Description Text Hover Effect */
.user-card-clickable:hover .user-description p {
    color: #333;
    transition: color 0.3s ease;
}

/* Like Button Hover Enhancement */
.user-card-clickable:hover .wishlist-icon svg circle {
    fill: #F5F5F5;
    transition: fill 0.3s ease;
}

.user-card-clickable:hover .wishlist-icon svg path {
    stroke: #EB5F6A;
    transition: stroke 0.3s ease;
}

/* Chat Icon Hover Enhancement */
.user-card-clickable:hover .chat svg path {
    fill: #d14651;
    transition: fill 0.3s ease;
}

/* Show more indicator animation */
.user-card-clickable:hover .show-more-indicator {
    color: #EB5F6A;
    transition: color 0.3s ease;
}

/* Remove the complex border glow effect that was causing issues */
.user-card-clickable::before {
    display: none;
}

/* Age and Location Text Hover */
.user-card-clickable:hover .user-age,
.user-card-clickable:hover .user-location {
    color: #555;
    transition: color 0.3s ease;
}

/* Simple pulse animation for show more */
@keyframes simplePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.user-card-clickable:hover .show-more-indicator {
    animation: simplePulse 2s infinite;
}

/* Ensure no overflow issues */
.user-card-clickable {
    overflow: visible;
}

/* Mobile responsiveness - even more subtle on mobile */
@media (max-width: 768px) {
    .user-card-clickable:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(235, 95, 106, 0.08);
    }
}

/* Accessibility - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .user-card-clickable,
    .user-card-clickable:hover {
        transform: none;
        animation: none;
    }
    
    .user-card-clickable:hover {
        box-shadow: 0 1px 4px rgba(235, 95, 106, 0.1);
    }
}

/* ========================================
   END FIND MY SPARK HOVER EFFECTS
======================================== */


/* ========================================
   HOBBIES BUTTONS USER PROFILE
======================================== */
.user-profile .profile-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.user-profile .profile-button,
.my-profile .profile-button {
    padding: 8px 16px;
    border: 1px solid #EB5F6A;
    background: transparent;
    color: #EB5F6A;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.user-profile .profile-button:hover,
.my-profile .profile-button:hover {
    background: #EB5F6A;
    color: white;
    cursor: initial;
}


/* ========================================
   END HOBBIES BUTTONS USER PROFILE
======================================== */


/* ========================================
   GALLERY GRID USER PROFILE
======================================== */

.user-profile .gallaer-img {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.user-profile .gallaer-img:hover {
    transform: scale(1.05);
}

.user-profile .gallaer-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ========================================
   END GALLERY GRID USER PROFILE
======================================== */





/* ========================================
   USER PROFILE MESSAGE MODAL - DEDICATED SECTION
======================================== */

/* Modal Base */
.user-profile-chatbox-demo {
    z-index: 1055;
}

.user-profile-chatbox-demo .modal-dialog {
    max-width: 1200px;
    height: 90vh;
    margin: 1.75rem auto;
}

.user-profile-chatbox-demo .modal-content {
    height: 100%;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Modal Header */
.user-profile-chatbox-demo .modal-header {
    background: linear-gradient(135deg, #EB5F6A, #F85A5A);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
    border-radius: 12px 12px 0 0;
}

.user-profile-chatbox-demo .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.user-profile-chatbox-demo .btn-close {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    opacity: 1;
    filter: brightness(0) invert(1);
}

.user-profile-chatbox-demo .btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Modal Body */
.user-profile-chatbox-demo .modal-body {
    padding: 0;
    height: calc(100% - 76px);
}

.user-profile-chatbox-demo .container {
    height: 100%;
    padding: 0;
    max-width: 100%;
}

.user-profile-chatbox-demo .row {
    height: 100%;
    margin: 0;
}

/* ========================================
   LEFT SIDEBAR - USER LIST
======================================== */

.user-profile-chatbox-demo .user-messages-wrapper {
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    height: 100%;
    padding: 0;
}

/* Search Bar */
.user-profile-chatbox-demo .chatbox-user-search {
    position: relative;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e9ecef;
}

.user-profile-chatbox-demo .chatbox-search {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e9ecef;
    border-radius: 25px;
    font-size: 0.9rem;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.user-profile-chatbox-demo .chatbox-search:focus {
    outline: none;
    border-color: #EB5F6A;
    background: white;
    box-shadow: 0 0 0 3px rgba(235, 95, 106, 0.1);
}

.user-profile-chatbox-demo .chatbox-user-search svg {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

/* Navigation Tabs */
.user-profile-chatbox-demo .user-messages-nav {
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e9ecef;
}

.user-profile-chatbox-demo .user-messages-nav-tab {
    background: transparent;
    border: 1px solid #e9ecef;
    color: #6c757d;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100%;
}

.user-profile-chatbox-demo .user-messages-nav-tab:hover {
    background: #f8f9fa;
    border-color: #EB5F6A;
    color: #EB5F6A;
}

.user-profile-chatbox-demo .user-messages-nav-tab.active {
    background: #EB5F6A;
    border-color: #EB5F6A;
    color: white;
}

/* User List */
.user-profile-chatbox-demo .chatUserListAppenduserProfile {
    height: calc(100vh - 280px);
    overflow-y: auto;
    padding: 0;
}

.user-profile-chatbox-demo .user-message-tab-button {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1rem;
    text-align: left;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f0f0;
}

.user-profile-chatbox-demo .user-message-tab-button:hover {
    background: #f8f9fa;
}

.user-profile-chatbox-demo .user-message-tab-button.active {
    background: linear-gradient(90deg, rgba(235, 95, 106, 0.1), transparent);
    border-left: 3px solid #EB5F6A;
}

.user-profile-chatbox-demo .user-message-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-profile-chatbox-demo .user-message-tab img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.user-profile-chatbox-demo .user-message-tab-button.active img {
    border-color: #EB5F6A;
}

.user-profile-chatbox-demo .user-info {
    flex: 1;
    min-width: 0;
}

.user-profile-chatbox-demo .user-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-profile-chatbox-demo .last-message {
    color: #6c757d;
    font-size: 0.8rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   RIGHT SIDE - CHAT AREA
======================================== */

.user-profile-chatbox-demo #getUserProfileAllMessageData {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Chat Header */
.user-profile-chatbox-demo .user-profile-information-wrapper {
    background: white;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.user-profile-chatbox-demo .user-profile-detail-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-profile-chatbox-demo .btn-back-chat {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #6c757d;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.user-profile-chatbox-demo .btn-back-chat:hover {
    background: #e9ecef;
    color: #495057;
}

.user-profile-chatbox-demo .user-profile-img img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.user-profile-chatbox-demo .user-profile-name {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 0.25rem 0;
}

.user-profile-chatbox-demo .user-profile-location {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0;
}

.user-profile-chatbox-demo .user-online-icon {
    margin-left: 0.5rem;
}

/* Utility Icons */
.user-profile-chatbox-demo .user-profile-utitlity-icon {
    display: flex;
    gap: 0.5rem;
}

.user-profile-chatbox-demo .user-profile-utitlity-icon svg {
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-profile-chatbox-demo .user-profile-utitlity-icon svg:hover {
    transform: scale(1.1);
}

/* Messages Area */
.user-profile-chatbox-demo .user-message-box {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #f8f9fa;
    min-height: 0;
}

/* Message Styling */
.user-profile-chatbox-demo .user-message-1,
.user-profile-chatbox-demo .user-message-2 {
    display: flex;
    margin-bottom: 1rem;
    align-items: flex-start;
    gap: 0.75rem;
}

.user-profile-chatbox-demo .user-message-2 {
    flex-direction: row-reverse;
}

.user-profile-chatbox-demo .user-message-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-profile-chatbox-demo .user-message-wrapper {
    max-width: 70%;
}

.user-profile-chatbox-demo .user-message-text {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.user-profile-chatbox-demo .user-message-2 .user-message-text {
    background: #EB5F6A;
    color: white;
}

.user-profile-chatbox-demo .user-message-date {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.25rem;
    text-align: center;
}

/* ========================================
   CHAT INPUT AREA
======================================== */

.user-profile-chatbox-demo .chat-input {
    background: white;
    border-top: 1px solid #e9ecef;
    padding: 1rem;
    flex-shrink: 0;
}

.user-profile-chatbox-demo .chat-box-input-utility-icon {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.user-profile-chatbox-demo .chat-box-input-utility-icon svg {
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.user-profile-chatbox-demo .chat-box-input-utility-icon svg:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.user-profile-chatbox-demo .chat-box-input-wrapper {
    position: relative;
}

.user-profile-chatbox-demo .chatbox-input {
    width: 100%;
    min-height: 45px;
    max-height: 120px;
    padding: 0.75rem 3.5rem 0.75rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 25px;
    font-size: 0.9rem;
    resize: none;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.user-profile-chatbox-demo .chatbox-input:focus {
    outline: none;
    border-color: #EB5F6A;
    background: white;
    box-shadow: 0 0 0 3px rgba(235, 95, 106, 0.1);
}

.user-profile-chatbox-demo .chat-sent-button {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    background: #EB5F6A;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.user-profile-chatbox-demo .chat-sent-button:hover {
    background: #d54956;
    transform: scale(1.05);
}

.user-profile-chatbox-demo .chat-sent-button svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

@media (max-width: 768px) {
    .user-profile-chatbox-demo .modal-dialog {
        height: 95vh;
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    
    .user-profile-chatbox-demo .user-messages-wrapper {
        display: none;
    }
    
    .user-profile-chatbox-demo .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .user-profile-chatbox-demo .btn-back-chat {
        display: flex;
    }
    
    .user-profile-chatbox-demo .user-message-wrapper {
        max-width: 85%;
    }
    
    .user-profile-chatbox-demo .chat-box-input-utility-icon {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
}

/* ========================================
   SCROLLBAR STYLING
======================================== */

.user-profile-chatbox-demo .chatUserListAppenduserProfile::-webkit-scrollbar,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar {
    width: 6px;
}

.user-profile-chatbox-demo .chatUserListAppenduserProfile::-webkit-scrollbar-track,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar-track {
    background: transparent;
}

.user-profile-chatbox-demo .chatUserListAppenduserProfile::-webkit-scrollbar-thumb,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.user-profile-chatbox-demo .chatUserListAppenduserProfile::-webkit-scrollbar-thumb:hover,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ========================================
   ENHANCED GIFT MODAL STYLING
======================================== */

.user-profile-chatbox-demo .enhanced-gift-modal-content {
    border-radius: 12px;
    overflow: hidden;
}

.user-profile-chatbox-demo .enhanced-gift-header {
    background: linear-gradient(135deg, #EB5F6A, #F85A5A);
    color: white;
    border: none;
    padding: 1.5rem;
}

.user-profile-chatbox-demo .gift-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-profile-chatbox-demo .gift-icon-header {
    font-size: 2rem;
}

.user-profile-chatbox-demo .enhanced-gift-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.user-profile-chatbox-demo .gift-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0.25rem 0 0 0;
}

.user-profile-chatbox-demo .enhanced-gift-body {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.user-profile-chatbox-demo .gift-filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}

.user-profile-chatbox-demo .gift-tab-btn {
    background: transparent;
    border: 1px solid #e9ecef;
    color: #6c757d;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.user-profile-chatbox-demo .gift-tab-btn.active {
    background: #EB5F6A;
    border-color: #EB5F6A;
    color: white;
}

.user-profile-chatbox-demo .enhanced-gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.user-profile-chatbox-demo .enhanced-gift-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.user-profile-chatbox-demo .enhanced-gift-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.user-profile-chatbox-demo .enhanced-gift-image-container {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.user-profile-chatbox-demo .enhanced-gift-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-chatbox-demo .enhanced-gift-status-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(235, 95, 106, 0.9);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.user-profile-chatbox-demo .enhanced-gift-info {
    padding: 1rem;
    text-align: center;
}

.user-profile-chatbox-demo .enhanced-gift-name {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.user-profile-chatbox-demo .enhanced-gift-price {
    color: #EB5F6A;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ========================================
   ANIMATION CLASSES
======================================== */

.user-profile-chatbox-demo .fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-profile-chatbox-demo .slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========================================
   FIXED CHAT INPUT AT BOTTOM
======================================== */

/* Make the chat container a flex column */
.chatbox-modal .col-lg-7,
.user-profile-chatbox-demo .col-lg-7 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Make the messages area take available space and be scrollable */
.chatbox-modal .user-message-box,
.user-profile-chatbox-demo .user-message-box {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
   /* max-height: calc(100vh - 300px); /* Adjust based on your modal height */
}

/* Fix the chat input at the bottom */
.chatbox-modal .chat-input,
.user-profile-chatbox-demo .chat-input {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #eee;
    padding: 1rem;
    z-index: 10;
    margin-top: auto; /* Push to bottom */
}

/* Make the modal body use full height */
.chatbox-modal .modal-body,
.user-profile-chatbox-demo .modal-body {
    height: 70vh; /* Set a fixed height for the modal */
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Make the container row take full height */
.chatbox-modal .modal-body .container,
.user-profile-chatbox-demo .modal-body .container {
    height: 100%;
    padding: 0;
}

.chatbox-modal .modal-body .row,
.user-profile-chatbox-demo .modal-body .row {
    height: 100%;
    margin: 0;
}

/* Ensure the message container doesn't overlap with input */
.chatbox-modal #getUserProfileAllMessageData,
.user-profile-chatbox-demo #getUserProfileAllMessageData {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Style the chat input wrapper */
.chatbox-modal .chat-box-input-wrapper,
.user-profile-chatbox-demo .chat-box-input-wrapper {
    position: relative;
    width: 100%;
}

/* Make textarea responsive but not too tall */
.chatbox-modal .chatbox-input,
.user-profile-chatbox-demo .chatbox-input {
    max-height: 100px;
    min-height: 40px;
    resize: vertical;
    padding-right: 60px; /* Space for send button */
}

/* Position send button inside textarea */
.chatbox-modal .chat-sent-button,
.user-profile-chatbox-demo .chat-sent-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    z-index: 11;
}

/* Style utility icons */
.chatbox-modal .chat-box-input-utility-icon,
.user-profile-chatbox-demo .chat-box-input-utility-icon {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: flex-start;
}

.chatbox-modal .chat-box-input-utility-icon svg,
.user-profile-chatbox-demo .chat-box-input-utility-icon svg {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.chatbox-modal .chat-box-input-utility-icon svg:hover,
.user-profile-chatbox-demo .chat-box-input-utility-icon svg:hover {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chatbox-modal .modal-body,
    .user-profile-chatbox-demo .modal-body {
        height: 80vh;
    }
    
    .chatbox-modal .user-message-box,
    .user-profile-chatbox-demo .user-message-box {
        max-height: calc(80vh - 200px);
    }
}

@media (max-width: 576px) {
    .chatbox-modal .modal-body,
    .user-profile-chatbox-demo .modal-body {
        height: 90vh;
    }
    
    .chatbox-modal .user-message-box,
    .user-profile-chatbox-demo .user-message-box {
        max-height: calc(90vh - 180px);
    }
    
    .chatbox-modal .chat-box-input-utility-icon,
    .user-profile-chatbox-demo .chat-box-input-utility-icon {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Ensure proper scrolling for messages */
.chatbox-modal .user-message-box::-webkit-scrollbar,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar {
    width: 6px;
}

.chatbox-modal .user-message-box::-webkit-scrollbar-track,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.chatbox-modal .user-message-box::-webkit-scrollbar-thumb,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar-thumb {
    background: #EB5F6A;
    border-radius: 3px;
}

.chatbox-modal .user-message-box::-webkit-scrollbar-thumb:hover,
.user-profile-chatbox-demo .user-message-box::-webkit-scrollbar-thumb:hover {
    background: #d54a54;
}


/* ========================================
   ONLINE ICON STYLING
======================================== */
/* Fix for user profile chat modal - online status positioning */
.user-profile-chatbox-demo .user-message-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    position: relative;
    width: 100%;
}

.user-profile-chatbox-demo .user-message-profile-img {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
}

.user-profile-chatbox-demo .user-message-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-chatbox-demo .user-information {
    flex: 1;
    min-width: 0; /* Allows text to truncate if needed */
}

.user-profile-chatbox-demo .user-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FIXED: Online status icon positioning */
.user-profile-chatbox-demo .user-online-icon {
   position: absolute;
    top: -2px;
    right: -2px;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-profile-chatbox-demo .user-online-icon svg {
    width: 8px;
    height: 8px;
    display: block;
}

/* Alternative positioning - if you want it as a badge on the profile image */
.user-profile-chatbox-demo .user-online-icon.badge-style {
    position: absolute;
    top: 8px; /* Adjusted to be on the profile image */
    right: 45px; /* Positioned on the profile image */
    background: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* For active user tabs */
.user-profile-chatbox-demo .user-message-tab-button.active .user-online-icon svg circle {
    fill: #33B14F; /* Green for online when active */
}

.user-profile-chatbox-demo .user-message-tab-button:not(.active) .user-online-icon svg circle {
    fill: #EC9C00; /* Orange for away when not active */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-profile-chatbox-demo .user-message-tab {
        padding: 10px;
        gap: 10px;
    }
    
    .user-profile-chatbox-demo .user-message-profile-img {
        width: 45px;
        height: 45px;
    }
    
    .user-profile-chatbox-demo .user-online-icon {
        top: 10px;
        right: 10px;
    }
    
    .user-profile-chatbox-demo .user-online-icon.badge-style {
        right: 40px;
    }
}

/* Bottom-right corner badge (like WhatsApp/Messenger) */
.user-profile-chatbox-demo .user-online-icon.bottom-right-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.user-profile-chatbox-demo .user-online-icon.bottom-right-badge svg {
    width: 8px;
    height: 8px;
}

/* ========================================
    END ONLINE ICON STYLING
======================================== */

/* Heart/Like Icon Styling - FIXED */
.wishlist-icon svg path {
    transition: all 0.3s ease;
    stroke: #EB5F6A;
    stroke-width: 1.5;
}

.wishlist-icon svg path.liked,
.wishlist-icon svg path[fill="#EB5F6A"] {
    fill: #EB5F6A !important;
    stroke: #EB5F6A;
}

.wishlist-icon svg path:not(.liked),
.wishlist-icon svg path[fill="transparent"] {
    fill: transparent !important;
    stroke: #EB5F6A;
}

/* Hover effect */
.wishlist-icon:hover svg path {
    stroke: #F1666E;
    transform: scale(1.1);
}

/* Animation for like action */
.wishlist-icon svg path {
    transform-origin: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wishlist-icon.liked svg path {
    animation: heartBeat 0.6s ease-in-out;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.nearby-counties {
    display: none;
}

/* ========================================
    CARD BUTTON STYLING
======================================== */

#card-button {
    /* Base styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border: 1px solid #EB5F6A;
    background: white;
    color: #EB5F6A;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-transform: capitalize;
    min-width: 140px;
    box-shadow: 0 2px 8px rgba(235, 95, 106, 0.1);
}

/* Hover state */
#card-button:hover {
    background: linear-gradient(135deg, #EB5F6A 0%, #F1666E 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(235, 95, 106, 0.3);
    border-color: #EB5F6A;
}

/* ========================================
    END CARD BUTTON STYLING
======================================== */


/* ========================================
    UPGRADE REQUIRED DESIGN
======================================== */

.upgrade-required-container {
    max-width: 420px;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.upgrade-icon-wrapper {
    position: relative;
    margin: 0 auto 2rem;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-icon-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #EB5F6A 0%, #F1666E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(235, 95, 106, 0.3);
    animation: upgradeIconPulse 3s ease-in-out infinite;
}

.upgrade-lock-icon {
    color: white;
    width: 32px;
    height: 32px;
}

.upgrade-content {
    margin-top: 1rem;
}

.upgrade-title {
    color: #EB5F6A;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.upgrade-subtitle {
    color: #2c3e50;
    font-family: 'Gotham', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.upgrade-description {
    color: #6c757d;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.upgrade-features {
    margin: 2rem 0;
    text-align: left;
}

.upgrade-feature {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}

.upgrade-check {
    color: #28a745;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.upgrade-feature span {
    color: #495057;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.upgrade-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.upgrade-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 28px;
    background: linear-gradient(135deg, #EB5F6A 0%, #F1666E 100%);
    color: white;
    font-family: 'Gotham', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(235, 95, 106, 0.3);
    position: relative;
    overflow: hidden;
}

.upgrade-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.upgrade-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(235, 95, 106, 0.4);
    color: white;
    text-decoration: none;
}

.upgrade-btn-primary:hover::before {
    left: 100%;
}

.upgrade-btn-primary:active {
    transform: translateY(0);
}

.upgrade-btn-icon {
    width: 18px;
    height: 18px;
}

.upgrade-btn-secondary {
    padding: 12px 24px;
    background: transparent;
    color: #6c757d;
    font-family: 'Gotham', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #e9ecef;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upgrade-btn-secondary:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

/* Animations */
@keyframes upgradeIconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(235, 95, 106, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(235, 95, 106, 0.4);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .upgrade-required-container {
        max-width: 350px;
        padding: 2rem 1.5rem;
    }
    
    .upgrade-icon-wrapper {
        width: 100px;
        height: 100px;
        margin-bottom: 1.5rem;
    }
    
    .upgrade-icon-circle {
        width: 70px;
        height: 70px;
    }
    
    .upgrade-lock-icon {
        width: 28px;
        height: 28px;
    }
    
    .upgrade-subtitle {
        font-size: 20px;
    }
    
    .upgrade-description {
        font-size: 14px;
    }
    
    .upgrade-btn-primary {
        padding: 12px 24px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .upgrade-required-container {
        max-width: 300px;
        padding: 1.5rem 1rem;
    }
    
    .upgrade-actions {
        gap: 0.5rem;
    }
    
    .upgrade-btn-primary {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .upgrade-btn-secondary {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .upgrade-icon-circle,
    .upgrade-sparkle,
    .upgrade-btn-primary {
        animation: none;
    }
    
    .upgrade-btn-primary:hover {
        transform: none;
    }
}

/* ========================================
    END UPGRADE REQUIRED DESIGN
======================================== */


/* ========================================
   CUSTOM EMOJI PICKER STYLING - LOST SPARK THEME
======================================== */

/* Main emoji picker container */
emoji-picker {
    --background: #1A1919 !important;
    --border-color: #EB5F6A !important;
    --border-size: 1px !important;
    --border-radius: 12px !important;
    --button-active-background: #EB5F6A !important;
    --button-hover-background: rgba(235, 95, 106, 0.1) !important;
    --emoji-size: 1.375rem !important;
    --emoji-padding: 0.5rem !important;
    --category-emoji-size: 1rem !important;
    --category-emoji-padding: 0.25rem !important;
    --font-family: 'Gotham', sans-serif !important;
    --text-color: #FFF !important;
    --secondary-text-color: #C5C5C5 !important;
    --outline-color: #EB5F6A !important;
    --indicator-color: #EB5F6A !important;
    --input-border-color: #878786 !important;
    --input-background: #2A2929 !important;
    --skintone-border-radius: 50% !important;
    
    /* Lost Spark specific styling */
    font-family: 'Gotham', sans-serif !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #EB5F6A !important;
    background: #1A1919 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Header area */
emoji-picker .picker {
    background: #1A1919 !important;
    border: 1px solid #EB5F6A !important;
    border-radius: 12px !important;
    color: #FFF !important;
}

/* Search input styling */
emoji-picker .search {
    background: #2A2929 !important;
    border: 1px solid #878786 !important;
    border-radius: 8px !important;
    color: #FFF !important;
    font-family: 'Gotham', sans-serif !important;
    padding: 8px 12px !important;
    margin: 12px !important;
}

emoji-picker .search:focus {
    border-color: #EB5F6A !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(235, 95, 106, 0.2) !important;
}

emoji-picker .search::placeholder {
    color: #878786 !important;
    font-family: 'Gotham', sans-serif !important;
}

/* Category tabs */
emoji-picker .nav {
    background: #1A1919 !important;
    border-bottom: 1px solid #2A2929 !important;
    padding: 8px 12px !important;
}

emoji-picker .nav button {
    background: transparent !important;
    border: none !important;
    color: #C5C5C5 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    font-family: 'Gotham', sans-serif !important;
}

emoji-picker .nav button:hover {
    background: rgba(235, 95, 106, 0.1) !important;
    color: #EB5F6A !important;
}

emoji-picker .nav button[aria-selected="true"] {
    background: #EB5F6A !important;
    color: #FFF !important;
}

/* Emoji grid area */
emoji-picker .emoji-menu {
    background: #1A1919 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #EB5F6A #2A2929 !important;
}

/* Custom scrollbar for webkit browsers */
emoji-picker .emoji-menu::-webkit-scrollbar {
    width: 8px !important;
}

emoji-picker .emoji-menu::-webkit-scrollbar-track {
    background: #2A2929 !important;
    border-radius: 4px !important;
}

emoji-picker .emoji-menu::-webkit-scrollbar-thumb {
    background: #EB5F6A !important;
    border-radius: 4px !important;
}

emoji-picker .emoji-menu::-webkit-scrollbar-thumb:hover {
    background: #F1666E !important;
}

/* Individual emoji buttons */
emoji-picker .emoji {
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}

emoji-picker .emoji:hover {
    background: rgba(235, 95, 106, 0.1) !important;
    transform: scale(1.1) !important;
}

emoji-picker .emoji:focus {
    outline: 2px solid #EB5F6A !important;
    outline-offset: 2px !important;
}

/* Category labels */
emoji-picker .category {
    color: #EB5F6A !important;
    font-family: 'Gotham', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 12px 16px 8px !important;
    background: #1A1919 !important;
    border-bottom: 1px solid rgba(235, 95, 106, 0.2) !important;
    margin-bottom: 8px !important;
}

/* Skin tone picker */
emoji-picker .skintone-button {
    border: 2px solid #EB5F6A !important;
    border-radius: 50% !important;
    background: #2A2929 !important;
}

emoji-picker .skintone-button:hover {
    border-color: #F1666E !important;
    transform: scale(1.1) !important;
}

emoji-picker .skintone-list {
    background: #2A2929 !important;
    border: 1px solid #EB5F6A !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Loading and error states */
emoji-picker .loading {
    color: #EB5F6A !important;
    font-family: 'Gotham', sans-serif !important;
}

emoji-picker .error {
    color: #FF6B6B !important;
    font-family: 'Gotham', sans-serif !important;
    background: rgba(255, 107, 107, 0.1) !important;
    border: 1px solid #FF6B6B !important;
    border-radius: 6px !important;
    padding: 12px !important;
    margin: 12px !important;
}

/* No results message */
emoji-picker .no-results {
    color: #C5C5C5 !important;
    font-family: 'Gotham', sans-serif !important;
    text-align: center !important;
    padding: 20px !important;
}

/* Favorites section */
emoji-picker .favorites {
    border-bottom: 1px solid #2A2929 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

/* Enhanced positioning for chat context */
#emojiPickerMain,
#emojiPickerContainer emoji-picker {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 0 !important;
    z-index: 99999 !important;
    width: 350px !important;
    height: 300px !important;
    max-height: 350px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #EB5F6A !important;
    border-radius: 12px !important;
    background: #1A1919 !important;
    overflow: hidden !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    #emojiPickerMain,
    #emojiPickerContainer emoji-picker {
        width: 320px !important;
        height: 280px !important;
        max-width: 90vw !important;
    }
    
    emoji-picker .search {
        margin: 8px !important;
        padding: 6px 10px !important;
    }
    
    emoji-picker .nav {
        padding: 6px 8px !important;
    }
    
    emoji-picker .category {
        padding: 8px 12px 6px !important;
        font-size: 13px !important;
    }
}

/* Dark theme consistency */
emoji-picker * {
    color: inherit !important;
}

/* Ensure proper contrast for accessibility */
emoji-picker .emoji[aria-selected="true"] {
    background: rgba(235, 95, 106, 0.2) !important;
    border: 2px solid #EB5F6A !important;
}

/* Animation for opening */
@keyframes emojiPickerSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#emojiPickerMain[style*="display: block"],
#emojiPickerContainer emoji-picker[style*="display: block"] {
    animation: emojiPickerSlideUp 0.2s ease-out !important;
}

/* ========================================
   END CUSTOM EMOJI PICKER STYLING
======================================== */

/* Image preview styling */
.image-preview-container {
    animation: slideUp 0.3s ease-out !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chat image hover effect */
.user-message-sent-img img {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.user-message-sent-img img:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 4px 15px rgba(235, 95, 106, 0.3) !important;
}

/* Image modal styling */
#imageViewModal .modal-content {
    box-shadow: 0 10px 30px rgba(235, 95, 106, 0.3) !important;
}

#imageViewModal #fullSizeImage {
    transition: all 0.3s ease !important;
}

/* Preview button hover effects */
.send-image-btn:hover {
    background: #d54a55 !important;
    transform: translateY(-1px) !important;
}

.cancel-image-btn:hover {
    background: #333 !important;
    border-color: #777 !important;
}

/* Add to your custom.css or in a style tag */
.gift-modal .gift-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.gift-modal .gift-icon {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    flex: 0 0 calc(25% - 15px);
}

.gift-modal .gift-icon:hover {
    background: rgba(235, 95, 106, 0.05);
    border-color: rgba(235, 95, 106, 0.3);
    transform: translateY(-2px);
}

.gift-modal .gift-icon.selected {
    border-color: #EB5F6A !important;
    background: rgba(235, 95, 106, 0.1) !important;
    box-shadow: 0 2px 10px rgba(235, 95, 106, 0.3);
}

.gift-modal .gift-credit-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.gift-modal .send-gift-wrapper {
    padding: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.gift-modal .send-gift-button {
    background: #EB5F6A;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.gift-modal .send-gift-button:hover:not(:disabled) {
    background: #d94f5a;
    transform: translateY(-1px);
}

.gift-modal .send-gift-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Gift button in chat */
.chat-box-input-utility-icon .gift-button-trigger:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

/* ========================================
   USER ONLINE ICON POSITIONING - TOP RIGHT OF PROFILE IMAGE
======================================== */

/* Make the user-message-tab container relative for positioning */
.user-message-tab {
    position: relative;
}

/* Position the profile image container as relative */
.user-message-profile-img {
    position: relative;
    display: inline-block;
}

/* Move the online icon from user-information to position over profile image */
.user-online-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

/* Style the SVG icon inside */
.user-online-icon svg {
    width: 10px;
    height: 10px;
    display: block;
}

/* Remove margin/spacing from user-information since icon is now positioned absolutely */
.user-information {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
}

/* Ensure user name takes full width */
.user-information .user-name {
    margin: 0;
    flex-grow: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-online-icon {
        top: -1px;
        right: -1px;
        width: 14px;
        height: 14px;
    }
    
    .user-online-icon svg {
        width: 8px;
        height: 8px;
    }
}

/* Hover effect for better visibility */
.user-message-tab-button:hover .user-online-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Access request button states */
.access-icon {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 8px;
    border: 2px solid transparent;
}

.access-icon:hover {
    background: rgba(235, 95, 106, 0.1);
    border-color: rgba(235, 95, 106, 0.3);
}

.access-icon.processing {
    opacity: 0.6;
    pointer-events: none;
}

/* Access request sent state - pink background */
.access-icon.requested {
    background-color: #EB5F6A !important;
    border-color: #EB5F6A !important;
}

.access-icon.requested svg path {
    fill: white !important;
}

.access-icon.requested:hover {
    background-color: #d54855 !important;
    border-color: #d54855 !important;
}

/* Normal state */
.access-icon.not-requested {
    background: transparent;
    border-color: transparent;
}

.access-icon.not-requested svg path {
    fill: #EB5F6A !important;
}

/* Request gallery access button - match access-icon behavior */
.request-gallery-access-button {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 8px 12px;
    border: 2px solid transparent;
    background: transparent;
    color: #EB5F6A;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.request-gallery-access-button:hover {
    background: rgba(235, 95, 106, 0.1);
    border-color: rgba(235, 95, 106, 0.3);
}

.request-gallery-access-button.processing {
    opacity: 0.6;
    pointer-events: none;
}

/* Request access sent state - pink background */
.request-gallery-access-button.requested {
    background-color: #EB5F6A !important;
    border-color: #EB5F6A !important;
    color: white !important;
}

.request-gallery-access-button.requested svg path {
    fill: white !important;
}

.request-gallery-access-button.requested:hover {
    background-color: #d54855 !important;
    border-color: #d54855 !important;
}

/* Normal state */
.request-gallery-access-button.not-requested {
    background: transparent;
    border-color: transparent;
    color: #EB5F6A;
}

.request-gallery-access-button.not-requested svg path {
    fill: white !important; /* Keep the SVG white since it's on a dark background in gallery */
}

/* Heart button states */
.wishlist-icon {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 8px;
    border: 2px solid transparent;
}

.wishlist-icon:hover {
    background: rgba(235, 95, 106, 0.1);
    border-color: rgba(235, 95, 106, 0.3);
}

.wishlist-icon.processing {
    opacity: 0.6;
    pointer-events: none;
}

/* Liked state - filled heart */
.wishlist-icon svg path.liked {
    fill: #EB5F6A !important;
    stroke: #EB5F6A !important;
}

/* Not liked state - empty heart */
.wishlist-icon svg path:not(.liked) {
    fill: transparent !important;
    stroke: #EB5F6A !important;
}

/* Hover effects */
.wishlist-icon:hover svg path:not(.liked) {
    fill: rgba(235, 95, 106, 0.2) !important;
}

.wishlist-icon:hover svg path.liked {
    fill: #d54855 !important;
    stroke: #d54855 !important;
}

/* Heart button states - MORE SPECIFIC SELECTORS */
.user-profile .wishlist-icon svg path {
    transition: fill 0.2s ease !important;
}

/* Liked state - filled heart - VERY SPECIFIC */
.user-profile .wishlist-icon svg path.liked,
.user-profile .wishlist-icon svg path[fill="#EB5F6A"] {
    fill: #EB5F6A !important;
    stroke: #EB5F6A !important;
}

/* Not liked state - empty heart - VERY SPECIFIC */
.user-profile .wishlist-icon svg path:not(.liked),
.user-profile .wishlist-icon svg path[fill="transparent"] {
    fill: transparent !important;
    stroke: #EB5F6A !important;
}

/* Processing state */
.user-profile .wishlist-icon.processing {
    opacity: 0.7;
    pointer-events: none;
}

/* Override any conflicting styles */
.user-profile .wishlist-icon svg path[style*="fill: #EB5F6A"] {
    fill: #EB5F6A !important;
}

.user-profile .wishlist-icon svg path[style*="fill: transparent"] {
    fill: transparent !important;
}