body{background-color: rgb(45, 45, 45);     font-family: sans-serif; color: #2f2f2f;}

.pad40{ padding: 40px 0;}
.padt40{ padding-top: 40px;}
.whitebg{ background-color: #fff;}
img{ width: 100%; height: 100%; object-fit: contain; }
.headerContainer{ max-width: 550px;  padding: 40px 25px; margin: 0 auto;   background-color: rgb(9 17 23); display: flex; flex-direction: column; gap: 30px;}
.topbar .headerContainer{ padding: 5px; border-bottom: 1px solid #3d3d3d;}
.topbar .headerContainer .navigation li a{ font-size: 10px;}
.navigation{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; list-style: none; padding: 0; margin: 0; max-width: 450px; margin: 0 auto; gap: 10px 30px; }
.navigation li{ line-height: 1;}
.navigation li a{ text-decoration: none; font-size: 11px; color: white; }
.soulmateLogo{ max-width: 200px;}
.headerVideoSection{ display: flex; flex-direction: column; gap: 20px;}
.headerVideoSection iframe{width: 100%; height: 100%; aspect-ratio: 16 / 9;}
.headerVideoSection h1{ font-size: 32px; color: #fff; line-height: 1.4; text-align: center; font-family: "Oswald", sans-serif; font-weight: 400; margin: 0;}
.headerVideoSection p{ font-size: 21px; color: #fff; line-height: 1.4; text-align: center;  margin: 0;}
.headerVideoSection p span{ font-weight: 700; color: #ffe300;}
.button{ border: none;    background-color: #e43b2c; color: #fff;    font-size: 22px; font-family: "Oswald", sans-serif; padding: 13px 35px; text-decoration: none; display: flex; align-items: center; gap:5px 10px; text-align: center; justify-content: center; font-weight: 700; }
.button:hover{ background-color: #c81100; color: #fff; text-decoration: none; }

.asSeenOn{ background-color: #474747;}
.mainTitle h2{ font-size: 32px; color: #fff; line-height: 1.4; font-weight: 700; margin: 0; margin-bottom: 10px; text-align: center;}
.whitebg .mainTitle h2{ color: #000;}
.asSeenOnText{ display: flex; flex-wrap: wrap; gap:20px 10px; max-width: 820px; margin: 0 auto; background-color: #fff; padding: 20px;}
.asSeenOnText .logo{ flex: 1; text-align: center;}
.asSeenOnText .logo p{ font-size: 28px; color: #2f2f2f; font-weight: 700; margin: 0;}
.asSeenOnText .logo p b{ font-weight: 700;}
.asSeenOnText .logo.huffpost p { font-style: italic;}
.asSeenOnText .logo.yahoo p b{ color: #7a1ba1; }
.asSeenOnText .logo.yahoo p{ font-weight: 400;}
.asSeenOnText .logo.tonightShow p{ font-size: 20px; font-weight: 400; line-height: 1.1; }
.asSeenOnText .logo.tonightShow p .small{ font-size: 10px; line-height: 1;}

.photoGallary{ display: flex; flex-wrap: wrap; gap: 50px; align-items: flex-start;}
.photoGallary img{ width: calc(50% - 25px); padding: 5px; background-color: #fff; }

.predicationSection .row{     --bs-gutter-y: 1.5rem;}
.predicationBox{ text-align: center; padding: 0 10px; }
.predicationBox i{ font-size: 26px;     color: rgb(252, 55, 134); margin-bottom: 10px;}
.predicationBox h4{ font-size: 22px;  line-height: 1.4; font-weight: 700; margin: 0; margin-bottom: 10px;}

.predicationBox p{ font-size: 16px; color: #000; line-height: 1.4; text-align: center; margin: 0; }
.seriouslyThoughSection .mainTitle{ max-width: 925px; margin: 0 auto; text-align: center;}
.seriouslyThoughSection .mainTitle h2{ font-size: 50px;}
.seriouslyThoughSection .mainTitle h2 span{ font-weight: 400;}
.seriouslyThoughSection .mainTitle p{ font-size: 22px; color: #fff; line-height: 1.4; text-align: center; margin: 0;}
.seriouslyThoughSection img{ width: auto; max-width: 100%; height: auto; margin-top: 30px; padding: 0 10px;}
.seriouslyThoughSection{ text-align: center;}

.letmeDrawSection .mainTitle h2{font-size: 48px; color: #2f2f2f; text-align: left; }
.letmeDrawSection .mainTitle p{ font-size: 20px; color: #2f2f2f;}
.letMeDrawContent p{ font-size: 18px;}
p.order{ font-size: 16px; margin: 0; margin-top: 16px;     letter-spacing: 3px; text-align: center;}
.FAQSection{ padding: 40px;     background-color: rgb(247, 240, 240);}
.FAQSection h2{ text-align: center; font-size: 32px; margin-bottom: 40px;}
.FaqText h4{ font-size: 19px; font-weight: 700; color: #2f2f2f;}
.FaqText p{ font-size: 14px; color: #2f2f2f; line-height: 1.4; margin: 0;}
.FaqText + .FaqText{ margin-top: 30px;}

.footerContainer{ max-width: 510px; margin: 0 auto;}
.footerContainer .resources {text-align: center; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #fff;}
.footerContainer .resources h2{ font-size: 24px; color: #fff; line-height: 1; font-weight: 700; margin: 0; margin-bottom: 20px;}
.footerContainer .resources ul{ list-style: none; padding: 0;margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; justify-content: center; margin-bottom: 40px; }
.footerContainer .resources ul li{ line-height: 1;}
.footerContainer .resources ul li a{ text-decoration: none; font-size: 12px; color: #fff; font-weight: 400;}
.footerContainer .resources .copyRight p{ font-size: 12px; color: #fff; line-height: 1.4; font-weight: 400; margin: 0; font-weight: 700;}
.footerLink.resources ul{ margin: 0;}
.footerLink.resources{ margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 40px; }
.footerLink.resources p{ font-size: 12px; color: #fff; line-height: 1.4; font-weight: 400; margin: 0;}
.footerLink.resources p.left{ text-align: left;}

.soulmateDrawingPopUp{     --bs-modal-padding: 40px;     --bs-modal-width: 720px;}
.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;}
.progressBar{ border-radius: 0; --bs-primary-rgb:66, 139, 202;}
.soulmateDrawingPopUp .modal-body, .soulmateDrawingPopUp form{ display: flex; flex-direction: column; gap: 20px;}
.soulmateDrawingPopUp .formTitle h2{ font-size: 23px; text-align: center; font-weight: 500; color: #2f2f2f;}
.soulmateDrawingPopUp .inputBox { display: flex; flex-direction: column; gap: 10px;}
.soulmateDrawingPopUp .inputBox label{ font-size: 16px; color: #2f2f2f; font-weight: 700;}
.soulmateDrawingPopUp .inputBox input, .soulmateDrawingPopUp .inputBox select{ border-radius: 5px; border: 1px solid rgba(0,0,0,0.2); padding: 12px 18px; font-size: 16px; box-shadow: inset 0 1px 2px rgba(130,137,150,0.23),0 1px 0 rgba(255,255,255,0.95); appearance: none; color: #111213; width: 100%;}
.soulmateDrawingPopUp .inputBox select{ background: url(../../images/landing/dropdown.svg)no-repeat; background-position: center right 18px; background-size: 10px;}
.soulmateDrawingPopUp .inputBox input:focus-visible, .soulmateDrawingPopUp .inputBox select:focus-visible{ outline: none; border-color: rgba(0,0,0,0.2); }
.soulmateDrawingPopUp .button{ width: fit-content; margin: 0 auto;  font-family: sans-serif;}
.soulmateDrawingPopUp .discription p{font-size: 12px; color: #2f2f2f; }
.soulmateDrawingPopUp.modal.fade .modal-dialog{ margin: 40px auto;}

.productPage{ background-color: #fff; min-height: 100vh;}
.dateInputSection { display: flex; gap: 10px;}
.dateInputSection .dateInput{ flex: 1;}
.dateInputSection .dateInput label{ font-size: 14px;}

.button.smallText{font-family: sans-serif; flex-direction: column;     letter-spacing: 2px;  width: 100%;}
.button.smallText span{ font-size: 12px; opacity: 0.7;}

.almostDone h1{ font-size: 40px; margin: 0; font-weight: 700; line-height: 1.2; margin-bottom: 16px;}
.almostDone .title p{ font-size: 20px; color: #e43b2c;     letter-spacing: 3px; }
.almostDone ul li{ font-size: 17px; list-style: none; display: flex; gap: 10px;}
.almostDone ul li + li{ margin-top: 16px;}
.almostDone ul li::before{     content: "\f00c"; font-family: "Font Awesome 5 Free";  font-size: 17px; font-weight: 900;}
.almostDone ul{ padding: 0; margin: 0; margin-bottom: 20px;}
.almostDone .alostDoneImg{ display: none;}
.alostDoneImg{ padding: 0 10px;}
hr{ margin: 0; border-top: 1px solid #2f2f2f; opacity: 1;}
.mainTitle h4{ font-size: 24px; text-align: center; margin: 0; margin-bottom: 40px; color: #2f2f2f;}
.realSketch img{ padding: 0 10px; object-position: top;}
.realSketch {--bs-gutter-y: 50px;}
.graybg{ background-color: rgb(248, 248, 248);}

.soulmateSketchText h2{ font-size: 34px; color: #2f2f2f; margin: 0; margin-bottom: 16px;}
.soulmateSketchText p.big{ font-size: 23px; }
.soulmateSketchText p{ font-size: 18px; margin: 0; margin-bottom: 16px;}
.soulmateSketchSection{ margin-bottom: 40px;}
.tristaDianeSection{ display: flex; gap: 10px; align-items: center; padding: 40px 0; border-top: 1px solid #2f2f2f; border-bottom: 1px solid #2f2f2f;}
.tristaDianeSection .tristaDianeImg{ max-width: 200px;}
.tristaDianeSection .tristaDianeImg img{ aspect-ratio: 1 / 1; object-fit: contain; border-radius: 50%;}
.tristaDianeText p{ font-size: 16px; line-height: 1.1; font-style: italic; margin: 0;}
.tristaDianeText p + p{ margin-top: 16px;}
.tristaDianeText h5{ margin: 0; font-size: 18px; font-weight: 700; margin: 0; margin-top: 10px;}
.graybgdark{ background-color: rgba(96, 96, 96, 0.43);}
.orderSolumate{ margin-top: 60px; text-align: center;}
.orderSolumate h3{font-size: 30px; margin: 0; margin-bottom: 16px; font-weight: 400;   }
.orderSolumate.white :where(h3, p){ color: #fff;}
.orderSolumate .button{ font-size: 34px; width: fit-content; margin: 0 auto;}

.FAQMainSection .FAQSection{ background-color: transparent; padding: 0;}
.FAQMainSection{ background-color:rgb(245, 245, 245);}
.disclaimer p{ font-size: 12px; margin: 0; line-height: 1.2;}
.disclaimer{ margin-top: 40px;}

.productFooterContainer{ background-color: #2d2d2d; padding: 80px 30px; max-width: 550px;}
.productFooterContainer .resources{ border: none; padding: 0; margin: 0;}
.productFooterContainer .disclaimer p{ color: #fff; text-align: center;}

.video-thumbnail-wrapper { position: relative; width: 100%; max-width: 640px; cursor: pointer;  }
.video-thumbnail-wrapper img { width: 100%; height: auto; display: block;}
.video-thumbnail-wrapper .play-button { position: absolute; top: 50%; left: 50%; font-size: 20px; transform: translate(-50%, -50%); aspect-ratio: 16 / 10; background-color: #42B0E2; width: 90px; pointer-events: none; display: flex; align-items: center; justify-content: center;  }
.video-thumbnail-wrapper .play-button i{ color: #fff; }
.wistia-embed-container { display: none; }

.thankyouSection{    background-color: rgb(239, 239, 239); min-height: 100vh;    background-image: linear-gradient(135deg, #fdf4ff, #fae8ff, #f4d7f9, #f5e4f7, #f2b0fc);  }
.thankyouContent{ max-width: 900px; margin: 0 auto; text-align: center;}
.thankyouContent .thankyouText h2{ color: #ed9aa0; font-size: 48px; margin: 0; margin-bottom: 20px; font-weight: 700;}
.thankyouContent .thankyouText p{ color: #2f2f2fae; font-weight: 700; font-size: 20px; }
.thankyouContent .thankyouText p span{ font-weight: 400;}
.thankyouBox{ border: 3px solid rgba(0,0,0,0.7); padding: 20px;     border-radius: 5px; margin-top: 20px;}
.thankyouBox h3{ font-size: 23px; color: #2f2f2f; margin: 0; font-weight: 700;} 
.thankyouBox  img{ max-width: 350px; border-radius: 5px; margin: 25px 0;}
.thankyouBox .button{ width: fit-content; background-color: rgb(66, 185, 159); margin: 0 auto;}
.yourProductReceipt{ text-align: left; background-color: #fff; max-width: 720px; margin: 0 auto; padding: 40px; border: 3px solid rgba(47, 47, 47, 0.11); margin-top: 20px;}
.yourProductReceipt h4{ background-color: rgb(237, 154, 160);     padding: 10px; border-radius: 5px;  font-size: 18px; font-weight: 700; color: #fff; margin: 0px;} 
.yourProductReceipt p{ font-size: 18px; color: #2f2f2f; margin: 0;}
.yourProductReceipt p{ margin-top: 20px;}
.yourProductReceipt p.link{ text-align: center; font-size: 16px;}
.yourProductReceipt p.link a{ text-decoration: none;}
.yourProductReceipt p.link a:hover{ text-decoration: underline;}
.thankyouCopyRight{  max-width: 660px; margin: 0 auto; margin-top: 40px;}
.thankyouCopyRight p{ font-size: 14px; margin: 0; color: #2f2f2f;}
.thankyouCopyRight p + p{ margin-top: 20px;}

.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 + .accordion-item{ margin-top: 16px; }
.faqAccordionSection .accordion-item { border-radius: 24px; overflow: hidden; }
.faqAccordionSection .accordion-button {padding: 24px 32px; font-size: 24px; line-height: 1.2; gap: 10px;}
.faqAccordionSection .accordion-body {padding: 24px 32px; padding-top: 0; }
.faqAccordionSection .accordion-body p{ font-size: 20px; color: #626364; line-height: 1.5;}
.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 #111213;}
.faqAccordionSection .accordion-button:not(.collapsed)::after{  background-image: url(../../images/landing/minus.svg);  background-color: #111213; border-color: #111213;}

.faqSection .mainTitle{ margin-bottom: 40px;}
.faqSection .mainTitle p{ color: #fff; text-align: center;} 
.LetMeImg{ display: none;}

.loginMainSection{ display: flex; height: 100vh; justify-content: center; align-items: center;}
.loginMainSection .mainTitle{ margin: 0; padding-bottom: 20px; border-bottom: 1px solid #3d3d3d;}
.loginMainSection .mainTitle p{ margin: 0; font-size: 16px; color: #fff; text-align: center;}
.loginMainSection .mainTitle h2{ line-height: 1;}
.loginMainSection .headerContainer{ max-width: 450px;}
.loginContent img{ height: 50px; margin-bottom: 10px;}
.loginForm{ padding-top: 20px;}
.loginForm.soulmateDrawingPopUp .inputBox label{ color: #fff;}
.loginForm.soulmateDrawingPopUp .inputBox input, .loginForm.soulmateDrawingPopUp .inputBox select{ background-color: transparent !important; border-color: #fff; color: #fff; box-shadow: none; border-radius: 0 !important;}
.loginForm .button{ width: 100%; font-size: 16px;}
.forgorpassword{ display: flex; justify-content: space-between;}
.forgorpassword label{ color: #fff; font-size: 16px; font-weight: 700;}
.forgorpassword .rememberMe input[type="checkbox"]{ height: 20px; width: 20px; border-radius: 0;}
.forgorpassword .rememberMe{ display: flex; align-items: center; gap: 10px;}
.forgorpassword .forgot a{ text-decoration: none; font-size: 16px; color: #fff; font-weight: 700; }

@media (min-width: 1200px){
    .container{ max-width: 1140px;}
}

@media( width <= 991px){
    .letMeDrawContent{ margin-bottom: 30px;}
    .alostDoneImg{ display: none; padding: 0;     margin-bottom: 1rem;}
    .almostDone .alostDoneImg{ display: block;}
}
@media( width <= 767px){
    .seriouslyThoughSection .mainTitle h2{ font-size: 25px;}
    .seriouslyThoughSection .mainTitle p { font-size: 16px;}
    .asSeenOnText .logo{ width: 100%; flex: none;}
    .asSeenOnText .logo.yahoo br{ display: none; }
    .button{ font-size: 16px; padding: 10px;}
    .soulmateDrawingPopUp .btnClose{ right: 0;}
    .tristaDianeSection{ flex-direction: column-reverse;}
    .thankyouContent{ gap: 20px;}
    .LetMeImg{ display: block; margin: 20px 0;}
    .orderSolumate .button{ font-size: 22px;}
    .forgorpassword label, .forgorpassword .forgot a{ font-size: 14px;}

}

@media(width <= 567px){
    .soulmateLogo{margin: 0 auto;}
    .landing-header .container, .asSeenOn .container, .container:has(.FAQSection), .topbar .container{     --bs-gutter-x: 0;}
    .landing-header .container .row, .asSeenOn .container .row, .container:has(.FAQSection) .row, .topbar .container .row{     --bs-gutter-x: 0;}
    .photoGallary{ gap: 25px;}
    .photoGallary img{ width: 100%;}
    .headerVideoSection h1{ font-size: 26px;}
    .headerVideoSection p{ font-size: 18px;}
    .mainTitle h2{ font-size: 22px;}
    .asSeenOnText .logo p{ font-size: 22px;}
    .predicationBox h4{ font-size: 20px;}
    .letmeDrawSection .mainTitle h2{ font-size: 30px;}
    .letmeDrawSection .mainTitle p, .letMeDrawContent p{ font-size: 16px;}
    .FAQSection{ padding: 40px 15px;}
    .soulmateDrawingPopUp { --bs-modal-padding: 40px 20px;}
    .soulmateDrawingPopUp .formTitle h2{ font-size: 20px;}

    .soulmateDrawingPopUp .inputBox label{ font-size: 14px;}
    .soulmateDrawingPopUp .inputBox input, .soulmateDrawingPopUp .inputBox select{ font-size: 14px;}

    .almostDone h1{ font-size: 30px;}
    .almostDone .title p{ font-size: 18px;}
    .almostDone ul li, .almostDone ul li::before{ font-size: 15px;}
    .mainTitle h4{ font-size: 20px;}
    .realSketch { --bs-gutter-y: 25px;}
    .soulmateSketchText h2{ font-size: 28px;}
    .soulmateSketchText p.big{ font-size: 18px;}
    .soulmateSketchText p{ font-size: 16px;}
    .orderSolumate h3{ font-size: 22px;}

    .FAQMainSection .container, .FAQMainSection .row{ --bs-gutter-x: 1.5rem;}
    .FAQSection h2{ font-size: 28px;}

    .container:has(.productFooterContainer), .row:has(.productFooterContainer){ --bs-gutter-x: 0;}
    .video-thumbnail-wrapper .play-button{ width: 60px; font-size: 14px;}

    .thankyouContent .thankyouText h2{ font-size: 30px;}
    .thankyouContent .thankyouText p{ font-size: 18px;}
    .thankyouBox h3{ font-size: 20px;}
    .yourProductReceipt{ padding: 20px;}
    .yourProductReceipt p{ font-size: 16px;}
    .forgorpassword label, .forgorpassword .forgot a{ font-size: 12px;}
}