@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Pacifico&display=swap');

body {
    background-color: #f8fafc;
    color: #1e293b;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

main.main {
    background-color: #f8fafc;
    min-height: calc(100vh - 80px);
}

h1,h2,h3,h4,h5,h6,p,span,a,button,input,label,div{
    font-family: "Figtree", sans-serif;
}
p{
    margin-bottom: 0px;
}
.section{
    width: 100% !important;
    padding: 0 4%;
}
@media (max-width: 768px) {
    .section {
        padding: 0 8px !important;
        width: 100% !important;
    }
}
.headerContainer{
    background-color: #ffffff;
}
.menu_item.active {
    color: #f43662;
    font-weight: bold;
}
.homebg{
    background-image: url('../imgs/hero_bg.png');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    padding: 70px 5%;
}

.headerMain{
    padding: 20px 0;
}
.home-section{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}
.w-66{
    width: 66%;
}
.w-33{
    width: 33%;
}
.w-60{
    width: 60%;
}
.w-30{
    width: 30%;
}
.w-70{
    width: 70%;
}
.w-40{
    width: 40%;
}
.homeMain-heading , .homeMain-heading span{
    font-size: 70px;
    font-weight: 900;
}
.home-Selects {
    width: 100%;
}

.select-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.select-wrapper select {
    width: 100%;
    padding: 15px 20px;
    border-radius: 5px;
    background: #fff5f5 !important;
    color: #f436628f;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Remove default arrow */
}

.select-wrapper::after {
    content: "\f107"; /* Unicode for Font Awesome's down arrow */
    font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is loaded */
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #d7d7d7;
}
.home-Selects button{
    background-color: #f43662;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 15px;
}
.step-one{
    padding: 10px 20px;
    border-bottom: 1px dashed #f43662;
    border-top: 1px dashed #f43662;
    border-right: 1px dashed #f43662;
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 20px;
    position: relative;
}
.step-two{
    padding: 10px 20px;
    border-left: 1px dashed #f43662;
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 20px;
    position: relative;
    flex-direction: row-reverse;
}
.step-one::after{
    content: "\f111"; /* Unicode for Font Awesome's filled circle */
    font-family: "Font Awesome 5 Free"; /* Make sure Font Awesome is loaded */
    font-weight: 900;
    position: absolute;
    top: -3px;
    right: -2px;
    pointer-events: none;
    color: #f43662;
    font-size: 5px;
}
.step-two::after{
    content: "\f111"; /* Unicode for Font Awesome's filled circle */
    font-family: "Font Awesome 5 Free"; /* Make sure Font Awesome is loaded */
    font-weight: 900;
    position: absolute;
    top: -3px;
    left: -2px;
    pointer-events: none;
    color: #f43662;
    font-size: 5px;
}
.step-one::before{
    content: "\f111"; /* Unicode for Font Awesome's filled circle */
    font-family: "Font Awesome 5 Free"; /* Make sure Font Awesome is loaded */
    font-weight: 900;
    position: absolute;
    bottom: -4px;
    right: -2px;
    pointer-events: none;
    color: #f43662;
    font-size: 5px;
}
.step-two::before{
    content: "\f111"; /* Unicode for Font Awesome's filled circle */
    font-family: "Font Awesome 5 Free"; /* Make sure Font Awesome is loaded */
    font-weight: 900;
    position: absolute;
    bottom: -4px;
    left: -2px;
    pointer-events: none;
    color: #f43662;
    font-size: 5px;
}
.step-three span::before{
    content: "\f111"; /* Unicode for Font Awesome's filled circle */
    font-family: "Font Awesome 5 Free"; /* Make sure Font Awesome is loaded */
    font-weight: 900;
    position: absolute;
    bottom: -5px;
    left: -2px;
    pointer-events: none;
    color: #f43662;
    font-size: 5px;
}
.dashbedBorders{
    padding-right: 100px;
    border-right: 10px solid #f43662;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.stepsTexts{
    padding-left: 100px;
    display: flex;
    align-items: center;
}
.stepTitle{
    color: #f43662;
    font-size: 30px;
    font-weight: 900;
}
.stepSubTitle{
    color: #3c3c3c;
    font-size: 20px;
    font-weight: 600;
}
.stepsTexts h2{
    font-size: 75px;
    color: black;
}
.stepsTexts span{
    font-style: italic;
    color: #f43662;
    font-weight: 900;
}
.bgSectionColor{
    background-color: #f43662;
    padding-top: 100px;
    padding-bottom: 100px;
}
.bgSectionColor .mainHeading{
    font-size: 60px;
    color: white;
    margin-bottom: 50px;
}
.bgSectionColor .mainHeading span{
    color: black;
}
.searchBy{
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 5px solid whitesmoke;
    display: flex;
    align-items: center;
    width: 100%;
}
.searchBy .searchTitle{
    width: 25%;
    font-size: 25px;
    color: white;
}
.searchBy .searchTitle h1{
    font-size: 28px;
}
.searchBy .searchOptions {
    display: flex;
    align-items: center;
    column-gap: 20px;
    justify-content: start;
    width: 75%;
}
.searchBy .searchOptions a{
    background-color: white;
    border-radius: 0 20px;
    padding: 15px 40px;
    color: #f43662;
    font-size: 20px;
    text-align: center;
}
.searchBy .searchOptions a:hover{
    color: #f43662;
}
.searchBy .searchOptions .lastOption{
    background-color: black;
    color: white;
    cursor: pointer;
}
.searchBy .searchOptions .lastOption:hover{
    color: white;
}
.bgBrands{
    background-image: url(../../frontend-assets/imgs/left_leaf.png);
    background-size: 8%;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 100px 100px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.bgBrands .Title{
    letter-spacing: 10px;
    color: #f43662;
}
.bgBrands .subTitle{
    font-size: 45px;
    font-weight: 600;
    color: #f43662;
    padding: 10px 0 20px;
}
.imageBrands{
    width: 20%;
}
.testimonial-item {
    max-width: 300px;
    text-align: center;
}


.testimonial-item {
    max-width: 300px;
    padding: 20px 30px;
    border: 1px solid #f43662;
    border-radius: 20px;
    text-align: left;
}
.Testimonialwrapper {
    max-width: 1100px;
    width: 100%;
    position: relative;
}
.testimonial-item .textimonialtext{
    font-size: 15px;
}
.testimonial-item .textDesc{
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0;
    color: black;
}
.testimonial-item .lcation{
    font-size: 17px;
    text-transform: uppercase;
}
.Testimonialwrapper i {
    cursor: pointer;
    position: absolute;
    top: 50%;
    font-size: 2.25rem;
    transform: translateY(-50%);
    color: #f43662;
    z-index: 998;
    background: white;
}

.Testimonialwrapper i:first-child {
    left: 7px;
}

.Testimonialwrapper i:last-child {
    right: 14px;
}

.Testimonialwrapper .Testimonialcarousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3));
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: 0;
}

.Testimonialcarousel::-webkit-scrollbar {
    display: none;
}

.Testimonialcarousel :where(.Testimonialcard, .img) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Testimonialcarousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.Testimonialcarousel.no-transition {
    scroll-behavior: auto;
}

.Testimonialcarousel.dragging .Testimonialcard {
    cursor: grab;
    user-select: none;
}

.Testimonialcarousel .Testimonialcard {
    scroll-snap-align: start;
    list-style: none;
    display: flex;
    cursor: pointer;
    width: 98%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
.Testimonialcarousel .TestimonialcardInner{
    box-shadow: 0 0 5px white;
    border-radius: 10px;
    padding: 10px;
    margin-top: 30px;
}
.Testimonialcarousel .Testimonialcard .img {
    transform: translate(13%, -75%) rotate(38deg);
    width: 70px;
    height: 70px;
    overflow: hidden;
    position: relative;
}

.Testimonialcarousel .Testimonialcard .img img {
    width: 100px;
    height: 145px;
    object-fit: contain;
    transform: rotate(-38deg);
    position: absolute;
}
.Testimonialcarousel .Testimonialcard::before{
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #FE7C7C;
    top: 10px;
    left: 35px;
}
.Testimonialcarousel .Testimonialcard::after{
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #FFDF7D;
    top: 80px;
    left: 35px;
}
.Testimonialcarousel .Testimonialcard .spanSquare{
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #7CD7FE;
    top: 3px;
    left: 133px;
}
.Testimonialcarousel .Testimonialcard span {
    color: #6a6d78;
    font-size: 1.31rem;
}
.mainTestiText{
    margin-top: -30px;
}
.bgBrands2{
    background-image: url(../../frontend-assets/imgs/image\ 31.png);
    background-size: 5%;
    background-position: right bottom;
    background-repeat: no-repeat;
    padding-bottom: 50px;
}
.trusted{
    margin-top: 200px;
    position: relative;
    padding-bottom: 200px;
    z-index: -1;
}

.pointerImage{
    width: 500px;
    position: absolute;
    top: -216px;
}
.trustedOne{
    font-size: 25px;
    color: black;
    margin-top: 20px;
}
.trustedTitle{
    font-size: 60px;
    font-weight: 900;
    color: white;
}
.trustedSubTitle{
    font-size: 20px;
    color: white;
    font-weight: 600;
}
.trustOptions{
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100%;
    margin-top: -100px;
    padding-bottom: 50px;
    height: 100%;
    column-gap: 100px;
}
.trustOptionsDiv{
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 5px 5px #e9e9e9;
    padding: 25px 15px;
    width: 25%;
    height: auto;
    flex: 1 0 auto;
}
.trustOptionsDiv div{
    border: 1px solid #f43662;
    border-radius: 10px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.trustOptionsDiv img{
    width: 100px;
    margin-bottom: 25px;
}
.trustOptionsDiv .ring-1{
    width: 70px;
}
.trustOptionsDiv .ring-2{
    width: 65px;
    position: absolute;
    top: 43px;
    left: -20px;
}
.trustOptionsDiv h2{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #f43662;
    text-align: center;
}
.trustOptionsDiv p{
    text-align: center;
    font-size: 18px;
    color: black;
}
.moreTestimonials{
    background-color: #f43662;
    color: white;
    text-transform: uppercase;
    font-size: 17px;
    padding: 20px 30px;
    border-radius: 10px;
    font-weight: 600;
}
.siteContact{
    padding: 100px 0;
}
.contactImg1{
    width: 15%;
    position: absolute;
    top: -45px;
    left: 15px;
    z-index: -1;
}
.contactImg2{
    width: 52%;
    margin-left: 10%;
}
.contactImg3{
    position: absolute;
    width: 50%;
    bottom: 0;
    right: 15%;
    border-top: 12px solid white;
    border-left: 8px solid white;
    border-radius: 0 45%;
    background: white;
}
.contactImg4{
    width: 20%;
    bottom: -30px;
    position: absolute;
    right: 80px;
    z-index: -1;
}
.contactDetails{
    padding: 50px;
}
.contactDetails .title{
    font-size: 60px;
    color: black;
    font-weight: 900;
}
.contactDetails .subTitle{
    font-size: 35px;
    color: #f43662;
    font-weight: 600;
    margin-bottom: 20px;
}
.contactDetails .desc{
    color: #5B5B5B;
    font-size: 16px;
    margin-bottom: 20px;
}
.contactDetails .click{
    color: black;
    font-size: 16px;
}
.contactDetails .click a {
    text-decoration: none;
    color: #f43662;
    cursor: pointer;
}
.contactDetails hr{
    background-color: #C2C2C2;
}
.contactDetails .enquiry i{
    width: 50px;
    height: 50px;
    border: 5px solid #E2DBE4;
    border-radius: 50%;
    font-size: 18px;
    background-color: #f43662;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contactDetails .enquiry h4{
    color: #898989;
    font-size: 15px;
}
.contactDetails .enquiry p{
    color: black;
    font-size: 19px;
    font-weight: 600;
}
.aboutTexts .enquiry i{
    width: 50px;
    height: 50px;
    border: 5px solid #E2DBE4;
    border-radius: 50%;
    font-size: 18px;
    background-color: #f43662;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.aboutTexts .enquiry h4{
    color: #898989;
    font-size: 15px;
}
.aboutTexts .enquiry p{
    color: black;
    font-size: 19px;
    font-weight: 600;
}
.adSection{
    background-image: url(../imgs/Vector-line-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 20px;
    padding: 40px 100px 30px 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 100px;
    margin-top: 50px;
}
.adSection .title{
    font-size: 70px;
    color: white;
    font-weight: 600;
    margin-bottom: 20px;
}
.adSection .joinBtn{
    background-color: white;
    padding: 10px 45px;
    color: #f43662;
    margin-top: 30px;
    border-radius: 10px;
    font-weight: 600;
}
.adSection .img{
    width: 25%;
}
footer{
    background-color: #f43662;
    border-bottom: 1px solid rgba(255, 255, 255, 0.178);
}
.foterWidgets{
    padding: 50px 0;
    display: flex;
    width: 100%;
}
.foterWidgets .innerDiv{
    width: 25%;
}
.foterWidgets .innerDiv .title{
    color: white;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 30px;
}
.foterWidgets .innerDiv .infos{
    font-size: 14px;
    color: white;
    font-weight: 500;
    margin-bottom: 5px;
}
.foterWidgets .innerDiv .footerMenu{
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}
.foterWidgets2 .footerMenu{
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}
.footerSocial i, .copywrteText{
    color: #ffbbca;
    margin-right: 10px;
}
.foterWidgets2{
    background-color: #f43662;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-group{
    padding: 10px;
    border: 1px solid #f43662;
    border-radius: 20px;
}
.Loginhomebg{
    background-image: url('../imgs/hero_bg.png');
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    width: 62%;
    margin-left: -5px;
}
.registerBg, .bg-price{
    background-image: url('../imgs/hero_bg.png');
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
}
.leftImage{
    background-image: url(../imgs/image.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 40%;
}
.signInForm{
    padding: 100px;
    background-color: #f43662b7;
}
.signInForm .title{
    color: white;
    font-weight: 900;
    font-size: 70px;
    margin-bottom: 30px;
}
.signInForm .form-group{
    border: none;
}
.signInForm .form-group label{
    color: white;
    font-size: 15px;
    font-weight: 600;
}
.signInForm .form-group input{
    background: transparent !important;
    color: white;
    border-color: white;
    border: 1px solid white;
    border-radius: 10px;
}
.signInForm .form-group input::placeholder{
    color: white;
}
.signInForm  .login-form{
    padding: 0 150px;
}
.form-control:focus{
    box-shadow: none !important;
}
input[type="radio"]{
    box-shadow: none;
}
input[type="checkbox"]{
    box-shadow: none;
}
.signConfBtn , .signConfBtn:hover{
    width: 100%;
    border: 1px solid white;
    background-color: #f43662;
    color: white;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
}
.googleSignin{
    width: 100%;
    border: 1px solid white;
    color: white;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
}
.googleSignin img{
    width: 25px;
}
#CreatProfilesDiv{
    display: none;
}
#prevToLookingFor{
    display: none;
}
.input-group-appends{
    position: absolute;
    top: 13%;
    right: 10px;
    background-color: transparent;
    z-index: 999;
}
.signInForm .input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border: none;
    border-radius: var(--bs-border-radius);
}
.Registration_Modal{
    background: #f4366257;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    backdrop-filter: blur(2px);
}
.Registration_Modal .modal-dialog{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%;
}
.Registration_Modal .modal-content{
    background-color: #f43662;
    /* height: 75vh; */
    padding: 20px;
}
.Registration_Modal .modal-body{
    overflow-y: auto;
    padding: 0 10px 0 0;
}
.Registration_Modal .modal-header{
    padding: 10px 0 20px 0;
    border:  none !important;
}
.Registration_Modal .modal-header .modal-title{
    color: white;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    width: 100%;
}
.Registration_Modal .btn-modalclose{
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid white;
    border-radius: 50%;
    background: transparent;
    color: white;
    font-size: 10px;
}
.Registration_Modal .names{
    display: flex;
    align-items: center;
    column-gap: 20px;
}
.Registration_Modal .form-control, .submitDtsCard .form-control{
    color: #f43662;
    padding: 10px;
    border: none;
    background: white !important;
}
.Registration_Modal .form-control::placeholder, .submitDtsCard .form-control::placeholder{
    color: #f43662;
}
.Registration_Modal .form-control:focus, .submitDtsCard .form-control:focus{
    border: none;
    box-shadow: none;
}
.Registration_Modal .radios {
    margin-top: 20px;
}
.Registration_Modal .radios p, .submitDtsCard .radios p{
    margin-bottom: 5px;
    color: white;
}
.Registration_Modal .radios input[type="radio"], .submitDtsCard .radios input[type="radio"]{
    display: none;
}
.Registration_Modal .radios label, .submitDtsCard .radios label{
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    border-radius: 5px;
}
.Registration_Modal .radios input[type="radio"]:checked + label{
    background-color: white;
    color: #f43662;
}
.submitDtsCard .radios input[type="radio"]:checked + label{
    background-color: white;
    color: #f43662;
}
.Registration_Modal .date_of_birth{
    margin-top: 20px;
}
.Registration_Modal .date_of_birth p{
    color: white;
    margin-bottom: 5px;
}
.Registration_Modal .date_of_birth .fields{
    display: flex;
    align-items: center;
    column-gap: 5px;
}
.Registration_Modal .date_of_birth .fields .select-wrapper{
    width: 25%;
}
.Registration_Modal .select-wrapper::after, .submitDtsCard .select-wrapper::after{
    color: #f43662;
}
.Registration_Modal .education{
    margin-top: 20px;
}
.Registration_Modal .openEmailSignup{
    width: 100%;
    padding: 10px;
    background: white;
    margin-bottom: 20px;
    color: #f43662;
}
.Registration_Modal .submitBtn{
    padding: 10px 25px ;
    background: white;
    color: #f43662;
    font-weight: 600;
}
.Registration_Modal .submitBtn:hover{
    background-color: white;
    border-color: white;
    color: #f43662;

}
.Registration_Modal .cancelBtn{
    background-color: transparent;
    color: white;
}
.Registration_Modal .cancelBtn:hover{
    background-color: transparent;
    border-color: white;
    color: white;
}
.Registration_Modal ::-webkit-scrollbar{
    width: 5px;
}
.Registration_Modal ::-webkit-scrollbar-track{
    background-color: white;
    border-radius: 100vw;
}
.Registration_Modal ::-webkit-scrollbar-thumb{
    background: black;
    border-radius: 100vw;
}
.termText ::-webkit-scrollbar{
    width: 5px;
}
.termText ::-webkit-scrollbar-track{
    background-color: white;
    border-radius: 100vw;
}
.termText ::-webkit-scrollbar-thumb{
    background: black;
    border-radius: 100vw;
}
.Registration_Modal .input-group-text{
    border: none;
    color: #f43662;
}
.membershipbg{
    background: #f436628c;
    backdrop-filter: blur(3px);
}
.plans{
    background-color: #FEF5F7;
    border-radius: 20px;
}
.contineBtn, .phonVerifyBtn{
    padding: 7px 20px;
    background-color: black;
    border-radius: 10px;
    color: white;
    border: none;
}
.submitDtsCard .select-wrapper::after{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    border-left: 2px solid #f43662;
    height: 100%;
}

.submitDtsCard .termscheck p{
    color: white;
    font-size: 17px;
}
.submitDtsCard .termscheck .bdCode{
    padding: 10px;
    background: white;
    border-radius: 10px 0px 0 10px;
    color: #f43662;
    border-right: 1px solid #f43662;
}
.submitDtsCard .termscheck .verifyPhoneNumber{
    border-radius: 0 10px 10px 0;
}


/* .form-check label{
    padding: 3px 10px;
    border: 1px solid white;
    color: white;
    border-radius: 10px;
}
.form-check input[type="radio"]:checked + label{
    background: hotpink;
    border-color: hotpink;
} */
.submitBtn{
    color: white;
    border: 1px solid white;
    border-radius: 10px;
    background-color: #f43662;
}
.submitBtn:hover
{
    background-color: #f43662;
    border-color: #f43662;
    color: white;
}
.menu_item{
    text-decoration: none;
    color: black;
    font-size: 17px;
    padding: 10px 15px;
    transition: all 0.3s ease-in;
}
.menu_item:hover{
    color: #f43662;
}
.loginBtn{
    font-size: 17px;
    color: #f43662;
    border-radius: 5px;
    padding: 8px 30px;
}
.registerbtn{
    font-size: 17px;
    color: white;
    background-color: #f43662;
    border-radius: 5px;
    padding: 8px 30px;
}
.registerbtn:hover{
    background-color: #f43662;
    color: white;
    border-color: #f43662;
}
.loginBtn:hover{
    background-color: transparent;
    color: #f43662;
    border-color: transparent;
}
.popupModal{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #f4366238;
    top: 0%;
    z-index: 999999999;
    padding-top: 14%;
}
.passwordPopup{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #f4366238;
    top: 0%;
    z-index: 999999999;
    backdrop-filter: blur(2px);
}
.passwordPopup .card{
    width: 50%;
}
.toast-success {
    background-color: green !important; /* Green background */
    z-index: 9999999 !important;
    opacity: 1 !important;
}
.toast-error {
    background-color: #ff0019 !important; /* Red background */
    z-index: 999999 !important;
    opacity: 1 !important;
}
.profileImg{
    background: transparent;
    border: none;
    border-radius: 50%;
    padding: 3px;
}
.profileImg img{
    width: 50px;
    height: 50px;
    border: 3px solid #f4366238;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
}
.dropdown-menu{
    inset: 0px 0 auto auto !important;
}
.dashboardNav{
    padding: 30px 65px 0 0px;
    border-right: 1px solid rgb(0 0 0 / 18%);
    width: 25%;
    height: 100vh;
    position: relative;
}
.dashboardNav .nav-link{
    border: 2px solid #F43662;
    color: #F43662;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 20px;
    width: 100%;
}
.navsInnerDiv{
    width: 25%;
}
.sticky-div {
    height: calc(100vh - 150px); /* Adjust the 80px based on the height of the non-scrolling content */
    overflow-y: auto;
}
.tab-content .row{
    padding: 10px 0px 20px 25px;
    --bs-gutter-x: 2rem !important;
}
.tab-content .row .col-md-4{
    margin-top: 20px;
}
.dashboardNav .active{
    background-color: #F43662 !important;
    color: white;
}
.profileGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 items per row */
    gap: 15px; /* Space between grid items */
    height: fit-content;
}
.profileCard{
    border: 2px solid #F43662;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}
.blur{
    filter: blur(8px);
}
.profileCard img{
    height: 220px;
    object-fit: cover;
    object-position: top center;
}
.profileCard .profileCardDiv{
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Make the div flexible to fill available space */
    justify-content: space-between;
}
.profileCard .profileDetailsBtn{
    display: block;
    text-decoration: none;
    width: 100%;
    background-color: #F43662;
    color: white;
    text-align: center;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 10px;
}
.sticky-div::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
.bestMatch{
    color: #F43662;
    font-family: "Pacifico", cursive;
}
.dashboardLogOut{
    margin-bottom: 130px !important;
    position: absolute;
    bottom: 0;
    width: 78% !important;
}
.dashboardLogOut:hover{
    background-color: #F43662;
    color: white;
}
.dashboardButton{
    background-color: #F43662 !important;
    color: white !important;
}
.form-container {
    margin: 20px 0 10px 10px;
}

.profile-form-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
    margin-bottom: 20px;
}
.partner-form-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
    margin-bottom: 20px;
}
.profile-form-steps::before{
    content: '';
    height: 5px;
    background: #f4366269;
    position: absolute;
    width: 100%;
    border-radius: 20px;
    bottom: 0;
    left: 0;
    z-index: 80;
}
.partner-form-steps::before{
    content: '';
    height: 5px;
    background: #f4366269;
    position: absolute;
    width: 100%;
    border-radius: 20px;
    bottom: 0;
    left: 0;
    z-index: 80;
}
.profile-form-steps .profile-step {
    cursor: pointer;
    color: #F43662 !important;
    font-size: 20px;
    transition: all 0.3s ease;
    position: relative !important;
    padding: 0 0 20px !important;
    font-size: 20px;
}
.partner-form-steps .partner-step {
    cursor: pointer;
    color: #F43662;
    font-size: 20px;
    padding-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
}
.profile-form-steps .profile-step:hover{
    border: none !important;
}
.profile-form-steps .active {
    font-weight: bold !important;
    position: relative;
    border: none !important;
}
.partner-form-steps .partner-step .active {
    font-weight: bold !important;
    position: relative;
    border: none !important;
}
.profile-form-steps .active::before{
    content: '';
    height: 5px;
    width: 100%;
    background: #F43662;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease;
    z-index: 99;
    left: 0;
}
.partner-form-steps .active::before{
    content: '';
    height: 5px;
    width: 100%;
    background: #F43662;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease;
    z-index: 99;
    left: 0;
}
.progress-bar {
    height: 5px;
    background: #e0e0e0;
    margin-bottom: 20px;
    position: relative;
}

.progress {
    height: 100%;
    width: 0;
    background: #F43662;
    transition: width 0.4s;
}

.profile-form-step {
    display: none;
}
.partner-form-step {
    display: none;
}
.profile-form-step.active {
    display: block;
}
.partner-form-step.active {
    display: block;
}


.imageDrop input[type="file"] {
    display: none;
  }
.imageDrop .imageUploadInput {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: transparent;
    color: #F43662;
    font-size: 1.1em;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 0.3em;
    margin: 0;
    cursor: pointer;
    border: 1px solid #f43662;
  }
.imageDrop #image-display {
    position: absolute;
    width: 100%;
    /* margin: 0 auto; */
    display: flex;
    justify-content: space-evenly;
    /* gap: 1.25em; */
    /* flex-wrap: wrap; */
    height: 100%;
    z-index: 0;
  }
  .imageDrop #image-display1 {
    position: absolute;
    width: 100%;
    /* margin: 0 auto; */
    display: flex;
    justify-content: space-evenly;
    /* gap: 1.25em; */
    /* flex-wrap: wrap; */
    height: 100%;
    z-index: 0;
  }
.imageDrop #image-display figure {
    width: 100%;
    height: 100%;
    border: 1px solid white;
    padding: 5px;
    border-radius: 10px;
  }
  .imageDrop #image-display1 figure {
    width: 100%;
    height: 100%;
  }
.imageDrop #image-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  .imageDrop #image-display1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
.imageDrop #image-display figcaption {
    display: none;
  }
  .imageDrop #image-display1 figcaption {
    display: none;
  }
.imageDrop  #error {
    text-align: center;
    color: #ff3030;
  }
  .imageDrop  #error1 {
    text-align: center;
    color: #ff3030;
  }
.imageDrop{
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.newImagePre{
    overflow: hidden;
    border-radius: 10px;
}
.profileDesc{
    width: 100%;
    height: 128px;
    padding: 10px 10px;
    border-radius: 10px;
    border-color: #f43662;

}
.profileInput{
    width: 100%;
    padding: 10px;
    border: 1px solid #f43662;
    border-radius: 10px;

}
.profile-next-step, .profile-submit-form, .profile-next-step:hover, .profile-submit-form:hover, .profile-next-step:active, .profile-submit-form:active{
    background-color: #F43662;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    float: right;
}
:not(.btn-check)+.btn:active{
    background-color: #F43662;
    color: white;
}
.partner-next-step, .partner-submit-form{
    background-color: #F43662;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    float: right;
}
input:focus, textarea:focus, select:focus-visible {
    border-color: #F43662;
    outline: none;
}
.partner-form-step input:focus, .partner-form-step textarea:focus {
    border-color: #F43662;
    outline: none;
}
.profile-form-step input::placeholder{
    color: #F43662;
}
.partner-form-step input::placeholder{
    color: #F43662;
}
.imageReUploadInput{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 5px;
    background: #00000029;
    color: white;
    text-align: center;
    z-index: 9999;
    display: none;
    cursor: pointer;
}
.imageDrop #image-display:hover .imageReUploadInput{
    display: block !important;
  }
  .imageDrop #image-display1:hover .imageReUploadInput{
    display: block !important;
  }
  .profile-prev-step, .profile-prev-step:hover{
    background-color: #F43662;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
}
.partner-prev-step, .partner-prev-step:hover{
    background-color: #F43662;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
}
.settings .pl-0{
    padding-left: 0px;
}
.profileNav:hover{
    background-color: #F43662 !important;
    color: white !important;
}
.dropdown-item:active{
    background-color: #F43662;
}
.form-check-input:checked {
    background-color: #F43662;
    border-color: #F43662;
}
.form-check-input:focus{
    box-shadow: none !important;
}
.viewProfileTab .imageDrop{
    align-items: start;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.editingYourProfile .imageDrop{
    align-items: start;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.viewProfileTab .imageDrop img{
    border-radius: 10px;
}
.editingYourProfile .imageDrop img{
    border-radius: 10px;
}
.viewProfileTab .profileDesc{
    border-color: #00000029;
    color: #525252;
    height: 100px;
    margin-top: 10px;
}
.editingYourProfile .profileDesc{
    border-color: #f4366238;
    color: black;
    height: 100px;
    margin-top: 10px;
}
.viewProfileTab .profileInput{
    border-color: #00000029;
    color: #525252;
}
.editingYourProfile .profileInput{
    border-color: #F43662;
    color: black;
}
.viewProfileTab label{
    width: 50%;
    font-size: 18px;
    font-weight: 600;
}
.editingYourProfile label{
    width: 50%;
    font-size: 18px;
    font-weight: 600;
    color: #F43662;
}
.viewProfileTab .profile-form-steps .profile-step{
    color: black !important;
}
.editingYourProfile .profile-form-steps .profile-step{
    color: #F43662 !important;
}
.viewProfileTab .profile-form-steps .active::before{
    background-color: black;
    z-index: 999;
}
.editingYourProfile .profile-form-steps .active::before{
    background-color: #F43662;
    z-index: 999;
}
.viewProfileTab .profile-form-steps::before{
    background-color: #929292;
    z-index: 997;
}
.editingYourProfile .profile-form-steps::before{
    background-color: #f4366238;
    z-index: 997;
}
.viewProfileTab .sticky-div{
    padding-bottom: 180px;
}
.editingYourProfile .sticky-div{
    padding-bottom: 220px;
}
.settings{
    width: 50%;
}
.profileInput {
    position: relative;
  }

  .yourProfileCreate .profileInput::before {
    content: attr(placeholder);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
  }

  .yourProfileCreate .date-picked :not(:placeholder-shown)::before {
    display: none !important;
  }
  .yourProfileCreate .date-picked::before {
    display: none !important;
  }

  .yourProfileCreate .profileInput::-webkit-datetime-edit-text,
  .yourProfileCreate .profileInput::-webkit-datetime-edit-month-field,
  .yourProfileCreate .profileInput::-webkit-datetime-edit-day-field,
  .yourProfileCreate .profileInput::-webkit-datetime-edit-year-field {
    color: transparent !important;
  }
.dashboardMain input, select {
    background-color: transparent !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.yourProfileCreate .date-picked::-webkit-datetime-edit-text,
.yourProfileCreate .date-picked::-webkit-datetime-edit-month-field,
.yourProfileCreate .date-picked::-webkit-datetime-edit-day-field,
.yourProfileCreate .date-picked::-webkit-datetime-edit-year-field {
    color: black !important;
  }
a{
    text-decoration: none !important;
}
.editingYourProfile .imageDrop{
    width: 260px !important;
}
.editingYourProfile .imageDrop .savedImagePre{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.editingYourProfile .imageDrop .newImagePre{
    position: absolute;
    z-index: 3;
    background: white;
    width: 100%;
    height: 100%;
}
.editingYourProfile .UploadnewImageLabel{
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid #F43662;
    text-align: center;
    border-radius: 10px;
}
.editingYourProfile .UploadnewImageremove{
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid #F43662;
    text-align: center;
    border-radius: 10px;
    color: #F43662;
    background-color: transparent;
}
.bg-price .mainHeading{
    font-size: 55px;
    font-weight: 800;
    margin-bottom: 50px;
    color: white;
}
.bg-price .subHeading{
    font-size: 20px;
    font-weight: 500;
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
}
.pricePlanCard1, .pricePlanCard2{
    background: white;
    padding: 35px;
    border-radius: 10px 0 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pricePlanCard3{
    background: rgb(34, 34, 34);
    padding: 45px 35px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pricePlanCard2{
    border-radius: 0px;
    margin-left: 1px;
}
.priceTitle{
    font-weight: 700;
    margin-bottom: 5px;
}
.pricePlanCard3 .priceTitle{
    color: #f43662;
}
.pricePlanCard2 .priceTitle{
    color: #f43662;
}
.priceSubTitle{
    font-weight: 500;
    color: #3c3c3c;
    margin-bottom: 15px;
}
.pricePlanCard3 .priceSubTitle{
    color: white;
}
.priceAmount{
    font-weight: 800;
    margin-bottom: 0px;
}
.pricePlanCard3 .priceAmount{
    color: white;
}
.priceAmount span{
    font-size: 20px;
    color: #b5b5b5;
}
.priceAmountText{
    color: #919191;
    font-weight: 500;
}

.planServices i{
    color: #ffffff;
    margin-right: 5px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}
.pricePlanCard3 .planServices{
    color: #919191;
}
.price1Btn{
    display: block;
    width: 100%;
    text-align: center;
    color: black;
    border: 1px solid #b9b9b9;
    padding: 10px;
    border-radius: 10px;
    margin-top: 20px;
}
.pricePlanCard3 .price1Btn{
    color: white;
    border: 1px solid #f43662;
    background-color: #f43662;
}
.pricePopularTag{
    background-color: #F43662;
    color: white;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 5px;
}
.bg-price .nav-pills .nav-link.active{
    background: #f43662;
    color: white;
    border-radius: 20px;
}

.bg-price .nav-pills .nav-link{
    color: black;
    width: 115px;
    border-radius: 20px;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    padding: 12px;
}

.priceMobileBtnDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EAABB1;
    margin-bottom: 15px;
    border-radius: 20px;
}
.faq-bg{
    padding: 3% 15%;
}
.contact-bg{
    padding: 3% 15%;
}
.faqTitle, .contactTitle{
    font-size: 80px;
    font-weight: 900;
}
.faqSubTitle, .contactSubTitle{
    font-weight: 500;
    color: #5a5a5a;
    margin-top: 15px;
    margin-bottom: 50px;
}
.faqBottomDiv{
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.faqbotTitle{
    font-weight: 700;
}
.faqbotSubTitle{
    font-weight: 500;
    color: #5e5e5e;
}
.faqBotInnerDiv{
    padding: 10px 20px;
    background: #e1e1e1;
    border-radius: 10px;
    margin-top: 15px;
}
.faqBotInnerDiv .copy{
    border: none;
    padding: 3px 10px;
    border-radius: 10px;
}
.faq-bg .accordion{
    background-color: bisque;
    padding: 20px;
    border-radius: 10px;
}
.faq-bg .accordion-item{
    background: transparent;
    border: none;
}
.faq-bg .accordion-button:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
    border-bottom: 1px solid #f7f7f7;
}
.faq-bg .accordion-button{
    background: transparent;
    border-bottom: 1px solid #f7f7f7;
}
.faq-bg .accordion-button:not(.collapsed){
    color: black;
    font-weight: bold;
}
.faq-bg .accordion-button:not(.collapsed)::after{
    background-image: none !important;
    content: '\f068' !important;
    color: black !important;
}
.faq-bg .accordion-button::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f067'; /* Unicode for plus icon */
    color: black;
    transition: transform 0.3s ease;
    background-image: none !important;
}
.faq-bg .faqTitle span{
    background-image: url(../imgs/hero.jpg);
    background-size: cover;
    background-clip: text;
    background-position: bottom right;
    -webkit-background-clip: text;
    color: #fc36615e !important;
}
.contact-bg form{
    padding: 25px;
}
.contact-bg form label{
    font-weight: 600;
    margin-top: 25px;
}
.contact-bg form button{
    width: 100%;
    margin-top: 20px;
    background-color: black;
    color: white;
    text-align: center;
    font-weight: 500;
    font-size: 17px;
}
.contact-bg .contactInfo{
    padding: 20px;
}
.contact-bg .contactInfo a{
    text-decoration: underline !important;
    color: black;
    font-weight: 600;
    display: block;
}
.contact-bg .contactInfo a i{
    text-decoration: none !important;
    margin-right: 8px;
}
.contact-bg .contactInfo h5{
    color: black;
    font-weight: 600;
}
.contact-bg .contactInfo p{
    color: gray;
    font-weight: 500;
    margin-bottom: 15px;
}
.BuyCredit .bg-price .priceMobileTab{
    flex-direction: column;
    align-items: center !important;
}
.BuyCredit .bg-price .nav-pills{
    width: 100% !important;
}
.BuyCredit .bg-price .tab-content{
    width: 100% !important;
}
.BuyCredit .bg-price .priceMobileBtnDiv{
    flex-direction: row;
}
.planPopup{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.288);
    backdrop-filter: blur(4px);
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    padding: 30px;
}
.planPopup .card-body{
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.planPopup .card-body h3{
    font-size: 18px;
}
.planPopup .card-body .popUpPlanBtn{
    background: #f43662;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    margin-top: 15px;
}
.planPopup .card-body .close{
    position: absolute;
    border: none;
    background-color: black;
    color: white;
    padding: 3px 8px;
    border-radius: 8px;
    right: 5px;
    top: 5px;
}
.contact-bg .form-control:focus{
    box-shadow: none !important;
    border-color: #dee2e6 !important;
}
.messageCount{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 3px solid #f8d3db;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background: #fc3661;
}
.messageCountIcon{
    color: white;
    font-size: 25px;
}
.messageCounter{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 12px;
    padding: 0px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #fc3661;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
}
.pricePlanCards{
    background: transparent;
    padding: 20px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 23%;
    transition: all 0.3s ease;
}
.pricePlanCards:hover{
    background-color: #f43662;
    margin-top: -55px;
    transition: all 0.3s ease;
}
.planTitle{
    font-weight: 700;
    margin-bottom: 5px;
    color: #f43662;
}
.pricePlanCards:hover .planTitle{
    color: white;
}
.planSubTitle{
    font-weight: 500;
    color: black;
    margin-bottom: 15px;
}
.pricePlanCards:hover .planSubTitle{
    color: white;
}
.planAmount{
    font-weight: 800;
    margin-bottom: 0px;
    font-size: 32px;
    margin-bottom: 20px;
    color: #f43662;
}
.planAmount span{
    font-size: 16px;
    font-weight: 500;
    color: black;
}
.pricePlanCards:hover .planAmount{
    color:white;
}
.pricePlanCards:hover .planAmount span{
    color:white;
}
.planAmountText{
    color: #919191;
    font-weight: 500;
}
.planServices{
    color: black;
    margin-right: 5px;
    display: flex;
    margin-bottom: 8px;
}
.pricePlanCards:hover .planServices{
    color:white;
}
.planServices i{
    background-color: #f43662;
}
.pricePlanCards:hover .planServices i{
    background-color: #F995AC;
}
.plansBtn{
    display: block;
    width: 100%;
    text-align: center;
    color: white;
    padding: 10px;
    border-radius: 30px;
    margin-top: 20px;
    background-color: #F995AC;
}
.pricePlanCards:hover .plansBtn{
    background-color: white;
    color: #f43662;
}
.planBadge{
    background-color: #f43662;
    font-size: 13px;
    border-radius: 20px;
    width: fit-content;
    padding: 5px 15px;
    color: white;
    font-weight: 800;
}
.pricePlanCards:hover .planBadge{
    background-color: white;
    color: #f43662;
}
.planBadgeNull{
    height: 25px;
}
.detailsHeight{
    height: 75vh;
}
.submitDtsCard{
    padding: 20px 50px;
    border-radius: 10px;
    background-color: #f43662;
    display: none;
    min-width: 30vw;
}
.submitDtsCard:first-child {
    display: block;
}
.detailsbg{
    background: #f436625e;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
}
/* Card transition animations */
.submitDtsCard {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateX(0);
}

.submitDtsCard.hide-card {
    display: none !important;
    opacity: 0;
    transform: translateX(-100%);
}

.submitDtsCard.show-card {
    display: block !important;
    opacity: 0;
    transform: translateX(100%);
}

.submitDtsCard.show-card {
    animation: slideIn 0.3s forwards;
}

.submitDtsCard .termText{
    width: 40vw;
    height: 45vh;
    overflow: hidden;
    overflow-y: auto;
    padding-right: 20px;
}
.submitDtsCard .termText h3{
    font-size: 22px;
    color: white;
}
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.checkedTermsInputIcon {
    display: none;
}

/* Show the icon and hide the checkbox when the checkbox is checked */
.checkedTermsInput:checked + .checkedTermsInputIcon {
    display: inline-block; /* Show the icon */
}

/* Hide the checkbox when it is checked */
.checkedTermsInput:checked {
    display: none; /* Hide the checkbox */
}
.bg-about{
    background: linear-gradient(180deg, rgba(252,202,213,1) 0%, rgba(255,255,255,1) 50%);
}
.aboutbg{
    background: linear-gradient(180deg, rgb(251 182 197) 0%, rgb(255 255 255 / 40%) 35%, rgb(251 182 197 / 24%) 100%);
}
.aboutbg .mainHeading{
    color: #f43662;
}
.aboutbg .subHeading{
    color: #f43662;
}
.aboutTexts{
    margin-top: 100px !important;
}
.aboutTexts h1{
    font-size: 60px;
    color: black;
    font-weight: 900;
    margin-bottom:10px;
}
.aboutTexts h3{
    color: #f43662;
    font-size: 50px;
    margin-bottom: 30px;
}
.aboutTexts p{
    font-size: 16px;
    color: #5e5e5e;
    margin-bottom: 30px;
}
.aboutTexts p a{
    color: #f43662;
    text-decoration: none;
}
.aboutTexts .paRight{
    padding-right: 50px;
}
.sideImagebg{
    background-image: url(../imgs/image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    transform: scaleX(-1);
    padding: 30px;
    border-radius: 20px;
}
.imageInnerBorder{
    height: 100%;
    border: 1px solid white;
    border-radius: 20px;
}
.aboutTexts .paddingLefts{
    padding-left: 100px;
}
.aboutImages .aboutImg3{
    width: 90%;
    transform: scaleX(-1);
    border-radius: 0% 40%;
    border-left: 10px solid white;
    position: relative;
    z-index: 1;
}
.aboutImages .aboutImg4{
    position: absolute;
    right: 30px;
    bottom: -20px;
    z-index: 0;
    width: 30%;
}
.top-Header-bottom-border{
    margin: 0;
    opacity: 1;
    border-top: 0px;
    height: 3px;
    background: linear-gradient(90deg, rgba(252,202,213,0) 0%, rgba(244,54,98,1) 50%, rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    z-index: 0;
    left: 0;
    width: 100%;
}
.faqTexts{
    padding: 50px 100px 100px;
    background: white;
    margin: 0;
}
.faqTexts i{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #f43662;
    padding: 2px;
    color: white;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.faqTexts h3{
    color: black;
    font-size: 18px;
    margin: 15px 0;
}
.faqTexts p{
    color: black;
    font-size: 16px;
}
.furtherFaq{
    margin-top: 50px;
    background-color: #FDD7E0;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 25px;
    align-items: center;
}
.furtherFaq h4{
    color: #f43662;
    font-size: 20px;
}
.furtherFaq p{
    color: #f43662;
    font-size: 15px;
}
.furtherFaq a{
    padding: 5px 15px;
    background-color: #f43662;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    border: none;
}
.searchWrapper{
    background: white;
    margin: 10px 20px;
    padding: 5px;
    border-radius: 10px;
    padding: 7px 15px;
}
.searchWrapper input{
    border: none;
    color: #f43662;
    margin-left: 10px;
}
.searchWrapper input::placeholder{
    color: #f43662;
}
.searchWrapper i{
    color: #f43662;
}
.contactFormsDts{
    padding: 100px 50px 100px 0;
}
.googleMap{
    padding: 130px 0 100px 50px;
    display: flex;
    justify-content: end;
}
.googleMap iframe{
    border: 10px solid #f43662;
}
.contactFormsDts .title{
    color: black;
    font-size: 60px;
    font-weight: 600;
    margin-bottom: 20px;
}
.contactFormsDts .title span{
    color: #f43662;
}
.contactFormsDts .subTitle{
    font-size: 18px;
    color: black;
    margin-bottom: 20px;
}
.contactFormsDts .form-control{
    background-color: transparent;
    border: 1px solid #f43662;
    margin-bottom: 20px;
    border-radius: 0px;
    padding: 10px;
}
.contactFormsDts .form-control:focus{
    border-color: #f43662;
    box-shadow: none;
}
.contactFormsDts .form-control::placeholder{
    color: #f43662;
}
.contactSbBtn{
    background: #f43662;
    color: white;
    font-size: 17px;
    border-radius: 0;
    text-align: center;
    margin: 0;
    font-weight: 600;
    padding: 10px;
}
.contactSbBtn:hover{
    background: #f43662;
    color: white;
}
.row{
    margin: 0px;
}
.contactEnquery{
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 20px;
}
.contactEnquery .enquiry i{
    font-size: 25px;
}
.contactEnquery .enquiry h4{
    font-size: 15px;
    margin-bottom: 0px;
}
.contactEnquery .enquiry p{
    font-size: 13px;
    color: #f43662;
}
/* Custom scrollbar for the div */
.termText::-webkit-scrollbar {
    width: 5px; /* Width of the scrollbar */
}
.termText::-webkit-scrollbar-thumb {
    background: black; /* Color of the scroll thumb */
    border-radius: 100vw; /* Rounded corners */
}
.termText::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background of the scrollbar track */
    border-radius: 100vw;
}
.matchesTitle{
    font-size: 70px;
    color: white;
    font-weight: 400;
}
.matchesTitle span{
    font-weight: 700;
}
.matchcard{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.submitDtsCard .fields{
    display: flex;
    column-gap: 10px;
}
.userImageProfileTog{
    background-color: transparent;
    color: #f43662;
    border: 1px solid white;
    border-radius: 50% !important;
    padding: 1px;
    width: 45px;
    height: 45px;
    overflow: hidden;
}
.userImageProfileTog:hover{
    background-color: #f43662;
    color: white;
    border: 1px solid white;
}
.userImageProfileTog.show{
    background-color: #f43662;
    color: white;
    border: 1px solid white;
}
.headerSearch{
    display: flex;
    position: relative;
    align-items: center;
    flex: 1;
}
.headerSearch .form-control{
    padding: 10px;
    border-radius: 50px;
    border: none;
}
.headerSearch .form-control:focus{
    border: none;
    box-shadow: none;

}
.headerSearch i{
    position: absolute;
    right: 20px;
    color: #f43662;
}

/* Modern Header User Profile Dropdown */
.header-avatar-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(244, 54, 98, 0.25);
    overflow: hidden;
    background: #fff1f3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f43662;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.header-avatar-ring:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(244, 54, 98, 0.35);
}
.header-avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.header-avatar-ring img.is-avatar {
    object-fit: contain;
    background: #ffffff;
}

.userImageProfileDrop {
    margin-top: 12px !important;
    border-radius: 18px !important;
    border: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12) !important;
    min-width: 250px !important;
    padding: 8px !important;
}
.user-drop-header {
    padding: 12px 14px 10px;
    background: linear-gradient(135deg, #fff1f3 0%, #ffffff 100%);
    border-radius: 12px;
    margin-bottom: 6px;
    list-style: none;
}
.user-drop-name {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 140px;
}
.user-drop-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 6px 4px;
    list-style: none;
}
.userImageProfileDrop .dropdown-item {
    padding: 10px 14px !important;
    color: #334155 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}
.userImageProfileDrop .dropdown-item i {
    font-size: 0.95rem;
    color: #94a3b8;
    width: 18px;
    text-align: center;
    transition: color 0.15s ease;
}
.userImageProfileDrop .dropdown-item:hover {
    background: #fff1f3 !important;
    color: #f43662 !important;
}
.userImageProfileDrop .dropdown-item:hover i {
    color: #f43662 !important;
}
.userImageProfileDrop .dropdown-item.text-danger:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
.userImageProfileDrop .dropdown-item.text-danger:hover i {
    color: #dc2626 !important;
}
.dashDetailsDiv{
    display: flex;
    width: 100%;
}
.dashDetailsDiv .imageBox{
    width: 20%;
    background: white;
    box-shadow: 0px 4px 10px grey;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.dashDetailsDiv .imageBox .image{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f43662;
}
.dashDetailsDiv .imageBox .img{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}
.dashDetailsDiv .imageBox .icon{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 2px solid #f43662;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #f43662;
    margin-bottom: 20px;
}
.dashDetailsDiv .imageBox .UserName{
    color: #F43662;
    font-weight: 600;
    font-size: 30px;
    text-align: center;
}
.dashDetailsDiv .imageBox .userEmail{
    font-size: 12px;
}
.memplanDiv{
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.memPlan a{
    font-size: 24px;
    font-weight: 600;
    color: #f43662;
    text-decoration: none;
}
.memplanname{
    font-weight: 600;
}
.fa-crown {
    color: #f43662;
    font-size: 25px;
}
.detailsBox{
    width: 75%;
    padding: 0 0 0 30px;
}
.statsBox{
    width: 75%;
    padding: 20px 0;
}
.statsBoxDiv{
    background: #f43662;
    padding: 30px;
    border-radius: 10px;
}
.statsBoxDiv h5{
    color: white;
    margin-bottom: 20px;
}
.stats{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: white;
}
.statsInfos{
    width: 33%;
    text-align: center;
    padding: 5px;
    border: 1px solid #f43662 !important;
    flex-grow: 1;
    font-size: 12px;
    color: #f43662;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.statsInfos a{
    color: #f43662 !important;
    text-decoration: none;
    width: 100%;
}
.statsInfos:hover{
    color: #f43662 !important;
}
.statsInfos h2{
    color: black;
    margin-bottom: 0;
}
.statsInfos.active{
    background-color: #f43662 !important;
    color: white !important;
    border: 1px solid white !important;
}

.nav-tabs.stats .nav-link{
    border-radius: 0px !important;
}
.statsInfos.active h2{
    color: white;
}
.findBox .adSection{
    padding: 30px 60px 30px;
    justify-content: space-between;
}
.findBox .adSection .title {
    font-size: 40px;
    margin-bottom: 0px;
}
.findBox .adSection .joinBtn {
    margin-top: 20px;
}
.findBox .adSection .img{
    width: 20%;
}
.recentVisitor{
    margin: 100px 0;
}
.recentVisitor h1{
    color: #f43662;
}
.matchScrooler .Testimonialcarousel .Testimonialcard .img{
    transform: translate(0) rotate(0deg);
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #FEF8F7;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}
.matchScrooler .Testimonialcarousel .Testimonialcard .img img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    transform: rotate(0deg);
    position: relative;
    border: 2px solid #f43662;
}
.matchScrooler .Testimonialcarousel .Testimonialcard .img h2{
    color: #f43662;
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 0;
}
.matchScrooler .testimonial-item{
    padding: 0;
    max-width: 100%;
    border-radius: 0px;
    border: 1px solid #f43662;
}
.matchScrooler .mainTestiText{
    margin-top: 0;
    background-color: #f43662;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
}
.matchScrooler .mainTestiText p{
    text-align: center;
    color: white;
}
.matchScrooler .mainTestiText a{
    background: white;
    padding: 5px 40px;
    font-size: 18px;
    text-align: center;
    border-radius: 10px;
    color: #f43662;
}
.matchScrooler .Testimonialcarousel .TestimonialcardInner{
    width: 100%;
    margin-top: 0;
}
.matchScrooler .Testimonialcarousel .Testimonialcard::before{
    display: none;
}
.matchScrooler .Testimonialcarousel .Testimonialcard::after{
    display: none;
}
.matchScrooler .Testimonialwrapper .Testimonialcarousel{
    grid-auto-columns: calc((100% / 4));
    width: 100% !important;
    max-width: 100% !important;
}
.matchScrooler .Testimonialwrapper{
    max-width: 100% !important;
}
.matchScrooler .Testimonialwrapper i:first-child{
    left: unset;
    right: 62px;
    bottom: -52px;
}
.matchScrooler .Testimonialwrapper i{
    top: unset;
}
.matchScrooler .Testimonialwrapper .disable{
    color: #f4366238 !important;
}
/* ─── Modern Live Support Widget & Footer Contact Visibility ─── */
.nj-contact-label {
    display: block;
    color: #f43662 !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 2px !important;
}

.nj-contact-value {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.nj-contact-value:hover {
    color: #f43662 !important;
}

.nj-contact-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(244, 54, 98, 0.15);
    border: 1px solid rgba(244, 54, 98, 0.3);
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.live-support {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1050;
}

.live-support-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f43662 0%, #e11d48 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(244, 54, 98, 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.live-support-icon i {
    color: #ffffff !important;
}

.live-support-icon:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 12px 30px rgba(244, 54, 98, 0.6);
}

.live-support-box {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1051;
}

.live-support-box.active {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.chat-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(244, 54, 98, 0.2);
}

.chat-agent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(244, 54, 98, 0.2);
    border: 1px solid rgba(244, 54, 98, 0.4);
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.chat-online-status {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
}

.chat-header .close-chat {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-header .close-chat:hover {
    background: #f43662;
    color: #ffffff;
}

.chat-body {
    padding: 22px 20px;
    max-height: 480px;
    overflow-y: auto;
    background: #f8fafc;
}

.chat-welcome-msg {
    color: #475569 !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.chat-field-group {
    position: relative;
    margin-bottom: 12px;
}

.chat-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nj-primary);
    font-size: 0.95rem;
    pointer-events: none;
}

.chat-body .form-control {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 11px 14px 11px 40px !important;
    font-size: 0.92rem !important;
    color: #0f172a !important;
    box-shadow: none !important;
    height: auto !important;
    transition: all 0.25s ease;
}

.chat-body .form-control:focus {
    border-color: #f43662 !important;
    box-shadow: 0 0 0 3px rgba(244, 54, 98, 0.15) !important;
}

.chat-body .form-control::placeholder {
    color: #94a3b8 !important;
    font-size: 0.88rem !important;
}

.chat-body textarea.form-control {
    padding-top: 10px !important;
    min-height: 80px;
    resize: none;
}

.chat-btn-send {
    background: linear-gradient(135deg, #f43662 0%, #e11d48 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(244, 54, 98, 0.35) !important;
    transition: all 0.25s ease;
    margin-top: 6px;
}

.chat-btn-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(244, 54, 98, 0.5) !important;
    color: #ffffff !important;
}

.live-support-icon-box {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 16px;
    bottom: 80px;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 280px;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(244, 54, 98, 0.2);
    animation: bounceIn 0.5s ease;
}

.live-support-icon-box i {
    font-size: 28px;
    color: #f43662;
    flex-shrink: 0;
}

.live-support-icon-box h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px 0;
}

.live-support-icon-box p {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.3;
}

.closethebox {
    position: absolute;
    bottom: 155px;
    right: 0;
    color: #94a3b8;
    background: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
}
.pasasRecevory{
    background: #f43662;
    width: 50%;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 10px white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.pasasRecevory .form-group{
    padding: 10px;
    border: 1px solid #f43662;
    border-radius: 20px;
    width: 100%;
}
.pasasRecevory .form-group label{
    color: white;
}
.pasasRecevory .form-group .form-control{
    width: 100%;
}
.pasasRecevory .form-group .form-control:focus{
    border-color: #f43662;
    box-shadow: none;
}
.pasasRecevory .submiti{
    padding: 10px 25px;
    color: #f43662;
    background: white;
    border: none;
    margin-top: 20px;
}
.dashbutn3free{
    color: #f43662;
    font-weight: 700;
}
.profileDetailsDiv {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 0 50px;
    align-items: start;
}
.profileDetailsDiv .menus {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 20px;
    width: 100%;
}
.profileDetailsDiv .menus .pro-menu {
    width: 100%;
    padding: 12px 18px;
    color: #475569;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}
.profileDetailsDiv .menus .pro-menu:hover {
    color: #f43662;
    background: #fff1f3;
    border-color: #fecdd3;
    transform: translateX(3px);
}
.profileDetailsDiv .menus .pro-menu.active {
    color: #ffffff;
    background: linear-gradient(135deg, #f43662 0%, #e02450 100%);
    box-shadow: 0 4px 15px rgba(244, 54, 98, 0.3);
    font-weight: 700;
}
.profileDetailsDiv .detailsBox {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profileDetailsDiv .detailsBox .statsBox{
    padding-top: 0px;
}
.profileDetailsDiv .statsBoxDiv {
    background: linear-gradient(135deg, #f43662 0%, #e02450 100%);
    border-radius: 22px;
    padding: 26px 30px;
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(244, 54, 98, 0.24);
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.profileDetailsDiv .statsBoxDiv .image {
    width: auto;
    flex-shrink: 0;
}
.profileDetailsDiv .statsBoxDiv .imageDrop {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.profileDetailsDiv .statsBoxDiv .imageDrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profileDetailsDiv .statsBoxDiv .profilestats {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    row-gap: 10px;
}
.profile-gallery-uploader-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.profile-gallery-uploader-grid .image-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
}
.profile-gallery-uploader-grid .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-gallery-uploader-grid .image-wrapper .remove-image {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    border-radius: 50%;
}
.profile-gallery-uploader-grid .image-label {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    border: 2px dashed #f43662;
    background: #fff1f3;
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.profile-gallery-uploader-grid .image-label:hover {
    background: #fecdd3;
}
.profileDetailsDiv .profile-title{
    color: #f43662;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0 ;
}
.profile-allImages img{
    width: 70px;
    height: 70px;
    border-radius: 5px;
    object-fit: cover;
}
.profile-lookingfor .lookingp{
    background-color: #EFF5FF;
    padding: 3px 10px;
    border-radius: 10px;
    color: black;
}
.profile-personal p{
    font-weight: 600;
    font-size: 22px;
}
.profile-personal span{
    font-weight: 600;
    margin-top: 15px;
}
.edit-infos{
    color: #f43662;
    font-size: 18px;
    cursor: pointer;
}
.edit-infos.active{
    background-color: #f43662;
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
}
.profilecancelbtnn2{
    background-color: #f43662;
    color: white;
    border-radius: 10px;
    padding: 5px 15px;
    margin-right: 75px;
    border: none;
}
.profilecancelbtnn{
    background-color: #f4366238;
    color: black;
    padding: 5px 15px;
    border-radius: 10px;
    border: none;
}
.profile-personal hr{
    height: 3px;
    background-color: #f43662;
    border-color: #f43662;
    opacity: 1;
}
.modal.profileedit.show .modal-dialog{
    height: 100%;
    display: flex;
    align-items: center;
}
.edit-icon{
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
}
.edit-icon.active{
    color: #f43662;
    background-color: white;
    padding: 10px;
    border-radius: 50%;
}
.profileedit .modal-content{
    background-color: #f43662;
    border-radius: 10px;
    color: white;
}
.profileedit .closeprofilepop{
    right: 0;
    top: 0;
    background-color:  white;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    color:#f43662;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.profileedit .profileinfosub{
    background-color: white;
    color: #f43662;
    border: none;
    border-radius: 10px;
    padding: 10px;
}
.profileedit .form-control{
    background-color: transparent;
    color: white;
    border-radius: 10px;
}
.profileedit .form-control::placeholder{
    color: white !important;
}
.profileedit select option {
    background-color: #fff; /* Option background color */
    color: #f43662; /* Option text color */
}
.profileedit select option:hover {
    background-color: #f43662 !important; /* Background color when hovering */
    color: white; /* Text color when hovering */
}
.messenger-messagingView{
    height: calc(100vh - 86px) !important;
}
.UploadnewImageLabel{
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #f5f5f54a;
    padding: 10px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    color: white;
    cursor: pointer;
}
.UploadnewImageLabel2{
    position: absolute;
    top: 5px;
    right: 5px;
    background: #f5f5f54a;
    padding: 10px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    color: white;
    border: none;
    cursor: pointer;
}
.dpimgsave{
    color: #f43662;
    background: white;
    position: absolute;
    border: 0;
    bottom: 5px;
    left: 33%;
    padding: 5px 15px;
    border-radius: 10px;
}
.savedImagePreicon{
    font-size: 70px;
    color: white;
    border: 2px solid;
    padding: 50px;
}
.profile-allImages .image-wrapper{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    position: relative;
}
.profile-allImages .image-wrapper button{
    display: block;
    width: fit-content;
    position: absolute;
    bottom: 0;
    left: 0;
}
.profile-allImages .image-label i{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    width: 70px;
    background: #f4366294;
    border-radius: 10px;
    color: white;
    font-size: 21px;
    cursor: pointer;
}
.matchradiosdiv .matchradios{
    padding: 3px 10px;
    border: 1px solid white;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 17px;
    padding: 5px 30px;
}
.matchradiosdiv input[type="radio"]:checked + .matchradios , .matchradiosdiv input[type="checkbox"]:checked + .matchradios{
    background: white;
    border-color: hotpink;
    color: #f43662;
}
.profilecancelbtnn3{
    background-color: white;
    color: #f43662;
    border: none;
    padding: 7px 20px;
    border-radius: 10px;
}
.form-control.editing,
.form-control.editing:focus,
.form-control.editing:active {
    border-color: #f43662 !important;
}
.profilenotcomplete{
    width: 100%;
    position: absolute;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f43662;
    background: rgba(255, 255, 255, 0.247);
    backdrop-filter: blur(5px);
}
.profilenotcomplete a{
    font-weight: 900;
    color: #f43662 !important;
    text-decoration: none;
    padding: 10px 25px;
    background-color: white;
    color: white;
    box-shadow: 0 0 10px #f43662;
    border-radius: 20px;
}
.profileview .image .img{
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.profileview .dashDetailsDiv{
    padding: 50px 0;
    align-items: flex-start;
}
.profileview .imageBox{
    width: 30%;
    border-bottom: none;
}
.profileview .image-gallery{
    display: flex;
    overflow: hidden;
    width: 100%;
    align-items: center;
    column-gap: 10px;
}
.profileview .image-gallery .image-wrapper{
    width: 20%;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}
.profileview .image-gallery .image-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.profileview .swiper-horizontal{
    width: 100%;
    overflow: hidden;
}
.profileview .swiper-horizontal .swiper-slide{
    width: 100% !important;
    height: auto;
    overflow: hidden;
}
.profileview .swiper-horizontal .swiper-slide img{
    width: 100% !important;
    height: 100% !important; 
    object-fit: cover;
    border-radius: 0px;
}
.statsBox1{
    background-color: #f43662;
    color: white;
    padding: 30px;
    border-radius: 20px;
}
.request-box{
    margin: 0 20px ;
    border: 1px solid #f43662;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.requestsendbtn{
    padding: 10px 30px;
    color: white;
    background-color: #f43662;
    border-radius: 10px;
    text-align: center;
}
.profileview .detailsBox{
    display: flex;
}
.profileview .swiper-button-next, .profileview .swiper-button-prev{
    color: #f43662;
    font-size: 20px;
}
.detailsBox .infos{
    border-top: 2px solid #f43662;
    border-radius: 0px;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    column-gap: 50px;
    row-gap: 20px;
}
.detailsBox .infos h3{
    color: #f43662;
    font-weight: 700;
}
.detailsBox .infos h5{
    color: #f43662;
    width: fit-content;
    padding: 0 20px 10px 0;
    border-bottom: 1px solid #f43662;
}
.lookingp1{
    background-color: #EFF5FF;
    padding: 3px 10px;
    border-radius: 10px;
    color: black;
}
.prefrenceimg{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid #f43662;
    object-fit: cover;
}
.lookingp2 .lookingp{
    padding-bottom: 15px;
    border-bottom: 1px solid #f43662;
    padding-top: 15px;
    color: #f43662;
    width: 100%;
}
.lookingp2 .lookingp span{
    margin-top: 20px;
    color: black;
}
.lookingp3 .lookingp{
    height: 79px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #f43662;
    padding-top: 15px;
    color: #f43662;
    width: 100%;
}
.detailsBox1{
    width: 80%;
    padding: 0 0 0 30px;
}
.statsBox2 {
    width: 100%;
    padding: 0 0 20px 0; 
    margin-bottom: 20px;
}
.requestsdivs{
    display: flex;
    width: 100%;
    background-color: white;
    padding: 10px 20px;
    border-radius: 10px;
    column-gap: 20px;
    margin-bottom: 20px;
    align-items: center;
}
.requestsdivs .img{
    width: 25%;
    display: flex;
    justify-content: center;
}
.requestsdivs img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: fill;
}
.requestsdivs .requestsjme{
    width: 25%;
    color: #f43662;
}
.requestsdivs .requestbtn{
    padding: 7px 20px;
    margin-right: 20px;
    background-color: #f43662;
    border: 2px solid #f43662;
    color: white;
}
.requestsdivs .requestbtn1{
    padding: 7px 20px;
    margin-right: 20px;
    background-color: transparent;
    border: 2px solid #f43662;
    color: #f43662;
}
a{
    cursor: pointer;
}
.recentVisitor1{
    padding: 50px 0;
}
.recentVisitor1 h1{
    color: #f43662;
}
.recentVisitor1 .Testimonialwrapper .Testimonialcarousel{
    padding-left: 0px !important;
    margin-top: 30px;
    gap: 20px !important;
}
.recentVisitor1 .Testimonialcarousel .Testimonialcard{
    padding: 0 !important;
}
.recentVisitor1.matchScrooler .Testimonialcarousel .TestimonialcardInner{
    padding: 0px !important;
}
.message-unseen-count{
    padding: 3px 6px;
    background: #f43662;
    border-radius: 50%;
    font-size: 10px;
    color: white;
}
.m-header svg, .saved-messages.avatar > svg, .lastMessageIndicator, .messenger-sendCard .send-button svg, .messenger-infoView nav a{
    color: #f43662 !important;
}
.m-list-active, .m-list-active:hover, .m-list-active:focus, .message-card.mc-sender .message , .messenger-list-item td b{
    background: #f43662 !important;
}
.messenger-favorites div.avatar {
    box-shadow: 0px 0px 0px 2px #f43662 !important;
}
.matriloadingscreen{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999999999999999999999 !important;
}
.matriloadingscreendiv{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    /* background-color: white; */
    backdrop-filter: blur(5px);
    z-index: 999999999999999999999 !important;
}
.matriloadingscreendiv .spinner-border{
    color: #f43662 !important;
}
#profileModal .modal-content{
    background: #f43662;
    border: 20px;
}
#profileModal .modal-body{
    padding: 30px;
}
#profileModal .modal-title{
    text-align: center;
    color: white;
    font-size: 30px;
}
#profileModal .btn-close{
    position: absolute;
    top: 40px;
    right: 40px;
    color: white;
    z-index: 99;
    --bs-btn-close-bg: unset !important;
}
#profileModal .card-img-top{
    height: 160px;
    object-fit: cover;
}
#profileModal .card{
    background: transparent;
}
.card-title{
    color: white;
    font-size: 18px;
}
#profileModal .card-text{
    color: white;
    font-size: 14px;
}
#profileModal a{
    padding: 6px 15px;
    color: #f43662;
    background: white;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 13px;
}
.Testimonialwrapper.reviews{
    padding: 50px 0;
}
.Testimonialwrapper.reviews  .Testimonialcarousel{
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
}
.rhombus2 {
    margin: 40px 0 0 60px;
    /*background: #fcfcfc;*/
    margin: auto;
    margin-top: 100px;
    border-radius: 10px;
    height: 75px;
    width: 75px;
    margin-bottom: 10px;
    float: center;
    animation-delay: 0.9s;
    animation-duration: 0.8s;
    animation-name: pump;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.26,-0.53,.57,2.32);
}

.rhombus2:before {
    content: "";
    position: absolute;
    background: #f43662;
    height: 40px;
    width: 40px;
    z-index: 0;
    margin-top: 15px;
    margin-left: 15px;
    transform: rotate(45deg);
}

.rhombus2 .circle21 {
    content: "";
    position: absolute;
    background: #f43662;
    height: 40px;
    width: 40px;
    z-index: 1;
    border-radius: 50%;
    /*animation-direction: alternate;*/
}

.rhombus2 .circle22 {
    content: "";
    position: absolute;
    background: #f43662;
    height: 40px;
    width: 40px;
    z-index: 1;
    margin-left: 30px;
    border-radius: 50%;
    /*animation-direction: alternate;*/
}

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








@media (max-width: 767px){
    .headerMain .logo .icon{
        display: none !important;
    }
    .headerMain .logo .logopic{
        max-height: 38px;
        max-width: 140px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .header-logo-col{
        flex: 0 0 auto;
        max-width: 45%;
    }
    .mobile-header-actions{
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .mobile-header-actions .menu{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .homeMain-heading{
        font-size: 50px;
    }
    .homeMain-heading span{
        font-size: 60px;
    }
    .homebg{
        padding: 50px 20px;
    }
    .popupModal{
        padding-top: 60%;
    }
    .passwordPopup .card{
        width: 100%;
    }
      .mobile-navbar{
        padding: 30px 12px 0 0px;
        border-right: 1px solid rgb(0 0 0 / 18%);
        width: 40%;
        height: 100vh;
        position: absolute;
        background: white;
        z-index: 99999999;
        left: -55%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.4s ease-in;
      }
      .mobile-navbar.active {
        display: block;
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: all 0.4s ease-out;
      }
      .mobile-navbar .nav-link{
        border-width: 1px;
        font-size: 14px;
        padding: 5px;
        margin-bottom: 8px;
      }
      .notSignupHead .homeMObileMenu,
      .homeMObileMenu {
        position: absolute;
        width: 100%;
        left: 0;
        top: 100%;
        padding: 0 16px;
        background-color: #ffffff;
        z-index: 1050;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(244, 54, 98, 0.08);
        border-top: 1px solid #f1f5f9;
        max-height: 0;
        height: auto;
        font-size: 15px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.3s ease, visibility 0.3s;
      }
      .notSignupHead .homeMObileMenu .menu_item,
      .homeMObileMenu .menu_item {
        width: 100%;
        padding: 10px 14px !important;
        border: none !important;
        border-radius: 10px;
        color: #334155;
        font-weight: 600;
        font-size: 0.92rem;
        display: flex;
        align-items: center;
        text-decoration: none;
        transition: all 0.2s ease;
      }
      .notSignupHead .homeMObileMenu .menu_item:hover,
      .homeMObileMenu .menu_item:hover {
        background-color: #fff1f2;
        color: #f43662;
      }
      .notSignupHead .homeMObileMenu .menu_item.active,
      .homeMObileMenu .menu_item.active {
        background-color: #f43662 !important;
        color: #ffffff !important;
        font-weight: 700;
      }
      .notSignupHead .homeMObileMenu.show,
      .homeMObileMenu.show {
        max-height: 450px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding: 12px 16px 16px 16px;
        overflow-y: auto;
      }
      .profileGrid {
        grid-template-columns: 1fr; /* 1 item per row on mobile */
    }
    .editingYourProfile .form-container{
        margin: 0 0 10px 0;
    }
    .priceMobileTab{
        flex-direction: column;
    }
    .priceMobileTab .nav-pills{
        width: 100% !important;
    }
    .priceMobileBtnDiv{
        display: flex;
        align-items: center;
        column-gap: 10px;
        justify-content: center;
        flex-direction: row-reverse;
    }
    .priceMobileTab .tab-content{
        width: 100% !important;
    }
    .mobilePriceTabCard{
        flex-direction: column;
        row-gap: 20px;
        padding: 0 !important;
    }
    .bg-price{
        padding: 3rem 10px !important;
    }
    .faq-bg, .contact-bg {
        padding: 40px 10px;
    }
    .faqTitle {
        font-size: 60px;
        font-weight: 900;
    }
    .faqBottomDiv{
        padding: 50px 20px;
    }
    .contactTitle{
        font-size: 65px;
    }
    .contactSubTitle{
        margin-bottom: 10px;
    }
    .contact-bg .contactInfo {
        padding: 30px;
    }
    .Pc-Menus{
        display: none !important;
    }
    .mobile-header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .mobile-header-actions .menu {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-login-btn,
    .loginBtn {
        font-size: 0.82rem;
        font-weight: 600;
        color: #f43662;
        border: 1.5px solid #f43662;
        background: #ffffff;
        border-radius: 20px;
        padding: 5px 12px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        white-space: nowrap;
        transition: all 0.2s ease;
    }
    .mobile-login-btn:hover,
    .loginBtn:hover {
        background: #fff1f2;
        color: #e11d48;
        border-color: #e11d48;
    }
    .mobile-register-btn,
    .registerbtn {
        font-size: 0.82rem;
        font-weight: 600;
        color: #ffffff !important;
        background: linear-gradient(135deg, #f43662 0%, #e11d48 100%);
        border: 1.5px solid transparent;
        border-radius: 20px;
        padding: 5px 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(244, 54, 98, 0.35);
        transition: all 0.2s ease;
    }
    .mobile-register-btn:hover,
    .registerbtn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(244, 54, 98, 0.45);
        color: #ffffff !important;
    }
    .mobileNavtoggle {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1.5px solid #f43662;
        background: #fff1f2;
        color: #f43662;
        border-radius: 10px;
        cursor: pointer;
        font-size: 1.15rem;
        transition: all 0.2s ease;
        padding: 0;
        margin: 0;
        flex-shrink: 0;
        z-index: 10;
    }
    .mobileNavtoggle i {
        display: inline-block;
        font-size: 1.15rem;
        color: #f43662;
    }
    .mobileNavtoggle:hover,
    .mobileNavtoggle:active {
        background-color: #f43662;
        border-color: #f43662;
        color: #ffffff;
    }
    .mobileNavtoggle:hover i,
    .mobileNavtoggle:active i {
        color: #ffffff;
    }
    .mobile-icon-badge-btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 10px;
        background: #fff1f2;
        color: #f43662;
        border: 1px solid rgba(244, 54, 98, 0.2);
        font-size: 1rem;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .mobile-icon-badge-btn:hover {
        background: #f43662;
        color: #ffffff;
    }
    .mobile-icon-badge-btn .mobile-msg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #f43662;
        color: #ffffff;
        font-size: 0.65rem;
        font-weight: 700;
        border-radius: 10px;
        padding: 1px 5px;
        border: 1.5px solid #ffffff;
    }
    .header-logo-col {
        flex-shrink: 0;
    }
    .headerMain .logo img.logopic {
        max-height: 40px;
        width: auto;
    }
    .main{
        overflow: hidden;
    }
    .foterWidgets{
        flex-direction: column;
        row-gap: 40px;
        padding-left: 20px;
    }
    .foterWidgets .innerDiv {
        width: 100%;
    }
    .foterWidgets2{
        flex-direction: column;
        row-gap: 30px;
    }
    .foterWidgets2 .footerMenu{
        font-size: 12px !important;
    }
    .mobileWidth{
        width: 100% !important;
   }
   .sectionreverse{
        flex-direction: column-reverse;
   }
   .dashbedBorders{
        width: 100%;
        border-right: none;
        border-top: 10px solid #f43662;
        padding-top: 65px;
        padding-right: 0px;
   }
   .stepsTexts{
        width: 100%;
        justify-content: center;
        padding-left: 0px;
        padding-top: 30px;
   }
   .stepsTexts h2 {
        font-size: 45px;
        text-align: center;
    }
    .messenger{
        position: relative;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 98px) !important;
    }
    .messenger-listView{
        position: absolute !important;
    }
    .messenger-messagingView {
        position: absolute !important;
    }
    .messenger-infoView {
        position: absolute !important;
    }
    .bgSectionColor .mainHeading{
        font-size: 45px;
    }
    .searchBy{
        align-items: flex-start;
    }
    .searchBy .searchTitle{
        font-size: 16px;
    }
    .searchBy .searchOptions{
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 10px;
        margin-left: 10px;
    }
    .searchBy .searchOptions  a{
        font-size: 13px;
        padding: 7px 15px;
    }
    .searchBy .searchTitle h1{
        font-size: 18px;
    }
    .bgBrands{
        background-size: 20%;
        padding: 75px 20px 50px;

    }
    .bgBrands .subTitle{
        font-size: 36px;
    }
    .imageBrands{
        width: 50%;
    }
    .Testimonialwrapper .Testimonialcarousel{
        grid-auto-columns: calc((100% / 1));
        margin: 0;
        padding: 0;
    }
    .Testimonialwrapper i:first-child {
        left: 14px;
    }
    .bgBrands2{
        background-size: 18%;
    }
    .pointerImage {
        width: 380px;
        position: absolute;
        top: -165px;
    }
    .trustedOne{
    font-size: 21px;
    }
    .trustedTitle{
        font-size: 45px;

    }
    .trustedSubTitle{
        font-size: 16px;
    }
    .trustOptions{
        column-gap: 10px;
        margin-top: -135px;
    }
    .trustOptionsDiv{
        padding: 25px 10px;
    }
    .trustOptionsDiv{
        padding: 0px ;
    }
    .trustOptionsDiv div{
        padding: 5px;
    }
    .trustOptionsDiv img {
        width: 55px;
        margin-bottom: 5px;
    }
    .trustOptionsDiv h2{
        font-size: 18px;
    }
    .trustOptionsDiv p{
        font-size: 12px;
    }
    .trustOptionsDiv div div{
        height: 80px !important;
    }
    .trustOptionsDiv .ring-1 {
        width: 40px;
    }
    .trustOptionsDiv .ring-2 {
        width: 38px;
        position: absolute;
        top: 30px;
        left: -10px;
    }
    .siteContact {
        padding: 65px 0;
        flex-direction: column;
    }
    .siteContact .w-50 {
        width: 100% !important;
    }
    .contactImg1{
        top: -20px;
    }
    .contactImg4{
        right: 20px;
    }
    .contactDetails {
        padding: 50px 10px 0px;
    }
    .contactDetails .title{
        font-size: 45px;
    }
    .contactDetails .subTitle{
        font-size: 26px;
    }
    .mobile-enquier-div{
        flex-direction: column;
        row-gap: 20px;
    }
    .adSection{
        padding: 25px 10px 25px 10px;
        margin-top: 0px;
    }
    .adSection .title{
        font-size: 30px;
        margin-bottom: 10px;
    }
    .adSection .joinBtn{
        padding: 7px 15px;
        margin-top: 5px;
    }
    .adSection .img {
        width: 35%;
    }
    .stepTitle{
        font-size: 25px;
    }
    .stepSubTitle{
        font-size: 17px;
    }
    .step-two .stepSubTitle{
        text-align: end;
    }
    .step-one img , .step-two img{
        width: 100%;
    }
    .aboutTexts {
        margin-top: 20px !important;
        flex-direction: column-reverse;
    }
    .aboutTexts:last-child{
        flex-direction: column;
    }
    .aboutTexts .paddingLefts{
        padding-bottom: 30px;
        padding-left: 0;
    }
    .sideImagebg{
        height: 300px;
        padding: 20px;
    }
    .aboutTexts .paRight{
        padding-right: 10px;
    }
    .aboutTexts h1{
        font-size: 45px;
    }
    .aboutTexts h3{
        font-size: 33px;
    }
    .aboutTexts .col-md-12 .paddingLefts{
        width: 100% !important;
        flex-direction: column;
        margin-top: 5px !important;
    }
    .aboutTexts .col-md-12 .paddingLefts .w-50{
        width: 100% !important;
    }
    .aboutTexts:last-child .paddingLefts{
        padding-top: 50px;
    }
    .aboutImages .aboutImg4{
        right: 12px;
        bottom: -10px;
    }
    .bg-price .mainHeading{
        font-size: 30px;
        margin-bottom: 10px;
    }
    .mobile-price-head{
        flex-direction: column;
        align-items: flex-start !important;
    }
    .pricePlanCards{
        width: 100%;
        border-bottom: 3px solid white;
        margin-top: 0px !important;
    }
    .pricePlanCards:hover{
        margin-top: 0 !important;
    }
    .faqTexts {
        padding: 50px 10px 100px;
        row-gap: 20px;
    }
    .contactFormsDts {
        padding: 40px 10px 10px 0;
    }
    .contactEnquery{
        flex-direction: column;
        margin-top: 40px;
        row-gap: 15px;
    }
    .contactEnquery .w-50{
        width: 100% !important;
    }
    .googleMap{
        padding: 40px 0px 50px;
    }
    .googleMap iframe{
        width: 100% !important;
        height: 250px !important;
    }
    .contactFormsDts .title{
        font-size: 45px;
    }
    .contactFormsDts .subTitle{
        font-size: 15px;
    }
    .Registration_Modal .modal-dialog{
        max-width: 100%;
    }
    .Registration_Modal .modal-dialog .row{
        flex-direction: column;
        row-gap: 10px;
    }
    .Registration_Modal .modal-dialog .row .w-50{
        width: 100% !important;
    }
    .LoginPage .leftImage{
        display: none !important;
    }
    .LoginPage .Loginhomebg{
        margin-left: 0 !important;
        width: 100% !important;
    }
    .signInForm{
        padding: 30px 10px;
    }
    .signInForm .title{
        font-size: 45px;
        margin-top: 20px;
    }
    .signInForm .login-form{
        padding: 10px !important;
    }
    .Testimonialwrapper.reviews .Testimonialcarousel{
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .userImageProfileTog img{
        height: 100%;
        object-fit: cover;
    }
    .userImageProfileTog.show{
        top: 0px !important;
        height: 45px !important;
    }
    .loginBtn i{
        font-size: 35px;
    }
    .mobile-msg{
        position: absolute;
        top: -10px;
        right: -5px;
        border: 1px solid white;
    }
    .dashDetailsDiv{
        flex-direction: column;
    }
    .dashDetailsDiv .imageBox{
        width: 100%;
        
    }
    .dashDetailsDiv .imageBox .image{
        flex-direction: row;
    }
    .dashDetailsDiv .imageBox .img{
        width: 120px;
        height: 120px;
        margin-bottom: 0;
        margin-right: 10px;
    }
    .dashDetailsDiv .imageBox .UserName{
        font-size: 25px;
    }
    .detailsBox{
        width: 100%;
        padding: 0;
    }
    .statsBox, .findBox {
        width: 100% !important;
    }
    .findBox .adSection {
        padding: 20px;
    }
    .findBox .adSection .title{
        font-size: 25px;
    }
    .findBox .adSection .joinBtn {
        margin-top: 10px;
        font-size: 15px;
        padding: 5px;
    }
    .findBox .adSection .img {
        width: 40%;
    }
    .recentVisitor{
        margin: 50px 0;
    }
    .matchScrooler .Testimonialwrapper .Testimonialcarousel {
        grid-auto-columns: calc((100% / 1));
    }
    .Testimonialwrapper i:last-child{
        bottom:-51px;
    }
    .detailsBox1{
        width: 100%;
        padding: 40px 0;
    }
    .statsBox2{
        margin-bottom: 0px;
    }
    .requestsdivs{
        padding: 10px;
        border-radius: 10px;
        column-gap: 10px;
        overflow-x: auto;
    }
    .findBox .adSection .img{
        width: 20%;
    }
    .requestsdivs img{
        width: 50px;
        height: 50px;
    }
    .requestsdivs .requestsjme{
        width: 20%;
    }
    .requestsdivs .requestsjme h4{
        font-size: 15px;
    }   
    .requestsdivs .w-50{
        width: 60% !important;
        display: flex;
    }
    .requestsdivs .requestbtn , .requestsdivs .requestbtn1{
        display: block;
        padding: 4px 8px;
    }
    .profileDetailsDiv {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px 0 30px !important;
        width: 100% !important;
    }
    .profileDetailsDiv .menus {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        width: 100% !important;
        position: static !important;
        border-radius: 14px !important;
        -webkit-overflow-scrolling: touch;
    }
    .profileDetailsDiv .menus .pro-menu {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 7px 14px !important;
        font-size: 0.84rem !important;
        border-radius: 20px !important;
    }
    .profileDetailsDiv .detailsBox {
        width: 100% !important;
    }
    .profileDetailsDiv .statsBoxDiv {
        flex-direction: column !important;
        padding: 20px 16px !important;
        text-align: center;
    }
    .profileDetailsDiv .statsBoxDiv .image {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }
    .profileDetailsDiv .statsBoxDiv .w-70{
        width: 100% !important;
    }
    .profileDetailsDiv .statsBoxDiv .profilestats{
         padding: 0px;
         row-gap: 0px;
    }
    .profiles-biopic div:first-child,.profiles-biopic div:last-child{
        width: 50% !important;
    }
    .imageDrop{
        width: 100%;
        height: 230px;
    }
    .profileDetailsDiv .statsBoxDiv .image img{
        width: 100%;
        height: 230px;
    }
    .profile-allImages .image-label i{
        margin-top: 10px;
    }
    .profilecancelbtnn2 {
        float: left !important;
    }
    .profile-lookingfor .profile-title .toggle-contact-visibility{
        margin-right: 0px !important;
        margin-left: 0 !important;
    }
    .edit-infos{
        font-size: 14px;
    }
    .edit-infos.active {
        padding: 5px 12px;
        font-size: 12px;
        margin-right: 0px !important;
    }
    .profile-personal .w-30{
        width: 47% !important;
    }
    .profiles-mathc-form-div .col-5{
        width: 47% !important;
    }
    .profiles-mathc-form-div .w-30{
        width: 47% !important;
    }
    .profilecancelbtnn3{
        float: left !important;
        margin-top: 20px !important;
    }
    .profiles-pass-form-div .form-container{
        padding-left: 0px !important;
        margin-left: 0px !important;
    }
    .profiles-pass-form-div .profilecancelbtnn3{
        width: 40% !important;
    }
    .profileview .detailsBox .w-75{
        width: 100% !important;
        margin-top: 20px;
    }
    .profileview .detailsBox .w-25{
        width: 100% !important;
    }
    .mobile-infos-resize{
        flex-wrap: wrap;
    }
    .mobile-infos-resize .w-33{
        width: 100% !important;
        row-gap: 15px !important;
        margin-bottom: 15px;
    }
    .matches-prop-div{

    }
    .matches-prop-img{
        margin-top: 0px !important;
    }
    .matches-prop-infos{
        margin-top: 0px !important;
    }
    .profileview .detailsBox  .matches-prop-img .w-25{
        width: 25% !important;
    }
    .profileview .detailsBox  .matches-prop-img .w-25 img{
        width: 55px;
        height: 55px;
    }
    .profileview .detailsBox  .matches-prop-img .w-25 p{
        text-align: center;
        font-size: 10px;
    }
    .profileview .detailsBox  .matches-prop-img .w-50 p{
        font-size: 9px;
    }
    .profileview .detailsBox  .matches-prop-img .w-25 .lookingp1{
        font-size: 10px;
        padding: 3px 5px;
    }
    .profileview .detailsBox .matches-prop-infos .w-25{
        width: 25% !important;
    }
    .profileview .detailsBox .matches-prop-infos .w-75{
        width: 75% !important;
        margin-top: 0px !important;
    }
    .profileview .detailsBox .matches-prop-infos .w-75 .lookingp2.px-3{
        padding-left: 0px !important;
    }
    .mobile-filter .col-4{
        width: 100% !important;
    }
    .statsBoxDiv.mobile-filter{
        padding: 30px 10px !important;
    }

}

/* ===================================================
   ENHANCED 2-COLUMN LUXURY & MOBILE-RESPONSIVE PROFILE VIEW
   =================================================== */
.profileview {
    padding: 24px 15px 60px;
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
}

/* Floating Plan / Quota Bar */
.profile-status-bar {
    background: #ffffff;
    border: 1px solid #e0f2fe;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 188, 212, 0.08);
    padding: 12px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}
.profile-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0369a1;
}

/* 2-Column Dashboard Grid */
.profile-dashboard-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
    width: 100%;
}

.profile-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
}

.profile-main-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Gallery Box */
.profile-gallery-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    position: relative;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
}
.profile-gallery-card .swiper-container {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border-radius: 20px 20px 0 0;
}
.profile-gallery-card .swiper-slide img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    max-height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.profile-gallery-card .swiper-slide:hover img {
    transform: scale(1.02);
}
.gallery-verified-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    color: #38bdf8;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-sidebar-actions {
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Hero Info Card (Top of Main Column) */
.profile-hero-card {
    background: linear-gradient(135deg, #f43662 0%, #e02450 100%);
    border-radius: 22px;
    padding: 26px 30px;
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(244, 54, 98, 0.24);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.profile-hero-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.hero-user-name {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-profile-id-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 700;
}
.hero-bio-quote {
    background: rgba(255, 255, 255, 0.14);
    border-left: 3.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 0 12px 12px 0;
    padding: 10px 16px;
    margin: 14px 0 16px;
    font-size: 0.95rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.5;
}
.hero-quick-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hero-quick-pill {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 0.86rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
}

/* Action Buttons */
.btn-connect-hero {
    background: #f43662;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 30px;
    padding: 11px 20px;
    border: none;
    box-shadow: 0 4px 15px rgba(244, 54, 98, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    text-decoration: none !important;
    width: 100%;
    text-align: center;
}
.btn-connect-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 54, 98, 0.45);
    background: #d6224c;
    color: #ffffff !important;
}

/* VIP Contact Details Card */
.vip-contact-card {
    background: #ffffff;
    border: 1.5px solid #fecdd3;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 6px 24px rgba(244, 54, 98, 0.06);
    position: relative;
    overflow: hidden;
    width: 100%;
}
.vip-contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f43662, #00bcd4, #10b981);
}

/* Modular Section Cards */
.profile-module-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    width: 100%;
}
.profile-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}
.profile-module-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-module-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fdf2f4;
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

/* Attribute Grid & Modern Chips */
.attr-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    width: 100%;
}
.attr-card-chip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.attr-card-chip:hover {
    transform: translateY(-2px);
    border-color: #fbcfe8;
    background: #fffbfa;
    box-shadow: 0 4px 12px rgba(244, 54, 98, 0.06);
}
.attr-card-chip .attr-label {
    font-size: 0.84rem;
    color: #64748b;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.attr-card-chip .attr-val {
    font-size: 0.9rem;
    color: #0f172a;
    font-weight: 700;
    margin: 0;
    text-align: right;
    word-break: break-word;
}

/* Contact Details Pills */
.contact-pill-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* Match Preferences Visualizer */
.match-comparison-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
}
.match-criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.match-criterion-chip {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Responsive Media Queries & Profile Enhancements */
@media (max-width: 992px) {
    .profile-dashboard-layout {
        grid-template-columns: 1fr;
    }
    .profile-sidebar-col {
        position: static;
    }
    .profile-gallery-card .swiper-container {
        min-height: 320px;
    }
    .profile-gallery-card .swiper-slide img {
        max-height: 360px;
    }
    .profileDetailsDiv {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 10px 0 30px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 0 8px !important;
        width: 100% !important;
    }
    .profileview {
        padding: 12px 6px 40px;
    }
    .profile-hero-card {
        padding: 20px 14px;
        border-radius: 18px;
    }
    .hero-user-name {
        font-size: 1.4rem;
    }
    .profile-status-bar {
        flex-direction: column;
        gap: 8px;
        padding: 10px 14px;
    }
    .attr-grid-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .match-criteria-grid {
        grid-template-columns: 1fr;
    }
    .profile-module-card {
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }
    .profile-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Luxury Modern Profile Dashboard Styles */
.profile-hero-modern {
    background: linear-gradient(135deg, #f43662 0%, #e02450 100%);
    border-radius: 22px;
    padding: 28px 30px;
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(244, 54, 98, 0.22);
    position: relative;
    overflow: hidden;
}
.profile-hero-modern::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
.profile-dp-container {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    background: #ffffff;
    flex-shrink: 0;
    margin: 0 auto;
}
.profile-dp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-dp-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1f3;
    color: #f43662;
    font-size: 3.2rem;
}
.profile-dp-upload-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    text-align: center;
    padding: 4px 0;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
    backdrop-filter: blur(4px);
}
.profile-dp-upload-btn:hover {
    background: rgba(244, 54, 98, 0.9);
}

/* Gallery Photo Manager Modern Grid */
.modern-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    width: 100%;
}
.modern-photo-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    background: #f8fafc;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.modern-photo-item:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(244, 54, 98, 0.12);
}
.modern-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.modern-photo-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.9);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}
.modern-photo-delete-btn:hover {
    background: #b91c1c;
    transform: scale(1.1);
}
.modern-photo-upload-tile {
    border: 2px dashed #f43662;
    background: #fff5f7;
    border-radius: 14px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #f43662;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    padding: 8px;
}
.modern-photo-upload-tile:hover {
    background: #fee2e2;
    transform: translateY(-2px);
}

/* Profile Form Elements */
.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    width: 100%;
}
.profile-input-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.profile-input-card:focus-within {
    border-color: #f43662;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(244, 54, 98, 0.08);
}
.profile-input-card label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.profile-input-card .form-control, 
.profile-input-card .form-select {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 600;
    background-color: #ffffff;
    transition: all 0.2s ease;
}
.profile-input-card .form-control:disabled,
.profile-input-card .form-control[readonly],
.profile-input-card .form-select:disabled {
    background-color: #f1f5f9;
    border-color: transparent;
    color: #334155;
    cursor: default;
    box-shadow: none;
}
.profile-input-card .form-control.editing,
.profile-input-card .form-select.editing {
    border-color: #f43662 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(244, 54, 98, 0.12) !important;
}

/* Section Subhead */
.profile-subhead-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f5f9;
}
.profile-subhead-banner h5 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-subhead-banner h5 i {
    color: #f43662;
}

/* Action Buttons */
.btn-primary {
    background-color: var(--nj-primary, #f43662) !important;
    border-color: var(--nj-primary, #f43662) !important;
    color: #ffffff !important;
    font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--nj-primary-hover, #e11d48) !important;
    border-color: var(--nj-primary-hover, #e11d48) !important;
    color: #ffffff !important;
}

.btn-rose-gradient {
    background: linear-gradient(135deg, #f43662 0%, #e02450 100%);
    color: #ffffff !important;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    box-shadow: 0 4px 14px rgba(244, 54, 98, 0.3);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-rose-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 54, 98, 0.4);
    color: #ffffff !important;
}
.btn-outline-rose {
    background: #ffffff;
    color: #f43662 !important;
    font-weight: 700;
    border: 1.5px solid #f43662;
    border-radius: 12px;
    padding: 8px 18px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-outline-rose:hover {
    background: #fff1f3;
    transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════
   LUXURY MATRIMONIAL DASHBOARD, MATCHES & SEARCH DESIGN SYSTEM
══════════════════════════════════════════════════════════════════ */

/* 1. Dashboard Layout & Member Card */
.dash-luxury-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 0 50px;
    align-items: start;
}
@media (max-width: 992px) {
    .dash-luxury-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 10px 0 30px !important;
    }
}

.dash-member-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: sticky;
    top: 20px;
}
.dash-avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #fecdd3;
    padding: 3px;
    margin-bottom: 14px;
    display: inline-block;
}
.dash-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.dash-avatar-img.is-avatar {
    object-fit: contain;
    background: #ffffff;
}
.dash-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff1f3;
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.dash-avatar-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.dash-member-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}
.dash-member-meta {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 8px;
    word-break: break-all;
}
.dash-member-id {
    display: inline-block;
    background: rgba(244, 54, 98, 0.08);
    color: #f43662;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.dash-membership-banner {
    width: 100%;
    background: linear-gradient(135deg, #fff1f3 0%, #ffe4e8 100%);
    border: 1px solid #fecdd3;
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}
.dash-membership-banner.premium-active {
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border-color: #f0abfc;
}
.dash-membership-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-membership-subtitle {
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 500;
}
.dash-membership-btn {
    background: linear-gradient(135deg, #f43662 0%, #e11d48 100%);
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(244, 54, 98, 0.25);
    white-space: nowrap;
}
.dash-membership-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(244, 54, 98, 0.35);
}

/* Sidebar Quick Navigation Menu */
.dash-quick-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 18px;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
    text-align: left;
}
.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    color: #475569 !important;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    background: transparent;
}
.dash-nav-item i {
    font-size: 1rem;
    color: #94a3b8;
    width: 20px;
    text-align: center;
    transition: color 0.2s ease;
}
.dash-nav-item:hover {
    background: #fff1f3;
    color: #f43662 !important;
}
.dash-nav-item:hover i {
    color: #f43662;
}
.dash-nav-item.active {
    background: linear-gradient(135deg, #fff1f3 0%, #ffe4e8 100%);
    color: #f43662 !important;
    font-weight: 700;
}
.dash-nav-item.active i {
    color: #f43662;
}

/* 2. Dashboard Statistics Grid */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    width: 100%;
}
@media (max-width: 576px) {
    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}
.dash-stat-chip {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.dash-stat-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(244, 54, 98, 0.1);
    border-color: #fecdd3;
}
.dash-stat-chip.blur-locked {
    background: #fafafa;
    opacity: 0.85;
}
.dash-stat-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff1f3;
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.dash-stat-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 4px;
}
.dash-stat-lbl {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

/* 3. Universal Matrimonial Candidate Card Grid */
.matrimonial-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    width: 100%;
}
@media (max-width: 576px) {
    .matrimonial-card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}
.matrimonial-profile-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.matrimonial-profile-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(244, 54, 98, 0.14);
    border-color: #fecdd3;
}
.matrimonial-card-img-box {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: radial-gradient(circle at center, #fff1f3 0%, #fef2f2 50%, #f8fafc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.matrimonial-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.matrimonial-profile-card:hover .matrimonial-card-img:not(.is-avatar) {
    transform: scale(1.05);
}

/* Specific styling for Default / Vector Avatars */
.matrimonial-card-img.is-avatar {
    width: 145px;
    height: 145px;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(244, 54, 98, 0.16), 0 0 0 5px #ffffff;
    background: #ffffff;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.matrimonial-profile-card:hover .matrimonial-card-img.is-avatar {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 14px 30px rgba(244, 54, 98, 0.24), 0 0 0 5px #ffffff;
}

.matrimonial-avatar-placeholder {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06), 0 0 0 4px #ffffff;
}

.matrimonial-id-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.3px;
}
.matrimonial-verified-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(16, 185, 129, 0.9);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
.matrimonial-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}
.matrimonial-candidate-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.matrimonial-meta-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.matrimonial-meta-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.matrimonial-meta-chip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.matrimonial-meta-chip i {
    color: #f43662;
    font-size: 0.72rem;
}
.matrimonial-meta-chip.full-width {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. Search Filter Panel */
.search-filter-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}
.search-tabs-nav {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    white-space: nowrap;
}
.search-tab-pill {
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.search-tab-pill:hover {
    color: #f43662;
    border-color: #fecdd3;
    background: #fff1f3;
}
.search-tab-pill.active {
    background: linear-gradient(135deg, #f43662 0%, #e02450 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(244, 54, 98, 0.25);
}

/* 5. Notifications & Connection Requests */
.notif-tab-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}
.notif-metrics-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 768px) {
    .notif-metrics-nav {
        grid-template-columns: 1fr;
    }
}
.notif-metric-tab {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.notif-metric-tab:hover {
    border-color: #fecdd3;
    background: #fff5f7;
    transform: translateY(-2px);
}
.notif-metric-tab.active {
    background: linear-gradient(135deg, #fff1f3 0%, #ffffff 100%);
    border-color: #f43662;
    box-shadow: 0 6px 20px rgba(244, 54, 98, 0.12);
}
.notif-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fef2f2;
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.notif-metric-tab.active .notif-metric-icon {
    background: linear-gradient(135deg, #f43662, #e11d48);
    color: #ffffff;
}
.notif-metric-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
.notif-metric-lbl {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    margin: 0;
}

/* Connection Request List Item Card */
.request-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
}
.request-card:hover {
    border-color: #fecdd3;
    box-shadow: 0 8px 24px rgba(244, 54, 98, 0.08);
    transform: translateY(-2px);
}
.request-card-user {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-grow: 1;
}
.request-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    background: #f8fafc;
    flex-shrink: 0;
}
.request-avatar.is-avatar {
    object-fit: contain;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(244, 54, 98, 0.15), 0 0 0 3px #ffffff;
}
.request-user-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}
.request-user-meta {
    font-size: 0.84rem;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.request-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .request-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .request-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
    }
}

/* 6. Luxury Membership Pricing Page */
.membership-hero-banner {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 44px 0 36px;
    text-align: center;
    position: relative;
}
.pricing-duration-pills {
    display: inline-flex;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 5px;
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.pricing-duration-pill {
    padding: 8px 24px;
    border-radius: 25px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #64748b;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pricing-duration-pill.active {
    background: linear-gradient(135deg, #f43662 0%, #e11d48 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(244, 54, 98, 0.3);
}

.pricing-luxury-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
@media (max-width: 768px) {
    .pricing-luxury-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
.luxury-plan-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.luxury-plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(244, 54, 98, 0.12);
    border-color: #fecdd3;
}
.luxury-plan-card.featured {
    border: 2px solid #f43662;
    box-shadow: 0 16px 40px rgba(244, 54, 98, 0.16);
    background: linear-gradient(180deg, #ffffff 0%, #fffbfb 100%);
}
.plan-featured-ribbon {
    position: absolute;
    top: -14px;
    right: 24px;
    background: linear-gradient(135deg, #f43662 0%, #e11d48 100%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(244, 54, 98, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.plan-header-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}
.plan-header-subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 18px;
}
.plan-price-amount {
    font-size: 2.2rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 4px;
}
.plan-price-amount span {
    font-size: 1rem;
    font-weight: 600;
    color: #64748b;
}
.plan-gst-note {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 22px;
}
.plan-features-block {
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
    margin-bottom: 24px;
    flex-grow: 1;
}
.plan-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}
.plan-feature-item i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fef2f2;
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.luxury-plan-card.featured .plan-feature-item i {
    background: #f43662;
    color: #ffffff;
}
.plan-btn-action {
    width: 100%;
    padding: 12px 20px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    text-align: center;
    border: none;
}

/* ==========================================================================
   NAMMAJODI MODERN LUXURY UI SYSTEM
   (Home, About Us, FAQ, Contact Us, Sign In, Header Navigation)
   ========================================================================== */

:root {
    --nj-primary: #f43662;
    --nj-primary-hover: #e11d48;
    --nj-primary-dark: #be123c;
    --nj-primary-light: #fff1f2;
    --nj-primary-subtle: rgba(244, 54, 98, 0.08);
    --nj-primary-glow: rgba(244, 54, 98, 0.25);
    --nj-dark: #0f172a;
    --nj-dark-card: #1e293b;
    --nj-slate: #334155;
    --nj-muted: #64748b;
    --nj-border: #e2e8f0;
    --nj-gold: #f59e0b;
    --nj-radius: 18px;
    --nj-radius-sm: 10px;
    --nj-radius-lg: 24px;
    --nj-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.04);
    --nj-shadow-md: 0 10px 25px -5px rgba(244, 54, 98, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --nj-shadow-lg: 0 20px 40px -15px rgba(244, 54, 98, 0.2);
    --nj-glass: rgba(255, 255, 255, 0.92);
}

/* -------------------------------------------------------------
   Header & Navigation Enhancements
   ------------------------------------------------------------- */
.headerContainer {
    background: #ffffff;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(244, 54, 98, 0.12);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.headerMain .logo img.logopic {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

.headerMain .logo img.icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.Pc-Menus .menu_item {
    color: var(--nj-slate);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: 30px;
    transition: all 0.25s ease;
    text-decoration: none;
    position: relative;
}

.Pc-Menus .menu_item:hover {
    color: var(--nj-primary);
    background: var(--nj-primary-light);
}

.Pc-Menus .menu_item.active {
    color: var(--nj-primary);
    background: var(--nj-primary-light);
    font-weight: 700;
}

.headerMain .loginBtn {
    background: transparent;
    color: var(--nj-primary);
    border: 1.5px solid var(--nj-primary);
    border-radius: 30px;
    padding: 7px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.25s ease;
}

.headerMain .loginBtn:hover {
    background: var(--nj-primary-light);
    color: var(--nj-primary-hover);
    border-color: var(--nj-primary-hover);
}

.headerMain .registerbtn {
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 30px;
    padding: 8.5px 22px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 14px var(--nj-primary-glow);
    transition: all 0.25s ease;
}

.headerMain .registerbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 54, 98, 0.4);
}

/* -------------------------------------------------------------
   Hero & Quick Search Section
   ------------------------------------------------------------- */
.nj-hero-wrapper {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 100%), url('/frontend-assets/imgs/Home-background-banner.jpg');
    background-size: cover;
    background-position: center top;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 60px 20px 80px;
}

.nj-hero-content {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.nj-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(244, 54, 98, 0.2);
    border: 1px solid rgba(244, 54, 98, 0.4);
    backdrop-filter: blur(8px);
    color: #ffe4e6;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.nj-hero-title {
    color: #ffffff;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.nj-hero-title span {
    background: linear-gradient(135deg, #f43662 0%, #fb7185 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nj-hero-subtitle {
    color: #e2e8f0;
    font-size: 1.15rem;
    max-width: 620px;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Luxury Search Box */
.nj-search-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-radius: var(--nj-radius);
    padding: 24px 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.nj-search-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.nj-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nj-field-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--nj-slate);
    display: flex;
    align-items: center;
    gap: 6px;
}

.nj-field-label i {
    color: var(--nj-primary);
    font-size: 0.9rem;
}

.nj-select-wrap {
    position: relative;
}

.nj-select-wrap select {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--nj-radius-sm);
    padding: 12px 36px 12px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nj-dark);
    appearance: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.nj-select-wrap select:focus {
    outline: none;
    border-color: var(--nj-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px var(--nj-primary-subtle);
}

.nj-select-wrap::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nj-muted);
    pointer-events: none;
    font-size: 0.85rem;
}

.nj-btn-search {
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--nj-radius-sm);
    padding: 13px 28px;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--nj-primary-glow);
    transition: all 0.25s ease;
    height: 48px;
}

.nj-btn-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(244, 54, 98, 0.4);
    color: #ffffff;
}

/* Trust Pills under search */
.nj-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
}

.nj-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 500;
}

.nj-trust-item i {
    color: #34d399;
    font-size: 1rem;
}

/* -------------------------------------------------------------
   3-Step Journey ("How it Works")
   ------------------------------------------------------------- */
.nj-steps-wrapper {
    padding: 80px 20px;
    background: #ffffff;
}

.nj-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.nj-section-tag {
    display: inline-block;
    color: var(--nj-primary);
    background: var(--nj-primary-light);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 12px;
}

.nj-section-title {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--nj-dark);
    line-height: 1.25;
    margin-bottom: 12px;
}

.nj-section-title span {
    color: var(--nj-primary);
}

.nj-section-subtitle {
    color: var(--nj-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.nj-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.nj-step-card {
    background: #ffffff;
    border: 1.5px solid var(--nj-border);
    border-radius: var(--nj-radius);
    padding: 36px 28px;
    text-align: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nj-step-card:hover {
    transform: translateY(-8px);
    border-color: rgba(244, 54, 98, 0.35);
    box-shadow: var(--nj-shadow-lg);
}

.nj-step-num {
    position: absolute;
    top: -16px;
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px var(--nj-primary-glow);
}

.nj-step-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: var(--nj-primary-light);
    color: var(--nj-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 22px;
    transition: all 0.3s ease;
}

.nj-step-card:hover .nj-step-icon-wrap {
    background: var(--nj-primary);
    color: #ffffff;
    transform: scale(1.08) rotate(5deg);
}

.nj-step-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--nj-dark);
    margin-bottom: 10px;
}

.nj-step-desc {
    color: var(--nj-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* -------------------------------------------------------------
   Category Browser (Religion / Language / Profession)
   ------------------------------------------------------------- */
.nj-category-wrapper {
    background: #f8fafc;
    padding: 80px 20px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.nj-category-container {
    max-width: 1100px;
    margin: 0 auto;
}

.nj-category-row {
    background: #ffffff;
    border-radius: var(--nj-radius);
    padding: 24px 30px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--nj-shadow-sm);
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 0.25s ease;
}

.nj-category-row:hover {
    border-color: rgba(244, 54, 98, 0.3);
    box-shadow: var(--nj-shadow-md);
}

.nj-category-title {
    min-width: 200px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--nj-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.nj-category-title i {
    color: var(--nj-primary);
}

.nj-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
}

.nj-cat-pill {
    background: #f1f5f9;
    color: var(--nj-slate);
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.nj-cat-pill:hover {
    background: var(--nj-primary-light);
    color: var(--nj-primary);
    border-color: rgba(244, 54, 98, 0.25);
    transform: translateY(-2px);
}

.nj-cat-pill.nj-more-pill {
    background: transparent;
    color: var(--nj-primary);
    font-weight: 700;
    border: 1px dashed var(--nj-primary);
}

.nj-cat-pill.nj-more-pill:hover {
    background: var(--nj-primary);
    color: #ffffff;
}

/* -------------------------------------------------------------
   Trust Badges & Milestones Grid
   ------------------------------------------------------------- */
.nj-why-wrapper {
    padding: 80px 20px;
    background: #ffffff;
}

.nj-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.nj-why-card {
    background: #f8fafc;
    border-radius: var(--nj-radius);
    padding: 30px 22px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.nj-why-card:hover {
    background: #ffffff;
    border-color: rgba(244, 54, 98, 0.35);
    transform: translateY(-6px);
    box-shadow: var(--nj-shadow-md);
}

.nj-why-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--nj-primary-light);
    color: var(--nj-primary);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    transition: all 0.3s ease;
}

.nj-why-card:hover .nj-why-icon {
    background: var(--nj-primary);
    color: #ffffff;
    transform: scale(1.1);
}

.nj-why-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--nj-dark);
    margin-bottom: 8px;
}

.nj-why-card p {
    font-size: 0.88rem;
    color: var(--nj-muted);
    line-height: 1.55;
    margin: 0;
}

/* -------------------------------------------------------------
   Modern Success Stories / Testimonial Carousel
   ------------------------------------------------------------- */
.nj-testimonial-section {
    background: linear-gradient(180deg, #fff1f2 0%, #fef2f2 100%);
    padding: 85px 20px;
    position: relative;
    overflow: hidden;
}

.nj-testi-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.nj-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.nj-testi-card {
    background: #ffffff;
    border-radius: var(--nj-radius);
    padding: 30px;
    box-shadow: var(--nj-shadow-sm);
    border: 1px solid rgba(244, 54, 98, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
}

.nj-testi-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nj-shadow-lg);
    border-color: rgba(244, 54, 98, 0.35);
}

.nj-testi-quote-mark {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 2.5rem;
    color: rgba(244, 54, 98, 0.12);
    font-family: Georgia, serif;
    line-height: 1;
}

.nj-testi-text {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.65;
    font-style: italic;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.nj-testi-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nj-testi-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--nj-primary);
}

.nj-testi-info h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--nj-dark);
    margin: 0 0 2px 0;
}

.nj-testi-info span {
    font-size: 0.82rem;
    color: var(--nj-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* -------------------------------------------------------------
   Call To Action (CTA) Banner
   ------------------------------------------------------------- */
.nj-cta-wrapper {
    padding: 40px 20px 80px;
    background: #ffffff;
}

.nj-cta-card {
    max-width: 1100px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: var(--nj-radius-lg);
    padding: 50px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--nj-shadow-lg);
}

.nj-cta-card::before {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 54, 98, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.nj-cta-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.nj-cta-content h2 {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.25;
}

.nj-cta-content h2 span {
    color: var(--nj-primary);
}

.nj-cta-content p {
    color: #cbd5e1;
    font-size: 1.05rem;
    margin-bottom: 24px;
    line-height: 1.6;
}

.nj-btn-cta-white {
    background: #ffffff;
    color: var(--nj-primary) !important;
    font-weight: 800;
    font-size: 1rem;
    padding: 13px 32px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
}

.nj-btn-cta-white:hover {
    background: var(--nj-primary);
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(244, 54, 98, 0.4);
}

.nj-cta-image {
    max-height: 240px;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------
   ABOUT US PAGE STYLES
   ------------------------------------------------------------- */
.nj-page-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 60px 20px;
    text-align: center;
    position: relative;
}

.nj-page-hero-title {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.nj-page-hero-title span {
    color: var(--nj-primary);
}

.nj-page-hero-subtitle {
    color: #cbd5e1;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.nj-about-container {
    max-width: 1100px;
    margin: 60px auto 80px;
    padding: 0 20px;
}

.nj-about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 70px;
}

.nj-about-split.reverse {
    direction: rtl;
}

.nj-about-split.reverse > * {
    direction: ltr;
}

.nj-about-text h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--nj-dark);
    margin-bottom: 16px;
    line-height: 1.3;
}

.nj-about-text h3 span {
    color: var(--nj-primary);
}

.nj-about-text p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.nj-about-img-box {
    position: relative;
    border-radius: var(--nj-radius-lg);
    overflow: hidden;
    box-shadow: var(--nj-shadow-lg);
    border: 4px solid #ffffff;
}

.nj-about-img-box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.nj-about-img-box:hover img {
    transform: scale(1.04);
}

/* Stats Counter Grid */
.nj-stats-wrapper {
    background: #f8fafc;
    border-radius: var(--nj-radius-lg);
    padding: 40px;
    margin: 50px 0;
    border: 1px solid #e2e8f0;
}

.nj-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

.nj-stat-item h2 {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--nj-primary);
    margin-bottom: 4px;
    line-height: 1;
}

.nj-stat-item p {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nj-slate);
    margin: 0;
}

/* -------------------------------------------------------------
   FAQ PAGE STYLES
   ------------------------------------------------------------- */
.nj-faq-container {
    max-width: 860px;
    margin: -40px auto 80px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.nj-faq-search-card {
    background: #ffffff;
    border-radius: var(--nj-radius);
    padding: 16px 24px;
    box-shadow: var(--nj-shadow-md);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 35px;
}

.nj-faq-search-card i {
    color: var(--nj-primary);
    font-size: 1.2rem;
}

.nj-faq-search-card input {
    border: none;
    outline: none;
    font-size: 1.05rem;
    font-weight: 500;
    width: 100%;
    color: var(--nj-dark);
}

/* Accordion Item */
.nj-faq-item {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--nj-radius-sm);
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.nj-faq-item:hover {
    border-color: rgba(244, 54, 98, 0.3);
}

.nj-faq-item.active {
    border-color: var(--nj-primary);
    box-shadow: var(--nj-shadow-sm);
}

.nj-faq-question {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--nj-dark);
    user-select: none;
    transition: color 0.2s ease;
}

.nj-faq-item.active .nj-faq-question {
    color: var(--nj-primary);
}

.nj-faq-icon-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--nj-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.nj-faq-item.active .nj-faq-icon-toggle {
    background: var(--nj-primary);
    color: #ffffff;
    transform: rotate(180deg);
}

.nj-faq-answer {
    padding: 0 24px 22px;
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.65;
    display: none;
    border-top: 1px solid #f8fafc;
}

.nj-faq-item.active .nj-faq-answer {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------
   CONTACT US PAGE STYLES
   ------------------------------------------------------------- */
.nj-contact-wrapper {
    max-width: 1100px;
    margin: -40px auto 80px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.nj-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 30px;
}

.nj-contact-sidebar {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: var(--nj-radius);
    padding: 40px 32px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--nj-shadow-md);
}

.nj-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 30px 0;
}

.nj-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.nj-contact-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(244, 54, 98, 0.15);
    border: 1px solid rgba(244, 54, 98, 0.3);
    color: #f43662;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.nj-contact-item-text h5 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.nj-contact-item-text p, .nj-contact-item-text a {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    margin: 0;
}

.nj-contact-form-card {
    background: #ffffff;
    border-radius: var(--nj-radius);
    padding: 40px;
    border: 1px solid #e2e8f0;
    box-shadow: var(--nj-shadow-md);
}

.nj-input-group {
    margin-bottom: 20px;
}

.nj-input-group label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--nj-dark);
    margin-bottom: 8px;
    display: block;
}

.nj-input-control {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--nj-radius-sm);
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--nj-dark);
    transition: all 0.25s ease;
}

.nj-input-control:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--nj-primary);
    box-shadow: 0 0 0 4px var(--nj-primary-subtle);
}

.nj-map-box {
    margin-top: 40px;
    border-radius: var(--nj-radius);
    overflow: hidden;
    box-shadow: var(--nj-shadow-md);
    border: 1px solid #e2e8f0;
}

.nj-map-box iframe {
    width: 100%;
    height: 350px;
    border: none;
    display: block;
}

/* -------------------------------------------------------------
   SIGN IN (AUTH) PAGE STYLES
   ------------------------------------------------------------- */
.nj-auth-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%), url('/frontend-assets/imgs/Home-background-banner.jpg');
    background-size: cover;
    background-position: center;
    padding: 40px 20px;
}

.nj-auth-box {
    max-width: 480px;
    width: 100%;
    background: #ffffff;
    border-radius: var(--nj-radius-lg);
    padding: 44px 38px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.nj-auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.nj-auth-header h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--nj-dark);
    margin-bottom: 6px;
}

.nj-auth-header p {
    color: var(--nj-muted);
    font-size: 0.95rem;
    margin: 0;
}

.nj-auth-btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--nj-radius-sm);
    padding: 13px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px var(--nj-primary-glow);
    transition: all 0.25s ease;
    margin-top: 10px;
}

.nj-auth-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(244, 54, 98, 0.4);
    color: #ffffff;
}

/* -------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------- */
@media (max-width: 991px) {
    .nj-hero-title {
        font-size: 2.5rem;
    }
    .nj-search-form {
        grid-template-columns: 1fr 1fr;
    }
    .nj-steps-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .nj-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nj-testi-grid {
        grid-template-columns: 1fr;
    }
    .nj-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 24px;
    }
    .nj-cta-image {
        display: none;
    }
    .nj-about-split {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .nj-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .nj-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .nj-hero-title {
        font-size: 2rem;
    }
    .nj-search-form {
        grid-template-columns: 1fr;
    }
    .nj-why-grid {
        grid-template-columns: 1fr;
    }
    .nj-stats-grid {
        grid-template-columns: 1fr;
    }
    .nj-category-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .nj-auth-box {
        padding: 30px 20px;
    }
}

/* -------------------------------------------------------------
   MODERN PRICING PAGE STYLES (/price)
   ------------------------------------------------------------- */
.nj-pricing-wrapper {
    max-width: 1200px;
    margin: -40px auto 80px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.nj-price-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 45px;
}

.nj-price-toggle-box {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 40px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--nj-shadow-sm);
}

.nj-price-toggle-box .nav-link {
    border-radius: 30px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--nj-slate);
    border: none;
    background: transparent;
    transition: all 0.25s ease;
    cursor: pointer;
}

.nj-price-toggle-box .nav-link.active {
    background: var(--nj-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--nj-primary-glow);
}

.nj-save-badge {
    background: #10b981;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 6px;
    text-transform: uppercase;
}

.nj-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: stretch;
}

.nj-price-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--nj-radius-lg);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: var(--nj-shadow-sm);
}

.nj-price-card:hover {
    transform: translateY(-8px);
    border-color: rgba(244, 54, 98, 0.35);
    box-shadow: var(--nj-shadow-lg);
}

.nj-price-card.featured {
    border-color: var(--nj-primary);
    background: #ffffff;
    box-shadow: 0 15px 35px -5px rgba(244, 54, 98, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(1.03);
}

.nj-price-card.featured:hover {
    transform: scale(1.03) translateY(-8px);
}

.nj-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 18px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 12px var(--nj-primary-glow);
    white-space: nowrap;
}

.nj-plan-header {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 22px;
    margin-bottom: 22px;
    text-align: center;
}

.nj-plan-name {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--nj-dark);
    margin-bottom: 6px;
}

.nj-plan-subtitle {
    font-size: 0.88rem;
    color: var(--nj-muted);
    margin-bottom: 16px;
    min-height: 20px;
}

.nj-plan-price-box {
    margin-bottom: 8px;
}

.nj-plan-amount {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--nj-dark);
    line-height: 1;
}

.nj-plan-period {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nj-muted);
}

.nj-plan-gst {
    font-size: 0.8rem;
    color: var(--nj-muted);
    font-weight: 500;
    margin-top: 4px;
}

.nj-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.nj-plan-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--nj-slate);
}

.nj-plan-feature-item i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.nj-btn-choose-plan {
    width: 100%;
    background: #f8fafc;
    color: var(--nj-dark);
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px;
    font-weight: 800;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
    display: block;
}

.nj-btn-choose-plan:hover {
    background: var(--nj-primary-light);
    color: var(--nj-primary);
    border-color: var(--nj-primary);
}

.nj-price-card.featured .nj-btn-choose-plan {
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px var(--nj-primary-glow);
}

.nj-price-card.featured .nj-btn-choose-plan:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(244, 54, 98, 0.4);
    color: #ffffff;
}

/* Pricing Benefits Bar */
.nj-price-benefits {
    background: #f8fafc;
    border-radius: var(--nj-radius);
    padding: 30px;
    margin-top: 50px;
    border: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}

.nj-price-benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.nj-price-benefit-item i {
    font-size: 1.8rem;
    color: var(--nj-primary);
}

.nj-price-benefit-item h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--nj-dark);
    margin: 0;
}

.nj-price-benefit-item p {
    font-size: 0.85rem;
    color: var(--nj-muted);
    margin: 0;
}

/* -------------------------------------------------------------
   FORGOT PASSWORD STEP INDICATOR & MODERN AUTH
   ------------------------------------------------------------- */
.nj-fp-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.nj-fp-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--nj-muted);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.nj-fp-step-dot.active {
    background: var(--nj-primary);
    color: #ffffff;
    box-shadow: 0 3px 10px var(--nj-primary-glow);
}

.nj-fp-step-dot.completed {
    background: #10b981;
    color: #ffffff;
}

.nj-fp-step-line {
    width: 30px;
    height: 2px;
    background: #e2e8f0;
}

/* -------------------------------------------------------------
   MODERN FOOTER SYSTEM
   ------------------------------------------------------------- */
.nj-footer-section {
    background: #0b1120;
    color: #94a3b8;
    padding-top: 70px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nj-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nj-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 50px;
}

.nj-footer-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    text-decoration: none;
}

.nj-footer-brand-logo img.icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.nj-footer-brand-logo img.logopic {
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

.nj-footer-desc {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 22px;
}

.nj-footer-app-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nj-footer-app-badges img {
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.2s ease;
}

.nj-footer-app-badges img:hover {
    transform: translateY(-2px);
}

.nj-footer-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.nj-footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nj-footer-link {
    color: #94a3b8;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nj-footer-link:hover {
    color: var(--nj-primary);
    transform: translateX(3px);
}

.nj-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.92rem;
}

.nj-footer-contact-item i {
    color: var(--nj-primary);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.nj-footer-contact-item a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.nj-footer-contact-item a:hover {
    color: var(--nj-primary);
}

.nj-footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.nj-social-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.nj-social-icon-btn:hover {
    background: var(--nj-primary);
    border-color: var(--nj-primary);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px var(--nj-primary-glow);
}

/* Footer Bottom Bar */
.nj-footer-bottom {
    background: #060a12;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 22px 20px;
}

.nj-footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.nj-copyright {
    color: #64748b;
    font-size: 0.88rem;
    margin: 0;
}

.nj-footer-bottom-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.nj-footer-bottom-links a {
    color: #94a3b8;
    font-size: 0.86rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nj-footer-bottom-links a:hover {
    color: var(--nj-primary);
}

/* -------------------------------------------------------------
   RESPONSIVE OVERRIDES FOR PRICING & FOOTER
   ------------------------------------------------------------- */
@media (max-width: 991px) {
    .nj-pricing-grid {
        grid-template-columns: 1fr;
    }
    .nj-price-card.featured {
        transform: none;
    }
    .nj-price-card.featured:hover {
        transform: translateY(-8px);
    }
    .nj-price-benefits {
        grid-template-columns: 1fr;
    }
    .nj-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .nj-footer-grid {
        grid-template-columns: 1fr;
    }
    .nj-footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
}

/* -------------------------------------------------------------
   MODERN SIGNUP & MULTI-STEP WIZARD STYLES (/account/signup)
   ------------------------------------------------------------- */
.nj-signup-page {
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 100%), url('/frontend-assets/imgs/Home-background-banner.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 50px 20px 80px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.nj-signup-card {
    max-width: 760px;
    width: 100%;
    background: #ffffff;
    border-radius: var(--nj-radius-lg);
    padding: 40px 45px 50px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
}

.nj-signup-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
    margin-bottom: 28px;
    gap: 16px;
}

.nj-signup-brand {
    flex: 1 1 auto;
    min-width: 0;
}

.nj-signup-brand h4 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--nj-dark);
    margin: 0;
    line-height: 1.3;
}

.nj-signup-brand h4 span {
    color: var(--nj-primary);
}

.nj-signup-brand p {
    font-size: 0.86rem;
    color: var(--nj-muted);
    margin: 4px 0 0;
    line-height: 1.4;
}

.nj-signup-top-action {
    flex-shrink: 0;
}

.nj-btn-signin-pill {
    background: #fff1f2;
    color: #f43662 !important;
    border: 1.5px solid rgba(244, 54, 98, 0.35);
    border-radius: 30px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1.2;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(244, 54, 98, 0.08);
    flex-shrink: 0;
}

.nj-btn-signin-pill i {
    font-size: 0.95rem;
    color: #f43662;
    transition: color 0.25s ease;
}

.nj-btn-signin-pill:hover {
    background: #f43662;
    color: #ffffff !important;
    border-color: #f43662;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(244, 54, 98, 0.3);
}

.nj-btn-signin-pill:hover i {
    color: #ffffff !important;
}

/* 4-Step Stepper Bar */
.nj-stepper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
    position: relative;
}

.nj-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    cursor: default;
    flex: 1;
}

.nj-stepper-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    color: var(--nj-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nj-stepper-step.active .nj-stepper-icon-box {
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    border-color: var(--nj-primary);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--nj-primary-glow);
    transform: scale(1.1);
}

.nj-stepper-step.completed .nj-stepper-icon-box {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.nj-stepper-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--nj-muted);
    text-align: center;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.nj-stepper-step.active .nj-stepper-title {
    color: var(--nj-dark);
    font-weight: 800;
}

.nj-stepper-step.completed .nj-stepper-title {
    color: #10b981;
}

.nj-stepper-divider {
    height: 3px;
    background: #f1f5f9;
    position: absolute;
    top: 22px;
    left: 10%;
    right: 10%;
    z-index: 1;
}

.nj-stepper-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, var(--nj-primary) 100%);
    width: 0%;
    transition: width 0.4s ease;
}

/* Step Header & Title inside Pane */
.nj-step-pane-header {
    margin-bottom: 25px;
    border-bottom: 1px solid #f8fafc;
    padding-bottom: 14px;
}

.nj-step-pane-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--nj-dark);
    margin-bottom: 4px;
}

.nj-step-pane-desc {
    font-size: 0.88rem;
    color: var(--nj-muted);
    margin: 0;
}

/* Form Groups & Controls inside White Card */
.nj-card-field {
    margin-bottom: 22px;
}

.nj-card-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--nj-dark);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nj-card-label i {
    color: var(--nj-primary);
    font-size: 0.9rem;
}

.nj-card-help {
    font-size: 0.78rem;
    color: var(--nj-muted);
    margin-top: 4px;
    line-height: 1.4;
}

.nj-input-wrap {
    position: relative;
}

.nj-input-wrap .nj-input-field {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--nj-radius-sm);
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nj-dark);
    transition: all 0.25s ease;
}

.nj-input-wrap .nj-input-field:focus {
    outline: none;
    border-color: var(--nj-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px var(--nj-primary-subtle);
}

.nj-input-wrap select.nj-input-field {
    appearance: none;
    cursor: pointer;
    padding-right: 38px;
}

.nj-input-wrap.has-arrow::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nj-muted);
    pointer-events: none;
    font-size: 0.85rem;
}

/* Modern Pill Selector on White Card */
.nj-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.nj-card-pills input[type="radio"] {
    display: none !important;
}

.nj-card-pill-opt {
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    color: var(--nj-slate);
    padding: 9px 18px;
    border-radius: 30px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    user-select: none;
    margin: 0;
}

.nj-card-pill-opt:hover {
    background: #e2e8f0;
    color: var(--nj-dark);
    transform: translateY(-1px);
}

.nj-card-pills input[type="radio"]:checked + .nj-card-pill-opt,
.nj-card-pill-opt.active {
    background: var(--nj-primary);
    color: #ffffff;
    border-color: var(--nj-primary);
    box-shadow: 0 4px 12px var(--nj-primary-glow);
    transform: scale(1.02);
}

/* Toggle Switch on White Card */
.nj-card-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 14px 18px;
    border-radius: var(--nj-radius-sm);
    margin-bottom: 22px;
}

.nj-card-toggle span {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--nj-dark);
}

/* Step Action Navigation */
.nj-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}

.nj-btn-step-next {
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px var(--nj-primary-glow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-grow: 1;
}

.nj-btn-step-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 54, 98, 0.4);
    color: #ffffff;
}

.nj-btn-step-prev {
    background: #f8fafc;
    color: var(--nj-slate) !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 22px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.nj-btn-step-prev:hover {
    background: #e2e8f0;
    color: var(--nj-dark) !important;
}

/* Responsive Stepper */
@media (max-width: 768px) {
    .nj-signup-page {
        padding: 24px 12px 60px;
    }
    .nj-signup-card {
        padding: 24px 18px 32px;
        border-radius: 16px;
    }
    .nj-signup-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 22px;
    }
    .nj-signup-brand h4 {
        font-size: 1.22rem;
    }
    .nj-signup-brand p {
        font-size: 0.78rem;
        line-height: 1.35;
    }
    .nj-btn-signin-pill {
        padding: 6px 14px;
        font-size: 0.82rem;
        gap: 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .nj-stepper-title {
        display: none;
    }
    .nj-stepper-icon-box {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
    .nj-step-actions {
        flex-direction: column-reverse;
    }
    .nj-btn-step-prev, .nj-btn-step-next {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nj-signup-card {
        padding: 20px 15px 28px;
    }
    .nj-signup-brand h4 {
        font-size: 1.15rem;
    }
    .nj-signup-brand p {
        font-size: 0.74rem;
    }
    .nj-btn-signin-pill {
        padding: 6px 12px;
        font-size: 0.78rem;
        gap: 5px;
    }
}

/* -------------------------------------------------------------
   MODERN LEGAL & POLICY PAGES (/privacy-policy, /terms, /cancellation-and-refund-policy)
   ------------------------------------------------------------- */
.nj-legal-wrapper {
    background: #f8fafc;
    padding: 50px 0 90px;
}

.nj-legal-card {
    background: #ffffff;
    border-radius: var(--nj-radius-lg);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    padding: 45px 50px;
    line-height: 1.85;
    color: #334155;
}

.nj-company-meta-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px solid #e2e8f0;
    border-radius: var(--nj-radius-md);
    padding: 24px 28px;
    margin-bottom: 35px;
}

.nj-company-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.nj-company-meta-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--nj-primary-light);
    color: var(--nj-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.nj-company-meta-text h6 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--nj-dark);
    margin: 0 0 4px;
}

.nj-company-meta-text p {
    font-size: 0.88rem;
    color: var(--nj-slate);
    margin: 0;
    line-height: 1.5;
}

.nj-legal-section {
    margin-bottom: 38px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f1f5f9;
}

.nj-legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.nj-legal-sec-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--nj-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.nj-sec-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--nj-primary) 0%, var(--nj-primary-hover) 100%);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nj-legal-text {
    font-size: 0.96rem;
    color: #475569;
    margin-bottom: 14px;
}

.nj-data-category-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.nj-data-category-card:hover {
    border-color: rgba(244, 54, 98, 0.3);
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.nj-data-category-card h6 {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--nj-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nj-data-category-card h6 i {
    color: var(--nj-primary);
}

.nj-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nj-check-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 0.94rem;
    color: #334155;
    line-height: 1.6;
}

.nj-check-list li i {
    position: absolute;
    left: 0;
    top: 4px;
}

.nj-notice-alert {
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 18px 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.nj-notice-alert.warning {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #92400e;
}

.nj-notice-alert.warning i {
    color: #f59e0b;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.nj-notice-alert.info {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    color: #166534;
}

.nj-notice-alert.info i {
    color: #10b981;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .nj-legal-card {
        padding: 30px 20px;
    }
}

/* -------------------------------------------------------------
   MODERN REVIEWS & TESTIMONIALS (/reviews)
   ------------------------------------------------------------- */
.nj-reviews-section {
    background: #f8fafc;
    padding: 60px 0 100px;
}

.nj-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 991px) {
    .nj-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 640px) {
    .nj-reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.nj-review-card {
    background: #ffffff;
    border-radius: var(--nj-radius-md);
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.nj-review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--nj-primary) 0%, #f472b6 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nj-review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09);
    border-color: rgba(244, 54, 98, 0.3);
}

.nj-review-card:hover::before {
    opacity: 1;
}

.nj-review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.nj-review-stars {
    color: #f59e0b;
    font-size: 0.95rem;
    letter-spacing: 2px;
}

.nj-review-quote-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nj-primary-light);
    color: var(--nj-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.nj-review-quote {
    font-size: 0.96rem;
    color: #334155;
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 24px;
    flex-grow: 1;
}

.nj-review-author-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

.nj-review-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--nj-primary-light);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.nj-review-author-info h6 {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--nj-dark);
    margin: 0;
}

.nj-review-author-info p {
    font-size: 0.82rem;
    color: var(--nj-muted);
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nj-review-verified-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* Call to Action Banner */
.nj-cta-card-luxury {
    background: linear-gradient(135deg, var(--nj-dark) 0%, #1e293b 100%);
    border-radius: var(--nj-radius-lg);
    padding: 50px 40px;
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.nj-cta-card-luxury::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(244, 54, 98, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.nj-cta-card-luxury h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
}

.nj-cta-card-luxury h3 span {
    color: var(--nj-primary);
}

.nj-cta-card-luxury p {
    font-size: 1.05rem;
    color: #cbd5e1;
    max-width: 600px;
    margin: 0 auto 28px;
}