/* =========================================================
   CODEBHAVYA WEB TECHNOLOGIES
   INDEX + COURSE SHELL
========================================================= */

:root {

    --wt-index-bg: #181c20;
    --wt-index-panel: #22272c;
    --wt-index-panel-2: #292f35;
    --wt-index-panel-3: #101317;

    --wt-index-border: #3d464d;
    --wt-index-border-soft: #30383e;

    --wt-index-text: #e8edf0;
    --wt-index-soft: #b5c0c7;
    --wt-index-muted: #8d99a2;

    --wt-index-gold: #f0c85a;
    --wt-index-gold-soft: #ffe39a;

    --wt-index-cyan: #63d2da;
    --wt-index-cyan-soft: #a8edf0;

    --wt-index-green: #68c99a;
    --wt-index-green-soft: #b8ead1;

    --wt-index-red: #ed7c72;
    --wt-index-orange: #e9aa5e;

}


/* =========================================================
   GLOBAL
========================================================= */

.wt-index-page {

    margin: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(99, 210, 218, .07),
            transparent 28%
        ),
        var(--wt-index-bg);

    color: var(--wt-index-text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

}


.wt-index-page a {
    text-decoration: none;
}


.wt-index-page *,
.wt-index-page *::before,
.wt-index-page *::after {
    box-sizing: border-box;
}


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

.wt-course-header {

    position: fixed;

    top: 0;

    z-index: 1000;

    background: #15191d;

    border-bottom:
        2px solid #465057;

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

}


.wt-course-header-inner {

    width: min(
        1500px,
        calc(100% - 28px)
    );

    min-height: 70px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 18px;

}


.wt-course-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    margin-right: auto;

}


.wt-course-brand-logo {

    width: 48px;

    height: 48px;

    object-fit: contain;

    background: #fff;

    border-radius: 5px;

}


.wt-course-brand-name {

    font-family:
        Georgia,
        serif;

    font-size: 27px;

    font-weight: 700;

    color: #dce3e7;

}


.wt-course-brand-name span {

    color:
        var(--wt-index-gold);

}


.wt-course-main-nav {

    display: flex;

    align-items: center;

    gap: 3px;

    overflow-x: auto;

    scrollbar-width: thin;

}


.wt-course-main-nav a {

    padding:
        9px 10px;

    border-radius: 7px;

    white-space: nowrap;

    color: #cbd4d9;

    font-size: 12px;

    font-weight: 800;

    transition:
        background .18s ease,
        color .18s ease;

}


.wt-course-main-nav a:hover,
.wt-course-main-nav a.active {

    background:
        var(--wt-index-panel-2);

    color:
        var(--wt-index-gold);

}


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

.wt-mobile-menu-btn {

    display: none;

    border:
        1px solid
        var(--wt-index-border);

    background:
        var(--wt-index-panel);

    color:
        var(--wt-index-text);

    border-radius: 8px;

    padding:
        9px 12px;

    cursor: pointer;

    font-weight: 800;

}


.wt-mobile-menu-btn span {
    margin-left: 4px;
}


.wt-mobile-nav {

    display: none;

    padding:
        10px 14px 14px;

    border-top:
        1px solid
        var(--wt-index-border-soft);

    background:
        #15191d;

}


.wt-mobile-nav a {

    display: block;

    padding:
        11px 12px;

    margin-top: 5px;

    border-radius: 8px;

    color:
        var(--wt-index-soft);

    font-size: 14px;

    font-weight: 700;

}


.wt-mobile-nav a:hover,
.wt-mobile-nav a.active {

    background:
        var(--wt-index-panel-2);

    color:
        var(--wt-index-gold);

}


/* =========================================================
   LAYOUT
========================================================= */

.wt-index-layout {

    width: min(
        1500px,
        calc(100% - 28px)
    );

    margin: 0 auto;

    display: grid;

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

    gap: 20px;

    align-items: start;

}


.wt-sidebar-host {

    position: sticky;

    top: 88px;

    height:
        calc(100vh - 104px);

    min-height: 0;

    overflow: hidden;

}


/* =========================================================
   SIDEBAR
========================================================= */

.wt-sidebar {

    height: 100%;

    overflow-y: auto;

    padding:
        14px 10px 20px 0;

    scrollbar-width: thin;

}


.wt-sidebar-header {

    padding:
        16px;

    margin-bottom:
        10px;

    background:
        linear-gradient(
            145deg,
            #242a30,
            #1c2126
        );

    border:
        1px solid
        var(--wt-index-border);

    border-radius:
        14px;

}


.wt-sidebar-kicker {

    display: block;

    margin-bottom: 5px;

    color:
        var(--wt-index-cyan);

    font-size: 10px;

    font-weight: 900;

    letter-spacing:
        .13em;

}


.wt-sidebar-header h2 {

    margin:
        0 0 6px;

    color:
        #f1f4f5;

    font-size:
        20px;

}


.wt-sidebar-header p {

    margin: 0;

    color:
        var(--wt-index-muted);

    font-size:
        12px;

    line-height:
        1.55;

}


/* COURSE HOME */

.wt-sidebar-home {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom:
        11px;

    padding:
        11px 13px;

    border:
        1px solid
        var(--wt-index-border);

    border-radius:
        9px;

    color:
        var(--wt-index-gold);

    background:
        #20252a;

    font-size:
        13px;

}


.wt-sidebar-home:hover {

    border-color:
        var(--wt-index-gold);

    background:
        #292f35;

}


/* PART */

.wt-sidebar-part {

    margin-bottom:
        17px;

}


.wt-sidebar-part-title {

    padding:
        8px 10px;

    margin-bottom:
        5px;

    color:
        var(--wt-index-cyan-soft);

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .07em;

}


/* LEVEL */

.wt-sidebar-level {

    display: flex;

    align-items: center;

    gap: 9px;

    position: relative;

    margin-bottom: 4px;

    padding:
        9px 8px;

    border:
        1px solid transparent;

    border-radius: 9px;

    transition:
        background .16s ease,
        border-color .16s ease;

}


.wt-sidebar-level.available {

    color:
        var(--wt-index-soft);

    cursor: pointer;

}


.wt-sidebar-level.available:hover,
.wt-sidebar-level.available.current {

    background:
        #252b30;

    border-color:
        var(--wt-index-border);

}


.wt-sidebar-level-number {

    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0 31px;

    width: 31px;

    height: 31px;

    border-radius: 8px;

    background:
        #161a1e;

    border:
        1px solid
        var(--wt-index-border-soft);

    color:
        var(--wt-index-gold);

    font-size:
        10px;

    font-weight:
        900;

}


.wt-sidebar-level-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.wt-sidebar-level-info strong {

    color:
        #dce3e7;

    font-size:
        11px;

    line-height:
        1.35;

}


.wt-sidebar-level-info small {

    color:
        var(--wt-index-green);

    font-size:
        9px;

    font-weight:
        800;

}


/* COMING SOON SIDEBAR */

.wt-sidebar-level.coming {

    opacity: .76;

}


.wt-sidebar-level.coming
.wt-sidebar-level-number {

    color:
        var(--wt-index-orange);

}


.wt-sidebar-level.coming
.wt-sidebar-level-info strong {

    color:
        #b6bec4;

}


.wt-sidebar-level.coming
.wt-sidebar-level-info small {

    color:
        var(--wt-index-orange);

}


.wt-coming-pill {

    display: none;

    margin-left: auto;

    flex-shrink: 0;

    padding:
        4px 6px;

    border-radius: 999px;

    background:
        rgba(233,167,94,.10);

    border:
        1px solid
        rgba(233,167,94,.25);

    color:
        var(--wt-index-orange);

    font-size:
        8px;

    font-weight:
        900;

}


.wt-sidebar-footer-note {

    margin-top:
        8px;

    padding:
        13px;

    background:
        #111519;

    border:
        1px solid
        var(--wt-index-border-soft);

    border-radius:
        10px;

}


.wt-sidebar-footer-note strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--wt-index-gold);

    font-size:
        11px;

}


.wt-sidebar-footer-note p {

    margin: 0;

    color:
        var(--wt-index-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


/* =========================================================
   MAIN
========================================================= */

.wt-index-main {

    min-width: 0;

    padding:
        18px 0 40px;

}


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

.wt-index-hero {

    padding:
        30px;

    border:
        1px solid
        var(--wt-index-border);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #252b30,
            #1d2227 58%,
            #15191d
        );

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

}


.wt-index-breadcrumb {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom:
        22px;

    color:
        var(--wt-index-muted);

    font-size:
        12px;

}


.wt-index-breadcrumb a {

    color:
        var(--wt-index-cyan);

}


.wt-index-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, .85fr);

    gap: 30px;

    align-items: center;

}


.wt-index-level-label,
.wt-index-section-label {

    display: inline-block;

    margin-bottom:
        8px;

    color:
        var(--wt-index-cyan);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .13em;

}


.wt-index-hero h1 {

    margin:
        0 0 10px;

    color:
        #f2f5f6;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(2.3rem, 5vw, 4.2rem);

    line-height:
        1.02;

}


.wt-index-tagline {

    margin:
        0 0 14px;

    color:
        var(--wt-index-gold-soft);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(1.1rem, 2vw, 1.45rem);

    line-height:
        1.4;

}


.wt-index-description {

    max-width:
        760px;

    margin:
        0;

    color:
        var(--wt-index-soft);

    font-size:
        15px;

    line-height:
        1.75;

}


/* HERO ACTIONS */

.wt-index-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top:
        22px;

}


.wt-index-primary-btn,
.wt-index-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height:
        44px;

    padding:
        11px 16px;

    border-radius:
        9px;

    font-size:
        13px;

    font-weight:
        900;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease;

}


.wt-index-primary-btn {

    background:
        var(--wt-index-gold);

    color:
        #141719;

}


.wt-index-primary-btn:hover {

    transform:
        translateY(-2px);

    background:
        #f7d56e;

}


.wt-index-secondary-btn {

    border:
        1px solid
        var(--wt-index-border);

    background:
        #20252a;

    color:
        var(--wt-index-text);

}


.wt-index-secondary-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--wt-index-cyan);

}


/* SNAPSHOT */

.wt-index-hero-panel {

    padding:
        17px;

    border:
        1px solid
        var(--wt-index-border);

    border-radius:
        14px;

    background:
        rgba(9,12,15,.42);

}


.wt-hero-panel-title {

    margin-bottom:
        12px;

    color:
        var(--wt-index-muted);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.wt-snapshot-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

}


.wt-snapshot-card {

    min-height:
        91px;

    padding:
        13px;

    border:
        1px solid
        var(--wt-index-border-soft);

    border-radius:
        10px;

    background:
        #1c2126;

}


.wt-snapshot-card strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--wt-index-gold);

    font-size:
        18px;

}


.wt-snapshot-card span {

    color:
        var(--wt-index-muted);

    font-size:
        10px;

    line-height:
        1.45;

}


.wt-snapshot-note {

    margin-top:
        10px;

    padding:
        10px 11px;

    border-left:
        3px solid
        var(--wt-index-cyan);

    background:
        rgba(99,210,218,.05);

    color:
        var(--wt-index-soft);

    font-size:
        10px;

    line-height:
        1.55;

}


/* =========================================================
   SECTIONS
========================================================= */

.wt-index-section {

    margin-top:
        24px;

    padding:
        24px;

    border:
        1px solid
        var(--wt-index-border);

    border-radius:
        16px;

    background:
        var(--wt-index-panel);

}


.wt-index-section-heading {

    max-width:
        900px;

    margin-bottom:
        20px;

}


.wt-index-section-heading h2 {

    margin:
        0 0 8px;

    color:
        #eef2f3;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(1.45rem, 3vw, 2rem);

}


.wt-index-section-heading p {

    margin:
        0;

    color:
        var(--wt-index-muted);

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================================
   FEATURE CARDS
========================================================= */

.wt-index-feature-grid {

    display:
        grid;

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

    gap:
        11px;

}


.wt-index-feature-card {

    padding:
        18px;

    border:
        1px solid
        var(--wt-index-border-soft);

    border-radius:
        12px;

    background:
        #1d2227;

}


.wt-feature-icon {

    margin-bottom:
        10px;

    font-size:
        22px;

}


.wt-index-feature-card h3 {

    margin:
        0 0 7px;

    color:
        #eaf0f2;

    font-size:
        15px;

}


.wt-index-feature-card p {

    margin:
        0;

    color:
        var(--wt-index-muted);

    font-size:
        11px;

    line-height:
        1.6;

}


/* =========================================================
   ROADMAP
========================================================= */

.wt-roadmap-group {

    margin-top:
        18px;

}


.wt-roadmap-group-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        12px;

}


.wt-roadmap-group-label {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--wt-index-green);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;

}


.wt-roadmap-group-label.coming {

    color:
        var(--wt-index-orange);

}


.wt-roadmap-group-heading h3 {

    margin:
        0;

    color:
        #e6ecef;

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

}


.wt-roadmap-count {

    flex-shrink:
        0;

    padding:
        7px 10px;

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        900;

}


.wt-roadmap-count.available {

    background:
        rgba(104,201,154,.10);

    border:
        1px solid
        rgba(104,201,154,.24);

    color:
        var(--wt-index-green);

}


.wt-roadmap-count.coming {

    background:
        rgba(233,167,94,.10);

    border:
        1px solid
        rgba(233,167,94,.24);

    color:
        var(--wt-index-orange);

}


/* LEVEL GRID */

.wt-level-card-grid {

    display:
        grid;

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

    gap:
        11px;

}


.wt-level-card {

    position:
        relative;

    min-height:
        218px;

    padding:
        16px;

    border:
        1px solid
        var(--wt-index-border-soft);

    border-radius:
        13px;

    background:
        #1c2126;

}


.wt-level-card.available {

    cursor:
        pointer;

    transition:
        transform .17s ease,
        border-color .17s ease,
        background .17s ease;

}


.wt-level-card.available:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--wt-index-gold);

    background:
        #23292e;

}


.wt-level-card.coming {

    opacity:
        .79;

    background:
        linear-gradient(
            145deg,
            #20252a,
            #1a1f23
        );

}


.wt-level-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    margin-bottom:
        13px;

}


.wt-level-number {

    color:
        var(--wt-index-cyan);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .08em;

}


.wt-level-status {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 7px;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        900;

}


.wt-level-status.available {

    color:
        var(--wt-index-green);

    background:
        rgba(104,201,154,.09);

    border:
        1px solid
        rgba(104,201,154,.22);

}


.wt-level-status.coming {

    color:
        var(--wt-index-orange);

    background:
        rgba(233,167,94,.09);

    border:
        1px solid
        rgba(233,167,94,.22);

}


.wt-level-card h3 {

    margin:
        0 0 8px;

    color:
        #ebeff1;

    font-size:
        15px;

    line-height:
        1.35;

}


.wt-level-card p {

    min-height:
        65px;

    margin:
        0;

    color:
        var(--wt-index-muted);

    font-size:
        11px;

    line-height:
        1.58;

}


.wt-level-card-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        15px;

    padding-top:
        10px;

    border-top:
        1px solid
        var(--wt-index-border-soft);

    color:
        #78848d;

    font-size:
        9px;

}


.wt-level-card-bottom strong {

    color:
        var(--wt-index-gold);

    font-size:
        10px;

}


/* =========================================================
   LEARNING METHOD
========================================================= */

.wt-learning-method-grid {

    display:
        grid;

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

    gap:
        10px;

}


.wt-learning-method-grid article {

    padding:
        17px;

    border:
        1px solid
        var(--wt-index-border-soft);

    border-radius:
        11px;

    background:
        #1c2126;

}


.wt-learning-method-grid article > span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        33px;

    height:
        33px;

    margin-bottom:
        10px;

    border-radius:
        8px;

    background:
        #111519;

    color:
        var(--wt-index-gold);

    font-size:
        10px;

    font-weight:
        900;

}


.wt-learning-method-grid h3 {

    margin:
        0 0 6px;

    color:
        #e8edf0;

    font-size:
        14px;

}


.wt-learning-method-grid p {

    margin:
        0;

    color:
        var(--wt-index-muted);

    font-size:
        10px;

    line-height:
        1.55;

}


/* =========================================================
   START CARD
========================================================= */

.wt-index-start-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        24px;

    padding:
        22px 24px;

    border:
        1px solid
        rgba(240,200,90,.30);

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(240,200,90,.08),
            rgba(99,210,218,.04)
        );

}


.wt-index-start-card h2 {

    margin:
        0 0 6px;

    color:
        #f0f3f4;

    font-family:
        Georgia,
        serif;

    font-size:
        23px;

}


.wt-index-start-card p {

    max-width:
        700px;

    margin:
        0;

    color:
        var(--wt-index-muted);

    font-size:
        12px;

    line-height:
        1.6;

}


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

.wt-course-footer {

    margin-top:
        30px;

    border-top:
        2px solid
        #3d464d;

    background:
        #15191d;

}


.wt-footer-container {

    width: min(
        1400px,
        calc(100% - 28px)
    );

    margin:
        0 auto;

    padding:
        35px 0 28px;

    display:
        grid;

    grid-template-columns:
        1.6fr 1fr 1fr 1.1fr;

    gap:
        32px;

}


.wt-footer-brand {

    margin-bottom:
        8px;

}


.wt-footer-code {

    color:
        #dce3e7;

    font-family:
        Georgia,
        serif;

    font-size:
        29px;

    font-weight:
        700;

}


.wt-footer-bhavya {

    color:
        var(--wt-index-gold);

    font-family:
        Georgia,
        serif;

    font-size:
        29px;

    font-weight:
        700;

}


.wt-footer-tagline {

    margin:
        0 0 7px;

    color:
        var(--wt-index-gold-soft);

    font-family:
        Georgia,
        serif;

    font-size:
        13px;

}


.wt-footer-description {

    max-width:
        310px;

    margin:
        0;

    color:
        var(--wt-index-muted);

    font-size:
        11px;

    line-height:
        1.6;

}


.wt-footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.wt-footer-column h3 {

    margin:
        0 0 5px;

    color:
        #e4eaed;

    font-size:
        13px;

}


.wt-footer-column a {

    color:
        var(--wt-index-muted);

    font-size:
        11px;

}


.wt-footer-column a:hover {

    color:
        var(--wt-index-gold);

}


.wt-footer-bottom {

    width: min(
        1400px,
        calc(100% - 28px)
    );

    margin:
        0 auto;

    padding:
        13px 0 18px;

    border-top:
        1px solid
        var(--wt-index-border-soft);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.wt-footer-bottom p {

    margin:
        0;

    color:
        #6f7b83;

    font-size:
        10px;

}


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

@media (max-width: 1250px) {

    .wt-course-main-nav a {

        padding:
            8px 8px;

        font-size:
            11px;

    }


    .wt-index-layout {

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

    }


    .wt-level-card-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));

    }

}


@media (max-width: 1050px) {

    .wt-course-main-nav {

        display: none;

    }


    .wt-mobile-menu-btn {

        display: block;

    }


    .wt-mobile-nav[hidden] {

        display: none;

    }


    .wt-mobile-nav:not([hidden]) {

        display: block;

    }


    .wt-index-layout {

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

    }


    .wt-index-hero-grid {

        grid-template-columns:
            1fr;

    }


    .wt-index-feature-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));

    }


    .wt-learning-method-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));

    }

}


@media (max-width: 760px) {

    .wt-index-layout {

        display: block;

        width:
            min(
                100% - 18px,
                720px
            );

    }


    .wt-sidebar-host {

        position:
            static;

        height:
            auto;

        max-height:
            none;

        margin-bottom:
            12px;

    }


    .wt-sidebar {

        max-height:
            400px;

    }


    .wt-index-main {

        padding-top:
            0;

    }


    .wt-index-hero {

        padding:
            21px;

    }


    .wt-index-section {

        padding:
            19px;

    }


    .wt-level-card-grid {

        grid-template-columns:
            1fr;

    }


    .wt-index-start-card {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .wt-footer-container {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 520px) {

    .wt-course-header-inner {

        min-height:
            62px;

    }


    .wt-course-brand-name {

        font-size:
            21px;

    }


    .wt-course-brand-logo {

        width:
            40px;

        height:
            40px;

    }


    .wt-mobile-menu-btn {

        padding:
            8px 9px;

        font-size:
            11px;

    }


    .wt-index-hero h1 {

        font-size:
            2.25rem;

    }


    .wt-index-actions {

        flex-direction:
            column;

    }


    .wt-index-primary-btn,
    .wt-index-secondary-btn {

        width:
            100%;

    }


    .wt-snapshot-grid {

        grid-template-columns:
            1fr;

    }


    .wt-index-feature-grid,
    .wt-learning-method-grid {

        grid-template-columns:
            1fr;

    }


    .wt-roadmap-group-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .wt-footer-container {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .wt-footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}