:root {
    --omt-primary: #0d6efd;
    --omt-ink: #172033;
    --omt-soft: #eef5ff;
}

html {
    min-height: 100%;
}

body {
    background-color: #f8f9fa;
    color: #212529;
}

.section-space { padding: 4.5rem 0; }

.hero-slide { background: radial-gradient(circle at 85% 15%, rgba(93, 175, 255, .42), transparent 31rem), linear-gradient(135deg, #071f4d, #0d6efd 56%, #3d8bfd); color: #fff; min-height: 27rem; }
.hero-slide--success { background: radial-gradient(circle at 15% 70%, rgba(255, 255, 255, .16), transparent 26rem), linear-gradient(135deg, #084f43, #198754 56%, #55b98a); }
.hero-slide--violet { background: radial-gradient(circle at 85% 25%, rgba(255, 255, 255, .18), transparent 24rem), linear-gradient(135deg, #32136d, #6f42c1 56%, #a46be7); }
.hero-icon-orb { width: 13rem; height: 13rem; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .18); font-size: 5rem; }
.category-card, .test-card, .instruction-card, .result-card { border: 0; box-shadow: 0 .45rem 1.5rem rgba(23, 32, 51, .08); }
.category-card { transition: transform .2s ease, box-shadow .2s ease; }
.category-card:hover { transform: translateY(-.25rem); box-shadow: 0 .75rem 1.75rem rgba(23, 32, 51, .13); }
.category-icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: .875rem; background: var(--omt-soft); color: var(--omt-primary); font-size: 1.35rem; }
.test-card { height: 100%; }
.test-card .card-body { display: flex; flex-direction: column; }
.test-meta { color: #5b6474; font-size: .9rem; }
.question-card { border-left: .25rem solid var(--omt-primary); }
.question-option { cursor: pointer; transition: background-color .15s ease; }
.question-option:hover { background: #f6f9ff; }
.test-timer { position: sticky; top: .75rem; z-index: 10; }
.result-score { font-size: clamp(3rem, 10vw, 5rem); font-weight: 800; line-height: 1; }

@media (max-width: 575.98px) {
    .section-space { padding: 3.25rem 0; }
    .hero-slide { min-height: 30rem; }
    .hero-icon-orb { width: 9rem; height: 9rem; font-size: 3.5rem; }
}

.skip-link {
    left: 1rem;
    position: fixed;
    top: 1rem;
    z-index: 1080;
}

.site-main {
    min-height: 1px;
}

.home-container { padding-inline: .75rem; }
.image-slider { border-radius: .75rem; overflow: hidden; box-shadow: 0 .45rem 1.5rem rgba(23, 32, 51, .08); }
.image-slider .carousel-item { aspect-ratio: 16 / 6; background: #e9ecef; }
.image-slider img { height: 100%; object-fit: cover; object-position: center; }
.home-container .section-space { padding-block: 3rem; }
.home-container #popular-tests { margin-inline: calc(-1 * .75rem); padding-inline: .75rem; }
.slider-admin-thumbnail { display: block; width: 9rem; max-height: 4.5rem; object-fit: cover; border-radius: .375rem; }
.mock-question-panel[hidden] { display: none !important; }
.question-palette { display: grid; grid-template-columns: repeat(5, minmax(2.25rem, 1fr)); gap: .5rem; }
.palette-button { min-height: 2.45rem; border: 1px solid #adb5bd; border-radius: .4rem; background: #e9ecef; color: #212529; font-weight: 600; }
.palette-button.is-answered { border-color: #198754; background: #198754; color: #fff; }
.palette-button.is-visited { border-color: #dc3545; background: #dc3545; color: #fff; }
.palette-button.is-not-visited { border-color: #adb5bd; background: #e9ecef; color: #495057; }
.palette-button.is-current { outline: 3px solid rgba(13, 110, 253, .3); outline-offset: 1px; }
.palette-legend { display: inline-block; width: .75rem; height: .75rem; border-radius: .15rem; margin-right: .25rem; vertical-align: -.05rem; }
.palette-legend.answered { background: #198754; }
.palette-legend.visited { background: #dc3545; }
.palette-legend.not-visited { background: #adb5bd; }

@media (min-width: 992px) {
    .mock-palette.collapse { display: block !important; height: auto !important; visibility: visible !important; }
}

@media (max-width: 575.98px) {
    .image-slider .carousel-item { aspect-ratio: 16 / 9; }
    .home-container .section-space { padding-block: 2.25rem; }
    .question-palette { grid-template-columns: repeat(5, minmax(2.5rem, 1fr)); }
}

/* Shared public navigation and homepage cards. */
.main-navbar .navbar-brand { color: #fff !important; font-size: 1.05rem; }
.main-navbar .navbar-nav { gap: .2rem; }
.main-navbar .nav-link { color: rgba(255, 255, 255, .94) !important; font-size: .91rem; font-weight: 600; padding: .55rem .75rem !important; border-radius: .45rem; }
.main-navbar .nav-link:hover, .main-navbar .nav-link.active { color: #fff !important; background: rgba(255, 255, 255, .18); }
.home-section { overflow: hidden; }
.mock-test-card { height: 100%; display: flex; flex-direction: column; }
.mock-test-card .btn { margin-top: auto; }
.mock-test-icon img, .category-mini-icon img { object-fit: contain; }
.mock-test-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mobile-question-card .question-text { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.mobile-question-card .question-option { min-height: 3.5rem; font-size: .98rem; }
.palette-button.is-answered { border-color: #198754; background: #198754; color: #fff; }
.palette-button.is-skipped { border-color: #6c757d; background: #6c757d; color: #fff; }
.palette-button.is-not-attempted { border-color: #dc3545; background: #dc3545; color: #fff; }
.palette-legend.skipped { background: #6c757d; }
.palette-legend.not-attempted { background: #dc3545; }

@media (max-width: 767.98px) {
    body { overflow-x: hidden; }
    .main-navbar .navbar-nav { padding-block: .5rem; }
    .main-navbar .nav-link { padding: .65rem .75rem !important; }
    #popular-tests .row.row-cols-1, #latest-tests .row.row-cols-1 { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: .75rem; margin-inline: -.25rem; padding: .25rem .75rem .75rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
    #popular-tests .row.row-cols-1::-webkit-scrollbar, #latest-tests .row.row-cols-1::-webkit-scrollbar { display: none; }
    #popular-tests .row.row-cols-1 > .col, #latest-tests .row.row-cols-1 > .col { flex: 0 0 85%; max-width: 85%; padding: 0; scroll-snap-align: start; }
    .mock-test-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mock-test-actions .btn:last-child { grid-column: span 2; }
    .mock-palette { width: min(92vw, 22rem); }
    .mock-palette .offcanvas-body { padding: 1rem !important; }
    .question-palette { grid-template-columns: repeat(5, minmax(2.7rem, 1fr)); }
    .test-timer { position: sticky; top: .25rem; }
}
/* =========================================================
   SOCIAL FOLLOW BAR
   ========================================================= */

.social-follow-bar {
    position: fixed;
    right: 18px;
    bottom: 20px;
    z-index: 1050;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social-btn {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    color: #fff;
    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);

    transition:
        transform .2s ease,
        width .2s ease,
        border-radius .2s ease;
}

.social-btn span {
    display: none;
}

.social-btn:hover {
    width: 125px;
    border-radius: 25px;
    justify-content: center;
    gap: 8px;
    color: #fff;
    transform: translateX(-3px);
}

.social-btn:hover span {
    display: inline-block;
}

.social-btn i {
    font-size: 20px;
}

.social-btn.whatsapp {
    background: #25D366;
}

.social-btn.telegram {
    background: #229ED9;
}

.social-btn.instagram {
    background: #E4405F;
}

.social-btn.facebook {
    background: #1877F2;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .social-follow-bar {
        left: 0;
        right: 0;
        bottom: 0;

        height: 58px;

        padding: 6px 8px;

        flex-direction: row;
        justify-content: space-around;

        background: #fff;

        border-top: 1px solid rgba(0, 0, 0, .10);

        box-shadow: 0 -3px 12px rgba(0, 0, 0, .12);
    }

    .social-btn {
        width: auto;
        height: 46px;

        flex: 1;

        max-width: 90px;

        border-radius: 8px;

        gap: 5px;

        box-shadow: none;
    }

    .social-btn span {
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
    }

    .social-btn:hover {
        width: auto;
        border-radius: 8px;
        transform: none;
    }

    .social-btn i {
        font-size: 18px;
    }

    /* Fixed bar ke neeche content hide na ho */
    body {
        padding-bottom: 65px;
    }
}
@media (max-width: 991.98px) {

    .main-navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1040;
    }

    body {
        padding-top: 56px;
        padding-bottom: 65px;
    }
}