/*!
 * ==========================================================
 * Shadowlight - Custom Bootstrap 5 theme for the
 * Art of Light International Photo Salon.
 * ==========================================================
 */

/* ==========================================================
   Global
   ========================================================== */

:root {

    /* Colors */

    --color-background: #000000;
    --color-surface: #111111;

    --color-text: #ffffff;
    --color-text-muted: rgba(255,255,255,.75);

    --color-primary: #42dca3;
    --color-primary-hover: #1d9b6c;

    --color-border: rgba(255,255,255,.15);

    /* Typography */

    --font-heading: "Montserrat", sans-serif;
    --font-body: "Lora", serif;

    /* Layout */

    --section-padding: 6rem;
    --container-width: 1200px;

    /* Effects */

    --transition: .3s ease;

}

/* ==========================================================
   Base
   ========================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;

    color: var(--color-text);
    background: var(--color-background);

    overflow-x: hidden;

}

/* ==========================================================
   Typography
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin: 0 0 1.5rem;

    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;

    color: var(--color-text);

}

p {

    margin: 0 0 1.5rem;

    color: var(--color-text-muted);

}

/* ==========================================================
   Links
   ========================================================== */

a {

    color: var(--color-primary);

    text-decoration: none;

    transition: color var(--transition);

}

a:hover {

    color: var(--color-primary-hover);

}

/* ==========================================================
   Images
   ========================================================== */

img {

    display: block;
    max-width: 100%;
    height: auto;

}

/* ==========================================================
   Sections
   ========================================================== */

section {

    padding: var(--section-padding) 0;

}

/* ==========================================================
   Bootstrap Helpers
   ========================================================== */

.container {

    max-width: var(--container-width);

}
/* ==========================================================
   Navigation
   ========================================================== */

.navbar {

    padding: 1rem 0;

    background: transparent;

    transition:
        background-color .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        padding .35s ease;

}

@media (min-width: 992px) {

    .navbar {

        padding: 1.25rem 0;

    }

}

/* ==========================================================
   Sticky Navigation
   ========================================================== */

#mainNav.navbar-scrolled {

    padding: .75rem 0;

    background: rgba(0, 0, 0, .92);

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

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

    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);

}

/* ==========================================================
   Brand
   ========================================================== */

.navbar-brand {

    font-family: var(--font-heading);

    font-size: 1.15rem;
    font-weight: 500;

    letter-spacing: .08em;
    text-transform: uppercase;

}

.navbar-brand i {

    font-size: 1.25rem;

    transition: color var(--transition);

}

.navbar-brand:hover i {

    color: var(--color-primary);

}

.navbar-brand img {

    height: 48px;
    width: auto;

    transition: height .35s ease;

}

#mainNav.navbar-scrolled .navbar-brand img {

    height: 40px;

}

/* ==========================================================
   Desktop Navigation
   ========================================================== */

.navbar-nav {

    gap: .5rem;

}

.navbar-nav .nav-link {

    position: relative;

    padding: .5rem .75rem;

    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--color-text);

    transition:
        color var(--transition),
        padding .35s ease;

}

#mainNav.navbar-scrolled .nav-link {

    padding: .35rem .75rem;

}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {

    color: var(--color-primary);

}

.navbar-nav .nav-link.active {

    color: var(--color-primary);

}

.navbar-nav .nav-link::after {

    content: "";

    position: absolute;

    left: .75rem;
    right: .75rem;
    bottom: .2rem;

    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--transition);

}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {

    transform: scaleX(1);

}

/* ==========================================================
   Mobile Toggle
   ========================================================== */

.navbar-toggler {

    border: 1px solid rgba(255,255,255,.2);

    padding: .45rem .7rem;

    font-size: 1.8rem;

}

.navbar-toggler:focus {

    box-shadow: none;

    border-color: var(--color-primary);

}

.navbar-toggler i {

    color: var(--color-text);

    transition: color var(--transition);

}

.navbar-toggler:hover i,
.navbar-toggler:focus i,
.navbar-toggler[aria-expanded="true"] i {

    color: var(--color-primary);

}

.navbar-toggler[aria-expanded="false"] i {

    color: var(--color-text);

}

/* ==========================================================
   Mobile Collapse (Fallback)
   ========================================================== */

@media (max-width: 991.98px) {

    .navbar-collapse {

        margin-top: 1rem;

        padding: 1rem;

        background: rgba(0,0,0,.95);

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

        border-radius: .75rem;

    }

    .navbar-nav {

        gap: .25rem;

    }

    .navbar-nav .nav-link::after {

        transform-origin: left;

    }

}

/* ==========================================================
   Hero
   ========================================================== */

.hero {

    position: relative;

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

    min-height: 100vh;

    text-align: center;

    color: var(--color-text);

    background:
        url("../img/hero-bg.webp") center bottom / cover no-repeat;

}


.hero-content {

    position: relative;
    z-index: 2;

    max-width: 900px;

    padding: 2rem;

    transform: translateY(-20px);

}

.hero-title {

    margin-bottom: 2rem;

    font-family: var(--font-heading);

    font-size: clamp(2.5rem, 8vw, 6.25rem);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .02em;

    white-space: nowrap;

    color: var(--color-text);

}

.hero-subtitle {

    margin: 0 auto;

    max-width: 700px;

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

    color: var(--color-text);

}

.hero-actions {

    display: flex;

    justify-content: center;

    gap: 1rem;

    flex-wrap: wrap;

}

.hero-scroll {

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

    margin-top: 2rem;

    width: 64px;
    height: 64px;

    border: 2px solid rgba(255,255,255,.9);
    border-radius: 50%;

    color: var(--color-text);

    transition: all var(--transition);


}

.hero-scroll:hover {

    color: var(--color-primary);

    background: rgba(66, 220, 163, 0.18);

    border-color: var(--color-primary);

}

.hero-scroll i {

    font-size: 1.65rem;

}

.hero-scroll:hover i {

    animation: hero-breathe 2.2s cubic-bezier(.45,0,.55,1) infinite;

}

@keyframes hero-breathe {

    0% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: .9;
    }

}

@media (max-width: 768px) {


    .hero-content {

        padding: 1.5rem;

    }

    .hero-scroll {

        width: 56px;
        height: 56px;

    }

}

/* ==========================================================
   Competition Hub
   ========================================================== */

.competition-hub {
    padding: 6rem 0 10rem;
    background: var(--color-background);
}

.hub-title {
    margin-bottom: 1.5rem;

    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;

    color: var(--color-text);
}

.hub-intro {
    max-width: 700px;
    margin: 0 auto 2rem;

    font-size: 1.125rem;
    line-height: 1.8;

    color: var(--color-text-muted);
}


/* ==========================================================
   Competition Hub Content
   ========================================================== */

.competition-hub-content {

    max-width: 980px;

    margin-inline: auto;

}

/* ==========================================================
   Competition Hub Edge Fade (Desktop)
   ========================================================== */

@media (min-width: 992px) {

    .competition-hub-content {

        position: relative;

    }

    .competition-hub-content::before,
    .competition-hub-content::after {

        content: "";

        position: absolute;

        top: 36px;
        bottom: 0;

        width: 80px;

        z-index: 5;

        pointer-events: none;

    }

    .competition-hub-content::before {

        left: 0;

        background: linear-gradient(
            to right,
            #000 0%,
            rgba(0,0,0,0) 100%
        );

    }

    .competition-hub-content::after {

        right: 0;

        background: linear-gradient(
            to left,
            #000 0%,
            rgba(0,0,0,0) 100%
        );

    }

}

/* ==========================================================
   Competition Hub Card Focus (Desktop)
   ========================================================== */

@media (min-width: 992px) {

    .overview-swiper .swiper-slide {

        height: 560px;
        transition:
            filter .35s ease,
            opacity .35s ease,
            transform .35s ease,
            box-shadow .35s ease;

    }

    /* Inactive cards */

    .overview-swiper .swiper-slide-prev,
    .overview-swiper .swiper-slide-next {

        filter: blur(0px) brightness(.48) saturate(.40);

    }

    /* Active card */

    .overview-swiper .swiper-slide-active {

        filter: none;

    }

}

/* ==========================================================
   Competition Hub Navigation
   ========================================================== */

.hub-tabs {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;

    margin-bottom: 2rem;

}

.hub-tab {

    padding: .75rem 1.5rem;

    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;

    color: #ffffff;

    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 500;

    letter-spacing: .08em;
    text-transform: uppercase;

    cursor: pointer;

    transition: all var(--transition);

}

.hub-tab:hover {

    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(66, 220, 163, .15);

}


.hub-tab.active {

    color: var(--color-primary);
    background: rgba(66, 220, 163, .15);
    border-color: var(--color-primary);
    
}

/* ==========================================================
   Competition Hub Mobile
   ========================================================== */

@media (max-width: 991.98px) {

    .hub-title,
    .hub-intro,
    .hub-tabs {

        display: none;

    }

}

/* ==========================================================
   Competition Hub Cards
   ========================================================== */

.hub-card {

    display: flex;
    flex-direction: column;

    height: 100%;

    padding: 2.25rem 2.5rem;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;

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

}

.hub-card:hover {

    background: rgba(255,255,255,.05);

    border-color: rgba(66,220,163,.35);

    transform: translateY(-2px);

}

.hub-card h3 {

    margin-bottom: 1rem;

    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;

    color: var(--color-text);

}

.hub-card p {

    color: var(--color-text-muted);

    line-height: 1.7;

}

.hub-card > *:last-child {

    margin-bottom: 0;

}

/* ==========================================================
   Competition Hub Schedule
   ========================================================== */

.hub-schedule {

    display: flex;
    flex-direction: column;

    gap: 1.25rem;

    margin: 1.5rem 0;

}

.schedule-item {

    display: flex;
    flex-direction: column;

}

.schedule-label {

    font-weight: 600;

    color: var(--color-text);

}

.schedule-date {

    margin-top: .2rem;

    color: var(--color-text-muted);

}

/* ==========================================================
   Competition Status
   ========================================================== */

.hub-status {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .75rem;

    margin: 1.75rem 0;

}

/* ----------------------------------------------------------
   Status Badge
   ---------------------------------------------------------- */

.status-badge {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    padding: .55rem 1rem;

    border: 1px solid;

    border-radius: 999px;

    font-family: var(--font-heading);

    font-size: .9rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);

}

.status-badge i {

    font-size: .95rem;

}

/* ----------------------------------------------------------
   Status Description
   ---------------------------------------------------------- */

.status-next {

    color: rgba(255,255,255,.75);

    font-size: .92rem;

    letter-spacing: .03em;

}

/* ----------------------------------------------------------
   Competition States
   ---------------------------------------------------------- */

/* Entries Open */

.status-open .status-badge {

    background: rgba(66,220,163,.15);

    border-color: var(--color-primary);

    color: var(--color-primary);

}

/* Upload Closing Soon */

.status-warning .status-badge {

    background: rgba(255,193,7,.16);

    border-color: #ffc107;

    color: #ffc107;

}

/* Judging Starts Soon */

.status-judging-soon .status-badge {

    background: rgba(13,110,253,.16);

    border-color: #0d6efd;

    color: #0d6efd;

}

/* Judging In Progress */

.status-judging .status-badge {

    background: rgba(13,110,253,.16);

    border-color: #0d6efd;

    color: #0d6efd;

}

/* Results Available */

.status-results .status-badge {

    background: rgba(111,66,193,.16);

    border-color: #6f42c1;

    color: #c5a3ff;

}

/* Online Gallery Available */

.status-gallery .status-badge {

    background: rgba(13,202,240,.16);

    border-color: #0dcaf0;

    color: #7fe8ff;

}

/* Awards & Catalogues Sent */

.status-awards .status-badge {

    background: rgba(212,175,55,.15);

    border-color: rgb(212,175,55);

    color: rgb(212,175,55);

}

/* ==========================================================
   Hub Card Buttons
   ========================================================== */

.hub-card-buttons {

    display: flex;

    gap: .75rem;

    margin-top: 1rem;

}

/* ==========================================================
   Hub Card Button
   ========================================================== */

.hub-card-button {

    display: inline-block;

    align-self: flex-start;

    margin-top: 1rem;

    padding: .6rem 1.35rem;

    background: transparent;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;

    color: var(--color-primary);

    font-family: var(--font-heading);
    font-size: .85rem;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;

    cursor: pointer;

    transition: all var(--transition);

}

.hub-card-button:hover {

    color: var(--color-primary);

    border-color: var(--color-primary);

    background: rgba(66, 220, 163, .15);

}

.hub-card-button:focus-visible {

    outline: none;

    color: var(--color-primary);

    border-color: var(--color-primary);

    background: rgba(66, 220, 163, .15);

}

/* ==========================================================
   Mobile Navigation
   ========================================================== */

.offcanvas {

    width: 100vw !important;
    max-width: 100%;

    background: #000;

    color: var(--color-text);

}

.offcanvas-header {

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

    gap: 2rem;
    
    padding: 1.5rem 2rem;

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

}

.offcanvas-title {

    font-family: var(--font-heading);

    font-size: 1.25rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--color-text);

    text-decoration: none;

    transition: color var(--transition);

}

.offcanvas-title:hover {

    color: var(--color-primary);

}

.offcanvas-body {

    display: flex;

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

    padding: 2rem;

    overflow-y: auto;

}

.mobile-nav {

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

    gap: 2rem;

    width: 100%;

}

.mobile-nav-link {

    position: relative;

    color: var(--color-text);

    font-family: var(--font-heading);

    font-size: clamp(1.25rem, 3vw, 1.8rem);
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;

    transition: color var(--transition);

}

.mobile-nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -.35rem;

    width: 100%;
    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);

}

.mobile-nav-link:hover,
.mobile-nav-link:focus {

    color: var(--color-primary);

}

.mobile-nav-link:hover::after,
.mobile-nav-link:focus::after {

    transform: scaleX(1);

}

@media (max-height: 500px) {

    .mobile-nav {

        gap: 1.25rem;

    }

    .mobile-nav-link {

        font-size: 1.2rem;

    }

}

.offcanvas-close {

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

    width: 44px;
    height: 44px;

    padding: 0;

    background: transparent;
    border: 0;

    color: var(--color-primary);

    font-size: 1.5rem;

    cursor: pointer;

    transition:
        color var(--transition),
        transform var(--transition),
        opacity var(--transition);

}

.offcanvas-close:hover {

    color: #ffffff;

    opacity: .9;

    transform: rotate(90deg);

}

/* ==========================================================
   Competition Hub Progress
   ========================================================== */

.competition-progress {

    display: flex;

    align-items: center;

    gap: .45rem;

    width: 100%;

    margin: 0 0 .6rem;

    padding: 0;

}

.progress-segment {

    flex: 1;

    height: 3px;

    border-radius: 999px;

    background: rgba(66,220,163,.18);

    transition:
        background-color .35s ease,
        transform .35s ease,
        opacity .35s ease;

}

.progress-segment.active {

    background: var(--color-primary);

    height: 4px;

    transform: scaleY(1.15);

}

.overview-swiper {

    scroll-margin-top: 5rem;
    max-width: 1100px;

}

/* ==========================================================
   History
   ========================================================== */

.history-section {

    position: relative;

    min-height: 420px;

    display: flex;
    align-items: center;

    padding: 4rem 0;

    background:
        url("../img/history-bg.webp")
        center center / cover no-repeat;

}

.history-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 140px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0) 0%,
        var(--color-background) 100%
    );

    pointer-events: none;

    z-index: 1;

}

.history-section::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 80px;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        var(--color-background) 100%
    );

    pointer-events: none;

    z-index: 1;

}

.history-section .container {

    position: relative;

    z-index: 2;

}

.history-header {

    max-width: 760px;

    margin: 0 auto 3rem;

    text-align: center;

}

.history-title {

    margin-bottom: 1rem;

    font-family: var(--font-heading);

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

    font-weight: 600;

    color: var(--color-primary);

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .65);

}

.history-section .section-title,
.history-section .section-intro {

    color: var(--color-text);

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .55);

}

.history-section .section-intro {

    display: inline-block;

    padding: .45rem 1rem;

    background: rgba(0, 0, 0, .35);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 6px;

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

}

.history-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: .75rem;

    max-width: 760px;

    margin: 0 auto;

}

.history-links a {

    display: inline-flex;

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

    padding: .75rem 1.5rem;

    background: rgba(0, 0, 0, .22);

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

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;

    color: var(--color-text);

    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 600;

    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        backdrop-filter var(--transition);

}

.history-links a:hover,
.history-links a:focus {

    color: var(--color-primary);

    border-color: var(--color-primary);

    background: rgba(66, 220, 163, .15);

}

.history-links a:focus-visible {

    outline: none;

}

/* ==========================================================
   History Desktop Layout
   ========================================================== */

@media (min-width: 992px) {

    .history-section {

        scroll-margin-top: 24vh;
        padding-top: 6rem;
        padding-bottom: 8rem;

    }

}

/* ==========================================================
   History Mobile Layout
   ========================================================== */

@media (max-width: 768px) {

    .history-links {

        gap: .5rem;

    }

    .history-links a {

        padding: .65rem 1.25rem;

        font-size: .85rem;

    }

}

/* ==========================================================
   Contact
   ========================================================== */

.contact-section {

    padding: 6rem 0;

    background: var(--color-background);

}

.contact-card {

    
    max-width: 620px;

    margin: 0 auto;

    padding: 2.5rem;

    text-align: center;

    background: rgba(0, 0, 0, .28);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 12px;

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

    box-shadow: 0 0 120px rgba(66, 220, 163, .12);

}

.contact-card .section-title {

    margin-bottom: 1rem;

}

.contact-card .section-intro {

    max-width: 520px;

    margin: 0 auto 2rem;

}

.contact-email {

    margin: 2rem 0;

}

.contact-email a {

    position: relative;

    display: inline-block;

    color: var(--color-text);

    font-family: var(--font-heading);

    font-size: 1.15rem;
    font-weight: 500;

    letter-spacing: .05em;

    text-decoration: none;

    transition:
        color var(--transition);

}

.contact-email a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -.2rem;

    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--transition);

}

.contact-email a:hover,
.contact-email a:focus {

    color: var(--color-primary);

}

.contact-email a:hover::after,
.contact-email a:focus::after {

    transform: scaleX(1);

}

.contact-social {

    display: flex;

    justify-content: center;

    margin-top: 2rem;

}

.contact-social-link {

    display: inline-flex;

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

    padding: .75rem 1.5rem;

    background: rgba(0, 0, 0, .22);

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;

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

    color: var(--color-primary);

    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 500;

    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition);

}

.contact-social-link:hover,
.contact-social-link:focus {

    color: var(--color-primary);

    background: rgba(66, 220, 163, .15);

    border-color: var(--color-primary);

}

.contact-social-link i {

    font-size: 1rem;

}

@media (max-width: 768px) {

    .contact-section {

        padding: 4rem 0;

    }

    .contact-card {

        padding: 2rem;
        
        box-shadow:
        0 0 30px rgba(66,220,163,.06),
        0 0 8px rgba(66,220,163,.10);

    }

    .contact-card .section-intro {

        max-width: 100%;

        font-size: 1rem;

        line-height: 1.8;

    }

    .contact-email a {

        font-size: 1rem;

        word-break: break-word;
        letter-spacing: .03em;

    }

}

/* ==========================================================
   Contact Desktop Layout
   ========================================================== */

@media (min-width: 992px) {

    .contact-section {

        scroll-margin-top: 10vh;
        padding-top: 10rem;
        padding-bottom: 12rem;

    }

}

/* ==========================================================
   Footer
   ========================================================== */

.site-footer {

    padding: 1rem 0;

    background: var(--color-background);

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

}

.footer-copyright {

    margin: 0;

    text-align: center;

    color: rgba(255,255,255,.70);

    font-size: .9rem;

    font-weight: 400;

    letter-spacing: .03em;

}

.footer-copyright a {

    position: relative;

    display: inline-block;

    color: var(--color-text);

    text-decoration: none;

    transition:
        color var(--transition);

}

.footer-copyright a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -.15rem;

    height: 2px;

    background: var(--color-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--transition);

}

.footer-copyright a:hover,
.footer-copyright a:focus {

    color: var(--color-primary);

}

.footer-copyright a:hover::after,
.footer-copyright a:focus::after {

    transform: scaleX(1);

}

.footer-break {

    display: none;

}

@media (max-width: 768px) {

    .footer-break {

        display: inline;

    }

}