:root{
    --black: #091117;
    --darkBlue: #0e1c27;
    --lightBlue:#d5edff;
    --blue:#0d2d46;
    --white: #fff;
    --lightwhite:#ffffffc1;
    --pink:#dd1f79;
    --black3: #d2d2d2;
}
body{font-family: "Montserrat", sans-serif;}
.pad100{ padding: 100px 0;}
.padT100{ padding-top: 100px;}
h1{ font-size: 64px; color: var(--white); margin: 0; line-height: 1.2;}
h2{ font-size: 48px; color: var(--black); margin: 0; line-height: 1.2; font-weight: 600;}
h3{ font-size: 30px; color: var(--black); margin: 0; line-height: 1.2; font-weight: 600;}
h4{ font-size: 24px; color: var(--black); margin: 0; line-height: 1.2; font-weight: 600;}
p{ font-size: 16px; color: var(--black); margin: 0; line-height: 1.4; font-weight: 400;}
img{ max-width: 100%;}
b{font-weight: 700;}


.navigationSection{ background-color: var(--black); padding: 16px 0; border-bottom: 1px solid var(--darkBlue);}
.navigationSection .navbar-brand img{ height: 40px;}
.navigationSection.navbar-expand-lg .navbar-nav .nav-link{color: var(--white); font-size: 16px; line-height: 24px; padding: 0; display: flex; align-items: center; font-weight: 400; white-space: nowrap;}
.navigationSection.navbar-expand-lg .navbar-nav .nav-link:hover, .footerLinks ul li a:hover{ color: var(--pink);}
.navigationSection.navbar-expand-lg .navbar-nav{ gap: 25px;}

.button{padding: 12px 24px; transition: .5s linear; width: fit-content; align-items: center; text-align: center; border: 1px solid var(--pink); background-color: var(--pink); color: var(--white); display: flex; justify-content: center; text-decoration: none; font-size: 16px; line-height: 24px; border-radius: 12px; cursor: pointer;     min-width: 100px; display: flex; flex-direction: column;}
.button:hover{  background-color: var(--black); color: #fff; transform: translateY(-4px); box-shadow: 0 0 30px #d946ef4d;}
.button.fullButton span{ font-size: 12px; color: var(--lightwhite); font-weight: 400;}
.button.fullButton{ font-size: 18px; width: 100%; font-weight: 700;}
.button.outline{ background-color: transparent; color: var(--black);}
.button.outline:hover{ background-color: var(--black); color: var(--white);}

.bannerSection{ background-color: var(--black); padding-bottom: 230px; position: relative;}
.bannerSection .container{ position: relative; z-index: 1;}
.bannerSection.productSection{ padding-bottom: 100px;}

.bannerSection .animationIcon{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.bannerSection .animationIcon .flotingAnimation{ position: absolute; color: var(--pink); animation: float 3s ease-in-out infinite;}
.bannerSection .animationIcon .flotingAnimation svg{ width: 30px; height: 30px;}
.bannerSection .animationIcon .flotingAnimation.heart{ left: 10%; top: 10%; opacity: 70%;}
.bannerSection .animationIcon .flotingAnimation.sparkles{ right:5%; top: 10%; opacity: 30%; color: var(--white);}
.bannerSection .animationIcon .flotingAnimation.star{ left:15%; bottom: 22%; opacity: 50%; color: var(--lightBlue);}
.bannerSection .animationIcon .animate-bounce .scrollMouseBox{ border: 1px solid var(--pink); width: 1.5rem; height: 2.5rem; border-radius: 9999px; display: flex;     justify-content: center;}
.bannerSection .animationIcon .animate-bounce .scrollMouseBox .scrollMouseLine{ width: .25rem; height: .75rem; margin-top: .5rem; background-color: var(--pink); border-radius: 999px;}
.bannerSection .animationIcon .animate-bounce.scrollMouse{ position: absolute; inset: 0; margin: auto; bottom: 22%; top: auto; width: fit-content; height: fit-content;}
.bannerSection .animationIcon .animate-bounce {animation: bounce 1s infinite;}
@keyframes bounce{ 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1);}  50% { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1); }}
@keyframes float{ 0%, 100% {  transform: translateY(0); } 50% { transform: translateY(-10px); }}

.bannerSection.productSection .animationIcon .flotingAnimation.star{ bottom: 10%;}
.bannerSection.productSection .animationIcon .animate-bounce.scrollMouse{ bottom: 5%;}

.bannerText{ display: flex; flex-direction: column; gap: 30px;}
.bannerText p{ color: var(--lightwhite);}
.bannerVideo iframe{ aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; background-color: var(--white); display: flex;}
.bannerVideo{ background-color: var(--darkBlue); padding: 16px; border-radius: 32px;}
.bannerSection .bannerVideo iframe{background-color: transparent;}
.bannerText ul{ padding: 0; margin: 0; margin-left: 1rem; color: var(--lightwhite); font-size: 16px;}
.bannerText ul li + li{ margin-top: 10px;}

.asSeenOnSection{ margin-top: -130px; position: relative;}
.asSeenOnSection .asSeenOn{ background-color: var(--lightBlue); border-radius: 32px; padding: 40px; text-align: center; color: var(--white); }
.asSeenOnText .logo{   padding: 20px; margin: 0 20px; min-height: 120px;  display: flex; align-items: center;  justify-content: center; background-color: var(--white); border-radius: 16px;}
.asSeenOnText .logo img{ max-width: 130px; max-height: 80px; object-fit: contain; height: 100%; width: 100%;}
.mainTitle{  text-align: center; display: flex; flex-direction: column; gap: 10px; max-width: 800px; margin: 0 auto; margin-bottom: 40px;}

.photogallarySection .photoGallary{ max-width: 900px; display: flex; gap: 40px; flex-wrap: wrap; margin: 0 auto;}
.photogallarySection .photoGallary img { width: calc(50% - 20px); object-fit: cover; border-radius: 16px; border: 1px solid var(--black3); transition: all 0.5s linear;}
.photogallarySection .photoGallary img:hover{box-shadow: 0 0 30px #d946ef4d; transform: scale(1.02); border-color: var(--pink);}

.predicationBox{ padding: 24px; border: 1px solid var(--lightBlue); border-radius: 16px; height: 100%; display: flex; flex-direction: column; gap: 20px; transition: all 0.5s linear;}
.predicationBox:hover, .testimonialContent:hover{box-shadow: 0 0 30px #d946ef4d; }
.predicationBox i{ background-color: var(--lightBlue); color: var(--black); font-size: 24px; height: 64px; width: 64px; border-radius: 64px; display: flex; align-items: center; justify-content: center;}

.whyNeedSketchTextBg{ display: flex; align-items: center;}
.whyNeedSketchTextBg .whyNeedSketchText .mainTitle{ margin-left:0;}
.whyNeedSketchTextBg .whyNeedSketchText{ background-color: var(--lightBlue); padding: 40px; border-radius: 32px; padding-right: 280px; max-width: 1050px;}
.whyNeedSketchTextBg .whyNeedSketchText p + p{ margin-top: 16px;}
.whyNeedSketchTextBg .whyNeedSketchText h2, .whyNeedSketchTextBg .whyNeedSketchText p{  text-align: left;}
.whyNeedSketchTextBg .whyNeedSketchImg { margin-left: -240px;}
.whyNeedSketchTextBg .whyNeedSketchImg img{ border-radius: 16px; object-fit: cover;}
.whyNeedSketchText .whyNeedSketchImg{ display: none;}

.testimonialContent{ margin: 0 15px; border: 1px solid #ffffff21; padding: 30px; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 232px; transition: all 0.5s linear;}
.testimonialContent .testimonialName{ display: flex; gap: 20px; align-items: center; }
.testimonialContent .testimonialName p{ font-size: 18px; font-weight: 700;}
.testimonialContent .testimonialName img { width: clamp(40px, 10vw, 60px);  height: clamp(40px, 10vw, 60px); border-radius: 50%; object-fit: cover;}
.testimonialContent .testimonialText { display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;   overflow: hidden; }

.testimonialSection{ background-color: var(--black);}
.white :where(h1, h2, h3, h4, h5, h6, p){ color: var(--white) !important;}

.slick-prev:before, .slick-next:before{  font-family: "Font Awesome 5 Free"; content: "\f060"; font-weight: 900; margin-right: 8px; background-color: var(--pink); height: 30px; width: 30px; border-radius: 30px; display: flex; font-size: 14px; align-items: center; justify-content: center;}
.slick-next:before{ transform: scaleX(-1);}

.LetMeImg{ display: none;}
.letmeDrawContent{ display: flex; flex-direction: column; gap: 16px;}
.letmeDrawContent .order{justify-content: flex-start;}
.letmeDrawContent .mainTitle{ text-align: left; margin: 0;}

.order{ display: flex; align-items: center; gap: 10px; justify-content: center;}
.order img{ height: 40px; width: 40px; background-color: var(--lightBlue); padding: 8px; border-radius: 40px;}
.order.whiteBg img{ background-color: var(--white);}
.order p{ text-align: left;}

.readMoreBtn{ background-color: transparent; border: none; padding: 0; color: var(--pink); font-size: 16px; text-decoration: underline; width: fit-content;}


.faqSection { background-color: var(--lightBlue)}
.faqAccordionSection .accordion { --bs-accordion-border-width: 0; --bs-accordion-border-radius: 0; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: #111213; --bs-accordion-btn-color: #111213; --bs-accordion-btn-focus-border-color: none; --bs-accordion-btn-focus-box-shadow: none}
.faqAccordionSection .accordion-item { border-radius: 24px; overflow: hidden; transition: all 0.5s linear;}
.faqAccordionSection .accordion-item:hover{ background-color:#fff0f7;}
.faqAccordionSection .accordion-item + .accordion-item{ margin-top: 20px;}
.faqAccordionSection .accordion-button { padding: 24px 32px; font-size: 24px; line-height: 1.2; gap: 10px; font-weight: 600; background-color: transparent;}
.faqAccordionSection .accordion-body { padding: 0 32px 24px}
.faqAccordionSection .accordion-body p { font-size: 20px; line-height: 1.5;}
.faqAccordionSection .accordion-body p a {color: var(--pink);}
.faqAccordionSection .accordion-button::after { background-image: url(../images/landing/plus.svg); background-size: 20px; background-position: center; width: 40px; height: 40px; border-radius: 50px; border: 1px solid var(--lightBlue)}
.faqAccordionSection .accordion-button:not(.collapsed)::after { background-image: url(../images/landing/minus.svg); background-color: var(--pink); border-color: var(--pink)}

.footerSection{ background-color: var(--black);}
.footerSection .footerLogo img{max-width: 200px; width: 100%;}
.footerLinks h5{ font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--white);}
.footerLinks ul{ list-style: none; padding: 0; margin: 0;}
.footerLinks.columnCount ul{ column-count: 2; column-gap: 30px;}
.footerLinks ul li a{ color: var(--white); text-decoration: none; font-size: 16px; font-weight: 300;}
.footerLinks ul li + li{ margin-top: 10px;}
.copyrightSection{ margin-top: 20px; padding: 20px 0; border-top: 1px solid var(--lightwhite);  }
.copyrightSection p, .copyrightParagraph p{ color: #fff; font-size: 12px;}

.predicationSection .row{ gap: 24px 0;}

.soulmateDrawingPopUp{     --bs-modal-padding: 40px;     --bs-modal-width: 800px;}
#basictier{ --bs-modal-width: 800px; }
/* .soulmateDrawingPopUp .btnClose{ background-color: transparent; border: none; padding: 0; position: absolute; top: -15px; right: -15px; z-index: 2;} */
.soulmateDrawingPopUp .modal-header{ padding: 0; border: none;}
.soulmateDrawingPopUp .modal-body, .soulmateDrawingPopUp form{ display: flex; flex-wrap: wrap; gap: 20px;}
.soulmateDrawingPopUp .inputBox { display: flex; flex-direction: column; gap: 5px; width: calc(50% - 10px);}
.soulmateDrawingPopUp .inputBox label{     font-size: 12px;  color: var(--black); font-weight: 500;}
.soulmateDrawingPopUp .inputBox input, .soulmateDrawingPopUp .inputBox select{padding: 12px; border-radius: 12px; font-size: 14px; border: 1px solid var(--lightBlue); line-height: 1.2; color: var(--black); appearance: none; width: 100%;}
.soulmateDrawingPopUp .inputBox select{ background: url(../images/landing/dropDownBlack.svg)no-repeat; background-position: center right 12px; background-size: 15px;}
.soulmateDrawingPopUp .inputBox input:focus-visible, .soulmateDrawingPopUp .inputBox select:focus-visible{ outline: none; border-color:var(--lightBlue); }
.soulmateDrawingPopUp .button{ width: fit-content; margin: 0 auto;  font-family: sans-serif; width: 100%;}
.soulmateDrawingPopUp .discription p{font-size: 12px; color: #2f2f2f; }
.soulmateDrawingPopUp.modal.fade .modal-dialog{ margin: 40px auto; padding: 0 20px;}
.dateInputSection { display: flex; gap: 10px;}
.dateInputSection .dateInput{ flex: 2;}
.dateInputSection .dateInput.months{ flex: 3;}
.soulmateDrawingPopUp .inputBox select{ padding-right: 30px;}

.soulmateDrawingPopUp .btnClose{ height: 40px; width: 40px; font-size: 16px; border: none; color: var(--white); background-color: var(--pink); border-radius: 60px; display: flex; align-items: center; justify-content: center; position: absolute; top: -15px; right: -15px; z-index: 2;}

.alostDoneImg img{ border-radius: 16px;}
.bannerText p.warning{ padding: 5px; border-radius: 5px; background-color: red; width: fit-content; color: var(--white);}

.soulmateSketchSection{ max-width: 800px; border-radius: 16px; background-color: var(--lightBlue); padding: 40px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 20px; text-align: center;}
.finalPrice{ background-color: var(--white); padding: 10px; border-radius: 10px; width: fit-content; margin: 0px auto;}
.soulmateSketchSection.whiteSection{ background-color: var(--white); height: auto; margin-top: 40px;}
.soulmateSketchSection.whiteSection :where(h1, h2, h3, h4, h5, h6, p){ color: var(--black) !important;}
.soulmateSketchSection.whiteSection .finalPrice{ background-color: var(--lightBlue);}
.tristaDianeSection{ border: 1px solid var(--lightBlue); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px;}
.tristaDianeSection .tristaDianeImg{ display: flex; gap: 10px; align-items: center;}
.tristaDianeSection .tristaDianeImg img{ height:50px; border-radius:50px;}
.tristaDianeSection .tristaDianeText p + p{ margin-top: 16px;}
.disclaimer{ font-size: 12px; text-align: left;}

.pricingMain{ display: flex; flex-wrap: wrap; gap:0 32px;}

.pricingMain .standerPricingBox{ width: calc(33.33% - 21.33px); border: 1px solid var(--pink); border-radius: 16px;  display: flex; flex-direction: column; gap: 30px; transition: all 0.5s linear;}
.pricingMain .standerPricingBox .standerPringTop{ display: flex; flex-direction: column; gap: 30px; padding: 30px; padding-bottom: 0; align-items: center; text-align: center;}
.standerPricing h3 span{ font-size:18px; }
.standerPricing h3{ display: flex; align-items: center; gap: 5px; justify-content: center; flex-direction: column;}
.standerPricingBox ul{ padding: 0; margin: 0; list-style: none; }
.standerPricingBox .bottomText{ padding: 0 30px; padding-bottom: 30px;}
.standerPricingBox ul li{ padding: 10px 30px; font-weight: 500; color: var(--black); line-height: 1.4; display: flex;  gap: 10px; text-decoration: line-through;  text-decoration-color: #00000056;}
.standerPricingBox ul li.tickIcon{ text-decoration: none;}
.standerPricingBox ul li.tickIcon::before, .basictierPopupBody .priceBox ul li.tickIcon::before{ content: '';  background: url(../images/landing/tickicon.svg)no-repeat; background-size: 20px; background-size: contain; height: 20px; min-width: 20px; width: 20px; display: block;}
.standerPricingBox ul li::before, .basictierPopupBody .priceBox ul li::before{ content: '';  background: url(../images/landing/crossIcon.svg)no-repeat; background-size: 20px; background-size: contain; height: 20px; min-width: 20px; width: 20px; display: block;}
.basictierPopupBody .priceBox ul{ padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 5px;}
.basictierPopupBody .priceBox ul li{ display: flex; gap: 10px;}
.standerPricingBox ul li .crossImg img{ height: 20px;}
.standerPricingBox ul li .crossImg { margin: 0 auto;}
.basictierPopupBody{ display: flex; flex-direction: column; gap: 20px; width: 100%;}
.basictierPopupBody .standerPricing h2{ font-size: 30px;}
.downaerrow img{ height: 50px;}
.downaerrow{ text-align: center;}
.priceBoxSection{ display: flex; gap: 10px; flex-wrap: wrap;}
.priceBoxSection .priceBox{ width:calc(50% - 5px) ;}

.basictierPopupBody .priceBox { border: 1px solid var(--black3); padding: 20px; border-radius: 10px; display: flex; flex-direction: column; gap: 20px;}
.basictierPopupBody h3 span{ font-size: 20px;}
.basictierPopupBody h3{ text-align: center;}

.qualifiedBonusesPopup{--bs-modal-padding: 0px !important;}
.qualifiedBonusesPopup .qualifiedBanner{ padding: 40px; text-align: center; background-color: var(--black); display: flex; flex-direction: column; gap: 25px;}
.qualifiedBonusesPopup .qualifiedBanner h3{ color: var(--white);}
.qualifiedBonusesPopup .qualifiedBanner img{ max-width: 200px; margin: 0 auto;}
.qualifiedBonusesPopup .qualifiedText{ display: flex; flex-direction: column; gap: 20px; padding:40px;}
.qualifiedBonusesPopup .qualifiedText p{ font-size: 20px; text-align: center;}
.qualifiedBonusesPopup .qualifiedText h4{ text-align: center;}
.qualifiedBonusesPopup.soulmateDrawingPopUp .modal-body{ display: unset;}
.hightDemand{ background-color: var(--lightBlue); padding: 10px; border-radius: 10px;}

.premiumPriceBox{background-color: #fff0f7;}

.thankyouContent .thankyouText h2{color: var(--pink);}
.thankyouContent .thankyouText p{ color: var(--black); max-width: 700px; margin: 0 auto;}
.thankyouContent .thankyouText p + p{ margin-top: 10px; font-size: 16px;}
.thankyouBox{ background-color: var(--lightBlue); padding: 40px; border-radius: 32px; border: none;}
.thankyouBox .button{ background-color: var(--pink); font-family: "Montserrat", sans-serif;}
.yourProductReceipt{ max-width: 100%; border-radius: 32px; text-align: center;}
.yourProductReceipt h4{ background-color: var(--pink);}

.buttonImg{ gap: 10px;  flex-direction: row;}
.productSlider.userButtonSlider .swiper-slide{ width: fit-content !important;}
.buttonImg img{ height: 20px;}

.blogSection h1{ font-weight: 700; color: var(--black);}

.blogContentSection{ display: flex; flex-wrap: wrap; gap: 24px;}
.blogContentSection .mainTitle h2{ font-size: 35px;}
.blogContentSection .blogBox{ width: calc(33.33% - 16px);}
.blogContentSection .blogBox a{ display: inline-block; text-decoration: none;}
.blogContentSection .blogBox.mainBlog{ width: 100%;}
.blogContentSection .blogBox.mainBlog a{ height: 400px; overflow: hidden; position: relative; width: 100%; border-radius: 16px;}
.blogContentSection .blogBox.mainBlog a::after{ content: ""; position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1;}
.blogContentSection .blogBox.mainBlog a .blogImg{ height: 100%;}
.blogContentSection .blogBox.mainBlog a .blogImg img{ aspect-ratio: unset; object-position: center; height: 100%; object-fit: cover; width: 100%;}
.blogContentSection .blogBox.mainBlog a .blogText{   background-color: transparent; position: absolute; inset: 0; height: 100%; width: 100%; padding: 30px; display: flex; align-items: flex-start; z-index: 2; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 82%); flex-direction: column; justify-content: flex-end; }
.blogContentSection .blogBox.mainBlog a .blogText p{ font-size: 24px; color: var(--white); display: -webkit-box; -webkit-line-clamp: 3;   -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.blogContentSection .blogBox:hover a .blogImg img{ scale: 1.04;}
.blogContentSection .blogBox.mainBlog .blogText .companyName::after{ content: "|"; margin: 0 10px; }
.blogContentSection .blogBox .blogText .blogMeta {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #ccc;
}


.blogContent p + h4{ margin-top: 40px;}

.blogContentSection .blogBox:not(.mainBlog) .blogText .blogMeta {
    color: #777;
}

.blogContentSection .blogBox .blogText .companyName {
    font-weight: 500;
}

.blogContentSection .blogBox .blogText .publishDate {
    color: #bbb;
}

.blogContentSection .blogBox:not(.mainBlog) .blogText .publishDate {
    color: #555;
}


.blogContentSection .blogBox:hover a{    box-shadow: 0 0 30px #d946ef4d;}
.blogContentSection .blogBox a{ overflow: hidden; border-radius: 8px; border: 1px solid var(--lightBlue); transition:all 0.5s linear; height: 100%;}
.blogContentSection .blogBox a .blogImg img{ aspect-ratio: 5 / 3; object-fit: cover; object-position: center;  transition:all 0.5s linear;}
.blogContentSection .blogBox a .blogText{ padding: 16px;}
.blogContentSection .blogBox a .blogText p{display: -webkit-box; -webkit-line-clamp: 3;   -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.blogContentSection.recentBLogContent .blogBox a .blogImg img{  width: 100%; height: 100%;}
.blogContent img{ margin-bottom: 20px;}

.recentBLogContent{ gap: 12px;}
.recentBLogContent .blogBox{ width: 100% !important;}
.recentBLogContent .blogBox a{ display: flex; gap: 10px; align-items: center;}
.recentBLogContent .blogBox a .blogText{ padding-left: 0; width: 50%;}
.recentBLogContent .blogBox a .blogImg{ width: 50%; overflow: hidden;}

.blogTab{ border: 1px solid var(--lightBlue); border-radius: 16px; overflow: hidden; position: sticky; top: 0;}
.blogTab .nav .nav-item{ flex: 1;}
.blogTab .nav .nav-item .nav-link{ width: 100%; border: none; background-color: var(--white); color: var(--black); padding: 10px; font-weight: 500;}
.blogTab .nav .nav-item .nav-link.active{ background-color: var(--lightBlue); font-weight: 700;}
.blogTab .tab-content{ padding: 16px;}

.pagination{ margin: 0; padding: 0; margin-top: 30px; justify-content: space-between;}
.pagination .page-item{ display: none;}
.pagination .page-item.prev, .pagination .page-item.next{ display: block;}
.pagination .page-item.prev .page-link, .pagination .page-item.next .page-link{ transition: .5s linear; width: fit-content; align-items: center; text-align: center; border: 1px solid var(--pink); background-color: var(--pink); color: var(--white); display: flex; justify-content: center; text-decoration: none; font-size: 16px; line-height: 24px; border-radius: 12px; cursor: pointer; min-width: 100px; flex-direction: column;}
.pagination .page-item.prev.disabled .page-link, .pagination .page-item.next.disabled .page-link{ background-color: var(--black3); border-color: var(--black3); color: var(--black);}

.paginationSection{ margin-top: 30px;     --bs-link-color: var(--pink); --bs-link-hover-color: var(--pink);     --bs-pagination-active-bg: var(--pink);  --bs-pagination-active-border-color: var(--pink);}
.paginationSection .active>.page-link, .page-link.active{ background-color: var(--pink); border-color: var(--pink);}
.paginationSection .pagination{ margin: 0;}
.paginationSection .page-item,.paginationSection .d-sm-none{ display: flex !important;}

.blogContentSection .mainTitle{ max-width: 100%;}
.blogContent img{ aspect-ratio: 5 / 3 ; object-fit: cover; border-radius: 16px;}
.blogContent h4, .blogContent p{ margin-top: 16px;}
.pad80{ padding: 80px 0;}

.privacyPolicySection{ background-color: var(--lightBlue); padding: 40px; border-radius: 40px; display: flex; flex-direction: column; gap: 15px;}
.contactUs{ max-width: 800px; margin: 0 auto;text-align: center;}

.upsellContent{ max-width: 1100px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 15px;}
.upsellContent h1{ color: var(--black); font-weight: 700;}
.upsellContentBox{ display: flex; flex-direction: column; gap: 15px; background-color: #ffffff75; padding: 40px; border-radius: 20px; margin: 20px 0; }
.upsellContent ul{ list-style: none; margin: 0; padding: 0;}
.upsellContentBox .twoSection{ column-count: 2; text-align: left;}
.upsellContentBox ul li + li{ margin-top: 5px;}
.upsellContent .button{ margin: 0 auto;}

.upsellSection{ background: linear-gradient(rgb(255, 214, 233, 0.9), rgb(255, 214, 233, 0.9)), url(../images/landing/upsell.jpg)no-repeat fixed; background-size: cover; }
.upsellSection p, .upsellSection ul li{ font-weight: 500;}
.btnHoverText{ position: relative ;}
.btnHoverText span{ position: absolute; bottom: 100%;  }

.aura_bloom_soul_Section{ background: linear-gradient(327deg,rgba(0, 41, 82, 0.6) 0%, rgba(0, 41, 82, 0.9) 100%), url(../images/soulmate_energy_reveals.jpg)no-repeat; background-size: cover;} 
.aura_bloom_Star{ max-width: 200px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.aura_bloom_Star .star.active{     --tw-gradient-stops: #a855f7, #6366f1;  background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.aura_bloom_Star .star{ background-color: var(--darkBlue); height: 32px; width: 32px; border-radius: 32px; display: flex;align-items: center; justify-content: center; color: var(--lightwhite); padding: 7px;}
.aura_bloom_Star .star.active svg{fill: var(--lightwhite);}
.aura_bloom_Star .line{ width: 100%; max-width: 32px; background-color: var(--lightwhite); height: 1px;}
.aura_bloom_Title :where(h3, p){ color: var(--white);}
.aura_bloom_Title{ text-align: center; display: flex; flex-direction: column; gap: 20px;}
.aura_bloom_soul{ display: flex; flex-direction: column; gap: 40px;}

.aura_bloom_radio{ width: 100%; max-width: 890px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px;}
.aura_bloom_radio .aura_bloom_input{ width: calc(33.33% - 16px); }
.aura_bloom_radio .aura_bloom_input input{ display: none;}
.aura_bloom_radio .aura_bloom_input label{ display: flex; flex-direction: column; gap: 5px; text-align: center; background-color: var(--darkBlue); padding: 20px; border-radius: 20px; transition: all 0.5s linear; border: 2px solid transparent; height: 100%; }
.aura_bloom_radio .aura_bloom_input label .aura_bloom_Round{ height: 80px; width: 80px; margin: 0 auto; border-radius: 80px; background-color: rgb(239 68 68 / 0.4); box-shadow: 0 10px 15px -3px rgb(168 85 247 / 0.5), 0 4px 6px -4px rgb(168 85 247 / 0.5); margin-bottom: 15px; padding: 15px;}
.aura_bloom_radio .aura_bloom_input label .aura_bloom_Round.blue{background-color: rgb(168 85 247 / 0.2);}
.aura_bloom_radio .aura_bloom_input label :where(h5, p){ color: var(--white);}
.aura_bloom_radio .aura_bloom_input label:hover{ scale: 1.05; transform: translateY(-5px);}
.aura_bloom_radio .aura_bloom_input input:checked + label{ border-color:var(--pink) ;}
.aura_bloom_soul .button{ margin: 0 auto;}

.aura_bloom_dropdown{ width: 100%; max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px;}
.aura_bloom_dropdown_Input{ background-color: var(--darkBlue); padding: 40px; border-radius: 20px; display: flex; flex-direction: column; gap: 20px;}
.aura_bloom_dropdown_Input .dropdown_Input_Title{ display: flex; align-items: center; gap: 20px;}
.aura_bloom_dropdown_Input .dropdown_Input_Title img{ height: 48px; width: 48px; border-radius: 48px; background-color: var(--black3); color: var(--pink); padding: 10px;}
.aura_bloom_dropdown_Input .dropdown_Input_Title h5{ color: var(--white);}

.aura_bloom_dropdown_Input.soulmateDrawingPopUp .inputBox{ width: 100%;}
.aura_bloom_dropdown_Input.soulmateDrawingPopUp .inputBox select{background-color: var(--darkBlue); color: var(--white);  background-image: url(../images/landing/dropDownWhite.svg); background-repeat: no-repeat;     background-position: center right 12px; background-size: 15px; height: 50px; }
.sacredChoices h5{ text-align: center; color: var(--white);}
.sacredChoices .sacredChoiceSeleccted{ display: flex; align-items: center; flex-wrap: wrap; gap: 15px 10px;}
.sacredChoices .sacredChoiceSeleccted p{ width: calc(50% - 10px); display: flex ; flex-direction: column; gap: 5px; align-items: center; color: var(--black); text-transform: capitalize; border: 1px solid var(--lightBlue); padding: 20px; border-radius: 20px; background: var(--white); font-weight: 700;}
.sacredChoices .sacredChoiceSeleccted p span{ color: var(--pink);}
.sacredChoices p{ color: var(--white);}

.sacredChoicesQus :where(h4, p){ color: var(--white); }

.sacredChoicesQus{ gap: 10px;}

.aura_bloom_dropdown_Input.trasparant{ background: linear-gradient(327deg,#002952 0%, #091117 30%, #091117 70%, #002952 100%); border: 1px solid var(--lightwhite);}

.aura_bloom_dropdown_Input h4{ display: flex; align-items: center; gap: 10px;}
.aura_bloom_dropdown_Input h4 img{ height: 48px; width: 48px; border-radius: 48px; background-color: var(--black3); color: var(--pink); padding: 10px;}

.tarotHeart :where(h4, p){ color: var(--white); }
.tarotHeart{ text-align: center;}
.tarotHeart p{ margin-top: 5px;}
.hearts_compass_radio{ max-width: 600px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;}
.hearts_compass_radio .hearts_compass_radio_Input input{ display: none;}
.hearts_compass_radio .hearts_compass_radio_Input input + label{ background-color: var(--darkBlue); padding: 20px; border-radius: 10px; border: 2px solid var(--lightBlue); width: 100%; color: var(--white); display: flex; align-items: center; gap: 15px; font-size: 16px;}
.hearts_compass_radio .hearts_compass_radio_Input input + label span{ height: 40px; width: 40px; min-width: 40px; border-radius: 40px;  background-color: var(--lightBlue); display: flex; align-items: center; justify-content: center; color: var(--blue);}
.hearts_compass_radio .hearts_compass_radio_Input input:checked + label{ background-image:linear-gradient(90deg, rgb(168, 85, 247, 0.5), rgb(244, 63, 94, 0.5)); border-color: var(--pink);}
.hearts_compass_radio .hearts_compass_radio_Input input:checked + label span{ background-color: var(--pink); color: var(--white);}

.yourQuesionBox{ max-width: 800px; width: 100%; margin: 0 auto; border: 1px solid var(--lightBlue); padding: 20px; border-radius: 20px; background-color: var(--darkBlue); text-align: center;}
.yourQuesionBox p{ color: var(--white); font-size: 18px; }
.yourQuesionBox h5{ color: var(--pink);  font-size: 18px;}
.qustionCardSection{ display: flex; flex-wrap: wrap; gap: 15px 48px; max-width: 700px; margin: 0 auto; width: 100%; justify-content: center;}
.qustionCardSection .qustionCardBox{ width: calc(25% - 36px); background-color: var(--white); padding: 20px; border-radius: 10px; text-align: center; aspect-ratio: 2 / 3; display: flex; flex-direction: column;  justify-content: space-between; border: 1px solid var(--pink); cursor: pointer; transition: all 0.2s linear;}
.qustionCardSection .qustionCardBox.active{ transform: scaleX(-1);}
.qustionCardSection .qustionCardBox:hover{ scale: 1.05;}
.qustionCardSection .qustionCardBox p{ font-size: 12px;}
.qustionCardSection .qustionCardBox .heart{ height: 30px; width: 30px; border-radius: 30px; background-image:linear-gradient(to bottom right, #a855f7, #f43f5e); display: flex; align-items: center; justify-content: center; color: var(--white); margin: 0 auto;}
.qustionCardSection .qustionCardBox .heart svg{ height: 15px; width: 15px;}
.revealed{ text-align: center; color: var(--white);}

.cardTitleText h5{ color: var(--white); margin: 5px 0; display: flex; align-items: center; gap: 10px;}
.cardTitleText h5 img{ height: 30px; aspect-ratio: 2 / 3;}


.qustionCardSection:has(.qustionCardReading){ justify-content: space-between;}
.qustionCardSection .qustionCardReading{width: calc(25% - 36px); display: flex; flex-direction: column; gap: 20px; text-align: center; }
.qustionCardSection .qustionCardReading .qustionCardBox{ width:100%; }
.qustionCardSection .qustionCardReading .qustionCardBox:hover{ scale: 1;}
.qustionCardSection .qustionCardReading h5{ color: var(--white);}
.qustionCardSection .qustionCardReading .qustionCardPhara{ color: var(--white); font-size: 14px; display: flex; flex-direction: column; gap: 5px;}
.qustionCardSection .qustionCardReading .qustionCardPhara span{ color: var(--lightBlue);}
.yourReading{ display: flex; flex-direction: column; gap: 30px; text-align: left;}
.yourReading h4{ color: var(--white);}
.yourReading h4 svg{ color: var(--pink);}
.yourReading p{ font-size: 14px;}

.cardqustionImg.qustionCardSection .qustionCardBox{background-color: transparent; padding: 0; border: none; position: relative; }
.cardqustionImg.qustionCardSection .qustionCardBox img{ aspect-ratio: 2 / 3; background-size: cover; position: absolute; top: 0; left: 0; }
.cardqustionImg.qustionCardSection .qustionCardBox img:first-child{ z-index: 1;}
.cardqustionImg.qustionCardSection .qustionCardBox img:nth-child(2){ opacity: 0; transform: scaleX(-1);}
.cardqustionImg.qustionCardSection .qustionCardBox.active img:first-child{ opacity: 0;}
.cardqustionImg.qustionCardSection .qustionCardBox.active img:nth-child(2){ opacity: 1;}
.cardContainer{ display: flex ; justify-content: center;}
.cardContainer .list{     max-width: 1040px; width: 100%;}
.cardContainer p.card-name { position: absolute; /* bottom: -40px; */ top: 180px; font-size: 12px; text-align: center; width: 100%; color: #fff; }
.cardqustionImg.qustionCardSection .qustionCardBox.selectedcard img{ position: unset;}
.cardqustionImg.qustionCardSection .qustionCardBox.selectedcard{ display: flex; flex-direction: column; gap:5px; cursor: default;}
.cardqustionImg.qustionCardSection .qustionCardBox.selectedcard p{font-size: 12px;color: #fff; }

.cardImagewithText{ display: flex; align-items: center; gap: 10px;}
.cardImagewithText img{ height: 50px;}
.cardTitleText{ display: flex; flex-direction: column; gap: 10px;}
.cardTitleText .label{ background-color: var(--black); padding: 5px 20px; border-radius: 20px; width: fit-content;}

@media(width <= 1366.98px){
    .whyNeedSketchTextBg .whyNeedSketchText{     max-width: 950px;}
    .blogContentSection .blogBox a .blogText{ padding: 10px; padding-left: 0;}
}
@media(width <= 1200.98px){
    .navigationSection.navbar-expand-lg .navbar-nav .nav-link{ font-size: 14px;}
    .whyNeedSketchTextBg .whyNeedSketchText { max-width: 770px;}
}

@media(width >= 991.98px){
    .pricingMain .standerPricingBox:hover{ background-color:#fff0f7;  box-shadow: 0 0 30px #d946ef4d; }
    .premiumPriceBox{ scale: 1.04; background-color: #fff0f7;}
    .pricingMain .standerPricingBox.premiumPriceBox:hover{scale: 1;}
}
@media(width <= 991.98px){
    .bannerSection .animationIcon .animate-bounce.scrollMouse{bottom: 14%;}
    .navigationSection .navbar-toggler{ padding: 0; height: 28px; width: 28px; border: 0; padding: 6px 3px; border-radius: 0;display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;}
    .navigationSection .navbar-toggler:focus{ box-shadow: none;}
    .navigationSection .navbar-toggler span{ height: 1.5px; width: 100%; background-color: var(--white); border-radius: 5px; display: block; transition: all 0.5s linear;}
    .navigationSection .navbar-toggler span:nth-child(3){ width:65%;}

    .navigationSection .navbar-toggler[aria-expanded="true"]{ justify-content: flex-start; position: relative;}
    .navigationSection .navbar-toggler[aria-expanded="true"] span{  position: absolute; top: 0; bottom: 0; margin: auto; width: 80%;}
    .navigationSection .navbar-toggler[aria-expanded="true"] span:first-child{ transform: rotate(-45deg);}
    .navigationSection .navbar-toggler[aria-expanded="true"] span:nth-child(2){ opacity: 0;}
    .navigationSection .navbar-toggler[aria-expanded="true"] span:nth-child(3){ transform: rotate(45deg); width: 80%;}
    body:has(.navigationSection .navbar-toggler[aria-expanded="true"]){ overflow: hidden;}
    .navigationSection:has( .navbar-toggler[aria-expanded="true"]){ height: 100vh; align-items: flex-start;}

    .navigationSection .navbar-collapse{ margin-top: 16px;}
    .navigationSection.navbar-expand-lg .navbar-nav .nav-link{ justify-content: center;}
    .navButton .button{ margin: 0 auto;}

    .bannerVideo{ margin-top: 40px;}
    .whyNeedSketchTextBg{ flex-direction: column;}
    .whyNeedSketchTextBg .whyNeedSketchImg{ display: none; margin: 0;}
    .whyNeedSketchTextBg .whyNeedSketchText{ padding: 40px;}
    .whyNeedSketchTextBg .whyNeedSketchText .whyNeedSketchImg{ display: block; margin-bottom: 40px;  text-align: center;}
    .whyNeedSketchTextBg .whyNeedSketchText .whyNeedSketchImg img{ max-height: 400px;}
    .asSeenOnSection .asSeenOn{ padding: 20px;}

    .asSeenOnText .logo{ margin: 0 10px; min-height: 90px;}
    .asSeenOnText .logo img{ max-height: 50px;}

    .alostDoneImg, .tristaDianeSection{ margin-top: 40px;}

    .pricingMain .standerPricingBox .standerPringTop .standerPricing h2{ align-items: flex-start; align-items: center; flex-direction: column; min-height: 90px;}

    .blogTab{ max-width: 500px; margin: 0 auto; margin-top: 40px;}
    .blogContentSection .blogBox{ width: calc(50% - 12px);}

    .aura_bloom_radio .aura_bloom_input label:hover{ scale: 1; transform: translateY(0px);}
}

@media( width <= 767.98px){
    h1{ font-size: 40px;}
    h2{ font-size: 28px;}
    h3{ font-size: 22px;}
    h4{ font-size: 20px;}
    .pad100{ padding: 50px 0;}
    .padT100{ padding-top: 50px;}
    .bannerSection .animationIcon .animate-bounce.scrollMouse{display: none;}
    .blogContentSection .mainTitle h2{ font-size: 22px;}
    .pad80{ padding: 40px 0;}
    .bannerSection{ padding-bottom: 180px;}
    .bannerSection.productSection{ padding-bottom: 50px;}
    .faqAccordionSection .accordion-button { padding: 20px; border-radius: 20px; font-size: 20px   }
    .faqAccordionSection .accordion-button::after { background-size: 16px; width: 32px; height: 32px   }
    .faqAccordionSection .accordion-body { padding: 0 20px 20px   }

    .photogallarySection .photoGallary{gap: 20px;}
    .photogallarySection .photoGallary img{ width: calc(50% - 10px);}
    .slick-prev, .slick-next{ top: calc(100% + 30px); left: 0;}
    .slick-prev{ left: 40%;}
    .slick-next{left: auto; right: 40%;}
    .testimonialSection{ padding-bottom: 80px;}
    .whyNeedSketchTextBg .whyNeedSketchText { padding: 20px; }
    .faqAccordionSection .accordion-body p{ font-size: 16px;}
    .footerSection .footerLogo img{ max-width: 150px;}
    .footerLinks{ margin-top: 40px;}
    .copyrightParagraph.disclaimer{ margin-top: 20px;}

    .footerLinks.columnCount ul , .footerLinks ul { column-count: 2; column-gap: 20px;}
    .soulmateDrawingPopUp .inputBox{ width: 100%;}
    .soulmateDrawingPopUp {--bs-modal-padding: 20px;}
    .soulmateSketchSection.whiteSection{ margin-top: 80px;}
    .faqSection .soulmateSketchSection.whiteSection{ margin-top: 40px;}

    .pricingMain .standerPricingBox{ width: 100%; border: 1px solid var(--black3); border-radius: 20px;}
    .pricingMain .standerPricingBox .standerPringTop .standerPricing h2{ font-size: 40px;}
    .standerPricingTitle h4{ font-size: 24px;}
    .pricingMain .standerPricingBox .standerPringTop .standerPricing h2, .standerPricingBox ul li{ min-height: auto;}
    .pricingMain{ border: none;}
    .standerPricingBox + .standerPricingBox{ margin-top: 20px; }

    .basictierPopupBody h3 span{ font-size: 18px;}

    .priceBoxSection .priceBox{ width: 100%;}

    .thankyouBox, .yourProductReceipt{ padding: 20px; padding: 16px;}

    .upsellContentBox .twoSection{ column-count: 1;}
    .upsellContentBox{ padding: 20px;}
    .aura_bloom_dropdown_Input{ padding: 20px;}
    .aura_bloom_dropdown{ gap: 20px;}
    .aura_bloom_radio .aura_bloom_input{ width: 100%;}
    .qustionCardSection .qustionCardBox, .qustionCardSection .qustionCardReading{ width: calc(33.33% - 32px);}
}

@media( width <= 567.98px){

    h1{ font-size: 35px;}
    h2{ font-size: 25px;}
    h4{ font-size: 18px;}
    .blogContentSection .mainTitle h2{ font-size: 20px;}
    .pad80{ padding: 30px 0;}
    .asSeenOnText .logo img{ max-width: 100px;}
    .asSeenOnText .logo.yahoo{ border: none;}
    .testimonialContent{ padding: 20px; border-radius: 10px;}
    .bannerVideo{ padding: 10px; border-radius: 24px;}
    .footerLinks ul li a{ font-size: 14px;}
    .faqAccordionSection .accordion-button{ font-size: 18px;}
    .dateInputSection{ flex-direction: column;}
    .soulmateSketchSection{ padding: 20px;}
    .pricingMain .standerPricingBox .standerPringTop{ padding: 15px; gap: 15px;}
    .pricingMain .standerPricingBox{ gap: 15px;}
    .standerPricingBox ul li{ padding: 10px 15px;}

    .bannerSection .bannerText .button{ width: 100%;}
    .testimonialContent{ min-height: auto;}
    .testimonialContent .testimonialName p{ font-size: 16px;}
    .qualifiedBonusesPopup .qualifiedBanner, .qualifiedBonusesPopup .qualifiedText{ padding: 20px;}
    .qualifiedBonusesPopup .qualifiedText p{ font-size: 18px;}

    .blogContentSection{ gap: 12px;}
    .blogContentSection .blogBox{ width: 100%;}
    .blogContentSection .blogBox.mainBlog a .blogText{ padding: 15px;}
    .blogTab .tab-content{ padding: 10px;}
    .sacredChoices .sacredChoiceSeleccted p{ width: 100%;}
}

@media( width <= 350.98px){
    .recentBLogContent .blogBox a{ align-items: unset;}
}

.avatar-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #dd1f79;
    color: #dd1f79;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}