/* MAIN & TEXTS --------------------------------------------------------- */
:root{
    --white: rgb(247, 237, 225);
    --white92: rgba(247, 237, 225, 0.92);
    --white64: rgba(247, 237, 225, 0.64);
    --white32: rgba(247, 237, 225, 0.32);

    --colorlight: rgb(0, 147, 101);
    --colorlight32: rgba(0, 147, 101, 0.08);

    --colormid: rgb(0, 86, 59);
    --colormid16: rgba(0, 86, 59, 0.16);

    --colordark: #003222;
    --colordark80: rgba(0, 50, 34, 0.80);

    --black: rgb(0, 6, 4);
    --black24: rgba(0, 6, 4, 0.24);
    --black48: rgba(0, 6, 4, 0.48);

    /* --white: rgb(255, 255, 255);
    --white64: rgba(255, 255, 255, 0.64);
    --white32: rgba(255, 255, 255, 0.32); */

    /* --colorlight: rgb(182, 203, 255);
    --colorlight32: rgba(182, 203, 255, 0.32);

    --colormid: rgb(35, 98, 255);
    --colormid16: rgba(35, 98, 255, 0.16);

    --colordark: rgb(0, 47, 167);

    --black: rgb(0, 7, 24);
    --black48: rgba(0, 7, 24, 0.48); */
    
    font-size: 16px;
}
/* @font-face {
    font-family: "icon-brand";
    src: url("../fonts/fontawesome/Font\ Awesome\ 6\ Brands-Regular-400.otf");
    font-display: swap;
}
@font-face {
    font-family: "icon";
    src: url("../fonts/fontawesome/Font\ Awesome\ 6\ Pro-Regular-400.otf");
    font-display: swap;
} */
@font-face {
    font-family: "mt";
    font-weight: 700;
    src: url(../fonts/montserrat/Montserrat-Bold.ttf);
    font-display: swap;
}
@font-face {
    font-family: "mt";
    font-weight: 600;
    src: url(../fonts/montserrat/Montserrat-SemiBold.ttf);
    font-display: swap;
}
@font-face {
    font-family: "mt";
    font-weight: 600;
    font-style: italic;
    src: url(../fonts/montserrat/Montserrat-SemiBoldItalic.ttf);
    font-display: swap;
}
@font-face {
    font-family: "mt";
    font-weight: 500;
    src: url(../fonts/montserrat/Montserrat-Medium.ttf);
    font-display: swap;
}

@keyframes showMessageModal {
    0%{
        opacity: 0;
        transform: translateY( calc(-100% - 2rem));
    }

    100%{
        opacity: 1;
        transform: translateY( 0);
    }
}
@keyframes hideMessageModal {
    0%{
        opacity: 1;
        transform: translateY( 0);
    }

    100%{
        opacity: 0;
        transform: translateY( calc(-100% - 2rem));
    }
}

h1, .h1{
    font-family: "mt";
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--colormid);
    width: 100%;
}
section.dark h1, section.dark .h1, section.dark h2, section.dark .h2{
    color: var(--white);
}
h2, .h2{
    font-family: "mt";
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.2;
    width: 100%;
    color: var(--colormid);
}
h3, .h3{
    font-family: "mt";
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.2;
    width: 100%;
}
h4, .h4{
    font-family: "mt";
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    width: 100%;
}
.italic{
    font-family: "mt";
    font-weight: 600;
    font-size: 1.25rem;
    font-style: italic;
}
p, input, textarea, a{
    font-family: "mt";
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
}
.bold, label, strong{
    font-family: "mt";
    font-weight: 600;
    font-size: 1rem;
}
.tag{
    font-family: "mt";
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--colormid);
    border-radius: 0.25rem;
    border: solid 1px  var(--colormid);
    width: fit-content;
    background-color: var(--white);
    line-height: 1;
    text-transform: uppercase;
}
.tags{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* IMAGES --------------------------------------------------------- */
svg.icon{
    flex-shrink: 0;
}
figure{
    border-radius: 1rem;
    overflow: hidden;
}
img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* CONTAINER --------------------------------------------------------- */
body.noscroll{
    overflow: hidden;
}
html{
    scroll-behavior: smooth;
}
section{
    background-color: var(--white);
    position: relative;
}
section.dark{
    background-color: var(--colordark);
}
.container{
    width: 100%;
    max-width: calc(1440px - 8rem);
    margin: auto;
    padding: 8rem 4rem 8rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}
.wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
    justify-content: center;
}
.hidden{
    display: none;
}
/* NOTIFICATION --------------------------------------------------------- */
.notification{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: unset;
    pointer-events: none;
    z-index: 10;
}
.notification .container{
    padding-top: 2rem;
}
.notification p{
    width: 100%;
    text-align: center;
    border-radius: 1rem;
    padding: 1rem;
    background-color: var(--colordark80);
    color: var(--white);
    backdrop-filter: blur(5px);
    border: var(--white) 1px solid;
    font-size: 1.25rem;
    animation: showMessageModal 500ms 500ms 1 backwards, hideMessageModal 500ms 5.5s 1 forwards;
}
/* IMAGE-CARD --------------------------------------------------------- */
.image-card{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--white);
    width: calc(100% / 3 - 2rem * 2 / 3);
    transition: transform 300ms;
}
.image-card figure{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}
.image-card img{
    transition: transform 300ms;
    transform: scale(1.15);
}
.image-card h3{
    color: var(--colormid);
}
.image-card:hover{
    transform: scale(1.0625);
}
.image-card:hover img{
    transform: scale(1);
}
/* SWITCH LANGUAGE --------------------------------------------------------- */
.switchlanguage{
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}
.switchlanguage button{
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    /* padding: 0.5rem 1rem 0.5rem 0.75rem; */
    padding: 0.5rem 0.5rem;
    color: var(--colormid);
    background-color: var(--white64);
    backdrop-filter: blur(1rem);
    border-radius: 0.5rem;
    cursor: pointer;
}
.switchlanguage svg{
    flex-shrink: 0;
}
.switchlanguage path{
    fill: var(--colormid);
}
.switchlanguage button p{
    font-size: 1.125rem;
    line-height: 1.2;
    margin-top: 2px;
    margin-bottom: -1px;
}
.languages{
    width: 100%;
    height: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.25rem 0.5rem;
    color: var(--colormid);
    background-color: var(--white64);
    backdrop-filter: blur(1rem);
    border-radius: 0.5rem;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transition: opacity 300ms, height 300ms;
    border: solid 1px var(--colormid16);
}
.active .languages{
    height: 73px;
    opacity: 1;
}
.languages a{
    border-bottom: solid 1px var(--colormid16);
    width: 100%;
    padding: 0.25rem;
}
.switchlanguage button p, .languages a:last-child{
    border-bottom: unset;
}
@media screen and (max-width: 900px) {
    h1, .h1{
        font-size: 3.5rem;
    }
    h2, .h2{
        font-size: 3rem;
    }
    .container{
        padding: 8rem 2rem 8rem 2rem;
        gap: 3rem;
    }
    .wrapper{
        gap: 2rem;
    }
    .image-card{
        width: calc(100% / 2 - 2rem * 1 / 2);
    }
}
@media screen and (max-width: 600px) {
    h1, .h1{
        font-size: 2.5rem;
    }
    h2, .h2{
        font-size: 2rem;
    }
    h3, .h3{
        font-size: 1.5rem;
    }
    .italic{
        font-size: 1.125rem;
    }
    .container{
        padding: 6rem 2rem;
        gap: 2rem;
    }
    .image-card{
        width: calc(100%);
    }
}
@media screen and (max-width: 450px) {
    .container{
        padding: 6rem 1rem;
    }
    h1, .h1{
        font-size: 2rem;
    }
    h2, .h2{
        font-size: 1.75rem;
    }
}