/*
 * LearnMingle Brand Color Override
 * Logo Colors:
 *   Charcoal: #3d3d3d  (graduation cap & frame)
 *   Gold:     #c8a84b  (the M letter)
 *   Gold Light: #e8c96d
 */

/* ============================================================
   CSS Variable Overrides
   ============================================================ */
:root {
    --color-1: #c8a84b !important;          /* Gold — replaces blue #2f57ef */
    --color-2: #3d3d3d !important;          /* Charcoal — replaces dark navy #192335 */
    --color-gold: #c8a84b;
    --color-gold-light: #e8c96d;
    --color-gold-dark: #a88830;
    --color-charcoal: #3d3d3d;
    --color-charcoal-light: #555555;
    --gradient-start: #c8a84b;
    --gradient-end: #e8c96d;
}

/* ============================================================
   Gradient Overrides — replaces all #2f57ef → #c664ff gradients
   ============================================================ */

/* Main .gradient class */
.gradient,
.gradient:hover {
    background-image: linear-gradient(
        to right,
        #c8a84b 0%,
        #e8c96d 51%,
        #c8a84b 100%
    ) !important;
    color: #3d3d3d !important;
    box-shadow: 0 8px 24px rgba(200, 168, 75, 0.35) !important;
}

/* Performance / feature banner background */
.pr-wrap {
    background-image: linear-gradient(
        to right,
        #c8a84b 0%,
        #e8c96d 51%,
        #c8a84b 100%
    ) !important;
    box-shadow: 0 0 20px rgba(200, 168, 75, 0.2) !important;
}

/* Owl carousel nav gradient buttons */
.user-slider .owl-nav .owl-prev,
.user-slider .owl-nav .owl-next {
    background-image: linear-gradient(
        to right,
        #c8a84b 0%,
        #e8c96d 51%,
        #c8a84b 100%
    ) !important;
    box-shadow: 0 0 20px rgba(200, 168, 75, 0.2) !important;
}

/* Gradient border utilities */
.gradient-border,
.gradient-border2 {
    background: linear-gradient(
        to right,
        #c8a84b 0%,
        #e8c96d 51%,
        #c8a84b 100%
    ) !important;
}

/* Gradient border btn hover */
.gradient-border-btn:hover {
    background-image: linear-gradient(
        to right,
        #c8a84b 0%,
        #e8c96d 51%,
        #c8a84b 100%
    ) !important;
}

/* Cards / section gradients using 135deg (many places) */
.single-feature:hover,
.course-card-hover-effect:hover {
    border-color: #c8a84b !important;
}

/* All instances of the 135deg gradient used in course pages, quiz pages, etc. */
[style*="#2f57ef"] {
    color: #c8a84b !important;
}

/* ============================================================
   Breadcrumb Area — replaces purple gradient background
   ============================================================ */
.breadcum-area {
    background: linear-gradient(
        200deg,
        rgba(200, 168, 75, 0.2) 3%,
        rgba(232, 201, 109, 0.25) 26%,
        rgba(168, 136, 48, 0.4) 93%
    ) !important;
}

/* ============================================================
   Footer dark gradient — replaces #1E3764 → #192335
   ============================================================ */

/* The specific footer gradient rule */
.footer-wrapper,
.footer-bg {
    background: linear-gradient(180deg, #2e2e2e 0%, #1a1a1a 100%) !important;
}

/* ============================================================
   Color-1 (gold) usages — borders, text, backgrounds
   ============================================================ */

/* Nav hover & active */
.sub-header-left ul li a:hover,
.nav-area ul li a:active,
.nav-area ul li a:hover,
.nav-menu li.active > a {
    color: #c8a84b !important;
}

/* Buttons with color-1 background */
.btn-primary,
.eBtn.color-1,
[class*="btn"][class*="primary"] {
    background-color: #c8a84b !important;
    border-color: #c8a84b !important;
    color: #3d3d3d !important;
}

/* Login button in navbar */
.eBtn.gradient {
    color: #3d3d3d !important;
    font-weight: 700;
}

/* Active/focus borders */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #c8a84b !important;
    box-shadow: 0 0 0 0.2rem rgba(200, 168, 75, 0.25) !important;
}

/* Checkbox / radio accent */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #c8a84b;
}

/* Pagination active */
.page-item.active .page-link,
.pagination .active a {
    background-color: #c8a84b !important;
    border-color: #c8a84b !important;
    color: #3d3d3d !important;
}
.page-link:hover {
    color: #c8a84b !important;
}

/* Section title accent / tag */
.title-head,
.section-title .title-head,
.title-tag {
    color: #c8a84b !important;
}

/* Star ratings */
.star-rating,
.fa-star,
[class*="star"] {
    color: #c8a84b !important;
}

/* Price color */
.price-color,
.course-price,
.single-price {
    color: #c8a84b !important;
}

/* Badge / tag primary */
.badge-primary,
.tag-primary,
.badge.bg-primary {
    background-color: #c8a84b !important;
    color: #3d3d3d !important;
}

/* Progress bar / skill bar */
.progress-bar,
.skill-bar-fill {
    background: linear-gradient(to right, #c8a84b, #e8c96d) !important;
}

/* Tooltip / popover */
.tooltip-inner {
    background-color: #3d3d3d !important;
}

/* Offcanvas mobile nav */
.edu-offcanvas {
    border-color: #c8a84b !important;
}
.edu-offcanvas .nav-area ul li a:hover,
.edu-offcanvas .nav-area ul li a.active {
    color: #c8a84b !important;
    background: rgba(200, 168, 75, 0.08) !important;
}

/* Mobile nav active highlight */
.menu-item-has-children.active-submenu > a {
    color: #c8a84b !important;
    background: rgba(200, 168, 75, 0.08) !important;
}
.nav-area ul li a.active,
.nav-area ul li a:hover {
    background: rgba(200, 168, 75, 0.08) !important;
    color: #c8a84b !important;
}
.nav-area ul li a.active svg path,
.nav-area ul li a:hover svg path {
    fill: #c8a84b !important;
}
.menu-item-has-children.active-submenu a path {
    fill: #c8a84b !important;
}

/* ============================================================
   Hardcoded #192335 / #2f57ef text color overrides
   ============================================================ */

/* These selectors use hardcoded #192335 for text — override to charcoal */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-2) !important;
}

/* But allow white text on dark backgrounds to stay white */
.gradient h1,
.gradient h2,
.gradient h3,
.pr-wrap h1,
.pr-wrap h2,
.pr-wrap h3,
[style*="background"] h1,
[style*="background"] h2 {
    color: #fff !important;
}

/* Nav logo text */
.nav-logo .site-name,
.logo-text {
    color: #3d3d3d !important;
}

/* Header nav link color */
.nav-area ul li > a {
    color: #3d3d3d !important;
}
.nav-area ul li > a:hover {
    color: #c8a84b !important;
}

/* Current active nav item */
.nav-area ul li.current-menu-item > a,
.nav-area ul li > a.active {
    color: #c8a84b !important;
}

/* Banner gradient text */
.banner-content .gradient,
.hero-gradient-text,
span.gradient {
    background: linear-gradient(90deg, #c8a84b, #e8c96d) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ============================================================
   Section Feature / Performance strip
   ============================================================ */
.feature-wrapper .section-title .title-head {
    color: #c8a84b !important;
}

/* ============================================================
   Tabs & Accordions
   ============================================================ */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: #c8a84b !important;
    border-color: #c8a84b !important;
    color: #3d3d3d !important;
}
.nav-tabs .nav-link:hover {
    color: #c8a84b !important;
}
.accordion-button:not(.collapsed) {
    background-color: rgba(200, 168, 75, 0.1) !important;
    color: #c8a84b !important;
    box-shadow: inset 0 -1px 0 rgba(200, 168, 75, 0.25) !important;
}

/* ============================================================
   Top bar / announcement strip
   ============================================================ */
.sub-header,
.top-bar {
    border-bottom-color: rgba(200, 168, 75, 0.2) !important;
}

/* ============================================================
   Course card hover / wishlist icon
   ============================================================ */
.heart:hover i,
.wishlist-icon:hover {
    color: #c8a84b !important;
}

/* ============================================================
   Breadcrumb links
   ============================================================ */
.breadcrumb-item a {
    color: #c8a84b !important;
}
.breadcrumb-item.active {
    color: #3d3d3d !important;
}

/* ============================================================
   Alert / notification accents
   ============================================================ */
.alert-primary {
    background-color: rgba(200, 168, 75, 0.1) !important;
    border-color: rgba(200, 168, 75, 0.3) !important;
    color: #a88830 !important;
}

/* ============================================================
   Misc SVG stroke overrides
   ============================================================ */
svg.primary-stroke {
    stroke: #c8a84b !important;
}

/* ============================================================
   MOBILE RESPONSIVENESS IMPROVEMENTS
   ============================================================ */

@media (max-width: 991px) {
    /* Header */
    .header-wrap {
        padding: 12px 0;
    }

    /* Brand logo on mobile */
    .navbar-brand img,
    .nav-logo img {
        max-height: 44px;
        width: auto;
    }

    /* Mobile hamburger color */
    .navbar-toggler-icon,
    .hamburger-icon,
    .menu-toggle span {
        background-color: #c8a84b;
    }

    /* Offcanvas mobile header */
    .edu-offcanvas .offcanvas-header {
        background: linear-gradient(135deg, #3d3d3d, #555555);
    }

    /* Section padding on tablet */
    .section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .ai-section-title {
        font-size: 30px !important;
    }
}

@media (max-width: 767px) {
    /* Hero banner */
    .banner-wraper {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .banner-content h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .banner-content h5 {
        font-size: 14px !important;
    }

    .banner-content p {
        font-size: 14px !important;
    }

    .banner-btn {
        flex-wrap: wrap;
        gap: 12px;
    }

    .eBtn {
        width: 100%;
        text-align: center;
        padding: 12px 20px !important;
    }

    .banner-image {
        margin-top: 20px;
    }

    /* Section titles */
    .section-title h2.title,
    .ai-section-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    /* Section padding */
    .section-padding {
        padding-top: 40px !important;
    }

    /* Feature cards full width on mobile */
    .single-feature {
        flex-direction: column;
    }

    .single-feature .courses-img {
        width: 100% !important;
    }

    .single-feature .courses-img img {
        height: 200px !important;
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Grid adjustments */
    .row.gx-5 {
        --bs-gutter-x: 1rem;
    }

    /* AI courses section */
    .ai-courses-wrapper {
        padding: 40px 0;
    }

    .ai-section-badge {
        font-size: 12px;
    }

    /* Footer */
    .footer-widget {
        margin-bottom: 24px;
    }

    /* Top bar */
    .sub-header-left ul {
        flex-direction: column;
        gap: 6px !important;
    }

    /* Nav search */
    .nav-search {
        display: none;
    }

    /* Testimonials */
    .testimonial-img {
        max-width: 280px;
        margin: 0 auto;
    }

    /* Category cards */
    .single-category {
        padding: 16px;
    }

    /* Blog cards */
    .single-blog {
        margin-bottom: 20px;
    }

    /* About section */
    .about-img {
        margin-bottom: 24px;
    }

    /* Breadcrumb */
    .breadcum-area {
        padding-top: 20px;
        padding-bottom: 80px;
    }

    .eNtry-breadcum h1 {
        font-size: 26px !important;
    }

    /* Course sidebar on mobile — stack below content */
    .course-sideBar {
        margin-top: 24px;
    }

    /* Modal fixes */
    .modal-dialog {
        margin: 0.5rem;
    }
}

@media (max-width: 480px) {
    /* Extra small phones */
    .banner-content h1 {
        font-size: 22px !important;
    }

    .section-title h2.title {
        font-size: 20px !important;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* AI course cards — ensure single column */
    .ai-course-card {
        border-radius: 14px;
    }

    .ai-course-img-wrap {
        height: 180px;
    }

    /* Category grid */
    .col-md-4.col-sm-6 {
        width: 50%;
    }

    /* Features section */
    .ps-single-wrap {
        padding: 20px;
    }
}

/* ============================================================
   Fix: gradient text inside banner gets reset by h-tag rule
   ============================================================ */
.banner-content h1 span.gradient,
.banner-content h1 .gradient-text {
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ============================================================
   Ensure gradient buttons and CTAs always show gold color text
   ============================================================ */
.eBtn.gradient,
.eBtn.gradient:hover,
a.eBtn.gradient,
button.eBtn.gradient,
.ai-view-all-btn {
    color: #3d3d3d !important;
    font-weight: 700 !important;
}

/* ============================================================
   Nav active indicator dot / underline
   ============================================================ */
.nav-area ul li > a.active::after,
.nav-area ul li:hover > a::after {
    background-color: #c8a84b !important;
}

/* ============================================================
   Scrollbar styling (webkit)
   ============================================================ */
::-webkit-scrollbar-thumb {
    background-color: #c8a84b;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a88830;
}

/* ============================================================
   Selection highlight
   ============================================================ */
::selection {
    background-color: rgba(200, 168, 75, 0.3);
    color: #3d3d3d;
}