/* =========================================================
   MAGISTVAPK.NET
   FOOTER
   DESKTOP + TABLET + MOBILE
========================================================= */

.magis-footer,
.magis-footer *,
.magis-footer *::before,
.magis-footer *::after {
    box-sizing: border-box;
}


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

.magis-footer {
    position: relative;

    width: 100%;

    margin: 0;

    padding:
        0 28px;

    background: #050505;

    color: #ffffff;
}


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

.magis-footer__container {
    position: relative;

    width: min(1180px, 100%);

    min-height: 90px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        auto
        1fr
        48px;

    align-items: center;

    gap: 34px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.magis-footer__copyright {
    min-width: max-content;
}


.magis-footer__copyright p {
    margin: 0;

    padding: 0;

    color: #f5f5f5;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 600;

    white-space: nowrap;
}


.magis-footer__copyright span {
    color: #ffffff;

    font-weight: 800;
}


/* =========================================================
   NAVIGATION
========================================================= */

.magis-footer__nav {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: nowrap;
}


/* =========================================================
   LINKS
========================================================= */

.magis-footer__link {
    position: relative;

    min-height: 34px;

    padding:
        0 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .18s ease;
}


/* Featured link */

.magis-footer__link--accent {
    color: #f4511e;
}


/* Divider */

.magis-footer__link:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    width: 1px;

    height: 26px;

    transform:
        translateY(-50%);

    background:
        rgba(255,255,255,.32);
}


/* Hover */

@media (hover:hover) {

    .magis-footer__link:hover {
        color: #f4511e;
    }

}


/* =========================================================
   BACK TO TOP
========================================================= */

.magis-footer__top {
    position: relative;

    width: 42px;
    height: 42px;

    margin: 0;

    padding: 0;

    display: grid;

    place-items: center;

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

    border-radius: 5px;

    background: #0b0b0b;

    color: #ffffff;

    cursor: pointer;

    transform:
        rotate(45deg);

    box-shadow:
        0 0 0 1px
        rgba(244,81,30,.08);

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* Rotate icon back */

.magis-footer__top i {
    color: #ffffff;

    font-size: 15px;

    transform:
        rotate(-45deg);

    transition:
        color .18s ease;
}


@media (hover:hover) {

    .magis-footer__top:hover {
        border-color: #f4511e;

        background: #111111;

        box-shadow:
            0 0 17px
            rgba(244,81,30,.30);

        transform:
            rotate(45deg)
            scale(1.05);
    }


    .magis-footer__top:hover i {
        color: #f4511e;
    }

}


/* =========================================================
   LAPTOP
   992px - 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .magis-footer {
        padding:
            0 20px;
    }


    .magis-footer__container {
        min-height: 86px;

        grid-template-columns:
            auto
            1fr
            44px;

        gap: 20px;
    }


    .magis-footer__copyright p {
        font-size: 12px;
    }


    .magis-footer__link {
        padding:
            0 11px;

        font-size: 12px;
    }


    .magis-footer__top {
        width: 40px;

        height: 40px;
    }

}


/* =========================================================
   TABLET
   701px - 991px
========================================================= */

@media (min-width: 701px) and (max-width: 991px) {

    .magis-footer {
        padding:
            26px 22px;
    }


    .magis-footer__container {
        width: 100%;

        min-height: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 20px;

        text-align: center;
    }


    .magis-footer__copyright {
        min-width: 0;
    }


    .magis-footer__copyright p {
        font-size: 13px;

        white-space: normal;
    }


    .magis-footer__nav {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        row-gap: 13px;
    }


    .magis-footer__link {
        padding:
            0 15px;

        font-size: 13px;
    }


    .magis-footer__top {
        position: absolute;

        right: 8px;

        bottom: 1px;

        width: 40px;

        height: 40px;
    }

}


/* =========================================================
   MOBILE
   <= 700px
========================================================= */

@media (max-width: 700px) {

    .magis-footer {
        width: 100%;

        padding:
            28px 16px
            34px;

        background: #050505;
    }


    .magis-footer__container {
        width: 100%;

        max-width: 520px;

        min-height: 0;

        margin: 0 auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 22px;

        text-align: center;
    }


    /* Copyright */

    .magis-footer__copyright {
        width: 100%;

        min-width: 0;
    }


    .magis-footer__copyright p {
        width: 100%;

        margin: 0;

        font-size: 12px;

        line-height: 1.55;

        white-space: normal;
    }


    /* Navigation */

    .magis-footer__nav {
        width: 100%;

        max-width: 430px;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-wrap: wrap;

        row-gap: 14px;
    }


    .magis-footer__link {
        min-height: 26px;

        padding:
            0 12px;

        font-size: 12px;

        line-height: 1.2;
    }


    .magis-footer__link:not(:last-child)::after {
        height: 20px;

        background:
            rgba(255,255,255,.28);
    }


    /* Back to top */

    .magis-footer__top {
        position: static;

        width: 39px;

        height: 39px;

        margin-top: 3px;
    }


    .magis-footer__top i {
        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 430px
========================================================= */

@media (max-width: 430px) {

    .magis-footer {
        padding:
            26px 12px
            31px;
    }


    .magis-footer__container {
        gap: 20px;
    }


    .magis-footer__copyright p {
        font-size: 11.5px;
    }


    .magis-footer__nav {
        max-width: 350px;

        row-gap: 13px;
    }


    .magis-footer__link {
        padding:
            0 10px;

        font-size: 11.5px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 360px
========================================================= */

@media (max-width: 360px) {

    .magis-footer {
        padding-left: 9px;

        padding-right: 9px;
    }


    .magis-footer__copyright p {
        font-size: 11px;
    }


    .magis-footer__link {
        padding:
            0 8px;

        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.magis-footer__link:focus-visible,
.magis-footer__top:focus-visible {
    outline:
        2px solid
        #f4511e;

    outline-offset:
        4px;
}
/* =========================================================
   SMOOTH BACK TO TOP
========================================================= */

html {
    scroll-behavior: smooth;
}

.magis-footer__top {
    text-decoration: none !important;
}