@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

/* Modern Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body.index-body {
            background-color: #fffaf5; /* Requested off-white */
            color: #212529;
            font-family: "IBM Plex Sans", sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Container designed for perfect symmetry and spacing */
        .container {
            text-align: center;
            max-width: 600px;
            width: 100%;
            background: #ffffff;
            padding: 50px 40px;
            border-radius: 24px;
            box-shadow: 0 15px 35px rgba(12, 53, 106, 0.05);
        }

        /* Top Header Area with Logo and Company Name */
        .brand-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 35px;
        }

        .logo {
            max-width: 220px;
            height: auto;
            object-fit: contain;
            margin-bottom: 15px;
        }

        /* Second Line Headline styling matching the deep blue text from the logo */
        .subtitle {
            font-size: 2rem;
            color: #002927; /* Dark Green */
            font-weight: 700;
            letter-spacing: -0.5px;
            margin-bottom: 40px;
        }

        /* Button Group Positioning */
        .button-group {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;
            max-width: 320px;
            margin: 0 auto;
        }

        /* Beautiful interactive green gradient buttons inspired by the logo layers */
        .btn {
            display: block;
            padding: 16px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            color: #ffffff;
            background: #0fbab1; /* Teal */
            border: none;
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 20px rgba(15, 186, 177, 0.3);
        }

        /* Alternate color for Course 2 to add visual balance */
        .btn-secondary {
            background: #002927; /* Dark Green */
            color: #ffffff;
            box-shadow: 0 8px 20px rgba(0, 41, 39, 0.3);
        }

        /* Hover states for a premium, dynamic feel */
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
            filter: brightness(1.1);
            color: #ffffff;
        }

        .btn:active {
            transform: translateY(-1px);
        }

        /* Responsive scaling for mobile devices */
        @media (max-width: 480px) {
            .container {
                padding: 35px 20px;
            }
            .subtitle {
                font-size: 1.6rem;
            }
            .btn {
                padding: 14px 24px;
                font-size: 1rem;
            }
        }

/* Base RTL/LTR variables */
:root {
--direction: ltr;
--text-align: left;
--padding-start: left;
--padding-end: right;
--font-family: 'IBM Plex Sans', sans-serif;
--bs-body-font-family: 'IBM Plex Sans', sans-serif;
--bs-primary: #0fbab1;
--bs-primary-rgb: 15, 186, 177;
--bs-secondary: #002927;
--bs-body-color: #212529;
--bs-body-bg: #fffaf5;
}

/* Base styles */
body {
font-family: var(--font-family);
direction: var(--direction);
text-align: var(--text-align);
}

.course-main {
font-size: 14px;
line-height: 1.5em;
margin: 25px;
direction: var(--direction);
text-align: var(--text-align);
}

/* Typography */
.course-title {
font-weight: bold;
font-size: 28px;
line-height: 1.2em;
direction: var(--direction);
text-align: var(--text-align);
}

.course-section {
padding-top: 10px;
direction: var(--direction);
text-align: var(--text-align);
}

.course-highlight {
color: #b44de9;
}

.course-skills-list {
font-size: 12px;
}

.course-support {
padding: 6px 0;
}

/* Page breaks */
.course-new-page {
page-break-before: always;
}

.course-lesson {
page-break-before: always;
}

/* Lists */
ul {
list-style-type: disc;
padding-var(--padding-start): 20px;
padding-var(--padding-end): 0;
}

ul li {
display: list-item;
direction: var(--direction);
text-align: var(--text-align);
}

.course-toc ol {
list-style-type: none;
direction: var(--direction);
text-align: var(--text-align);
padding-var(--padding-start): 20px;
padding-var(--padding-end): 0;
}

/* Tables */
.course-content table, th, td {
border: 1px solid black;
border-collapse: collapse;
direction: var(--direction);
text-align: var(--text-align);
}

/* Question styles */
.course-question-label {
font-weight: bold;
}

.course-question-hint {
font-style: italic;
font-size: 12px;
}

/* Images */
.content-image {
max-width: 100%;
height: auto;
}

/* Shared interactive content styles */
.cb-accordion { margin: 10px 0; }
.cb-accordion-card { border: 1px solid #d3d3d3; border-radius: 10px; overflow: hidden; margin-bottom: 10px; background-color: white; }
.cb-accordion-header { background-color: #666; color: white; padding: 12px 20px; font-weight: bold; font-size: 13px; border-radius: 10px 10px 0 0; }
.cb-accordion-title { display: block; }
.cb-accordion-body { padding: 16px 20px; font-size: 13px; line-height: 1.5; color: #333; }
.cb-accordion-body-inner { display: flex; align-items: flex-start; gap: 16px; }
.cb-accordion-icon { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.cb-accordion-content { flex: 1; min-width: 0; }
.cb-accordion-body p { margin: 0 0 4px 0; }
.cb-accordion-body p:last-child { margin-bottom: 0; }

.cb-quote { display: flex; align-items: stretch; margin: 30px 0; }
.cb-quote-accent-bar { width: 5px; flex-shrink: 0; }
.cb-quote-body { flex: 1; padding-left: 20px; padding-top: 10px; }
.cb-quote-mark { margin-bottom: 4px; }
.cb-quote-mark svg { width: 60px; height: 50px; }
.cb-quote-text { font-size: 13px; font-style: italic; font-family: Georgia, 'Times New Roman', serif; color: #333; line-height: 1.9; }
.cb-quote-author { font-size: 13px; font-weight: 600; font-family: Georgia, 'Times New Roman', serif; letter-spacing: 2px; margin-top: 10px; }

.cb-summary-cards { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 30px 0; }
.cb-summary-card { border: 1px solid #e0e0e0; border-radius: 10px; padding: 24px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; background-color: white; overflow: hidden; width: 200px; position: relative; }
.cb-summary-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background-color: #555; }
.cb-summary-card-icon { width: 50px; height: 50px; object-fit: contain; margin-bottom: 10px; margin-top: 6px; }
.cb-summary-card-title { font-size: 13px; font-weight: bold; color: #333; margin-bottom: 8px; line-height: 1.3; }
.cb-summary-card-content { font-size: 13px; color: #666; line-height: 1.5; text-align: center; }
.cb-summary-card-content p { margin: 0 0 6px 0; text-align: center; }

.cb-infotabs { border: 1px solid #e0e0e0; border-radius: 10px; margin: 30px 0; overflow: hidden; background-color: white; }
.cb-infotab-panel { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; }
.cb-infotab-panel:last-child { border-bottom: none; }
.cb-infotab-title { font-weight: bold; font-size: 13px; color: #333; margin-bottom: 10px; }
.cb-infotab-body { display: flex; align-items: flex-start; gap: 16px; }
.cb-infotab-icon { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.cb-infotab-content { flex: 1; font-size: 13px; color: #333; line-height: 1.5; min-width: 0; }
.cb-infotab-content p { margin: 0 0 4px 0; }

.cb-listing-cards { display: flex; flex-direction: column; gap: 12px; margin: 30px 0; }
.cb-listing-card { display: flex; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background-color: white; position: relative; }
.cb-listing-card-left-bar { width: 8px; background-color: #555; flex-shrink: 0; }
.cb-listing-card-body { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; flex: 1; min-width: 0; }
.cb-listing-card-icon { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.cb-listing-card-content { flex: 1; min-width: 0; }
.cb-listing-card-title { font-size: 13px; font-weight: bold; color: #333; margin-bottom: 6px; line-height: 1.3; }
.cb-listing-card-text { font-size: 13px; color: #555; line-height: 1.5; }

.cb-carousel { display: flex; flex-direction: column; gap: 12px; margin: 30px 0; }
.cb-carousel-slide { border-radius: 10px; padding: 24px 20px; }
.cb-carousel-title { font-size: 13px; font-weight: bold; color: #333; margin-bottom: 8px; line-height: 1.3; text-align: center; }
.cb-carousel-content { font-size: 13px; color: #333; line-height: 1.5; }
.cb-carousel-content p { margin: 0 0 4px 0; }

.cb-flipcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.cb-flipcard { border: 2px solid #999; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.cb-flipcard-front { background-color: #ffffff; padding: 20px 16px; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; }
.cb-flipcard-title { font-size: 13px; font-weight: bold; color: #333; line-height: 1.4; }
.cb-flipcard-title img { display: block; width: 50px; height: 50px; object-fit: contain; margin: 0 auto 8px; }
.cb-flipcard-back { background-color: #777; padding: 20px 16px; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; flex: 1; }
.cb-flipcard-content { font-size: 13px; color: #ffffff; line-height: 1.5; }
.cb-flipcard-content p { margin: 0 0 4px 0; }

.cb-promo-cards { display: flex; flex-direction: column; gap: 16px; margin: 30px 0; }
.cb-promo-card { display: flex; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background-color: white; }
.cb-promo-image-section { width: 200px; flex-shrink: 0; }
.cb-promo-image { width: 100%; height: 100%; object-fit: cover; }
.cb-promo-content-section { flex: 1; padding: 20px; }
.cb-promo-heading { font-size: 15px; font-weight: bold; color: #333; margin-bottom: 8px; }
.cb-promo-content { font-size: 13px; color: #555; line-height: 1.5; }

.cb-numberlist { display: flex; flex-direction: column; gap: 16px; margin: 30px 0; }
.cb-numberlist-item { display: flex; align-items: flex-start; gap: 16px; }
.cb-numberlist-circle { width: 36px; height: 36px; border-radius: 50%; background-color: #555; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; flex-shrink: 0; }
.cb-numberlist-content { flex: 1; font-size: 13px; line-height: 1.5; color: #333; }

.cb-hero { position: relative; border-radius: 10px; overflow: hidden; margin: 20px 0; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.cb-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); }
.cb-hero-content { position: relative; z-index: 1; padding: 40px 30px; text-align: center; color: white; }
.cb-hero-title { font-size: 22px; font-weight: bold; margin-bottom: 12px; }
.cb-hero-text { font-size: 14px; line-height: 1.6; }

.cb-generic-section { margin: 10px 0; }
.cb-generic-item { margin-bottom: 10px; padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: white; }
.cb-generic-item-title { font-weight: bold; font-size: 13px; margin-bottom: 6px; }
.cb-generic-item-content { font-size: 13px; line-height: 1.5; color: #333; }

/* RTL override for user content - only for elements without inline styles */
.course-content h1, .course-content h2, .course-content h5, 
.course-content h6, .course-content p {
direction: var(--direction) !important;
text-align: var(--text-align) !important;
}