/*
 Theme Name:   Educrat Child
 Theme URI:    https://themeforest.net/item/educrat-online-course-education-wordpress-theme/39691021
 Description:  Educrat Child Theme
 Author:       ApusTheme
/*
 Theme Name:   Educrat Child
 Theme URI:    https://themeforest.net/item/educrat-online-course-education-wordpress-theme/39691021
 Description:  Educrat Child Theme
 Author:       ApusTheme
 Author URI:   https://themeforest.net/user/apustheme/portfolio
 Template:     educrat
 Version:      1.0.0
 Text Domain:  educrat-child
*/

/* ==========================================================================
   Axon Academy Custom Styles - Arabic/RTL Support
   Brand Colors: #3E6A48 (Green), #000000 (Black), #FFFFFF (White)
   Font: Tajawal
   ========================================================================== */

:root {
    /* Brand Colors */
    --axon-primary: #3E6A48;
    --axon-primary-hover: #2d4f35;
    --axon-secondary: #000000;
    --axon-white: #FFFFFF;
    
    /* Educrat Override Variables */
    --educrat-theme-color: #3E6A48;
    --educrat-link-color: #3E6A48;
    
    /* Bootstrap Override Variables */
    --bs-primary: #3E6A48;
    
    /* TutorLMS Override Variables */
    --tutor-color-primary: #3E6A48;
    --tutor-color-primary-hover: #2d4f35;
}
.fa-home,
.fa-users,
.fa-phone,
.fa-user {
  padding-left: 10px;
}
/* --------------------------------------------------------------------------
   Typography & Global RTL
   -------------------------------------------------------------------------- */
body {
    font-family: 'Tajawal', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, p, button, input, select, textarea {
    font-family: 'Tajawal', sans-serif;
}

body {
    direction: rtl !important;
    text-align: right !important;
    background-color: #F8F9FA;
}

/* Fix text alignments for RTL */
.text-left { text-align: right !important; }
.text-right { text-align: left !important; }

/* --------------------------------------------------------------------------
   Buttons & Links
   -------------------------------------------------------------------------- */
.btn-primary, .btn, .button, .tutor-btn-primary, button[type="submit"], input[type="submit"] {
    background-color: var(--axon-primary) !important;
    border-color: var(--axon-primary) !important;
    color: var(--axon-white) !important;
}

.btn-primary:hover, .btn:hover, .button:hover, .tutor-btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover {
    background-color: var(--axon-primary-hover) !important;
    border-color: var(--axon-primary-hover) !important;
    color: var(--axon-white) !important;
}

.btn-secondary, .btn-outline {
    background-color: var(--axon-secondary) !important;
    border-color: var(--axon-secondary) !important;
    color: var(--axon-white) !important;
}

a {
    color: var(--axon-primary);
}
a:hover {
    color: var(--axon-primary-hover);
}

/* --------------------------------------------------------------------------
   Navigation Bar
   -------------------------------------------------------------------------- */
.apus-header, .header-default, .main-sticky-header-wrapper {
    background-color: var(--axon-white) !important;
    border-bottom: 1px solid #EAEAEA;
}

.main-menu ul li a, .apus-header .header-right a {
    color: var(--axon-secondary) !important;
}

.main-menu ul li a:hover, .apus-header .header-right a:hover {
    color: var(--axon-primary) !important;
}

/* Specific styling for the 'Courses' menu item */
.main-menu ul li#menu-item-4303 > a,
li#menu-item-4303 > a {
    color: #000000 !important; /* Force dark color */
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Hero / Banner Sections
   -------------------------------------------------------------------------- */
.course-header, .page-title-wrapper, .breadcaump-area {
    background-color: var(--axon-primary) !important;
    color: var(--axon-white) !important;
}

.course-header h1, .course-header h2, .page-title-wrapper h1, .breadcaump-area h1,
.course-header p, .page-title-wrapper p, .breadcaump-area p,
.course-header span, .page-title-wrapper span, .breadcaump-area span,
.course-header a, .page-title-wrapper a, .breadcaump-area a {
    color: var(--axon-white) !important;
}

/* --------------------------------------------------------------------------
   Course Cards (Educrat Tutor Loop)
   -------------------------------------------------------------------------- */
.course-grid .course-entry, .tutor-course-card {
    background-color: var(--axon-white) !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.course-title a, .tutor-course-card .tutor-course-name a {
    color: var(--axon-secondary) !important;
}

.course-title a:hover, .tutor-course-card .tutor-course-name a:hover {
    color: var(--axon-primary) !important;
}

.course-price, .course-price .sale-price, .course-price .origin-price, .tutor-course-price .price {
    color: var(--axon-primary) !important;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   TutorLMS Overrides
   -------------------------------------------------------------------------- */
.tutor-wrap, .tutor-course-single-content-wrap {
    direction: rtl !important;
    text-align: right !important;
}

/* Tutor Tabs */
.tutor-nav-item .tutor-nav-link {
    color: var(--axon-secondary) !important;
}

.tutor-nav-item .tutor-nav-link.is-active {
    color: var(--axon-primary) !important;
    border-bottom-color: var(--axon-primary) !important;
}

/* Tutor Sidebar & Modules */
.tutor-course-sidebar-card, .tutor-course-sidebar .tutor-widget, .tutor-course-builder-section {
    background-color: var(--axon-white) !important;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
}

/* Progress Bar */
.tutor-progress-bar-wrap .tutor-progress-bar-value {
    background-color: var(--axon-primary) !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.apus-footer, .footer-default {
    background-color: var(--axon-secondary) !important;
    color: var(--axon-white) !important;
}

.apus-footer a, .apus-footer h1, .apus-footer h2, .apus-footer h3, .apus-footer h4, .apus-copyright {
    color: var(--axon-white) !important;
}

.apus-footer a:hover {
    color: var(--axon-primary) !important;
}

/* ==========================================================================
   Axon Academy Homepage Redesign (Modern V2)
   ========================================================================== */
.axon-modern-home {
    font-family: 'Tajawal', sans-serif;
    color: var(--axon-secondary);
    background-color: var(--axon-white);
    line-height: 1.6;
}

.axon-modern-home img {
    max-width: 100%;
    height: auto;
    display: block;
}

.axon-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Typography Defaults */
.axon-modern-home h1, .axon-modern-home h2, .axon-modern-home h3, .axon-modern-home h4 {
    font-weight: 700;
    color: var(--axon-secondary);
    margin-top: 0;
}

/* Modern Buttons */
.axon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 50px; /* Pill shape for modern look */
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.axon-btn-solid {
    background-color: var(--axon-primary);
    color: var(--axon-white) !important;
    border: 2px solid var(--axon-primary);
    box-shadow: 0 4px 15px rgba(62,106,72,0.2);
}

.axon-btn-solid:hover {
    background-color: var(--axon-primary-hover);
    border-color: var(--axon-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(62,106,72,0.3);
}

.axon-btn-text {
    background-color: transparent;
    color: var(--axon-secondary) !important;
    padding: 14px 20px;
}

.axon-btn-text:hover {
    color: var(--axon-primary) !important;
}

.axon-btn-text .axon-arrow {
    margin-right: 8px; /* RTL margin right */
    transition: transform 0.3s ease;
}

.axon-btn-text:hover .axon-arrow {
    transform: translateX(-5px); /* Move left in RTL */
}

.axon-btn-white {
    background-color: var(--axon-white);
    color: var(--axon-primary) !important;
    border: 2px solid var(--axon-white);
}

.axon-btn-white:hover {
    background-color: transparent;
    color: var(--axon-white) !important;
}

/* ---------------- Hero Section ---------------- */
.axon-modern-hero {
    padding: 80px 0 100px;
    background: linear-gradient(135deg, #F8FAF9 0%, #FFFFFF 100%);
    overflow: hidden;
}

.axon-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.axon-badge {
    display: inline-block;
    padding: 6px 16px;
    background-color: rgba(62, 106, 72, 0.1);
    color: var(--axon-primary);
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.axon-hero-headline {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.axon-hero-headline span {
    color: var(--axon-primary);
    position: relative;
}

.axon-hero-headline span::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 0;
    width: 100%;
    height: 12px;
    background-color: rgba(62, 106, 72, 0.15);
    z-index: -1;
}

.axon-hero-desc {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 40px;
    max-width: 500px;
}

.axon-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.axon-hero-image-col {
    position: relative;
}

.axon-hero-image-wrapper {
    position: relative;
    z-index: 2;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.axon-hero-image-wrapper img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}

.axon-hero-shape {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 100%;
    height: 100%;
    background-color: var(--axon-primary);
    border-radius: 24px;
    z-index: -1;
    opacity: 0.1;
}

/* ---------------- Subjects Section ---------------- */
.axon-modern-subjects {
    padding: 100px 0;
    background-color: var(--axon-white);
}

.axon-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.axon-section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.axon-section-header p {
    font-size: 1.125rem;
    color: #666;
}

.axon-subjects-flex {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.axon-subject-card-v2 {
    position: relative;
    flex: 1;
    max-width: 500px;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.axon-subject-bg {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.axon-subject-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.axon-subject-content {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 40px;
    z-index: 2;
    color: var(--axon-white);
}

.axon-subject-content h3 {
    color: var(--axon-white) !important;
    font-size: 2rem;
    margin-bottom: 8px;
}

.axon-subject-content span {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.8;
    color: var(--axon-white) !important;
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.axon-subject-card-v2:hover .axon-subject-bg {
    transform: scale(1.05);
}

.axon-subject-card-v2:hover .axon-subject-content span {
    opacity: 1;
    transform: translateX(-5px); /* Move left in RTL */
}

/* ---------------- Dynamic Courses Section ---------------- */
.axon-modern-courses-section {
    padding: 20px 0 100px; /* Reduced top padding as it follows subjects */
    background-color: var(--axon-white);
}

.axon-dynamic-block {
    position: relative;
    z-index: 5;
}

.axon-mt-80 {
    margin-top: 80px;
}

/* ---------------- Features Section ---------------- */
.axon-modern-features {
    padding: 80px 0 120px;
    background-color: #F4F7F5; /* Very subtle green tint */
}

.axon-features-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.axon-feat-item {
    background-color: var(--axon-white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.axon-feat-item:hover {
    transform: translateY(-8px);
}

.axon-feat-img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 24px;
}

.axon-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.axon-feat-item h4 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.axon-feat-item p {
    color: #666;
    margin: 0;
    font-size: 1.05rem;
}

/* ---------------- CTA Section ---------------- */
.axon-modern-cta {
    position: relative;
    padding: 120px 0;
    text-align: center;
    overflow: hidden;
}

.axon-cta-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}

.axon-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.axon-cta-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(62, 106, 72, 0.9); /* Brand green with opacity */
    z-index: 1;
}

.axon-cta-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
    color: var(--axon-white);
}

.axon-cta-content h2 {
    color: var(--axon-white);
    font-size: 3rem;
    margin-bottom: 24px;
}

.axon-cta-content p {
    font-size: 1.25rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
    .axon-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .axon-hero-desc {
        margin: 0 auto 40px;
    }
    .axon-hero-actions {
        justify-content: center;
    }
    .axon-hero-image-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }
    .axon-subjects-flex {
        flex-direction: column;
    }
    .axon-features-grid-v2 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .axon-hero-headline {
        font-size: 2.5rem;
    }
    .axon-cta-content h2 {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Course Cards Equal Height (Flexbox & Title Clamping)
   ========================================================================== */
.course-grid, .course-layout-item {
    height: 100%;
}

.course-grid .course-entry {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.course-layout-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px !important;
}

.course-meta-bottom {
    margin-top: auto;
}

/* Limit title to exactly 2 lines so the middle meta (lessons/duration) aligns perfectly */
.course-title {
    padding-right: 10px;
}

.course-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 55px; /* Adjust if line-height changes */
}

/* Adjust spacing for the author name without affecting the avatar image */
.author-title {
    padding-right: 15px;
    padding-bottom: 5px;
}

/* Hide breadcrumbs globally */
#apus-breadscrumb {
    display: none !important;
}