@use '../utils' as *;

/*=============================
    	26. Loan
===============================*/
.loan {
    &__bg {
        background-size: cover;
        background-position: center;
        background-color: var(--tg-theme-primary);
        position: relative;
        z-index: 1;
    }
    &__form-wrap {
        & .form-grp {
            &.select-grp {
                position: relative;
                &::after {
                    content: "\f078";
                    position: absolute;
                    bottom: 18px;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 700;
                    right: 18px;
                    font-size: 13px;
                    color: var(--tg-color-white-default);
                    line-height: 1;
                }
            }
            & label {
                display: block;
                color: var(--tg-color-white-default);
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 10px;
            }
            & select,
            & input {
                background: rgba(255, 255, 255, 0.17);
                border: 1px solid var(--tg-color-white-default);
                @include border-radius(0);
                font-size: 15px;
                font-weight: 400;
                color: var(--tg-color-white-default);
                &::placeholder {
                    color: var(--tg-color-white-default);
                    font-size: 15px;
                }
            }
            & select {
                width: 100%;
                height: 50px;
                padding: 11px 35px 11px 18px;
                cursor: pointer;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                & option {
                    color: var(--tg-heading-color);
                }
                &:focus {
                    outline: none;
                }
            }
        }
        & button {
            width: 100%;
            background: var(--tg-color-white-default);
            color: var(--tg-theme-primary);
            border: none;
            margin-top: 24px;
            padding: 15px 20px;
            font-size: 17px;
            font-weight: 600;
            text-transform: capitalize;
            box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25);
            &:hover {
                background: var(--tg-theme-secondary);
                color: var(--tg-color-white-default);
            }
        }
    }
    &__shape {
        & img {
            position: absolute;
            z-index: -1;
            &:nth-child(1) {
                left: 0;
                top: 0;
            }
            &:nth-child(2) {
                right: 60px;
                bottom: 80px;
                @media #{$xxl} {
                    right: 20px;
                    bottom: 60px;
                    max-width: 150px;
                }
                @media #{$xl} {
                    right: 10px;
                    bottom: 45px;
                    max-width: 100px;
                }
                @media #{$xs} {
                    display: none;
                }
            }
        }
    }
}