/* ═══════════════════════════════════════════════
   match-analysis-ad.css — Styles for /match-analysis-ad
   frontendneeded.com

   Promo page for Match Analysis.
   Layout is shaped like one half of a soccer pitch.
   ═══════════════════════════════════════════════ */

/* ── Theme — Match Analysis green ── */

:root {
    --accent: #b8e636;
    --accent-rgb: 184, 230, 54;
    --bg: #0f1410;
    --pitch: #1a2c14;
    --pitch-deep: #142210;
    --line: rgba(255, 255, 255, 0.18);
    --line-strong: rgba(255, 255, 255, 0.28);
    --ink: #d0dbc4;
    --muted: rgba(208, 219, 196, 0.45);
}

/* ── Body — kill default gr-shell, full pitch ── */

body {
    background: var(--pitch-deep);
    overflow: hidden;
}

.site-nav {
    display: none;
}

/* ═══════════════════════════════════════════════
   PITCH — the half-field container
   ═══════════════════════════════════════════════ */

.pitch {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    /* subtle pitch texture — mowed stripes */
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 60px,
            transparent 60px,
            transparent 120px),
        radial-gradient(ellipse at 50% 120%, rgba(30, 70, 20, 0.5) 0%, transparent 60%),
        linear-gradient(180deg, var(--pitch-deep) 0%, var(--pitch) 40%, var(--pitch-deep) 100%);
}

/* ── Outer boundary — the touchline + goal line ── */
.pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--line-strong);
    pointer-events: none;
    z-index: 1;
}

/* ── Bottom edge — the halfway line ── */
.pitch::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--line-strong);
    z-index: 2;
}

/* ═══════════════════════════════════════════════
   FIELD LINES — drawn with positioned elements
   ═══════════════════════════════════════════════ */

/* ── 18-yard box (penalty area) ── */
.line-18 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: 52%;
    border: 2px solid var(--line);
    border-top: none;
    z-index: 1;
    pointer-events: none;
}

/* ── 6-yard box (goal area) ── */
.line-6 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28%;
    height: 18%;
    border: 2px solid var(--line);
    border-top: none;
    z-index: 1;
    pointer-events: none;
}

/* ── Goal (centered at very top) ── */
.line-goal {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14%;
    height: 0;
    border-bottom: 3px solid rgba(255, 255, 255, 0.35);
    z-index: 2;
    pointer-events: none;
}

/* ── Penalty spot ── */
.line-pen-spot {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
    z-index: 1;
    pointer-events: none;
}

/* ── Penalty arc (the D) — sits just outside the 18-yard box ── */
.line-pen-arc {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    border: 2px solid var(--line);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    border-top: none;
    z-index: 1;
    pointer-events: none;
}

/* ── Corner arcs ── */
.corner-arc {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid var(--line);
    z-index: 1;
    pointer-events: none;
}

.corner-arc--tl {
    top: -12px;
    left: -12px;
    border-radius: 0 0 50% 0;
    border-top: none;
    border-left: none;
}

.corner-arc--tr {
    top: -12px;
    right: -12px;
    border-radius: 0 0 0 50%;
    border-top: none;
    border-right: none;
}

/* ── Center circle (half visible at bottom) ── */
.line-center-circle {
    position: absolute;
    bottom: -140px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    border: 2px solid var(--line);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* ── Center spot (on the halfway line) ── */
.line-center-spot {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
    z-index: 3;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════
   FIELD NAV — links placed on the pitch

   Three nav items sit in the top region of the field:
     FEN        — inside the 6-yard box, pushed near the goal line
     Projects   — left channel between the 6-yard & 18-yard edges
     Hire Me    — right channel (mirror of Projects)
   ═══════════════════════════════════════════════ */

/* Shared nav-link style */
.field-nav {
    position: absolute;
    z-index: 10;
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.field-nav a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.25s;
}

.field-nav a:hover {
    color: var(--accent);
}

/* ── FEN — inside the 6-yard box, near the goal line ──
   6-yard box: 28% wide, 18% tall, centered.
   Pushed to top: uses the full box width but only the
   top portion of its height so the link sits high. */
.field-nav--fen {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28%;
    height: 18%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2.5%;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

/* ── Projects — left channel between 6-yard & 18-yard box edges ──
   18-yard left edge ≈ 19%, 6-yard left edge ≈ 36%
   Horizontal center: 27.5%
   Pushed near the goal line: top 3.5% */
.field-nav--projects {
    top: 3.5%;
    left: 27.5%;
    transform: translate(-50%, 0);
    font-size: 0.65rem;
}

/* ── Hire Me — right channel, mirror of Projects ──
   18-yard right edge ≈ 81%, 6-yard right edge ≈ 64%
   Horizontal center: 72.5% */
.field-nav--hire {
    top: 3.5%;
    left: 72.5%;
    transform: translate(-50%, 0);
    font-size: 0.65rem;
}

/* ═══════════════════════════════════════════════
   18-YARD BOX — Hero title area
   ═══════════════════════════════════════════════ */

.hero {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    text-align: center;
    padding: 20px;
}

.hero-title {
    font-family: 'Saira', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.03em;
    text-shadow:
        0 0 40px rgba(184, 230, 54, 0.12),
        0 0 80px rgba(184, 230, 54, 0.06);
    margin-bottom: 12px;
    opacity: 0;
    animation: fadeUp 0.7s 0.2s ease-out forwards;
}

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

.hero-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.72rem, 1vw, 0.85rem);
    font-weight: 300;
    color: var(--muted);
    max-width: 38ch;
    line-height: 1.5;
    opacity: 0;
    animation: fadeUp 0.7s 0.4s ease-out forwards;
}

/* ═══════════════════════════════════════════════
   MAIN CONTENT — left & right of center, below 18-yard box
   ═══════════════════════════════════════════════ */

.content-wings {
    position: absolute;
    bottom: 160px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 6%;
    z-index: 5;
    gap: 30%;
}

.wing {
    flex: 1;
    max-width: 280px;
    opacity: 0;
}

.wing--left {
    animation: fadeLeft 0.6s 0.7s ease-out forwards;
}

.wing--right {
    animation: fadeRight 0.6s 0.7s ease-out forwards;
}

.wing-label {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.wing-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(208, 219, 196, 0.7);
    font-weight: 300;
}

/* ═══════════════════════════════════════════════
   CENTER CIRCLE — bottom content zone
   ═══════════════════════════════════════════════ */

.center-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    text-align: center;
    padding: 10px 30px 20px;
    opacity: 0;
    animation: fadeUpCenter 0.6s 0.9s ease-out forwards;
}

.center-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Saira', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pitch-deep);
    background: var(--accent);
    padding: 10px 28px;
    border-radius: 2px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 0 20px rgba(184, 230, 54, 0.2);
}

.center-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 30px rgba(184, 230, 54, 0.35);
}

.center-cta svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.center-hint {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════
   FEATURE MARKERS — small pills along the pitch
   ═══════════════════════════════════════════════ */

.feature-marker {
    position: absolute;
    z-index: 4;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(208, 219, 196, 0.35);
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

.feature-marker::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(184, 230, 54, 0.3);
    margin-right: 6px;
    vertical-align: middle;
}

.fm-1 {
    top: 58%;
    left: 8%;
    animation-delay: 1.0s;
}

.fm-2 {
    top: 66%;
    left: 12%;
    animation-delay: 1.1s;
}

.fm-3 {
    top: 58%;
    right: 8%;
    animation-delay: 1.2s;
}

.fm-4 {
    top: 66%;
    right: 12%;
    animation-delay: 1.3s;
}


/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeUpCenter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — mobile (tablet-ish)
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    body {
        height: auto;
        overflow: auto;
    }

    .pitch {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 180px;
    }

    .line-18 {
        width: 80%;
        height: 45%;
    }

    .line-6 {
        width: 44%;
        height: 14%;
    }

    .line-goal {
        width: 22%;
    }

    .line-pen-arc {
        width: 140px;
        height: 70px;
        top: 45%;
    }

    .line-pen-spot {
        top: 32%;
    }

    .field-nav--fen {
        width: 44%;
        height: 14%;
        font-size: 0.7rem;
        padding-top: 1.5%;
    }

    .field-nav--projects {
        left: 22%;
        top: 2.5%;
        font-size: 0.55rem;
    }

    .field-nav--hire {
        left: 78%;
        top: 2.5%;
        font-size: 0.55rem;
    }

    .hero {
        top: 14%;
        width: 80%;
        height: 31%;
    }

    .content-wings {
        position: relative;
        bottom: auto;
        flex-direction: column;
        gap: 24px;
        padding: 0 24px;
        margin-top: calc(45% + 60px);
        align-items: center;
    }

    .wing {
        max-width: 100%;
        text-align: center;
    }

    .feature-marker {
        display: none;
    }

    .center-content {
        position: relative;
        bottom: auto;
        margin-top: 40px;
        width: 100%;
        height: auto;
        padding: 20px;
    }

    .line-center-circle {
        bottom: -160px;
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 480px) {

    .field-nav--projects,
    .field-nav--hire {
        font-size: 0.48rem;
    }

    .hero-title {
        font-size: clamp(1.8rem, 10vw, 2.6rem);
    }
}

@media (min-width: 769px) and (max-height: 600px) {
    .hero {
        top: 16%;
        height: 30%;
    }

    .hero-title {
        font-size: clamp(1.6rem, 4vw, 2.8rem);
    }

    .content-wings {
        bottom: 140px;
    }

    .line-pen-arc {
        width: 160px;
        height: 80px;
    }
}


/* ═══════════════════════════════════════════════
   FULL-FIELD MODE — narrow portrait screens
   
   On phone-shaped viewports, the half-field layout
   wastes the vertical real estate. This query
   transforms the pitch into a full field (goal to
   goal), which naturally fits a portrait aspect ratio.
   
   The top-half field markings compress into the 
   upper 50%, and mirrored bottom-half markings are
   drawn using ::after pseudo-elements on the existing
   line divs. Content repositions: hero sits at the
   center circle, wings drop into the bottom half,
   and the CTA anchors near the bottom goal.
   ═══════════════════════════════════════════════ */

@media (max-width: 700px) and (min-aspect-ratio: 1/2) {

    /* ── Lock the viewport so it doesn't scroll ── */
    body {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .pitch {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding-bottom: 0;
        overflow: hidden;

        /* full-field texture: lighten center, darken both ends */
        background:
            repeating-linear-gradient(90deg,
                rgba(255, 255, 255, 0.012) 0px,
                rgba(255, 255, 255, 0.012) 40px,
                transparent 40px,
                transparent 80px),
            radial-gradient(ellipse at 50% 50%, rgba(30, 70, 20, 0.35) 0%, transparent 50%),
            linear-gradient(180deg,
                var(--pitch-deep) 0%,
                var(--pitch) 20%,
                var(--pitch) 80%,
                var(--pitch-deep) 100%);
    }


    /* ── Halfway line moves to center ── */

    .pitch::after {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }


    /* ═══════════════════════════════════════════
       TOP-HALF FIELD LINES — compressed to 0–50%
       ═══════════════════════════════════════════ */

    .line-18 {
        width: 72%;
        height: 26%;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: none;
    }

    .line-6 {
        width: 36%;
        height: 9%;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: none;
    }

    .line-goal {
        width: 18%;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: none;
    }

    .line-pen-spot {
        top: calc(19% - 3px);
        left: calc(50% - 3px);
        transform: none;
    }

    .line-pen-arc {
        top: 26%;
        width: 120px;
        height: 60px;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: none;
    }

    .corner-arc {
        width: 18px;
        height: 18px;
    }

    .corner-arc--tl {
        top: -9px;
        left: -9px;
    }

    .corner-arc--tr {
        top: -9px;
        right: -9px;
    }


    /* ═══════════════════════════════════════════
       BOTTOM-HALF FIELD LINES — mirrored via
       ::after pseudo-elements
       
       Each top-half line element generates a
       mirrored counterpart anchored to the bottom
       of the pitch via position:fixed.
       
       IMPORTANT: The parent line elements must NOT
       have transform set — a CSS transform on a
       parent makes position:fixed on its children
       behave like position:absolute (relative to
       that parent). That's why the top-half lines
       above use left:0/right:0/margin:auto instead
       of the default left:50%/translateX(-50%).
       ═══════════════════════════════════════════ */

    /* ── Bottom 18-yard box ── */
    .line-18::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 72vw;
        height: 26vh;
        height: 26dvh;
        border: 2px solid var(--line);
        border-bottom: none;
        pointer-events: none;
        z-index: 1;
    }

    /* ── Bottom 6-yard box ── */
    .line-6::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 36vw;
        height: 9vh;
        height: 9dvh;
        border: 2px solid var(--line);
        border-bottom: none;
        pointer-events: none;
        z-index: 1;
    }

    /* ── Bottom goal line ── */
    .line-goal::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 18vw;
        height: 0;
        border-top: 3px solid rgba(255, 255, 255, 0.35);
        pointer-events: none;
        z-index: 2;
    }

    /* ── Bottom penalty spot ── */
    .line-pen-spot::after {
        content: '';
        position: fixed;
        bottom: 19vh;
        bottom: 19dvh;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--line-strong);
        pointer-events: none;
        z-index: 1;
    }

    /* ── Bottom penalty arc (inverted D) ── */
    .line-pen-arc::after {
        content: '';
        position: fixed;
        bottom: 26vh;
        bottom: 26dvh;
        left: 50%;
        transform: translateX(-50%) scaleY(-1);
        width: 120px;
        height: 60px;
        border: 2px solid var(--line);
        border-radius: 0 0 50% 50% / 0 0 100% 100%;
        border-top: none;
        pointer-events: none;
        z-index: 1;
    }

    /* ── Bottom corner arcs ── */
    .corner-arc--tl::after {
        content: '';
        position: fixed;
        bottom: -9px;
        left: -9px;
        width: 18px;
        height: 18px;
        border: 2px solid var(--line);
        border-radius: 0 50% 0 0;
        border-bottom: none;
        border-left: none;
        pointer-events: none;
        z-index: 1;
    }

    .corner-arc--tr::after {
        content: '';
        position: fixed;
        bottom: -9px;
        right: -9px;
        width: 18px;
        height: 18px;
        border: 2px solid var(--line);
        border-radius: 50% 0 0 0;
        border-bottom: none;
        border-right: none;
        pointer-events: none;
        z-index: 1;
    }


    /* ═══════════════════════════════════════════
       CENTER CIRCLE — fully visible at midfield
       ═══════════════════════════════════════════ */

    .line-center-circle {
        bottom: auto;
        top: calc(50% - 80px);
        left: calc(50% - 80px);
        transform: none;
        width: 160px;
        height: 160px;
    }

    .line-center-spot {
        bottom: auto;
        top: calc(50% - 3px);
        left: calc(50% - 3px);
        transform: none;
    }


    /* ═══════════════════════════════════════════
       NAV — compressed into top goal area
       ═══════════════════════════════════════════ */

    .field-nav--fen {
        width: 36%;
        height: 9%;
        font-size: 0.6rem;
        padding-top: 1%;
    }

    .field-nav--projects {
        top: 1.5%;
        left: 24%;
        font-size: 0.44rem;
    }

    .field-nav--hire {
        top: 1.5%;
        left: 76%;
        font-size: 0.44rem;
    }


    /* ═══════════════════════════════════════════
       HERO — moves to center circle area
       
       On the half-field, the hero sits inside the
       18-yard box (top third). On the full field,
       it moves to the center of the pitch — right
       over the center circle — which is where a
       kickoff happens and feels like the natural
       focal point of a full field.
       ═══════════════════════════════════════════ */

    .hero {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        height: auto;
        padding: 10px;
    }

    .hero-title {
        font-size: clamp(2rem, 12vw, 3rem);
        margin-bottom: 6px;
    }

    .hero-sub {
        font-size: 0.72rem;
    }


    /* ═══════════════════════════════════════════
       FEATURE MARKERS — repositioned to both halves
       
       Two markers in each half, placed in the
       channels between the touchline and the
       18-yard box edges.
       ═══════════════════════════════════════════ */

    .feature-marker {
        display: block;
        font-size: 0.46rem;
    }

    /* Top half — left and right of the 18-yard box */
    .fm-1 {
        top: 16%;
        left: 5%;
    }

    .fm-2 {
        top: 22%;
        left: 5%;
    }

    .fm-3 {
        top: 16%;
        right: 5%;
        left: auto;
    }

    .fm-4 {
        top: 22%;
        right: 5%;
        left: auto;
    }


    /* ═══════════════════════════════════════════
       CONTENT WINGS — stacked in the bottom half
       
       The two wing blocks (The Pitch / The Report)
       stack vertically and sit between the bottom
       18-yard box and the center circle, giving
       them room in the lower half of the full field.
       ═══════════════════════════════════════════ */

    .content-wings {
        position: absolute;
        bottom: auto;
        top: 62%;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        gap: 16px;
        padding: 0 16px;
        margin-top: 0;
        align-items: flex-start;
    }

    .wing {
        max-width: 45%;
        text-align: center;
    }

    .wing-label {
        font-size: 0.48rem;
        margin-bottom: 4px;
    }

    .wing-text {
        font-size: 0.62rem;
        line-height: 1.5;
    }

    /* Reset the wing animations to fade-up instead
       of left/right, which works better vertically */
    .wing--left,
    .wing--right {
        animation: fadeUp 0.6s 0.7s ease-out forwards;
    }


    /* ═══════════════════════════════════════════
       CTA — anchored near the bottom goal
       
       Mirrors the hero's relationship to the top
       goal: the CTA sits just inside the bottom
       18-yard box, near the bottom goal line.
       ═══════════════════════════════════════════ */

    .center-content {
        position: absolute;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: auto;
        padding: 8px 16px;
        margin-top: 0;
    }

    .center-cta {
        font-size: 0.68rem;
        padding: 8px 20px;
        gap: 6px;
    }

    .center-cta svg {
        width: 12px;
        height: 12px;
    }

    .center-hint {
        font-size: 0.48rem;
        margin-top: 6px;
    }
}