:root {
        --navy: #002147;
        --maroon: #800000;
        --gold: #FFBF00;
    }

    .fw-black { font-weight: 800; }
    .bg-navy { background: var(--navy); }
    .bg-maroon { background: var(--maroon); }
    .bg-gold { background: var(--gold); }
    .text-navy { color: var(--navy); }
    .text-maroon { color: var(--maroon); }

    /* Hero Section */
    .courses-hero {
        background: linear-gradient(rgba(0,33,71,0.9), rgba(0,33,71,0.9)), url("{% static 'images/img_baner2.jpeg' %}");
        background-size: cover;
        background-position: center;
        min-height: 250px;
        border-bottom: 8px solid var(--gold);
    }
    .divider-custom { width: 60px; height: 4px; background: var(--gold); border-radius: 10px; }

    /* Contact Strip */
    .contact-strip {
        z-index: 10;
        border-radius: 20px;
        transition: 0.3s;
    }
    .icon-box-round { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f0f4f8; }
    .btn-navy { background: var(--navy); color: white; border: none; }
    .btn-navy:hover { background: var(--maroon); color: white; }

    /* Course Cards */
    .course-card-premium { transition: 0.4s; }
    .course-card-premium:hover { transform: translateY(-5px); }
    .card-header-accent { height: 6px; border-radius: 4px 4px 0 0; }
    
    .icon-square { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

    .course-item-box {
        padding: 12px 15px;
        margin-bottom: 8px;
        background: #f8f9fa;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--navy);
        border-left: 3px solid #dee2e6;
        transition: 0.2s;
    }
    .course-item-box:hover { background: #fff; border-left-color: var(--maroon); box-shadow: 2px 2px 10px rgba(0,0,0,0.05); }
    .highlight-box { background: #fffdf0; border-left-color: var(--gold); }

    .pro-box { transition: 0.3s; background: #fff; }
    .pro-box:hover { background: var(--maroon); color: white !important; }
    .pro-box:hover h3, .pro-box:hover p { color: white !important; }

    .badge-commerce {
        padding: 10px 20px;
        background: #eef2f7;
        color: var(--navy);
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .alert-warning-light { background: #fff9e6; color: #856404; }
    .list-custom .list-group-item { border: none; padding-left: 0; font-weight: 500; font-size: 0.95rem; }

    @media (max-width: 991px) {
        .contact-strip { border-radius: 20px; padding: 20px !important; }
    }