#intro-section {
    padding: 0 6vw;
    width: 100vw;
    height: 31vw;
    display: flex;
    flex-direction: column;
    background-image: url("../images/appointment/intro.jpg");
    background-size: cover;
}
#intro-section h1 {
    color: white;
    font-weight: bold;
    margin: auto 0;
}
@media (max-width: 767px) {
    #intro-section h1 {
        text-align: center;
        font-size: 10vw;
    }
}
@media (max-width: 767px) {
    #intro-section {
        height: 75vw;
    }
}

/* ================================================================= */
/* ================================================================= */

#head-section {
    background-image: linear-gradient(30deg, #093246 50%, #00a3b2, #51b747 100%);
    color: white;
}
#head-section h2 {
    padding: .5rem 6vw;
    font-weight: bold;
}
#head-section .branch {
    display: flex;
    border-radius: 10px;
    border: 1px solid;
    align-items: center;
    cursor: pointer;
}
#head-section .branch:hover,
#head-section .branch.selected {
    background-color: white;
    color: #093246;
}
#head-section .branch h4 {
    border-left: 1px solid;
}

/* ================================================================= */
/* ================================================================= */

#content-section {
    border-bottom: 1px solid;
}

#content-section form input,
#content-section form select,
#content-section form div.select,
#content-section form textarea {
    padding: 1rem 2rem;
    margin: .5rem 0;
    border-radius: 25px;
    width: 100%;
    background-image: none;
}
#content-section form.was-validated div.select.valid {
    border-color: var(--bs-form-valid-border-color);
}
#content-section form.was-validated div.select.invalid {
    border-color: var(--bs-form-invalid-border-color);
}
#content-section form textarea {
    margin: 2rem 0;
}
#content-section #response span {
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
}
#content-section #response span.show {
    display: inline-block;
    visibility: visible;
    opacity: 1;
}
#content-section #response-success {
    color: var(--bs-form-valid-border-color);
}
#content-section #response-failure {
    color: var(--bs-form-invalid-border-color);
}
#content-section form button {
    float: right;
    background-image: linear-gradient(65deg, #123546 40%, #078f9b 80%, #45c33a 100%);
    border: 2px solid white;
    padding: 5px 25px;
    border-radius: 25px;
    color: white;
    line-height: 28px;
}