:root {
    --first-color: #06868E;
    --second-color: #FFFFFF;
}

*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
}

@font-face {
    font-family: Montserrat;
    src: url(/assets/fonts/Montserrat/Montserrat-Regular.ttf);
}

  @font-face {
    font-family: MontserratBold;
    src: url(/assets/fonts/Montserrat/Montserrat-ExtraBold.ttf);
}

@font-face {
    font-family: Rosalindale;
    src: url(/assets/fonts/Rosalindale/Roslindale-DisplayBold-Testing.woff2);
}


html, body {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


header {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 93px;
    color:var(--first-color);
}
header h1 {
    text-align: center;
    font-family: MontserratBold;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 89px;
}

.backgroundLogo {
    background-size: cover;
    overflow: hidden;
    height: 800px;
    position: relative;
}

.backgroundLogo video {
    position:absolute;
    left: 0px; 
    top: 0px;
    width: 100%;
    z-index: -1;

}

.logo {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: auto;

}

.logo a {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: auto;
    width: 100%;
    max-width: calc(1400px - 240px);
    margin: auto;
}

.content {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.claim::before {
    content: ' ';
    display: block;
    background: var(--first-color);
    width: 100vw;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: calc(50% - 50vw);
    z-index: -1;
}

.claim {
    color:var(--second-color);
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-top:   34px;
    padding-bottom:   34px;
}


.claim .text {
    margin-top: 54px;
}

.claim h1 {
    text-align: center;
    font-family: MontserratBold;
    font-size: 80px;
    font-style: normal;
    font-weight: 800;
    line-height: 89px;
}

.claim p { 
    text-align: center;
    font-family: Montserrat;
    font-size: 35.5px;
    font-style: normal;
    font-weight: 500;
    line-height: 42px;
}
.line {
    margin-top: 63px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reverse::before {
    content: ' ';
    display: block;
    width: 100%;
    height: 4px;
    background: var(--first-color);
    position: absolute;
    top: 50%;
    right: calc(100% + 50px);
}
.reverse::after {
    content: ' ';
    display: block;
    width: 100%;
    height: 4px;
    background: var(--first-color);
    position: absolute;
    top: 50%;
    left: calc(100% + 50px);
}

.reverse {
    position:relative;
    background: var(--first-color);
    color: var(--second-color);
    width: auto;
    padding: 16px 21px;
    font-family: Montserrat;
    font-size: 38px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    display: inline-block;
    margin:auto;
}

.reverse span {
    font-family: MontserratBold;
}
.line2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 37px;
}
.reverse2 {
    position:relative;
    background: var(--first-color);
    color: var(--second-color);
    width: auto;
    padding: 10px 21px;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    margin:auto;
}


.numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin-bottom: 50px;
}

.number {
    color: var(--first-color);
}

.number:hover {
    text-decoration: none;
}
.number h3 {
    text-align: center;
    font-family: Rosalindale;
    font-size: 109.34px;
    font-style: bold;
    font-weight: 900;
    line-height: normal;
    transition: all 0.5s linear;

}

.number h3:hover {
    transform:scale(1.5);
}

.numbersbox:has(.numbers h3:hover) .numbers h3:not(:hover) {
    filter:blur(5px);
}



.number p {
    text-align: center;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.numbers2 {
    margin-bottom: 100px;
}

footer::before {
    content: ' ';
    display: block;
    background: var(--first-color);
    color: var(--second-color);
    width: 100vw;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: calc(50% - 50vw);
    z-index: -1;
}


footer {
    color:var(--second-color);
    margin:auto;
    max-width: 1400px;
    position:relative;
    padding-top: 30px;
    padding-bottom:30px;
}
.footer {
    margin-left: 118px;
    margin-right: 118px;
    background: var(--first-color);
    color: var(--second-color);
    position:relative;
}

.footer > div {
    display: flex;
    justify-content: space-between;
}

.footer a {
    text-decoration: none;
    color: var(--second-color);
}

.footer a:hover {
    text-decoration: underline;
}

.footer .dirs .mail {
    margin-top: 10px;
}
.footer .dirs {
    align-items: flex-start
}

.footer .dir {
    text-align: right;
}


.footer .info {
    color: var(--second-color);
}

.footer .info h3 {

    font-family: MontserratBold;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 3px;
}

.footer .info h4 {
    font-family: MontserratBold;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
}

.footer .links {
    margin-top: 25px;
    align-items: flex-end;
}

.footer .interns a:nth-child(2) {
    margin-left: 10px; 
    padding-left: 10px;
    border-left: 1px solid var(--second-color);
}

.footer .externs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-weight: bold;
    font-family: MontserratBold;
}

.footer .externs img {
    margin-bottom: 10px;
}


.info {
    color: var(--first-color);
}

.info .claim {
    margin-bottom: 20px;
}

.info a {
    color: var(--first-color);
}

@media only screen and (max-width: 767px) { 
    header h1 {
        font-size: 28px;
        height: auto;
        line-height: 40px;
    }
    .backgroundLogo video {
        height: 240px;
        width: auto;
    }
    .backgroundLogo, .logo {
        height: 240px;
    }

    .logo img {
        width: 70%;
    }

    .claim h1  {
        font-size: 40px;
        font-style: normal;
        font-weight: 800;
        line-height: 49px;
    }

    .claim p {
        font-size: 25.5px;
        font-style: normal;
        font-weight: 500;
        line-height: 35px;
    }
    .reverse {
        text-align:center;
    }

    .numbers {
        display:flex;
        flex-direction: column;
    }

    .footer {
        margin-left: 20px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .footer > div {
        flex-direction: column;
        gap: 20px;
    }

    .footer > div > div {
        gap: 15px;
    }

}