/*=======  Footer section  css start here =========*/


.footer-section {
    @extend %of-hidden;

    &.light-version {

        h4,
        h5,
        p {
            color: $black-color;
        }

        a {
            color: $black-color;

            &:hover {
                color: $theme-color;
            }
        }

        .footer-top .footer-newsletter {
            border-bottom: 1px solid rgba($black-color, $alpha: 0.15);
        }

        .footer-top form input {
            background-color: rgba($white-color, $alpha: 0.5);
            color: $black-color;

            &::placeholder {
                color: #555;
            }
        }
    }
}

.footer-top {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;


    .footer-newsletter {
        border-bottom: 1px solid $border-color;
        padding-block: 50px;

        @include breakpoint(lg) {
            padding-block: 60px;
        }
    }

    .ft-header {
        @extend %mb-20;

        @include breakpoint(lg) {
            margin-bottom: 30px;
        }
    }

    form {
        @extend %p-rel;

        input {
            @extend %w-100;
            background: rgba($white-color, $alpha: .15);
            height: 60px;
            padding: .5rem 1.5rem;
            color: $white-color;
            font-size: 1rem;
            @extend %text-bold;
            border-radius: 2px;

            &::placeholder {
                color: $white-color;
            }

        }

        input,
        button {
            border: none;
            outline: none;
            box-shadow: none;
        }

        button {
            @extend %p-abs;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            height: 50px;
            padding-inline: 1.5rem;
            border-radius: 2px;
            background: $theme-color;
            color: $white-color;
            @extend %text-bold;
            text-transform: uppercase;
            transition: $transition;

            &:hover {
                background: darken($theme-color, $amount: 10);
            }
        }
    }

    .social-list {
        gap: 20px;

        .social-link {
            a {
                background: $theme-color;
                color: $white-color;
                width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 2px;
                font-size: 20px;
                @extend %text-center;


                @include breakpoint(lg) {
                    height: 50px;
                    width: 50px;
                    line-height: 50px;
                }

                &:hover {
                    border-radius: 99px;
                    background: darken($theme-color, $amount: 10);
                }
            }
        }
    }
}

//* Footer link item
.footer-link-item {
    h5 {
        @extend %mb-20;
    }

    .footer-link-list {
        @extend %mb-0;

        .footer-link {
            @extend %p-rel;
            padding-block: 5px;
            @extend %pl-25;


            &:before {
                @extend %p-abs;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 2px solid $theme-color;
                left: 0;
                top: 50%;
                transform: translateY(-50%);

            }
        }
    }
}

.footer-section {
    &.style-2 {
        .footer-top {
            form {
                button {
                    background-color: $theme-color-2;
                    color: $black-color;

                    &:hover {
                        background-color: darken($theme-color-2, $amount: 10);
                    }
                }
            }

            .social-link {
                a {
                    background-color: $theme-color-2;
                    color: $black-color;

                    &:hover {
                        background-color: darken($theme-color-2, $amount: 10);

                    }
                }
            }
        }

        .footer-link-item {
            .footer-link {
                &:hover {
                    color: $theme-color-2;
                }

                &:before {
                    border-color: $theme-color-2;
                }
            }
        }

        .footer-bottom {
            a {
                &:hover {
                    color: $theme-color-2;
                }
            }
        }
    }
}