.customContainer{
    width: 80%;
    max-width: 1200px;
}
.commonButton{
    padding: 10px 30px;
    color: white;
    background-color: var(--red1);
    border-radius: 10px;
}
a{
    text-decoration: none;
    color: var(--black1);
}
header{
    width: 100%;
}
.topContactInfo{
    width: 100%;
    /*height: 70px;*/

    background-color: var(--gray1);
    padding: 20px var(--pagePadding);
    flex-wrap: wrap;
    gap: 10px 30px;
}
.topContactInfoEach{

}
.topContactInfoEach:last-child{

}
.topContactInfoEach img{
    margin-right: 5px;
    width: 18px;
    height: 18px;
    margin-left: 5px;
}
.topContactInfoEach .topContactInfoEachInfo{
    color: var(--black1);
    font-size: 15px;
}
.topContactInfoEach.socialMedia{
    flex: 1;
    justify-content: flex-end;
}
.topContactInfoEach.socialMedia a{
    margin-right: 10px;
}
.topContactInfoEach.socialMedia a:last-child{
    margin-right: 0;
}
.topContactInfoEach.socialMedia img{
    width: 24px;
    height: 24px;
    margin: 0;
}

.mainHeader{
    width: 100%;
    background-color: var(--gray1);
}
.mainHeaderContainer{
    padding-bottom: 20px;
    padding-top: 20px;
    justify-content: space-between;
}
.page_index .mainHeaderContainer{
    padding-top: 0;
}
.brandContainer{
    margin-right: 20px;
}
.brandContainer img{
    height: 100px;
    width: auto;
}
.headerNavigationContainer{
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 100px;
}
.headerEachNavigation{
    /*margin-right: 100px;*/
}
.headerEachNavigation:last-child {
    /*margin-right: 0;*/
}
.headerEachNavigation a{
    color: var(--black1);
    font-size: 16px;
    font-weight: bold;
}
.headerEachNavigation a img{
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.landingPageIntroFV{
    width: 100%;
    height: 300px;
    background-color: var(--gray1);
    position: relative;
}
.landingPageIntroContainer{

}
.landingPageIntro{
    width: 310px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.landingPageIntro h1{
    font-weight: normal;
    margin-bottom: 20px;
}
.landingPageIntroBtn{
    padding: 15px 50px;
    background-color: var(--red1);
    color: white;
    border-radius: 8px;
    width: fit-content;
}
.landingPageIntroSignIn{
    margin-top: 10px;
    color: var(--red1);
    font-size: 14px;
}
.landingPageIntroSignIn a{
    text-decoration: underline;
    color: var(--red1);
}
.landingPageIntroImage{
    position: absolute;
    width: 500px;
    right: 0;
    bottom: -58px;
    z-index: 0;
}
p.my-font-size-small>span {
    font-size: 27px;
}

.eachSection{
    width: 100%;
    margin-top: 20px;
}
.sectionTitle{
    width: 100%;
    position: relative;
}
.sectionTitle span{
    width: 100%;
    height: 2px;
    background-color: var(--black1);
    position: absolute;
    z-index: 0;
}
.sectionTitle p{
    z-index: 0;
    background-color: white;
    max-width: 90%;
    padding: 0 10px;
    text-align: center;
}

.landingPageBtnContainer{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}
.landingPageBtn{
    padding: 15px 20px;
    background-color: var(--red1);
    color: white;
    border-radius: 8px;
    width: fit-content;
    font-size: 20px;
}

.citiesContainer{
    width: 100%;
    padding: 0 var(--pagePadding);
    margin-top: 20px;
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*flex-wrap: wrap;*/

    display: grid;
    /*grid-template-columns: auto auto auto auto auto;*/
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}
.eachCity{
    background-color: var(--gray2);
}
.eachCity img{
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.eachCity p{
    padding: 5px 0;
    text-align: center;
    color: var(--black1);
    font-weight: bold;
    font-size: 20px;
}
.landingPageBtn2Container{
    padding: 0 var(--pagePadding);
    margin-top: 30px;
    height: fit-content;
}
.landingPageBtn2{
    padding: 15px 50px;
    background-color: var(--red1);
    color: white;
    border-radius: 8px;
    width: fit-content;
}

.ourProcessContainer{
    width: 100%;
    padding: 0 var(--pagePadding);
    margin-top: 50px;
}
.ourProcessContainer img{
    width: 60%;
}

.reviewSection{
    width: 100%;
    background-color: var(--red1);
    padding: 20px 0;
}
.reviewSection .sectionTitle p{
    background-color: var(--red1);
    color: white;
    max-width: 300px;
    text-align: center;
}
.reviewSection .sectionTitle span{
    background-color: white;
}
.reviewContainer{
    width: 100%;
    padding: 0 var(--pagePadding);
}
.reviewSlideLeft, .reviewSlideRight{
    width: 60px;
    background-color: transparent;
    cursor: pointer;
}
.reviewSlideLeft img, .reviewSlideRight img{
    width: 80%;
    height: auto;
}
.reviewContent{
    flex: 1;
    margin: 0;
    overflow: hidden;
    padding: 20px 0;
}
.eachReview{
    position: relative;
    padding: 10px 20px;
    border-radius: 16px;
    background-color: white;
    width: calc(100% - 40px);
    min-width: calc(100% - 40px);
    margin-right: 20px;
    margin-left: 20px;
}
.reviewerName{
    font-size: 16px;
    color: var(--black1);
}
.reviewStars{
    margin-top: 2px;
}
.reviewStars img{
    width: 15px;
    height: 15px;
    margin-right: 3px;
}
.reviewText{
    font-size: 16px;
    color: var(--black1);
    margin-top: 5px;
    padding-right: 100px;
}
.reviewDate{
    color: var(--black1);
    font-weight: bold;
    text-align: right;
}
.reviewUserImage{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    position: absolute;
    right: -10px;
    top: -10px;
}

.excellentServiceContainer{
    width: 100%;
    border: 2px solid var(--red1);
    /*box-shadow: 0 0 5px black;*/
}
.sectionTitle2{
    color: var(--black1);
    text-align: center;
    margin-top: -20px;
    background-color: white;
}
.excellentServiceContent{
    width: calc(100% - 40px);
    margin-top: 30px;
    max-width: 600px;
}
.excellentServiceContent p{
    text-align: center;
    color: var(--black1);
}
.excellentServiceContactInfo{
    width: fit-content;
    margin-top: 30px;
    max-width: 600px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px 30px;
}
.excellentServiceContactInfoEach{

}
.excellentServiceContactInfoEach:last-child{

}
.excellentServiceContactInfoEach img{
    margin-right: 10px;
    width: 40px;
    height: 40px;
}
.excellentServiceContactInfoEach .excellentServiceContactInfoEachInfo{
    color: var(--black1);
    font-size: 15px;
}
.excellentServiceContactInfoEach.socialMedia{
    flex: 1;
    justify-content: flex-end;
}
.excellentServiceContactInfoEach.socialMedia a{
    margin-right: 10px;
}
.excellentServiceContactInfoEach.socialMedia a:last-child{
    margin-right: 0;
}
.excellentServiceContactInfoEach.socialMedia img{
    width: 24px;
    height: 24px;
    margin: 0;
}

.paymentSupportedContainer{
    width: 100%;
    margin-top: 20px;
    text-align: center;
}
.paymentSupportedContainer img{
    /* width: 100%; */
    height: auto;
}

footer{
    width: 100%;
    background-color: var(--gray1);
    padding: 20px 0;
    margin-top: 20px;
}
.footerContainer{
    justify-content: space-between;
    flex-wrap: wrap;
    gap:10px 20px;
}
.footerEachElement{

}
.footerEachElement:last-child{

}
.footerBrandLogo{
    height: 100px;
    width: auto;
}
.footerNavigationContainer{
    display: flex;
    flex-direction: column;
}
.footerNavigationContainer a{
    color: var(--black1);
}
.footerNavigationForTOSContainer{
    display: flex;
    flex-direction: column;
}
.footerNavigationForTOSContainer a{
    color: var(--black1);
}
.footerSocialMediaContainer{

}
.footerSocialMediaContainer a{
    margin-right: 20px;
}
.footerSocialMediaContainer a img{
    width: 40px;
    height: 40px;
}



/*login page css*/
.loginForm{
    width: calc(100% - 40px);
    margin-top: 30px;
    max-width: 500px;
}
.formInput{
    width: 100%;
    height: 40px;
    border: 2px solid var(--red1);
    padding: 0 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    outline: none;
}
.forgotPasswordLinkContainer{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.forgotPasswordLink{
    font-size: 16px;
    color: var(--black1);
    margin-bottom: 20px;
}
.formSubmitButton{
    padding: 5px 20px;
    background-color: var(--red1);
    color: white;
    border-radius: 6px;
    outline: none;
    border: none;
    cursor: pointer;
    font-family: 'Calibri', Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
.sectionBottomTitle{
    margin-bottom: -25px;
}
.excellentServiceContainerWrapper{
    background-color: var(--red1);
    border-radius: 30px;
    padding: 30px 10px 10px 10px;
}
.excellentServiceContainerWrapper .excellentServiceContainer{
    border: none;
    border-top: 2px solid white;
}
.excellentServiceContainerWrapper .sectionTitle2{
    background-color: var(--red1);
    color: white;
    padding: 0 20px;
}
.excellentServiceContainerWrapper .excellentServiceContent p{
    color: white;
}
.excellentServiceContainerWrapper .excellentServiceContactInfoEach .excellentServiceContactInfoEachInfo{
    color: white;
}
.excellentServiceContainerWrapper .excellentServiceContactInfoEach img{
    filter: invert(1);
}



/*about meetmee*/
.aboutTop{
    width: 100%;
    height: 500px;
    background-image: url("../images/aboutMeetMeeTop.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px var(--pagePadding);
    align-items: flex-end;
}
.aboutTopButton{
    padding: 25px 50px;
    background-color: var(--redWithOpacity);
    color: white;
    border-radius: 16px;
    border: 2px solid var(--black1);
}
.aboutSection1Container{
    gap: 20px 100px;
    flex-wrap: wrap;

}
.aboutSection1Container > p{
    flex: 1;
    min-width: 250px;
}
.aboutSection1Container > div{
    flex: 1;
    min-width: 250px;
    min-height: 250px;
}

.explanationStepsContainer{
    width: 100%;
    margin-top: 40px;
}
.eachExplanation{
    width: 100%;
    margin-bottom: 30px;
}
.eachExplanation:nth-child(even){
    flex-direction: row-reverse;
}
.eachExplanationTextContainer{
    width: calc(100% - 250px);
    border: 3px solid var(--red1);
    border-left: none;
    box-shadow: 0 0 8px #474747;
    padding: 20px 30px 50px 50px;
    background-color: transparent;
}
.eachExplanation:nth-child(even) .eachExplanationTextContainer{
    border: 3px solid var(--red1);
    border-right: none;
}
.eachExplanationTextTitle{
    text-align: right;
    font-weight: bold;
}
.eachExplanationTextDesc{
    text-align: right;
    margin-top: 30px;
}
.eachExplanation:nth-child(even) .eachExplanationTextTitle, .eachExplanation:nth-child(even) .eachExplanationTextDesc{
    text-align: left;
}
.eachExplanationImageContainer{
    width: 250px;
}
.eachExplanationImageContainer img{
    width: 150px;
    height: 150px;
}
.advantagesContainer{
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}
.eachAdvantage{

}
.flip-box {
    background-color: transparent;
    width: 210px;
    height: 300px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
}

.flip-box-inner {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 20px;
    border-radius: 20px;
    overflow-y: auto;
}

.flip-box-front {
    background-color: var(--red1);
    color: white;
}

.flip-box-back {
    background-color: var(--red1);
    color: white;
    transform: rotateY(180deg);
}

.flip-box-back::-webkit-scrollbar, .flip-box-front::-webkit-scrollbar {
    width: 4px;
    border-radius: 2px;
}
.flip-box-back::-webkit-scrollbar-track, .flip-box-front::-webkit-scrollbar-track {
    background: white;
    border-radius: 2px;
}
.flip-box-back::-webkit-scrollbar-thumb, .flip-box-front::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}
.flip-box-back::-webkit-scrollbar-thumb:hover, .flip-box-front::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.locationsContainer{
    width: 100%;
    margin-top: 40px;

}
.eachLocationLeft{
    flex: 1;
    margin-right: 15px;
    min-height: 450px;
    background-color: gray;

    background-image: url("../images/locationPicture1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.eachLocationRight{
    flex: 1;
}
.eachLocation{
    flex: 1;
    background-color: gray;
    margin-bottom: 15px;
}
.eachLocation:last-child{
    margin-bottom: 0;
}
.eachLocation:nth-child(1){
    background-image: url("../images/locationPicture2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.eachLocation:nth-child(2){
    background-image: url("../images/locationPicture3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.eachLocationIntro{
    width: 80%;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.72);
    color: white;
    margin: 20px 0;
}



/*events*/
.eventsTop{
    width: 100%;
    height: 600px;
    background-image: url("../images/eventsTop.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px var(--pagePadding);
    align-items: flex-end;
}
.eventsTopContent{
    width: 90%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
}
.eventsTopContentTitle{
    color: white;
    text-align: center;
}
.eventsTopContentMapAndButtons{
    width: 100%;
    flex: 1;
}
.eventsTopContentMapContainer{
    flex: 1;
}
.eventsTopContentMap{
    height: 250px;
}
.eventsTopContentButtons{
    flex: 1;
}
.eventsTopContentButton{
    width: 250px;
    padding: 10px 20px;
    text-align: center;
    background-color: var(--redWithOpacity);
    border-radius: 10px;
    color: white;
    margin-bottom: 15px;
}
.eventsTopContentButton:last-child{
    margin-bottom: 0;
}

.eventCityContainer{
    width: 100%;
    padding: 0 20px;
    max-width: 1200px;
}
.eventEachCity{
    max-height: 250px;
}
.eventEachCitySlideLeft, .eventEachCitySlideRight{
    width: 30px;
    background-color: transparent;
    cursor: pointer;
    padding-top: 30px;
}
.eventEachCitySlideLeft{
    justify-content: flex-start;
}
.eventEachCitySlideRight{
    justify-content: flex-end;
}
.eventEachCitySlideLeft img, .eventEachCitySlideRight img{
    width: 20px;
}
.eventEachCityAllEvents{
    flex: 1;
    /*height: 220px;*/
    overflow-x: hidden;
    overflow-y: visible;
    padding-top: 30px;
}
.eachCityEachEvent{
    width: calc(50% - 10px);
    min-width: calc(50% - 10px);
    height: 100%;
    margin-right: 20px;
    background-color: var(--red1);
    position: relative;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.eachCityEachEvent:last-child{
    margin-right: 0;
}
.eachCityEachEventCityName{
    position: absolute;
    color: var(--black1);
    background-color: var(--gray2);
    padding: 3px 15px;
    border-radius: 6px;
    width: fit-content;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}
.eachCityEachEventImage{
    width: calc(100% - 300px);
    max-width: 250px;
    height: 100%;
    object-fit: cover;
}
.eachCityEachEventDesc{
    padding: 30px 20px 20px 20px;
    color: white;
}
.eachCityEachEventDescTitle{
    color: white;
}
.eachCityEachEventDescAgeGroup{
    color: white;
}
.eachCityEachEventDescAgeGroup > p{

}
.eachCityEachEventDescAgeGroup > div{
    background-color: rgba(255, 255, 255, 0.48);
    margin-left: 5px;
    border-radius: 6px;
}
.eachCityEachEventDescAgeGroup > div > p{
    padding: 5px;
}
.eachCityEachEventDescButton{
    color: var(--black1);
    background-color: var(--gray2);
    padding: 5px 10px;
    border-radius: 6px;
    margin-top: 10px;
    width: fit-content;
}

.voucherImageContainer{
    width: 100%;
    margin-top: 20px;
}
.voucherImageContainer img{
    width: 100%;
    max-width: 700px;
}



/*register or login*/
.singleEventContainer{
    width: 100%;
    min-height: 180px;
    background-color: var(--red1);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.singleEventImageContainer{
    width: 250px;
    height: 100%;
    position: relative;
}
.singleEventImageContainer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}
.singleEventCityName{
    position: absolute;
    padding: 3px 15px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    background-color: var(--gray2);
    border-radius: 6px;
}
.singleEventDesc{
    flex: 1;
    height: 100%;
    padding: 20px;
    color: white;
}
.formsContainer{
    width: 100%;
}
.formContainerEachElement{
    flex: 1;
}
.formContainerEachElement:first-child{
    margin-right: 30px;
}
.formTitle{
    width: calc(100% - 20px);
    height: 46px;
    background-color: var(--red1);
    position: relative;
    white-space: nowrap;
}
.formTitle p{
    z-index: 1;
}
.formTitleArrow{
    position: absolute;
    width: 32px;
    height: 32px;
    transform: rotate(45deg);
    right: -16px;
    background-color: var(--red1);
    z-index: 0;
}
.mainFormContainer{
    width: calc(100% - 20px);
    border: 2px solid var(--red1);
    padding: 15px;
    padding-bottom: 0;
    color: var(--black1);
}
.formEachInput{
    width: 100%;
    height: 46px;
    border: 2px solid var(--red1);
    border-radius: 8px;
    font-size: 18px;
    padding: 0 15px;
    margin-bottom: 15px;
    outline: none;
}
input.formEachInput[type='checkbox']{
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    border: 2px solid var(--red1);
    margin-right: 20px;
    margin-bottom: 0;
}
.formEachInputGroup{
    width: 100%;
    margin-bottom: 15px;
}
.buttonCenterInsideBorder{
    margin-left: 50%;
    transform: translate(-50%, 50%);
}


.mainFormMultipleContainer{

}
.mainFormMultipleEach:first-child{
    margin-right: 20px;
}


.paymentDetails .mainFormContainer{
    width: 50%;
    margin-right: 20px;
}
.paymentDetailsFormLeftRight{

}


/*confirm page css*/
.confirmationArea{
    color: var(--black1);
    margin-top: 30px;
    max-width: 700px;
}
.confirmationArea img{
    width: 150px;
    height: 150px;
    margin: 30px 0;
}



/*order coupon css*/
.giftCardContainer{
    width: 100%;
    margin-top: 30px;
}
.giftCard{
    width: 100%;
    height: 200px;
    background-image: url("../images/voucherImage.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    max-width: 700px;
    overflow: hidden;
}
.giftCardInside{
    width: 100%;
    height: 100%;
    background-color: var(--redWithOpacity);
    color: white;
    padding: 15px;
}




/*faq*/
.faqTop{
    width: 100%;
    height: 500px;
    background-image: url("../images/faqTop.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    padding-bottom: 100px;
    align-items: flex-end;
}
.faqTopContent{
    width: calc(100% - 50px);
    max-width: 600px;
    background-color: rgba(156, 156, 156, 0.51);
    height: 170px;
    border-radius: 20px;
    padding: 20px;
    padding-top: 0;
    position: relative;
}
.faqTopSubImageContainer{

}
.faqTopSubImage{
    width: 120px;
    margin-right: 20px;
}
.faqTopSubImage:last-child{
    width: 80px;
    margin-right: 0;
}
.faqTopGuarantee{
    width: 170px;
    position: absolute;
    right: -70px;
    top: -70px;
}
.faqTopGuaranteeMainImage{
    width: 100%;
}
.faqContainer{
    width: 100%;
    max-width: 700px;
    margin-top: 20px;
}
.faqTopGuaranteeStars{
    margin-top: 5px;
}
.faqTopGuaranteeStars img{
    width: 16px;
    height: 16px;
}
.eachQuestionSection{
    width: 100%;
    margin-bottom: 20px;
}
.eachQuestionSection:last-child{
    margin-bottom: 0;
}
.eachQuestionSectionTitle{
    width: 100%;
    min-height: 40px;
    background-color: var(--red1);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    padding: 5px 10px;
}
.eachQuestionSection.active .eachQuestionSectionTitle{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.eachQuestionSectionQA{
    width: 100%;
    padding: 0 20px;
    background-color: var(--gray1);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 0;
    overflow: hidden;
}
.eachQuestionSectionQAContainer{
    width: 100%;
    max-width: 600px;
    padding: 20px 0;
}
.eachQuestion{
    margin-bottom: 20px;
}
.eachQuestion:last-child{
    margin-bottom: 0;
}
.eachQuestionQ{
    font-weight: bold;
}
.eachQuestionA{
    margin-top: 5px;
}



/*testimonials css*/
.testimonialContainer{
    width: 100%;
    margin-top: 40px;
}
.testimonialLeft, .testimonialRight{
    flex: 1;
}
.testimonialLeft{
    margin-right: 20px;
}
.eachTestimonial{
    width: 100%;
    position: relative;
    border: 2px solid var(--red1);
    padding: 30px 20px 20px 20px;
    margin-bottom: 30px;
}
.eachTestimonial:last-child{
    margin-bottom: 0;
}
.eachTestimonialStarsContainer{
    width: fit-content;
    padding: 0 10px;
    position: absolute;
    left: 20px;
    top: 0;
    transform: translateY(-50%);
    background-color: white;
}
.eachTestimonialStarsContainer img{
    width: 24px;
    height: 24px;
    margin-right: 2px;
}
.eachTestimonialStarsContainer img:last-child{
    margin-right: 0;
}
.eachTestimonialDesc{
    font-size: 18px;
}
.eachTestimonialFooter{
    font-weight: bold;
    position: absolute;
    padding: 0 10px;
    background-color: white;
    right: 20px;
    bottom: 0;
    transform: translateY(50%);
}



/*profile css*/
.page_my_account .mainFormContainer{
    width: 100%;
}
.formTitleWithButton{
    align-items: flex-end;
}
.editProfileButton{
    color: var(--red1);
    text-align: right;
    margin-left: 40px;
}

.profilePictureContainer img{
    max-width: 200px;
    max-height: 300px;
    border-radius: 20px;
}
.profilePictureText{
    max-width: 300px;
    color: var(--gray3);
    margin-top: 10px;
}



/*my encounters css*/
.myEncountersContainer{
    width: 100%;
}
.myEncountersContent1{
    width: 100%;
}
.myEncountersContent1Left{
    flex: 1;
    margin-right: 20px;
}
.myEncountersContent1Right{
    flex: 1;
}

.timer{
    margin-top: 20px;
}
.eachTime{
    margin-right: 20px;
}
.eachTime:last-child{
    margin-right: 0;
}
.eachTimeCounter{
    margin-top: 5px;
}
.eachTimeCounterEach{
    width: 40px;
    height: 50px;
    border: 2px solid var(--red1);
    border-radius: 8px;
}
.eachTimeCounterEach:last-child{
    margin-left: -2px;
}
.eachTimeCounterEach p{
    font-size: 26px;
    font-weight: bold;
}
.progressContainer{
    margin-top: 15px;
    width: 100%;
}
.eachProgress{
    width: 100%;
    margin-bottom: 5px;
}
.eachProgress p{

}
.progressBar{
    width: 100%;
    height: 20px;
    background-color: var(--gray2);
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.progressValue{
    /*width should be set by JavaScript*/
    height: 100%;
    background-color: rgba(117, 62, 60, 0.75);
}
.progressTooltip{
    position: absolute;
    right: 10px;
    color: white;
    font-size: 14px;
    line-height: 14px;
}

.myEncountersContent1RightContainer{
    width: 100%;
    max-width: 300px;
    height: 400px;
    background-color: var(--gray1);
    padding: 10px;
}
.myEncountersSlider{
    flex: 1;
    margin-bottom: 10px;
    height: 270px;
}
.myEncountersSlideInfo{
    width: 100%;
    height: 100px;
    min-height: 100px;
    justify-content: space-between;
}
.myEncountersSlideInfoEach:not(.exception){
    width: 80px;
    justify-content: flex-end;
}
.myEncountersSlideInfoEach p:first-child:not(.myEncountersSlideInfoEach.exception p:first-child){
    font-size: 40px;
    line-height: 40px;
}
.myEncountersSlideInfoEach.exception p:first-child{
    font-size: 34px;
    margin-bottom: 20px;
}

.myEncountersSlideLeft, .myEncountersSlideRight{
    cursor: pointer;
}
.myEncountersSlideLeft img, .myEncountersContent1Right img{
    width: 15px;
}
.myEncountersSliderContent{
    flex: 1;
    height: 100%;
    margin: 0 20px;
    overflow-x: hidden;
}
.myEncountersSliderContentEach{
    min-width: 100%;
    height: 100%;
    border: 4px solid var(--black1);
    border-radius: 3px;
}
.myEncountersSliderContentEach img{
    width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.feedbackContainer{
    width: 100%;
    margin-top: 20px;
    max-width: 700px;
}
.feedbackEachInputContainer{
    width: 100%;
    height: 80px;
    border: 1px solid var(--red1);
    border-radius: 10px;
    position: relative;
    margin-bottom: 20px;
}
.feedbackEachInputContainer:last-child{
    margin-bottom: 0;
}
.feedbackEachInputContainer label{
    position: absolute;
    left: 20px;
    top: -8px;
    padding: 0 10px;
    background-color: white;
    color: var(--black1);
    font-size: 16px;
    line-height: 16px;
}
.feedbackEachInputContainer textarea{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    resize: none;
    border: none;
    padding: 15px;
    outline: none;
    border-radius: 10px;
}
.userAppearanceContainer{
    width: 100%;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.userAppearanceEach{
    width: 200px;
    height:200px;
    background-color: var(--red1);
    border-radius: 20px;
    position: relative;
}
.userAppearanceEachFake{
    width: 100%;
    height: 55%;
    border-radius: 20px;
    background-color: var(--redWithOpacity);
    position: absolute;
}
.userAppearanceEachContent{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
}
.userAppearanceEachValue{
    font-size: 40px;
    color: white;
}
.userAppearanceEachValueStatus{
    width: 100%;
    background-color: var(--gray1);
    border-radius: 8px;
    height: 40px;
}
.userAppearanceEachValueStatus p{
    color: var(--black1);
    text-align: center;
}
/*Love shadow*/
.love-shadow-reletive {
    position: relative;
}
.love-shadow-block {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    background: #0000004a;
    display: none;
    
}
.lds-heart {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    transform: rotate(45deg);
    transform-origin: 40px 40px;
  }
  .lds-heart div {
    top: 32px;
    left: 32px;
    position: absolute;
    width: 32px;
    height: 32px;
    background: #d95ed1;
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .lds-heart div:after,
  .lds-heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    background: #d95ed1;
  }
  .lds-heart div:before {
    left: -24px;
    border-radius: 50% 0 0 50%;
  }
  .lds-heart div:after {
    top: -24px;
    border-radius: 50% 50% 0 0;
  }
  @keyframes lds-heart {
    0% {
      transform: scale(0.95);
    }
    5% {
      transform: scale(1.1);
    }
    39% {
      transform: scale(0.85);
    }
    45% {
      transform: scale(1);
    }
    60% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(0.9);
    }
  }
  .love-shadow-over {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0 auto;
    padding: 43%;
    display: none;
}