:root{
	/* Colors */
	--cloud-tint-1:#F3F3F0;
	--cloud-tint-2:#E3DED7;
	--cloud-tint-3:#C8C0B8;
	--cloud-tint-4:#6B635C;
	--peach:#E99F7B;
	--white:#FFFFFF;
	--black:#000000;
	--ocean-90:#0E2349;
	--ocean-60:#4A73B6;
	--ocean-30:#87A7DC;
	--ocean-10:#BDD4F7;
	--ocean-05:#D9E8FF;
	--ocean-subtle:#D9E8FF;
	--sunbeam-40:#F0F3BB;
	--crimson:#641B2E;
	--crimson-subtle:#F0D5DC;
	--seaglass:#08908C;
	--harvest-subtle:#FFD7C7;
	--sunflower-subtle:#FFEABA;
	--text-neutral:#5A5A58;
	--accentyellow:#F0F3BB;
	--accentpink: #D84B8A;
	--harvest-stark: #3D2218;
	--med-contrast: #2A2A28;
	--text-medium: #252626;
    --utility-warning: #FA4D4D;
	--background-level-1: #FAF9F6;

	/* Sizing */
	--size-4: 4px;
	--size-8: 8px;
	--size-12: 12px;
	--size-14: 14px;
	--size-15: 15px;
	--size-16: 16px;
	--size-18: 18px;
	--size-20: 20px;
	--size-24: 24px;
	--size-28: 28px;
	--size-32: 32px;
	--size-36: 36px;
	--size-40: 40px;
	--size-44: 44px;
	--size-48: 48px;
	--size-56: 56px;
	--size-64: 64px;
	--size-72: 72px;
	--size-80: 80px;
	--size-88: 88px;
	--size-96: 96px;
	--size-104: 104px;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;

	/* Typography */
	--font-body: 'Inter', sans-serif;
	--font-heading: 'STIX Two Text', serif;

	/* Transitions */
	--transition: all 0.3s ease;

}

*{ margin:0px; padding:0px; outline:0px; box-sizing: border-box;}
*, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
a{text-decoration:none; color:var(--ocean-90); transition: var(--transition);}
a:hover{transition: var(--transition); color:var(--accentpink);}
a img, img{border:0px; outline:none;}
img{max-width:100%; height:auto;}
a, input[type="submit"], button{outline:none;  }
.clear{clear:both;}
::-moz-placeholder{ opacity:1; }
input[type=submit], button, select{ -moz-appearance: none;-webkit-appearance: none;}
input, select, button, textarea{font-family: var(--font-body); font-weight:400;}
input[type=submit], button{ cursor:pointer;transition: var(--trns);}
input[type="submit"], input[type="text"], input[type="date"], input[type="time"], input[type="search"], button, input[type="email"], input[type="tel"], textarea, select{-webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0;}
h1, h2, h3, h4, h5, h6, p, ul, li, label, input, textarea, img, submit, button, a{ margin: 0px; padding: 0px; outline: none; list-style: none;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {order: 0;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align:baseline;}
html {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-size: 62.5%;overflow-y: scroll;-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;scroll-behavior: smooth;}
q {-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;quotes: none;}
a:focus {outline:0;outline: 0;}
a:hover,
a:active {outline: 0;}
a img {border: 0;}
input::-webkit-input-placeholder { opacity: 1; }
input::-moz-placeholder { opacity: 1; }

body{color: var(--black); font-family: var(--font-body); font-weight:400; font-size:var(--size-16); line-height:calc(var(--size-16) + 4px); position:relative;}
strong, b{ font-weight:700;}
html {scroll-behavior: smooth;}

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; margin: var(--size-20) 0; }

h1, .x-large{ font-size: var(--size-56); line-height: calc(var(--size-56) + 4px); }
h2, .large{ font-size: var(--size-48); line-height: calc(var(--size-48) + 4px); }
h3, .medium{ font-size: var(--size-40); line-height: calc(var(--size-40) + 4px); }
h4, .small{ font-size: var(--size-32); line-height: calc(var(--size-32) + 4px); }
h5, .title-large{ font-size: var(--size-28); line-height: calc(var(--size-28) + 4px); }
h6, .title-medium{ font-size: var(--size-24); line-height: calc(var(--size-24) + 4px); }
.title-small{ font-size: var(--size-20); line-height: calc(var(--size-20) + 4px); }
.body-large{ font-size: var(--size-18); line-height: calc(var(--size-18) + 2px); }
.body-medium{ font-size: var(--size-16); line-height: calc(var(--size-16) + 4px); }
.body-small{ font-size: var(--size-14); line-height: calc(var(--size-14) + 4px); }
.label-small{ font-size: var(--size-12); line-height: calc(var(--size-12) + 4px); }

/* Width Utilities */
.w-100 { width: 100%; }
.w-90  { width: 90%; }
.w-80  { width: 80%; }
.w-75  { width: 75%; }
.w-70  { width: 70%; }
.w-66  { width: 66.666%; }
.w-60  { width: 60%; }
.w-50  { width: 50%; }
.w-40  { width: 40%; }
.w-33  { width: 33.333%; }
.w-30  { width: 30%; }
.w-25  { width: 25%; }
.w-20  { width: 20%; }


/* Font Weights and Families */
.regular{ font-weight: 400;}
.fontmedium{ font-weight: 500;}
.fontbold{ font-weight: 700;}
.semibold{ font-weight: 600;}
.stixtwo{ font-family: 'STIX Two Text', serif;}
.inter{ font-family: 'Inter', sans-serif;}


p:empty{ display: none!important;}
em{ font-style: italic;}
.btn{ cursor: pointer; display: inline-flex; padding: var(--size-15) var(--size-24); font-size: var(--size-16); line-height: 20.4px; font-weight: 600; color: var(--white); background-color: var(--ocean-90); border: 1px solid var(--ocean-90); border-radius: 50px; justify-content: center; align-items: center; gap: var(--size-8); }
.btn:hover, .btn:active{ background-color: var(--ocean-60); color: var(--white); transition: var(--transition); border-color: var(--ocean-60);}


.gap-24{ gap: var(--size-24);}
.gap-20{ gap: var(--size-20);}
.gap-16{ gap: var(--size-16);}
.gap-12{ gap: var(--size-12);}
.gap-8{ gap: var(--size-8);}


/* Text Color Utilities */
.textocean90{ color: var(--ocean-90);}
.textoceansubtle{ color: var(--ocean-subtle);}

/* Padding Utilities */
.py8{ padding: var(--size-8) 0;}
.py12{ padding: var(--size-12) 0;}
.py16{ padding: var(--size-16) 0;}
.py20{ padding: var(--size-20) 0;}
.py24{ padding: var(--size-24) 0;}
.py32{ padding: var(--size-32) 0;}
.py40{ padding: var(--size-40) 0;}
.py64{ padding: var(--size-64) 0;}
.py104{ padding: var(--size-104) 0;}
.pb64{ padding-bottom: var(--size-64);}


/* Margin Utilities */
.mt8{ margin-top: var(--size-8);}
.mt16{ margin-top: var(--size-16);}
.mt20{ margin-top: var(--size-20);}
.mt24{ margin-top: var(--size-24);}
.mt32{ margin-top: var(--size-32);}
.mt40{ margin-top: var(--size-40);}
.mt50{ margin-top: 50px;}
.mb40{ margin-bottom: var(--size-40);}
.mb50{ margin-bottom: 50px;}
.mb32{ margin-bottom: var(--size-32);}
.mb24{ margin-bottom: var(--size-24);}
.mb20{ margin-bottom: var(--size-20);}
.mb16{ margin-bottom: var(--size-16);}
.block{ display: block;}
.hubcontainer{ max-width: 1376px; margin: 0 auto; padding: 0 32px; width: 100%;}
.text-center { text-align: center; }
.text-white { color: var(--white); }
.flex { display: flex;}
.flex-between { display: flex; justify-content: space-between; align-items: center;}
.flex-center { display: flex; justify-content: center; align-items: center;}
.menutoggle{ display: none;}
.buttonwrap{ width: 100%; display: block;}
.buttonwrap span{ display: inline-block;}


/* New Login and Signup Page Styles */
.page-template-template-signup .elementor-location-header, 
.page-template-template-new-login .elementor-location-header,
.page-template-template-faqs .elementor-location-header,
.page-template-text-button-with-image-bg .elementor-location-header,
.page-template-large-text-on-image-bg .elementor-location-header,
.page-template-image-dynamic-text .elementor-location-header,
.page-template-text-buttons .elementor-location-header{ display: none;}
.page-template-template-signup #content .ast-container, 
.page-template-template-new-login  #content .ast-container,
.page-template-template-faqs #content .ast-container,
.page-template-text-button-with-image-bg #content .ast-container,
.page-template-image-dynamic-text  #content .ast-container,
.page-template-text-buttons  #content .ast-container,
.page-template-large-text-on-image-bg #content .ast-container{padding: 0px!important; max-width:100%; width:100%; margin:0 auto;}
.pagefullwidth{ width: 100%; position: relative; min-height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat;}
.mobilecontainer{ max-width: 440px; width: 100%; margin: 0 auto; position: relative;}
.authpage{width:100%; padding:65px 17px; text-align:center; background-repeat: no-repeat; background-size: cover; background-position: top center;font-family: var(--font-body);}
.authpage{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
body .authtitle{font-size:32px; line-height: 40px; font-weight: 600; font-family: var(--font-heading); color:var(--ocean-90); margin:0;}
.authsubtitle{font-size:20px; line-height: 24px; color:var(--ocean-90); margin:8px 0 0;}
.authsubtitle2{font-size:18px; line-height: 20px; color:var(--ocean-90); margin:8px 0 0; padding: 0 15px; text-shadow: 0 4px 12px rgba(50, 58, 70, 0.10);}
.authformarea{ width: 100%; margin: 32px 0 0;}
.authformcard{border-radius:20px; padding:20px; width:100%; background: #FAFAF6; box-shadow: 0 4px 12px 0 rgba(50, 58, 70, 0.10);}
.authformgroup{margin-top:20px; width: 100%; position: relative;}
.authformgroup:nth-child(1){ margin-top: 0;}
.authformcard .label{ text-align:left; display: block; margin: 0 0 8px; color:var(--ocean-90); font-size:16px; line-height: 20px; font-weight: 600; text-shadow: 0 4px 12px rgba(50, 58, 70, 0.10);}
.authformcard .label strong{ font-weight: 700;}
.authformcard .label em{ font-style: italic;}
.authformcard .formcontrol{width:100%; height:48px; background-color: #FAFAF6; border:1px solid rgba(11, 11, 6, 0.20); border-radius:6px;  padding:10px 12px; font-size: 16px; color: var(--ocean-90);}
.authformcard .formcontrol:focus{ border-style: solid; border-color: var(--ocean-90); background-color: #FAFAF6;}
.authformcard .inputinfo{ text-align: left; color: #5A5A58;font-size: 12px;font-weight: 400;line-height: 16px; letter-spacing: 0.24px; margin: 4px 0 0;}
.authformarea .btnwrapper{ width: 100%; margin: 20px 0 0;}
.btnwrapper .btn{ width: 100%; height: 52px; margin: 0; background: var(--ocean-60); color: #fff; border-radius: 50px; font-size: 16px; font-weight: 600; border: 0;}
.btnwrapper .btn:hover{ background: var(--ocean-90);}
.bottomlinks{ width: 100%; margin: 28px 0 0;}
.bottomlinks p{ font-size: 14px; font-weight: 400; padding: 12px 18px; margin: 0; color:var(--ocean-90); line-height: 18px;}
.bottomlinks p a{ color: var(--ocean-90); text-decoration: underline!important; text-underline-offset: 2px;}
.bottomlinks p a:hover{ color: var(--accentpink);}
.brandlogos{ width: 100%; display: flex; align-items: center; justify-content: center; padding: 20px 0 0;}
.brandlogos img{ display: block; margin: 0 auto; max-height: 29px;}
.brandlogos .logoitem{ display: flex; align-items: center; justify-content: center;}
.brandlogos .logoitem::after{ content: ''; display: inline-block; margin: 0 20px; height: 22px; width: 1px; border: 1px solid #C8C0B8;}
.brandlogos .logoitem:last-child::after{ display: none;}
.brandlogos .logoitem:nth-child(1) img{ width: 132px;}
.brandlogos .logoitem:nth-child(2) img{ width: 93px;}
.pt52{ padding-top: 52px;}
.page-template-template-faqs .ast-container{ background: var(--ocean-05);}
.page-template-template-faqs .defaultpage{ background: var(--ocean-05); padding-left: 4px; padding-right: 4px;}
body .faq-section-title{ margin: 0; text-transform: initial; position: relative; padding: 12px 0 5px; margin-bottom: 10px; border-bottom: 1px solid var(--ocean-30); font-size: 24px; font-weight: 600; line-height: 32px; color:var(--ocean-90); font-family: var(--font-heading);}
.faq-section{ padding: 0 0 15px;}
.faq-section:last-child{ padding-bottom: 0;}
.faq-item{ width: 100%; position: relative; padding: 14px 0; text-align: left; font-family: var(--font-body);}
.faq-item .faq-question{ width: 100%; position: relative; text-align: left; display: flex; justify-content: space-between; padding: 0; background: transparent; color: var(--text-medium); font-size: 17px; line-height: 24px; font-weight: 600; cursor: pointer; padding-right: 30px; transition: var(--transition);}
.faq-item.active{ background: transparent; border: 0;}
.faq-question .faq-icon{ position: absolute; top:0; right:0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size:0px; background-image: url(../images/plus-icon.svg); background-size: 100%; background-repeat: no-repeat; background-position: center; background-repeat: no-repeat; transition:.3s ease; }
.faq-item.active .faq-icon{ background-image: url(../images/minus-icon.svg);}
.faq-item .faq-question:hover, .faq-item .faq-question:focus{ background: transparent; color: var(--black);}
.faq-answer{display:none;}
.faq-answer p{ margin: 16px 0 0; font-size: 16px; line-height: 20px; color: var(--text-medium); }
.top-bar{ width:100%; font-family: var(--font-body); font-size:14px; line-height: 20px; gap:6px; font-weight: 500; color:var(--ocean-90); position:absolute; top:0; left:0; z-index: 99; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center;}
.top-bar .pageclose{ margin-right:0; margin-left:auto; width:24px; cursor:pointer; height:24px; display:flex; justify-content:center; align-items:center;}
.top-bar .pageclose svg{ width: 24px; height: 24px; display: block;}
.top-bar .back{ cursor:pointer; display:flex; justify-content:center; align-items:center; width:14px;}
.top-bar .back svg{ width: 14px; height: 14px; display: block;}
.top-bar .progress + .pageclose{ margin-left:18px;}
.top-bar .progress{margin-right:0; margin-left:auto; font-weight: 700;}
.top-bar.white{ color:var(--white);}
.top-bar.white .back svg path{ fill:var(--white);}
.top-bar.white .pageclose svg path{ stroke:var(--white);}
.defaultpage{ width:100%; position: relative; min-height: 100vh; background-color: var(--background-level-1); padding-top:52px; padding-left: 24px; padding-right: 24px; padding-bottom: 20px;}
.defaultpage.hasbgimage{ background-repeat:no-repeat; background-size: cover; background-position:center;}
.defaultpage.flex{ display: flex; flex-direction: column;}
.defaultpage .content { font-family: var(--font-body); color: var(--text-medium); flex: 1; display: flex; flex-direction: column;justify-content: center; padding: 20px 16px;}
.bottom-button{ width:100%; display:flex; justify-content:center; align-items:center; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 0 0;}
.bluenext-btn{ width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ocean-60);}
.bluenext-btn svg{ width: 24px; height: 24px; display: block;}
.bluenext-btn:hover{ background: var(--ocean-90);}
.whitenext-btn{ width: 64px; height: 48px; border-radius: 100px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10); display: flex; align-items: center; justify-content: center; background: var(--white);}
.whitenext-btn svg{ width: 24px; height: 24px; display: block; }
.whitenext-btn svg path{ stroke: var(--seaglass);}
.whitenext-btn:hover{ background: var(--ocean-60);}
.whitenext-btn:hover svg path{ stroke: var(--white);}
.defaultpage .content.white{ color: var(--white);}
body .defaultpage .content h1, body .defaultpage .content h2{ font-size: 24px; line-height: 32px; font-weight: 600; font-family: var(--font-heading); margin: 0 0 20px;}
.defaultpage .content p{ font-size: 18px; line-height: 22px; margin: 16px 0 0;}
body .defaultpage .content.white h1, body .defaultpage .content.white h2{ color: var(--white);}
body .defaultpage .content.textxl h3{ text-transform:uppercase; color:rgba(255,255,255,0.8); font-size: 12px; line-height: 16px; letter-spacing: 1px; font-weight: 700; font-family: var(--font-body); margin: 0 0 4px; text-align: center;}
.defaultpage .content.textxl p{ font-size: 24px; line-height: 24px; font-weight: 600;}
.dynamictext{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 24px; padding:16px 0 24px; text-align: center;}
.dynamictext h1{ font-size: 24px; line-height: 32px; font-weight: 600; font-family: var(--font-heading); margin: 0;}
.dynamictext h6{ font-size: 16px; line-height: 20px; font-weight: 600; font-family: var(--font-body); margin: 0;}
.dynamictext ul{ padding:0 16px; margin:0; list-style: none; display: flex; flex-direction: column; gap: 24px;}
.dynamictext ul li{ font-size: 18px; line-height: 22px; font-weight: 400; font-family: var(--font-body); margin: 0; text-align: left; position: relative; padding-left: 40px;}
.dynamictext ul li::before{ content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background-image: url('../images/check-dark-icon.svg'); background-size: 100%; background-repeat: no-repeat; background-position: center;}
.dynamictext img{ display: block; max-width: 100%; height: auto; margin: 0 auto;}
.mb0{ margin-bottom: 0!important; margin-top: auto!important;}
body .white-btn{ background: #fff; font-family: var(--font-body); color: var(--ocean-60); border-radius: 50px; padding: 12px 24px; font-size: 16px; line-height: 20px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
body .white-btn:hover{ background: var(--ocean-90); color: #fff; transition: var(--transition);}
body .bluebtn{ color: #fff; font-family: var(--font-body); background: var(--ocean-60); border-radius: 50px; padding: 12px 24px; font-size: 16px; line-height: 24px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
body .bluebtn:hover{ background: var(--ocean-90); color: #fff; transition: var(--transition);}
body .bluebtn svg{ width: 24px; height: 24px; display: block;}
body .whitebtn2{ color: var(--med-contrast); border: 1px solid rgba(11, 11, 6, 0.20); font-family: var(--font-body); background: #FAFAF6; border-radius: 50px; padding: 12px 24px; font-size: 16px; line-height: 24px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
body .whitebtn2:hover{ background: var(--ocean-90); border-color: var(--ocean-90); color: #fff; transition: var(--transition);}
body .whitebtn2 svg{ width: 24px; height: 24px; display: block;}



/* Course Section Styles */
body .primarybtn{ display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; color: #fff; background: var(--ocean-60); border: 1px solid var(--ocean-60); font-size: 16px; font-weight: 600; line-height: 20px; border-radius: 90px;transition: all 0.3s ease-in-out;}
body .primarybtn:hover{ background: var(--ocean-90); border-color: var(--ocean-90); transition: all 0.3s ease-in-out;}
.atpcourse_fullbody{ width:100%; background: var(--ocean-05); position: relative; }
.atpcourse_hero{ padding: 40px 20px;}
.atp-cover{ width: 100%;}
.atp-cover img{ width: 100%; display: block; margin: 0 auto;}
.atp_helpicon{ display:flex; justify-content: flex-end;}
.atp_helpicon img{ display: block; width: 24px;}
.atpbtns{ width: 100%; position: relative; display: flex; flex-direction: column; gap: 12px;}
.mt40{ margin-top: 40px;}
.atpcourse_fullbody.bg2{background: linear-gradient(180deg, #D9E8FF 0%, #E3DED7 100%);}
.atpcourse_fullbody .lesson-wrap{ padding: 0 20px 20px;}
.atpcourse_fullbody .lesson-box{ border-radius: 32px; border: 1px solid #fff; padding: 20px; position: relative; display: flex; gap: 8px; flex-direction: column; font-family: var(--font-body); transition: all 0.4s ease-in-out;}
.atpcourse_fullbody .lesson-box:hover{ border-color: var(--ocean-90); transition: all 0.4s ease-in-out;}


.atpcourse_fullbody .lesson-box .lesson-count{ font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ocean-60);}
.atpcourse_fullbody .lesson-box .row1{ margin: 0; padding: 0;}
.atpcourse_fullbody .lesson-box .lesson-name{ margin: 0; margin-block: 0; padding: 0; font-size: 20px; line-height: 24px; font-weight: 600; color: var(--ocean-90); font-family: var(--font-heading);}
.atpcourse_fullbody .lesson-box .lesson-time{ font-size: 12px; line-height: 18px; letter-spacing: 0.24px; font-weight: 600; color: var(--ocean-90); opacity: 0.7; margin: 0; }
.atpcourse_fullbody .lesson-box .desc p{ font-size: 14px; line-height: 18px; font-weight: 400; color: var(--ocean-90); opacity: 0.9; font-family: var(--font-body);}
.atpcourse_fullbody .lesson-box .desc{ display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}
.atpcourse_fullbody .lesson-box:last-child{ margin-bottom: 0;}
.atpcourse_fullbody .lesson-box.inactive{ opacity:1;}
.intropage{ position: relative; width: 100%; background: #103A55; color: #fff; }
.intropage.gradient{background: linear-gradient(180deg, #D9E8FF 0%, #E3DED7 100%);}
.intropage .lesson-steps{ display: none!important;}
.intropage a.prev, .intropage a.next{ display: none!important;}
.intropage .mySlides .contentbox{ width: 100%; color: var(--ocean-90); min-height: 100dvh; position: relative; height: 100%; display: flex !important; justify-content: center; align-items: center;}
.svgshapetop, .svgshapebottom{width: 100%; display: block;}
.svgshapetop img{ display: block; margin-bottom: 35px;} 
.svgshapebottom img{ display: block; margin-top: 35px;}
.svgshapebottom .bottomRight, .svgshapetop .topright{ margin-right: 0; margin-left: auto;}
/* Responsive Styles */






@media (max-width: 600px){
.authpage{ padding: 0 36px;}
.mobilecontainer{ max-width: 100%;}
.page-template-template-faqs .defaultpage{ padding-left: 24px; padding-right: 24px;}
}

.drip-unlock-time{ display: none;}

/* Code Added By Neeraj Rai */
/* ============================================================
   ATP CUSTOM VIDEO PLAYER STYLES
   Add this block to your devstyle.css (or style.css)
   ============================================================ */

/* 
   Force video slides to always stack vertically (title, text, video)
   regardless of theme breakpoints — fixes the sideways/2-column
   layout that appeared on wider screens. 
*/


.atp-video-contentbox { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100%;}
.atp-video-contentbox .video-slide-title,
.atp-video-contentbox .video-slide-desc { width: 100%;}
.atp-video-contentbox .atp-video-wrap { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto;}

/* Smooth transition when the outer page background color changes
   between slides (controlled by the "Page Background Color" ACF field) */
.intropage {transition: background-color 0.35s ease;}
.atp-video-wrap {position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 160px; background: #000; border-radius: 0; overflow: hidden; margin: 0;}


/* Poster / thumbnail state */
.atp-video-poster {position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.atp-video-play-btn {background: none; border: none; cursor: pointer; padding: 0; line-height: 0;}

/* Actual YouTube iframe target */
.atp-video-player {position: absolute; inset: 0; width: 100%; height: 100%;}
.atp-video-player iframe { width: 100%; height: 100%;}

/* Custom controls overlay */
.atp-video-controls {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.45) 100%);
    /* Intercept ALL clicks/taps across the whole overlay so nothing
       passes through to the YouTube iframe underneath — this is what
       was causing YouTube's own title bar / mute icon / "Shorts"
       branding to appear on top of our custom controls. */
    pointer-events: auto;
    z-index: 2;
}
.atp-video-controls button { pointer-events: auto;}

/* The iframe itself should never receive direct interaction — all
   playback is driven through the YouTube JS API from our own controls.
   This is a safeguard on top of the overlay above. */

.atp-video-player iframe {pointer-events: none;}
.atp-video-controls-top { display: flex; justify-content: space-between; align-items: center;}
.atp-video-controls-top button {
    background: rgba(0,0,0,0.35);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.atp-video-controls-center {display: flex; align-items: center;justify-content: center;gap: 28px;}
.atp-video-controls-center button { background: none; border: none; cursor: pointer; padding: 0; line-height: 0;}
.atp-video-controls-bottom { display: flex; align-items: center; gap: 10px;}


/* Auto-hide controls during playback — they fade out after a few
   seconds and reappear on tap (handled in JS). Opacity is used
   instead of display:none so the overlay can still catch the tap
   that brings the controls back. */
.atp-video-controls { opacity: 1; transition: opacity 0.25s ease;}
.atp-video-controls.atp-controls-hidden { opacity: 0;}
.atp-video-time-elapsed,
.atp-video-time-remaining {
    color: #fff;
    font-size: 12px;
    min-width: 32px;
    text-align: center;
}
.atp-video-seek {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: rgba(255,255,255,0.4);
    border-radius: 3px;
    outline: none;
}
.atp-video-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.atp-video-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
}

/* ============================================================
   SINGLE-SELECT QUESTION PILLS
   ============================================================ */
.atp-pill-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}
.atp-radio-pill {
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(14, 35, 73, 0.35);
    background: transparent;
    color: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.atp-radio-pill:hover:not(:disabled) {
    border-color: #0E2349;
}
.atp-radio-pill.selected {
    background: #0E2349;
    border-color: #0E2349;
    color: #fff;
}
.atp-pill-list.atp-locked .atp-radio-pill:not(.selected) {
    opacity: 0.45;
}
.atp-choose-one {
    font-size: 13px;
    opacity: 0.7;
    margin: 4px 0 0;
    text-align: center;
}
.atp-insight-msg {
    color: #1c7c4c;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-top: 18px;
}
.atp-lock-disclaimer {
    font-size: 12px;
    opacity: 0.6;
    text-align: center;
    margin-top: 6px;
}

/* ============================================================
   PEACE ANCHOR SLIDE (Day 7)
   ============================================================ */
.atp-peace-anchor-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}
.atp-peace-anchor-illustration img {
    max-width: 160px;
    margin: 0 auto 12px;
    display: block;
}
.atp-peace-anchor-title {
    text-align: center;
    margin: 0 0 14px;
}
.atp-peace-anchor-body {
    line-height: 1.6;
    margin-bottom: 24px;
}
.atp-peace-anchor-body strong {
    color: #0E2349;
}
.atp-peace-anchor-save-btn,
.atp-peace-anchor-howto-btn {
    width: 100%;
    padding: 14px;
    border-radius: 999px;
    border: none;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 10px;
}
.atp-peace-anchor-save-btn {
    background: #4A73B6;
    color: #fff;
    font-weight: 600;
}
.atp-peace-anchor-howto-btn {
    background: transparent;
    border: 1.5px solid rgba(14, 35, 73, 0.35);
    color: inherit;
}
.video-slide-title {
    margin: 0 0 24px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}
.video-slide-desc p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 20px;
}

/* ============================================================
   TEXT / BULLET POINT SLIDE EXTRAS
   ============================================================ */
.atp-middle-top-image {
    text-align: center;
    margin: 0 auto 12px;
}
.atp-middle-top-image img {
    max-width: 90px;
    display: inline-block;
}
.atp-text-above-bullets {
    margin: 0 0 16px;
    line-height: 1.5;
}
.atp-text-below-bullets {
    margin: 16px 0 0;
    line-height: 1.6;
}
.atp-text-below-bullets strong {
    display: block;
    margin-top: 10px;
}

/* ============================================================
   WHITE TEXT MODE — toggled per-slide via the "Text Color: White?"
   checkbox, for use on dark slide backgrounds.
   ============================================================ */
.intropage.textwhite,
.intropage.textwhite h1,
.intropage.textwhite h2,
.intropage.textwhite h3,
.intropage.textwhite h4,
.intropage.textwhite p,
.intropage.textwhite span,
.intropage.textwhite label,
.intropage.textwhite .lesson-count,
.intropage.textwhite .video-slide-title,
.intropage.textwhite .video-slide-desc,
.intropage.textwhite .qsn-row,
.intropage.textwhite .atp-choose-one,
.intropage.textwhite .atp-peace-anchor-title,
.intropage.textwhite .atp-peace-anchor-body,
.intropage.textwhite .goals-steps-box h3,
.intropage.textwhite .goals-steps-box .step-desc,
.intropage.textwhite .atp-text-above-bullets,
.intropage.textwhite .atp-text-below-bullets {
    color: #fff !important;
}
.intropage.textwhite .atp-radio-pill {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
}
.intropage.textwhite .atp-radio-pill.selected {
    background: #fff !important;
    color: #0E2349 !important;
}
.intropage.textwhite .atp-peace-anchor-body strong {
    color: #fff !important;
}

/* ============================================================
   FULL-COVER VIDEO MODE
   Once the user presses play, the video expands to fill the
   entire slide card (title/description hidden), matching the
   immersive full-bleed video experience in the design.
   Body class is toggled on/off by the JS play/close handlers.
   ============================================================ */
body.atp-video-fullcover-active .video-slide-title,
body.atp-video-fullcover-active .video-slide-desc {
    display: none !important;
}
body.atp-video-fullcover-active .atp-video-contentbox {
    padding: 0 !important;
}
body.atp-video-fullcover-active .atp-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 999999 !important;
}
/* Constrain the full-cover video to the SLIDE CARD's own boundaries
   (not the whole browser viewport) — .atp-video-wrap above is
   position:absolute, so its nearest positioned ancestor decides how
   far it stretches. .page-container already holds the card's width;
   we just need to guarantee it's a positioning context. */
body.atp-video-fullcover-active .page-container {
    position: relative !important;
    height: 100% !important;
}
/* Hide the bottom floating CTA button while the video covers the
   whole screen — it reappears automatically once the video is
   closed or the slide changes. */
body.atp-video-fullcover-active .floating-btn,
body.atp-video-fullcover-active .bottombtns {
    display: none !important;
}