/* ============================================================
   SHE BLOSSOMS '26
   MY CARD PAGE
   BLUE + PINK THEME
============================================================ */


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

.card-page {

    --card-navy: #120910;

    --card-blue: #771C51;

    --card-blue-light: #FF3399;

    --card-pink: #FF3399;

    --card-pink-light: #FFD1E6;

    --card-white: #ffffff;

    --card-background: #F8F2F6;

    --card-text: #1F0D18;

    --card-muted: #6E6269;

    --card-border:
        rgba(18, 9, 16, 0.12);

}


/* ============================================================
   BODY
============================================================ */

body.card-page {

    margin: 0;

    background:

        radial-gradient(circle at 0% 10%,
            rgba(255, 51, 153, 0.10),
            transparent 28%),

        radial-gradient(circle at 100% 30%,
            rgba(119, 28, 81, 0.11),
            transparent 30%),

        var(--card-background);

    color: var(--card-text);

    font-family:
        "DM Sans",
        sans-serif;

    overflow-x: hidden;

}


/* ============================================================
   CONTAINER
============================================================ */

.card-container {

    width:
        min(1180px,
            calc(100% - 40px));

    margin:
        0 auto;

}


/* ============================================================
   NAVIGATION OVERRIDES
   Keeps the same website navigation but makes this page
   active without creating a completely different navbar.
============================================================ */

.card-page .card-active-link .nav-text {

    color:
        var(--card-pink);

}


.card-page .nav_button {

    color:
        var(--card-navy);

}


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

.card-hero {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at 90% 15%,
            rgba(255, 51, 153, 0.34),
            transparent 30%),

        radial-gradient(circle at 10% 90%,
            rgba(119, 28, 81, 0.32),
            transparent 34%),

        linear-gradient(135deg,
            #120910 0%,
            #771C51 58%,
            #FF3399 100%);

    color:
        var(--card-white);

}


.card-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,
            rgba(18, 9, 16, 0.25),
            transparent 50%,
            rgba(255, 51, 153, 0.10));

    pointer-events: none;

}


.card-hero-content {

    position: relative;

    z-index: 2;

    padding:
        clamp(75px, 9vw, 125px) 0 clamp(70px, 8vw, 110px);

}


.card-eyebrow {

    margin:
        0 0 18px;

    color:
        var(--card-pink-light);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        3.5px;

    text-transform:
        uppercase;

}


.card-hero h1 {

    max-width:
        850px;

    margin:
        0;

    color:
        var(--card-white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(48px,
            7vw,
            86px);

    font-weight:
        600;

    line-height:
        1.02;

    letter-spacing:
        -2px;

}


.card-hero-text {

    max-width:
        540px;

    margin:
        28px 0 0;

    color:
        rgba(255, 255, 255, 0.76);

    font-size:
        18px;

    line-height:
        1.65;

}


/* ============================================================
   CARD MAKER
============================================================ */

.card-maker-section {

    padding:
        clamp(70px, 9vw, 110px) 0;

}


.card-maker-grid {

    display:
        grid;

    grid-template-columns:
        minmax(280px, 0.72fr) minmax(500px, 1.28fr);

    gap:
        clamp(50px, 8vw, 100px);

    align-items:
        start;

}


/* ============================================================
   SECTION HEADING
============================================================ */

.card-section-heading {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        16px;

    margin:
        0 0 42px;

}


.card-section-heading>span {

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--card-pink);

    border-radius:
        50%;

    color:
        var(--card-pink);

    font-size:
        12px;

    font-weight:
        700;

}


.card-section-heading p {

    margin:
        0 7px;

    color:
        var(--card-blue);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

}


.card-section-heading h2 {

    margin:
        0;

    color:
        var(--card-navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        38px;

    font-weight:
        600;

    line-height:
        1.1;

}


.card-section-heading.centered {

    justify-content:
        center;

}


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

.card-field {

    margin:
        0 0 28px;

}


.card-field>label:first-child {

    display:
        block;

    margin:
        0 0 9px;

    color:
        var(--card-navy);

    font-size:
        14px;

    font-weight:
        700;

}


.card-field input[type="text"] {

    width:
        100%;

    height:
        54px;

    padding:
        0 16px;

    border:
        1px solid rgba(18, 9, 16, 0.14);

    border-radius:
        7px;

    outline:
        none;

    background:
        var(--card-white);

    color:
        var(--card-navy);

    font-size:
        15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.card-field input[type="text"]:focus {

    border-color:
        var(--card-blue-light);

    box-shadow:
        0 0 0 4px rgba(119, 28, 81, 0.10);

}


.card-field input[type="text"]::placeholder {

    color:
        #98a2b3;

}


.card-field small {

    display:
        block;

    margin:
        8px 0 0;

    color:
        var(--card-muted);

    font-size:
        12px;

    line-height:
        1.5;

}


/* ============================================================
   PHOTO UPLOAD
============================================================ */

.photo-upload {

    min-height:
        120px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border:
        1.5px dashed rgba(119, 28, 81, 0.32);

    border-radius:
        9px;

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

    cursor:
        pointer;

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

}


.photo-upload:hover {

    border-color:
        var(--card-pink);

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

    transform:
        translateY(-1px);

}


.upload-plus {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 0 4px;

    border-radius:
        50%;

    background:
        rgba(255, 51, 153, 0.12);

    color:
        var(--card-pink);

    font-size:
        22px;

}


.photo-upload strong {

    color:
        var(--card-navy);

    font-size:
        14px;

}


.photo-upload small {

    margin:
        0;

    color:
        var(--card-muted);

    font-size:
        12px;

}


/* ============================================================
   PHOTO ADJUSTMENT
============================================================ */

.photo-adjustment {

    margin:
        35px 0;

    padding:
        20px;

    border:
        1px solid rgba(18, 9, 16, 0.08);

    border-radius:
        9px;

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

}


.adjustment-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin:
        0 0 14px;

}


.adjustment-top label {

    color:
        var(--card-navy);

    font-size:
        13px;

    font-weight:
        700;

}


.adjustment-top span {

    color:
        var(--card-pink);

    font-size:
        13px;

    font-weight:
        700;

}


.photo-adjustment input[type="range"] {

    width:
        100%;

    accent-color:
        var(--card-pink);

    cursor:
        pointer;

}


.photo-adjustment p {

    margin:
        10px 0 0;

    color:
        var(--card-muted);

    font-size:
        12px;

    line-height:
        1.5;

}


/* ============================================================
   ACTIONS
============================================================ */

.card-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.card-primary-button,
.card-secondary-button {

    width:
        100%;

    min-height:
        52px;

    border-radius:
        5px;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.card-primary-button {

    border:
        1px solid var(--card-pink);

    background:
        var(--card-pink);

    color:
        var(--card-white);

}


.card-primary-button:hover {

    background:
        #d93686;

    transform:
        translateY(-1px);

}


.card-secondary-button {

    border:
        1px solid var(--card-blue);

    background:
        transparent;

    color:
        var(--card-blue);

}


.card-secondary-button:hover {

    background:
        var(--card-blue);

    color:
        var(--card-white);

}


.card-reset-button {

    padding:
        10px;

    border:
        0;

    background:
        transparent;

    color:
        var(--card-muted);

    font-size:
        12px;

    cursor:
        pointer;

}


.card-reset-button:hover {

    color:
        var(--card-pink);

}


.card-message {

    min-height:
        20px;

    margin:
        15px 0 0;

    color:
        var(--card-blue);

    font-size:
        12px;

    line-height:
        1.5;

    text-align:
        center;

}


/* ============================================================
   PREVIEW
============================================================ */

.card-preview-area {

    min-width:
        0;

}


.preview-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        0 0 22px;

}


.preview-heading p {

    margin:
        0 7px;

    color:
        var(--card-blue);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

}


.preview-heading h2 {

    margin:
        0;

    color:
        var(--card-navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        31px;

    font-weight:
        600;

}


.preview-heading>span {

    color:
        var(--card-muted);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    white-space:
        nowrap;

}


/* ============================================================
   CANVAS
============================================================ */

.canvas-container {

    position:
        relative;

    width:
        100%;

    max-width:
        680px;

    margin:
        0 0 0 auto;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        #dce4f0;

    box-shadow:
        0 30px 70px rgba(18, 9, 16, 0.16);

    touch-action:
        none;

    user-select:
        none;

}


.canvas-container canvas {

    display:
        block;

    width:
        100%;

    height:
        auto;

    cursor:
        grab;

    touch-action:
        none;

}


.canvas-container canvas.dragging {

    cursor:
        grabbing;

}


.canvas-hint {

    position:
        absolute;

    left:
        50%;

    bottom:
        18px;

    transform:
        translateX(-50%);

    padding:
        9px 15px;

    border-radius:
        20px;

    background:
        rgba(18, 9, 16, 0.78);

    color:
        var(--card-white);

    font-size:
        11px;

    white-space:
        nowrap;

    pointer-events:
        none;

    transition:
        opacity .2s ease;

}


.canvas-hint.hidden {

    opacity:
        0;

}


/* ============================================================
   CONFERENCE
============================================================ */

.card-conference {

    padding:
        100px 0;

    background:

        radial-gradient(circle at 100% 0%,
            rgba(255, 51, 153, 0.25),
            transparent 30%),

        linear-gradient(135deg,
            var(--card-navy),
            var(--card-blue));

    color:
        var(--card-white);

}


.conference-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        90px;

}


.card-conference .card-eyebrow {

    color:
        var(--card-pink-light);

}


.card-conference h2 {

    margin:
        0;

    color:
        var(--card-white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(45px,
            5vw,
            68px);

    font-weight:
        600;

    line-height:
        1.02;

}


.conference-details {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.conference-detail {

    padding:
        25px 0;

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

}


.conference-detail:first-child {

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

}


.conference-detail span {

    display:
        block;

    margin:
        0 0 8px;

    color:
        var(--card-pink-light);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.conference-detail strong {

    display:
        block;

    color:
        rgba(255, 255, 255, 0.90);

    font-size:
        16px;

    font-weight:
        500;

    line-height:
        1.5;

}


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

.card-how {

    padding:
        100px 0;

}


.card-steps {

    display:
        grid;

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

    gap:
        25px;

}


.card-step {

    padding:
        30px;

    border:
        1px solid rgba(18, 9, 16, 0.10);

    border-radius:
        8px;

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

}


.card-step>span {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 0 22px;

    border-radius:
        50%;

    background:
        rgba(255, 51, 153, 0.12);

    color:
        var(--card-pink);

    font-size:
        11px;

    font-weight:
        700;

}


.card-step h3 {

    margin:
        0 0 9px;

    color:
        var(--card-navy);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        24px;

    font-weight:
        600;

}


.card-step p {

    margin:
        0;

    color:
        var(--card-muted);

    font-size:
        14px;

    line-height:
        1.6;

}


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

.card-footer {

    padding:
        55px 0 25px;

    background:
        var(--card-navy);

    color:
        var(--card-white);

}


.card-footer-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        50px;

}


.card-footer-logo {

    width:
        120px;

    height:
        auto;

    margin:
        0 0 15px;

}


.card-footer-top p {

    max-width:
        300px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.52);

    font-size:
        13px;

    line-height:
        1.5;

}


.card-footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        25px;

}


.card-footer-links a {

    color:
        rgba(255, 255, 255, 0.70);

    text-decoration:
        none;

    font-size:
        13px;

}


.card-footer-links a:hover {

    color:
        var(--card-pink-light);

}


.card-footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        45px 0 0;

    padding:
        20px 0 0;

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

}


.card-footer-bottom p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.35);

    font-size:
        11px;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    .card-maker-grid {

        grid-template-columns:
            1fr;

    }


    .card-controls {

        max-width:
            650px;

    }


    .canvas-container {

        margin:
            0;

    }

}


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

@media (max-width: 760px) {

    .card-container {

        width:
            calc(100% - 32px);

    }


    .card-hero-content {

        padding:
            75px 0;

    }


    .card-hero h1 {

        font-size:
            49px;

        letter-spacing:
            -1px;

    }


    .card-hero-text {

        font-size:
            16px;

    }


    .card-maker-section,
    .card-conference,
    .card-how {

        padding:
            70px 0;

    }


    .preview-heading {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .preview-heading>span {

        font-size:
            9px;

    }


    .conference-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .card-steps {

        grid-template-columns:
            1fr;

    }


    .card-footer-top {

        flex-direction:
            column;

    }


    .card-footer-bottom {

        flex-direction:
            column;

    }

}


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

@media (max-width: 480px) {

    .card-section-heading h2 {

        font-size:
            31px;

    }


    .card-hero h1 {

        font-size:
            43px;

    }


    .card-conference h2 {

        font-size:
            43px;

    }


    .canvas-container {

        border-radius:
            8px;

    }

}

/* ============================================================
   EVOLVE SITE CHROME — shared with the main Evolve page
============================================================ */
.card-page {
    --bg: #FFFFFF;
    --surface: #F8F2F6;
    --night: #120910;
    --plum: #771C51;
    --plum-deep: #5E1540;
    --rose: #FF3399;
    --magenta: #FF00FF;
    --red: #F22732;
    --ink: #1F0D18;
    --line: rgba(31, 13, 24, 0.12);
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --max: 75rem;
    --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

.card-page,
.card-page * {
    font-family: var(--font);
}

.card-page {
    background: var(--bg);
    color: var(--ink);
}

.card-page .wrap,
.card-page .card-container {
    width: min(var(--max), calc(100% - 40px));
    margin-inline: auto;
}

.card-page .header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 10;
    padding-top: env(safe-area-inset-top, 0px);
    color: #fff;
}

.card-page .header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.25rem;
}

.card-page .header__logo img {
    width: 104px;
    height: auto;
}

.card-page .nav {
    display: none;
    align-items: center;
    gap: 2rem;
}

.card-page .nav a:not(.btn) {
    text-decoration: none;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .78);
}

.card-page .nav a:not(.btn):hover {
    color: #fff;
}

.card-page .menu-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: inherit;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.125rem;
}

.card-page .menu-btn span,
.card-page .menu-btn span::before,
.card-page .menu-btn span::after {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    position: relative;
    content: "";
}

.card-page .menu-btn span::before {
    position: absolute;
    top: -6px;
}

.card-page .menu-btn span::after {
    position: absolute;
    top: 6px;
}

.card-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--plum);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.card-page .btn:hover {
    background: var(--plum-deep);
}

.card-page .nav .btn {
    background: #fff;
    color: var(--plum);
}

.card-page .nav .btn:hover {
    background: var(--rose);
    color: var(--night);
}

.card-page .drawer {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--bg);
    padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) var(--gutter) 2rem;
    display: flex;
    flex-direction: column;
}

.card-page .drawer[hidden] {
    display: none;
}

.card-page .drawer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-page .drawer .menu-btn {
    border-color: var(--line);
    color: var(--ink);
}

.card-page .drawer nav {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 3rem;
}

.card-page .drawer nav a:not(.btn) {
    font-size: 1.75rem;
    font-weight: 600;
    text-decoration: none;
}

.card-page .drawer .btn {
    align-self: flex-start;
    margin-top: 1rem;
}

.card-page .card-hero {
    padding-top: 0;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    background: radial-gradient(circle at 85% 15%, rgba(255, 0, 255, .22), transparent 30%), radial-gradient(circle at 10% 85%, rgba(242, 39, 50, .20), transparent 34%), linear-gradient(135deg, var(--night), var(--plum) 62%, var(--rose));
}

.card-page .card-hero::after {
    background: linear-gradient(180deg, rgba(18, 9, 16, .28), rgba(18, 9, 16, .08) 45%, rgba(18, 9, 16, .72));
}

.card-page .card-hero-content {
    padding-top: clamp(9rem, 16vw, 13rem);
    padding-bottom: clamp(5rem, 9vw, 8rem);
}

.card-page .card-eyebrow,
.card-page .card-section-heading p,
.card-page .preview-heading p {
    color: var(--rose);
}

.card-page .card-section-heading h2,
.card-page .preview-heading h2,
.card-page .card-field>label:first-child,
.card-page .photo-upload strong,
.card-page .adjustment-top label {
    color: var(--ink);
}

.card-page .card-maker-section {
    background: var(--bg);
}

.card-page .card-primary-button {
    background: var(--plum);
    border-color: var(--plum);
}

.card-page .card-primary-button:hover {
    background: var(--plum-deep);
}

.card-page .card-secondary-button {
    border-color: var(--plum);
    color: var(--plum);
}

.card-page .card-secondary-button:hover {
    background: var(--plum);
    color: #fff;
}

.card-page .photo-adjustment,
.card-page .photo-upload {
    background: var(--surface);
}

.card-page .card-page-card,
.card-page .card-preview {
    border-color: var(--line);
}

.card-page .footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--night);
    color: #fff;
    text-align: center;
    padding-block: clamp(5rem, 10vw, 8rem) 2.5rem;
}

.card-page .footer__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}

.card-page .footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(18, 9, 16, .2), rgba(18, 9, 16, .85) 75%);
}

.card-page .wordmark {
    display: inline-block;
    font-size: clamp(4.5rem, 21vw, 19rem);
    line-height: .8;
    padding-inline: .02em;
    background: radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.6px) 0 0/7px 7px, linear-gradient(90deg, #fff 0%, #FFD1E6 25%, var(--rose) 60%, var(--red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.card-page .footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.card-page .footer nav a {
    text-decoration: none;
    font-weight: 600;
    font-size: .9375rem;
}

.card-page .footer nav a:hover {
    color: var(--rose);
}

.card-page .footer__contact {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .72);
    font-size: .9375rem;
}

.card-page .footer__contact a {
    color: #fff;
}

.card-page .footer__base {
    margin-top: 3rem;
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
}

@media (min-width:960px) {
    .card-page .nav {
        display: flex;
    }

    .card-page .header .menu-btn {
        display: none;
    }
}

@media (max-width:760px) {

    .card-page .wrap,
    .card-page .card-container {
        width: calc(100% - 32px);
    }
}

@media (prefers-reduced-motion:reduce) {
    .card-page .footer__video {
        display: none;
    }
}

/* ============================================================
   FINAL MOBILE MENU OVERRIDE
   The opening hamburger lives in the header.
============================================================ */

.card-page .header .menu-btn {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin-left: auto;
    padding: 0;
    display: grid !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 50%;
    background: rgba(18,9,16,.20);
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 110;
    -webkit-appearance: none;
    appearance: none;
}

.card-page .header .menu-btn span,
.card-page .header .menu-btn span::before,
.card-page .header .menu-btn span::after {
    display: block !important;
    width: 20px;
    height: 2px;
    background: currentColor !important;
    position: relative;
    content: "";
}

.card-page .header .menu-btn span::before {
    position: absolute;
    left: 0;
    top: -7px;
}

.card-page .header .menu-btn span::after {
    position: absolute;
    left: 0;
    top: 7px;
}

.card-page .drawer {
    z-index: 1000;
}

@media (max-width: 959px) {
    .card-page .header .nav {
        display: none !important;
    }

    .card-page .header .menu-btn {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 960px) {
    .card-page .header .nav {
        display: flex !important;
    }

    .card-page .header .menu-btn {
        display: none !important;
    }
}