@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;1,300&display=swap');
/*common*/
html {
	scroll-behavior: smooth;
  }
:root {
	--font-ws: 'Work Sans';
	--font-h2: 42 
}
.max-w{max-width: 760px; margin: auto;}
.img-fluid{ max-width: 100%;}
.sp-50{ padding-top:30px; padding-bottom:30px;}
.spt-50{ padding-top:30px;}
.spb-50{ padding-bottom:30px;}
.btn:focus, .btn.focus, a:focus, .swiper-pagination-bullet:focus, button:focus {outline: 0; box-shadow: none !important;}
.btn{transition: all 300ms linear; border-radius: 0;}
.btn-blue{ background: var(--color-blue); border: 1px solid var(--color-blue); color: #fff;}
.btn-blue:hover{ background: transparent; color: var(--color-blue);}
.text-center{ text-align: center;}
.page-template-template-jessie-paul .td-scroll-up {background-color: #000;}
@media (max-width: 767px) {
	.container{ width: 95% !important;}
}

@media (min-width: 992px) {
.sp-50{ padding-top:50px; padding-bottom:50px;}
.spt-50{ padding-top:50px;}
.spb-50{ padding-bottom:50px;}
span.db{ display: block;}
}


.jp-single--page p, 
.jp-single--page a, 
.jp-single--page li{font-family: var(--font-ws) !important; font-size: 16px !important;}
.jp-single--page h1, .jp-single--page h2, .jp-single--page h3, .jp-single--page h4, .jp-single--page h5{ margin: 0;}
.jp-single--page h2, .jp-single--page h3, .jp-single--page h4, .jp-single--page h5{ font-family: var(--font-ws) !important;}

.page-template-template-jessie-paul .td-header-wrap,
.page-template-template-jessie-paul .td-footer-wrapper,
.page-template-template-jessie-paul .td-sub-footer-container{ display: none;}

.jp--banner{ background: url(img/jp-ban-bg.jpg) no-repeat fixed center center; background-size: cover; height: 430px; position: relative; padding-top: 30px; overflow: hidden;}
.jp--banner h1{font-family: 'Roboto', sans-serif; text-align: center; color: #fff; font-size: 50px; line-height: 60px; font-weight: 900; margin-bottom: 30px;}
.jp--banner .jp__pic{ position: absolute; left: 0; right: 0; bottom:0; margin: auto; text-align: center; line-height: 0;}

.jp--marketing h2{ font-size: 26px; line-height: 34px; font-weight: 600; margin-bottom: 30px;}
.jp--marketing h3{ font-size: 22px; line-height: 30px; font-weight: 400; margin-bottom: 30px;}
.jpm__inner{max-width: 760px; margin: auto;}
.jpm__top{ text-align: center;}
.jpm__btm_left{ text-align: center;}

.jpm__top .red-ul{ position: relative;}
.jpm__top .red-ul:before{ content: ""; background: url(img/vector2.svg) no-repeat; display: inline-block; background-size: 100px 11px; width: 100px; height: 11px; position: absolute; left: 0; bottom: -8px;}

.board--mem{ background: #9C2B31; color: #fff;}
.board--mem .bmem__inner{ max-width: 760px; margin: auto;}
.board--mem h3{ font-size: 22px; line-height: 30px; font-weight: 400; color: #fff; margin-bottom: 20px;}

.quo--sec h3{font-size: 22px; line-height: 30px; font-weight: 600; text-align: center;}
.launching--soon h2{ font-size: 26px; line-height: 34px; font-weight: 600; color: #fff; text-align: center;}
.ls-right p strong{ font-weight: 600;}
.ls-left{ position: relative; width: 100%; height: 100%;}
.ls-left .ls-img{ margin: 20px auto; text-align: center;}
.launching--soon{background: linear-gradient(to bottom, rgba(156,43,49,1) 0%,rgba(156,43,49,1) 24%,rgba(244,244,244,1) 24%,rgba(244,244,244,1) 100%);}
.diy--sec h4{ font-size: 18px; line-height: 30px; font-weight: 400;}
.diy--sec .red-ul{ position: relative;}
.diy--sec .red-ul:before{ content: ""; background: url(img/vector2.svg) no-repeat; display: inline-block; background-size: 100px 11px; width: 100px; height: 11px; position: absolute; left: 0; bottom: -8px;}
.diy--sec span.db{ display: block;}

@media (min-width: 390px) {
	.jp--banner{ height: 500px;}
}

@media (min-width: 420px) {
	.jp--banner{ height: 600px;}
}

@media (min-width: 768px) {
	.jp--banner{ height: 600px;}
	.jp--banner h1{font-size: 80px; line-height: 90px;}
	.diy--sec span.db{ display: unset;}
	.jpm__btm_left{ text-align: unset;}
}
@media (min-width: 992px) {
	.jp--banner{ height: 650px;}
	.jp--banner h1{font-size: 120px; line-height: 140px;}
	.jp--marketing h2{ font-size: 42px; line-height: 62px;}
	.jp--marketing h3{ font-size: 36px; line-height: 42px;}
	.jpm__top .red-ul:before{ background-size: cover; width: 182px; height: 14px; left: 0; bottom: -10px;}
	.board--mem h3{ font-size: 36px; line-height: 42px; margin-bottom: 0px;}
	.quo--sec h3{font-size: 36px; line-height: 42px;} 
	.launching--soon{background: linear-gradient(to right, rgba(156,43,49,1) 0%,rgba(156,43,49,1) 40%,rgba(244,244,244,1) 40%,rgba(244,244,244,1) 100%);}
	.ls-left{ position: relative; width: 100%; height: 100%;}
	.ls-left .ls-img{ position: absolute; right: 0; bottom: 0; line-height: 0; margin: unset; text-align: unset;}
	.launching--soon h2{ font-size: 42px; line-height: 50px; position: relative; top: 70px; left: 80px; text-align: unset;}
	.diy--sec .red-ul:before{ background-size: cover; width: 182px; height: 14px; left: 0; bottom: -10px;}
	.diy--sec h4{ font-size: 25px; line-height: 43px; font-weight: 400;}
}

.hightlight--sec{ background: #000; color: #fff;}
.hightlight--sec h4{font-size: 18px; line-height: 26px; font-weight: 600; color: #fff; text-align: center; margin-bottom: 30px;}
.hlBox{ display: flex;}
.hlBoxM{ margin-top: 30px; margin-bottom: 30px;}
.hltext{ color: #fff; font-size: 18px;}
.hlIcon{ margin-right: 20px; width: 42px; height: 42px;}
.hlIcon img{ max-width: unset;}
.hightlight--sec h3{ position: relative; font-size: 22px; line-height: 30px; font-weight: 600; color: #fff; margin-bottom: 40px; margin-top: 30px; text-align: center;}
.hightlight--sec h3:before{ content: url(img/vector-arrow.svg); position: absolute; left: 0; right: 0; bottom: -60px; text-align: center;}
.swi-box{ background: #FCF050; padding: 30px 20px 30px 30px; position: relative; margin-bottom: 30px; width: 100%;}
.swi-box h5{ font-size: 18px; line-height: 22px; font-weight: 500; padding-top: 20px; padding-bottom: 20px;}
.jp-single--page .swi-box p{ font-size: 12px !important; color: #000; line-height: 14px !important; font-weight: 400;}
.swi-box:before{content: url(img/paper.png); position: absolute; left: 0; right: 0; top: -17px; text-align: center;}
.swi-box .chap{font-weight: 500; font-size: 10px; line-height: 12px; text-transform: uppercase; color: #000;}
.swi-box-last{ background: url(img/cover-bg.jpg) no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center;}
.swi-box.swi-box-last::before{ content: none;} 

.jp--bio h4{font-size: 18px; line-height: 22px; font-weight: 400;}

@media (min-width: 768px) {
	.swi .col-md-4, .swi .col-lg-3{ display: flex; align-items: stretch;} 
	.hlBoxM{ margin-top: unset; margin-bottom: unset;}
	.hlIcon{ margin-right: 30px;}
	.jp--bio h4{font-size: 25px; line-height: 36px;}
}

@media (min-width: 992px) {
	.hightlight--sec h4{font-size: 25px; line-height: 43px;}
	.hightlight--sec h3{ font-size: 36px; line-height: 42px; margin-bottom: 40px;}
	.swi-box{padding: 30px 20px 30px 30px; margin-bottom: 60px;}
	.swi-box h5{ font-size: 22px; line-height: 26px;}
}

.signup--sec{/*background: url(img/formsecbg.jpg) no-repeat fixed center right #F9F9F9; background-size: cover;*/ background:#F9F9F9;}
.signup--sec .su-pre{ font-size: 18px; line-height: 22px; color: #FFFFFF; font-weight: 600; background: #9C2B31; padding: 10px 20px; display: inline-block; margin-bottom: 30px;}
.signup--sec .su-pre a{font-size: 18px !important; line-height: 22px !important; color: #FFFFFF !important; font-weight: 600 !important;}
.pre-order-form{ max-width: 700px; margin: auto;}
.pre-order-form div.wpforms-container .wpforms-form div.wpforms-submit-container button[type="submit"]{background: #000;}
.pre-order-form input {background: #F9F9F9 !important; border: 1px solid #000 !important; padding-left: 10px !important;}


.abt__item{ text-align: center;}
.jp--ftr{ background: #9C2B31; padding: 15px 0px; color: #fff;}
.jp--testimonial{ background:#F9F9F9;}
.jps__testimonial .elementor-testimonial__text, 
.jps__testimonial .elementor-testimonial__cite, 
.jps__testimonial .elementor-testimonial__name,
.jps__testimonial .elementor-testimonial__footer{ font-family: var(--font-ws) !important;}


@media (max-width: 768px) {
	.jps__testimonial.elementor-testimonial--layout-image_left .elementor-testimonial {flex-direction: column-reverse !important;}
	.jps__testimonial .elementor-testimonial__image img{ width: 80px !important; height: 80px !important;}
	.about--me .row{ flex-direction: column-reverse;}
	.quo-perc p{ text-align: center;}
}
@media (min-width: 768px) {
	.signup--sec .su-pre{ font-size: 25px; line-height: 29px; padding: 10px 30px;}
	.signup--sec .su-pre a{font-size: 25px !important; line-height: 29px !important;}
	.pre-order-form .wpforms-form{ display: grid; grid-template-columns: 80% auto; justify-content: center; grid-column-gap: 10px; align-items: center;}
	.pre-order-form .wpforms-field-container {display: grid; grid-template-columns: auto auto; grid-column-gap: 10px;}
	.pre-order-form div.wpforms-container .wpforms-form div.wpforms-submit-container button[type="submit"]{ height: 37px; line-height: 0; padding: 0px 30px; position: relative; top: 5px; background: #000;}
	.jps__testimonial .elementor-testimonial__image img{ border-radius: 13px !important; width: 100% !important; height: 250px !important;}
	.abt__item{ text-align: unset;}
	.jps__testimonial .eicon-chevron-right::before{ content: url(img/chevron-right.svg) !important;}
	.jps__testimonial .eicon-chevron-left::before{ content: url(img/chevron-left.svg) !important;}
	.jps__testimonial.elementor-widget-testimonial-carousel .elementor-swiper-button-prev{ left: -20px;}
	.jps__testimonial.elementor-widget-testimonial-carousel .elementor-swiper-button-next{ right: -20px;}
}