#contact-info-box {
    flex-direction: column-reverse;
}

.flex-row#contact-info-box #contact-info-content h1 {
    margin: 8.5vh 0 8.8vh .1%
}

.flex-row#contact-info-box .contact-info h2 {
    font-size: calc(0.5vw + 1.1vh + 1.4vmin)
}

.flex-row#contact-info-box .contact-info p {
    font-size: calc(0.35vw + 0.72vh + 0.9vmin)
}

.flex-row#contact-info-box .contact-info:not(:last-child) {
    margin-right: 10.2%
}

.flex-row#contact-info-box .contact-info:last-child {
    margin-left: 4.8%
}

.flex-column#contact-info-box {
    height: auto
}

.flex-column#contact-info-box #contact-info-content {
    padding-bottom: 4vh
}

.flex-column#contact-info-box #contact-info-content h1 {
    text-align: center;
    margin: 8.5vh 0 2.8vh .1%
}

.flex-column#contact-info-box #contact-info-list {
    flex-direction: column
}

.flex-column#contact-info-box .contact-info h2,
.flex-column#contact-info-box .contact-info p {
    text-align: center
}

.flex-column#contact-info-box .contact-info h2 {
    font-size: calc(0.5vw + 1.3vh + 1.6vmin);
}

.flex-column#contact-info-box .contact-info p {
    font-size: calc(0.35vw + 0.92vh + 1.1vmin);
}

.flex-column#contact-info-box .contact-info:not(:last-child) {
    margin-bottom: 2.5vh
}

#contact-info-bg {
    width: 100%;
    height: 50vh;
    background-image: url("../img/blue-lights.png");
    background-size: cover;
    background-position: 11% 50%;
    background-repeat: no-repeat
}

#contact-info-content {
    display: flex;
    flex-direction: column;
    width: 88.6%;
    min-height: 50vh;
    background-color: #17203b;
    padding: 0 5.7%
}

#contact-info-content h1 {
    color: #ccac7c;
    font-size: calc(1.9vw + 3vh + 2vmin)
}

#contact-info-list {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.contact-info {
    display: flex;
    flex-direction: column
}

.contact-info h2 {
    font-size: clamp(1.1rem, 1.4vw, 2rem);
    color: #ccac7c;
    margin-top: 0;
    margin-bottom: 1.1vh;
}

.contact-info p {
    font-size: clamp(1rem, 1.1vw, 2rem);
    color: #eeead6;
    margin-top: 0;
    margin-bottom: 0
}

@media (max-width: 768px) {
    .contact-info h2 {
        text-align: center;
    }

    .contact-info p {
        text-align: center;
    }
}

.contact-info a {
    color: #eeead6;
    text-decoration: none
}

.contact-info a:hover {
    text-decoration: underline
}

.contact-info a:active {
    color: #eeead6
}