* {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
}

body {
    background-image: url("./img/gradient-fill-1-mob.png");
    height: 100%;
    background-repeat: no-repeat;
    background-position: left;
}

.page {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.container {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

.letter {
    position: relative;
    text-align: center;
    width: 334px;
    margin: auto;
}

.letter-img-mob {
    width: 100%;
    display: block;
}

.letter-img, .bottom-img, .owl, .box-2 {
    display: none;
}

.owl-mob {
    width: 415px;
    position: absolute;
    bottom: 0;
    left: 19%;
}

.box-2-mob {
    width: 141px;
    position: absolute;
    bottom: 0;
    left: 65%;
}

.letter-bottom {
    position: relative;
    text-align: center;
    width: 334px;
    margin: auto;
}

.bottom-img-mob {
    width: 100%;
}

.bottom-text {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
    font-family: 'Montserrat';
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(62, 62, 62, 0.88);
}

.g-link {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
    font-family: 'Montserrat';
    font-size: 1rem;
    color: rgba(62, 62, 62, 0.88);
}

.form {
    position: absolute;
    top: 38%;
    left: 0;
    right: 0;
    margin: auto;
}

.input {
    border-radius: 20px;
    border-style: hidden;
    padding: 3px 16px;
    font-family: 'Montserrat;
    font-size: 13px;
    font-weight: 600;
    color: black;
}

.button {
    margin-top: 1rem;
    border-radius: 20px;
    border-style: hidden;
    background-color: #38cc54;
    color: white;
    padding: 0.3rem 3rem;
    font-family: 'Montserrat';
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
}

@media only screen and (min-width: 638px) {
    @media only screen and (max-width: 1023px) {
        .letter, .letter-bottom {
            width: 480px;
        }

        .owl-mob {
            width: 596px;
        }

        .box-2-mob {
            width: 203px;
        }

        .form input {
            display: block;
            margin: 15px auto;

        }
    }
}

@media only screen and (min-width: 1024px) {
    body {
        background-image: url("./img/gradient-fill-1.png");
        background-repeat: no-repeat;
        background-position: top left;
    }

    .letter-img-mob, .owl-mob, .bottom-img-mob, .box-2-mob {
        display: none;
    }

    .letter, .letter-bottom {
        width: 663px;
    }

    .letter-img {
        display: block;
        margin-bottom: -1px;
    }

    .bottom-img {
        display: block;
    }

    .owl {
        display: block;
        position: absolute;
        bottom: 0;
        left: 29%;
    }

    .box-2 {
        display: block;
        position: absolute;
        bottom: 0;
        left: 68%;
    }

    .bottom-text {
        top: 20%;
        left: 0;
        right: 40%;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .form {
        top: 48%;
        right: 32%;
    }

    .input {
        width: 360px;
        font-size: 1rem;
        padding: 6px 16px 5px 16px;
    }

    .button {
        padding: 0.3rem 1.5rem;
        margin-left: -105px;
    }
}