/* =========================================================
   VELZAYA
   Main Website Stylesheet
========================================================= */


/* =========================================================
   1. DESIGN TOKENS
========================================================= */

:root {
    --navy: #063563;
    --navy-dark: #001f3f;
    --navy-deep: #071930;

    --orange: #ff5a00;
    --orange-soft: #f5a623;

    --ink: #10253d;
    --muted: #64748b;

    --white: #ffffff;

    --bg: #f7fafc;
    --bg-soft: #f5f9fd;

    --line: #e6edf4;

    --radius: 22px;

    --shadow:
        0 18px 50px rgba(5, 42, 80, 0.10);

    --transition: 0.22s ease;
}


/* =========================================================
   2. RESET / BASE
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--ink);

    background: var(--white);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

section[id] {
    scroll-margin-top: 100px;
}


/* =========================================================
   3. LAYOUT
========================================================= */

.container {
    width: min(1180px, 92%);
    margin-inline: auto;
}

.content {
    max-width: 850px;
}

.section {
    padding: 86px 0;
}

.section-light,
.section.alt {
    background: var(--bg);
}

.section-action {
    margin-top: 35px;
}


/* =========================================================
   4. TYPOGRAPHY
========================================================= */

.eyebrow {
    margin-bottom: 10px;

    color: var(--orange);

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

    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.content h2,
.section-head h2 {
    margin: 10px 0 20px;

    color: var(--navy);

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;

    letter-spacing: -0.02em;
}

.content h3 {
    color: var(--navy);
}

.content p,
.content li {
    color: #53657a;
}

.section-head {
    max-width: 760px;
    margin-bottom: 38px;
}

.section-head p {
    color: var(--muted);

    font-size: 17px;
}


/* =========================================================
   5. BUTTONS
========================================================= */

.btn {
    display: inline-flex;

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

    min-height: 48px;

    padding: 13px 22px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-weight: 800;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.btn-primary {
    background: var(--orange);
    color: var(--white);
}

.btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(255, 90, 0, 0.25);
}

.btn-outline {
    border-color: var(--navy);

    background: var(--white);

    color: var(--navy);
}

.btn-outline:hover {
    background: var(--navy);

    color: var(--white);
}

.btn-secondary {
    border: 1px solid var(--navy);

    background: transparent;

    color: var(--navy);
}

.btn-secondary:hover {
    background: var(--navy);

    color: var(--white);
}

.text-link {
    color: var(--orange);

    font-weight: 800;
}

.text-link:hover {
    text-decoration: underline;
}


/* =========================================================
   6. TOP BAR
========================================================= */

.topbar {
    padding: 8px 0;

    background: var(--navy-dark);

    color: #dbeafe;

    font-size: 13px;
}

.topbar .container {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   7. HEADER / NAVIGATION
========================================================= */

.header {
    position: sticky;
    top: 0;

    z-index: 100;

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

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 76px;

    gap: 26px;
}

.brand {
    display: inline-flex;

    align-items: center;
}

.brand img {
    width: 205px;
    height: 58px;

    object-fit: contain;

    background: var(--white);
}

.menu {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-left: auto;

    font-size: 14px;
    font-weight: 700;
}

.menu a {
    position: relative;

    transition: color var(--transition);
}

.menu a:hover,
.menu a[aria-current="page"],
.menu a.active {
    color: var(--orange);
}

.menu a[aria-current="page"]::after,
.menu a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -10px;

    height: 2px;

    border-radius: 999px;

    background: var(--orange);
}

.mobile-toggle {
    display: none;

    margin-left: auto;

    padding: 5px;

    border: 0;

    background: transparent;

    color: var(--navy);

    font-size: 28px;
    line-height: 1;
}


/* =========================================================
   8. HOMEPAGE HERO
========================================================= */

.hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 650px;

    overflow: hidden;

    background: #edf5fb;
}

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.92) 38%,
            rgba(255, 255, 255, 0.25) 63%,
            rgba(0, 20, 45, 0.10) 100%
        ),
        url("../images/velzaya-student-accommodation-hero.webp")
        center / cover no-repeat;
}

.hero-content {
    position: relative;

    z-index: 2;

    width: min(700px, 95%);

    padding: 90px 0;
}

.hero h1 {
    margin: 14px 0 20px;

    max-width: 780px;

    color: var(--navy-dark);

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.03;

    letter-spacing: -0.03em;
}

.hero p {
    max-width: 680px;

    color: #34495e;

    font-size: 18px;
}

.tagline {
    margin: 22px 0;

    color: var(--orange);

    font-size: 23px;
    font-weight: 800;
}

.actions,
.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}


/* =========================================================
   9. GENERIC PAGE HERO
========================================================= */

.page-hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 460px;

    padding: 90px 0;

    background:
        linear-gradient(
            90deg,
            #f8fbff,
            #fff3eb
        );
}

.page-hero .container {
    position: relative;

    z-index: 2;
}

.page-hero h1 {
    margin: 14px 0 20px;

    max-width: 850px;

    color: var(--navy-dark);

    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1.05;

    letter-spacing: -0.03em;
}

.page-hero p {
    max-width: 720px;

    margin-bottom: 28px;

    color: var(--muted);

    font-size: 19px;
    line-height: 1.6;
}


/* =========================================================
   10. IMAGE PAGE HERO — SHARED
========================================================= */

.about-hero,
.accommodation-hero,
.food-hero,
.solutions-hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 540px;

    padding: 90px 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-hero .eyebrow,
.accommodation-hero .eyebrow,
.food-hero .eyebrow,
.solutions-hero .eyebrow {
    color: var(--orange-soft);
}

.about-hero h1,
.accommodation-hero h1,
.food-hero h1,
.solutions-hero h1 {
    color: var(--white);
}

.about-hero p,
.accommodation-hero p,
.food-hero p,
.solutions-hero p {
    color:
        rgba(255, 255, 255, 0.92);
}


/* =========================================================
   11. ABOUT HERO
========================================================= */

.about-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(7, 25, 48, 0.94) 0%,
            rgba(7, 25, 48, 0.76) 40%,
            rgba(7, 25, 48, 0.30) 70%,
            rgba(7, 25, 48, 0.06) 100%
        ),
        url("../images/velzaya-reception.webp");
}


/* =========================================================
   12. ACCOMMODATION HERO
========================================================= */

.accommodation-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(6, 24, 46, 0.94) 0%,
            rgba(6, 24, 46, 0.76) 38%,
            rgba(6, 24, 46, 0.32) 68%,
            rgba(6, 24, 46, 0.08) 100%
        ),
        url("../images/student-accommodation-management.webp");
}


/* =========================================================
   13. FOOD HERO
========================================================= */

.food-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(6, 24, 46, 0.94) 0%,
            rgba(6, 24, 46, 0.78) 38%,
            rgba(6, 24, 46, 0.38) 68%,
            rgba(6, 24, 46, 0.08) 100%
        ),
        url("../images/institutional-food-services.webp");
}


/* =========================================================
   14. SOLUTIONS HERO
========================================================= */

.solutions-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(6, 24, 46, 0.94) 0%,
            rgba(6, 24, 46, 0.78) 40%,
            rgba(6, 24, 46, 0.34) 70%,
            rgba(6, 24, 46, 0.08) 100%
        ),
        url("../images/integrated-campus-services.webp");
}


/* =========================================================
   15. CAREERS HERO
========================================================= */

.careers-hero {
    min-height: 500px;

    background:
        linear-gradient(
            120deg,
            #f4f9ff 0%,
            #ffffff 52%,
            #fff3eb 100%
        );
}


/* =========================================================
   16. HERO SECONDARY BUTTONS
========================================================= */

.about-hero .btn-secondary,
.accommodation-hero .btn-secondary,
.food-hero .btn-secondary,
.solutions-hero .btn-secondary {
    border-color:
        rgba(255, 255, 255, 0.65);

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

    color: var(--white);

    backdrop-filter: blur(6px);
}

.about-hero .btn-secondary:hover,
.accommodation-hero .btn-secondary:hover,
.food-hero .btn-secondary:hover,
.solutions-hero .btn-secondary:hover {
    background: var(--white);

    color: var(--navy-deep);
}


/* =========================================================
   17. SERVICE CARDS
========================================================= */

.service-grid {
    display: grid;

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

    gap: 18px;
}

.card {
    height: 100%;

    overflow: hidden;

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

    background: var(--white);

    box-shadow: var(--shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 55px rgba(5, 42, 80, 0.14);
}

.card img {
    width: 100%;
    height: 185px;

    object-fit: cover;
}

.card-body {
    padding: 22px;
}

.card h3 {
    margin: 0 0 9px;

    color: var(--navy);

    font-size: 20px;
}

.card p {
    margin: 0 0 15px;

    color: var(--muted);
}


/* =========================================================
   18. ABOUT / FEATURE CARDS
========================================================= */

.about-services {
    display: grid;

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

    gap: 18px;

    margin-top: 35px;
}

.about-service {
    padding: 26px;

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

    background: var(--white);

    box-shadow:
        0 10px 35px rgba(5, 42, 80, 0.06);
}

.about-service h3 {
    margin: 0 0 10px;

    color: var(--navy);

    font-size: 20px;
}

.about-service p {
    margin: 0 0 12px;
}

.about-service a {
    display: inline-block;

    margin-top: 5px;

    color: var(--orange);

    font-weight: 800;
}


/* =========================================================
   19. SPLIT SECTIONS
========================================================= */

.split {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 50px;
}

.split img {
    width: 100%;
    height: 430px;

    object-fit: cover;

    border-radius: 28px;

    box-shadow: var(--shadow);
}


/* =========================================================
   20. CHECKLIST
========================================================= */

.checklist {
    display: grid;

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

    gap: 12px;

    margin-top: 22px;
}

.check {
    padding: 13px 15px;

    border-radius: 14px;

    background: var(--bg-soft);

    color: var(--navy);

    font-weight: 700;
}


/* =========================================================
   21. STATS / OPERATING MODEL
========================================================= */

.stats {
    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );

    color: var(--white);
}

.stat-grid {
    display: grid;

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

.stat {
    padding: 34px 22px;

    border-right:
        1px solid rgba(255, 255, 255, 0.16);
}

.stat:last-child {
    border-right: 0;
}

.stat strong {
    display: block;

    color: var(--white);

    font-size: 20px;
}

.stat span {
    color: #bfdbfe;

    font-size: 14px;
}


/* =========================================================
   22. SOLUTIONS DETAIL SECTIONS
========================================================= */

.service-detail {
    overflow: hidden;
}

.service-detail-grid {
    display: grid;

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

    align-items: center;

    gap: 70px;
}

.service-detail-reverse .service-detail-image {
    order: 2;
}

.service-detail-reverse .service-detail-content {
    order: 1;
}

.service-detail-image {
    overflow: hidden;

    border-radius: 20px;
}

.service-detail-image img {
    width: 100%;
    height: 430px;

    object-fit: cover;
}

.service-detail-content h2 {
    margin-bottom: 20px;
}

.service-detail-content p {
    margin-bottom: 16px;
}

.service-list {
    margin: 25px 0 0;

    padding: 0;

    list-style: none;
}

.service-list li {
    position: relative;

    padding: 11px 0 11px 28px;

    border-bottom:
        1px solid rgba(7, 25, 48, 0.10);
}

.service-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 11px;

    color: var(--orange-soft);

    font-weight: 700;
}


/* =========================================================
   23. GENERIC DARK CTA SECTIONS
========================================================= */

.home-cta,
.about-cta,
.accommodation-cta,
.food-cta,
.solutions-cta,
.careers-cta {
    background: var(--navy-deep);
}

.home-cta .eyebrow,
.about-cta .eyebrow,
.accommodation-cta .eyebrow,
.food-cta .eyebrow,
.solutions-cta .eyebrow,
.careers-cta .eyebrow {
    color: var(--orange-soft);
}

.home-cta h2,
.about-cta h2,
.accommodation-cta h2,
.food-cta h2,
.solutions-cta h2,
.careers-cta h2 {
    color: var(--white);
}

.home-cta p,
.about-cta p,
.accommodation-cta p,
.food-cta p,
.solutions-cta p,
.careers-cta p {
    color:
        rgba(255, 255, 255, 0.85);
}

.home-cta .btn-secondary,
.about-cta .btn-secondary,
.accommodation-cta .btn-secondary,
.food-cta .btn-secondary,
.solutions-cta .btn-secondary,
.careers-cta .btn-secondary {
    border-color:
        rgba(255, 255, 255, 0.60);

    background: transparent;

    color: var(--white);
}

.home-cta .btn-secondary:hover,
.about-cta .btn-secondary:hover,
.accommodation-cta .btn-secondary:hover,
.food-cta .btn-secondary:hover,
.solutions-cta .btn-secondary:hover,
.careers-cta .btn-secondary:hover {
    background: var(--white);

    color: var(--navy-deep);
}


/* =========================================================
   24. LEGACY CTA
========================================================= */

.cta {
    padding: 70px 0;

    background:
        linear-gradient(
            120deg,
            #fff3eb,
            #eef7ff
        );
}

.cta-box {
    display: flex;

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

    gap: 30px;

    padding: 48px;

    border-radius: 30px;

    background: var(--navy-dark);

    color: var(--white);
}

.cta-box h2 {
    margin: 0 0 8px;

    font-size: 38px;
}

.cta-box p {
    margin: 0;

    color: #cfe1f5;
}


/* =========================================================
   25. FORMS
========================================================= */

.form {
    display: grid;

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

    gap: 20px;

    margin-top: 30px;
}

.form-group {
    display: flex;

    flex-direction: column;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form label {
    margin-bottom: 8px;

    color: var(--ink);

    font-size: 14px;
    font-weight: 700;
}

.form input,
.form select,
.form textarea {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid #cbd5e1;
    border-radius: 12px;

    outline: none;

    background: var(--white);

    color: var(--ink);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form textarea {
    min-height: 145px;

    resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    border-color: var(--navy);

    box-shadow:
        0 0 0 3px rgba(6, 53, 99, 0.10);
}

.form input::placeholder,
.form textarea::placeholder {
    color: #94a3b8;
}

.form-consent {
    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start;

    gap: 10px;

    cursor: pointer;
}

.form-consent input {
    width: auto !important;

    margin-top: 4px;

    flex: 0 0 auto;
}


/* =========================================================
   26. CAREERS FORM
========================================================= */

#velzaya-career-form {
    margin-top: 35px;
}


/* =========================================================
   27. FOOTER
========================================================= */

.footer {
    padding: 60px 0 22px;

    background: #061b31;

    color: #cbd5e1;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1.3fr;

    gap: 38px;
}

.footer h4 {
    margin-top: 0;

    color: var(--white);
}

.footer p {
    color: #cbd5e1;
}

.footer a {
    display: block;

    margin: 9px 0;

    color: #cbd5e1;
}

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

.footer .brand {
    display: inline-flex;

    margin-bottom: 12px;
}

.footer .brand img {
    padding: 5px;

    border-radius: 10px;

    background: var(--white);
}

.copyright {
    margin-top: 38px;

    padding-top: 20px;

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

    font-size: 13px;
}


/* =========================================================
   28. TABLET
========================================================= */

@media (max-width: 980px) {

    .menu {
        position: absolute;

        display: none;

        top: 76px;
        left: 0;
        right: 0;

        margin-left: 0;

        padding: 22px 4%;

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

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

        background: var(--white);

        box-shadow:
            0 16px 35px rgba(5, 42, 80, 0.08);
    }

    .menu.open {
        display: flex;
    }

    .menu a[aria-current="page"]::after,
    .menu a.active::after {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .nav > .btn {
        display: none;
    }

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

    .split {
        grid-template-columns: 1fr;

        gap: 35px;
    }

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

    .stat {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.14);
    }

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

    .hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.98),
                rgba(255, 255, 255, 0.80)
            ),
            url("../images/velzaya-student-accommodation-hero.webp")
            center / cover no-repeat;
    }

    .hero {
        min-height: 600px;
    }

    .service-detail-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .service-detail-reverse .service-detail-image,
    .service-detail-reverse .service-detail-content {
        order: initial;
    }

    .service-detail-image img {
        height: 340px;
    }

}


/* =========================================================
   29. MOBILE
========================================================= */

@media (max-width: 768px) {

    .section {
        padding: 65px 0;
    }

    .page-hero {
        min-height: 430px;

        padding: 70px 0;
    }

    .page-hero h1 {
        font-size: 40px;
    }

    .page-hero p {
        font-size: 17px;
    }


    /* Image heroes */

    .about-hero,
    .accommodation-hero,
    .food-hero,
    .solutions-hero {
        min-height: 500px;

        background-position: center;
    }

    .about-hero {
        background-image:
            linear-gradient(
                rgba(7, 25, 48, 0.78),
                rgba(7, 25, 48, 0.78)
            ),
            url("../images/velzaya-reception.webp");
    }

    .accommodation-hero {
        background-image:
            linear-gradient(
                rgba(6, 24, 46, 0.78),
                rgba(6, 24, 46, 0.78)
            ),
            url("../images/velzaya-student-accommodation-hero.webp");
    }

    .food-hero {
        background-image:
            linear-gradient(
                rgba(6, 24, 46, 0.78),
                rgba(6, 24, 46, 0.78)
            ),
            url("../images/institutional-food-services.webp");
    }

    .solutions-hero {
        background-image:
            linear-gradient(
                rgba(6, 24, 46, 0.78),
                rgba(6, 24, 46, 0.78)
            ),
            url("../images/integrated-campus-services.webp");
    }


    .about-hero h1,
    .accommodation-hero h1,
    .food-hero h1,
    .solutions-hero h1 {
        font-size: 40px;
    }


    .about-hero p,
    .accommodation-hero p,
    .food-hero p,
    .solutions-hero p {
        font-size: 17px;
    }


    .hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }


    .about-services {
        grid-template-columns: 1fr;
    }


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

    .form-group-full {
        grid-column: auto;
    }

}


/* =========================================================
   30. SMALL MOBILE
========================================================= */

@media (max-width: 640px) {

    .topbar {
        display: none;
    }

    .nav {
        min-height: 70px;
    }

    .brand img {
        width: 175px;
        height: 54px;
    }

    .menu {
        top: 70px;
    }

    .service-grid,
    .checklist,
    .footer-grid,
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        padding: 70px 0;
    }

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

    .hero p {
        font-size: 17px;
    }

    .split img {
        height: 320px;
    }

    .stat {
        border-right: 0;

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

    .stat:last-child {
        border-bottom: 0;
    }

    .cta-box {
        display: block;

        padding: 30px;
    }

    .cta-box h2 {
        font-size: 30px;
    }

    .cta-box .btn {
        margin-top: 22px;
    }

}


/* =========================================================
   31. VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .container {
        width: min(92%, 1180px);
    }

    .hero {
        min-height: 570px;
    }

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

    .page-hero h1,
    .about-hero h1,
    .accommodation-hero h1,
    .food-hero h1,
    .solutions-hero h1 {
        font-size: 36px;
    }

    .actions,
    .hero-actions {
        width: 100%;
    }

    .actions .btn,
    .hero-actions .btn {
        width: 100%;
    }

    .card img {
        height: 210px;
    }

    .split img {
        height: 270px;
    }

    .service-detail-image img {
        height: 250px;
    }

    .about-service {
        padding: 22px;
    }

}


/* =========================================================
   32. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid
        rgba(255, 90, 0, 0.35);

    outline-offset: 3px;
}


/* =========================================================
   33. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

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

.footer-brand .footer-meaning {
    margin-top: 16px;
    margin-bottom: 10px;

    color: #e2e8f0;

    font-size: 15px;
    line-height: 1.6;
}

.footer-brand .footer-meaning strong {
    color: #ffffff;

    font-weight: 800;
    letter-spacing: 0.04em;
}

.footer-brand > p:not(.footer-meaning):not(.footer-tagline) {
    max-width: 390px;

    color: #94a3b8;

    font-size: 14px;
    line-height: 1.6;
}

.footer-brand .footer-tagline {
    margin-top: 14px;

    color: #f5a623;

    font-size: 15px;
    font-weight: 800;
}