.div-main-content-panel {
    display: flex;
    flex-direction: row;
    align-items: top;
    justify-content: left;
    gap: 40px;
    height: 200px;
    width: 600px;
    padding-top: 40px;
}

.courses-header {
    text-align: center;
    padding: 48px 24px 0;
}

.courses-header-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.courses-header-sub {
    font-size: 1rem;
    opacity: 0.6;
    margin: 0;
}

.div-courses-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 60px 24px;
    width: 100%;
}

.course-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 320px;
    max-width: 480px;
    height: 250px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.course-card:hover,
.course-card:focus,
.course-card:active { text-decoration: none; }
.course-card:hover  { transform: translateY(-4px); }
.course-card:active { transform: translateY(0); }

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes border-spin {
    to { --border-angle: 360deg; }
}

.course-card--physics {
    --card-accent:        #10b981;
    --card-accent-border: rgba(16, 185, 129, 0.22);
    background: transparent;
    border: none;
    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.15);
}
.course-card--physics:hover  { box-shadow: 0 10px 32px rgba(16, 185, 129, 0.30); }
.course-card--physics:active { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); }

.course-card--math {
    --card-accent:        #3b82f6;
    --card-accent-border: rgba(59, 130, 246, 0.22);
    background: transparent;
    border: none;
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.15);
}
.course-card--math:hover  { box-shadow: 0 10px 32px rgba(59, 130, 246, 0.30); }
.course-card--math:active { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); }

.course-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: conic-gradient(from var(--border-angle), var(--card-accent-border) 70%, var(--card-accent) 85%, var(--card-accent-border) 100%);
    animation: border-spin 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.course-card-deco {
    position: absolute;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    font-family: 'Georgia', serif;
    color: var(--card-accent);
    opacity: 0.18;
    transition: opacity 0.22s;
}
.course-card:hover .course-card-deco {
    opacity: 0;
}

.course-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 32px 24px;
    transition: opacity 0.22s;
}
.course-card:hover .course-card-inner {
    opacity: 0;
    pointer-events: none;
}

.course-card-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--card-accent);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.course-card-sub {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.course-hover-svgs {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.22s;
    pointer-events: none;
}
.course-card:hover .course-hover-svgs {
    opacity: 1;
}

.course-hover-svg {
    position: absolute;
}

/* ── Per-SVG float animations (start on card hover) ─────── */

@keyframes float-atom {
    from { transform: rotate(-12deg) translate(0, 0); }
    to   { transform: rotate(-3deg) translate(10px, -14px); }
}
@keyframes float-wave {
    from { transform: translateX(-50%) rotate(4deg) translateY(0); }
    to   { transform: translateX(-50%) rotate(-4deg) translateY(-16px); }
}
@keyframes float-bolt {
    from { transform: rotate(8deg) translateY(0); }
    to   { transform: rotate(16deg) translateY(-18px); }
}
@keyframes float-graph {
    from { transform: rotate(5deg) translate(0, 0); }
    to   { transform: rotate(-4deg) translate(-10px, 12px); }
}
@keyframes float-infinity {
    from { transform: translateX(-50%) translateY(0) rotate(0deg); }
    to   { transform: translateX(-50%) translateY(-14px) rotate(7deg); }
}
@keyframes float-triangle {
    from { transform: rotate(-6deg) translate(0, 0); }
    to   { transform: rotate(6deg) translate(12px, -16px); }
}

@keyframes float-magnet {
    from { transform: rotate(10deg) translate(0, 0); }
    to   { transform: rotate(1deg) translate(-9px, -13px); }
}
@keyframes float-prism {
    from { transform: rotate(-8deg) translate(0, 0); }
    to   { transform: rotate(3deg) translate(8px, -12px); }
}
@keyframes float-pi {
    from { transform: rotate(-5deg) translateY(0); }
    to   { transform: rotate(5deg) translateY(-15px); }
}
@keyframes float-compass {
    from { transform: rotate(12deg) translate(0, 0); }
    to   { transform: rotate(-3deg) translate(-10px, -12px); }
}

.course-hover-svg--atom     { transform: rotate(-12deg); }
.course-hover-svg--wave     { transform: translateX(-50%) rotate(4deg); }
.course-hover-svg--bolt     { transform: rotate(8deg); }
.course-hover-svg--magnet   { transform: rotate(10deg); }
.course-hover-svg--prism    { transform: rotate(-8deg); }
.course-hover-svg--graph    { transform: rotate(5deg); }
.course-hover-svg--infinity { transform: translateX(-50%); }
.course-hover-svg--triangle { transform: rotate(-6deg); }
.course-hover-svg--pi       { transform: rotate(-5deg); }
.course-hover-svg--compass  { transform: rotate(12deg); }

[data-theme="dark"] .course-card--math {
    --card-accent: #a78bfa;
    border-color: #a78bfa;
    box-shadow: 0 6px 24px rgba(167, 139, 250, 0.15);
}
[data-theme="dark"] .course-card--math:hover  { box-shadow: 0 10px 32px rgba(167, 139, 250, 0.30); }
[data-theme="dark"] .course-card--math:active { box-shadow: 0 4px 12px rgba(167, 139, 250, 0.15); }

.course-card:hover .course-hover-svg--atom     { animation: float-atom     2.4s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--wave     { animation: float-wave     3.1s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--bolt     { animation: float-bolt     1.9s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--magnet   { animation: float-magnet   2.6s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--prism    { animation: float-prism    2.1s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--graph    { animation: float-graph    2.7s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--infinity { animation: float-infinity 3.3s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--triangle { animation: float-triangle 2.2s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--pi       { animation: float-pi       2.8s ease-in-out infinite alternate; }
.course-card:hover .course-hover-svg--compass  { animation: float-compass  2.3s ease-in-out infinite alternate; }