/*
Theme Name:   Ecompass online
Theme URI:    https://wordpress.org/themes/twentytwentyfive/
Description:  Ecompass online theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  Ecompass online
*/

/* Global link styles */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

.wp-block-button.send-icon .wp-element-button:after {
	background-image: url('../ecompass-online/assets/img/mail.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 21px;
	width: 25px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-left: 8px;
}

.slick-slider .slick-prev:before {
	background-image: url('../ecompass-online/assets/img/left-arrow.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 21px;
	width: 52px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-left: 8px;
}

.slick-slider .slick-next:before {
	background-image: url('../ecompass-online/assets/img/right-arrow.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 21px;
	width: 52px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-left: 8px;
}

.slick-slider .slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 8px;
	height: 8px;
	padding: 5px;
	border-radius: 100px;
	cursor: pointer;
	color: #F2F2F233;
	border: 0;
	outline: none;
	background: #F2F2F233;
}

.course-lessons .slick-slider .slick-next:before {
	background-image: url('../ecompass-online/assets/img/black-right-arrow.png');
}
.course-lessons .slick-slider .slick-prev:before {
	background-image: url('../ecompass-online/assets/img/black-left-arrow.png');
}

.slick-dots li.slick-active button {
	background: #F2F2F2;
	color: #F2F2F2;
}

:where(.wp-site-blocks *:focus) {
	outline: none !important;
}

:root :where(.wp-block-quote) {
	border: none !important;
}

body {
	background-color: #F5F4E6 !important;
}

header > div {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.header-wrapper {
	background: #242720;
	color: #F2F2F2;
	padding: 21px 24px !important;
	border-radius: 30px;
	margin: 16px 0 57px !important;
	max-width: 100%;
	width: 100%;
}

.header-wrapper nav {
	gap: 32px !important;
}

.details-container {
	background: rgba(136, 132, 132, 0.2);
	padding: 16px 20px;
	border-radius: 12px;
	max-width: fit-content;
}

.main-container h2 {
	font-weight: 500;
}

.main-container h2 strong {
	font-weight: 500;
	position: relative;
}

.main-container h2 strong:after {
	background-image: url('../ecompass-online/assets/img/red-line.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 55%;
	width: 100%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -15px;
	left: -11px;
}

.detail-row {
	gap: 16px;
	margin-top: 32px;
}

.detail-row p {
	background: rgba(136, 132, 132, 0.2);
	padding: 22px 16px;
	border-radius: 12px;
}

.detail-row p:before {
	background-image: url('../ecompass-online/assets/img/black-diamond.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 26px;
	vertical-align: middle;
	height: 26px;
	width: 16px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-right: 8px;
}

.pp-card {
	background-color: #F5F4E6;
	border-radius: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

.pp-card .pp-tag {
	font-size: 16px;
	color: #D92514;
	font-weight: 500;
}

.pp-card h3 {
	margin: 0;
	font-weight: 500;
}

/* === Testimonial Quote Block === */
.quote-section {
	padding: 40px 20px;
	max-width: 900px;
	margin: 0 auto;
}

.quote-author-row {
	max-width: fit-content;
	margin: 0 auto;
}

.quote-text {
	text-align: center;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.6;
	color: #F2F2F2;
	position: relative;
	margin-bottom: 24px;
}

.highlighted-phrase {
	position: relative;
	z-index: 1;
}

.quote-text strong::before {
	content: '';
	position: absolute;
	left: -8px;
	top: -4px;
	width: calc(100% + 16px);
	height: calc(100% + 8px);
	background-image: url('../ecompass-online/assets/img/red-outline.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1;
}

/* === Author Row === */
.quote-author-row {
	align-items: center;
	gap: 16px;
}

.quote-avatar img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.quote-author {
	color: #F2F2F2;
	font-weight: 600;
	font-size: 24px;
	margin: 0;
}

.quote-role {
	font-weight: 400;
	font-size: 18px;
	color: #A2A9B0;
}

.pain-points-wrapper {
	border-radius: 90px;
}

.course-description .course-hero-desc {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 40px;
	padding: 40px;
}

.course-description .course-list ul {
	list-style-type: none;
}

.course-description .course-list ul li {
	background: #E9E8DB;
	border-radius: 16px;
	padding: 20px 28px;
	font-weight: 500;
}

.course-description .course-hero-desc img {
	max-width: 170px;
}

.panel-title {
	color: #F2F2F2;
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 32px;
}



/* === Course Program Layout === */
.course-program {
	background-color: #F5F4E6;
	padding: 64px 32px;
	border-radius: 90px;
}

.program-title {
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 32px;
	padding-bottom: 54px;
	position: relative;
	max-width: fit-content;
}

.program-title:after {
	background-image: url('../ecompass-online/assets/img/red-outline.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 25px;
	vertical-align: middle;
	height: 124%;
	width: 118%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 11px;
	left: -57px;
}

.program-intro {
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 40px;
	color: #5F5F5F;
}

.module-summary .day-indicator {
	background: #D92514;
	border-radius: 8px;
	color: #F2F2F2;
	font-size: 16px !important;
	padding: 8px 20px;
	display: inline-block;
}

.module-summary ul {
	padding-left: 0;
	margin-left: 0 !important;
	list-style-type: none;
	margin-top: 44px;
}

.module-summary ul li {
	color: #F2F2F2;
}

.module-summary p.module-name {
	margin-top: 16px !important;
}

.module-summary ul li:before {
	background-image: url('../ecompass-online/assets/img/white-check.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 23px;
	width: 34px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-right: 8px;
}

.module-summary-description .result-anchor:before {
	background-image: url('../ecompass-online/assets/img/sphere.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 26px;
	width: 43px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-right: 8px;
}

.main-points-container h2 {
	max-width: fit-content;
	color: #F2F2F2;
	margin: 0 auto;
	position: relative;
}

.main-points-container h2 strong {
	font-weight: 500;
	position: relative;
}

.main-points-container h2::after {
	background-image: url('../ecompass-online/assets/img/red-line.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 49%;
	width: 108%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -13px;
	left: -15px;
}

/* === Module Details === */
.module {
	margin-bottom: 16px;
	cursor: pointer;
	border-bottom: 1px solid rgba(242, 242, 242, 0.3);
	padding-bottom: 24px;
}

.program-left figure {
	margin-top: -100px !important;
}

.program-left {
	position: sticky;
	top: 0 !important;
	align-self: flex-start;
}

.left-sub {
	margin-bottom: 24px;
}

.left-sub:before {
	background-image: url('../ecompass-online/assets/img/red-diamond.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 25px;
	vertical-align: middle;
	height: 39px;
	width: 22px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-right: 9px;
}

.module summary {
	font-size: 1.125rem;
	font-weight: 600;
	color: #F2F2F2;
	display: flex;
	align-items: center;
	gap: 12px;
}

.module-number {
	font-weight: 700;
	color: #F2F2F2;
}

.module-description {
	margin-top: 32px !important;
	font-size: 22px;
	color: #F2F2F2;
}

.module-summary p {
	margin-left: 0 !important;
}

.module-summary > p {
	color: #F2F2F2;
	margin-top: 32px !important;
}

.module-summary-description p, .module-summary-description {
	margin-left: 0 !important;
}

.module-summary-description {
	background: #F5F4E6;
	border-radius: 20px;
	margin-top: 32px;
	padding: 20px 16px;
}

.module-summary-description p {
	font-size: 22px !important;
}

.module-summary-description p:not(.result-anchor) {
	padding-left: 50px;
}

.module-result {
	margin-top: 8px;
	font-size: 0.95rem;
	color: #5F5F5F;
}

.module-viewer {
	display: flex;
	justify-content: space-between;
	margin-top: 80px;
}

.module-viewer > div {
	max-width: 45%;
	width: 100%;
}

.module-viewer .module-right img {
	max-width: 650px;
}

.module-list li {
	display: flex;
	cursor: pointer;
	font-size: 20px;
	justify-content: space-between;
	padding: 22px 24px;
}

.module-list li.active {
	background: #E9E8DB;
}

.module-list li.active span {
	text-decoration: underline;
}

.module-list li span.number {
	color: #D92514;
	font-size: 16px;
	text-decoration: none;
}

.module-list {
	list-style-type: none;
	margin-top: 0 !important;
}

.module-list-viewer h2 {
	max-width: 650px;
	margin: 0 auto;
}

.module-list-viewer h2 strong {
	font-weight: 500;
	position: relative;
}

.module-list-viewer h2 strong:after {
	background-image: url('../ecompass-online/assets/img/red-line.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 49%;
	width: 108%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -13px;
	left: -36px;
}

.testimonial-quote {
	font-size: 32px;
	font-weight: 500;
	text-align: center;
}

.testimonial-author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 40px;
}

.testimonial-author img {
	max-width: 95px;
}

.testimonial-quote .highlighted {
	position: relative;
}

.testimonial-quote .highlighted strong {
	font-weight: 500;
}

.course-lessons {
	padding-left: 0;
	padding-right: 0;
}

.course-lessons-slider {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}


.course-card {
	background: #242720;
	border-radius: 40px;
	padding: 24px 24px 40px 32px;
}

.course-card-header {
	display: flex;
	align-items: start;
}

.course-card-header p {
	margin-left: 0 !important;
}

.course-card-content h2 {
	color: #F2F2F2;
}

.course-card-content p {
	color: #A2A9B0;
	margin-top: 24px;
}

.testimonial-quote .highlighted:after {
	background-image: url('../ecompass-online/assets/img/red-outline.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 133%;
	width: 111%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -5px;
	left: -10px;
}

.lecturer .lecturer-name {
	color: #F2F2F2;
	margin-top: 24px;
	margin-bottom: 16px;
}

.lecturer .lecturer-title {
	color: #919191;
	display: block;
	margin-top: 12px;
}

.lecturer .lecturer-avatar img,
.lecturer .lecturer-avatar {
	max-width: 320px;
}

.lecturer-info {
	color: #E7E7E7;
	margin-bottom: 8px;
}

.lecturer-info:before {
	background-image: url('../ecompass-online/assets/img/red-star.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 22px;
	width: 24px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-right: 16px;
}

.ecommerce-voices {
	position: relative;
	border-radius: 90px;
	overflow: hidden;
}

.ecommerce-voices h2 strong {
	position: relative;
	font-weight: 500;
}

.ecommerce-voices h2 strong:after {
	background-image: url('../ecompass-online/assets/img/red-line.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 38%;
	width: 108%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -7px;
	left: 0;
}

.testimonial-slider-section {
	margin-top: 120px;
}

.testimonial-slider-section > h2 {
	color: #F2F2F2;
}

.testimonial-slider {
	display: flex;
	gap: 16px;
	margin-top: 80px;
}

.testimonial-slider .testimonial {
	width: 100%;
	border: 1px solid #A2A9B0;
	border-radius: 24px;
	color: #E7E7E7;
	padding: 44px 24px;
}

.testimonial-slider .slick-slide {
	margin-right: 16px;
}

.testimonial-slider .testimonial img {
	max-width: 60px;
}

.testimonial .testimonial-text {
	margin-bottom: 24px;
}

.testimonial-slider .testimonial figure,
.testimonial-slider .testimonial .testimonial-author {
	margin: 0 !important;
}

.testimonial-slider .testimonial-author {
	font-size: 24px;
	display: flex;
	flex-direction: column;
	align-items: start;
}


.testimonial-slider .testimonial-author .testimonial-role {
	font-size: 18px;
}

.testimonial-author-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0;
}

.rating-stars { display: inline-flex; gap: 6px; margin-bottom: 12px; }
.star { width: 26px; height: 24px; }

.pricing-section {
	background-color: #F5F4E6;
	padding: 64px 32px;
	text-align: center;
}

.pricing-title {
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 48px;
	color: #242720;
}

.pricing-cards { gap: 32px; }

.pricing-card {
	box-sizing: border-box;
	height: 100%;
	border: 1px solid #242720;
	border-radius: 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	margin-top: auto !important;
}

.pricing-card-desc {
	margin-top: auto;
	background: #242720;
	color: #E7E7E7;
	padding: 30px 32px;
	border-radius: 0 0 24px 24px;
}

.pricing-card-desc .wp-block-buttons,
.pricing-card-desc .choose-button,
.pricing-card-desc .wp-element-button {
	max-width: 100%;
	width: 100%;
}

.pricing-card.introvert .plan-top-text {
	background: rgba(203, 203, 203, 0.3);
}

.pricing-card.base .plan-top-text {
	background: rgba(145, 145, 145, 0.5);
}

.pricing-card.pickme .plan-top-text {
	background: rgba(217, 37, 20, 0.8);
	color: #F2F2F2;
}

.plan-top-text {
	border-radius: 24px 24px  0 0;
	padding: 10px 33px;
	font-size: 14px;
	color: #333333;
	margin-bottom: 16px;
	line-height: 1.5;
}

.plan-name {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 16px;
	color: #242720;
}

.plan-price {
	font-size: 1.1rem;
	margin-bottom: 24px;
}

.old-price {
	display: block;
	text-decoration: line-through;
	color: #999; margin-right: 8px;
}

.new-price {
	font-weight: 600;
	color: #D92514;
}

.plan-features {
	list-style: none;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #E7E7E7;
	text-align: left;
}

.plan-features li { margin-bottom: 8px; }

.plan-features li:before {
	background-image: url('../ecompass-online/assets/img/hashtag.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 19px;
	width: 23px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-right: 16px;
}

.wp-block-buttons { margin-top: auto; }

.choose-button .wp-block-button__link {
	background-color: #D92514;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.faq-section.full-width-spacing {
	margin-top: 120px;
}

.faq-title {
	margin-bottom: 86px;
}

.faq-item {
	padding: 20px 24px;
	transition: background 0.3s ease;
	position: relative;
}

.faq-item::after {
	background-image: url('../ecompass-online/assets/img/black-underline.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 12px;
	width: 100%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
}

.faq-question {
	font-size: 1rem;
	font-weight: 600;
	color: #242720;
	margin-bottom: 12px;
	position: relative;
	cursor: pointer;
}

.faq-question::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.25rem;
	color: #D92514;
}

.faq-answer {
	font-size: 0.95rem;
	color: #5F5F5F;
	line-height: 1.6;
	display: none; /* default hidden */
}

/* Optional: show answer when .faq-item.active */
.faq-item.active .faq-answer {
	display: block;
}
.faq-item.active .faq-question::after {
	content: "−";
}

.faq-answer {
	display: none;
	font-size: 0.95rem;
	color: #5F5F5F;
	line-height: 1.6;
	margin-top: 12px;
}

.faq-item.active .faq-answer {
	display: block;
}

.faq-question::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.25rem;
	color: #D92514;
}

.faq-item.active .faq-question::after {
	content: "−";
}

.course-promo-section {
	background: #242720;
	border-radius: 90px 90px 0 0;
	padding: 64px 32px;
}

.course-promo-title {
	font-weight: 600;
	margin-bottom: 32px;
	color: #F2F2F2;
}

.course-promo-image img {
	max-width: 100%;
	height: auto;
	margin-bottom: 24px;
}

.cta-button .wp-block-button__link {
	background-color: #D92514;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.limited-spots {
	font-size: 15px;
	color: #A2A9B0;
	margin-top: 16px;
}

.course-form-section {
	background: #242720;
	padding: 80px 0;
	margin-top: 0 !important;
}

.course-form-wrapper {
	background: #D92514 !important;
	gap: 0 !important;
	margin: 0 56px !important;
	border-radius: 80px;
}

.form-image-column img {
	border-radius: 12px;
	max-width: 100%;
	height: auto;
}

.form-image-column {
	background: #D92514;
	border-radius: 80px;
}

.form-fields-column {
	background: #F5F4E6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 79px 74px;
	border-radius: 80px;
}

.form-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 24px;
}

#courseForm {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#courseForm input,
#courseForm select {
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 1rem;
}

.submit-button {
	background-color: #D92514;
	color: #fff;
	padding: 10px 24px;
	border: none;
	border-radius: 80px;
	font-weight: 600;
	cursor: pointer;
}

.form-response {
	margin-top: 16px;
	font-size: 1rem;
	color: green;
}

#goToTop {
	box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #D92514;
	color: #F2F2F2;
	border: none;
	cursor: pointer;
	font-size: 18px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
	z-index: 9999;
}

#goToTop.is-visible {
	opacity: 1;
	visibility: visible;
}

#goToTop:hover {
	transform: translateY(-3px);
}

footer {
	background: #242720;
	color: #F2F2F2;
}

.footer-wrapper {
	padding-top: 0 !important;
}

.footer-wrapper > div {
	display: flex;
	justify-content: space-between;
	padding-top: 40px;
	border-top: 1px solid #F5F4E6;
	margin: 0 !important;
}

footer .wp-block-navigation__container {
	gap: 32px;
}

.main-audience-grid {
	position: relative;
}

.main-audience-grid:before {
	background-image: url('../ecompass-online/assets/img/black-cross-vertical.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 100%;
	width: 12px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.main-audience-grid:after {
	background-image: url('../ecompass-online/assets/img/black-cross-horizontal.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 16px;
	width: 90%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	top: 55%;
	transform: translateY(-50%);
	margin: 0 auto;
	left: 5%;
}

.pain-points-audience h2 {
	font-weight: 500;
	position: relative;
}

.pain-points-audience h2:after {
	background-image: url('../ecompass-online/assets/img/red-line.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 55%;
	width: 64%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -24px;
	left: -11px;
}

.pain-points-audience .text-block {
	background: #242720;
	border-radius: 40px;
	font-size: 22px;
	padding: 44px 32px;
	color: #F2F2F2;
	margin-bottom: 16px;
}

.pain-points-audience .text-block:before {
	background-image: url('../ecompass-online/assets/img/red-cross.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 75px;
	width: 77px;
	background-repeat: no-repeat;
	content: '';
	display: block;
	margin-bottom: 70px;
}

.ecommerce-voices .wp-block-cover p {
	font-size: 28px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
	font-style: italic !important;
	max-width: 100%;
	width: 100%;
}

.ecommerce-voices .wp-block-cover {
	padding: 18px 32px 24px !important;
	margin-top: 32px !important;
	height: 300px !important;
}


.ecommerce-voices .wp-block-cover p:before {
	background-image: url('../ecompass-online/assets/img/red-heart.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 92px;
	width: 109px;
	background-repeat: no-repeat;
	content: '';
	display: block;
	margin-bottom: 30px;
	margin-left: auto;
}

.hurrytimer-campaign .hurrytimer-headline {
	color: #919191 !important;
	font-size: 16px !important;
}

.hurrytimer-campaign .hurrytimer-timer-block {
	background: #E9E8DB;
	border-radius: 8px;
	font-size: 24px !important;
	padding: 12px 7px;
}

.hurrytimer-campaign .hurrytimer-timer-digit {
	font-size: 24px !important;
}


.pricing-cards .wp-block-button.telegram-icon .wp-block-button__link {
	background: #E9E8DB;
	border-color: #E9E8DB;
	border-radius: 16px;
	color: #000000;
	text-transform: none;
	padding: 10px 0;
	font-size: 20px;
}

.pricing-cards .wp-block-button.telegram-icon .wp-block-button__link:after {
	background-image: url('../ecompass-online/assets/img/telegram.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 30px;
	width: 30px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-left: 16px;
}

.pricing-cards .price-text {
	position: relative;
}

.pricing-cards .price-text:before {
	content: '';
	position: absolute;
	left: -8px;
	top: -4px;
	width: calc(100% + 16px);
	height: calc(100% + 8px);
	background-image: url('../ecompass-online/assets/img/red-outline.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.footer-quote {
	background: #242720;
}

.footer-quote .testimonial-quote {
	color: #F2F2F2;
}

.footer-quote .author-name {
	color: #F2F2F2 !important;
}

.footer-quote .author-title{
	color: #A2A9B0 !important;
}

.system-building .red-outline {
	font-weight: 500;
	position: relative;
}

.system-building .red-outline:after {
	background-image: url('../ecompass-online/assets/img/red-line.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 16px;
	vertical-align: middle;
	height: 44%;
	width: 84%;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -15px;
	left: 0;
}


#custom-popup-overlay {
	height: 550px;
	position: fixed;
	right: 0;
	max-width: 780px;
	width: 100%;
	margin: 0 auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
}

.client-info {
	display: flex;
	gap: 16px;
}

form fieldset {
	border: none !important;
}

.client-info label {
	display: none;
}

#custom-popup-content {
	background-color: #F5F4E6;
	color: #000;
	padding: 50px 35px 35px 35px;
	max-width: 780px;
	width: 100%;
	border-radius: 40px;
	box-shadow: 5px 2px 16px 5px rgba(0, 0, 0, 0.51);
}

.form-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.actions-toolbar button {
	border-radius: 80px;
	max-width: 100%;
	width: 100%;
}

/* Header Styling */
#custom-popup-content .form-tag.banner-title {
	font-size: 40px;
	font-weight: 500;
	margin-top: 5px;
	margin-bottom: 40px;
	line-height: 1.1;
}

/* Input/Label Styling */
#custom-newsletter-form label {
	display: none;
}

#custom-newsletter-form input,
#custom-newsletter-form textarea {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4); /* Thin bottom line border */
	width: 100%;
	padding: 10px 0 5px 0;
	margin-bottom: 0;
	font-size: 16px;
	color: #000;
	outline: none; /* Remove focus outline */
}

#custom-newsletter-form input::placeholder,
#custom-newsletter-form textarea::placeholder {
	color: rgba(0, 0, 0, 0.6);
}

#popup-message {
	resize: none; /* Prevent manual resizing */
	height: 30px; /* Initial height for message field */
}

.dark-button {
	background-color: #000;
	color: #fff;
	font-weight: bold;
	border: none;
	padding: 18px 20px;
	font-size: 16px;
	margin-top: 40px;
	text-align: center;
	cursor: pointer;
	border-radius: 0; /* Square button */
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Close button positioning (assuming it's in the top right corner outside the main box) */
.close-popup {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 30px;
	color: #000;
	font-weight: lighter;
}

.book-demo-modal input {
	border-radius: 0;
	border: none;
	background: transparent;
	border-bottom: 1px solid #373737;
}

body.popup-open-blur > * {
	filter: blur(5px);
	transition: filter 0.3s ease-out;
}

body.popup-open-blur > #custom-popup-overlay {
	filter: none;
	transition: none;
}

.course-promo-section .wp-block-cover ul {
	list-style-type: none;
}

.course-promo-section .wp-block-cover ul li:before {
	background-image: url('../ecompass-online/assets/img/check.png');
	background-position-x: 0;
	background-position-y: 0;
	background-size: cover;
	line-height: 22px;
	vertical-align: middle;
	height: 23px;
	width: 34px;
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	margin-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
	.header-wrapper {
		margin-bottom: 24px !important;
		margin-top: 0 !important;
		border-radius: 0;
	}

	.main-container.payment-page {
		padding-left: 0 !important;
	}

	.main-container.payment-page .wp-block-column:first-child {
		padding: 0 16px;
	}

	.main-container.payment-page .wp-block-column > p {
		margin: 16px 0 !important;
	}

	.main-container.payment-page .wp-block-column .wp-block-quote {
		font-size: 18px !important;
		padding: 12px 0 !important;
	}

	.course-form-section {
		flex-direction: column;
	}

	.main-container .wp-block-heading {
		font-size: 25px !important;
	}

	.main-container .detail-row {
		gap: 8px;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 100%;
		width: 100%;
	}

	.main-container .detail-row p {
		max-width: 40%;
		width: 100%;
		text-align: center;
	}

	.main-container .detail-row p.center-text {
		text-align: center;
		width: 100%;
		max-width: 100%;
	}

	.main-container .wp-block-column > p {
		font-size: 14px !important;
	}

	.main-container .wp-block-buttons {
		margin-top: 18px !important;
	}

	.main-container .wp-block-buttons,
	.main-container .wp-block-button {
		max-width: 100%;
		width: 100%;
	}

	.quote-author-row .quote-image {
		flex-basis: 25% !important;
	}

	.quote-author-row .quote-testimonial {
		flex-basis: 70% !important;
	}

	.quote-author-row .quote-image img {
		height: 50px !important;
		width: 50px !important;
	}

	.system-building {
		margin-top: 44px;
		margin-bottom: 32px;
	}

	.system-building .red-outline {
		position: relative;
		font-size: 24px !important;
		font-weight: 500;
	}

	.system-build-desc p {
		color: #767676;
	}

	.system-build-desc .wp-block-buttons,
	.system-build-desc .wp-block-button {
		max-width: 100%;
		width: 100%;
	}

	.system-build-desc .wp-block-buttons {
		margin-top: 23px;
	}

	.system-building .red-outline:after {
		height: 63%;
		width: 85%;
		content: '';
		bottom: -13px;
		left: 0;
	}

	.module-viewer {
		flex-direction: column;
	}

	.module-viewer > div {
		max-width: 100%;
		width: 100%;
	}

	.program-left {
		position: static;
	}

	.module-viewer .module-right img {
		max-width: 100%;
		width: 100%;
	}

	.course-card {
		min-height: 380px;
	}

	.course-description {
		gap: 15px !important;
	}

	.course-list .panel-list {
		padding-left: 0;
	}

	.testimonial-author img {
		height: 50px !important;
		width: 50px !important;
	}

	.pain-points-wrapper,
	.ecommerce-voices,
	.course-program {
		border-radius: 32px;
	}

	.form-fields-column {
		padding: 32px 16px;
	}

	.testimonial-slider {
		flex-direction: column;
	}

	.quote-text {
		font-size: 20px;
	}

	.quote-role {
		font-size: 14px;
	}

	.pp-slider.fx-pain-points {
		margin-left: 16px;
		margin-top: 40px;
	}

	.pp-slider .slick-dots,
	.course-lessons-slider .slick-dots {
		bottom: -40px;
		max-width: fit-content;
		left: 50%;
		transform: translateX(-50%);
	}

	.pp-slider .slick-prev,
	.pp-slider .slick-next {
		top: unset;
		bottom: -45px;
		width: 52px;
	}

	.pp-slider .slick-prev {
		left: 0;
	}

	.pp-slider .slick-prev:before {
		margin-left: 0;
	}

	.pp-slider .slick-next {
		right: 16px;
	}

	.course-lessons h2 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}


	.course-lessons-slider .slick-prev,
	.course-lessons-slider .slick-next {
		top: unset;
		bottom: -45px;
		width: 52px;
	}

	.course-lessons-slider .slick-dots li button {
		background: #24272033;
		color: #F2F2F233;
	}

	.course-lessons-slider .slick-dots li button:before {
		color: transparent !important;
	}

	.course-lessons-slider .slick-dots li.slick-active button {
		background: #242720;
		color: #242720;
	}

	.course-lessons-slider .slick-prev {
		left: 0;
	}

	.course-lessons-slider .slick-prev:before {
		margin-left: 0;
	}

	.course-lessons-slider .slick-next {
		right: 16px;
	}

	.ecommerce-voices {
		position: relative;
	}

	.ecommerce-voices .section-title {
		font-size: 24px !important;
		margin: 40px 16px;
	}

	.ecommerce-voices-heading figure {
		max-width: 210px;
		position: absolute;
		z-index: 100;
		top: 0;
		right: 0;
	}

	.lecturer-name {
		font-size: 20px;
	}

	.lecturer-title {
		font-size: 16px;
	}

	.lecturer-slider .slick-dots,
	.testimonial-slider .slick-dots {
		max-width: fit-content;
		left: 50%;
		transform: translateX(-50%);
		bottom: -55px;
	}

	.lecturer-slider .slick-prev,
	.lecturer-slider .slick-next,
	.testimonial-slider .slick-next,
	.testimonial-slider .slick-prev {
		top: unset;
		bottom: -60px;
		width: 52px;
	}

	.lecturer-slider .slick-next,
	.testimonial-slider .slick-next {
		right: 0;
	}

	.lecturer-section  {
		margin: 80px 16px 0 16px;
	}

	.lecturer-slider .slick-prev,
	.testimonial-slider .slick-prev {
		left: 0;
	}

	.lecturer-slider .slick-prev:before,
	.testimonial-slider  .slick-prev:before {
		margin-left: 0;
	}

	.lecturer-slider .slick-next:before,
	.testimonial-slider  .slick-next:before {
		margin-left: 0;
	}

	.testimonial-slider-section {
		padding-bottom: 80px;
	}

	.testimonial-slider {
		margin-top: 32px;
	}

	.split-panel {
		margin-left: 16px !important;
		margin-right: 16px !important;
		margin-bottom: 20px !important;
		padding: 0 !important;
	}

	.course-program {
		padding-left: 16px;
		padding-right: 16px;
	}

	.course-program .module-summary {
		padding: 0 !important;
	}

	.course-program  .module-summary ul li {
		font-size: 16px;
	}

	.course-program .module-summary ul li:before {
		height: 15px;
		width: 21px;
	}

	.course-program .module-summary-description p {
		font-size: 16px !important;
	}

	.course-program  .program-title {
		font-size: 24px !important;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.course-program .program-title:after {
		height: 82%;
		width: 128%;
		background-repeat: no-repeat;
		content: '';
		display: inline-block;
		position: absolute;
		bottom: 37px;
		left: 50%;
		transform: translateX(-50%);
	}

	.module-list-viewer {
		margin-top: 64px;
	}

	.module-list {
		padding-left: 0;
	}

	.module-list li {
		font-size: 16px;
		padding: 10px 12px;
	}

	.module-list-viewer h2 strong:after {
		bottom: -6px;
		left: -9px;
	}

	.course-lessons {
		margin-top: 64px !important;
	}

	.course-lessons-slider {
		margin-top: 24px !important;
	}

	.course-card img {
		max-width: 220px;
	}

	.course-card .course-card-content {
		margin-top: 30px !important;
	}

	.course-card-content p {
		margin-top: 8px;
	}

	.testimonial-quote {
		font-size: 20px;
	}

	body .full-width-spacing {
		padding: 0 16px;
	}

	.main-container h2 strong:after {
		left: -14px;
	}

	.main-container h2 {
		margin: 12px 0;
	}

	.details-container {
		margin-top: 12px;
	}

	.pp-card {
		padding: 32px 24px;
		min-height: 212px;
	}

	.pp-card h3 {
		font-size: 20px;
	}

	.marquee-content {
		font-size: 24px;
	}

	.marquee-wrapper {
		margin-top: 40px;
		margin-bottom: 22px;
	}

	.pricing-cards { gap: 24px; }
	.pricing-card { min-height: 370px; }

	.pricing-section {
		padding: 64px 16px;
	}

	.pricing-section h2 {
		font-size: 24px;
	}

	.faq-section.full-width-spacing {
		margin-top: 0;
	}

	.faq-section .faq-title {
		margin-bottom: 40px;
		font-size: 24px !important;
	}

	.main-points-container h2 {
		margin-top: 40px !important;
	}

	.pain-points-wrapper {
		margin-top: 20px;
	}

	.pain-points-wrapper  .wp-block-buttons {
		margin-top: 24px;
		max-width: 100%;
		width: 100%;
	}

	.pain-points-wrapper  .wp-block-button {
		max-width: 100%;
		width: 100%;
	}

	.panel-list li {
		font-size: 14px;
	}

	.split-panel .panel-list.challenges li::before {
		height: 26px;
		width: 15px;
	}

	.panel-left,
	.panel-right {
		padding: 24px 20px;
	}

	.panel-subtitle::after {
		height: 35px;
		width: 96%;
		bottom: -9px;
	}

	.course-program {
		position: relative;
	}

	.course-program .program-left {
		order: 2;
	}

	.course-program .program-right {
		order: 1;
	}

	.lecturer .lecturer-avatar img,
	.lecturer .lecturer-avatar {
		max-width: 100%;
		width: 100%;
	}

	.testimonial-slider .slick-list{
		padding:0 5% 0 0 !important;
	}

	.pp-slider .slick-list{
		padding:0 25% 0 0 !important;
		box-sizing: border-box;
	}

	.pp-slider .slick-slide {
		margin-right: 16px;
	}

	.main-audience {
		margin-top: 90px !important;
	}

	.main-audience .main-audience-grid {
		margin-left: 0;
		margin-top: 32px !important;
		gap: 30px;
	}

	.main-audience-grid:before {

	}

	.main-audience img {
		height: 50px;
		width: auto;
	}

	.main-audience figure {
		margin-bottom: 24px !important;
	}

	.pain-points-audience {
		margin-top: 64px !important;
	}

	.pain-points-audience .program-left {
		margin-bottom: 32px !important;
	}

	.pain-points-audience .text-block {
		font-size: 20px;
		padding: 24px 20px;
	}

	.pain-points-audience .text-block:before {
		height: 60px;
		width: 60px;
		margin-bottom: 20px;
	}

	.pain-points-audience h2:after {
		bottom: -13px;
		left: -3px;
	}

	.lecturer-wrapper {
		margin-top: 50px;
		padding: 16px;
	}

	.ecommerce-voices .wp-block-cover p {
		font-size: 18px !important;
	}

	.ecommerce-voices .wp-block-cover__inner-container {
		padding: 0 !important;
	}

	.ecommerce-voices .wp-block-cover p:before {
		height: 67px;
		width: 80px;
	}

	.pricing-cards {
		flex-direction: column-reverse;
	}

	.pricing-cards .wp-block-buttons,
	.pricing-cards .wp-block-button {
		max-width: 100%;
		width: 100%;
	}

	.pricing-image .wp-block-group {
		padding: 0;
		margin-top: 12px !important;
	}

	.telegram-icon .wp-element-button {
		font-size: 14px !important;
		padding: 8px 16px 8px 70px !important;
		text-align: left;
	}

	.telegram-icon .wp-element-button:after {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
	}

	.course-promo-section {
		border-radius: 32px 32px 0 0;
		margin-top: 64px;
	}

	.course-promo-section .wp-block-cover p {
		margin-bottom: 15px;
		font-weight: 500;
		font-size: 18px !important;
	}

	.course-promo-section .wp-block-cover ul {
		margin-left: 0 !important;
	}

	footer .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.footer-wrapper > div {
		flex-wrap: wrap;
		gap: 16px;
	}

	.footer-wrapper > div > div {
		flex-wrap: wrap;
		gap: 16px;
	}

	.logo-footer .small-font {
		font-size: 12px !important;
	}
}

/* Animation */
@keyframes marquee-scroll {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes scroll-left {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}


@media screen and (min-width: 768px) {
	.main-container.payment-page .wp-block-image,
	.main-container.payment-page .wp-block-image img {
		height: 100%;
	}

	.main-audience-grid {
		gap: 30px;
		padding: 0 56px;
	}

	.course-card {
		min-height: 546px;
	}

	.main-container.payment-page .wp-block-quote {
		padding-left: 0;
		font-size: 24px !important;
		padding-bottom: 0;
	}

	.main-container.payment-page .wp-block-image img {
		object-fit: cover !important;
	}

	header {
		margin-left: 56px !important;
		margin-right: 56px !important;
	}

	.header-wrapper {
		align-items: center !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.course-lessons h2 {
		margin-left: 0 !important;
		font-weight: 500;
	}

	.course-lessons h2 strong {
		font-weight: 500;
		position: relative;
	}

	.course-lessons h2 strong:after {
		content: '';
		position: absolute;
		left: -8px;
		top: -19px;
		width: 110%;
		height: 144%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: -1;
		background-image: url('../ecompass-online/assets/img/red-bold-outline.png');
	}

	.course-lessons .course-card-content {
		margin-top: 60px;
	}


	header .wp-block-navigation .wp-block-button .wp-block-button__link {
		font-size: 14px !important;
		padding: 11px 24px !important;
		border: 1px solid #F2F2F2 !important;
		background: #242720 !important;
	}

	header .wp-block-navigation__responsive-container-content {
		gap: 16px !important;
	}

	.system-building .system-build-desc {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.system-building .system-build-desc .wp-block-group  {
		max-width: 35%;
	}

	.main-audience img {
		height: 100px;
		width: auto;
	}

	.main-audience figure {
		margin-bottom: 32px !important;
	}

	.main-audience-grid {
		margin-top: 40px !important;
	}

	.course-description,
	.quote-section-wrapper,
	body .full-width-spacing.course-lessons,
	body .full-width-spacing.pain-points-audience,
	body .full-width-spacing.system-building,
	body .course-promo-section,
	body .main-audience {
		margin-top: 80px !important;
	}

	body .full-width-spacing.system-building {
		margin-bottom: 56px !important;
	}

	.course-lessons-slider {
		margin-top: 48px;
	}

	.pp-slider .pp-slide {
		max-width: calc(97% / 3);
		width: 100%;
	}

	body .full-width-spacing {
		margin: 0 56px !important;
	}

	.course-program {
		padding-left: 56px !important;
		padding-right: 56px !important;
		padding-bottom: 88px !important;
	}

	.testimonial-slider-section {
		position: relative;
	}

	.course-lessons {
		position: relative;
	}

	.course-lessons .slick-list {
		box-sizing: border-box;
		padding: 0 15% 0 0 !important;
		max-width: 100%;
		width: 100%;
	}

	.course-lessons .slick-slide {
		margin-left: 16px;
	}

	.course-card figure {
		max-width: 350px;
	}

	.course-lessons .slick-arrow {
		top: -78px;
		width: 52px;
	}

	.course-lessons .slick-next {
		right: 0;
	}

	.course-lessons .slick-prev {
		right: 80px;
		left: unset;
	}

	.testimonial-slider .slick-arrow {
		top: -100px;
		width: 52px;
	}

	.testimonial-slider .slick-next {
		right: 0;
	}

	.testimonial-slider .slick-prev {
		right: 80px;
		left: unset;
	}

	.testimonial-slider .testimonial {
		display: flex !important;
		flex-direction: column;
		min-height: 420px;
	}

	.testimonial-slider .testimonial-author-wrapper {
		margin-top: auto;
	}

	.ecommerce-voices {
		padding-left: 56px !important;
		padding-right: 56px !important;
		padding-bottom: 88px !important;
		padding-top: 128px;
	}

	body .top-margin {
		margin-top: 100px !important;
	}

	.main-container h2 {
		margin: 25px 0;
	}

	.details-container {
		margin-top: 32px;
	}

	.pp-slider {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin: 76px 65px;
	}

	.pp-card {
		min-height: 292px;
		padding: 44px 32px;
	}

	.pp-card h3 {
		font-size: 28px;
	}

	.pain-points-wrapper {
		padding-top: 76px;
		padding-bottom: 36px;
	}

	.marquee-content {
		font-size: 56px;
	}

	.marquee-wrapper {
		margin-top: 90px;
		margin-bottom: 73px;
	}

	.split-panel.red {
		margin-top: 70px !important;
	}

	.lecturer-slider {
		display: flex;
		gap: 16px;
		margin-top: 82px;
	}

	.lecturer {
		width: 100%;
	}

	.lecturer .lecturer-name {
		font-size: 48px;
		margin-top: 0;
	}

	.lecturer-section {
		margin-top: 80px !important;
	}

	.lecturer .lecturer-title {
		font-size: 18px;
	}

	.ecommerce-voices-heading figure {
		position: absolute;
		top: -100px;
		max-width: 400px;
		right: 0;
		transform: rotate(351deg);
	}

	.ecommerce-voices-heading {
		margin-bottom: 82px;
	}

	.pricing-cards .pricing-image img {
		max-width: 85%;
	}

	.pricing-cards .pricing-description .wp-block-buttons {
		justify-content: center !important;
	}

	.pricing-cards .pricing-image .wp-block-buttons {
		max-width: 85%;
		width: 100%;
	}

	.pricing-cards .wp-block-button.telegram-icon {
		width: 100%;
	}

	.pricing-cards .price-text {
		font-size: 56px;
		font-weight: 700;
	}

	.hurrytimer-campaign {
		margin-top: 35px;
	}

	.course-promo-section .wp-block-cover p {
		margin-bottom: 30px;
		font-weight: 500;
		font-size: 24px !important;
	}
}