section {
    overflow: visible;
}

section.hero {
    position: relative;
    overflow: hidden;

    z-index: 1;

    height: max-content;
    background-color: var(--hero-bg-light);
}

section.hero h1 {
    font-size: 55px;
    color: var(--primary-light);

    margin-top: 50px;
}

section.hero p {
    width: 100%;

    font-size: 18px;
    font-weight: 300;

    color: var(--primary-dark);
    margin-bottom: 80px;
}

section.hero svg {
    position: absolute;
    scale: -1;

    bottom: -5px;
    left: 0;

    fill: #ffffff;
}

/* ---------- Contacts ---------- */
section.contacts {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;
    gap: 15px;

    /*margin-top: calc(var(--padding) * -2);*/
    padding-bottom: 0;

    user-select: none;
}

section.contacts > div {
    width: 400px;
    height: 300px;

    background-color: var(--hero-bg-lighter);
    border-radius: 5px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    border: 10px solid var(--hero-bg-lighter);
}

section.contacts > div > a.i {
    width: 100%;
    height: 120px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    font-size: 35px;
    color: var(--primary-light);

    padding-top: 35px;
    border-radius: 5px;

    background-color: #ffffff;
}

section.contacts > div > a.i > i {
    transition: 0.3s ease-out;
}

section.contacts > div > a.i:hover i {
    transform: rotateZ(-5deg) scale(1.1);
}

section.contacts > div > h2 {
    font-size: 20px;
    color: var(--primary-light);

    margin-top: 15px;
    margin-bottom: 15px;
}

section.contacts > div > a.link {
    font-size: 18px;
    color: #000000;

    transition: 0.3s ease-out;
    user-select: text;
}
section.contacts > div > a.link:hover {
    color: #b59410;
}

/* ---------- Separator ---------- */
section.or {
    padding: 50px var(--padding) 5px var(--padding);

    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    gap: 15px;
}

section.or h2 {
    font-size: 18px;
    color: var(--primary-light);
    user-select: none;
}

section.or .dash {
    width: 100%;
    height: 5px;

    border-radius: 5px;
    background-color: var(--primary-light);
}

/* ---------- Location ---------- */
section.location {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 15px var(--padding);
    padding-bottom: 50px;
}

section.location > h2 {
    font-size: 35px;
    color: var(--primary-light);
}

section.location > .wrapper {
    width: 100%;
    height: 450px;

    max-width: 815px;
    overflow: hidden;

    border-radius: 15px;
    margin: 15px auto;
}

section.location > .lc {
    display: inline-block;
    text-align: center;

    font-size: 18px;
    color: #000000;

    transition: 0.3s ease-out;
    font-weight: 300;
}

section.location > .lc:hover {
    color: var(--primary-light);
}
section.location > .lc > i {
    font-size: 20px;
    color: var(--primary-light);
}

/* ---------- Shapes ---------- */
.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    z-index: -2;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: #5a1917;
    top: -200px;
    right: -100px;
    animation: float-shape 5s ease-in-out infinite;
}