@charset "utf-8";
/* CSS Document - dedicated styles for the Courses page (courses.php) only.
   Values (colors, radius, shadow, typography) are matched to the site's
   existing shared design tokens (common.css / home.css) so this page looks
   consistent with the rest of the site rather than inventing a new style. */

/*--Header Navigation on Courses Page--*/
#headBanner {
	background: #F4F9FD url("../images/onlineCourseBannerImage.jpg") no-repeat center top;
	background-size: cover;
	position: relative;
}
#headBanner .headerBlock {
	background: transparent !important;
	padding: 18px 0;
	border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
#headBanner .headerBlock img.siteLogo {
	filter: brightness(0) invert(13%) sepia(18%) saturate(1142%) hue-rotate(194deg) brightness(95%) contrast(95%);
}
#headBanner .headerBlock .navbar a {
	color: #1E2238 !important;
	font-weight: 500;
	font-size: 14px;
	transition: color .2s;
}
#headBanner .headerBlock .navbar a:hover {
	color: #3865F6 !important;
}
#headBanner .headerBlock .headerRight ul li a {
	color: #1E2238 !important;
	font-weight: 500;
	font-size: 14px;
	transition: color .2s;
}
#headBanner .headerBlock .headerRight ul li a:hover {
	color: #3865F6 !important;
}
#headBanner .headerBlock .headerRight ul li img {
	filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(2200%) hue-rotate(215deg) brightness(98%) contrast(96%);
}
#headBanner .search_input {
	color: #1E2238 !important;
	border-bottom: 1px solid #CBD5E1 !important;
}
#headBanner .search_input::placeholder {
	color: #94A3B8 !important;
}
#headBanner .search_icon {
	color: #3865F6 !important;
}
#headBanner .search_icon img {
	filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(2200%) hue-rotate(215deg) brightness(98%) contrast(96%);
}

/*--Hero Banner--*/
.coursesBanner {
	background: transparent;
	padding: 40px 0 60px 0;
	position: relative;
	overflow: visible;
}
.coursesBanner .coursesBannerLeft {
	padding-right: 20px;
	position: relative;
	z-index: 2;
}
.coursesBanner .coursesBannerLeft h2 {
	color: #1E2238;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px 0;
	padding: 0;
	letter-spacing: -0.5px;
}
.coursesBanner .coursesBannerLeft h2 span {
	color: #3865F6;
}
.coursesBanner .coursesBannerLeft p {
	color: #64748B;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 24px 0;
	padding: 0;
	max-width: 460px;
}

/*--Enquiry Card--*/
.coursesEnquiryCard {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 24px 28px;
	box-shadow: 0 10px 35px rgba(30, 34, 56, 0.08);
	max-width: 480px;
}
.coursesEnquiryCard h5 {
	color: #FF6550;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 18px 0;
	padding: 0;
}
.coursesFormGroup {
	margin-bottom: 12px;
}
.coursesFormRow {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}
.coursesFormRow > div {
	flex: 1;
	min-width: 0;
}

.coursesInput {
	width: 100%;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	color: #1E2238;
	background: #FFFFFF;
	outline: none;
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}
.coursesInput::placeholder {
	color: #94A3B8;
	font-size: 13px;
}
.coursesInput:focus {
	border-color: #4361EE;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.coursesSelect {
	width: 100%;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	padding: 10px 22px 10px 10px;
	font-size: 11.5px;
	color: #64748B;
	background-color: #FFFFFF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}
.coursesSelect:focus {
	border-color: #4361EE;
	color: #1E2238;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.coursesEnquirySubmit {
	width: 100%;
	background: #4361EE;
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	padding: 13px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s, transform .1s, box-shadow .2s;
	box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
}
.coursesEnquirySubmit:hover {
	background: #3651D4;
	box-shadow: 0 6px 16px rgba(67, 97, 238, 0.35);
}
.coursesEnquirySubmit:active {
	transform: scale(0.99);
}

/*--Hero Right & Floating Badges--*/
.coursesBannerRight {
	position: relative;
	text-align: center;
}
.coursesHeroImgWrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.coursesHeroGirl {
	max-width: 440px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.coursesFloatBadge {
	position: absolute;
	background: #FFFFFF;
	border-radius: 12px;
	padding: 8px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	z-index: 2;
	transition: transform .3s ease, box-shadow .3s ease;
	white-space: nowrap;
}
.coursesFloatBadge:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.badgeIconBox {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.badgeIconBox img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}
.badgeIconBox.iconOrange { background: #FF6B57; }
.badgeIconBox.iconPurple { background: #7000DF; }
.badgeIconBox.iconBlue   { background: #3865F6; }
.badgeIconBox.iconCyan   { background: #00C2E8; }

.badgeText {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
}
.badgeText .badgeTitle {
	font-size: 13px;
	font-weight: 700;
	color: #1E2238;
	line-height: 1.3;
}
.badgeText .badgeSub {
	font-size: 11px;
	font-weight: 400;
	color: #64748B;
	line-height: 1.3;
}

.coursesFloatBadge.badgeTopLeft {
	top: 15%;
	left: -35px;
}
.coursesFloatBadge.badgeTopRight {
	top: 15%;
	right: -35px;
}
.coursesFloatBadge.badgeBottomLeft {
	bottom: 18%;
	left: -45px;
}
.coursesFloatBadge.badgeBottomRight {
	bottom: 18%;
	right: -40px;
}

/*--What do you get with Algebrians--*/
#coursesFeatures {
	padding: 70px 0 80px 0;
	background: #FFFFFF;
}
#coursesFeatures h2 {
	text-align: center;
	font-size: 36px;
	font-weight: 700;
	color: #1E2238;
	margin: 0 0 45px 0;
	padding: 0;
	letter-spacing: -0.5px;
}
#coursesFeatures h2 span {
	color: #FF6550;
}
#coursesFeatures .card.coursesFeatureCard {
	background: #FFFFFF;
	border-radius: 18px;
	border: 0;
	padding: 34px 20px 28px 20px;
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05), 0px 1px 3px 0px rgba(0, 0, 0, 0.02);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform .25s ease, box-shadow .25s ease;
	height: 100%;
}
#coursesFeatures .card.coursesFeatureCard:hover {
	transform: translateY(-4px);
	box-shadow: 0px 16px 36px 0px rgba(0, 0, 0, 0.08);
}
.coursesFeatureCard .coursesFeatureIcon {
	width: 60px;
	height: 60px;
	margin-bottom: 18px;
	display: block;
	object-fit: contain;
}
.coursesFeatureCard p {
	color: #1E2238;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}
@media (min-width: 992px) {
	.coursesFeatureCard p {
		white-space: nowrap;
	}
}

/*--Shared block heading + view all (Popular Teachers / Ongoing / Upcoming)--*/
#popularTeachersBlock, #ongoingCoursesBlock, #upcomingCoursesBlock {
	padding: 55px 0 65px 0;
	background: #FFFFFF;
}
.coursesSectionHeaderRow {
	align-items: flex-end;
	margin-bottom: 25px;
}
#popularTeachersBlock h2, #ongoingCoursesBlock h2, #upcomingCoursesBlock h2 {
	color: #1E2238;
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 6px 0;
	padding: 0;
	letter-spacing: -0.5px;
}
#popularTeachersBlock h2 span, #ongoingCoursesBlock h2 span, #upcomingCoursesBlock h2 span {
	color: #FF6550;
}
#popularTeachersBlock > .container > .row > div > p, 
#ongoingCoursesBlock > .container > .row > div > p, 
#upcomingCoursesBlock > .container > .row > div > p {
	color: #64748B;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}
.coursesViewAll {
	text-align: right;
	padding-bottom: 4px;
}
.coursesViewAll a {
	color: #5375E2;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .2s ease, transform .2s ease;
}
.coursesViewAll a:hover {
	color: #3B5BCE;
	transform: translateX(2px);
}

/*--Popular Teachers cards--*/
.popularTeacherCard {
	border: none !important;
	border-radius: 16px !important;
	overflow: hidden;
	background: #F3F3F3 !important;
	box-shadow: none !important;
	margin: 10px 5px 25px 5px;
	padding: 14px 14px 20px 14px;
	transition: transform .25s ease;
}
.popularTeacherCard:hover {
	transform: translateY(-4px);
}
.popularTeacherImgWrapper {
	border-radius: 12px;
	overflow: hidden;
	width: 100%;
	height: 245px;
	background: #EAEAEA;
}
.popularTeacherImgWrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.popularTeacherDetail {
	padding: 14px 6px 0 6px;
}
.popularTeacherNameRow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
}
.popularTeacherName {
	color: #1E2238;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	padding: 0;
}
.verifyBadgeIcon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: inline-block;
}
.popularTeacherBio {
	color: #6B7280;
	font-size: 12px;
	line-height: 1.45;
	margin: 0 auto 12px auto;
	padding: 0;
	text-align: center;
	min-height: 35px;
	max-width: 260px;
}
.popularTeacherDivider {
	height: 1px;
	background: #E5E7EB;
	margin: 12px 0;
}
.popularTeacherStatsRow {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 2px 0;
}
.teacherStatItem {
	font-size: 13px;
	font-weight: 600;
	color: #1F2937;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.teacherStatItem i {
	color: #5375E2;
	font-size: 13px;
}
.popularTeacherSubjectsRow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #1F2937;
	padding: 2px 6px 0 6px;
}
.popularTeacherSubjectsRow i {
	color: #5375E2;
	font-size: 13px;
}

/*--Modern Course Cards (Ongoing & Upcoming)--*/
.modernCourseCard {
	border: none !important;
	border-radius: 16px !important;
	overflow: hidden;
	background: #F3F3F3 !important;
	box-shadow: none !important;
	margin: 10px 5px 25px 5px;
	padding: 14px 14px 18px 14px;
	transition: transform .25s ease;
}
.modernCourseCard:hover {
	transform: translateY(-4px);
}
.courseCardImgWrapper {
	border-radius: 12px;
	overflow: hidden;
	width: 100%;
	height: 200px;
	background: #EAEAEA;
}
.courseCardImgWrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.modernCourseDetail {
	padding: 14px 4px 0 4px;
}
.courseTitleLink {
	text-decoration: none !important;
	color: inherit;
	display: block;
}
.courseTitleLink:hover .courseCardTitle {
	color: #5375E2;
}
.courseCardTitle {
	color: #1E2238;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 10px 0;
	padding: 0;
	min-height: 42px;
	transition: color 0.2s ease;
}
.courseMetaRowTop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.courseMetaRowBottom {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.courseMetaItem {
	font-size: 12.5px;
	font-weight: 500;
	color: #374151;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.courseMetaItem i {
	color: #5375E2;
	font-size: 13px;
}
.courseMetaItem.rating i {
	color: #5375E2;
}
.courseCardDivider {
	height: 1px;
	background: #E5E7EB;
	margin: 10px 0;
}
.courseInstructorRow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
	padding: 2px 0;
}
img.courseInstructorAvatar {
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	height: 34px !important;
	min-height: 34px !important;
	max-height: 34px !important;
	border-radius: 8px !important;
	object-fit: cover !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	float: none !important;
}
.courseInstructorInfo {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.courseInstructorName {
	color: #1E2238;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}
.courseInstructorRating {
	color: #4B5563;
	font-size: 11.5px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
}
.courseInstructorRating i {
	color: #5375E2;
	font-size: 11px;
}
.courseCardFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 4px;
}
.courseCardFooter .coursePrice {
	color: #5375E2;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.2px;
}
.courseCardFooter .readMoreBtn {
	padding: 8px 18px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 8px;
	float: none;
	background: #5375E2;
	color: #FFFFFF;
	border: none;
	cursor: pointer;
	transition: background-color .2s ease;
	box-shadow: none;
	display: inline-block;
	text-decoration: none;
}
.courseCardFooter .readMoreBtn:hover {
	background: #4162CF;
}
.courseCardFooter .readMoreBtn.coursesBtnSecondary {
	background: #EEF2FF;
	color: #5375E2;
	border: 1px solid #C7D7FE;
}
.courseCardFooter .readMoreBtn.coursesBtnSecondary:hover {
	background: #5375E2;
	color: #FFFFFF;
}

/*--Owl Carousel Navigation Controls (Floating round buttons left & right)--*/
#popularTeachersBlock .owl-carousel,
#ongoingCoursesBlock .owl-carousel,
#upcomingCoursesBlock .owl-carousel {
	position: relative;
}
#popularTeachersBlock .owl-nav,
#ongoingCoursesBlock .owl-nav,
#upcomingCoursesBlock .owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	width: 100%;
	pointer-events: none;
	margin: 0 !important;
	z-index: 10;
	display: block !important;
}
#popularTeachersBlock .owl-nav .nav-button,
#ongoingCoursesBlock .owl-nav .nav-button,
#upcomingCoursesBlock .owl-nav .nav-button {
	pointer-events: auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#popularTeachersBlock .owl-nav .nav-button:hover,
#ongoingCoursesBlock .owl-nav .nav-button:hover,
#upcomingCoursesBlock .owl-nav .nav-button:hover {
	transform: scale(1.08);
}
#popularTeachersBlock .owl-nav .owl-prev,
#ongoingCoursesBlock .owl-nav .owl-prev,
#upcomingCoursesBlock .owl-nav .owl-prev {
	position: absolute;
	left: -24px;
	background: #C7D7FE !important;
	box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
}
#popularTeachersBlock .owl-nav .owl-prev:hover,
#ongoingCoursesBlock .owl-nav .owl-prev:hover,
#upcomingCoursesBlock .owl-nav .owl-prev:hover {
	background: #4361EE !important;
}
#popularTeachersBlock .owl-nav .owl-next,
#ongoingCoursesBlock .owl-nav .owl-next,
#upcomingCoursesBlock .owl-nav .owl-next {
	position: absolute;
	right: -24px;
	background: #4361EE !important;
	box-shadow: 0 4px 14px rgba(67, 97, 238, 0.35);
}
#popularTeachersBlock .owl-nav .owl-next:hover,
#ongoingCoursesBlock .owl-nav .owl-next:hover,
#upcomingCoursesBlock .owl-nav .owl-next:hover {
	background: #3651D4 !important;
}
#popularTeachersBlock .owl-nav .nav-button img,
#ongoingCoursesBlock .owl-nav .nav-button img,
#upcomingCoursesBlock .owl-nav .nav-button img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/*--Start a Journey CTA Banner--*/
#coursesCta {
	padding: 110px 0 60px 0;
	position: relative;
	background: #FFFFFF;
}
.coursesCtaWrapper {
	position: relative;
	overflow: visible;
}
.coursesCtaArcsWrap {
	position: absolute;
	right: 50px;
	top: -120px;
	width: 520px;
	height: 250px;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.coursesCtaArcsSvg {
	width: 100%;
	height: 100%;
	display: block;
}
.coursesCtaCard {
	background: #5375E2;
	border-radius: 20px;
	position: relative;
	z-index: 2;
	padding: 55px 60px;
	min-height: 280px;
	display: flex;
	align-items: center;
	overflow: visible;
}
.coursesCtaContent {
	position: relative;
	z-index: 3;
	max-width: 58%;
}
.coursesCtaContent h2 {
	color: #FFFFFF;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px 0;
	padding: 0;
	letter-spacing: -0.5px;
}
.coursesCtaSub {
	color: rgba(255, 255, 255, 0.95);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin: 0 0 28px 0;
	padding: 0;
}
.coursesCtaBtn {
	display: inline-block;
	border: 1.5px solid #FFFFFF;
	background: transparent;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 32px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.coursesCtaBtn:hover {
	background: #FFFFFF;
	color: #5375E2;
	text-decoration: none;
	transform: translateY(-2px);
}
.coursesCtaVisual {
	position: absolute;
	right: 60px;
	bottom: 0;
	width: 320px;
	pointer-events: none;
	z-index: 10;
}
.coursesCtaStudentImg {
	position: absolute;
	right: 0;
	bottom: 8px;
	width: 310px;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	display: block;
	z-index: 10;
}

/*-- Student and teacher working in harmony --*/
#coursesHarmony {
	padding: 85px 0 95px 0;
	background: #ffffff;
}
#coursesHarmony .coursesHarmonyImage {
	position: relative;
}
#coursesHarmony .coursesHarmonyImage img {
	width: 100%;
	max-width: 520px;
	height: auto;
	display: block;
	border-radius: 16px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#coursesHarmony .coursesHarmonyImage:hover img {
	transform: translateY(-2px);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
}
#coursesHarmony .coursesHarmonyText {
	padding-left: 45px;
}
#coursesHarmony .coursesHarmonyText h2 {
	font-size: 38px;
	font-weight: 700;
	color: #1E2B4F;
	line-height: 1.25;
	margin: 0 0 20px 0;
}
#coursesHarmony .coursesHarmonyText h2 span {
	color: #FF7D56;
	display: block;
	font-weight: 700;
}
#coursesHarmony .coursesHarmonyText p {
	font-size: 15px;
	font-weight: 400;
	color: #4B5563;
	line-height: 1.65;
	max-width: 440px;
	margin: 0;
}

/*-- Algebrians Numbers / Stats Block --*/
#coursesAnBlock {
	background: linear-gradient(rgba(24, 38, 85, 0.76), rgba(24, 38, 85, 0.76)), url("../images/aeBg.jpg") center/cover no-repeat;
	padding: 70px 0;
	position: relative;
}
#coursesAnBlock .row {
	align-items: center;
}
#coursesAnBlock .col {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	transition: transform 0.3s ease;
}
#coursesAnBlock .col:hover {
	transform: scale(1.05);
}
#coursesAnBlock .col img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	flex-shrink: 0;
}
#coursesAnBlock h2 {
	font-size: 36px;
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	padding: 0;
	line-height: 1.1;
	text-align: left;
}
#coursesAnBlock h2 span {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
	margin-top: 4px;
	line-height: 1.2;
}

/*-- Testimonials Block --*/
#testimonialsBlock {
	padding: 85px 0 100px 0;
	background: #ffffff;
	text-align: center;
}
#testimonialsBlock h2 {
	font-size: 36px;
	font-weight: 700;
	color: #5375E2;
	margin: 0 0 48px 0;
	padding: 0;
	text-align: center;
}
#testimonialsBlock .testimonialsBlockItems {
	position: relative;
	padding: 10px 0;
}
#testimonialsBlock .testimonialsBlockItem {
	padding: 10px 4px;
}
#testimonialsBlock .card {
	background: linear-gradient(180deg, #EFFBF7 0%, #F5FCFA 100%);
	border: 1px solid rgba(180, 230, 215, 0.35);
	border-radius: 18px;
	padding: 34px 20px 28px 20px;
	text-align: center;
	box-shadow: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#testimonialsBlock .card:hover {
	background: linear-gradient(180deg, #EFFBF7 0%, #F5FCFA 100%) !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06) !important;
}
#testimonialsBlock .card .testiImageBlock .Imgs {
	position: relative;
	display: inline-block;
	margin: 0 auto;
}
#testimonialsBlock .card .testiImageBlock .Imgs .testimonialImage {
	height: 76px;
	width: auto;
	max-width: 86px;
	border-radius: 16px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	border: none;
}
#testimonialsBlock .card .testiImageBlock .quoteIcon {
	width: 28px;
	height: 25px;
	margin: 20px auto 16px auto;
	display: block;
}
#testimonialsBlock .card .testiDetailBlock p {
	color: #4B5563 !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}
#testimonialsBlock .testiDivider {
	width: 36px;
	height: 2.5px;
	background: #FF7D56;
	margin: 18px auto 14px auto;
	border-radius: 2px;
}
#testimonialsBlock .card .testiDetailBlock h3 {
	color: #4D70EB !important;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 4px 0;
	padding: 0;
	line-height: 1.3;
}
#testimonialsBlock .card .testiDetailBlock h3:before {
	display: none !important;
}
#testimonialsBlock .card .testiDetailBlock h4 {
	color: #4B5563 !important;
	font-size: 12px;
	font-weight: 400;
	margin: 0 0 3px 0;
	padding: 0;
	line-height: 1.3;
}
#testimonialsBlock .card .testiDetailBlock h5 {
	color: #6B7280 !important;
	font-size: 11.5px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}
/* Owl carousel navigation arrows */
#testimonialsBlock .testimonialsBlockItems .owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	width: 100%;
	pointer-events: none;
	margin: 0;
}
#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-prev,
#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	padding: 0 !important;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-prev:hover,
#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-next:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
}
#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-prev {
	left: -40px;
}
#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-next {
	right: -40px;
}

/*--Responsive--*/
@media screen and (max-width:1024px) {
	.coursesBanner {clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);padding:40px 0 60px 0;}
	.coursesFloatBadge {max-width:140px;font-size:11px;}
	#coursesCta {padding:70px 0 40px 0;}
}

@media screen and (max-width:1023px) {
	.coursesBanner {padding:40px 0 50px 0;}
	.coursesBanner .coursesBannerLeft {padding-right:0;margin-bottom:30px;}
	.coursesEnquiryCard {max-width:100%;}
	.coursesBannerRight {margin-top:20px;}
	.coursesFloatBadge.badgeTopLeft {top:8%;left:0;}
	.coursesFloatBadge.badgeTopRight {top:8%;right:0;}
	.coursesFloatBadge.badgeBottomLeft {bottom:10%;left:0;}
	.coursesFloatBadge.badgeBottomRight {bottom:12%;right:0;}
}

@media screen and (max-width:991px) {
	#coursesCta {padding:50px 0 30px 0;}
	.coursesCtaCard {
		flex-direction: column;
		align-items: flex-start;
		padding: 40px 30px;
		min-height: auto;
		overflow: hidden;
	}
	.coursesCtaContent {
		max-width: 100%;
		margin-bottom: 25px;
	}
	.coursesCtaContent h2 {font-size: 32px;}
	.coursesCtaVisual {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 280px;
		display: flex;
		justify-content: center;
	}
	.coursesCtaArcs {display: none;}
	.coursesCtaStudentImg {
		position: relative;
		right: auto;
		bottom: auto;
		width: 240px;
		max-height: 280px;
	}
	#coursesHarmony .coursesHarmonyImage {
		margin-bottom: 30px;
		text-align: center;
	}
	#coursesHarmony .coursesHarmonyImage img {
		margin: 0 auto;
	}
	#coursesHarmony .coursesHarmonyText {
		padding-left: 0;
		text-align: center;
	}
	#coursesHarmony .coursesHarmonyText p {
		margin: 0 auto;
	}
}

@media screen and (max-width:812px) {
	.coursesFeatureCard {margin-bottom:10px;}
	#coursesAnBlock .col {width:100%;margin:0 0 30px 0;}
	#coursesAnBlock .col:last-child {margin-bottom:0;}
	.coursesHarmonyText {margin-top:25px;}
	.coursesHarmonyText h2 {font-size:28px;}
	#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-prev {left: -12px;}
	#testimonialsBlock .testimonialsBlockItems .owl-nav button.owl-next {right: -12px;}
}

@media screen and (max-width:768px) {
	.coursesFloatBadge {position:static;display:inline-flex;margin:6px;max-width:none;}
	.coursesHeroGirl {max-width:340px;}
	#popularTeachersBlock .col-8, #ongoingCoursesBlock .col-8, #upcomingCoursesBlock .col-8 {width:66.66%;}
	#popularTeachersBlock .col-4, #ongoingCoursesBlock .col-4, #upcomingCoursesBlock .col-4 {width:33.33%;}
}

@media screen and (max-width:568px) {
	.coursesBanner {padding:30px 0 40px 0;}
	.coursesBanner .coursesBannerLeft h2 {font-size:28px;}
	.coursesFormRow {flex-direction:column;gap:12px;}
	.coursesEnquiryCard {padding:20px 18px;}
	#coursesFeatures h2, #coursesHarmonyText h2 {font-size:24px;}
	.coursesCtaContent h2 {font-size:26px;}
	.coursesCtaBtn {width:100%;text-align:center;}
	#popularTeachersBlock .col-8, #ongoingCoursesBlock .col-8, #upcomingCoursesBlock .col-8,
	#popularTeachersBlock .col-4, #ongoingCoursesBlock .col-4, #upcomingCoursesBlock .col-4 {width:100%;}
	.coursesViewAll {text-align:left;padding-top:5px;}
	#coursesAnBlock h2 {font-size:26px;}
}

@media screen and (max-width:420px) {
	.coursesBanner .coursesBannerLeft h2 {font-size:24px;}
	.coursesEnquiryCard {padding:16px 14px;}
	.coursesFeatureCard p {font-size:13px;}
	.courseCardFooter {flex-direction:column;align-items:flex-start;gap:10px;}
	.courseCardFooter .readMoreBtn {width:100%;text-align:center;}
}

/* Bootstrap 5 has no "xs" infix (this codebase's col-xs-* classes are inert
   everywhere), so columns below the 576px "sm" breakpoint fall back to
   content-based flex sizing instead of stacking full-width. Force it
   explicitly here, scoped to this page's own sections only. */
@media screen and (max-width:575px) {
	.coursesBanner .row > [class*="col-"],
	#coursesFeatures .row > [class*="col-"],
	#popularTeachersBlock .row > [class*="col-"],
	#ongoingCoursesBlock .row > [class*="col-"],
	#upcomingCoursesBlock .row > [class*="col-"],
	#coursesCta .row > [class*="col-"],
	#coursesHarmony .row > [class*="col-"] {
		flex:0 0 100%;
		max-width:100%;
		width:100%;
	}
}

/* ============================================================
   All Courses / Teachers listing pages - filter sidebar, banner,
   pagination. Reuses .modernCourseCard / .popularTeacherCard as-is
   for grid cards to keep the same UI pattern as the Courses page.
   ============================================================ */
.coursesAllBanner, .teachersPageBanner {
	background:url("../images/courseDetailBannerBg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
}
.innerBanner .innerBannerBreadcrumb {
	margin-top:10px;
	font-size:14px;
	color:rgba(255,255,255,0.85);
}
.innerBanner .innerBannerBreadcrumb a {
	color:rgba(255,255,255,0.85);
	text-decoration:none;
}
.innerBanner .innerBannerBreadcrumb a:hover {
	color:#ffffff;
}
.innerBanner .innerBannerBreadcrumb .separator {
	margin:0 8px;
}

#allCoursesBlock, #teachersPageBlock {
	padding:60px 0;
}
.filterSidebarCard {
	background:#ffffff;
	border-radius:12px;
	padding:22px;
	margin-bottom:20px;
	box-shadow:0px 0px 9px 0px rgba(0,0,0,0.08);
}
.filterSidebarCard h5 {
	font-size:16px;
	font-weight:700;
	color:#23305E;
	margin:0 0 15px 0;
	padding:0;
}
.filterCheckList {
	list-style:none;
	margin:0;
	padding:0;
}
.filterCheckList li {
	margin-bottom:12px;
}
.filterCheckList li:last-child {
	margin-bottom:0;
}
.filterCheckList label {
	font-size:14px;
	color:#5C616E;
	font-weight:400;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:9px;
	margin:0;
}
.filterCheckList input[type=checkbox] {
	width:16px;
	height:16px;
	accent-color:#6100C1;
	cursor:pointer;
	flex-shrink:0;
}
.filterCheckList .filterStars {
	color:#F59E0B;
	font-size:13px;
	margin-right:4px;
}
.filterApplyBtn {
	width:100%;
	background:#6100C1;
	color:#ffffff;
	border:0;
	padding:14px;
	border-radius:10px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-top:5px;
	font-size:13px;
	cursor:pointer;
}
.filterApplyBtn:hover {
	background:#4E27CE;
	color:#ffffff;
}
.filterResetLink {
	display:block;
	text-align:center;
	font-size:13px;
	color:#8892A0;
	margin-top:12px;
	text-decoration:underline;
}

.listingTopRow {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:22px;
	flex-wrap:wrap;
	gap:12px;
}
.listingCountPill {
	background:#F1F4F9;
	padding:10px 22px;
	border-radius:30px;
	font-weight:600;
	color:#23305E;
	font-size:14px;
}
.filterToggleBtn {
	display:none;
	background:#F1F4F9;
	color:#23305E;
	border:0;
	padding:10px 22px;
	border-radius:30px;
	font-weight:600;
	font-size:14px;
	cursor:pointer;
}

.listingGridCard {
	margin-bottom:30px;
}

.customPagination {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:8px;
	margin-top:20px;
	list-style:none;
	padding:0;
	flex-wrap:wrap;
}
.customPagination a, .customPagination span {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 8px;
	border-radius:8px;
	background:#F1F4F9;
	color:#23305E;
	font-weight:600;
	text-decoration:none;
	font-size:14px;
}
.customPagination .active a, .customPagination a.active {
	background:#6100C1;
	color:#ffffff;
}
.customPagination .disabled span {
	opacity:0.4;
	cursor:not-allowed;
}

.noResultsBlock {
	background:#ffffff;
	border-radius:12px;
	padding:50px 30px;
	text-align:center;
	box-shadow:0px 0px 9px 0px rgba(0,0,0,0.06);
}
.noResultsBlock p {
	color:#5C616E;
	font-size:15px;
	margin:0 0 15px 0;
}

@media screen and (max-width:991px) {
	.filterToggleBtn {
		display:inline-flex;
		align-items:center;
		justify-content:center;
	}
	.allCoursesFilterCol, .teachersFilterCol {
		display:none;
	}
	.allCoursesFilterCol.filtersOpen, .teachersFilterCol.filtersOpen {
		display:block;
	}
}