/* === OZ STYLES === */
/*
 * This file contains custom styles for the OZ theme.
 * It includes overrides for default styles and additional customizations.
 */
/* === RESETS && TAGS === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "main" "footer";
    width: 100vw;
    height: 100vh;
    font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: var(--txt-body);
    line-height: normal;
    letter-spacing: 0.08rem;
    -webkit-text-size-adjust: 100%;
    background: var(--bkg-body);
}

body.no-scroll {
    overflow: hidden;
}

header {
    position: fixed;
    width: 100%;
    height: auto;
    background: var(--bkg-header);
    backdrop-filter: blur(8px);
    z-index: 1000;
}

main {
    display: grid;
    grid-area: main;
    align-content: start;
    padding: var(--main-padding);
    width: 100%;
    height: 100%;
    background: var(--bkg-main);
}

footer {
    display: grid;
    grid-area: footer;
    width: 100%;
    height: auto;
    padding: 0.5rem;
    background-color: var(--bkg-footer);
}

img {
    display: block;
    border-style: none;
    width: 100%;
}

button {
    all: unset;
    cursor: pointer;
}

a {
    display: flex;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p, span {
    display: flex;
    width: 100%;
    word-break: normal;
    white-space: none;
}

input,
textarea,
select {
    display: flex;
    padding: 0.2rem;
    outline: none;
    border: none;
    box-shadow: none;
    background-color: green;
    transition: var(--transition-all);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    background-color: #1a252f;
}

input:hover,
textarea:hover,
select:hover {
    outline: none;
    background-color: #d32f2f;
}

/*input[data-type="cel"] {
    display: flex;
    align-self: center;
    justify-self: center;
    text-align: center;
    font-weight: 500;
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.3rem 0.5rem;
    color: black;
}*/

/* === RESETS && TAGS MEDIA QUERIES === */
@media (max-width: 768px) {
    html::-webkit-scrollbar {
        display: none;
    }

    html, body {
        font-size: 14px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* ------------------------------------------------------------------- */
/* === N FONTS === */
.n-font-roboto {
    font-family: 'Roboto', sans-serif;
}

.n-font-source {
    font-family: 'Source', serif;
}

/* ------------------------------------------------------------------- */
/* === N BOXES === */
/* === GRID === */
.n-grid {
    display: grid;
    height: auto;
    margin: 0 auto;
    padding: var(--padding);
    width: 100%;
}

.n-grid-fluid {
    display: grid;
    height: auto;
    margin: 0 auto;
    width: 100%;
}

.n-grid-item-1 {
    grid-template-columns: 1fr;
}

.n-grid-item-2 {
    grid-template-columns: 1fr 1fr;
}

.n-grid-item-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* === FLEX === */
.n-flex {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
}

.n-flex-fluid {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
}

.n-flex-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

/* --- */
.n-flex-item-1 {
    display: flex;
    flex: 1;
}

.n-flex-item-2 {
    display: flex;
    flex: 2;
}

.n-flex-item-3 {
    display: flex;
    flex: 3;
}

/* --- */
.n-flex-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* === LAYERS === */
.n-layer {
    position: relative;
}

.n-layer .layer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n-layer-z-1 {
    z-index: 1;
    top: 1rem;
    left: 1rem;
}

.n-layer-z-2 {
    z-index: 2;
}

.n-layer-z-3 {
    z-index: 3;
}

/* === N BOXES ATTRIBUTES === */
.n-width-full {
    width: 100%;
}

.n-width-fit-content {
    width: fit-content;
}

.n-width-max {
    max-width: var(--max-width);
}

/* --- */
.n-gap-05 {
    gap: var(--gap);
}

/* --- */
.n-x-left {
    justify-content: start;
}

.n-x-left-fluid {
    justify-content: start;
}

.n-x-center {
    justify-content: center;
}

.n-x-right {
    justify-content: end;
}

.n-x-right-fluid {
    justify-content: end;
}

/* --- */
.n-y-top {
    align-items: start;
}

.n-y-center {
    align-items: center;
}

.n-y-bottom {
    align-items: end;
}

/* --- */
.n-radius {
    border-radius: var(--radius);
}

/* === N BOXES MEDIA QUERIES === */
@media (max-width: 768px) {
    .n-grid-fluid {
        justify-content: center;
    }

    .n-grid-item-2, .n-grid-item-3 {
        grid-template-columns: 1fr;
    }

    .n-x-left-fluid, .n-x-right-fluid {
        justify-content: center;
    }

    .n-flex-fluid {
        display: flex;
        flex-direction: column;
        width: fit-content;
        margin: 0 auto;
    }

    .n-flex-item-2, .n-flex-item-3 {
        display: flex;
        flex: 1;
    }
}

/* ------------------------------------------------------------------- */
/* === FRAMES === */
/* --- MAIN MAX WIDTH --- */
.n-frame-max-width {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: var(--max-width);
    height: auto;
    margin: 0 auto;
    padding: var(--padding);
}

/* --- BETWEEN --- */
.n-frame-between {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------- */
/* === SVG === */
/* --- LOGO SVG --- */


/* ------------------------------------------------------------------- */
/* === ATTRIBUTES === */
/* --- FILL --- */
.n-fill-black {
    fill: var(--fill-black);
}

.n-fill-white {
    fill: var(--fill-white);
}

.n-fill-color-1 {
    fill: var(--fill-color-1);
}

.n-fill-color-2 {
    fill: var(--fill-color-2);
}

.n-fill-color-3 {
    fill: var(--fill-color-3);
}

.n-fill-color-4 {
    fill: var(--fill-color-4);
}

/* --- WIDTH --- */
.n-width-0_8 {
    width: 0.8rem;
}

.n-width-1_0 {
    width: 1rem;
}

.n-width-1_7 {
    width: 1.7rem;
}

.n-width-2_0 {
    width: 2rem;
}


/* ------------------------------------------------------------------- */
/* === EXTRA === */
/* --- EMPTY --- */
.n-empty {
    display: none;
}

/* --- SPACERS --- */
.n-spacer-05 {
    height: 0.5rem;
}

.n-spacer-1 {
    height: 1rem;
}

/* --- BORDER --- */
.n-border {
    border: 1px solid black;
}

/* --- SHADOW --- */
.n-shadow {
    box-shadow: var(--shadow);
}