:root{
    --purple: #7246be;
    --darkpurple: #422768;
    --white:#fff;
    --cream:#fcf8f2;
    --gold: #e0ae2e;
}
body{ font-family: "Montserrat", sans-serif; background-color: var(--cream);}
p,h1,h2,h3,h4,h5,h6{ margin: 0;}
img{ max-width: 100%;}
p{ font-weight: 500; color: var(--darkpurple); line-height: 1.4;}
h1{ font-size: 60px; font-family: "Cormorant Garamond", serif; font-weight: 700; line-height: 1;}
h2{ font-size: 48px; font-family: "Cormorant Garamond", serif; font-weight: 700; line-height: 1;}
h3{ font-size: 36px; font-family: "Cormorant Garamond", serif; font-weight: 700; line-height: 1;}
h4{ font-size: 24px; font-family: "Cormorant Garamond", serif; font-weight: 700; line-height: 1;}
h5{ font-size: 20px; font-family: "Cormorant Garamond", serif; font-weight: 700; line-height: 1;}
.topNewzSection{ background-color:var(--purple); padding: 10px; color: var(--white); text-align: center; font-size: 14px; text-transform: uppercase; font-weight: 500; position: sticky; top: 0; z-index: 2;}
.topNewzSection p{ color: var(--white);}
.topNewzSection.bottom{ top: auto; bottom: 0; position: fixed; width: 100%; padding: 0;}
.topNewzSection.bottom .button{ font-size: 16px; width: 100%; border-radius: 0; padding: 10px;}
.text-gradient-primary{ background: linear-gradient(135deg,hsl(262 48% 51%),hsl(43 74% 53%));     -webkit-text-fill-color: transparent;     background-clip: text;}
.button{ border: none; background-color: var(--purple); width: fit-content; margin: 0 auto; font-size: 24px; padding: 24px 64px; border-radius: 100px;  display: inline-block; color: var(--white); text-decoration: none; font-weight: 600; transition: all 0.5s linear;}
.boxshadow{ box-shadow: 0 0 #0000, 0 0 #0000, 0 15px 40px rgba(107,70,193,.5);}
.boxshadowB{ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 30px rgba(0,0,0,.08);}
.button:hover{ color: var(--white);  transform: translateY(-5px);}
.buttonSection{ display: flex; flex-direction: column; gap: 20px;}
.buttonSection p { color: #8e80a3; font-size: 14px;}
.buttonSection p span{ color: #dc2626; font-weight: 600;}
.button.gold{ background-color: var(--gold); color: var(--darkpurple);}
.pad96{ padding:  50px 0;}
.maxWidth{ max-width: 951px; margin: 0 auto;}
.palmistry_Content{  text-align: center; display: flex; flex-direction: column; gap: 40px;}
.palmistry_Content .text{ display: flex; flex-direction: column; gap: 20px;}
.palmistry_Content .text p { font-size: 14px;  text-transform: uppercase; letter-spacing: 3px; color: var(--purple); font-weight: 500;}  
.palmistry_Content .text p.big{ font-size: 24px; line-height: 1.4; color: var(--darkpurple); text-transform: none; font-weight: 400; letter-spacing: normal;}
.palmistry_Content .image{ border-radius: 24px; overflow: hidden;}
.palmistry_Content .testimonial{ max-width: 768px; border-radius: 12px; padding: 40px;  border-left: 8px solid var(--gold); background-color: var(--white); margin: 0 auto; text-align: left;  display: flex; flex-direction: column; gap: 20px; } 
.palmistry_Content .testimonial .quote{ font-size: 60px; color: var(--gold); line-height: 1; opacity: 0.5;}
.palmistry_Content .testimonial .star{ font-size: 20px; line-height: 1;}
.palmistry_Content .testimonial p{ font-size: 20px; color: var(--darkpurple);}
.palmistry_Content .testimonial p.title{ color: var(--purple);}
.point_guarantee{display: flex;flex-wrap: wrap; gap: 30px; justify-content: center;}
.point_guarantee .box{ display: flex; align-items: center; gap: 10px;}
.point_guarantee .box .icon{ height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; font-size: 20px; background-color: var(--purple); border-radius: 48px; color: #fff;}
.point_guarantee .box p{ font-size: 14px; color: var(--darkpurple); font-weight: 500;}
.aloneSection h2{ text-align: center;}
.aloneSection{ display: flex; flex-direction: column; gap: 35px;}
.aloneSection p{ font-size: 18px; }
.aloneSection .alone_point{ display: flex; gap: 30px; margin: 20px 0;}
.aloneSection .alone_point .box{ padding: 32px; border-radius: 16px; color: var(--purple); text-align: center; background-color: var(--white); display: flex; flex-direction: column; gap: 10px;}
.aloneSection .alone_point .box .icon{ font-size: 48px;}
.aloneSection h3{ text-align: center;}
.aloneSection p.map{ text-align: center; font-size: 24px; font-weight: 700;}
.soul_recognition{ background-color: var(--purple); color: var(--white);}
.soul_recognition_content{ display: flex; flex-direction: column; gap: 30px;}
.soul_recognition_content h2{ text-align: center; margin-bottom: 20px; color: var(--gold);}
.soul_recognition_content p{ color: var(--white);}
.soul_recognition_content p.box{ background-color: #ffffff1a; padding: 32px; border-radius: 16px; font-size: 20px; text-align: center; color: var(--gold);}
.love_life_section{ background-color: var(--white);}
.love_life{text-align: center;}
.yourHeartLine{ display: flex; flex-direction: column; gap: 20px; background-color: var(--white); text-align: left; border-left: 4px solid var(--gold); border-radius: 16px; padding: 40px;}
.yourHeartLine h3{ text-align: left; color: var(--purple);}
.yourHeartLine img{ max-width: 672px; margin: 0 auto; border-radius: 16px; width: 100%;}
.yourHeartLine ul{padding: 0; padding-left: 1rem; margin: 0; font-size: 18px; display: flex; flex-direction: column; gap: 10px;}
.yourHeartLine p span.puple{ color: var(--purple);}
.love_palm_reading{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1152px; margin: 0 auto; gap: 32px;}
.love_palm_reading .box{transition: all 0.2s linear; padding: 32px; border-radius: 16px; display: flex; flex-direction: column; gap: 16px;  background-color: var(--white);}
.love_palm_reading .box:hover{ transform: translateY(-5px);}
.love_palm_reading .box h4{ color: var(--purple);}
.love_palm_reading .box .icon{ font-size: 48px;}
.realSoulmatesSection{ background-color: var(--white); }
.mainTitle{ text-align: center; max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; margin-bottom: 64px;}
.mainTitle p{ font-size: 20px; max-width: 768px; margin: 0 auto; font-weight: 400;}
.realSoulmates{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1152px; margin: 0 auto; gap: 32px;}
.realSoulmates .box{ transition: all 0.2s linear; transform: translateY(-0px); padding: 32px; border-radius: 16px; display: flex; flex-direction: column; gap: 20px; background-color: var(--white); border-top: 4px solid var(--gold);} 
.realSoulmates .box:hover{transform: translateY(-5px);}
.realSoulmates .box h5{ color: var(--purple);}
.rattingStar{ margin-top: 64px; display: flex; flex-direction: column; gap: 10px; text-align: center;}
.rattingStar p.big{font-size: 24px; color: var(--purple); font-weight: 700;} 
.rattingStar p{ font-size: 16px; color: #8e80a3; font-weight: 400;}
.Luna_Number{ display: grid; gap: 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center;}
.Luna_Number p{ margin-top: 5px;}
.Luna_Number h2{ font-size: 60px; color: var(--purple);}
.uniqueMethod{ padding: 32px; margin-top: 64px; border-radius: 16px; border-left: 4px solid var(--gold); background-color: var(--white); display: flex; flex-direction: column; gap: 20px; }
.uniqueMethod h3{ color: var(--purple); font-size: 30px;}
.uniqueMethod p{ font-size: 18px; font-weight: 400;}
.palm_reading{ display: flex; flex-direction: column; gap: 40px; padding: 64px; border-radius:32px; background-color: var(--purple); max-width: 896px; margin: 0 auto; color: var(--white);}
.palm_reading h2{ text-align: center;}
.palm_reading p.title{ font-size: 36px; font-weight: 700; color: var(--gold); text-align: center; line-height: 1;}
.palm_reading p.title span{ font-size: 18px; font-weight: 400; color: var(--white);} 
.palm_reading ul{ padding: 0 ; margin: 0; list-style: none;}
.palm_reading ul li{ display: flex; align-items: center; gap: 12px; font-size: 18px; padding: 12px 0; border-bottom: 1px solid #ffffff67;}
.palm_reading ul li span{ font-size: 24px; color: var(--gold);}
.bonusSection{ display: flex; flex-direction: column; gap: 20px;}
.bonusSection .bonus{ padding: 32px; border-radius: 16px; background-color: #ffffff1a; display: flex; flex-direction: column; gap: 10px;}  
.bonusSection .bonus h3{ font-size: 30px; color: var(--gold);}
.bonusSection .bonus p{ font-size: 16px; color: var(--white);}
.priceSection{ text-align: center; display: flex; flex-direction: column; gap: 10px;}
.priceSection p{ color: var(--white); }
.priceSection p.big{ font-size: 24px;}
.priceSection h2{ font-size: 96px; color: var(--gold);}
.specialBonus{ background-color: #ef4444; padding: 20px; border-radius: 12px; }
.specialBonus p{ color: var(--white); font-size: 18px; font-weight: 700; text-align: center;}
.guaranteeSection{ display: flex; flex-direction: column; gap: 20px;}
.guaranteeSection .guaranteeText{ text-align: center;}
.guaranteeSection .guaranteeText p{ color: var(--white); font-size: 14px;}
.guaranteeBox{ padding: 40px; border-radius: 16px; max-width: 672px; margin: 0 auto; background-color: var(--white); display: flex; flex-direction: column; gap: 20px; text-align: center;}
.guaranteeBox h3{ font-size: 30px; color: var(--purple); }
.whiteBG{ background-color: var(--white);}
.faqSection{ display: flex; flex-direction: column; gap: 20px;}
.faqSection .faqBox{ background-color: var(--white); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 20px;}
.faqSection .faqBox h5{ color: var(--purple);}
.crossRoads{ display: flex; flex-direction: column; gap: 20px; text-align: center; max-width: 767px; margin: 0 auto;}
.crossRoads p{ font-size: 18px; font-weight: 400;}
.crossRoads p.or{ font-size: 24px; font-weight: 700; color: var(--purple);}
.crossRoads ul{ list-style: none; text-align: left; font-size: 18px; display: flex; flex-direction: column; gap: 10px; margin: 0 auto; padding: 0; max-width: 768px; }
.crossRoads p.f24{ font-size: 24px; color: var(--purple); font-weight: 700;}
.crossRoads .guaranteeText p{color: #8e80a3;}
.crossRoads .guaranteeText p span{ color: #ef4444; font-weight: 700;}
.crossRoads .guaranteeText p + p{ margin-top: 24px;}
.crossRoads + .crossRoads{ margin-top: 40px; padding-top: 40px; border-top: 1px solid #e2deed;}
.footerSection{ padding: 40px 0; background-color: var(--darkpurple); text-align: center; }
.footerSection p{ color: var(--white);}
.footerSection .footerText{ max-width: 767px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px;}
.footerSection .footerText .footerNav{ display: flex; align-items: center; gap: 30px; justify-content: center;}
.footerSection .footerText .footerNav a{ color: var(--white); text-decoration: none; font-size: 14px; opacity: 0.8;}
.footerSection .footerText .footerNav a:hover{ opacity: 1;}
.footerSection .footerText .clickBank{ font-size: 12px; color: #fff; opacity: 0.8;}
.plam_secrete_modal {background: rgb(0 0 0 / 0.6);}
.plam_secrete_modal .modal-content {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.2);padding: 24px;max-width: 500px;}
.plam_secrete_modal .modal-content .modal-body {padding: 0;position: relative;color: var(--white);}
.plam_secrete_modal .modal-content .modal-body .btn-close {position: absolute;right: 0;top: 0;padding: 0;color: #fff;filter: invert(1);}
.plam_secrete_modal .modal-content .modal-body .popupTitleIcon {height: 64px;width: 64px;border-radius: 64px;margin: 0 auto;background-image: linear-gradient(to bottom right, #a855f7, #ec4899);display: flex;align-items: center;justify-content: center;font-size: 24px;margin-bottom: 10px;}
.plam_secrete_modal .modal-content .modal-body .popupTitle {display: flex;flex-direction: column;gap: 15px;text-align: center;margin-bottom: 20px;}
.plam_secrete_modal .modal-content .modal-body .popupTitle p {font-size: 14px;color: var(--white);}
.plam_secrete_modal form {display: flex;flex-direction: column;gap: 20px;}
.inputBox {display: flex;flex-direction: column;gap: 5px;}
.inputBox label {font-size: 14px;font-weight: 500;}
.inputBox input,
.inputBox select {font-size: 14px;line-height: 1.2;font-weight: 500;color: #fff;height: 40px;padding: 8px 12px;background-color: rgba(255, 255, 255, 0.1);border: 1px solid rgb(216 180 254 / 0.3);border-radius: 6px;}
.inputBox input:focus {outline: none;}
.inputBox select {appearance: none;background: linear-gradient(rgba(255, 255, 255, 0.1)), url(../images/dropdown.svg)no-repeat;background-size: 20px;background-position: right 12px center;}
.plam_secrete_modal .inputBox select:focus {background-color: #6b21a8;outline: none;border: 1px solid #6b21a8;}
.privacyText {display: flex;align-items: center;gap: 10px;font-size: 12px;justify-content: center;}
.privacyText svg {height: 16px;}
.plam_secrete_modal .button {padding: 8px 12px;width: 100%;font-size: 16px;animation: none;box-shadow: none;}.dob-container {display: flex;gap: 15px;margin-top: 8px;}
.dob-container select {flex: 1;padding: 8px 12px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;}
.social-proof {position: fixed;bottom: 20px;left: 20px;background: #ffffff;color: #333;padding: 12px 16px;border-radius: 10px;box-shadow: 0 10px 25px rgba(0,0,0,0.15);font-size: 14px;max-width: 320px;z-index: 9999;animation: slideIn 0.5s ease;border: 2px solid #6b21a8;}
.social-proof .toast-header{ justify-content: space-between;}
@keyframes slideIn {from {  transform: translateX(-20px);  opacity: 0;}to {  transform: translateX(0);  opacity: 1;}}
@media(max-width: 991.98px){
    .aloneSection .alone_point{ flex-direction: column;}
    .love_palm_reading{     grid-template-columns: repeat(2, minmax(0, 1fr));}
    .Luna_Number{     grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media(max-width: 767.98px){
    h1{ font-size: 36px;}
    h2{ font-size: 36px;}
    h3{ font-size: 24px;}
    h4{ font-size: 24px;}
    h5{ font-size: 20px;}
    .palmistry_Content .text p.big{ font-size:18px;}
    .pad96{ padding: 25px 0;}
    .love_palm_reading, .realSoulmates{     grid-template-columns: repeat(1, minmax(0, 1fr));}
    .button{ font-size: 18px; padding: 12px 32px;}
    .priceSection h2{ font-size: 72px;}
}
@media(max-width: 567.98px){
    .Luna_Number h2{ font-size: 48px;   }
    .palmistry_Content .testimonial p{ font-size: 16px;}
    .button{ font-size: 16px;}
    .palm_reading{ padding: 32px; border-radius: 12px;}
    .bonusSection .bonus h3{ font-size: 24px;}
    .priceSection h2{ font-size: 52px;}
    .guaranteeBox{ padding: 20px;}
    .footerSection .footerText .footerNav{ gap:10px 20px; flex-wrap: wrap;}
    .palm_reading p.title{ font-size: 24px;}
}