/* ==========================================================
   SELFORDERPILOT
   ========================================================== */

:root {

    --navy: #061d42;
    --navy-dark: #03132e;
    --blue: #0a3675;

    --green: #39b928;
    --green-dark: #2d9c20;
    --green-light: #72e262;
    --green-soft: #effbec;

    --orange: #ff9e2c;

    --text: #10213c;
    --text-soft: #667085;

    --background: #ffffff;
    --background-soft: #f6f8fb;

    --border: #e5eaf1;

    --shadow:
        0 25px 65px rgba(6, 29, 66, 0.12);

}


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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--text);

    background: #fff;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


.container {

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

    margin: 0 auto;

}


.section {
    padding: 110px 0;
}


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

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

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

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border-bottom:
        1px solid transparent;

    transition: 0.25s ease;

}


.header.scrolled {

    border-color: var(--border);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.05);

}


.nav-container {

    min-height: 88px;

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

    gap: 30px;

}


.brand {

    display: flex;
    align-items: center;

    gap: 11px;

}

.brand-logo {
    width: 190px;
    height: 68px;
    object-fit: contain;
    object-position: left center;
}


.brand-symbol {

    width: 40px;
    height: 40px;

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

    color: #fff;

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

    border-radius: 11px;

    font-size: 22px;
    font-weight: 900;

}


.brand-name {

    color: var(--navy);

    font-size: 22px;
    font-weight: 800;

    letter-spacing: -1px;

}


.brand-name span {
    color: var(--green);
}


.navigation {

    display: flex;
    align-items: center;

    gap: 30px;

}


.navigation a {

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

    transition:
        color 0.2s ease;

}


.navigation a:hover {
    color: var(--green);
}


.navigation .nav-contact {

    padding: 11px 21px;

    color: #fff;

    background: var(--navy);

    border-radius: 30px;

}


.navigation .nav-contact:hover {

    color: #fff;
    background: var(--green);

}


.menu-button {

    display: none;

    width: 44px;
    height: 44px;

    border: 0;
    background: transparent;

    cursor: pointer;

}


.menu-button span {

    display: block;

    width: 25px;
    height: 2px;

    margin: 5px auto;

    background: var(--navy);

}


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

.hero {

    position: relative;

    overflow: hidden;

    padding:
        175px 0 115px;

    background:

        radial-gradient(
            circle at 90% 30%,
            rgba(57,185,40,0.11),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #f5f9ff
        );

}


.hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 100px;

}


.eyebrow,
.section-label {

    display: inline-block;

    margin-bottom: 17px;

    color: var(--green-dark);

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

    letter-spacing: 2px;

}


.hero h1 {

    color: var(--navy);

    font-size:
        clamp(58px, 6vw, 86px);

    line-height: 0.94;

    letter-spacing: -5px;

}


.hero h1 span {
    color: var(--green);
}


.hero-text {

    max-width: 620px;

    margin-top: 30px;

    color: var(--text-soft);

    font-size: 19px;
    line-height: 1.7;

}


.hero-buttons {

    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;

}


.button {

    min-height: 54px;

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

    padding: 0 27px;

    border-radius: 12px;

    font-weight: 750;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.button:hover {
    transform: translateY(-2px);
}


.button-primary {

    color: #fff;

    background: var(--green);

    box-shadow:
        0 15px 30px rgba(57,185,40,0.22);

}


.button-primary:hover {
    background: var(--green-dark);
}


.button-secondary {

    color: var(--navy);

    background: #fff;

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

}


.hero-benefits {

    display: flex;
    flex-wrap: wrap;

    gap: 22px;

    margin-top: 33px;

    color: #59677c;

    font-size: 13px;
    font-weight: 650;

}


.hero-benefits span {

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

    width: 19px;
    height: 19px;

    margin-right: 5px;

    color: #fff;

    background: var(--green);

    border-radius: 50%;

    font-size: 11px;

}


/* KIOSK */

.hero-demo {
    position: relative;
}


.kiosk {

    position: relative;

    width: 330px;

    margin: 0 auto;

}


.kiosk-screen {

    position: relative;

    overflow: hidden;

    min-height: 510px;

    background: #fff;

    border:
        13px solid #0b1830;

    border-radius: 27px;

    box-shadow:
        0 40px 80px rgba(3,19,46,0.25);

}


.screen-header {

    height: 58px;

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

    padding: 0 18px;

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

}


.screen-logo {

    color: var(--navy);

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

}


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


.cart {
    position: relative;
}


.cart span {

    position: absolute;

    top: -8px;
    right: -10px;

    width: 16px;
    height: 16px;

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

    color: #fff;

    background: var(--green);

    border-radius: 50%;

    font-size: 9px;

}


.screen-content {
    padding: 23px;
}


.screen-welcome small {

    color: var(--green);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 1px;

}


.screen-welcome strong {

    display: block;

    margin-top: 5px;

    color: var(--navy);

    font-size: 26px;
    line-height: 1.08;

}


.product-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 23px;

}


.product {

    padding: 10px;

    background: #f8fafc;

    border: 1px solid var(--border);
    border-radius: 11px;

}


.product-picture {

    height: 62px;

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

    margin-bottom: 7px;

    background: #fff;

    border-radius: 8px;

    font-size: 30px;

}


.product span,
.product strong {
    display: block;
}


.product span {

    color: var(--navy);

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

}


.product strong {

    margin-top: 2px;

    color: var(--green-dark);

    font-size: 11px;

}


.order-button {

    margin-top: 20px;

    padding: 12px 8px;

    color: #fff;

    background: var(--green);

    border-radius: 9px;

    text-align: center;

    font-size: 10px;
    font-weight: 800;

}


.kiosk-neck {

    width: 90px;
    height: 60px;

    margin: 0 auto;

    background:
        linear-gradient(
            to right,
            #0b1830,
            #1a2c4c,
            #0b1830
        );

}


.kiosk-base {

    width: 200px;
    height: 22px;

    margin: 0 auto;

    background: #0b1830;

    border-radius: 50% 50% 10px 10px;

}


.floating-info {

    position: absolute;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px 16px;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: var(--shadow);

}


.floating-info small,
.floating-info strong {
    display: block;
}


.floating-info small {

    color: #8a94a5;

    font-size: 10px;

}


.floating-info strong {

    color: var(--navy);

    font-size: 13px;

}


.info-icon {

    width: 34px;
    height: 34px;

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

    color: #fff;

    background: var(--green);

    border-radius: 50%;

}


.info-one {

    top: 95px;
    right: -20px;

}


.info-two {

    bottom: 100px;
    left: -35px;

}


.info-two strong {
    font-size: 20px;
}


.hero-circle {

    position: absolute;

    border-radius: 50%;

}


.circle-one {

    width: 500px;
    height: 500px;

    right: -250px;
    top: 20px;

    background:
        rgba(57,185,40,0.05);

}


.circle-two {

    width: 400px;
    height: 400px;

    left: -250px;
    bottom: -180px;

    background:
        rgba(6,29,66,0.04);

}


/* ==========================================================
   INTRO
   ========================================================== */

.intro {

    padding: 105px 0;

    text-align: center;

}


.intro-inner {
    max-width: 850px;
}


.intro h2,
.section-heading h2,
.center-heading h2,
.advantages h2 {

    color: var(--navy);

    font-size:
        clamp(39px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -2.5px;

}


.intro p {

    max-width: 750px;

    margin: 25px auto 0;

    color: var(--text-soft);

    font-size: 18px;

}


/* ==========================================================
   SYSTEM
   ========================================================== */

.system-section {
    background: var(--background-soft);
}


.section-heading {

    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;

}


.section-heading > p {

    max-width: 430px;

    color: var(--text-soft);

    font-size: 16px;

}


.feature-grid {

    display: grid;

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

    gap: 22px;

}


.feature-card {

    padding: 34px;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 20px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.feature-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(57,185,40,0.35);

    box-shadow: var(--shadow);

}


.feature-icon {

    width: 64px;
    height: 64px;

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

    margin-bottom: 25px;

    color: #fff;

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

    border-radius: 17px;

    font-size: 24px;
    font-weight: 850;

    box-shadow:
        0 12px 25px rgba(57,185,40,0.18);

}


.feature-card:nth-child(even)
.feature-icon {

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

}


.feature-card h3 {

    margin-bottom: 11px;

    color: var(--navy);

    font-size: 20px;

}


.feature-card p {

    min-height: 100px;

    color: var(--text-soft);

    font-size: 14px;

}


.feature-card > span {

    display: inline-block;

    margin-top: 17px;

    color: var(--green-dark);

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

}


/* ==========================================================
   ABLAUF
   ========================================================== */

.center-heading {

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;

}


.center-heading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text-soft);

}


.process-grid {

    display: grid;

    grid-template-columns:
        1fr 55px
        1fr 55px
        1fr 55px
        1fr;

    align-items: center;

}


.process-item {

    position: relative;

    text-align: center;

}


.process-number {

    color: #dce3eb;

    font-size: 54px;
    font-weight: 900;
    line-height: 1;

}


.process-icon {

    width: 74px;
    height: 74px;

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

    margin:
        -10px auto 18px;

    color: #fff;

    background: var(--green);

    border-radius: 50%;

    box-shadow:
        0 15px 30px rgba(57,185,40,0.20);

    font-size: 22px;
    font-weight: 800;

}


.process-item h3 {

    color: var(--navy);

    font-size: 18px;

}


.process-item p {

    margin-top: 8px;

    color: var(--text-soft);

    font-size: 13px;

}


.process-line {

    height: 2px;

    margin-top: 35px;

    background:
        repeating-linear-gradient(
            to right,
            #d6dde7 0,
            #d6dde7 6px,
            transparent 6px,
            transparent 12px
        );

}


/* ==========================================================
   VORTEILE
   ========================================================== */

.advantages {

    background: var(--background-soft);

}


.advantages-grid {

    display: grid;

    grid-template-columns:
        0.9fr 1fr;

    align-items: center;

    gap: 100px;

}


.advantages-panel {

    padding: 35px;

    background:
        linear-gradient(
            145deg,
            var(--navy),
            var(--navy-dark)
        );

    border-radius: 28px;

    box-shadow:
        0 35px 75px rgba(3,19,46,0.25);

}


.mini-order {

    padding: 25px;

    background: #fff;

    border-radius: 18px;

}


.mini-header {

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

    margin-bottom: 20px;

}


.mini-header span {

    color: var(--navy);

    font-size: 16px;
    font-weight: 800;

}


.mini-header strong {

    color: var(--green-dark);

    font-size: 9px;

}


.mini-row {

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

    padding: 14px 0;

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

}


.order-number {

    color: var(--navy);

    font-size: 18px;
    font-weight: 850;

}


.order-status {

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 800;

}


.preparing {

    color: #9a6100;
    background: #fff2d8;

}


.new {

    color: #235d9b;
    background: #eaf3ff;

}


.ready {

    color: #27831d;
    background: var(--green-soft);

}


.dashboard-stats {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 20px;

}


.dashboard-stats > div {

    padding: 17px;

    background: #f7f9fc;

    border-radius: 12px;

}


.dashboard-stats small,
.dashboard-stats span {

    display: block;

    color: #8a94a5;

    font-size: 9px;

}


.dashboard-stats strong {

    display: block;

    margin: 2px 0;

    color: var(--navy);

    font-size: 27px;

}


.advantages-intro {

    max-width: 550px;

    margin-top: 23px;

    color: var(--text-soft);

}


.advantage-list {
    margin-top: 37px;
}


.advantage {

    display: flex;

    gap: 17px;

    margin-top: 23px;

}


.check {

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

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

    color: #fff;

    background: var(--green);

    border-radius: 50%;

    font-weight: 850;

}


.advantage h3 {

    color: var(--navy);

    font-size: 17px;

}


.advantage p {

    margin-top: 3px;

    color: var(--text-soft);

    font-size: 13px;

}


/* ==========================================================
   EINSATZ
   ========================================================== */

.industry-grid {

    display: grid;

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

    gap: 15px;

}


.industry-card {

    min-height: 170px;

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

    padding: 20px;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 18px;

    text-align: center;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.industry-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow);

}


.industry-icon {
    font-size: 32px;
}


.industry-card strong {

    margin-top: 12px;

    color: var(--navy);

}


.industry-card span {

    margin-top: 3px;

    color: var(--text-soft);

    font-size: 11px;

}


/* ==========================================================
   VISITPILOT
   ========================================================== */

.visitpilot {

    padding: 105px 0;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #031b42,
            #073878
        );

}


.visitpilot-grid {

    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    align-items: center;

    gap: 90px;

}


.visitpilot-label {

    color: #71e460;

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

    letter-spacing: 2px;

}


.visitpilot h2 {

    margin-top: 10px;

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

    line-height: 1;

    letter-spacing: -3px;

}


.visitpilot h2 span {
    color: var(--green);
}


.visitpilot p {

    max-width: 580px;

    margin-top: 20px;

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

}


.visitpilot-link {

    display: inline-block;

    margin-top: 30px;

    color: #75ed64;

    font-weight: 800;

}


.visitpilot-display {

    padding: 25px;

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

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

    border-radius: 25px;

}


.vp-screen {

    min-height: 270px;

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

    padding: 30px;

    background: #fff;

    border-radius: 17px;

}


.vp-screen small {

    color: var(--green);

    font-weight: 850;

}


.vp-screen strong {

    color: var(--navy);

    font-size: 75px;
    line-height: 1.1;

}


.vp-screen span {

    color: var(--text-soft);

    font-size: 13px;

}


/* ==========================================================
   KONTAKT
   ========================================================== */

.contact-box {

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

    gap: 50px;

    padding: 65px;

    color: #fff;

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

    border-radius: 28px;

    box-shadow:
        0 30px 70px rgba(57,185,40,0.20);

}


.contact-label {

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

    letter-spacing: 2px;

}


.contact-box h2 {

    margin-top: 8px;

    font-size:
        clamp(38px, 4vw, 53px);

    line-height: 1.05;

    letter-spacing: -2px;

}


.contact-box p {

    max-width: 650px;

    margin-top: 17px;

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

}


.contact-actions {

    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;

}


.button-white {

    min-width: 205px;

    color: var(--navy);

    background: #fff;

}


.contact-actions span {

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

    font-size: 11px;

}


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

.footer {

    padding-top: 70px;

    color: #fff;

    background: var(--navy-dark);

}


.footer-top {

    display: flex;
    justify-content: space-between;

    gap: 60px;

    padding-bottom: 60px;

}


.footer-brand {

    max-width: 290px;

}


.footer-logo {

    font-size: 22px;
    font-weight: 850;

}


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


.footer-brand p {

    margin-top: 18px;

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

    font-size: 13px;

}


.footer-links {

    display: flex;

    gap: 55px;

}


.footer-links > div {

    display: flex;
    flex-direction: column;

    gap: 9px;

}


.footer-links strong {

    margin-bottom: 5px;

    font-size: 13px;

}


.footer-links a {

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

    font-size: 12px;

}


.footer-links a:hover {
    color: var(--green);
}


.footer-bottom {

    min-height: 75px;

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

    gap: 30px;

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

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

    font-size: 11px;

}


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

@media (max-width: 1050px) {

    .navigation {
        gap: 20px;
    }


    .hero-grid {
        gap: 50px;
    }


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


    .advantages-grid {
        gap: 55px;
    }


    .industry-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* ==========================================================
   MOBILE NAV / TABLET
   ========================================================== */

@media (max-width: 850px) {

    .section {
        padding: 80px 0;
    }


    .navigation {

        position: absolute;

        top: 88px;
        left: 24px;
        right: 24px;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 15px;

        background: #fff;

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

        border-radius: 15px;

        box-shadow: var(--shadow);

    }


    .navigation.open {
        display: flex;
    }


    .navigation a {
        padding: 13px 15px;
    }


    .navigation .nav-contact {

        margin-top: 8px;

        text-align: center;

    }


    .menu-button {
        display: block;
    }


    .hero {
        padding-top: 145px;
    }


    .hero-grid {

        grid-template-columns: 1fr;

        gap: 70px;

    }


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


    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-buttons,
    .hero-benefits {

        justify-content: center;

    }


    .hero-demo {

        max-width: 500px;

        margin: 0 auto;

    }


    .section-heading {
        display: block;
    }


    .section-heading > p {
        margin-top: 25px;
    }


    .process-grid {

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

        gap: 50px 30px;

    }


    .process-line {
        display: none;
    }


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


    .advantages-panel {
        max-width: 600px;
    }


    .visitpilot-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .visitpilot p {
        margin-left: auto;
        margin-right: auto;
    }


    .contact-box {
        display: block;
    }


    .contact-actions {

        align-items: flex-start;

        margin-top: 35px;

    }


    .footer-top {
        display: block;
    }


    .footer-links {
        margin-top: 45px;
    }

}


/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media (max-width: 600px) {

    .container {

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

    }


    .nav-container {
        min-height: 76px;
    }


    .brand-name {
        font-size: 19px;
    }


    .brand-symbol {

        width: 36px;
        height: 36px;

    }


    .navigation {

        top: 76px;
        left: 16px;
        right: 16px;

    }


    .hero {

        padding:
            125px 0 80px;

    }


    .hero h1 {

        font-size: 53px;

        letter-spacing: -3px;

    }


    .hero-text {
        font-size: 16px;
    }


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


    .button {
        width: 100%;
    }


    .hero-benefits {

        flex-direction: column;

        gap: 9px;

    }


    .kiosk {
        width: 285px;
    }


    .kiosk-screen {
        min-height: 455px;
    }


    .floating-info {
        display: none;
    }


    .intro {
        padding: 75px 0;
    }


    .intro h2,
    .section-heading h2,
    .center-heading h2,
    .advantages h2 {

        font-size: 38px;

    }


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


    .feature-card p {
        min-height: auto;
    }


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


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


    .industry-card {
        min-height: 150px;
    }


    .contact-box {

        padding: 35px 25px;

        border-radius: 20px;

    }


    .contact-box h2 {
        font-size: 37px;
    }


    .contact-actions {
        align-items: stretch;
    }


    .footer-links {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 35px;

    }


    .footer-bottom {

        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        padding: 20px 0;

    }

}


@media (max-width: 400px) {

    .hero h1 {
        font-size: 46px;
    }


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


    .footer-links {
        grid-template-columns: 1fr;
    }

}