body {
    background-color: #8C0046;
    color: #fff;
}
.bg-yellow {
    background: #FFE32F;
}
.bg-yellow a:hover {
    color: #616161 !important;
}
.bg-yellow .divider {
    border-top: 3px solid #000000;
}
#calculator-container input,
#calculator-container .input-group-text {
    background: #F5F5F5;
}
.top-footer p {
    color: rgba(255, 255, 255, 0.5);
}
footer {
    background: #fff;
    color: #000;
}
footer a {
    color: #000;
}
button {
    letter-spacing: 0.07em;
}
h1 {
    font-family: Inter, serif;
    font-weight: 400;
    font-size: 39px;
    line-height: 48px;
    letter-spacing: 0.07em;
}
h2 {
    font-family: Inter, serif;
    font-size: 32px;
    line-height: 39px;
    font-weight: 700;
    letter-spacing: 0.07em;
}
a {
    color: #fff;
    text-decoration: none;
}
a:hover {
    color: #cfcfcf;
}
p, span, a, ul {
    font-family: Inter, serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}
label,
#calculator-container p, #calculator-container ul {
    color: #000;
}
.card-footer {
    font-family: Inter, serif;
    font-size: 16px;
    font-weight: 700;
}
.divider,
.divider-header {
    border-top: 3px solid white;
    margin: 0;
}
.g-6 {
    --bs-gutter-x: 4rem;
    --bs-gutter-y: 4rem;
}
.form-error {
    color: #8C0046;
}
.box-result input {
    background: #8C00461A;
}
.result {
    color: #8C0046;
}
#calculator-container {
    background: #fff;
    border-radius: 15px;
    padding: 10px 12px 20px 12px;
}
.input-group-text {
    border-radius: 15px;
    box-shadow: inset -1px 4px 4px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    color: #6C6C6C;
    border-left: 0;
}
#calculator-container input {
    border-radius: 15px 0 0 15px;
    box-shadow: inset 1px 4px 4px rgba(0, 0, 0, 0.2);
    height: 60px;
    border-right: 0;
}
#calculator-submit-btn {
    font-family: Inter, serif;
    background: #8C0046;
    color: #fff;
    font-size: 24px;
    line-height: 29px;
    font-weight: 900;
    padding: 20px 8px 20px 8px;
    border-radius: 15px;
    margin: 20px 0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

#calculator-clear-btn {
    font-family: Inter, serif;
    background: #D9D9D9;
    color: #6C6C6C;
    font-size: 24px;
    line-height: 29px;
    font-weight: 400;
    padding: 20px 8px 20px 8px;
    border-radius: 15px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.btn-light {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}
.btn-check:checked + .btn-light,
.btn-light:hover {
    background-color: #6C6C6C!important;
    border-color: #6C6C6C!important;
    color: #fff!important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}
.btn-check:active + .btn-light {
    background-color: #6C6C6C!important;
    border-color: #6C6C6C!important;
    color: #fff!important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
    p, span, a, ul, label, .form-control, .input-group-text {
        font-size: 23px;
        line-height: 30px;
    }
    #logoKal {
        margin: 30px 0!important;
    }
    #header-bar-title {
        margin-top: 30px;
    }
    .divider-header {
        border-top: unset;
    }
    #box1 {
        margin: 20px 0;
    }
    #box2 {
        margin: 20px 0;
    }
    #box3 {
        text-align: center;
        margin: 20px 0;
    }
}
@media (min-width: 992px) {
    .row.g-lg-6 {
        --bs-gutter-x: 3rem;
        --bs-gutter-y: 3rem;
    }
}