/* Modal Contact Form     */
/* ---------------------- */
.modal-content {
    background-color: transparent;
    color: #fff;
}

.modal-header {
    background-color: rgba(21, 14, 31,1);
    justify-content: center;
    border: none;
}

.modal-body {
    background-color: rgba(21, 14, 31,1);
}

.btn-close {
    --bs-btn-close-color: var(--color--white-primary)!important;
}

.form-control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color--white-primary);
    color: var(--color--white-secondary);
    border-radius: 0;
}
.form-control:focus {
    color: var(--color--white-primary);
}

.modal-title {
    font-size: 2.813rem;
    font-family: var(--font-family--open-sans   );
    font-weight: 700;
    color: var(--color--white-primary);
    margin-top: 0rem;
}

.form-label {
    font-size: 1.125rem;
    font-weight: 600;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-control:focus {
    background-color: transparent;
}

select {
    background-color: transparent;
}

.form-select {
    background-color: transparent;
    border: none;
    color: var(--color--white-secondary);
    border-bottom: 1px solid var(--color--white-secondary);
    border-radius: 0;
    margin-bottom: 2rem;
}

.form-select option {
    color: var(--color--white-secondary);
    background-color: rgba(21, 14, 31,1)!important;    
}

.form-select option:hover {
    background-color: var(--color--secondary)!important;
}

.form-select option:active {
    background-color: red;
}

.modal-footer {
    background-color: rgba(21, 14, 31,1);
    border: none;
}

.btn__form {
    background-color: transparent;
    border: none;
    color: var(--color--white-primary);
    font-size: 2rem;
}

.custom-select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
}

textarea {
    color: var(--color--white-secondary)!important;
}

textarea.form-control {
    border: 1px solid var(--color--white-secondary);
    height: 100%;
    border-radius: 10px;
    border-top-right-radius: 0;
    color: var(--color--white-secondary);
    margin-bottom: 2rem;
}

.form-check {
    background-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px;
    margin-right: 2rem;
}

.form-check-label {
    font-size: 1.125rem;
    font-weight: 500;
    cursor: pointer;
}

.form-check-label:hover {
    color: var(--color--secondary);
}

.form-check-input {
    border: 1px solid var(--color--white-secondary);
    background-color: transparent;
    margin-right: 5px;
    cursor: pointer;
}

#creativevideo:checked .form-check-label.active {
    box-shadow: 0 2px 15px 0 #bee545 !important;
}

.form__btn {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--color--white-primary);
    font-size: 0.798rem;
    text-transform: uppercase;
    padding: 0.938rem 2.875rem;
    letter-spacing: 0.125rem;
    transition: all .3s;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 5px 9px 0 rgba(91,205,255,.21);
    margin-top: 4rem;
}

.form__btn:hover {
    color: var(--color--white-primary);
    background-color: var(--color--secondary);
    border-color: var(--color--secondary);
    text-decoration: none;
}