@use "../utils" as *;

/*=============================
    18. Call-back
===============================*/
.call-back {
    &-area {
        background: var(--tg-color-dark-blue);
        padding: 80px 0 85px;
        position: relative;
        z-index: 1;
        overflow: hidden;
        &-two {
            background: transparent;
            padding: 70px;
            z-index: 2;
        }
    }
    &-wrap {
        background: var(--tg-theme-secondary);
        padding: 90px 80px 75px;
        @include border-radius(15px);
        @media #{$lg} {
            padding: 50px 25px 50px;
        }
    }
    &-content {
        @media #{$md} {
            text-align: center;
            margin-bottom: 30px;
        }
        & .shape {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -1;
            filter: grayscale(45%);
            @media #{$md} {
                display: none;
            }
        }
        & p {
            margin-bottom: 0;
            color: #d0d0dd;
            font-weight: 500;
            width: 90%;
            @media #{$lg} {
                width: 100%;
            }
        }
    }
    &-form {
        & form {
            & .row {
                --bs-gutter-x: 15px;
            }
            & .form-grp {
                margin-bottom: 15px;
                & input {
                    width: 100%;
                    border: none;
                    @include border-radius(4px);
                    color: var(--tg-heading-color);
                    background: var(--tg-color-white-default);
                    font-size: 15px;
                    font-weight: 500;
                    padding: 15px 18px;
                    height: 50px;
                    &::placeholder {
                        font-size: 15px;
                        font-weight: 500;
                        color: #475569;
                    }
                }
            }
            & .btn {
                width: 100%;
                justify-content: center;
                font-size: 16px;
                font-weight: 800;
                text-transform: uppercase;
                padding: 17px 24px;
                @include border-radius(4px);
                &::before {
                    background: var(--tg-color-gray-3);
                }
                &::after {
                    display: none;
                }
                &:hover {
                    color: var(--tg-heading-color);
                    background-color: var(--tg-theme-primary);
                }
                &:disabled {
                    background-color: var(--tg-theme-primary);
                }
            }
        }
    }
}