.noto-sans-oie {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 10;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}


body {
    --bgcolor: rgb(238, 238, 238);
    font-family: "Noto Sans", sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--bgcolor);
    height: 100%;
    overflow-x: hidden;
    min-height: 100vh;
}


.navBar {
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
}

#mobilenavbtn {
    display: none;
}

.buttonsNavDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.navImage {
    height: 4rem;
}

.respButtons {
    outline: none;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: black;
}

footer {
    margin-top: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: black;
    color: white;
    width: 100%;
    height: fit-content;
}

@keyframes rotateCan {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#mobileBars {
    color: black;
}

.navImage:hover {
    animation: rotateCan 2s;
    transform-origin: center center;
}

.menuLink {
    margin: 1rem;
    text-decoration: none;
    color: black;
}

.menuLink:hover {
    text-decoration: underline;
    text-underline-offset: 1.6rem;
    text-decoration-thickness: 0.2rem;
}

.initImage {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 6rem;
}

.LoadingScreen.loading {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bgcolor);
    width: 100vw;
    height: 100vh;
}

body:has(.loading) {
    overflow: hidden;
}

.LoadingScreen {
    display: none;
}

@keyframes path-line {
    0% {
        stroke-dashoffset: 1;
        fill: transparent;
    }
    100% {
        stroke-dashoffset: 0;
        fill: red;
    }
}

.LoadingScreen svg {
    height: 12rem;

}

.LoadingScreen svg path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke: red;
    fill: transparent;
    stroke-width: 2;
    animation: path-line 2000ms ease-in-out infinite;
}

.mainImage {
    width: 35rem;
}

.prodCard {
    padding: 5rem;
    display: flex;
    gap: 4rem;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}

.labelCard {
    font-size: 3rem;
    font-weight: 600;

}

.buttonCard {
    outline: none;
    font-size: 1rem;
    color: black;
    background-color: var(--bgcolor);
    padding: 0.5rem 6rem;
    border: 2px solid black;
    border-radius: 4rem;
    cursor: pointer;
}

.buttonCard:hover {
    background-color: lightgray;
}

.card01 {
    width: 30rem;
    border-radius: 2rem;
}

.footerIMG {
    padding: 50px;
    height: 5rem;
}

.footerBtns {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.footerBtns > .ftrBTN {
    padding: 1rem 2rem;
    opacity: 35%;
    text-decoration: none;
    color: white;
}

.ftrBTN:hover {
    opacity: 100%;
}

body:has(.mobileactive) {
    overflow: hidden;
}

body:has(.mobileactive) .buttonsNavDiv {
    display: flex;
}

#mobileX {
    display: none;
}

body:has(.mobileactive) #mobileX {
    display: flex;
    margin-top: 1.5rem;
    font-size: 1.5rem;
}

body:has(.mobileactive) .rowsNavMobile {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
}

body:has(.mobileactive) .XNavRow {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
}

body:has(.mobileactive) .buttonsNavCol {
    display: flex;
    flex-direction: column;
    font-size: 2rem;
}

.hrNavMob {
    display: none;
}

body:has(.mobileactive) .hrNavMob {
    display: flex;
}

body:has(.mobileactive) .navmobFooterDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.navmobFooterDiv {
    display: none;
}

body:has(.mobileactive) .navmobFooter {
    width: 20rem;
}

@media (max-width: 1280px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 720px) {
    html {
        font-size: 12px;
    }

    .prodCard {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .prodCard:nth-of-type(3) {
        flex-direction: column-reverse;
    }

    .prodCard > div {
        display: flex;
        flex-direction: column;
    }

    .prodCard > img {
        width: 100%;
    }

    .menuLink {
        font-size: 20px;
    }

    .navImage {
        height: 5rem;
    }

    .respButtons {
        font-size: 24px;
    }
}

@media (max-width: 500px) {
    html {
        font-size: 10px;
    }
}

@media (max-width: 1000px) {
    .buttonsNavDiv {
        position: fixed;
        inset: 0;
        background-color: white;
        display: none;
        gap: 2rem;
        padding: min(10rem, 10%);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        z-index: 2;
    }

    .navBar.mobileactive {
        height: 100%;
    }

    .navBar {
        gap: 60%;
    }

    #mobilenavbtn {
        display: block;
    }

    .menuLink:hover {
        text-decoration: underline;
        text-underline-offset: 0.2rem;
        text-decoration-thickness: 0.2rem;
    }
}

.formContainer {
    display: flex;
    color: white;
    margin-block: 2rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem 7rem;
    border-radius: 1rem;
    background-color: firebrick;
}

.formContainer > form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.formContainer > form > input {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    outline: none;
    font-size: 1rem;
}

.formContainer > form > button {
    outline: none;
    border: none;
    background-color: white;
    color: black;
    font-size: 1.5rem;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
}

.formContainer > form > button:hover {
    background-color: var(--bgcolor);
    cursor: pointer;
}


.formContainer > form > input::-webkit-file-upload-button {
    outline: none;
    border: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: white;
    cursor: pointer;
}

.formContainer > form > input::-webkit-file-upload-button:hover {
    background-color: var(--bgcolor);
}


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-inline: 25rem;
    margin-block: 4rem;

    flex-wrap: wrap;
    gap: 4rem;
}

.container > .productCard {
    display: flex;
    justify-content: center;
    padding: 2rem;
    width: 13rem;
    align-items: center;
    flex-direction: column;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 0 0.7rem black;
}

.container > .productCard > img {
    border-radius: 0.4rem;
    object-fit: contain;
    width: 13rem;
    height: 11rem;
}

.createProduct {
    margin-top: 1rem;
    outline: none;
    border: none;
    background-color: firebrick;
    color: white;
    font-size: 1.5rem;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
}

.createProduct:hover {
    background-color: #571111;
    cursor: pointer;
}

.productCard > p:nth-of-type(1) {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
    margin-top: 0.6rem;
}

.productCard > p:nth-of-type(2) {
    margin-top: 0.1rem;
    opacity: 40%;
}

.productCard > p:nth-of-type(3) {
    margin-top: 0.1rem;
    font-size: 1rem;
    font-weight: 400;
}

.productCard > p:nth-of-type(4) {
    font-weight: 600;
    font-size: 2rem;
}

/* ABOUT PAGE */
.mainAbout {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 50vw;
    width: 50rem;
    padding: 2rem;
    z-index: 1;
}

.aboutIMG {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.aboutIMG > img {
    border-radius: 2rem;
    width: 100%;
    height: 35rem;
    object-fit: cover;
}

.overText {
    backdrop-filter: brightness(0.5);
    position: absolute;
    display: flex;
    top: 50%;
    font-weight: 900;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: black 0 0 0.5rem;
    font-size: 3rem;
    left: 50%;
    transform: translate(-50%, -50%);
}

.aboutText {
    width: 100%;
    padding-top: 1rem;
    text-align: start;
}

.pourpose {
    display: flex;
    justify-content: center;
    flex-direction: row;
    padding: 5rem 0;
    gap: 2rem;
}
.pourpose:nth-child(even) {
    flex-direction: row-reverse;
}
.pourpose > img {
    width: 30rem;
    border-radius: 2rem;
}

.pourpose > div {
    width: 25rem;
    padding: 2rem;
    border-radius: 2rem;
    background-color: var(--bgcolor);
    box-shadow: black -4px 4px 1rem;
}

.pourpose > div > h1 {
    font-size: 2rem;
    display: flex;
    gap: 2rem;
}

.pourpose > div > p {
    font-size: 1.5rem;
    display: flex;
    gap: 2rem;
}

/* NEWS */
.news {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
    width: 50%;
}
.aspartame {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.aspartame>p {
    text-align: left;
}
.aspartame > img {
    box-shadow: black 0 0 0.5rem;
    width: 100%;
    height: 35rem;
    border-radius: 2rem;
    object-fit: cover;
}

.contact_container {
    display: flex;
    text-align: center;
    color: black;
    margin-block: 2rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem 7rem;
    border-radius: 1rem;
    background-color: white;
}

.contact_container > form {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.contact_container > form > input, textarea {
    resize: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid black;
    outline: none;
    font-size: 1rem;
}

.contact_container > form > input:invalid, textarea:invalid {
    border: 1px solid red;
}
.contact_container > form > select {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid black;
    outline: none;
    font-size: 1rem;
}

.contact_container > form > a {
    outline: none;
    text-decoration: none;
    border: 1px solid black;
    background-color: white;
    color: black;
    font-size: 1rem;
    padding: 0.5rem 2rem;
    border-radius: 0.5rem;
}
.contact_container > form > a:disabled {
    cursor: auto;
    background-color: var(--bgcolor);
    opacity: 50%;
}

.contact_container > form > a:hover {
    background-color: var(--bgcolor);
    cursor: pointer;
}

@media (max-width: 850px) {
    .pourpose {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .pourpose:nth-child(even) {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .aboutIMG {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
    }

    .aboutIMG > img {
        border-radius: 2rem;
        width: 90%;
        height: 35rem;
        object-fit: cover;
    }

    .overText {
        backdrop-filter: brightness(0.5);
        position: absolute;
        display: flex;
        top: 50%;
        font-weight: 900;
        width: 90%;
        height: 100%;
        border-radius: 2rem;
        text-align: center;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: black 0 0 0.5rem;
        font-size: 3rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .aboutText {
        width: 70%;
        padding-top: 1rem;
        text-align: start;
    }
}