@import "./colors";

@media screen and (min-width: 768px) {
    footer {
        .footer-left {
            top: -9.5rem;
            margin-bottom: 0;
        }

        .footer-right {
            padding-left: 4rem;
            .footer-description {
                margin-bottom: 2rem;
            }

            .footer-btn {
                margin-bottom: 2rem;
            }
        }

        .footer-btn {
            margin-bottom: 4.5rem;
        }
    }
}
@media screen and (max-width: 768px) { 
    .footer-right {
        gap: 2rem;
    }
}
footer {
    background: $footer-bg;
    padding-top: 6rem;
    padding-bottom: 1rem;

    .footer-right {

        h2 {
            font-weight: 700;
        }

        .col-6 {
            h2 {
                margin-bottom: 1.2rem;
            }
        }

        .page-links {
            a {
                &:hover {
                    color: #0962EA !important;

                    &::before {
                        content: "\f0da";
                        font-family: "Font Awesome 5 Free";
                        margin-right: 5px;
                        color: #0962EA;
                        font-weight: 900;
                    }
                }
            }
        }


        .field--item {
            color: $footer-links;
            font-family: Open Sans;
            font-size: 1.1rem;
            font-style: normal;
            text-decoration: none;
            font-weight: 600;
            line-height: 1.6rem;
            padding: 5px 0;

            a {
                color: $footer-links;
                text-decoration: none;
                font-family: Open Sans;
            }
        }
    }

    .footer-left {
        margin-bottom: 2rem;
        position: relative;
        z-index: 2;
        padding: 2rem 3rem 1rem 3rem;
        border-radius: 0px 50px;
        background: #FFF;
        box-shadow: 0px 0px 25px 0px rgba(0, 40, 255, 0.15);

        @media screen and (min-width: 992px) { 
            margin-bottom: -6rem;
        }
        @media screen and (max-width: 768px) { 
            padding-bottom: 2rem;
        }
        img {
            max-width: 320px;
            width: 100%;
            object-fit: contain;
        }

        legend {
            display: none;
        }

        fieldset {
            padding: 0.5rem 0;

        }

        .field--name-field-description {
            padding: 2rem 0;
        }

        .fieldset-wrapper {
            display: flex;
            gap: 15px;
        }

        .fieldset-wrapper {
            div div:nth-child(2) {
                font-weight: 700;
                line-height: 1.2rem;
            }

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

        .fa-fw {
            background: linear-gradient(151deg, #0a19a5 -28.78%, #0098ff 81.87%);
            color: $white;
            color: #fff;
            font-size: 24px;
            width: 1rem;
            padding: 0.625rem;
            border-radius: 50%;
            height: 1rem;

        }
    }

}