/*--------------------------------------------------------------
# Colors & Typography Variables
--------------------------------------------------------------*/
:root {
	--primary-color: #385469;
	--secondary-color: #6654E8;
	--accent-color: #F15F25;
	--yellow-color: #FFE800;
	--text-color: #4B5563;
	--cream-color: #F7FAE2;

	--primary-font: 'Quicksand', sans-serif;
	--secondary-font: 'Source Sans Pro', sans-serif;

	--h1-size: 76px;
	--h2-size: 56px;
	--h3-size: 44px;
	--h4-size: 22px;
	--h5-size: 16px;
	--h6-size: 14px;
}

/*--------------------------------------------------------------
# Reset & Typography
--------------------------------------------------------------*/
body {
	margin: 0;
	font-family: var(--secondary-font);
	font-size: 18px;
	color: var(--primary-color);
	font-weight: 400;
	line-height: 1.5;
}



h2,
h3,
h4,
h5,
h6 {
	font-family: var(--primary-font);
	margin-top: 0;
	color: var(--primary-color);
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1.409;
}

h1 {
	font-size: 70px;
	line-height: 1.1;
	letter-spacing: -3.04px;
	margin-bottom: 0px;
	margin-top: 0px;
	font-weight: 600;
}

h2 {
	font-size: 56px;
}

h3 {
	font-size: 44px;
}

h4 {
	font-size: 22px;
}

h5 {
	font-size: 16px;
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: disc;
	margin: 0 0 0 20px;
	padding: 0;
}

.header-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}

.page-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 80px 20px 80px 20px;
}

/*--------------------------------------------------------------
# Top Header
--------------------------------------------------------------*/
.top-header {
	background-color: var(--secondary-color);
	color: #fff;
	font-size: 14px;
	font-family: var(--primary-font);
	;
}

.top-header .header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
}

.top-header p {
	margin: 0;
}

.top-header a {
	color: #fff;
	transition: color 0.3s ease;
}

.top-header-left a {
	text-decoration: underline;
	font-weight: 600;
	margin-left: 5px;
}

.top-header-right {
	display: flex;
	gap: 25px;
}

.top-header-right a,
.top-header-right span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.top-header a:hover {
	color: var(--accent-color);
}

/*--------------------------------------------------------------
# Main Header
--------------------------------------------------------------*/
.main-header {
	background-color: #fff;
	z-index: 999;
	transition: all 0.3s ease;
	position: relative;
	width: 100%;
}

.main-header.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding-top: 5px;
	padding-bottom: 5px;
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

.main-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
}

/* Logo */
.site-branding {
	display: flex;
	align-items: center;
}

.site-logo img {
	max-height: 55px;
	/* Adjust according to actual logo */
	width: auto;
}

/* Menu Layout */
.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 35px;
	list-style: none;
}

.main-navigation li {
	position: relative;
	padding: 15px 0;
}

/* Menu Items Typography */
.main-navigation a {
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 500;
	transition: color 0.3s ease;
	font-family: var(--primary-font);
}

.main-navigation>ul>li>a:hover {
	color: var(--accent-color);
}

/* Arrow Color */
.main-navigation li.menu-item-has-children>a::after {
	content: '\f107';
	/* FontAwesome angle down */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-left: 6px;
	font-size: 14px;
	color: var(--primary-color);
	transition: color 0.3s ease;
}

/* Arrow Hover/Active Color */
.main-navigation li.menu-item-has-children:hover>a::after,
.main-navigation li.menu-item-has-children.current-menu-item>a::after,
.main-navigation li.menu-item-has-children.current-menu-ancestor>a::after {
	color: var(--accent-color);
}

/*--------------------------------------------------------------
# Dropdown Menu (Sub-menu)
--------------------------------------------------------------*/
.main-navigation ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 220px;
	background-color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 15px 0;
	display: none;
	/* hidden until hover */
	flex-direction: column;
	gap: 0;
	z-index: 100;
}

.main-navigation li:hover>ul.sub-menu {
	display: flex;
}

.main-navigation ul.sub-menu li {
	padding: 0;
}

.main-navigation ul.sub-menu a {
	display: flex;
	/* Helps with alignment if adding pseudo elements */
	align-items: center;
	padding: 12px 25px;
	font-weight: 500;
	color: var(--primary-color);
}

/* Dropdown Hover specific dotted line effect */
.main-navigation ul.sub-menu a:hover,
.main-navigation ul.sub-menu li.current-menu-item>a {
	color: var(--accent-color);
}

.main-navigation ul.sub-menu a:hover::before,
.main-navigation ul.sub-menu li.current-menu-item>a::before {
	content: '...';
	color: var(--accent-color);
	font-weight: bold;
	letter-spacing: 2px;
	margin-right: 10px;
	position: relative;
	top: -4px;
}

/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/
.btn,
.header-action .btn {
	background-color: var(--accent-color);
	color: #fff;
	border-radius: 18px;
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 600;
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: all 0.3s ease;
}

/* The liquid wave effect */
.btn::before,
.header-action .btn::before {
	content: "";
	position: absolute;
	left: -50%;
	top: 100%;
	width: 200%;
	height: 200%;
	background-color: var(--yellow-color);
	border-radius: 40%;
	/* Creates the wave shape */
	z-index: -1;
	transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn:hover::before,
.header-action .btn:hover::before {
	top: 0;
	transform: translateY(-20%) rotate(180deg);
}

.header-action .btn i {
	font-weight: 900;
	position: relative;
	z-index: 2;
	/* keep above the wave */
}

/* Ensure text also stays above the background wave */
.btn:hover,
.header-action .btn:hover {
	color: var(--primary-color);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	background-color: #F8F9ED;
	/* Soft yellowish green */
	padding: 80px 0 0;
	color: var(--primary-color);
}

.site-footer .footer-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}

.footer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: space-between;
	padding-bottom: 60px;
}

.footer-col {
	flex: 1;
	min-width: 250px;
}

.footer-col h4 {
	font-weight: 700;
	margin-bottom: 25px;
}

/* Col 1 */
.footer-logo img {
	max-height: 55px;
	margin-bottom: 20px;
}

.footer-text {
	line-height: 1.8;
	margin-bottom: 25px;
	font-size: 16px;
	opacity: 0.9;
}

.footer-social {
	display: flex;
	gap: 12px;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: #fff;
	color: var(--secondary-color);
	border-radius: 8px;
	font-size: 16px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.footer-social a:hover {
	background-color: var(--accent-color);
	color: #fff;
}

/* Col 2 & 3 */
.footer-links li {
	margin-bottom: 15px;
}

.footer-links a {
	font-size: 16px;
	transition: color 0.3s ease;
	opacity: 0.9;
}

.footer-links a:hover {
	color: var(--accent-color);
	opacity: 1;
}

/* Col 4 */
.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 30px;
}

.footer-contact-item .icon {
	color: var(--accent-color);
	font-size: 32px;
	line-height: 1;
}

.footer-contact-item .content h4 {
	margin-bottom: 10px;
	font-size: var(--h4-size);
}

.footer-contact-item .content p {
	font-size: 16px;
	margin: 0;
	line-height: 1.6;
	opacity: 0.9;
}

/* Bottom Footer */
.footer-bottom {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding: 25px 0;
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	/* in case of very small screens */
	gap: 20px;
}

.footer-bottom p {
	margin: 0;
	font-size: 14px;
	opacity: 0.8;
}

.footer-bottom a {
	color: var(--primary-color);
	font-weight: 700;
}

/*--------------------------------------------------------------
# Responsive Footer (Mobile Accordion)
--------------------------------------------------------------*/
@media (min-width: 769px) {
	.mobile-only {
		display: none !important;
	}
}

@media (max-width: 768px) {

	/* Header Mobile Rules */
	.top-header {
		display: none !important;
	}

	.header-action {
		display: none !important;
	}

	.mobile-menu-toggle button {
		background: none;
		border: none;
		font-size: 26px;
		color: var(--primary-color);
		cursor: pointer;
		padding: 5px;
	}

	/* Off-Canvas Mobile Nav */
	.main-navigation {
		position: fixed;
		top: 0;
		right: -100%;
		/* Hide off screen */
		width: 300px;
		max-width: 80%;
		height: 100vh;
		background-color: #fff;
		box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
		z-index: 1000;
		transition: right 0.3s ease;
		padding: 80px 20px 20px;
		overflow-y: auto;
	}

	.main-navigation.active {
		right: 0;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.main-navigation ul.sub-menu {
		position: static;
		width: 100%;
		box-shadow: none;
		display: none;
		padding-left: 15px;
	}

	/* Toggle sub-menu visibility on mobile by hovering the parent li - can be clicked too depending on standard WP behavior */
	.main-navigation li:hover>ul.sub-menu,
	.main-navigation li:active>ul.sub-menu {
		display: flex;
	}

	.footer-row {
		flex-direction: column;
		gap: 15px;
		padding-bottom: 40px;
	}

	.footer-col {
		width: 100%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		padding-bottom: 15px;
	}

	.footer-col-1 {
		border-bottom: none;
		margin-bottom: 15px;
	}

	.footer-widget-title {
		cursor: pointer;
		position: relative;
		padding-right: 30px;
		margin-bottom: 10px;
	}

	.footer-widget-title::after {
		content: '\f107';
		/* FontAwesome angle down */
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		transition: transform 0.3s ease;
		color: var(--accent-color);
	}

	.footer-col.active .footer-widget-title::after {
		transform: translateY(-50%) rotate(180deg);
	}

	.footer-widget-content {
		display: none;
		padding-top: 10px;
		padding-bottom: 15px;
	}

	.footer-col.active .footer-widget-content {
		display: block;
	}

	.mobile-only {
		display: block;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		justify-content: center;
	}
}

/*--------------------------------------------------------------
# Teachers Grid
--------------------------------------------------------------*/
.teachers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-top: 40px;
}

.teacher-category-section {
	margin-bottom: 80px;
}

.teacher-category-section:last-child {
	margin-bottom: 0;
}

.teacher-category-title {
	font-size: 32px;
	margin-bottom: 40px;
	position: relative;
	display: inline-block;
}

.teacher-category-title::after {
	content: "";
	display: block;
	width: 50px;
	height: 4px;
	background: var(--yellow-color);
	margin-top: 10px;
	border-radius: 2px;
}

.teacher-card {
	text-align: left;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.teacher-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.teacher-card-image {
	position: relative;
	margin-bottom: 0;
}

.teacher-card-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.teacher-card-content {
	padding: 25px 20px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: #fff;
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-top: none;
	margin: 0;
	border-radius: 0 0 15px 15px;
}

/* Wave Animation */
.teacher-card-content::before {
	content: "";
	position: absolute;
	left: -50%;
	top: 100%;
	width: 200%;
	height: 200%;
	background-color: var(--yellow-color);
	border-radius: 40%;
	z-index: -1;
	transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.teacher-card:hover .teacher-card-content::before {
	top: 0;
	transform: translateY(-20%) rotate(180deg);
}

.teacher-card:hover .teacher-card-content h4 a,
.teacher-card:hover .teacher-card-content .teacher-designation {
	color: var(--primary-color);
}

.teacher-share-btn {
	position: absolute;
	bottom: -15px;
	right: 15px;
	background-color: var(--secondary-color);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(102, 84, 232, 0.4);
	transition: all 0.3s ease;
	z-index: 2;
}

.teacher-share-btn:hover {
	background-color: var(--accent-color);
	transform: translateY(-3px);
	box-shadow: 0 6px 15px rgba(241, 95, 37, 0.4);
}

.teacher-card h4 {
	margin-bottom: 5px;
	font-size: var(--h4-size);
	color: var(--primary-color);
	position: relative;
	z-index: 2;
}

.teacher-designation {
	font-size: 18px;
	color: #777;
	font-family: var(--secondary-font);
	position: relative;
	z-index: 2;
}

@media (max-width: 1200px) {
	.teachers-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 991px) {
	.teachers-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.teachers-grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Inner Page Banner
--------------------------------------------------------------*/
.inner-banner {
	background-color: var(--secondary-color);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 30px 30px;
	padding: 100px 0;
	text-align: center;
	position: relative;
}

.inner-banner .page-container {
	position: relative;
	z-index: 2;
	padding-top: 0;
	padding-bottom: 0;
}

.inner-banner .breadcrumb {
	display: inline-flex;
	align-items: center;
	background-color: var(--accent-color);
	color: #fff;
	padding: 8px 24px;
	border-radius: 30px;
	font-size: 16px;
	font-family: var(--primary-font);
	margin-bottom: 20px;
	font-weight: 500;
}

.inner-banner .breadcrumb a {
	color: #fff;
	transition: opacity 0.3s ease;
}

.inner-banner .breadcrumb a:hover {
	opacity: 0.8;
}

.inner-banner .breadcrumb .sep {
	margin: 0 10px;
	opacity: 0.7;
}

.inner-banner h2 {
	color: #fff;
	margin: 0;
	font-size: var(--h2-size);
	line-height: 1.2;
}

@media (max-width: 768px) {
	.inner-banner {
		padding: 60px 0;
	}

	.inner-banner h2 {
		font-size: 36px;
	}
}

/*--------------------------------------------------------------
# Teacher Detail Page
--------------------------------------------------------------*/
.teacher-detail-wrapper,
.course-detail-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	align-items: flex-start;
}

.teacher-detail-image,
.course-detail-image {
	flex: 0 0 42%;
	max-width: 42%;
}

.teacher-detail-image img,
.course-detail-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 40px;
	display: block;
}

.teacher-detail-content,
.course-detail-content {
	flex: 1;
	min-width: 300px;
	padding-top: 10px;
}

.teacher-subtitle {
	color: var(--accent-color);
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 5px;
	font-family: var(--primary-font);
}

.teacher-detail-content h3,
.course-detail-content h3 {
	font-size: var(--h3-size);
	color: var(--primary-color);
	margin-bottom: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.teacher-description,
.course-description {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.77;
	color: var(--primary-color);
	margin-bottom: 45px;
	font-family: var(--secondary-font);
}

.teacher-additional-details {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.teacher-additional-details .detail-col {
	flex: 1;
	min-width: 200px;
}

.teacher-additional-details .detail-item {
	font-size: 16px;
	margin-bottom: 12px;
	color: #555;
	display: flex;
	gap: 15px;
}

.teacher-additional-details .detail-item strong {
	color: var(--primary-color);
	min-width: 70px;
}

.teacher-additional-details .detail-item a {
	color: inherit;
	transition: color 0.3s ease;
}

.teacher-additional-details .detail-item a:hover {
	color: var(--accent-color);
}

.teacher-social-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
}

.teacher-social-wrap strong {
	color: var(--primary-color);
	font-size: 16px;
}

.teacher-social-links {
	display: flex;
	gap: 12px;
}

.teacher-social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--primary-color);
	font-size: 16px;
	background-color: transparent;
	transition: all 0.3s ease;
}

.teacher-social-links a:hover {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #fff;
}

@media (max-width: 991px) {

	.teacher-detail-image,
	.teacher-detail-content {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.teacher-detail-wrapper {
		gap: 40px;
	}
}

/*--------------------------------------------------------------
# Blog Grid
--------------------------------------------------------------*/
.blog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-top: 40px;
}

.blog-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.blog-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.blog-grid-1 {
	grid-template-columns: 1fr;
}

.blog-card {
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.05);
}

.blog-card-image {
	position: relative;
}

.blog-card-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	border-radius: 20px 20px 0 0;
	transition: transform 0.3s ease;
}

/* Square images for Course Cards to match Teacher Grid */
.course-card .blog-card-image img {
	height: auto;
	aspect-ratio: 1/1;
}

.blog-card-content {
	padding: 25px 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	position: relative;
	overflow: hidden;
	z-index: 1;
	background-color: #fff;
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-top: none;
	margin: 0;
	border-radius: 0 0 15px 15px;
}

/* Wave Animation */
.blog-card-content::before {
	content: "";
	position: absolute;
	left: -50%;
	top: 100%;
	width: 200%;
	height: 200%;
	background-color: var(--yellow-color);
	border-radius: 40%;
	z-index: -1;
	transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.blog-card:hover .blog-card-content::before {
	top: 10px;
	transform: translateY(-20%) rotate(180deg);
}

.blog-card-content>* {
	position: relative;
	z-index: 2;
}

.blog-category {
	align-self: flex-start;
	display: inline-block;
	background-color: var(--secondary-color);
	color: #fff;
	padding: 5px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 12px;
}

.blog-card h4 {
	margin-bottom: 10px;
	font-size: var(--h4-size);
	font-weight: 700;
	line-height: 1.4;
}

.blog-card h4 a {
	color: var(--primary-color);
	transition: color 0.3s ease;
}

.blog-card h4 a:hover {
	color: var(--accent-color);
}

.blog-excerpt {
	font-size: 16px;
	color: #666;
	margin-bottom: 15px;
	line-height: 1.6;
}

.blog-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
	padding-top: 15px;
	font-size: 14px;
	color: #777;
	margin-top: auto;
}

.blog-meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.blog-meta i {
	color: var(--accent-color);
}

@media (max-width: 991px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Blog Single
--------------------------------------------------------------*/
.blog-detail-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}

.blog-detail-content {
	flex: 0 0 calc(66.666% - 25px);
	max-width: calc(66.666% - 25px);
}

.blog-sidebar {
	flex: 0 0 calc(33.333% - 25px);
	max-width: calc(33.333% - 25px);
}

@media (max-width: 991px) {

	.blog-detail-content,
	.blog-sidebar {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.blog-detail-thumbnail {
	margin-bottom: 30px;
}

.blog-detail-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.blog-detail-meta {
	display: flex;
	gap: 25px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #777;
}

.blog-detail-meta span i {
	color: var(--accent-color);
	margin-right: 5px;
}

.blog-detail-title {
	font-size: var(--h2-size);
	margin-bottom: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.blog-detail-content .entry-content {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.77;
}

.blog-detail-content .entry-content p {
	margin-bottom: 25px;
}

.blog-detail-content .entry-content blockquote {
	background-color: var(--accent-color);
	color: #fff;
	padding: 30px;
	border-radius: 10px;
	font-style: italic;
	font-weight: 600;
	margin: 30px 0;
	position: relative;
	border: none;
}

.blog-detail-content .entry-content blockquote::after {
	content: '\f10e';
	/* quote right */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	bottom: -10px;
	right: 20px;
	font-size: 40px;
	opacity: 0.2;
}

/* Sidebar Widgets */
.sidebar-widget {
	background: #fff;
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 40px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sidebar-widget .widget-title {
	font-size: var(--h4-size);
	margin-bottom: 30px;
	position: relative;
	padding-bottom: 15px;
}

.sidebar-widget .widget-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-color), rgba(241, 95, 37, 0.2));
	border-radius: 3px;
}

/* Search Widget */
.widget_search .search-form {
	position: relative;
}

.widget_search .search-field {
	width: 100%;
	padding: 15px 50px 15px 20px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	outline: none;
	background: #fff;
}

.widget_search .search-submit {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #777;
	font-size: 18px;
	cursor: pointer;
}

/* Recent Posts */
.widget_recent_entries ul li {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.widget_recent_entries ul li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.recent-post-thumb {
	flex: 0 0 80px;
	max-width: 80px;
}

.recent-post-thumb img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 10px;
}

.recent-post-info {
	flex: 1;
}

.recent-post-date {
	font-size: 14px;
	color: var(--accent-color);
	display: block;
	margin-bottom: 5px;
}

.recent-post-date i {
	margin-right: 5px;
}

.recent-post-info h5 {
	font-size: var(--h5-size);
	line-height: 1.4;
	margin: 0;
}

.recent-post-info h5 a {
	transition: color 0.3s;
}

.recent-post-info h5 a:hover {
	color: var(--accent-color);
}

.blog-footer-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding-top: 20px;
	margin-top: 40px;
}

.blog-tags {
	font-size: 14px;
}

.blog-tags .tags-label {
	font-weight: bold;
	margin-right: 5px;
}

.blog-share {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.blog-share span {
	font-weight: bold;
}

.blog-share a {
	width: 35px;
	height: 35px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #777;
	transition: all 0.3s;
}

.blog-share a:hover {
	background: var(--accent-color);
	color: #fff;
	border-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Courses Customizations
--------------------------------------------------------------*/
.course-subtitle {
	align-self: flex-start;
	display: inline-block;
	background-color: var(--secondary-color);
	color: #fff;
	padding: 5px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 12px;
	font-family: var(--primary-font);
}

.course-read-more {
	margin-top: auto;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
	padding-top: 15px;
	text-align: right;
}

.read-more-link {
	color: var(--accent-color);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.3s ease;
}

.read-more-link:hover {
	color: var(--primary-color);
}

.read-more-link i {
	font-size: 14px;
	transition: transform 0.3s ease;
}

.read-more-link:hover i {
	transform: translateX(5px);
}

/*--------------------------------------------------------------
# Course Additional Sections
--------------------------------------------------------------*/
.course-section-row {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-bottom: 80px;
}

.course-section-row.row-reverse {
	flex-direction: row-reverse;
}

.course-section-image {
	flex: 0 0 42%;
	max-width: 42%;
}

.course-section-image img {
	width: 100%;
	height: auto;
	border-radius: 40px;
	display: block;
}

.course-section-content {
	flex: 1;
}

.section-subtitle {
	color: var(--accent-color);
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.course-section-content h3 {
	font-size: 36px;
	margin-bottom: 20px;
	color: var(--primary-color);
}

.section-description {
	font-size: 18px;
	line-height: 1.7;
	color: #666;
	margin-bottom: 25px;
}

.section-bullets {
	list-style: none;
	padding: 0;
}

.section-bullets li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 16px;
	color: var(--primary-color);
	font-weight: 500;
}

.section-bullets li i {
	color: var(--accent-color);
	font-size: 14px;
}

@media (max-width: 991px) {

	.course-section-row,
	.course-section-row.row-reverse {
		flex-direction: column;
		gap: 30px;
	}

	.course-section-image {
		max-width: 100%;
		flex: 0 0 100%;
	}
}

/* Wave Animation in card white content area */
.course-card .blog-card-content {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.course-card .blog-card-content>* {
	position: relative;
	z-index: 2;
}

.course-card .blog-card-content::after {
	content: "";
	position: absolute;
	left: -50%;
	top: 100%;
	width: 200%;
	height: 200%;
	background-color: var(--yellow-color);
	border-radius: 40%;
	z-index: -1;
	transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Let the liquid wave rise up into the content area */
.blog-card.course-card:hover .blog-card-content::after {
	top: 0;
	transform: translateY(-20%) rotate(180deg);
}

.course-subtitle {
	align-self: flex-start;
	display: inline-block;
	background-color: var(--secondary-color);
	color: #fff;
	padding: 4px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 10px;
}

.course-title {
	margin-bottom: 15px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.course-title a {
	color: var(--primary-color);
	transition: color 0.3s ease;
}

.course-title a:hover {
	color: var(--accent-color);
}

.blog-card.course-card {
	border: none;
}

.course-card .blog-card-footer {
	margin-top: auto;
	padding-top: 15px;
	display: flex;
	justify-content: flex-end;
}

.course-card .learn-more {
	color: var(--accent-color) !important;
	font-weight: 600;
}


/*--------------------------------------------------------------
# FAQ Accordion
--------------------------------------------------------------*/
.faq-accordion-wrapper {
	max-width: 900px;
	margin: 0 auto;
}

.faq-item {
	margin-bottom: 30px;
	border: 2.5px dashed rgba(241, 95, 37, 0.2);
	border-radius: 24px;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: #fff;
}

.faq-item.active {
	border-color: rgba(241, 95, 37, 0.5);
	background-color: #FFF9F5;
	/* Matches the peach background in the image */
	border-style: dashed;
}

.faq-header {
	padding: 25px 35px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.3s ease;
}

.faq-item.active .faq-header {
	background-color: transparent;
}

.faq-header h4 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	display: flex;
	align-items: flex-start;
	gap: 15px;
	flex: 1;
	line-height: 1.4;
	color: #111;
}

.faq-number {
	color: #111;
	/* Matches the bold black number in the image */
}

.faq-icon {
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-color);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	margin-left: 20px;
	font-size: 16px;
	opacity: 0.8;
}

.faq-item.active .faq-icon {
	background-color: transparent;
	color: var(--accent-color);
	transform: none;
	opacity: 1;
}

.faq-item.active .faq-icon i::before {
	content: "\f068";
	/* Standard minus icon */
}

.faq-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.faq-item.active .faq-content {
	max-height: 1000px;
	transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
}

.faq-content-inner {
	padding: 0 35px 35px 74px;
	/* Perfectly aligned below the question text */
	color: #6B7280;
	/* Slightly softer gray for the answer text */
	font-size: 20px;
	line-height: 1.6;
	font-weight: 400;
}

@media (max-width: 768px) {
	.faq-header {
		padding: 20px;
	}

	.faq-header h4 {
		font-size: 18px;
	}

	.faq-content-inner {
		padding: 0 20px 20px 55px;
	}
}

/*--------------------------------------------------------------
# Elementor About Widget
--------------------------------------------------------------*/
.abacus-about-widget {
	padding: 40px 0;
}

.about-flex-container {
	display: flex;
	align-items: center;
	gap: 80px;
	flex-wrap: wrap;
}

.about-images-col {
	flex: 0 0 45%;
	max-width: 45%;
}

.about-content-col {
	flex: 1;
	min-width: 300px;
}

/* Layered Images */
.layered-images-wrapper {
	position: relative;
	padding: 40px;
}

.image-layer img {
	max-width: 100%;
	height: auto;
	display: block;
}

.bg-layer {
	position: relative;
	z-index: 1;
}

.bg-layer img {
	/* The background yellow/orange shape */
	width: 100%;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	/* Organic shape if no image */
}

.fg-layer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 90%;
}

.fg-layer img {
	/* The Kid image */
	object-fit: contain;
}

/* Content Styling */
.about-subtitle {
	display: inline-block;
	background-color: var(--secondary-color);
	color: #fff;
	padding: 6px 20px;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 25px;
	font-family: var(--primary-font);
}

.about-title {
	font-size: 48px;
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 30px;
	color: var(--primary-color);
	position: relative;
}

.about-title::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 30%;
	height: 15px;
	background-color: var(--accent-color);
	mask-image: url("data:image/svg+xml,%3Csvg width='316' height='29' viewBox='0 0 316 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 24.5C65.5 12.5 146.5 2.50002 313.5 12' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='316' height='29' viewBox='0 0 316 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 24.5C65.5 12.5 146.5 2.50002 313.5 12' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	z-index: -1;
}

.about-description {
	font-size: 18px;
	line-height: 1.5;
	color: var(--text-color);
	margin-bottom: 40px;
}

.about-action .btn {
	padding: 20px 40px;
	font-size: 18px;
}

/* Responsive */
@media (max-width: 991px) {
	.about-flex-container {
		gap: 40px;
	}

	.about-images-col {
		flex: 0 0 100%;
		max-width: 100%;
		order: 1;
	}

	.about-content-col {
		order: 2;
	}

	.about-title {
		font-size: 36px;
	}
}

@media (max-width: 768px) {
	.about-title::after {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# Testimonial Slider
--------------------------------------------------------------*/
.abacus-testimonial-slider-wrapper {
	padding: 0px 0;
	position: relative;
}

.abacus-testimonial-slider {
	padding: 60px 15px 40px;
	/* Top padding allows profile pics to overlap within container */
}

/* Fallback for Swiper layout stability */
.abacus-testimonial-slider .swiper-wrapper {
	display: flex !important;
	flex-wrap: nowrap;
}

.testimonial-card {
	padding: 80px 40px 40px;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: all 0.3s ease;
	margin-top: 50px;
	border: 3px solid #eee;
	background-color: #fff;
	/* Speech bubble shape */
	border-radius: 140px 140px 140px 30px;
	z-index: 1;
}

/* Color Variations (Green, Blue, Yellow) */
.swiper-slide:nth-child(3n+1) .testimonial-card {
	background-color: #f1f8e6;
	border-color: #aed581;
}

.swiper-slide:nth-child(3n+1) .testimonial-card .testimonial-quote-icon {
	color: #aed581;
}

.swiper-slide:nth-child(3n+1) .testimonial-card .testimonial-rating i {
	color: #8bc34a;
}

.swiper-slide:nth-child(3n+2) .testimonial-card {
	background-color: #e3f2fd;
	border-color: #90caf9;
}

.swiper-slide:nth-child(3n+2) .testimonial-card .testimonial-quote-icon {
	color: #90caf9;
}

.swiper-slide:nth-child(3n+2) .testimonial-card .testimonial-rating i {
	color: #2196f3;
}

.swiper-slide:nth-child(3n+3) .testimonial-card {
	background-color: #fff9e6;
	border-color: #ffe082;
}

.swiper-slide:nth-child(3n+3) .testimonial-card .testimonial-quote-icon {
	color: #ffe082;
}

.swiper-slide:nth-child(3n+3) .testimonial-card .testimonial-rating i {
	color: #ffb300;
}

/* Accent Swash Lines (Pseudo-borders) */
.testimonial-card::before {
	content: "";
	position: absolute;
	top: -15px;
	left: -15px;
	right: -15px;
	bottom: -15px;
	border: 1px solid currentColor;
	border-radius: 150px 150px 150px 40px;
	opacity: 0.3;
	z-index: -1;
	pointer-events: none;
}

.testimonial-card:hover {
	transform: translateY(-8px) scale(1.02);
}

.testimonial-profile {
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 100px;
	z-index: 5;
}

.testimonial-profile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50% !important;
	border: 4px solid #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.testimonial-rating {
	margin-bottom: 20px;
	font-size: 14px;
	letter-spacing: 3px;
}

.testimonial-content {
	font-size: 18px;
	line-height: 1.6;
	color: #385469;
	margin-bottom: 30px;
	flex-grow: 1;
	font-weight: 500;
	position: relative;
	font-family: var(--secondary-font);
}

.testimonial-content p {
	margin: 0;
	quotes: "“" "”" "‘" "’";
}

.testimonial-content p::before {
	content: open-quote;
}

.testimonial-content p::after {
	content: close-quote;
}

.testimonial-meta {
	margin-top: auto;
}

.testimonial-name {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 5px;
	color: var(--primary-color);
	font-family: var(--primary-font);
}

.testimonial-designation {
	font-size: 16px;
	color: var(--primary-color);
	opacity: 0.7;
	font-weight: 500;
}

.testimonial-quote-icon {
	position: absolute;
	bottom: 30px;
	right: 15px;
	font-size: 70px;
	opacity: 0.2;
	line-height: 1;
	transform: rotate(5deg);
	z-index: -1;
}

/* Pagination Dots Styling */
.swiper-pagination-bullet {
	background: var(--primary-color);
	opacity: 0.2;
	width: 10px;
	height: 10px;
	transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	width: 25px;
	border-radius: 5px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
	/* Arrows removed as requested */
}

@media (max-width: 768px) {
	.testimonial-card {
		padding: 60px 25px 30px;
	}

	.testimonial-quote-icon {
		font-size: 45px;
	}

	.testimonial-content {
		font-size: 17px;
	}
}

/*--------------------------------------------------------------
# Contact Page
--------------------------------------------------------------*/
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 60px;
	align-items: start;
}

.contact-info-header {
	margin-bottom: 40px;
}

.contact-info-header .subtitle {
	color: var(--accent-color);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	display: block;
	margin-bottom: 10px;
}

.contact-info-header h3 {
	font-size: 40px;
	margin-bottom: 20px;
}

.contact-info-meta {
	margin-top: 25px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-info-meta .meta-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	color: var(--text-color);
}

.contact-info-meta .meta-item i {
	color: var(--accent-color);
	width: 20px;
	text-align: center;
}

.contact-info-meta .meta-item strong {
	color: var(--primary-color);
}

.contact-info-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 40px;
}

.contact-info-item {
	display: flex;
	gap: 20px;
	align-items: center;
}

.contact-info-item .icon-box {
	width: 60px;
	height: 60px;
	background-color: var(--secondary-color);
	color: #fff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
}

.contact-info-item .text-box h4 {
	font-size: 20px;
	margin: 0 0 5px;
}

.contact-info-item .text-box p {
	margin: 0;
	font-size: 16px;
	opacity: 0.8;
}

.contact-social h4 {
	font-size: 18px;
	margin-bottom: 15px;
}

.contact-social .social-links {
	display: flex;
	gap: 15px;
}

.contact-social .social-links a {
	width: 45px;
	height: 45px;
	border: 1px solid #eee;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	color: var(--primary-color);
}

.contact-social .social-links a:hover {
	background-color: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
	transform: translateY(-3px);
}

.contact-form-wrapper {
	background-color: #f9fbfd;
	padding: 50px;
	border-radius: 30px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
}

.contact-form-wrapper h3 {
	font-size: 32px;
	margin-bottom: 10px;
}

.contact-form-wrapper p {
	font-size: 16px;
	opacity: 0.7;
	margin-bottom: 0px;
}

.abacus-contact-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.abacus-contact-form .form-group {
	margin-bottom: 0px;
}

/* CF7 adjustments */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.abacus-contact-form input:not([type="submit"]),
.abacus-contact-form textarea,
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea {
	width: 100%;
	padding: 15px 25px;
	border: 1.5px solid #d1d9e2;
	background-color: #fff;
	border-radius: 15px;
	font-family: var(--secondary-font);
	font-size: 16px;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.abacus-contact-form input:focus,
.abacus-contact-form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--secondary-color);
	box-shadow: 0 5px 15px rgba(102, 84, 232, 0.1);
}

/* Match CF7 Submit to theme button */
.wpcf7-submit {
	background-color: var(--accent-color) !important;
	color: #fff !important;
	border-radius: 18px !important;
	padding: 12px 30px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
}

.wpcf7-submit:hover {
	background-color: var(--yellow-color) !important;
	color: var(--primary-color) !important;
}

@media (max-width: 991px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.contact-form-wrapper {
		padding: 30px;
	}
}

@media (max-width: 575px) {
	.abacus-contact-form .form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/*--------------------------------------------------------------
# Hero Title Widget
--------------------------------------------------------------*/
.abacus-hero-title-wrapper {
	max-width: 800px;
}

.hero-title {
	font-size: var(--h1-size);
	margin-bottom: 20px;
}

.hero-desc {
	color: var(--text-color);
	margin-bottom: 50px;
}

.hero-buttons {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.hero-btn-primary {
	padding: 10px 20px !important;
	border-radius: 20px !important;
	font-size: 18px !important;
}

.hero-btn-video {
	display: flex;
	align-items: center;
	gap: 15px;
	font-weight: 600;
	color: #385469;
	transition: all 0.3s ease;
}

.video-icon-box {
	width: 45px;
	height: 45px;
	background-color: #6654E8;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 0 0 0 10px rgba(102, 84, 232, 0.05);
}

.hero-btn-video:hover .video-icon-box {
	transform: scale(1.1);
	box-shadow: 0 0 0 15px rgba(102, 84, 232, 0.1);
}

.video-btn-text {
	font-size: 18px;
	font-family: var(--primary-font);
}

@media (max-width: 768px) {
	.hero-title {
		font-size: 48px;
	}

	.hero-desc {
		font-size: 18px;
	}

	.hero-buttons {
		gap: 20px;
	}
}