:root {
    --color-light-blue: #d5e7f2;
    --color-light-blue-low-opacity: #d5e7f269;
    --color-dark-blue: #014479;
    --color-blue: #3264a6;
    --color-orange: #e36f23;
    --margin-header-item-bottom: 0.5rem;
    --margin-header-item-side: 2rem;
    --text-primary: var(--color-dark-blue);
    --text-secondary: var(--color-light-blue);
    --background-primary: var(--color-light-blue);
    --background-opacity: var(--color-light-blue-low-opacity);
    --background-contrast: var(--color-dark-blue);
    --divider-primary: var(--color-orange);
}
*,
::before,
::after {
    box-sizing: border-box;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
html,
body {
    font-family: "Roboto", sans-serif;
    height: 100%;
    margin: 0;
    font-weight: 500;
}
.header {
    z-index: 1000;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-color: var(--background-primary);
    align-items: flex-end;
    position: fixed;
    width: 100%;
    padding-bottom: var(--margin-header-item-bottom);
    border-bottom: 2px solid var(--divider-primary);
    box-shadow: 6px 0px 10px rgba(0, 0, 0, 0.3);
}
.header-logo-container {
    margin-left: var(--margin-header-item-side);
    height: 4.0rem;
}
.header-logo-img {
    height: 100%;
    width: 100%;
}
.header-nav {
    display: flex;
    margin-right: var(--margin-header-item-side);
    height: 100%;
}
.wide-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2.4rem;
    margin-bottom: 0.1rem;
    align-items: flex-end;
    display: static;
    list-style-type: none;
}
.wide-menu li {
    flex : 1;
}
#menu-toggle-btn {
    display: none;
    cursor: pointer;
    align-self: flex-end;
}
#menu-toggle-btn svg {
    width: 2rem;
    fill: var(--background-contrast);
}
.header-nav a {
    text-decoration: none;
    color: var(--text-primary);
    vertical-align: bottom;
    font-size: 1.1rem;
}
.header-nav a:hover {
    border-bottom: 2px solid var(--divider-primary);
}

.header-slider {
    display: flex;
    height: 50%;
    width: 100%;
    padding-top: var(--margin-slider);
    background-image: url("../images/TetraSteritube.png");
    background-position: 50% 0;
    background-size: cover;
    justify-content: center;
    align-items: center;
    box-shadow: 6px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
    position: relative;
}
.header-slider-quote-container {
    height: 20rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: var(--background-opacity);
}
.header-slider-quote-container quote {
    text-align: center;
    width: 60%;
    font-weight: 200;
    font-size: 2rem;
}
.slider-quote-arrow {
    width: 100px;
}

.circle-section {
    height: 30rem;
    display: flex;
    justify-content: space-between;
    background-color: var(--background-primary);
}
.circle-section-icon-container {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.circle-section-icon {
    width: 15rem;
    align-self: center;
}
.circle-section-text-container {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--background-contrast);
}
.circle-section-text {
    padding: 6rem;
    text-align: justify;
    vertical-align: middle;
    font-size: 1.2rem;
    color: var(--background-primary);
}
.circle-svg {
    height: 30rem;
    position: absolute;
}

.circle-svg svg {
    height: 100%;
    fill: var(--background-contrast);
}
.right-circle-svg {
    left: -16.3rem;
}
.left-circle-svg {
    right: -16.3rem;
}
.left-circle-svg svg {

    /* filter: drop-shadow(4px 0 2px rgb(0 0 0 / 0.4)); */
    transform: rotate(180deg);
}
.right-circle-svg svg {
    /* filter: drop-shadow(-4px 4px 2px rgb(0 0 0 / 0.4)); */
}

.skills-section {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    z-index: 100;
    position: relative;
    box-shadow: 6px 0px 10px rgba(0, 0, 0, 0.4);
}
.skill-section-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.skill-item {
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-width: 20rem;
    text-align: justify;
    align-items: center;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s;
}

.skill-item:hover {
    /* border: 1px solid #0144794A; */
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
    transition: box-shadow 1s;
}

.skill-item-img-container {
    height: 8rem;
    width: 8rem;
    margin-bottom: 1rem;
}
.skill-item-img-container img {
    width: 100%;
}
h1 {
    color: #014479;
    text-align: center;
    margin-bottom: 4rem;
    font-size: 3rem;
    font-weight: 400;
}
.partners-section {
    background-color: var(--background-primary);
    padding: 3rem;
}
.partners-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 15rem;
    gap: 1rem;
}

.partner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 15rem;
    vertical-align: center;
}
.partner-container img {
    width: 100%;
}
.google-maps-container {
    height: 20rem;
}
.google-maps-frame {
    width: 100%;
    height: 100%;
}
.contact-info-container {
    background-color: var(--background-contrast);
    display: flex;

    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5rem;
    border-top: 4px solid var(--color-orange);
}
.h1-alter {
    text-align: left;
    margin-bottom: 2rem;
    margin-top: 0;
    color: var(--color-light-blue);
}
.contact-address {
    font-weight: 300;
    flex: 1;
}
.contact-address {
    color: var(--color-light-blue);
}
.contact-form-container input {
    width: 100%;

}
.contact-form-container textarea {
    width: 100%;
    height: 4rem;
}
.contact-form-container {
    color: var(--color-light-blue);
    flex:1;
}
.input-container {
    margin-bottom: 1.5rem;
}
.input-container input {
    height: 2.3rem;
}
#contact-submit-btn:hover {
    background-color: #8cc2e4;
}
#contact-submit-btn {
    background-color: var(--background-primary);
    border: 0;
}
.contact-block {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.contact-block-icon {
    width: 2.5rem;
    height: 2.5rem;
}
.contact-block-icon img {
    width: 100%;
    height: 100%;
}
.skill-item-description{
    margin-top: 1rem;
}
#parallax-interlude{
  background-image: url("../images/photo3.jpg");
  min-height: 400px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 1100px) {
    .circle-section-icon {
        display: none;
    }
    .circle-section-text {
        z-index: 100;
    }
    .circle-section-text-right {
        padding: 0 2rem 0 0;
        margin-left: -5rem;
    }
    .circle-section-text-left {
        padding: 0 0 0 2rem;
        margin-right: -5rem;
    }
}

@media (max-width: 800px) {
    #menu-toggle-btn {
        display: block;
    }
    .toggle {
        display: block !important;
    }
    .wide-menu {
        display: none;
        position: absolute;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        top: 3rem;
        left: 0rem;
        width: 100%;
        z-index: 2000;
        background-color: var(--background-primary);
    }
    .wide-menu li {
        gap: 1;
        text-align: center;
        width: 100%;
        height: 100%;
        margin: 2rem 0 2rem 0;
    }
}
@media (max-width: 600px) {
    .contact-info-container{
        flex-direction: column;
    }
}