/**
 * DriveAce Courses Frontend Stylesheet
 * Pixel-perfect responsive design matching provided driving lesson layouts
 */

:root {
	--driveace-primary: #0073E6;
	--driveace-primary-hover: #005bb8;
	--driveace-navy-dark: #07152d;
	--driveace-navy-card: #0c1a38;
	--driveace-text-dark: #0f172a;
	--driveace-text-muted: #64748b;
	--driveace-border-color: #e2e8f0;
	--driveace-bg-light: #f8fafc;
	--driveace-box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
	--driveace-box-shadow-hover: 0 12px 30px -4px rgba(0, 115, 230, 0.18);
	--driveace-radius-lg: 16px;
	--driveace-radius-md: 10px;
	--driveace-radius-sm: 6px;
	--driveace-font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--driveace-font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================================
   GLOBAL / CONTAINER RESETS
   ========================================================== */
.driveace-single-course-wrapper,
.driveace-courses-section,
.driveace-archive-wrapper,
.driveace-hero-standalone-banner {
	font-family: var(--driveace-font-main);
	color: var(--driveace-text-dark);
	line-height: 1.6;
	box-sizing: border-box;
}

.driveace-single-course-wrapper *,
.driveace-courses-section *,
.driveace-archive-wrapper *,
.driveace-hero-standalone-banner * {
	box-sizing: border-box;
}

.driveace-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================
   HEADER UNDERLAY / HERO BANNER BEHIND HEADER
   ========================================================== */
body.single-driveace_course,
body.post-type-archive-driveace_course {
	position: relative;
}

body.single-driveace_course header.site-header,
body.single-driveace_course #site-header,
body.single-driveace_course #masthead,
body.single-driveace_course .elementor-location-header,
body.single-driveace_course .header-wrapper,
body.single-driveace_course .jeg_header,
body.single-driveace_course .jkit-header,
body.single-driveace_course .jeg-header,
body.post-type-archive-driveace_course header.site-header,
body.post-type-archive-driveace_course #site-header,
body.post-type-archive-driveace_course #masthead,
body.post-type-archive-driveace_course .elementor-location-header,
body.post-type-archive-driveace_course .header-wrapper,
body.post-type-archive-driveace_course .jeg_header,
body.post-type-archive-driveace_course .jkit-header,
body.post-type-archive-driveace_course .jeg-header {
	position: absolute !important;
	top: 15px !important;
	left: 0 !important;
	width: 100% !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	z-index: 999 !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-driveace_course .elementor-location-header .elementor-section,
body.single-driveace_course .header-wrapper .elementor-section,
body.single-driveace_course .jkit-header .elementor-section,
body.single-driveace_course .jeg_header .elementor-section,
body.post-type-archive-driveace_course .elementor-location-header .elementor-section,
body.post-type-archive-driveace_course .header-wrapper .elementor-section,
body.post-type-archive-driveace_course .jkit-header .elementor-section,
body.post-type-archive-driveace_course .jeg_header .elementor-section {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
}

body.admin-bar.single-driveace_course header.site-header,
body.admin-bar.single-driveace_course #site-header,
body.admin-bar.single-driveace_course #masthead,
body.admin-bar.single-driveace_course .elementor-location-header,
body.admin-bar.single-driveace_course .header-wrapper,
body.admin-bar.single-driveace_course .jeg_header,
body.admin-bar.single-driveace_course .jkit-header,
body.admin-bar.single-driveace_course .jeg-header,
body.admin-bar.post-type-archive-driveace_course header.site-header,
body.admin-bar.post-type-archive-driveace_course #site-header,
body.admin-bar.post-type-archive-driveace_course #masthead,
body.admin-bar.post-type-archive-driveace_course .elementor-location-header,
body.admin-bar.post-type-archive-driveace_course .header-wrapper,
body.admin-bar.post-type-archive-driveace_course .jeg_header,
body.admin-bar.post-type-archive-driveace_course .jkit-header,
body.admin-bar.post-type-archive-driveace_course .jeg-header {
	top: 45px !important;
}

/* ==========================================================
   MODERN HERO BANNER (MATCHING SCREENSHOT WITH #0073E6)
   ========================================================== */
.driveace-hero-banner,
.driveace-archive-hero,
.driveace-hero-standalone-banner {
	background: linear-gradient(105deg, #030e22 0%, #071e46 35%, #004ea1 75%, #0073E6 100%);
	color: #ffffff;
	padding: 175px 0 65px !important;
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

body.admin-bar.single-driveace_course .driveace-hero-banner,
body.admin-bar.post-type-archive-driveace_course .driveace-archive-hero {
	padding-top: 195px !important;
}

.driveace-hero-banner::after,
.driveace-hero-standalone-banner::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 55%;
	height: 100%;
	background: radial-gradient(circle at right center, rgba(0, 115, 230, 0.4) 0%, rgba(0, 115, 230, 0) 70%);
	pointer-events: none;
}

.driveace-hero-content {
	position: relative;
	z-index: 2;
	max-width: 850px;
	margin-top: 10px;
}

/* Tag Pill */
.driveace-hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(8px);
	padding: 6px 18px;
	border-radius: 50px;
	margin-bottom: 16px;
	margin-top: 10px;
}

/* Big Hero Title */
.driveace-hero-title {
	font-family: var(--driveace-font-heading);
	font-size: 52px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	margin: 0 0 16px;
	color: #ffffff;
}

.driveace-hero-title .driveace-title-sub,
.driveace-hero-title span {
	color: #38bdf8;
	font-weight: 700;
}

.driveace-hero-subtitle {
	font-size: 16.5px;
	color: #e2e8f0;
	line-height: 1.6;
	margin: 0 0 22px;
	max-width: 620px;
}

/* Banner Slider Arrow Controls on sides */
.driveace-banner-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	transition: all 0.2s ease;
}

.driveace-banner-arrow:hover {
	background: #0073E6;
	border-color: #0073E6;
	color: #ffffff;
	transform: translateY(-50%) scale(1.1);
}

.driveace-banner-arrow.prev {
	left: 20px;
}

.driveace-banner-arrow.next {
	right: 20px;
}

/* Floating Navbar pill inside standalone banner */
.driveace-floating-nav {
	background: #ffffff;
	border-radius: 50px;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 45px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 10;
}

.driveace-floating-nav-left .driveace-brand-logo {
	font-family: var(--driveace-font-heading);
	font-size: 18px;
	font-weight: 800;
	color: #071e46;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.driveace-floating-nav-links {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.driveace-floating-nav-links a {
	color: #1e293b;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color 0.2s;
}

.driveace-floating-nav-links a:hover,
.driveace-floating-nav-links a.active {
	color: #0073E6;
}

.driveace-floating-nav-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.driveace-floating-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0f172a;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 700;
}

.driveace-floating-phone-icon {
	width: 32px;
	height: 32px;
	background: #0073E6;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.driveace-floating-btn {
	background: #0073E6;
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 18px;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.2s;
}

.driveace-floating-btn:hover {
	background: #005bb8;
	color: #ffffff;
	transform: translateY(-1px);
}

.driveace-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #94a3b8;
}

.driveace-breadcrumb a {
	color: #e2e8f0;
	text-decoration: none;
	transition: color 0.2s;
}

.driveace-breadcrumb a:hover {
	color: #38bdf8;
}

.driveace-breadcrumb .driveace-sep {
	color: #64748b;
}

.driveace-breadcrumb .driveace-current {
	color: #38bdf8;
}

.driveace-breadcrumb a:hover {
	color: #38bdf8;
}

.driveace-breadcrumb .driveace-sep {
	color: #64748b;
}

.driveace-breadcrumb .driveace-current {
	color: #38bdf8;
}

/* ==========================================================
   MAIN LAYOUT & 2-COLUMN GRID (SINGLE COURSE)
   ========================================================== */
.driveace-main-section {
	padding: 50px 0 80px;
	background-color: #f8fafc;
}

.driveace-layout-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 35px;
	align-items: start;
}

/* ==========================================================
   LEFT COLUMN (COURSE DETAILS)
   ========================================================== */
.driveace-content-col {
	background: #ffffff;
	border-radius: var(--driveace-radius-lg);
	padding: 35px;
	border: 1px solid var(--driveace-border-color);
	box-shadow: var(--driveace-box-shadow);
}

/* Featured Media & DVSA Badge */
.driveace-featured-media {
	position: relative;
	border-radius: var(--driveace-radius-lg);
	overflow: hidden;
	margin-bottom: 30px;
	background-color: #0f172a;
}

.driveace-featured-media .driveace-main-img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}

.driveace-dvsa-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	background: #0066ff;
	color: #ffffff;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-top-left-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.driveace-dvsa-icon {
	margin-bottom: 4px;
}

.driveace-dvsa-text {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Course Intro */
.driveace-section-heading {
	font-family: var(--driveace-font-heading);
	font-size: 28px;
	font-weight: 800;
	color: var(--driveace-text-dark);
	margin: 0 0 16px;
}

.driveace-entry-content {
	font-size: 15px;
	color: #475569;
	line-height: 1.7;
	margin-bottom: 35px;
}

/* About Lessons Section */
.driveace-about-lessons {
	border-top: 1px solid #f1f5f9;
	padding-top: 30px;
	margin-bottom: 35px;
}

.driveace-about-heading {
	font-family: var(--driveace-font-heading);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--driveace-text-dark);
}

.driveace-about-desc {
	font-size: 14.5px;
	color: var(--driveace-text-muted);
	margin: 0 0 22px;
}

.driveace-about-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 25px;
	align-items: center;
}

.driveace-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.driveace-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
}

.driveace-check-bullet {
	color: #0073E6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.driveace-secondary-image-col .driveace-side-car-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var(--driveace-radius-md);
	display: block;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Key Info Boxes Grid */
.driveace-info-boxes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 35px;
}

.driveace-info-box {
	background: #f0f7ff;
	border: 1px solid #dbeafe;
	border-radius: var(--driveace-radius-md);
	padding: 18px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.driveace-info-box-icon {
	width: 48px;
	height: 48px;
	background: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0073E6;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 115, 230, 0.12);
}

.driveace-info-box-text {
	display: flex;
	flex-direction: column;
}

.driveace-info-box-label {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #64748b;
	margin-bottom: 2px;
}

.driveace-info-box-val {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
}

/* Bottom CTA Banner */
.driveace-cta-banner {
	background: var(--driveace-navy-card);
	border-radius: var(--driveace-radius-md);
	padding: 28px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #ffffff;
	gap: 20px;
}

.driveace-cta-left {
	max-width: 60%;
}

.driveace-cta-title {
	font-family: var(--driveace-font-heading);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #ffffff;
}

.driveace-cta-desc {
	font-size: 13.5px;
	color: #94a3b8;
	margin: 0;
	line-height: 1.5;
}

.driveace-cta-right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.driveace-cta-price-wrap {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.driveace-cta-price {
	font-family: var(--driveace-font-heading);
	font-size: 24px;
	font-weight: 800;
	color: #38bdf8;
	line-height: 1.1;
}

.driveace-cta-period {
	font-size: 12px;
	color: #94a3b8;
}

.driveace-cta-btn {
	background: #ffffff !important;
	color: #0c1a38 !important;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 22px;
	border-radius: var(--driveace-radius-sm);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.25s ease;
}

.driveace-cta-btn:hover {
	background: #0073E6 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
}

/* ==========================================================
   RIGHT COLUMN (SIDEBAR)
   ========================================================== */
.driveace-sidebar-col {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.driveace-sidebar-card {
	background: #ffffff;
	border-radius: var(--driveace-radius-md);
	padding: 26px;
	border: 1px solid var(--driveace-border-color);
	box-shadow: var(--driveace-box-shadow);
	position: relative;
}

.driveace-widget-title {
	font-family: var(--driveace-font-heading);
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #f1f5f9;
	color: var(--driveace-text-dark);
	position: relative;
}

.driveace-widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 40px;
	height: 2px;
	background: #0073E6;
}

/* Sidebar Courses List */
.driveace-side-course-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.driveace-side-course-menu li {
	border-bottom: 1px solid #f1f5f9;
}

.driveace-side-course-menu li:last-child {
	border-bottom: none;
}

.driveace-side-course-menu li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	color: #334155;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	transition: all 0.2s;
}

.driveace-side-course-menu li a:hover,
.driveace-side-course-menu li.active a {
	color: #0073E6;
	font-weight: 700;
	padding-left: 5px;
}

.driveace-side-course-menu .driveace-menu-chevron {
	color: #0073E6;
	font-weight: 700;
}

/* Call Box Widget */
.driveace-call-widget {
	background: #0073E6;
	border-radius: var(--driveace-radius-md);
	padding: 26px;
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 115, 230, 0.25);
}

.driveace-call-header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.driveace-call-icon-wrap {
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	flex-shrink: 0;
}

.driveace-call-title {
	font-family: var(--driveace-font-heading);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 2px;
	color: #ffffff;
}

.driveace-call-sub {
	font-size: 13px;
	color: #e0f2fe;
}

.driveace-call-btn {
	display: block;
	text-align: center;
	background: #ffffff !important;
	color: #0073E6 !important;
	font-size: 14px;
	font-weight: 800;
	padding: 12px 18px;
	border-radius: var(--driveace-radius-sm);
	text-decoration: none;
	transition: all 0.2s ease;
}

.driveace-call-btn:hover {
	background: #f8fafc !important;
	color: #005bb8 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Contact Form Widget */
.driveace-form-group {
	margin-bottom: 14px;
}

.driveace-input-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.driveace-input-icon-wrap input,
.driveace-input-icon-wrap select,
.driveace-form-group textarea {
	width: 100%;
	background: #f8fafc;
	border: 1px solid var(--driveace-border-color);
	border-radius: var(--driveace-radius-sm);
	padding: 11px 40px 11px 14px;
	font-size: 13.5px;
	font-family: var(--driveace-font-main);
	color: var(--driveace-text-dark);
	transition: all 0.2s;
	outline: none;
}

.driveace-input-icon-wrap select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.driveace-form-group textarea {
	padding: 12px 14px;
	resize: vertical;
}

.driveace-input-icon-wrap input:focus,
.driveace-input-icon-wrap select:focus,
.driveace-form-group textarea:focus {
	background: #ffffff;
	border-color: #0073E6;
	box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
}

.driveace-input-icon {
	position: absolute;
	right: 14px;
	color: #94a3b8;
	pointer-events: none;
	display: flex;
	align-items: center;
}

.driveace-contact-form-widget .driveace-submit-btn,
button.driveace-submit-btn,
.driveace-submit-btn {
	width: 100% !important;
	background: #0073E6 !important;
	background-color: #0073E6 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--driveace-radius-sm) !important;
	padding: 14px 20px !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 4px 12px rgba(0, 115, 230, 0.25) !important;
}

.driveace-contact-form-widget .driveace-submit-btn:hover,
button.driveace-submit-btn:hover,
.driveace-submit-btn:hover {
	background: #005bb8 !important;
	background-color: #005bb8 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(0, 115, 230, 0.35) !important;
	transform: translateY(-2px) !important;
}

.driveace-form-feedback {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--driveace-radius-sm);
	font-size: 13px;
	font-weight: 500;
}

.driveace-form-feedback.success {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #bbf7d0;
}

.driveace-form-feedback.error {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* ==========================================================
   FRONTEND COURSE GRID & CAROUSEL (IMAGE 1)
   ========================================================== */
.driveace-courses-section {
	padding: 60px 0;
	background-color: #f8fafc;
}

.driveace-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 40px;
	gap: 20px;
}

.driveace-subtitle {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #64748b;
	margin-bottom: 8px;
}

.driveace-title {
	font-family: var(--driveace-font-heading);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	color: #0f172a;
	margin: 0 0 10px;
}

.driveace-title .driveace-highlight,
.driveace-title span {
	color: #0073E6;
}

.driveace-desc {
	font-size: 15px;
	color: #64748b;
	margin: 0;
	max-width: 500px;
}

/* Slider Nav Buttons */
.driveace-slider-nav {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.driveace-nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--driveace-border-color);
	color: #0f172a;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.driveace-nav-btn:hover {
	background: #0073E6;
	border-color: #0073E6;
	color: #ffffff;
	transform: scale(1.05);
}

/* Grid & Card Elements */
.driveace-courses-grid-wrap {
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 10px 4px 25px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.driveace-courses-grid-wrap::-webkit-scrollbar {
	display: none;
}

.driveace-courses-track {
	display: flex;
	gap: 28px;
	transition: all 0.3s ease;
}

.driveace-courses-track .driveace-course-card {
	flex: 0 0 calc((100% - (28px * 2)) / 3);
	min-width: calc((100% - (28px * 2)) / 3);
	max-width: calc((100% - (28px * 2)) / 3);
}

.driveace-courses-track[data-columns="2"] .driveace-course-card {
	flex: 0 0 calc((100% - 28px) / 2);
	min-width: calc((100% - 28px) / 2);
	max-width: calc((100% - 28px) / 2);
}

.driveace-courses-track[data-columns="1"] .driveace-course-card {
	flex: 0 0 100%;
	min-width: 100%;
	max-width: 100%;
}

.driveace-course-card {
	background: #ffffff;
	border-radius: var(--driveace-radius-lg);
	border: 1px solid var(--driveace-border-color);
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	box-shadow: var(--driveace-box-shadow);
}

.driveace-course-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--driveace-box-shadow-hover);
	border-color: #cbd5e1;
}

.driveace-card-thumb {
	position: relative;
	width: 100%;
	height: 220px;
	background-color: #0f172a;
	overflow: hidden;
}

.driveace-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.driveace-course-card:hover .driveace-card-thumb img {
	transform: scale(1.05);
}

.driveace-card-badge-price {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(15, 23, 42, 0.9);
	backdrop-filter: blur(4px);
	color: #ffffff;
	font-family: var(--driveace-font-heading);
	font-size: 16px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: var(--driveace-radius-sm);
	letter-spacing: 0.5px;
}

.driveace-card-badge-trans {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(15, 23, 42, 0.85);
	backdrop-filter: blur(4px);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: var(--driveace-radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.driveace-card-badge-trans svg {
	color: #38bdf8;
}

/* Card Body */
.driveace-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.driveace-card-instructor-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #64748b;
	margin-bottom: 10px;
}

.driveace-card-instructor-tag svg {
	color: #0073E6;
}

.driveace-card-title {
	font-family: var(--driveace-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}

.driveace-card-title a {
	color: var(--driveace-text-dark);
	text-decoration: none;
	transition: color 0.2s;
}

.driveace-card-title a:hover {
	color: #0073E6;
}

.driveace-card-excerpt {
	font-size: 14px;
	color: var(--driveace-text-muted);
	line-height: 1.55;
	margin-bottom: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 3.1em;
}

/* Tidy Duration Layout (No dashes) */
.driveace-card-duration-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 13.5px;
	font-weight: 700;
	color: #334155;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	padding: 6px 12px;
	border-radius: var(--driveace-radius-sm);
	width: fit-content;
}

.driveace-duration-icon {
	color: #0073E6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.driveace-duration-label {
	color: #334155;
	font-weight: 700;
	letter-spacing: 0.3px;
}

/* Card Button */
.driveace-btn,
a.driveace-btn {
	background: #0073E6 !important;
	color: #ffffff !important;
	font-size: 13.5px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: var(--driveace-radius-sm);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.25s ease;
	border: none;
	cursor: pointer;
}

.driveace-btn:hover,
a.driveace-btn:hover {
	background: #005bb8 !important;
	color: #ffffff !important;
}

.driveace-btn svg {
	transition: transform 0.2s ease;
}

.driveace-btn:hover svg {
	transform: translateX(4px);
}

/* ==========================================================
   RESPONSIVENESS & MEDIA QUERIES
   ========================================================== */
@media (max-width: 1024px) {
	.driveace-layout-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Tablet (Tab): Exactly 2 Cards Per Row / View! */
	.driveace-courses-track .driveace-course-card,
	.driveace-courses-track[data-columns="3"] .driveace-course-card,
	.driveace-courses-track[data-columns="2"] .driveace-course-card {
		flex: 0 0 calc((100% - 24px) / 2) !important;
		min-width: calc((100% - 24px) / 2) !important;
		max-width: calc((100% - 24px) / 2) !important;
	}

	.driveace-courses-track {
		gap: 24px !important;
	}
}

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

	.driveace-section-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.driveace-about-grid {
		grid-template-columns: 1fr;
	}

	.driveace-info-boxes-grid {
		grid-template-columns: 1fr;
	}

	.driveace-cta-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.driveace-cta-left {
		max-width: 100%;
	}

	.driveace-cta-right {
		width: 100%;
		justify-content: space-between;
	}

	.driveace-content-col {
		padding: 22px;
	}
}

@media (max-width: 640px) {
	/* Mobile: Exactly 1 Card Per View */
	.driveace-courses-track .driveace-course-card,
	.driveace-courses-track[data-columns="3"] .driveace-course-card,
	.driveace-courses-track[data-columns="2"] .driveace-course-card,
	.driveace-courses-track[data-columns="1"] .driveace-course-card {
		flex: 0 0 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}

	.driveace-hero-title {
		font-size: 26px;
	}
}

/* ==========================================================
   GLOBAL STICKY FLOATING "BOOK ONLINE" BUTTON (MIDDLE RIGHT)
   ========================================================== */
.driveace-sticky-float-wrap {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999999;
	pointer-events: auto;
}

.driveace-sticky-float-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #0073E6 !important;
	color: #ffffff !important;
	font-family: var(--driveace-font-main, sans-serif);
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 13px 18px 13px 15px;
	border-radius: 30px 0 0 30px;
	text-decoration: none !important;
	box-shadow: -4px 6px 24px rgba(0, 115, 230, 0.45);
	transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-right: none;
	cursor: pointer;
	line-height: 1;
}

.driveace-sticky-float-btn:hover {
	background: #005bb8 !important;
	color: #ffffff !important;
	transform: translateX(-6px);
	box-shadow: -6px 10px 30px rgba(0, 115, 230, 0.65);
}

.driveace-sticky-float-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.driveace-sticky-float-text {
	color: #ffffff;
	font-weight: 800;
	white-space: nowrap;
}

.driveace-sticky-float-arrow {
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	color: #ffffff;
	transition: transform 0.2s ease;
}

.driveace-sticky-float-btn:hover .driveace-sticky-float-arrow {
	transform: translateX(3px);
}

@media (max-width: 768px) {
	.driveace-sticky-float-btn {
		font-size: 12px;
		padding: 10px 14px 10px 12px;
		gap: 6px;
		box-shadow: -3px 4px 18px rgba(0, 115, 230, 0.4);
	}

	.driveace-sticky-float-icon svg {
		width: 15px;
		height: 15px;
	}
}

/* ==========================================================
   GLOBAL FLOATING WHATSAPP CHAT BUTTON (BOTTOM RIGHT)
   ========================================================== */
.driveace-whatsapp-float-wrap {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999998;
	display: flex;
	align-items: center;
	pointer-events: auto;
}

.driveace-whatsapp-float-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.driveace-whatsapp-float-link:hover {
	transform: scale(1.05) translateY(-2px);
}

.driveace-whatsapp-badge {
	background: #ffffff;
	color: #1e293b;
	font-family: var(--driveace-font-main, sans-serif);
	font-size: 13.5px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	border: 1px solid #e2e8f0;
	white-space: nowrap;
	line-height: 1.4;
	transition: all 0.2s ease;
}

.driveace-whatsapp-float-link:hover .driveace-whatsapp-badge {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	color: #25D366;
}

.driveace-whatsapp-icon-btn {
	width: 54px;
	height: 54px;
	background: #25D366;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
	transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	flex-shrink: 0;
}

.driveace-whatsapp-icon-btn svg {
	width: 30px;
	height: 30px;
	fill: #ffffff;
}

.driveace-whatsapp-float-link:hover .driveace-whatsapp-icon-btn {
	background: #20ba5a;
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.65);
}

@media (max-width: 640px) {
	.driveace-whatsapp-float-wrap {
		bottom: 18px;
		right: 16px;
	}

	.driveace-whatsapp-badge {
		font-size: 12px;
		padding: 6px 12px;
	}

	.driveace-whatsapp-icon-btn {
		width: 46px;
		height: 46px;
	}

	.driveace-whatsapp-icon-btn svg {
		width: 25px;
		height: 25px;
	}
}