/* =========================
   COLOR VARIABLES
========================= */

:root {
    --primary-color: rgb(0, 40, 142);
    --primary-dark: rgb(0, 28, 105);
    --primary-light: rgb(230, 238, 255);

    --sky-blue: rgb(56, 189, 248);
    --sky-light: rgb(240, 249, 255);

    --white: #ffffff;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --border-color: #e2e8f0;
}


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: Arial, sans-serif;
    color: var(--text-dark);
    background: var(--sky-light);
    line-height: 1.6;
}


.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}


/* =========================
   HEADER
========================= */

header {
    background: var(--white);
    box-shadow: 0 2px 15px rgba(0, 40, 142, 0.12);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-color);
}


.logo span {
    color: var(--sky-blue);
}


nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-right: 115px;
}

nav ul li {
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    transition: 0.3s;
     display: block;
}


nav ul li a:hover,
nav ul li a.active {
    color: var(--primary-color);
}

/* SUBMENU */

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 170px;

    background: #ffffff;

    padding: 8px 0;

    border-radius: 6px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

    z-index: 999;
}


/* SUBMENU ITEMS */

.submenu li {
    width: 100%;
}

.submenu li a {
    padding: 12px 18px;
    color: #333;
    white-space: nowrap;
}

.submenu li a:hover {
    background: #f2f5ff;
    color: #00288e;
}


/* SHOW SUBMENU ON HOVER */

.dropdown:hover .submenu {
    display: block;
}


/* =========================
   HERO SECTION
========================= */

.hero {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            rgb(230, 238, 255),
            rgb(240, 249, 255)
        );
}


.hero-content {
    display: flex;
    align-items: center;
    gap: 60px;
}


.hero-text {
    flex: 1;
}


.hero-text h1 {
    font-size: 52px;
    line-height: 1.2;
    color: var(--primary-color);
}


.hero-text h1 span {
    color: var(--sky-blue);
}


.hero-text p {
    margin: 25px 0;
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.8;
}


.hero-image {
    flex: 1;
}


.hero-image img {
    width: 100%;
    border-radius: 20px;

    box-shadow:
        0 20px 40px rgba(0, 40, 142, 0.15);
}


/* =========================
   BUTTON
========================= */

.btn {
    display: inline-block;

    background: var(--primary-color);

    color: var(--white);

    padding: 14px 28px;

    border-radius: 8px;

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-size: 16px;

    font-weight: 600;

    transition: 0.3s;
}


.btn:hover {
    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 40, 142, 0.25);
}


/* =========================
   FEATURES
========================= */

.features {
    padding: 80px 0;
    background: rgb(240, 249, 255);
}


.section-title {
    text-align: center;

    margin-bottom: 50px;

    font-size: 34px;

    color: var(--primary-color);
}


.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;
}


.feature-card {
    background: var(--white);

    padding: 40px 30px;

    border-radius: 16px;

    text-align: center;

    border: 1px solid var(--border-color);

    box-shadow:
        0 8px 25px rgba(0, 40, 142, 0.08);

    transition: 0.3s;
}


.feature-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 15px 35px rgba(0, 40, 142, 0.15);
}


.feature-card h3 {
    margin: 15px 0;

    color: var(--primary-color);
}


.feature-card p {
    color: var(--text-light);
}


.icon {
    width: 70px;
    height: 70px;

    margin: auto;

    background: var(--primary-light);

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;
}


/* =========================
   HOW IT WORKS
========================= */

.how-it-works {
    padding: 80px 0;

    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            var(--primary-dark)
        );

    color: var(--white);
}


.how-it-works .section-title {
    color: var(--white);
}


.steps {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 30px;
}


.step {
    text-align: center;
}


.step-number {
    width: 60px;
    height: 60px;

    margin: auto auto 20px;

    border-radius: 50%;

    background: var(--sky-blue);

    color: var(--primary-color);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: bold;
}


/* =========================
   PAGE HEADER
========================= */

.page-header {
    background:
        linear-gradient(
            135deg,
            var(--primary-color),
            rgb(0, 60, 180)
        );

    color: var(--white);

    padding: 70px 0;

    text-align: center;
}


.page-header h1 {
    font-size: 42px;

    margin-bottom: 15px;
}


/* =========================
   QUESTION SET
========================= */

.questions-section {
    padding: 80px 0;
}


.question-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;
}


.question-card {
    background: var(--white);

    padding: 35px;

    border-radius: 16px;

    border: 1px solid var(--border-color);

    border-top: 5px solid var(--primary-color);

    box-shadow:
        0 8px 25px rgba(0, 40, 142, 0.08);

    transition: 0.3s;
}


.question-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(0, 40, 142, 0.15);
}


.question-card h3 {
    color: var(--primary-color);

    margin-bottom: 15px;
}


.question-card p {
    color: var(--text-light);
}


.question-info {
    margin: 25px 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

    color: var(--primary-color);

    font-weight: 500;
}


/* =========================
   TUTOR SECTION
========================= */

.feedback-section {
    padding: 80px 0;
}


.tutor-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 70px;
}


.tutor-card {
    position: relative;

    background: var(--white);

    padding: 30px;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    border: 2px solid transparent;

    box-shadow:
        0 8px 25px rgba(0, 40, 142, 0.08);

    transition: 0.3s;
}


.tutor-card:hover {
    transform: translateY(-7px);

    border-color: var(--primary-color);
}


.tutor-card input {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 18px;
    height: 18px;
}


.tutor-card img {
    width: 120px;

    height: 120px;

    object-fit: cover;

    border-radius: 50%;

    border: 5px solid var(--primary-light);

    margin-bottom: 15px;
}


.tutor-card h3 {
    color: var(--primary-color);

    margin-bottom: 8px;
}


.tutor-card p {
    color: var(--text-light);

    margin-bottom: 10px;
}


.tutor-card span {
    display: inline-block;

    background: var(--primary-light);

    color: var(--primary-color);

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 600;
}


/* =========================
   UPLOAD FORM
========================= */

.upload-box {
    max-width: 750px;

    margin: auto;

    background: var(--white);

    padding: 45px;

    border-radius: 20px;

    border: 1px solid var(--border-color);

    box-shadow:
        0 10px 35px rgba(0, 40, 142, 0.12);
}


.upload-box h2 {
    margin-bottom: 30px;

    color: var(--primary-color);
}


.form-group {
    margin-bottom: 25px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: var(--primary-color);
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 14px;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    font-size: 15px;

    outline: none;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);

    box-shadow:
        0 0 0 3px rgba(0, 40, 142, 0.1);
}


.form-group textarea {
    height: 130px;

    resize: vertical;
}


small {
    display: block;

    margin-top: 8px;

    color: var(--text-light);
}


/* =========================
   RELATED INFORMATION
========================= */

.related-section {
    padding: 80px 0;
    background: var(--sky-light);
}


/* ROW */

.related-row {
    display: flex;

    gap: 30px;

    background: var(--white);

    padding: 25px;

    margin-bottom: 25px;

    border-radius: 16px;

    border: 1px solid var(--border-color);

    box-shadow:
        0 6px 20px rgba(0, 40, 142, 0.08);

    transition: 0.3s;
}


.related-row:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0, 40, 142, 0.15);
}


/* IMAGE */

.related-image {
    width: 250px;

    min-width: 250px;
}


.related-image img {
    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 12px;
}


/* CONTENT */

.related-content {
    flex: 1;
}


.related-content h3 {
    font-size: 23px;

    color: var(--primary-color);

    margin: 12px 0;
}


.related-content p {
    color: var(--text-light);

    margin-bottom: 15px;
}


/* CATEGORY */

.category {
    display: inline-block;

    background: var(--primary-light);

    color: var(--primary-color);

    padding: 5px 14px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 600;
}


/* META */

.related-meta {
    display: flex;

    gap: 25px;

    margin-bottom: 20px;

    color: var(--text-light);

    font-size: 14px;
}


/* =========================
   DETAILS PAGE
========================= */

.details-section {
    padding: 80px 0;

    background: var(--sky-light);
}


.details-box {

    margin: auto;

    background: var(--white);

    padding: 50px;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(0, 40, 142, 0.12);
}


.details-box h1 {
    color: var(--primary-color);

    margin: 20px 0;
}


.details-date {
    color: var(--text-light);

    margin-bottom: 30px;
}


.details-image {
    width: 100%;

    max-height: 450px;

    object-fit: cover;

    border-radius: 15px;

    margin-bottom: 30px;
}


.details-content {
    font-size: 17px;

    line-height: 1.9;

    color: var(--text-dark);
}


.details-content p {
    margin-bottom: 20px;
}


/* PDF */

.pdf-download {
    margin-top: 40px;

    padding: 25px;

    background: var(--primary-light);

    border-radius: 12px;
}


.pdf-download h3 {
    color: var(--primary-color);

    margin-bottom: 15px;
}


.download-btn {
    margin-left: 10px;

    background: var(--sky-blue);

    color: var(--primary-color);
}


/* BACK BUTTON */

.back-link {
    color: var(--primary-color);

    font-weight: bold;

    text-decoration: none;
}

/* =========================
   CONTACT SECTION
========================= */

.contact-section {
    padding: 80px 0;
}


.contact-grid {
    display: grid;

    grid-template-columns:
        1fr 1.5fr;

    gap: 50px;
}


.contact-info {
    background: var(--white);

    padding: 40px;

    border-radius: 16px;

    border-top: 5px solid var(--primary-color);

    box-shadow:
        0 8px 25px rgba(0, 40, 142, 0.1);
}


.contact-info h2 {
    color: var(--primary-color);

    margin-bottom: 30px;
}


.contact-item {
    margin-top: 25px;
}


.contact-item strong {
    color: var(--primary-color);
}


.contact-item p {
    color: var(--text-light);

    margin-top: 5px;
}


.map iframe {
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0, 40, 142, 0.12);
}


/* =========================
   FOOTER
========================= */

footer {
    background: var(--primary-dark);

    color: var(--white);

    padding: 30px 0;

    text-align: center;
}

/* ========================================
   TOPPER ANSWER SHEETS
======================================== */

.topper-hero {
    background: linear-gradient(135deg, #00288e, #0047cc);
    color: #ffffff;
    text-align: center;
    padding: 70px 20px;
}

.topper-hero h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.topper-hero p {
    max-width: 650px;
    margin: auto;
    font-size: 17px;
    opacity: 0.9;
}


/* SECTION */

.topper-section {
    padding: 70px 0;
    background: #f5f7fb;
}


/* FILTER */

.topper-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 45px;
}

.filter-btn {
    padding: 10px 25px;
    border: 1px solid #d7dce8;
    background: #ffffff;
    border-radius: 25px;
    cursor: pointer;
    font-size: 15px;
    transition: 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
    background: #00288e;
    color: #ffffff;
    border-color: #00288e;
}


/* GRID */

.topper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* CARD */

.topper-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: 0.3s;
}

.topper-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 40, 142, 0.15);
}


/* CARD HEADER */

.topper-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    background: #00288e;
}

.category {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.score {
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
}


/* CARD BODY */

.topper-card-body {
    padding: 25px;
}

.topper-card-body h3 {
    margin: 0 0 8px;
    color: #222;
    font-size: 20px;
}

.question-set {
    color: #777;
    margin-bottom: 22px;
}


/* STUDENT */

.student-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.student-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #e8efff;
    color: #00288e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.student-info strong {
    display: block;
    color: #333;
}

.student-info span {
    display: block;
    color: #777;
    font-size: 13px;
    margin-top: 3px;
}


/* DETAILS */

.answer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    padding: 18px 0;
    margin-bottom: 22px;
}

.answer-details div:first-child {
    border-right: 1px solid #eeeeee;
    padding-right: 15px;
}

.answer-details div:last-child {
    padding-left: 15px;
}

.answer-details span {
    display: block;
    color: #888;
    font-size: 12px;
    margin-bottom: 6px;
}

.answer-details strong {
    font-size: 14px;
    color: #333;
}


/* VIEW BUTTON */

.view-answer-btn {
    display: block;
    text-align: center;
    padding: 12px;
    background: #f0f4ff;
    color: #00288e;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: 0.3s;
}

.view-answer-btn:hover {
    background: #00288e;
    color: #ffffff;
}



/* =========================
   RESPONSIVE
========================= */

/* AUTH MENU */

.auth-menu {
    margin-left: 20px;
    position: absolute;
    right: 2px;
}

.login-btn {
    display: inline-block;
    padding: 10px 28px;
    background: #00288e;
    color: #ffffff;
    border-radius:10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.login-btn:hover {
    background: #001f6d;
    transform: translateY(-2px);
}


/* LOGIN / REGISTER PAGE */

.auth-section {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #f5f8ff;
}

.auth-container {
    width: 100%;
    max-width: 500px;
}

.auth-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 40, 142, 0.12);
}

.auth-card h1 {
    text-align: center;
    color: #00288e;
    margin-bottom: 10px;
}

.auth-card .auth-description {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #d8dce8;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #00288e;
    box-shadow: 0 0 0 3px rgba(0, 40, 142, 0.1);
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    background: #00288e;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.auth-submit-btn:hover {
    background: #001f6d;
}

.auth-footer {
    text-align: center;
    margin-top: 25px;
    color: #666;
}

.auth-footer a {
    color: #00288e;
    font-weight: 600;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.forgot-password {
    text-align: right;
    margin-top: -10px;
    margin-bottom: 20px;
}

.forgot-password a {
    color: #00288e;
    text-decoration: none;
    font-size: 14px;
}



/* ========================================
   TOPPER ANSWER SHEET PAYMENT
======================================== */

.payment-section {
    background: #f5f7fb;
    padding: 70px 0;
    min-height: calc(100vh - 160px);
}

.payment-wrapper {
    max-width: 1000px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    background: #ffffff;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.1);
}


/* LEFT PAYMENT INFO */

.payment-info {
    padding: 50px;

    background:
        linear-gradient(
            135deg,
            #00288e,
            #0047cc
        );

    color: #ffffff;
}


.payment-icon {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;

    background:
        rgba(255, 255, 255, 0.15);

    border-radius: 12px;

    margin-bottom: 25px;
}


.premium-badge {
    display: inline-block;

    padding: 6px 12px;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 1px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.15);

    margin-bottom: 15px;
}


.payment-info h1 {
    font-size: 32px;

    margin-bottom: 15px;
}


.payment-info > p {
    line-height: 1.7;

    opacity: 0.9;

    margin-bottom: 30px;
}


/* ANSWER INFORMATION */

.payment-answer-info {

    border-top:
        1px solid rgba(255, 255, 255, 0.2);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.2);

    padding: 10px 0;

    margin-bottom: 30px;
}


.payment-info-row {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 13px 0;

    font-size: 14px;
}


.payment-info-row span {
    opacity: 0.8;
}


.payment-info-row strong {
    text-align: right;
}


/* FEATURES */

.payment-features h3 {
    margin-bottom: 18px;
}


.payment-features ul {

    list-style: none;

    padding: 0;

    margin: 0;
}


.payment-features li {

    margin-bottom: 13px;

    opacity: 0.95;
}


/* RIGHT PAYMENT CARD */

.payment-card {

    padding: 50px 35px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.payment-card h2 {

    color: #222;

    margin-bottom: 8px;
}


.payment-description {

    color: #777;

    margin-bottom: 30px;
}


/* PRICE */

.price-box {

    background: #f3f6ff;

    border-radius: 10px;

    padding: 22px;

    text-align: center;

    margin-bottom: 25px;
}


.price-box span {

    display: block;

    color: #777;

    font-size: 13px;
}


.price-box h1 {

    margin: 8px 0 0;

    color: #00288e;

    font-size: 36px;
}


/* PAYMENT METHOD */

.payment-method {

    border:
        1px solid #dce2f0;

    border-radius: 8px;

    padding: 16px;

    margin-bottom: 20px;
}


.payment-method-header {

    display: flex;

    align-items: center;

    gap: 10px;
}


.payment-radio {

    color: #00288e;

    font-size: 20px;
}


.payment-method small {

    display: block;

    margin-top: 4px;

    color: #777;
}


.esewa-logo {

    margin-left: auto;

    font-weight: bold;

    font-size: 18px;

    color: #60bb46;
}


/* ESEWA BUTTON */

.esewa-pay-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    padding: 15px;

    background: #60bb46;

    color: #ffffff;

    text-decoration: none;

    border-radius: 7px;

    font-size: 16px;

    transition: 0.3s;
}


.esewa-pay-btn:hover {

    background: #4fa238;

    transform: translateY(-2px);
}


/* SECURITY */

.payment-security {

    text-align: center;

    color: #777;

    font-size: 12px;

    margin-top: 22px;
}


.payment-security span {

    display: block;

    margin-top: 5px;
}


/* BACK */

.payment-back {

    text-align: center;

    margin-top: 25px;
}


.payment-back a {

    color: #00288e;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;
}


.payment-back a:hover {

    text-decoration: underline;
}

/* =========================================
   TOPPER ANSWER DOWNLOAD DETAIL PAGE
========================================= */

.download-answer-section {
    padding: 70px 0;
    background: #f5f7fb;
    min-height: 600px;
}

.download-answer-wrapper {
    max-width: 1000px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}


/* LEFT SIDE */

.download-answer-info {
    padding: 50px;
    background: linear-gradient(
        135deg,
        #00288e,
        #0047cc
    );

    color: #ffffff;
}

.answer-file-icon {
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.15);

    border-radius: 12px;

    font-size: 30px;

    margin-bottom: 25px;
}

.download-answer-info .premium-badge-detail {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.download-answer-info h1 {
    font-size: 32px;
    margin: 20px 0 15px;
}

.download-answer-info > p {
    line-height: 1.8;
    opacity: 0.9;
}


/* ANSWER DETAILS */

.answer-sheet-details {
    margin: 30px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.2);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.2);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item span {
    opacity: 0.8;
    font-size: 14px;
}

.detail-item strong {
    text-align: right;
    font-size: 14px;
}


/* INCLUDED CONTENT */

.included-content h3 {
    margin-bottom: 18px;
}

.included-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.included-content li {
    margin-bottom: 13px;
    font-size: 14px;
    opacity: 0.95;
}


/* RIGHT DOWNLOAD CARD */

.download-main-card {
    padding: 50px 35px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

.download-main-icon {
    width: 80px;
    height: 80px;

    margin: 0 auto 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f0f4ff;

    border-radius: 50%;

    font-size: 35px;
}

.download-main-card h2 {
    margin: 0 0 12px;
    color: #222;
}

.download-main-card > p {
    color: #777;
    line-height: 1.7;
    font-size: 14px;
}


/* FILE INFORMATION */

.file-information {
    margin: 25px 0;
    text-align: left;

    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.file-information div {
    display: flex;
    justify-content: space-between;

    padding: 13px 0;

    border-bottom: 1px solid #eeeeee;

    font-size: 13px;
}

.file-information div:last-child {
    border-bottom: none;
}

.file-information span {
    color: #777;
}

.file-information strong {
    color: #333;
}


/* DOWNLOAD BUTTON */

.download-full-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    box-sizing: border-box;

    padding: 16px 20px;

    background: #00288e;

    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    transition: 0.3s;
}

.download-full-btn:hover {
    background: #001f6d;
    transform: translateY(-2px);
}

.download-button-icon {
    font-size: 20px;
}


/* NOTE */

.download-note {
    font-size: 12px !important;
    margin-top: 18px;
}


/* BACK LINK */

.back-to-topper {
    display: block;

    margin-top: 20px;

    color: #00288e;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;
}

.back-to-topper:hover {
    text-decoration: underline;
}

/* =========================================
   TOPPER ANSWER DETAIL HERO
========================================= */

.answer-detail-hero {
    background:linear-gradient(135deg, #00288e, #0047cc);
    padding: 45px 0;
    border-bottom: 1px solid #dfe5f3;
}


/* BREADCRUMB */

.answer-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 14px;
    color: #fff;

    margin-bottom: 25px;
}

.answer-breadcrumb a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.answer-breadcrumb a:hover {
    text-decoration: underline;
}


/* TITLE ROW */

.answer-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}


/* TOPPER BADGE */

.premium-badge-detail {
    display: inline-block;

    background: #00288e;
    color: #ffffff;

    padding: 7px 14px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.5px;
}


/* TITLE */

.answer-title-row h1 {
    margin: 15px 0 8px;

    color: #fff;

    font-size: 34px;
    font-weight: 700;
}

.answer-title-row p {
    margin: 0;

    color: #fff;

    font-size: 15px;
}


/* SCORE CARD */

.answer-score {
    min-width: 150px;

    background: #ffffff;

    padding: 20px 25px;

    border-radius: 12px;

    text-align: center;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.08);
}

.answer-score span {
    display: block;

    color: #777;

    font-size: 12px;

    margin-bottom: 7px;
}

.answer-score strong {
    display: block;

    font-size: 25px;

    color: #00288e;
}

/* =========================================
   ANSWER SHEET SUBMISSION SUCCESS
========================================= */

.submission-success-section {
    padding: 70px 0;
    background: #f5f7fb;
}

.submission-success-card {
    max-width: 850px;
    margin: auto;
    background: #ffffff;
    padding: 50px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}


/* SUCCESS ICON */

.success-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e8f8eb;
    color: #287a24;

    font-size: 38px;
    font-weight: bold;
}


/* BADGE */

.success-badge {
    display: inline-block;

    background: #e8f8eb;
    color: #287a24;

    padding: 7px 15px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 0.5px;
}


.submission-success-card h1 {
    margin: 18px 0 12px;

    font-size: 32px;
    color: #222;
}


.success-description {
    max-width: 600px;
    margin: 0 auto 35px;

    color: #777;
    line-height: 1.7;
}


/* SUBMISSION DETAILS */

.submission-info-box {
    text-align: left;

    padding: 25px;

    background: #f8f9fc;

    border: 1px solid #e8eaf0;

    border-radius: 10px;

    margin-bottom: 25px;
}


.submission-info-box h2 {
    margin-top: 0;
    margin-bottom: 18px;

    font-size: 20px;
    color: #222;
}


.submission-info-row {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid #e5e5e5;
}

.submission-info-row:last-child {
    border-bottom: none;
}

.submission-info-row span {
    color: #777;
    font-size: 14px;
}

.submission-info-row strong {
    color: #333;
    text-align: right;
}

.payment-success {
    color: #287a24 !important;
}


/* CHECKING TIME */

.checking-time-box {
    display: flex;
    align-items: center;

    gap: 20px;

    text-align: left;

    padding: 25px;

    background: #f0f4ff;

    border-left: 4px solid #00288e;

    border-radius: 8px;

    margin-bottom: 40px;
}


.time-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    font-size: 25px;
}


.checking-time-box h2 {
    margin: 0 0 8px;
    color: #222;
    font-size: 19px;
}


.checking-time {
    display: block;

    color: #00288e;

    font-size: 20px;

    margin-bottom: 8px;
}


.checking-time-box p {
    margin: 0;

    color: #666;

    font-size: 14px;

    line-height: 1.6;
}


/* NEXT STEPS */

.next-steps {
    text-align: left;

    border-top: 1px solid #eeeeee;

    padding-top: 35px;
}


.next-steps h2 {
    margin-bottom: 25px;
    color: #222;
}


.next-step-item {
    display: flex;

    gap: 18px;

    margin-bottom: 25px;
}


.step-circle {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #00288e;
    color: #ffffff;

    border-radius: 50%;

    font-weight: bold;
}


.next-step-item h3 {
    margin: 0 0 7px;

    font-size: 16px;

    color: #222;
}


.next-step-item p {
    margin: 0;

    color: #777;

    font-size: 14px;

    line-height: 1.6;
}


/* STATUS */

.submission-status {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 35px 0 25px;

    padding: 15px;

    background: #fff8e6;

    color: #765400;

    border-radius: 8px;

    font-size: 14px;
}


.status-dot {
    width: 9px;
    height: 9px;

    background: #f2b705;

    border-radius: 50%;
}


/* BUTTONS */

.success-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 25px;
}


.dashboard-btn,
.secondary-btn {
    padding: 14px 22px;

    border-radius: 7px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.3s;
}


.dashboard-btn {
    background: #00288e;
    color: #ffffff;
}


.dashboard-btn:hover {
    background: #001f6d;
}


.secondary-btn {
    border: 1px solid #00288e;
    color: #00288e;
}


.secondary-btn:hover {
    background: #f0f4ff;
}
.proceed_payment{ margin: 0px auto; text-align: center; width: 300px;}

/* =========================================
   NOTICE PAGE
========================================= */


/* HERO */

.notice-hero {
    padding: 70px 0;
    background: #f0f4ff;
}


.notice-hero-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
}


/* HERO CONTENT */

.notice-badge {
    display: inline-block;

    padding: 8px 16px;

    background: #dfe8ff;
    color: #00288e;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 20px;
}


.notice-hero-content h1 {
    margin: 0 0 20px;

    font-size: 45px;
    line-height: 1.25;

    color: #222;
}


.notice-hero-content h1 span {
    color: #00288e;
}


.notice-hero-content p {
    max-width: 600px;

    color: #666;

    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 30px;
}


/* HERO IMAGE */

.notice-hero-image {
    position: relative;
}


.notice-hero-image img {
    width: 100%;
    display: block;

    border-radius: 16px;

    box-shadow:
        0 15px 40px rgba(0, 40, 142, 0.15);
}


.notice-image-tag {
    position: absolute;

    right: 20px;
    bottom: 20px;

    padding: 12px 18px;

    background: #ffffff;
    color: #00288e;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.12);
}


/* =========================================
   NOTICE SECTION
========================================= */

.notice-section {
    padding: 80px 0;
    background: #ffffff;
}


.notice-list {
    display: flex;
    flex-direction: column;

    gap: 20px;

    margin-top: 40px;
}


/* NOTICE CARD */

.notice-card {
    display: grid;

    grid-template-columns:
        75px
        minmax(0, 1fr)
        160px;

    gap: 25px;

    align-items: center;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e8eaf0;

    border-radius: 12px;

    transition: 0.3s;
}


.notice-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}


/* DATE */

.notice-date {
    width: 70px;
    height: 75px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #f0f4ff;

    border-radius: 10px;
}


.notice-date span {
    color: #00288e;

    font-size: 11px;
    font-weight: 700;
}


.notice-date strong {
    color: #222;

    font-size: 26px;
}


/* NOTICE CONTENT */

.notice-category {
    display: inline-block;

    margin-bottom: 8px;

    color: #00288e;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.7px;
}


.notice-content h3 {
    margin: 0 0 10px;

    color: #222;

    font-size: 19px;

    line-height: 1.5;
}


.notice-content p {
    margin: 0 0 15px;

    color: #777;

    font-size: 14px;

    line-height: 1.7;
}


/* META */

.notice-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    color: #888;

    font-size: 12px;
}


/* ACTION BUTTONS */

.notice-action {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.notice-download-btn {
    display: block;

    padding: 12px 15px;

    background: #00288e;

    color: #ffffff;

    border-radius: 7px;

    text-align: center;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;
}


.notice-download-btn:hover {
    background: #001f6d;

    transform: translateY(-2px);
}


.notice-view-btn {
    display: block;

    padding: 10px 15px;

    border: 1px solid #00288e;

    color: #00288e;

    border-radius: 7px;

    text-align: center;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: 0.3s;
}


.notice-view-btn:hover {
    background: #f0f4ff;
}

/* =========================
   MY ACCOUNT DROPDOWN
========================= */

/* Links */

.account-submenu li{
text-decoration: none;
list-style: none;
}
.account-submenu li a {
    display: block;

    text-decoration: none;

    color: #333;

    white-space: nowrap;

    transition: all 0.3s ease;
}

/* Hover effect */
.account-submenu li a:hover {
    background: #f2f6ff;

    color: #00288e;
}

/* Logout styling */
.account-submenu li:last-child a {
    color: #dc3545;
}

/* Logout hover */
.account-submenu li:last-child a:hover {
    background: #fff1f1;

    color: #b02a37;
}

.dashboard-card{padding:20px}
.card-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.card-heading h3{color:var(--primary-color);font-size:22px}
.mini-label{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--sky-blue)}
.rank-icon{font-size:28px}
.topper-item a{ text-decoration: none; color: rgb(0, 40, 142);}
.viewmore{ float: right; font-size: 14px; font-weight: 800; padding-top: 6px;}
.viewmore a{ text-decoration: none;color: rgb(0, 40, 142);}
.topper-list,.earner-list{display:flex;flex-direction:column;gap:12px}
.topper-item{display:grid;grid-template-columns:minmax(130px,1fr) 42px 130px 65px 70px 60px;align-items:center;gap:12px;padding:13px;border-radius:12px;background:var(--sky-light)}
.topper-item img,.earner-item img{width:45px;height:45px;border-radius:50%;object-fit:cover;border:3px solid var(--primary-light)}
.rank{font-weight:600;color:var(--primary-color); font-size: 15px; line-height: normal;}
.person-info{min-width:0}
.person-info strong{display:block;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size: 15px;}
.person-info span{display:block;font-size:12px;color:var(--text-light)}
.stats{text-align:center;border-left:1px solid var(--border-color)}
.stats strong{display:block;font-size:13px;color:var(--primary-color)}
.stats small{font-size:10px;color:var(--text-light)}
.earner-item{display:grid;grid-template-columns: 48px minmax(100px,1fr) 95px;align-items:center;gap:12px;padding:15px 15px 15px 5px;border-bottom:1px solid var(--border-color); background: rgb(240, 249, 255);}
.earner-item:last-child{border-bottom:0}
.earner-rank{width:28px;height:28px;border-radius:50%;background:var(--primary-light);color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-weight:800}
.earner-rank.first{background:var(--sky-blue)}
.earning{text-align:right}
.earning small{display:block;color:var(--text-light);font-size:10px}
.earning strong{color:var(--primary-color);font-size:15px}

.referral-section{padding:70px 0;background:#FFF}
.referral-card{
  display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:center;
  padding:45px;border-radius:20px;background:linear-gradient(135deg,var(--primary-color),rgb(0,60,180));
  color:#fff;box-shadow:0 20px 45px rgba(0,40,142,.2)
}
.section-kicker.light{color:var(--sky-blue)}
.referral-content h2{font-size:34px;margin:5px 0 12px}
.referral-content p{color:rgba(255,255,255,.82);max-width:560px}
.referral-stats{display:flex;gap:40px;margin-top:25px}
.referral-stats strong{display:block;font-size:24px;color:#fff}
.referral-stats span{font-size:12px;color:rgba(255,255,255,.72)}
.referral-form{background:#fff;padding:25px;border-radius:15px}
.referral-form label{display:block;color:var(--primary-color);font-weight:700;font-size:13px;margin:0 0 7px}
.copy-field{display:flex;margin-bottom:17px}
.copy-field input{width:100%;padding:13px;border:1px solid var(--border-color);border-right:0;border-radius:8px 0 0 8px;font-size:14px;color:var(--text-dark);background:#f8fafc}
.copy-field button{padding:0 18px;border:0;border-radius:0 8px 8px 0;background:var(--sky-blue);color:var(--primary-color);font-weight:800;cursor:pointer}
.copy-field button:hover{background:#7dd3fc}
.dashboard-section{padding:75px 0;background:#fff}
.dashboard-section.alt-section{background:var(--sky-light)}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}
.section-heading h2{font-size:28px;color:var(--primary-color)}
.view-link{color:var(--primary-color);font-weight:700;text-decoration:none}
.dashboard-grid{display:grid;gap:20px}
.two-columns{grid-template-columns:1.95fr 1fr}
.dashboard-card,.info-block,.feature-card{
  background:#fff;border:1px solid var(--border-color);border-radius:16px;
  box-shadow:0 8px 25px rgba(0,40,142,.08);
}
.eyebrow,.section-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--primary-color);margin-bottom:10px}
.ref_submit{width: 100%;
    padding: 13px;
    border: 1px solid var(--border-color);
    border-right: 0;
    border-radius: 8px 8px 8px 8px;
    font-size: 14px;
    color: #fff;
    background: rgb(0,60,180);
}

/* ========================================
HOME CURRENT AFFAIRS + ARTICLES
======================================== */

.home-content-section {
padding: 70px 0;
background: var(--sky-light);
}

.home-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}

/* MAIN CARD */

.home-content-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 25px;
box-shadow:
    0 8px 25px rgba(0, 40, 142, 0.08);

transition: 0.3s;

}

.home-content-card:hover {
box-shadow:
0 12px 30px rgba(0, 40, 142, 0.13);
}

/* CARD HEADING */

.home-card-heading {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
margin-bottom: 5px;

border-bottom: 1px solid var(--border-color);
}

.home-card-heading h2 {
margin-top: 5px;
color: var(--primary-color);
font-size: 24px;
}

/* SMALL LABEL */

.home-mini-label {
display: inline-block;
color: var(--primary-color);

font-size: 12px;
font-weight: 700;

letter-spacing: 0.5px;

}

/* VIEW ALL */

.home-view-all {
color: var(--primary-color);
text-decoration: none;
font-size: 13px;
font-weight: 600;
}

.home-view-all:hover {
text-decoration: underline;
}

/* CONTENT LIST */

.home-content-list {
margin-top: 5px;
}

/* EACH ITEM */

.home-content-item {
display: flex;
gap: 15px;
padding: 18px 0;

border-bottom: 1px solid var(--border-color);
}

.home-content-item:last-child {
border-bottom: none;
padding-bottom: 5px;
}

/* THUMBNAIL */

.home-content-item img {
width: 105px;
height: 85px;
min-width: 105px;

object-fit: cover;

border-radius: 10px;

border: 1px solid var(--border-color);
}

/* CONTENT */

.home-content-info {
flex: 1;
min-width: 0;
}

.home-content-info h3 {
margin: 0 0 6px;
font-size: 16px;
line-height: 1.35;

color: var(--primary-color);
}

.home-content-info h3 a {
color: var(--primary-color);
text-decoration: none;
}

.home-content-info h3 a:hover {
text-decoration: underline;
}

/* DESCRIPTION */

.home-content-info p {
margin: 0 0 7px;
color: var(--text-light);

font-size: 13px;

line-height: 1.5;

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

overflow: hidden;

}

/* DATE */

.home-content-date {
color: var(--text-light);
font-size: 11px;

}

/* ========================================
RESPONSIVE
======================================== */


/* MOBILE */


@media (max-width: 992px) {
    .home-content-grid {
    grid-template-columns: 1fr;
}
     .notice-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feature-grid,.question-grid,.tutor-grid,.extra-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .two-columns,.referral-card{grid-template-columns:1fr}

 .topper-item{grid-template-columns:minmax(130px,1fr) 42px 120px 65px 70px 60px;gap:8px}

    .notice-hero-image {
        max-width: 650px;
    }


    .notice-card {
        grid-template-columns:
            75px
            minmax(0, 1fr);
    }


    .notice-action {
        grid-column: 1 / -1;

        flex-direction: row;
    }


    .notice-download-btn,
    .notice-view-btn {
        flex: 1;
    }

      .topper-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .feature-grid,
    .question-grid,
    .tutor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }


    .answer-layout {
        grid-template-columns: 1fr;
    }

    .answer-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .sidebar-card {
        margin-bottom: 0;
    }

        .download-answer-wrapper {
        grid-template-columns: 1fr;
    }


}


@media (max-width: 768px) {

    
.home-content-card {
    padding: 18px;
}

.home-content-item {
    gap: 12px;
}

.home-content-item img {
    width: 85px;
    min-width: 85px;
    height: 70px;
}

.home-content-info h3 {
    font-size: 14px;
}

.home-content-info p {
    font-size: 12px;
}

.home-card-heading h2 {
    font-size: 20px;
}

  .notice-hero {
        padding: 50px 0;
    }
  .topper-item{grid-template-columns:28px 42px 1fr;gap:8px}
  .topper-item .stats{display:none}
  .earner-item{grid-template-columns:30px 45px 1fr}
  .earning{grid-column:3;text-align:left}
  .referral-card{padding:28px}
  .referral-content h2{font-size:28px}
  .referral-stats{gap:25px}
  .copy-field input{min-width:0}

    .notice-section {
        padding: 55px 0;
    }


    .notice-hero-content h1 {
        font-size: 32px;
    }


    .notice-card {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 22px;
    }


    .notice-date {
        width: 70px;
    }


    .notice-action {
        grid-column: auto;

        flex-direction: column;
    }


    .notice-meta {
        flex-direction: column;
        gap: 6px;
    }

    nav {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }

    .auth-menu {
        margin-left: auto;
    }

    .auth-card {
        padding: 25px;
    }

    .navbar {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 20px;
    }


    nav ul {
        gap: 10px;

        flex-wrap: wrap;

        justify-content: center;

    }


    .hero-content {
        flex-direction: column;
    }


    .hero-text {
        text-align: center;
    }


    .hero-text h1 {
        font-size: 38px;
    }


    .feature-grid,
    .question-grid,
    .tutor-grid,
    .steps {
        grid-template-columns: 1fr;
    }


    .contact-grid {
        grid-template-columns: 1fr;
    }


    .upload-box {
        padding: 25px;
    }

      .related-row {
        flex-direction: column;
    }


    .related-image {
        width: 100%;

        min-width: 100%;
    }


    .related-image img {
        height: 220px;
    }


    .related-meta {
        flex-direction: column;

        gap: 5px;
    }


    .details-box {
        padding: 25px;
    }


    .pdf-download .btn {
        display: block;

        text-align: center;

        margin: 10px 0;
    }

     .download-answer-section {
        padding: 30px 15px;
    }

    .download-answer-info {
        padding: 35px 25px;
    }

    .download-main-card {
        padding: 40px 25px;
    }

    .download-answer-info h1 {
        font-size: 26px;
    }

    .detail-item {
        flex-direction: column;
        gap: 5px;
    }

    .detail-item strong {
        text-align: left;
    }

     .topper-grid {
        grid-template-columns: 1fr;
    }

    .topper-hero h1 {
        font-size: 28px;
    }

     .answer-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .answer-paper {
        padding: 25px;
    }

    .sidebar-card {
        margin-bottom: 20px;
    }

    .answer-sidebar {
        display: block;
    }
    .answer-detail-hero {
        padding: 35px 0;
    }

    .answer-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .answer-title-row h1 {
        font-size: 28px;
    }

    .answer-score {
        width: 100%;
        box-sizing: border-box;
    }

    .submission-success-section {
        padding: 35px 15px;
    }

    .submission-success-card {
        padding: 30px 20px;
    }

    .submission-success-card h1 {
        font-size: 26px;
    }

    .submission-info-row {
        flex-direction: column;
        gap: 5px;
    }

    .submission-info-row strong {
        text-align: left;
    }

    .checking-time-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .success-buttons {
        flex-direction: column;
    }

    .dashboard-btn,
    .secondary-btn {
        display: block;
    }

}

@media (max-width: 600px) {

   

}

@media (max-width: 500px) {

    .answer-breadcrumb {
        font-size: 12px;
        flex-wrap: wrap;
    }

    .answer-title-row h1 {
        font-size: 24px;
    }

    .premium-badge-detail {
        font-size: 10px;
        padding: 6px 10px;
    }
    .notice-hero-content h1 {
        font-size: 27px;
    }


    .notice-hero-image img {
        border-radius: 10px;
    }

}

/* =========================================================
   ADDITIONS (not in the reference stylesheet)

   The reference site had no home slider, and its footer sat
   wherever the content ended - on short pages that left it
   floating mid-screen. Everything below is new.
========================================================= */


/* ---------------------------------------------------------
   STICKY FOOTER
   Footer is pinned to the bottom of the viewport when the
   page is short, and pushed down normally when it is long.
   Not position:fixed - that would cover the content.
--------------------------------------------------------- */

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > footer {
    margin-top: auto;
}

/* Flex items shrink by default; without this a long page would
   squeeze its sections instead of scrolling. */
body > *:not(footer) {
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   OUTLINE BUTTON
   .secondary-btn only ever set a border and text colour; used on
   its own next to .btn it inherited .btn's dark background and
   rendered dark-on-dark. Give the combination a real background.
--------------------------------------------------------- */

.btn.secondary-btn {
    background: #ffffff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn.secondary-btn:hover {
    background: #f0f4ff;
    color: var(--primary-color);
}

/* ---------------------------------------------------------
   HOME SLIDER
   Three fixed slides, cross-faded. Alpine drives the index;
   CSS does the fade, so there is no layout thrash and it
   degrades to slide 1 if JS never runs.
--------------------------------------------------------- */

.slider {
    position: relative;
    width: 100%;
    aspect-ratio: 12 / 5;
    border-radius: 18px;
    overflow: hidden;
    background: var(--primary-color);
    box-shadow: 0 20px 40px rgba(0, 40, 142, 0.18);
}

.slider-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.slider-slide.is-active {
    opacity: 1;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

.slider-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: 0.3s;
}

.slider-dot.is-active {
    background: #ffffff;
    transform: scale(1.25);
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--primary-color);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: 0.3s;
}

.slider-arrow:hover {
    background: #ffffff;
}

.slider-arrow.prev { left: 16px; }
.slider-arrow.next { right: 16px; }


/* ---------------------------------------------------------
   CONTENT CARD GRID
   Block-wise listing used by question sets, tutors and
   current affairs: a card per item with a "View More" that
   opens the item's own page.
--------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}

.content-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 40, 142, 0.07);
    transition: 0.3s;
}

.content-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0, 40, 142, 0.14);
}

/* Thumbnail is optional - without one the header falls back to
   a flat brand-coloured band with the item's initial. */
.content-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color), #0047cc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
}

/* Pinned to the box rather than sized by the flex layout: a thumbnail with
   an odd intrinsic ratio (a tall poster, a 1:1 crop) would otherwise stretch
   the card taller than its neighbours in the same row. */
.content-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.content-card-body h3 {
    margin: 0;
    font-size: 18px;
    color: var(--primary-color);
    line-height: 1.4;
}

.content-card-meta {
    font-size: 12.5px;
    color: var(--text-light);
}

.content-card-excerpt {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}

/* Pushes the action row to the card's bottom so every card in a
   row lines its button up, whatever the description length. */
.content-card-actions {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-pill {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    margin-right: 5px;
}


/* ---------------------------------------------------------
   ARTICLE / DETAIL PAGE
--------------------------------------------------------- */

.detail-page {
    padding: 45px 0 70px;
    background: #f5f8ff;
    min-height: 60vh;
}

.detail-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 38px;
    box-shadow: 0 8px 25px rgba(0, 40, 142, 0.08);
    max-width: 860px;
    margin: 0 auto;
}

.detail-card h1 {
    color: var(--primary-color);
    font-size: 30px;
    margin: 0 0 12px;
    line-height: 1.3;
}

.detail-body {
    white-space: pre-wrap;
    line-height: 1.85;
    color: #444;
    margin: 22px 0;
}

.detail-cover {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 22px;
}


/* ---------------------------------------------------------
   NARROW VIEWPORT
--------------------------------------------------------- */

@media (max-width: 768px) {
    /* .hero-content stacks here but keeps align-items:center from its base
       rule, so on the cross (now horizontal) axis .hero-image sized to its
       content - and every slide inside is absolutely positioned, making that
       content zero wide. The slider collapsed to nothing. */
    .hero-image {
        width: 100%;
    }

    .slider {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    /* Centred slide text spans almost the full width on a phone, so the
       vertically-centred arrows would sit on top of it. Drop them to the
       bottom corners, level with the dots. */
    .slider-arrow {
        width: 32px;
        height: 32px;
        font-size: 16px;
        top: auto;
        bottom: 10px;
        transform: none;
    }

    .slider-arrow.prev { left: 12px; }
    .slider-arrow.next { right: 12px; }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .detail-card {
        padding: 22px;
    }

    .detail-card h1 {
        font-size: 24px;
    }

    .detail-page {
        padding: 25px 0 45px;
    }
}


/* ---------------------------------------------------------
   HEADER AT PHONE WIDTH

   The base .auth-menu is position:absolute/right:2px and the
   existing 768px rule only changed its margin, so the account
   button stayed pinned to the corner and sat on top of the
   logo. nav ul's 115px right margin (there to clear that
   absolute button on desktop) also dragged the links off
   centre. Reset both and lay the bar out properly: logo left,
   account right, nav wrapping onto its own row underneath.
--------------------------------------------------------- */

@media (max-width: 768px) {
    .navbar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .auth-menu {
        position: static;
        right: auto;
        margin-left: 0;
    }

    .logo {
        font-size: 23px;
    }

    .login-btn {
        padding: 9px 18px;
        font-size: 14px;
    }

    /* Full-width third row so the six nav items wrap cleanly
       instead of squeezing beside the logo. */
    nav {
        order: 3;
        width: 100%;
    }

    nav ul {
        margin-right: 0;
        justify-content: center;
        row-gap: 8px;
    }

    /* The account dropdown is absolutely positioned against the
       menu; once that menu is static it needs its own context. */
    .account-dropdown {
        position: relative;
    }
}


/* =========================================================================
   DESIGN REFRESH
   ─────────────────────────────────────────────────────────────────────────
   Everything above is the extracted reference stylesheet. This layer sits
   on top of it rather than rewriting it: most of the work is done by
   redefining the tokens the reference already uses, so the change reaches
   every component that was built against them.
========================================================================= */


/* -------------------------------------------------------------------------
   TOKENS
   Same brand blue, rebuilt as a proper ramp. Neutrals move from pure grey
   to a slightly cool grey so they sit with the blue instead of against it.
------------------------------------------------------------------------- */

:root {
    --primary-color: #16308f;
    --primary-dark: #0e2069;
    --primary-light: #eaeffc;
    --primary-hover: #1b3aa8;

    --accent: #2f7df6;
    --accent-soft: #e8f1ff;

    --sky-blue: #4cc3f5;
    --sky-light: #f6f9ff;

    --white: #ffffff;
    --text-dark: #141c33;
    --text-body: #46506b;
    --text-light: #6c7793;
    --border-color: #e4e8f2;
    --border-strong: #cfd6e6;

    --surface: #ffffff;
    --surface-sunken: #f6f8fd;

    --success: #128a5a;
    --success-soft: #e6f6ee;
    --warning: #9a6200;
    --warning-soft: #fdf3dd;
    --danger: #c6283f;
    --danger-soft: #fdeaec;

    /* Layered shadows read as depth; a single hard shadow reads as a border. */
    --shadow-xs: 0 1px 2px rgba(20, 28, 51, 0.05);
    --shadow-sm: 0 1px 2px rgba(20, 28, 51, 0.05), 0 2px 6px rgba(20, 28, 51, 0.05);
    --shadow-md: 0 2px 4px rgba(20, 28, 51, 0.04), 0 8px 20px rgba(20, 28, 51, 0.07);
    --shadow-lg: 0 4px 8px rgba(20, 28, 51, 0.05), 0 18px 40px rgba(20, 28, 51, 0.11);
    --shadow-ring: 0 0 0 3px rgba(47, 125, 246, 0.22);

    /* Header height, so panels can size themselves against it. */
    --header-h: 71px;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* One easing everywhere - motion that disagrees with itself feels cheap. */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --speed: 0.18s;
}


/* -------------------------------------------------------------------------
   BASE
------------------------------------------------------------------------- */

body {
    /* System stack: matches whatever the reader's OS already renders best,
       and drops the Arial fallback that dated the whole page. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    color: var(--text-body);
    background: var(--sky-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.65;
}

h1, h2, h3, h4, h5 {
    color: var(--text-dark);
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 700;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--speed) var(--ease);
}

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

/* Keyboard users get a visible ring; mouse users never see it. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring);
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--accent-soft);
    color: var(--primary-dark);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* -------------------------------------------------------------------------
   HEADER + NAV
   Sticky bar that gains a border only once the page scrolls under it, an
   underline that grows from the link rather than appearing under it, and a
   real current-page state (the reference had none).
------------------------------------------------------------------------- */

header {
    /* Deliberately not backdrop-filter: a blurred sticky bar repaints the
       area behind it on every scroll frame, and on this stack it upset the
       compositor badly enough to leave the page half-drawn. A near-opaque
       bar reads the same and costs nothing. */
    background: rgba(255, 255, 255, 0.97);
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
    padding: 14px 0;
}

.logo {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-color);
    text-decoration: none;
}

.logo span {
    color: var(--accent);
}

nav ul {
    gap: 6px;
}

nav ul li a {
    position: relative;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-body);
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--speed) var(--ease);
}

nav ul li a:hover {
    color: var(--primary-color);
    background: var(--primary-light);
}

nav ul li a:hover::after,
nav ul li a.is-current::after {
    transform: scaleX(1);
}

nav ul li a.is-current {
    color: var(--primary-color);
}


/* Account button: initial chip + caret, so it reads as a person not a link. */
.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 8px;
    background: var(--primary-color);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: background var(--speed) var(--ease), transform var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease);
}

.login-btn:hover {
    background: var(--primary-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.login-btn:active {
    transform: translateY(0);
}

/* Guests get a plain pill with no chip, so pad it evenly. */
.auth-menu > .login-btn {
    padding: 9px 22px;
}

.avatar-chip {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.caret {
    font-size: 10px;
    opacity: 0.8;
}

.account-submenu {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    padding: 6px;
}

.account-submenu li a {
    display: block;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-body);
}

.account-submenu li a:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}


/* -------------------------------------------------------------------------
   BUTTONS
   Two families existed (.btn on public pages, .account-btn in panels) with
   different sizes, radii and hover behaviour. They now share one spec, so a
   button looks the same wherever it appears.
------------------------------------------------------------------------- */

.btn,
.account-btn,
.auth-submit-btn,
.download-btn,
.notice-download-btn,
.esewa-pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: var(--white);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
        color var(--speed) var(--ease), transform var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease);
}

.btn:hover,
.account-btn:hover,
.auth-submit-btn:hover,
.download-btn:hover,
.esewa-pay-btn:hover {
    background: var(--primary-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* A press should register physically - lift on hover, settle on click. */
.btn:active,
.account-btn:active,
.auth-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.btn:disabled,
.account-btn:disabled,
.auth-submit-btn:disabled,
.btn[disabled],
.account-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Outline / secondary */
.btn.secondary-btn,
.account-btn.btn-secondary,
.btn-secondary {
    background: var(--white);
    color: var(--primary-color);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.btn.secondary-btn:hover,
.account-btn.btn-secondary:hover,
.btn-secondary:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-danger,
.account-btn.btn-danger {
    background: var(--danger);
    border-color: transparent;
}

.btn-danger:hover,
.account-btn.btn-danger:hover {
    background: #a81f33;
    color: var(--white);
}

.btn-sm,
.account-btn.btn-sm {
    padding: 7px 14px;
    font-size: 13.5px;
    border-radius: var(--radius-sm);
}

.auth-submit-btn {
    width: 100%;
    padding: 13px 22px;
    font-size: 15px;
}

/* eSewa keeps its own green - it is the gateway's brand, not ours. */
.esewa-pay-btn,
.account-btn.esewa-pay-btn {
    background: #60bb46;
    border-color: transparent;
}

.esewa-pay-btn:hover,
.account-btn.esewa-pay-btn:hover {
    background: #53a63c;
    color: var(--white);
}

.btn-row {
    gap: 10px;
}


/* -------------------------------------------------------------------------
   FORMS
------------------------------------------------------------------------- */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: -0.005em;
}

.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text-dark);
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.form-group input::placeholder,
.form-group textarea::placeholder,
input::placeholder {
    color: var(--text-light);
    opacity: 0.85;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--text-light);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-ring);
    outline: none;
}

.form-group textarea {
    height: 120px;
    line-height: 1.6;
    resize: vertical;
}

input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

input[type="file"]:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

input[type="checkbox"] {
    width: auto;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.field-error {
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 500;
}


/* -------------------------------------------------------------------------
   CARDS
   The reference grew four card types with four different shadows and hover
   distances. One spec, one lift.
------------------------------------------------------------------------- */

.content-card,
.feature-card,
.account-card,
.stat-card,
.detail-card,
.inline-form {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
        border-color var(--speed) var(--ease);
}

.content-card:hover,
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}

.feature-card {
    padding: 32px 26px;
}

.feature-card h3 {
    margin: 16px 0 10px;
    font-size: 18px;
}

.feature-card p {
    color: var(--text-light);
    font-size: 14.5px;
}

.icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    font-size: 26px;
    transition: transform var(--speed) var(--ease);
}

.feature-card:hover .icon {
    transform: scale(1.08) rotate(-4deg);
}

.view-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
}

.view-link::after {
    content: "→";
    margin-left: 6px;
    transition: transform var(--speed) var(--ease);
    display: inline-block;
}

.view-link:hover::after {
    transform: translateX(3px);
}

.account-card {
    background: var(--surface-sunken);
    padding: 18px 20px;
    margin-bottom: 14px;
}

.account-card h4 {
    color: var(--primary-color);
    font-size: 15px;
    margin-bottom: 6px;
}

.content-card-media {
    background: linear-gradient(135deg, var(--primary-color), var(--accent));
}

.tag-pill {
    background: var(--accent-soft);
    color: var(--primary-color);
    border-radius: var(--radius-pill);
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 600;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

a.tag-pill:hover,
button.tag-pill:hover {
    background: var(--primary-color);
    color: var(--white);
}


/* -------------------------------------------------------------------------
   HERO + SECTIONS
------------------------------------------------------------------------- */

.hero {
    padding: 80px 0 90px;
    background: radial-gradient(1100px 520px at 12% -10%, var(--accent-soft), transparent 70%),
        linear-gradient(160deg, #f4f8ff, #fdfeff);
    border-bottom: 1px solid var(--border-color);
}

.hero-text h1 {
    font-size: clamp(34px, 4.4vw, 52px);
    letter-spacing: -0.035em;
    color: var(--text-dark);
}

.hero-text h1 span {
    background: linear-gradient(100deg, var(--accent), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: 16.5px;
    color: var(--text-light);
    line-height: 1.75;
    max-width: 56ch;
}

.eyebrow,
.section-kicker {
    font-size: 11.5px;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 700;
}

.section-title {
    font-size: clamp(25px, 3vw, 34px);
    letter-spacing: -0.03em;
}

.features {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.how-it-works {
    background: linear-gradient(150deg, var(--primary-dark), var(--primary-color) 55%, #1e47c4);
}

.step-number {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-weight: 700;
}

.step h3 {
    color: var(--white);
    font-size: 17px;
}

.step p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.5px;
}

.home-view-all {
    font-weight: 600;
    font-size: 14px;
}


/* -------------------------------------------------------------------------
   FOOTER
   Was a single centred copyright line. Now a real sitemap footer, which
   also gives the short pages something to end on.
------------------------------------------------------------------------- */

footer {
    background: var(--text-dark);
    color: rgba(255, 255, 255, 0.72);
    padding: 54px 0 26px;
    text-align: left;
    font-size: 14px;
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(120px, 1fr));
    gap: 36px;
    padding-bottom: 36px;
}

.footer-brand p {
    margin-top: 12px;
    max-width: 42ch;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.7;
}

.footer-logo {
    font-size: 21px;
    color: var(--white);
}

.footer-logo span {
    color: var(--sky-blue);
}

.footer-col h4 {
    color: var(--white);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 14px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
}

.footer-col a:hover {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-note {
    color: rgba(255, 255, 255, 0.38);
}


/* -------------------------------------------------------------------------
   AUTH PAGES
------------------------------------------------------------------------- */

.auth-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.auth-card h1 {
    font-size: 26px;
    letter-spacing: -0.03em;
}

.auth-description {
    color: var(--text-light);
    font-size: 14.5px;
}

.auth-footer {
    font-size: 14px;
    color: var(--text-light);
}


/* -------------------------------------------------------------------------
   MISC PANEL BITS
------------------------------------------------------------------------- */

.panel-error,
.panel-success {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: 500;
}

.panel-error {
    background: var(--danger-soft);
    border-color: rgba(198, 40, 63, 0.18);
    color: var(--danger);
}

.panel-success {
    background: var(--success-soft);
    border-color: rgba(18, 138, 90, 0.18);
    color: var(--success);
}

.panel-empty {
    color: var(--text-light);
    font-size: 14.5px;
}

.pagination-bar {
    gap: 12px;
    font-size: 13.5px;
    color: var(--text-light);
}

.inline-form {
    background: var(--surface-sunken);
    padding: 22px;
}

.panel-toolbar {
    gap: 12px;
}


/* -------------------------------------------------------------------------
   NARROW VIEWPORT
------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14.5px;
    }

    header {
        padding: 10px 0;
    }

    nav ul li a {
        padding: 6px 10px;
        font-size: 13.5px;
    }

    .hero {
        padding: 44px 0 52px;
    }

    footer {
        padding: 40px 0 22px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-bottom: 26px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .feature-card {
        padding: 24px 20px;
    }
}


/* -------------------------------------------------------------------------
   DETAIL PAGE COVER IMAGE

   The card thumbnail was being re-used at full width on the article page,
   so a portrait scan opened as a wall of image and pushed the headline and
   body below the fold. It is a supporting picture, not the content: cap it,
   crop it to a banner ratio, and let the article start straight away.
------------------------------------------------------------------------- */

.detail-cover {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius);
    margin-bottom: 20px;
    background: var(--surface-sunken);
}

@media (max-width: 768px) {
    .detail-cover {
        max-height: 180px;
    }
}


/* -------------------------------------------------------------------------
   MOBILE NAVIGATION — HAMBURGER DRAWER

   Below 768px the nav used to wrap onto two or three cramped rows under the
   logo, which pushed the page content down and still looked crowded. It now
   collapses into a drawer that slides in from the right.

   Progressive enhancement: the drawer markup is the same <nav> and account
   menu used on desktop, just repositioned - so with JS unavailable the links
   are still in the document and reachable.
------------------------------------------------------------------------- */

.nav-toggle {
    display: none;
    position: relative;
    z-index: 1002;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.nav-toggle:hover {
    border-color: var(--primary-color);
}

.nav-toggle-bar {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
    transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

/* Three bars fold into an X rather than swapping icons, so the control
   animates between its two states instead of jumping. */
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-scrim {
    display: none;
}

/* On desktop the drawer wrapper is inert - it just holds the nav and the
   account menu in their normal places. */
.nav-drawer {
    display: contents;
}


@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .navbar {
        justify-content: space-between;
    }

    .nav-drawer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        width: min(310px, 84vw);
        padding: 84px 20px 28px;
        background: var(--white);
        border-left: 1px solid var(--border-color);
        box-shadow: -14px 0 40px rgba(20, 28, 51, 0.16);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.26s var(--ease), visibility 0.26s var(--ease);
    }

    .nav-drawer.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(20, 28, 51, 0.45);
    }

    .nav-drawer nav {
        order: 0;
        width: 100%;
    }

    .nav-drawer nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-right: 0;
    }

    .nav-drawer nav ul li a {
        display: block;
        padding: 12px 14px;
        border-radius: var(--radius-sm);
        font-size: 15px;
    }

    /* The growing underline is a pointer affordance; in a vertical list a
       filled row reads better. */
    .nav-drawer nav ul li a::after {
        display: none;
    }

    .nav-drawer nav ul li a.is-current {
        background: var(--primary-light);
    }

    .nav-drawer .auth-menu {
        order: 1;
        position: static;
        margin: 14px 0 0;
        padding-top: 14px;
        border-top: 1px solid var(--border-color);
    }

    .nav-drawer .login-btn {
        width: 100%;
        justify-content: flex-start;
    }

    /* Inside the drawer the account links are already in a panel; showing
       them inline beats a dropdown within a dropdown. */
    .nav-drawer .account-submenu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 6px 0 0;
        margin: 0;
        min-width: 0;
        background: transparent;
    }

    .nav-drawer .account-dropdown .caret {
        display: none;
    }
}


/* -------------------------------------------------------------------------
   HERO SLIDER — LARGER, WITH VISIBLE TIMING

   The panel was a small card beside a wide text column. It now takes the
   larger share of the hero and runs on a 3s auto-advance with a progress
   bar, so the change is anticipated rather than sudden.
------------------------------------------------------------------------- */

.hero-content {
    gap: 52px;
    align-items: center;
}

.hero-text {
    flex: 1 1 46%;
}

/* The slider is the thing being looked at, so it gets the bigger half. */
.hero-image {
    flex: 1 1 54%;
}

/* Shape is admin-set (Home Page > Slider shape) so the frame can match
   whatever artwork is uploaded; 16:10 matches the shipped banners. */
.slider {
    aspect-ratio: var(--slider-ratio, 16 / 10);
    max-height: 430px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 20px rgba(20, 28, 51, 0.08), 0 26px 60px rgba(22, 48, 143, 0.22);
}

/* `contain`, not `cover`: an uploaded banner is shown whole rather than
   having its edges cropped to fill the box. Any letterboxing falls on the
   brand gradient behind it, so an odd aspect ratio still looks deliberate. */
.slider-slide {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color) 55%, #1e47c4);
}

.slider-slide img {
    object-fit: contain;
}


.slider-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.slider-progress-fill {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    transform-origin: left;
    animation: slider-countdown 3s linear forwards;
}

@keyframes slider-countdown {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Paused states: the bar should stop when the slideshow does. */
.slider:hover .slider-progress-fill,
.slider:focus-within .slider-progress-fill {
    animation-play-state: paused;
}

.slider-arrow {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #fff;
    font-size: 21px;
    opacity: 0;
    transition: opacity var(--speed) var(--ease), background var(--speed) var(--ease);
}

/* Arrows surface on hover or keyboard focus - on a panel that advances by
   itself they are a correction, not the primary control. */
.slider:hover .slider-arrow,
.slider:focus-within .slider-arrow {
    opacity: 1;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.34);
    color: #fff;
}

.slider-dots {
    bottom: 20px;
}

.slider-dot {
    width: 8px;
    height: 8px;
}

.slider-dot.is-active {
    width: 24px;
    border-radius: var(--radius-pill);
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .slider-progress-fill {
        animation: none;
    }

    .slider-progress {
        display: none;
    }
}

@media (max-width: 768px) {
    .slider {
        max-height: none;
    }

    /* No hover on touch, so the arrows have to be there from the start. */
    .slider-arrow {
        opacity: 1;
    }
}