/* Custom rules */

:root {
    --bs-body-bg: #fff;
}

.contact-form-style-03 input, .contact-form-style-03 textarea {
    outline: none;
    border: none;
    border-bottom: 1px solid;
    background: var(--bs-body-bg);
}

.branded-form .df-card {
    border: 0;
    border-radius: 28px;
    box-shadow: 0 30px 70px -30px rgba(35, 35, 35, .18);
}
.branded-form .form-floating > .form-control,
.branded-form .form-floating > .form-select {
    min-height: 64px;
    border-radius: 999px;
    border: 1px solid #969595;
    padding: 1.65rem 1.6rem .55rem;
    background-color: #fff;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.branded-form .form-floating > .form-control:hover,
.branded-form .form-floating > .form-select:hover { border-color: #c9d2e6; }
.branded-form .form-floating > .form-control:focus,
.branded-form .form-floating > .form-select:focus {
    border-color: var(--base-color, #2946f3);
    box-shadow: 0 0 0 .22rem rgba(41, 70, 243, .12);
}
.branded-form .form-floating > label {
    padding: 1.15rem 1.7rem;
    color: #8892a6;
    font-weight: 500;
}
.branded-form .form-floating > .form-control:focus ~ label,
.branded-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
.branded-form .form-floating > .form-select ~ label {
    transform: scale(.8) translateY(-.65rem) translateX(.55rem);
    color: #57647a;
    opacity: 1;
}
.branded-form .form-control.is-invalid,
.branded-form .form-select.is-invalid { border-color: var(--red, #dc3131); }
.branded-form .invalid-feedback { padding-left: 1.7rem; font-size: .82rem; }
.branded-form .df-hint { padding-left: 1.7rem; font-size: .82rem; color: #8892a6; }

.branded-form .df-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: var(--solitude-blue, #f0f4fd);
}
.branded-form .df-segment.df-segment-block { display: flex; }
.branded-form .df-segment .btn-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.branded-form .df-segment label {
    margin: 0;
    padding: .62rem 1.7rem;
    border-radius: 999px;
    font-weight: 600;
    color: #57647a;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.branded-form .df-segment.df-segment-block label { flex: 1 1 0; text-align: center; }
.branded-form .df-segment .btn-check:checked + label {
    background: var(--base-color, #2946f3);
    color: #fff;
    box-shadow: 0 10px 22px -6px rgba(41, 70, 243, .5);
}
.branded-form .df-segment .btn-check:focus-visible + label { outline: 2px solid rgba(41, 70, 243, .45); outline-offset: 2px; }

.branded-form .df-panel {
    border: 1px dashed #d3ddf1;
    border-radius: 22px;
    padding: 1.4rem 1.5rem;
    background: #fbfcff;
}
.branded-form .df-file { border-radius: 18px; padding: .8rem 1rem; min-height: 54px; border: 1px solid var(--extra-medium-gray, #e4e4e4); }
.branded-form .df-check .form-check-input { width: 1.3rem; height: 1.3rem; margin-top: .1rem; border-radius: 8px; }
.branded-form .df-check .form-check-input:checked { background-color: var(--base-color, #2946f3); border-color: var(--base-color, #2946f3); }
.branded-form .df-eyebrow { font-size: .78rem; letter-spacing: .12em; }
.branded-form .df-submit {
    min-height: 62px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--base-color, #2946f3);
    border-color: var(--base-color, #2946f3);
    box-shadow: 0 16px 34px -12px rgba(41, 70, 243, .55);
}
.branded-form .df-submit:hover:not(:disabled) { filter: brightness(.94); }

.branded-form .df-detail { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid #eef1f6; }
.branded-form .df-detail:last-child { border-bottom: 0; }
.branded-form .df-detail dt { color: #8892a6; font-weight: 500; margin: 0; }
.branded-form .df-detail dd { color: var(--dark-gray, #232323); font-weight: 700; margin: 0; text-align: right; }

/* Responsive */
@media (max-width: 1600px) {
    section.big-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}