/* ========================================= */
/* COURSE DETAILS PAGE */
/* ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.course-hero {
    background: #0f172a;
    padding: 80px 0;
    color: var(--color-white);
    margin-top: 0;
    position: relative;
}

.course-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.course-hero-content h1 {
    font-size: 32px;
    /* Adjusted to match image scale better */
    margin-bottom: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.breadcrumb {
    color: #ccc;
    font-size: 16px;
}

.course-content-section {
    padding: 60px 0;
    min-height: 800px;
}

/* Standard container from common.css is 1200px. 
   We make the course layout centered and optimized for readability. */
/* Desktop Only Constraint */
/* Desktop Constraint Handled by course-redesign.css now */
/* @media (min-width: 992px) {
    .container.course-layout {
        max-width: 1500px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }

    .course-sidebar {
        display: block;
        width: 300px;
        flex-shrink: 0;
        margin-left: 40px;
    }
} */

.course-feature-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.course-main h2 {
    margin-bottom: 20px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
}

.course-main p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
}

.course-highlights ul {
    list-style: none;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.course-highlights ul li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

.course-highlights ul li:last-child {
    border-bottom: none;
}

.course-highlights ul li::before {
    content: "★";
    color: #ffd700;
    margin-right: 10px;
}

.modules-list {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.module-item {
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.3s;
}

.module-item:hover {
    background: var(--color-bg-secondary);
}

.module-number {
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.2);
    margin-right: 15px;
}

.module-name {
    font-weight: 600;
    color: var(--text-primary);
}

/* SIDEBAR STYLES */
.info-card,
.enquiry-form-card {
    /* Base card style is shared in common.css */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 25px;
    margin-bottom: 30px;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Sticky removed from here, applied to group */
}

/* New Sticky Group Wrapper */
.sidebar-sticky-group {
    position: sticky;
    top: 100px;
    z-index: 90;
    height: fit-content;
}

.enquiry-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 24px;
}

.info-card h3,
.enquiry-form-card h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding-bottom: 5px;
}

.info-row span {
    color: #aaa;
}

.info-row strong {
    color: var(--accent-color);
}

/* FORM STYLES */
.enquiry-form-card input,
.enquiry-form-card textarea,
select {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px;
    color: var(--text-primary);
    margin-bottom: 15px;
    border-radius: 5px;
}

.enquiry-form-card button {
    width: 100%;
}

/* RESPONSIVE */
/* RESPONSIVE */


/* ENHANCED ENROLL BUTTON - SOLID VERSION */
.enroll-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: #2149AD;
    /* Bright Blue */
    color: var(--color-white);
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease;
    border: none;
    font-size: 16px;
}

.enroll-btn:hover {
    background: #2149AD;
    /* Darker Blue */
    color: #fff;
}



.enroll-btn::after {
    content: ' →';
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 5px;
}

.enroll-btn:hover::after {
    transform: translateX(5px);
}

/* HERO SVG ICON */
.hero-svg-icon {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    font-size: 350px;
    opacity: 0.12;
    /* Slightly reduced opacity */
    color: #fff;
    z-index: 0;
    pointer-events: none;
    animation: floatIcon 6s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(-50%) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-55%) rotate(5deg) scale(1.05);
    }
}

.course-hero-modern {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
}



.course-about-section {
    position: relative;
    z-index: 10;
}

.course-about-section .course-sidebar {
    display: block !important;
}

.about-layout {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: nowrap;
}



/* FORM STICKS ONLY INSIDE ABOUT */
.course-about-section .enquiry-form-card {
    position: sticky;
    top: 120px;
}

/* NEXT SECTIONS NORMAL FLOW */
.course-content-section,
.section-wrapper {
    position: relative;
    z-index: 1;
}


/* MODERN SLIDER TESTIMONIALS (Happy Faces) */
.happy-faces-section {
    padding: 100px 0;
    background: var(--color-bg-secondary);
    overflow: hidden;
}

.happy-faces-section .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1400px !important;
    /* Wider to accommodate side-by-side */
    flex-direction: row !important;
}

/* Header Side */
.happy-faces-section .section-header {
    width: 350px;
    /* Fixed width for the text side */
    flex-shrink: 0;
    text-align: left;
    margin-bottom: 0;
}

.happy-faces-section .section-title {
    font-size: 48px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 20px;
}

.happy-faces-section .section-subtitle {
    color: #64748b;
    font-size: 18px;
    line-height: 1.6;
}

/* Slider Side */
.testimonial-slider-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 30px;
    min-width: 0;
    /* Important for flex child truncation */
}

/* Responsive */


.testimonial-track-container {
    flex: 1;
    position: relative;
    min-height: 400px;
    /* Preserve space */
}

.testimonial-slide {
    display: flex;
    align-items: center;
    gap: 50px;
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    /* Absolute positioning handled by JS for non-active slides, 
       but initially we set transitions */
    transition: opacity 0.5s ease-in-out;
    width: 100%;
}

.testimonial-slide.active {
    opacity: 1;
    position: relative;
    z-index: 1;
}

/* Image Side */
.mt-image-wrapper {
    position: relative;
    width: 280px;
    height: 350px;
    flex-shrink: 0;
}

.mt-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.mt-accent-bg {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 150px;
    height: 150px;
    background: #0ea5e9;
    /* Sky Blue */
    border-radius: 0 0 0 20px;
    /* Specific shape similar to image */
    z-index: 1;
}

/* Content Side */
.mt-content {
    flex: 1;
    text-align: left;
}

.quote-mark {
    font-size: 60px;
    color: #0ea5e9;
    font-family: serif;
    line-height: 1;
    margin-bottom: 20px;
}

.review-text {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 30px;
    font-style: italic;
}

.stars-modern {
    color: #fbbf24;
    margin-bottom: 10px;
    font-size: 14px;
}

.author-details h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.author-details span {
    font-size: 14px;
    color: #64748b;
}

/* Navigation Buttons */
.nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: transparent;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    flex-shrink: 0;
}

.nav-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
    transform: scale(1.1);
}

/* Responsive */


/* ========================================= */
/* WHY CHOOSE TECHCADD – FIXED & PROFESSIONAL */
/* ========================================= */

.course-section {
    padding: 90px 0;
    background: #ffffff;

}

.course-section.bg-light {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

/* Force stack layout to ensure Heading is on top and Content is below */
.course-stack-container {
    flex-direction: column !important;
    align-items: center !important;
    max-width: 1400px;
}

/* Section Title */
.fullwidth-title {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 60px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* Grid Layout */
.why-choose-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 35px;
}

/* Card */
.why-choose-card {
    background: #ffffff;
    padding: 38px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* Accent bar */
.why-choose-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: #0ea5e9;
    border-radius: 18px 0 0 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Fix for specific last-child issue if present in other css or inline styles? 
   Actually, let's look at the rest of the file first. 
   I will abort this tool call and read the rest of the file. */

/* Hover */
.why-choose-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(2, 132, 199, 0.15);
}

.why-choose-card:hover::before {
    opacity: 1;
}

/* Title */
.why-choose-title {
    font-size: 21px;
    font-weight: 700;
    color: #0ea5e9;
    margin-bottom: 14px;
    display: block;
}

/* Text */
.why-choose-text {
    font-size: 15.5px;
    color: #475569;
    line-height: 1.75;
    margin: 0;
}

/* Mobile */



/* Mid Content Wrapper */
.mid-content-wrapper {
    /* margin-bottom: 60px; */
    max-width: 900%;

}

/* Career Tags */
.career-tags-wrapper {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.career-tag {
    background: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 16px;
    color: var(--text-secondary);
    border: 1px solid #e2e8f0;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    cursor: default;
}

.career-tag:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(2, 132, 199, 0.2);
}



/* ========================================= */
/* ADDITION: SOCIAL SHARE & CARD STYLES */
/* ========================================= */
.social-share-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.social-btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.3s ease;
    text-decoration: none;
    background: #fff;
}

.social-btn-circle:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.start-now-btn {
    background: #1e3a8a;
    /* Deep Blue */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 20px;
    font-size: 16px;
    transition: 0.3s;
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.2);
}


.start-now-btn:hover {
    background: #172554;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.3);
}

/* CTA Card (Replaces inline styles) */
.cta-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 90px;
    margin: 50px 0;
    text-align: center;
}

.cta-card h2 {
    color: var(--color-primary);
    margin-bottom: 20px;
}


.cta-card p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
}

.cta-card .enroll-btn {
    display: inline-block;
    width: auto;
    padding: 14px 40px;
    font-size: 16px;
}

/* RESPONSIVE UPDATES */


/* Ensure Enquiry Form Card matches the Premium Design */
.enquiry-form-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    /* Match new shadow */
    margin-bottom: 30px;
}

.enquiry-form-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0f172a;
}

.enquiry-form-card .form-subtitle {
    color: #64748b;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Map Container Override */
.sidebar-sticky-group>div[style*='margin-top']>div[style*='border-radius'] {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
    border-radius: 16px !important;
}

/* FAQ Sidebar Override */
.sidebar-sticky-group>div[style*='background: #fff'] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08) !important;
}

/* Career Grid Card */
.career-grid-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, border-color 0.3s ease;
    height: 100%;
}

.career-grid-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08);
}

.career-grid-card h4 {
    color: var(--color-primary);
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
}

.career-grid-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}


/* Sidebar Meta Rows */
.course-meta-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 15px;
}

.meta-row.no-border {
    border-bottom: none;
    padding-bottom: 0;
}

.meta-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.meta-icon {
    color: var(--color-primary);
    width: 20px;
}

.meta-label {
    color: var(--text-secondary);
    font-size: 15px;
}

.meta-value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
    text-align: right;
}

/* ========================================= */
/* FAQ SECTION STYLES (MATCHING USER DESIGN) */
/* ========================================= */
.faq-container {
    margin-top: 30px;
}

.faq-container h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: var(--text-primary);
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 10px;
}

.faq-item {
    background: #ffffff;
    /* Clean white background */
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.faq-question {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
    transition: background 0.2s;
}

/* Question text */
.faq-question span {
    font-weight: 500;
    color: #475569;
    font-size: 15px;
    flex: 1;
    padding-right: 15px;
}

/* The circular toggle button */
.faq-toggle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #00bcd4;
    /* Cyan/Teal color from image */
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    cursor: pointer;
}

.faq-toggle-btn i {
    transition: transform 0.3s ease;
}

/* Answer Area */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #ffffff;
    border-top: 1px solid transparent;
}

.faq-answer p {
    padding: 0 20px 20px 20px;
    margin: 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* ACTIVE STATE */
.faq-item.active {
    border-color: #e2e8f0;
}

.faq-item.active .faq-toggle-btn {
    background: #00bcd4;
    transform: rotate(45deg);
    /* Turns Plus to X */
}

.faq-item.active .faq-answer {
    max-height: 500px;
    /* Arbitrary limit for transition */
    border-top-color: #f1f5f9;
}

.faq-item.active .faq-question span {
    color: #0f172a;
    font-weight: 600;
}

/* ========================================= */

/* NEW WHY CHOOSE SECTION DESIGN (Grid Layout + Visuals) */

/* ========================================= */



.why-choose-layout {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

    position: relative;

    padding: 20px 0;

}



.why-choose-content {

    flex: 1;

    max-width: 600px;

}



/* Updated List Item / Card Style */

.why-choose-list-item {

    background: #ffffff;

    padding: 25px;

    border-radius: 12px;

    margin-bottom: 20px;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

    border: 1px solid #eef2f6;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.why-choose-list-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

}



.why-choose-list-item h4 {

    color: var(--color-primary, #0ea5e9);

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 10px;

}



.why-choose-list-item p {

    color: var(--text-secondary, #64748b);

    font-size: 15px;

    line-height: 1.6;

    margin: 0;

}



/* Right Side Visuals */

.why-choose-visuals {

    flex: 1;

    position: relative;

    height: 600px;
    /* Adjust based on content */

    display: flex;

    justify-content: center;

    align-items: center;

}



/* Circles */

.why-visual-circle {

    position: absolute;

    border-radius: 50%;

    overflow: hidden;

    border: 5px solid #fff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

}



/* Top Right Image (Instructor) */

.why-circle-1 {

    width: 320px;

    height: 320px;

    top: 0;

    right: 20px;

    z-index: 2;

    background: #ecfeff;
    /* Light cyan bg */

}



/* Bottom Left Image (Group/Students) */

.why-circle-2 {

    width: 280px;

    height: 280px;

    bottom: 20px;

    left: 40px;

    z-index: 1;

    background: #fff;

}



.why-visual-circle img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Background Decoration if needed */

.bg-light-blue {

    background: #f0f9ff;
    /* Light Blue */

}



/* Decorative Elements */

.deco-icon-1 {

    position: absolute;

    top: 40%;

    left: 0;

    font-size: 40px;

    color: #f43f5e;

    animation: pulse 2s infinite;

}



.deco-icon-2 {

    position: absolute;

    bottom: 15%;

    right: 10%;

    font-size: 40px;

    color: #0ea5e9;

    animation: spin 10s linear infinite;

}



@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}



/* Responsive */





/* ========================================= */

/* MODERN WHY CHOOSE SECTION (USER REQUEST) */

/* ========================================= */



.why-choose-modern {

    background: #ebfaff;
    /* Light Blue Background */

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



/* Layout */

.why-modern-layout {

    display: flex;

    align-items: flex-start;

    gap: 60px;

    position: relative;

    z-index: 2;

}



/* Left Content */

.why-modern-left {

    flex: 6;
    /* 60% approx */

}



/* Intro Text */

.why-modern-intro {

    color: #475569;

    margin-bottom: 40px;

    font-size: 16px;

    line-height: 1.7;

    max-width: 90%;

}



/* Feature Cards */

.why-modern-card {

    background: #ffffff;

    padding: 30px;

    border-radius: 16px;

    margin-bottom: 24px;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border: 1px solid rgba(255, 255, 255, 0.5);

}



.why-modern-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

}



.why-modern-card h4 {

    font-size: 19px;

    font-weight: 700;

    color: #1e293b;

    margin-bottom: 12px;

}



.why-modern-card p {

    font-size: 15px;

    color: #64748b;

    margin: 0;

    line-height: 1.6;

}



/* Right Visuals */

.why-modern-right {

    flex: 5;
    /* 40% approx */

    position: relative;

    height: 700px;
    /* Tall enough to contain the overlapping circles */

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding-top: 50px;

}



/* Circle Wrappers */

.wm-visual-container {

    position: relative;

    width: 100%;

    height: 100%;

}



/* Top Circle (Instructor) */

.wm-circle-1 {

    position: absolute;

    top: 0;

    right: 20px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: #fff;

    padding: 8px;
    /* White border effect */

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    z-index: 5;

}



.wm-circle-1 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    background: #0f172a;
    /* Fallback bg */

}



/* Dashed Ring */

.wm-dashed-ring {

    position: absolute;

    top: -25px;

    right: -5px;

    width: 370px;

    height: 370px;

    border-radius: 50%;

    border: 2px dashed #38bdf8;

    z-index: 4;

    animation: wm-spin 30s linear infinite;

    opacity: 0.6;

}



/* Bottom Circle (Group) */

.wm-circle-2 {

    position: absolute;

    top: 280px;
    /* Push down */

    right: 180px;
    /* Push left relative to container right */

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: #fff;

    padding: 8px;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    z-index: 6;

}



.wm-circle-2 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}



/* Blue Outline for Bottom Circle */

.wm-blue-outline {

    position: absolute;

    top: 270px;

    right: 170px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    border: 1px solid #38bdf8;

    z-index: 3;

    opacity: 0.4;

}



/* Floating Icons */

.wm-icon-target {

    position: absolute;

    top: 260px;

    right: 360px;
    /* Positioned between/left of circles */

    width: 60px;

    height: 60px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    color: #f43f5e;
    /* Pink */

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    z-index: 10;

    animation: wm-bounce 3s infinite ease-in-out;

}



.wm-icon-gear {

    position: absolute;

    bottom: 80px;

    right: 50px;

    font-size: 36px;

    color: #38bdf8;
    /* Light Blue */

    animation: wm-spin 8s linear infinite;

    opacity: 0.8;

}



.wm-icon-code {

    position: absolute;

    top: -20px;

    right: 380px;

    font-size: 40px;

    color: #fff;

    opacity: 0.8;

}





/* Animations */

@keyframes wm-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}



@keyframes wm-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}



/* Responsive */





/* ========================================= */

/* DARK STAGGERED WHY CHOOSE SECTION (USER REQUEST) */

/* ========================================= */



.why-choose-dark-staggered {

    background: #0f172a;
    /* Dark Navy/Black background */

    padding: 80px 0;

    color: #fff;

    overflow: hidden;

}



.wcds-container {

    display: flex;

    align-items: center;

    gap: 50px;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Left Image Side */

.wcds-image-side {

    flex: 1;

    height: 600px;

    position: relative;

    border-radius: 20px;

    overflow: hidden;

}



.wcds-image-side::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to right, rgba(15, 23, 42, 0.8), transparent);

    z-index: 1;

}



.wcds-image-side img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



/* Right Content Side */

.wcds-content-side {

    flex: 1.2;

    padding-left: 20px;

}



.wcds-title {

    font-size: 42px;

    font-weight: 700;

    margin-bottom: 50px;

    color: #fff;

    /* text-align: center; Usually centered or left, image implies centered above or just top */

}



.wcds-list {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



/* Item Styling */

.wcds-item {

    display: flex;

    align-items: center;

    padding: 20px 30px;

    color: #fff;

    position: relative;

    /* width: 85%; */

    max-width: 600px;

    transition: transform 0.3s ease;

    min-height: 100px;

}



.wcds-item:hover {

    transform: scale(1.02);

    z-index: 10;

}



.wcds-icon {

    font-size: 32px;

    flex-shrink: 0;

}



.wcds-text-content {

    flex: 1;

}



.wcds-text-content h4 {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 5px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: #fff;

}



.wcds-text-content p {

    font-size: 14px;

    margin: 0;

    line-height: 1.4;

    opacity: 0.9;

    color: #fff;

}



/* Separator Line in Item */

.wcds-line {

    width: 2px;

    height: 40px;

    background: rgba(255, 255, 255, 0.3);

    margin: 0 20px;

}



/* ODD ITEMS (Left aligned, Blue/Yellow/Pink) */

.wcds-item.odd {

    background: var(--item-color);

    margin-right: auto;
    /* Align left */

    flex-direction: row;

    /* Icon Left */

}



/* EVEN ITEMS (Right aligned/Indented, Green/Brown) */

.wcds-item.even {

    background: var(--item-color);

    margin-left: auto;
    /* Moves it to the right */

    flex-direction: row-reverse;

    text-align: right;

    /* Icon Right */

}



/* Colors based on image */

.wcds-blue {
    --item-color: #2149AD;
}

/* Blue */

.wcds-green {
    --item-color: #10b981;
}

/* Green */

.wcds-yellow {
    --item-color: #eab308;
}

/* Yellow/Gold */

.wcds-orange {
    --item-color: #d97706;
}

/* Brown/Orange */

.wcds-pink {
    --item-color: #ec4899;
}

/* Pink */



/* Responsive */





/* ========================================= */

/* MODERN WHY CHOOSE - STICKY FIX & REFINEMENTS */

/* ========================================= */



/* Ensure the layout container allows sticky positioning */

.why-modern-layout {

    align-items: flex-start;
    /* Required for sticky child */

}



/* Make the visual side sticky so it tracks with long content */

.why-modern-right {

    position: sticky;

    top: 100px;
    /* Adjust based on navbar height */

    align-self: flex-start;

    height: 600px;
    /* Constrain height of visual area */

    margin-top: 0;

}



/* Ensure the left side doesn't overlap or break */

.why-modern-left {

    min-width: 0;
    /* Flexbox safety */

}



/* Refine Card Styles for better contrast */

.why-modern-card {

    border-color: rgba(255, 255, 255, 0.8);

    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.08);
    /* Subtle blue tint shadow */

}



.why-modern-card:hover {

    border-color: #38bdf8;
    /* Highlight border on hover */

    transform: translateY(-5px) scale(1.01);

}



/* Mobile Adjustments for Sticky */




/* MOBILE RESPONSIVE FIXES */


/* FIX PAGE WIDTH */
.course-content-container {
    max-width: 1500px !important;
    margin: 0 auto;
    padding-inline: var(--container-padding);
}

/* =========================================
   MOBILE RESPONSIVE - COURSE LAYOUT
   ========================================= */

/* Mobile devices (up to 768px) */
@media (max-width: 768px) {

    /* Stack course layout vertically */
    .container.course-layout {
        flex-direction: column !important;
    }

    /* Main content appears first */
    .course-main {
        order: 1;
        width: 100%;
        margin-bottom: 30px;
    }

    /* Sidebar appears below main content */
    .course-sidebar {
        order: 2;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* About section layout */
    .about-layout {
        flex-direction: column !important;
    }

    /* Remove sticky positioning on mobile */
    .course-about-section .enquiry-form-card {
        position: static;
    }

    /* Adjust course hero */
    .course-hero {
        padding: 60px 0;
    }

    .course-hero-content h1 {
        font-size: 24px;
    }

    /* Adjust feature image */
    .course-feature-img {
        margin-bottom: 20px;
    }

    /* Happy faces section */
    .happy-faces-section .container {
        flex-direction: column !important;
        gap: 30px;
    }

    .happy-faces-section .section-header {
        width: 100%;
        text-align: center;
    }

    .happy-faces-section .section-title {
        font-size: 32px;
    }

    /* CTA Card - Fix padding for mobile */
    .cta-card {
        padding: 30px 20px !important;
        margin: 30px 0 !important;
    }

    .cta-card h2 {
        font-size: 22px !important;
        line-height: 1.3;
    }

    .cta-card p {
        font-size: 15px !important;
        line-height: 1.6;
    }

    .cta-card .enroll-btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
        width: 100%;
        text-align: center;
    }
}

/* Small mobile devices (480px) */
@media (max-width: 480px) {
    .cta-card {
        padding: 25px 15px !important;
    }

    .cta-card h2 {
        font-size: 20px !important;
    }

    .cta-card p {
        font-size: 14px !important;
    }
}