.site-footer {
    .footer-cta {
        display: block;
        padding: 50px 5% 60px;
        border-top: 2px solid var(--color-white);
        border-bottom: 2px solid var(--color-white);

        @media screen and (max-width: 991px) {
            padding: 40px 5%;
        }
        &:hover, &:focus-visible {
            p {
                .footer-cta-text {
                    &:before {
                        opacity: 1;
                        visibility: visible;
                        bottom: -3px;
                    }
                    &:after {
                        right: -33px;
                    }
                    .extra-os {
                        span:nth-child(1) {
                            max-width: 2em;
                            opacity: 1;
                            transition-delay: 0s;
                        }
                        span:nth-child(2) {
                            max-width: 2em;
                            opacity: 1;
                            transition-delay: 0.05s;
                        }
                        span:nth-child(3) {
                            max-width: 2em;
                            opacity: 1;
                            transition-delay: 0.1s;
                        }
                        span:nth-child(4) {
                            max-width: 2em;
                            opacity: 1;
                            transition-delay: 0.15s;
                        }
                        span:nth-child(5) {
                            max-width: 2em;
                            opacity: 1;
                            transition-delay: 0.2s;
                        }
                    }
                }
            }
        }
        .container {
            width: 100%;
            max-width: none;
        }
        p {
            font-size: var(--font-size-lg);
            font-weight: 800;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--color-white);
            text-align: center;
            margin-bottom: 0;

            br {
                display: none;
                
                @media screen and (max-width: 991px) {
                    display: block;
                }
            }
            .footer-cta-text {
                position: relative;
                display: inline-block;
                color: var(--color-primary);

                &:before {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 3px;
                    position: absolute;
                    bottom: -8px;
                    left: 0;
                    background-color: var(--color-primary);
                    opacity: 0;
                    visibility: hidden;
                    transition: .3s ease-in-out;
                }
                &:after {
                    content: '';
                    display: block;
                    width: 20px;
                    height: 19px;
                    position: absolute;
                    top: calc(50% + 4px);
                    right: -28px;
                    transform: translateY(-50%);
                    background-image: url('../../svg/arrow-right-green.svg');
                    background-repeat: no-repeat;
                    background-size: cover;
                    transition: .4s ease-in-out;
                }
                .extra-os {
                    position: relative;
                    top: 7px;
                    
                    span {
                        display: inline-block;
                        max-width: 0;
                        overflow: hidden;
                        opacity: 0;
                        vertical-align: inherit;
                        transition: max-width 0.15s ease-in-out, opacity 0.15s ease-in-out;
                    }
                }
            }
        }
    }
    .footer-main {
        position: relative;

        @media screen and (max-width: 991px) {
            display: flex;
            flex-direction: column-reverse;
            text-align: center;
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .footer-left {
            padding: 75px 0 50px;

            @media screen and (max-width: 991px) {
                padding: 45px 0 50px;
            }
            .footer-logo {
                width: 326px;
                margin-bottom: 3rem;

                @media screen and (max-width: 1060px) {
                    width: 280px;
                }
                @media screen and (max-width: 991px) {
                    margin: 0px auto 25px;
                }
                img {
                    width: 100%;
                }
            }
            .cn-cities {
                margin-bottom: 3.5rem;

                .city {
                    font-size: 1.8rem;
                    line-height: 30px;
                    margin-bottom: 0;
                }
            }
            .cn-email {
                font-size: 1.6rem;
                margin-bottom: 3rem;
            }
            .footer-social {
                margin-bottom: 3rem;

                .social-links {
                    @media screen and (max-width: 576px) {
                        margin-top: var(--spacing-sm);
                    }
                    li {
                        display: inline-block;
                        margin-right: 2rem;

                        &:last-of-type {
                            margin-right: 0;
                        }
                        a {
                            font-size: 3rem;
                            color: var(--color-white);
                            transition: .2s ease-in-out;

                            &:hover, &:focus-visible {
                                color: var(--color-primary);
                            }
                        }
                    }
                }
            }
            .footer-copyright {
                p {
                    font-size: 1.4rem;
                    color: rgba(var(--color-white-rgb), .5);
                    margin-bottom: 0;

                    br {
                        display: none;

                        @media screen and (max-width: 1150px) {
                            display: block;
                        }
                        @media screen and (max-width: 991px) {
                            display: none;
                        }
                    }
                    a {
                        color: rgba(var(--color-white-rgb), .5);
                        border-bottom: 1px dotted;

                        &:hover, &:focus-visible {
                            color: rgba(var(--color-white-rgb), 1);
                        }
                    }
                }
            }
        }
        .footer-right {
            width: 500px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background: var(--green-black-vertical);
            padding: 100px 80px;

            @media screen and (max-width: 991px) {
                width: 100%;
                height: auto;
                position: relative;
                top: auto;
                right: auto;
                padding: 60px calc(5% + var(--container-padding));
            }
            .footer-nav {
                ul {
                    li {
                        display: block;
                        width: 100%;
                        margin-bottom: 2.5rem;

                        @media screen and (max-width: 991px) {
                            margin-bottom: 2rem;
                        }
                        &:last-of-type {
                            margin-bottom: 0;
                        }
                        a {
                            position: relative;
                            display: inline-block;
                            font-size: 2rem;
                            line-height: 1;
                            font-weight: 800;
                            text-transform: uppercase;
                            letter-spacing: 1.5px;
                            color: var(--color-white);
                            text-decoration: none;

                            &:hover, &:focus-visible {
                                &:before {
                                    opacity: 1;
                                    visibility: visible;
                                }
                                &:after {
                                    opacity: 1;
                                    visibility: visible;
                                    right: -27px;
                                }
                            }
                            &:before {
                                content: '';
                                display: block;
                                width: 100%;
                                height: 2px;
                                position: absolute;
                                bottom: -4px;
                                left: 0;
                                background-color: var(--color-white);
                                opacity: 0;
                                visibility: hidden;
                                transition: .3s ease-in-out;
                            }
                            &:after {
                                content: '';
                                display: block;
                                width: 18px;
                                height: 15px;
                                position: absolute;
                                top: 50%;
                                right: -22px;
                                transform: translateY(-50%);
                                background-image: url('../../svg/arrow-right-white.svg');
                                background-repeat: no-repeat;
                                background-size: cover;
                                opacity: 0;
                                visibility: hidden;
                                transition: .4s ease-in-out;
                            }
                        }
                    }
                }
            }
        }
    }
}