/* Padding for desktop */
:root {
    --vertical-section-padding: 6vw;
    --horizontal-section-padding: 15vw;
}

/* Media query for mobile */
@media (max-width: 768px) {
    :root {
        --vertical-section-padding: 5vw;
        --horizontal-section-padding: 4vw;
    }
}

.text-box {
    position: absolute;
    width: calc(100vw - var(--side-padding) - var(--side-padding));
    display: flex;
    flex-direction: column;
    height: 100%;
}

.text-box:before {
    display: block;
    content: '';
    /* display: inline-block; */
    /* height: 100%; */
    /* vertical-align: middle; */
}

.bg-circle {
    max-width: 70%;
}

.get-in-touch a+a {
    margin-left: 56px;
}

.first-section {
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: var(--primary);
}

.second-section {
    display: flex;
    flex-direction: column;
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: var(--grey-100);
}

.third-section {
    display: flex;
    flex-direction: column;
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: var(--grey-100);
}

.fourth-section {
    display: flex;
    flex-direction: column;
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: var(--primary);
}

.fifth-section {
    display: flex;
    flex-direction: column;
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: var(--grey-100);
}

.sixth-section {
    display: flex;
    flex-direction: column;
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: var(--grey-100);
}

.seventh-section {
    display: flex;
    flex-direction: column;
    padding: var(--vertical-section-padding) var(--horizontal-section-padding);
    background-color: var(--primary);
}