.bold {
    font-weight: 700
}

button, .show-password {
    cursor: pointer
}

.show-password {
    width: 18px;
    height: 14px
}

.main-container {
    display: flex;
    min-height: calc(100vh - 64px)
}

.main-container > div {
    width: 50%
}

.main-container .left-col {
    /* background: #08aa3e; */
    background: #f1b424;
    color: rgb(23, 13, 13);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 150px 0;
    position: relative;
    padding: 0 32px
}

.main-container .left-col::before {
    content: '';
    width: 200px;
    height: 200px;
    background: var(--primary-clr);
    position: absolute;
    top: 0;
    right: -200px;
    z-index: -1
}

.main-container .left-col::after {
    content: '';
    width: 200px;
    height: 200px;
    background: #F7FFF6;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1
}

.left-col .content-wrapper {
    width: min(560px, 100%);
    position: relative
}

.left-col .content-wrapper::after {
    content: '';
    background: rgb(9, 8, 8);
    width: 150px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 80px;
    border-radius: 10px
}

.main-container .left-col h1 {
    font: 700 40px/1.5em Inter;
    color: rgb(10, 7, 7);
    margin-bottom: 50px
}

.main-container .left-col p {
    font: 300 20px/1.5em Inter;
}

.left-col a {
    color: hsl(0, 43%, 3%);
    text-decoration: underline;
}

.left-col a:hover {
    color: hsl(0, 43%, 3%);
    text-decoration: underline;
}

.main-container .right-col {
    background: #F7FFF6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 150px 0 0 0;
    position: relative
}

.main-container .right-col::before {
    content: '';
    width: 275px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 40px solid #F7FFF6;
    position: absolute;
    left: -137px;
    bottom: 10vh
}

.right-col .content-wrapper {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.25);
    padding: 75px 50px;
    position: relative;
    z-index: 1
}

.right-col .content-wrapper h2 {
    font: 700 36px/1.5em Inter;
    color: #32325d;
    text-align: center
}

.right-col .content-wrapper .input-row {
    width: 400px
}

.right-col .content-wrapper .label {
    font: 400 18px/1.5em Inter;
    color: #32325d;
    margin-bottom: 5px
}

.right-col .content-wrapper .input-row {
    border-bottom: 1px solid #BFBFBF
}

.right-col .content-wrapper .input {
    margin-bottom: 5px;
    display: flex;
    align-items: center
}

.right-col .content-wrapper .input .form-control {
    padding: 0
}

.right-col .input-icon {
    display: flex;
    align-items: center;
    width: 24px
}

.right-col .content-wrapper input {
    background: unset;
    border: unset;
    width: 100%;
    color: #8898aa
}

.right-col input:focus {
    outline: unset
}

.right-col input::placeholder {
    color: #8898aa;
    opacity: .5
}

.right-col .row-2, 
.row-3,
.right-col button {
    margin-top: 32px
}

.right-col a {
    text-align: right;
    display: inline-block;
    width: 100%;
    color: #8898aa;
    transition: all .1s ease-in-out;
    font-size: 14px
}

.right-col a:hover {
    color: #8898aa
}

.right-col .g-recaptcha {
    transform-origin:0 0;
}

.right-col button {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    color: white;
    background: var(--primary-clr);
    border: none;
    font: 700 18px/1.5em Inter
}

.right-col button:focus {
    outline: none
}

@media (max-width: 1200px) {
    .main-container {
        flex-direction: column;
        background: var(--primary-clr);
    }

    .main-container > div {
        width: 100%;
    }

    .main-container .left-col, .main-container .right-col {
        border-radius: unset
    }

    .main-container .left-col::before {
        content: unset
    }

    .main-container .left-col .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2.5rem 0
    }

    .main-container .left-col .content-wrapper::after {
        left: 50%;
        top: 120px;
        transform: translateX(-50%)
    }

    .main-container .right-col {
        background: var(--primary-clr);
        height: 100%;
        margin-bottom: 5rem
    }
}