/* =========================================================
   KIYA LEARNING CODING FOOTER
   ORANGE + DARK TECHNOLOGY THEME
========================================================= */

.footer {

    position: relative;

    padding: 78px 0 0;

    overflow: hidden;

    color: #bfc2c9;

    background:
        linear-gradient(
            135deg,
            #111216 0%,
            #17191e 55%,
            #101114 100%
        );

}


/* =========================================================
   BACKGROUND CODE GRID
========================================================= */

.footer::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -300px;

    background-image:

        linear-gradient(
            rgba(244,81,30,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(244,81,30,.06) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    transform: rotate(12deg);

    pointer-events: none;

}


.footer::after {

    content: "</>";

    position: absolute;

    right: 35px;
    bottom: 75px;

    color: rgba(244,81,30,.045);

    font-family:
        "Courier New",
        monospace;

    font-size: 120px;

    font-weight: 800;

    pointer-events: none;

}


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

.footer-brand {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #fff;

    text-decoration: none;

    line-height: 1;

}


.footer-brand:hover {

    color: #fff;

}


.footer-brand .brand-mark {

    width: 45px;
    height: 45px;

    min-width: 45px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #F4511E,
            #FF765F
        );

    box-shadow:
        0 10px 25px rgba(
            244,
            81,
            30,
            .22
        );

}


.footer-brand .brand-mark i {

    font-size: 21px;

}


.footer-brand-text {

    display: block;

}


.footer-brand strong {

    display: block;

    color: #fff;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -.6px;

}


.footer-brand small {

    display: block;

    margin-top: 5px;

    color: #FF765F;

    font-size: 6.5px;

    font-weight: 700;

    letter-spacing: 1.6px;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.footer-text {

    max-width: 390px;

    margin: 22px 0 0;

    color: #969AA3;

    font-size: 12px;

    line-height: 1.85;

}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

}


.footer-social a {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

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

    border-radius: 9px;

    color: #D5D7DB;

    text-decoration: none;

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

    transition:
        .25s ease;

}


.footer-social a:hover {

    color: #fff;

    background: var(--kl-orange);

    border-color: var(--kl-orange);

    transform:
        translateY(-3px);

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

}


.footer-social i {

    font-size: 14px;

}


/* =========================================================
   TERMINAL
========================================================= */

.footer-terminal {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 22px;

    padding: 8px 11px;

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

    border-radius: 7px;

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

    color: #71757e;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

}


.footer-terminal > span:first-child {

    color: #FF765F;

}


.terminal-command {

    color: #8E939C;

}


.terminal-cursor {

    color: var(--kl-orange);

    animation:
        footerCursor 1s infinite;

}


@keyframes footerCursor {

    50% {

        opacity: 0;

    }

}


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

.footer h4 {

    position: relative;

    margin: 0 0 20px;

    color: #fff;

    font-size: 14px;

    font-weight: 700;

}


.footer h4::after {

    content: "";

    display: block;

    width: 27px;

    height: 2px;

    margin-top: 9px;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            var(--kl-orange),
            #FF765F
        );

}


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

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}


.footer-links li {

    margin:
        0 0 10px;

}


.footer-links a {

    display: inline-flex;

    align-items: center;

    color: #9498A1;

    font-size: 11px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;

}


.footer-links a::before {

    content: "›";

    margin-right: 7px;

    color: #FF765F;

    font-size: 14px;

    transition:
        transform .2s ease;

}


.footer-links a:hover {

    color: #fff;

    transform:
        translateX(3px);

}


.footer-links a:hover::before {

    transform:
        translateX(2px);

}


/* =========================================================
   CONTACT LIST
========================================================= */

.contact-list {

    list-style: none;

    padding: 0;

    margin: 0;

}


.contact-list li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 13px;

    color: #969AA3;

    font-size: 10px;

    line-height: 1.55;

    word-break: break-word;

}


.contact-list li > div {

    min-width: 0;

    flex: 1;

}


.contact-list small {

    display: block;

    margin-bottom: 2px;

    color: #686D76;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: .5px;

    text-transform: uppercase;

}


.contact-list a {

    color: #AEB1B8;

    text-decoration: none;

    transition:
        color .2s ease;

}


.contact-list a:hover {

    color: #FF765F;

}


.contact-list li > div > span {

    display: block;

    color: #AEB1B8;

}


/* =========================================================
   CONTACT ICON
========================================================= */

.contact-icon {

    width: 31px;
    height: 31px;

    min-width: 31px;

    display: grid;

    place-items: center;

    margin-top: -1px;

    border: 1px solid rgba(
        244,
        81,
        30,
        .15
    );

    border-radius: 8px;

    color: #FF765F;

    background:
        rgba(
            244,
            81,
            30,
            .07
        );

    font-size: 12px;

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.footer-contact-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 5px;

    padding: 10px 16px;

    border: 1px solid rgba(
        244,
        81,
        30,
        .35
    );

    border-radius: 8px;

    color: #FF765F;

    background:
        rgba(
            244,
            81,
            30,
            .08
        );

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;

    transition:
        .25s ease;

}


.footer-contact-btn:hover {

    color: #fff;

    background: var(--kl-orange);

    border-color: var(--kl-orange);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(
            244,
            81,
            30,
            .20
        );

}


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

.footer-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 55px;

    padding: 18px 0;

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

    color: #666B74;

    font-size: 9px;

}


.footer-copy strong {

    color: #A5A8AF;

    font-weight: 600;

}


.footer-credit {

    display: flex;

    align-items: center;

    gap: 3px;

    color: #6E737C;

}


.footer-credit span {

    transition:
        color .2s ease;

}


.footer-credit span:hover {

    color: #FF765F;

}


.footer-credit i {

    color: var(--kl-orange);

    font-size: 13px;

}


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

@media (max-width: 991.98px) {

    .footer {

        padding-top: 60px;

    }


    .footer-text {

        max-width: 500px;

    }


    .footer-bottom {

        margin-top: 42px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .footer {

        padding-top: 50px;

    }


    .footer::after {

        right: -10px;

        bottom: 90px;

        font-size: 80px;

    }


    .footer-brand .brand-mark {

        width: 42px;
        height: 42px;

        min-width: 42px;

    }


    .footer-brand strong {

        font-size: 19px;

    }


    .footer-text {

        margin-top: 18px;

        font-size: 11.5px;

        line-height: 1.75;

    }


    .footer-social {

        margin-top: 18px;

    }


    .footer-terminal {

        margin-top: 17px;

    }


    .footer h4 {

        margin-bottom: 16px;

        font-size: 13px;

    }


    .footer-links li {

        margin-bottom: 8px;

    }


    .footer-links a {

        font-size: 10px;

    }


    .contact-list li {

        font-size: 10px;

        margin-bottom: 11px;

    }


    .footer-contact-btn {

        margin-top: 2px;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 7px;

        margin-top: 38px;

        padding: 16px 0;

    }


    .footer-credit {

        text-align: left;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .footer {

        padding-top: 43px;

    }


    .footer .row {

        --bs-gutter-y: 2.2rem;

    }


    .footer-brand .brand-mark {

        width: 39px;
        height: 39px;

        min-width: 39px;

        border-radius: 10px;

    }


    .footer-brand strong {

        font-size: 18px;

    }


    .footer-brand small {

        font-size: 5.8px;

        letter-spacing: 1.3px;

    }


    .footer-text {

        font-size: 11px;

    }


    .footer-social a {

        width: 34px;
        height: 34px;

    }


    .footer-bottom {

        font-size: 8.5px;

    }

}