:root {
    --bs-blue: rgb(146, 39, 143);
    --bs-primary-rgb: 146, 39, 143;
    --bs-primary: #92278f;
}

.btn-primary-n {
    background-color: #92278f;
    color: #fff;
}

.btn-primary-n:hover,
.btn-primary-n:focus,
.btn-primary-n:active {
    background-color: #6e0f6b;
}

.section-hero {
    background: url(bg-op.png);
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.bg-right {
    width: 100%;
    background: url(bg-right.png);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.border-bottom-purple {
    border-bottom: 1px solid #8b2f77;
}

.ff-life-saver {
    font-family: 'Life Savers', cursive;
}

.fs-20 {
    font-size: 20px;
}

.footer {
    border-top: 1px solid #8b2f77;
    border-bottom: 1px solid #8b2f77;
    padding: 20px 0;
}

.form-box {
    width: 100%;
    background: #310049;
    color: #fff;
    margin: 40px auto;
    border-radius: 5px;
    padding: 40px;
}

.form-box .form-control {
    background-color: #550c68;
    color: #fff;
    border-color: transparent;
    padding-left: 0;
}

.form-box .input-group-text {
    background-color: #550c68;
    border-color: transparent;
}

.form-box .form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #FAF9F6;
    opacity: 1;
    /* Firefox */
}

.form-box .form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #FAF9F6;
}

.form-box .form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #FAF9F6;
}

.shadow-effect {
    position: relative;
}

.shadow-effect:before,
.shadow-effect:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 25px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #333;
    -webkit-box-shadow: 0 35px 20px #333;
    -moz-box-shadow: 0 35px 20px #333;
    box-shadow: 0 35px 20px #333;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

.shadow-effect:after {
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
    right: 10px;
    left: auto;
}