@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import "colors.scss";

body {
    background: url(../images/bg-intro-desktop.png) $lightOrange !important;
    background-size: cover;
    color: $white !important;
    text-align: center !important;
    font-family: 'Poppins', sans-serif !important;

    main {
        .container {
            min-height: 100vh;
            font-size: 1rem !important;

            .container-fluid {
                .col-md-6 {
                    text-align: center;

                    h1 {
                        margin-bottom: 1rem;
                        line-height: 1.3;
                        font-size: 1.75rem;
                        font-weight: 700;
                        &:hover {
                            color: $purple;
                        }
                    }

                    .py-3 {
                        font-size: 1em;
                        font-weight: 500;
                        line-height: 1.6;
                    }
                }

                .col-md {
                    .card {
                        margin-bottom: 1.5rem;
                        border-radius: 0.625rem;
                        padding: 1.250rem 0;
                        text-align: center;
                        background-color: $purple;

                        p {
                            margin: 0 !important;
                        }
                    }

                    form {
                        background-color: $white !important;
                        color: $black !important;
                        padding: 0.625rem !important;

                        .col-md-12 {
                            input {
                                height: 3.4rem;
                            }
                        }

                        .show {
                            position: absolute;
                            right: 2.5rem;
                            top: 2.5rem;
                            outline: none;
                            border: none;
                            background-color: transparent;
                        }

                        .btn {
                            background-color: $color-btn !important;
                            box-shadow: inset 0 -0.25rem 0 rgb(0 0 0 / 9%);
                            cursor: pointer;
                            padding: 0.9375rem;
                            width: 100%;
                            text-transform: uppercase;
                            color: white;
                            font-size: 0.9375rem;
                            &:hover {
                                background-color: $purple !important;
                            }
                        }

                        .terms {
                            text-align: center;
                            line-height: 1.9;
                            color: $lightGray;
                            font-size: 0.6875rem;
                            margin-bottom: 0.8rem;

                            a {
                                text-decoration: none;
                                color: $lightOrange;
                                font-weight: 700;

                                &:hover {
                                    color: $purple;
                                }
                            }
                        }
                    }

                }
            }
        }
    }
}

@media (min-width: 768px) {
    .col-md-6 {
        text-align: start !important;

        h1 {
            margin-bottom: 1.5rem;
            line-height: 1.1;
            letter-spacing: -0.03125rem;
            font-size: 3.125rem !important;
        }
    }
}