@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

ul, ol, a {
    list-style: none;
    text-decoration: none;
    color: inherit;
}

video, audio {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* Global */
body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow-x: hidden;
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

section {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 50% 65%, rgba(16, 42, 77, 0.5) 0%, transparent 55%),
        linear-gradient(to bottom, #0a1a2f 0%, #05070d 100%);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    scroll-margin-top: 100px;
}



/* Configuracao Secao Geral*/

#about,
#facades,
#totems,
#slatted,
#brises,
#signs,
#doors,
#marquise,
#pergolas {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   RESPONSIVIDADE
   Base atual = desktop
   Breakpoints:
   - Notebook/PC grande: 1200px+
   - Notebook: até 1199px
   - Tablet: até 991px
   - Celular: até 767px
   - Celular pequeno: até 480px
========================================================= */


/* =========================================================
   CELULAR PEQUENO (<= 900px)
========================================================= */

@media (max-width: 900px) {
    section {
        scroll-margin-top: 104px;
    }

}

/* =========================================================
   CELULAR PEQUENO (<= 768px)
========================================================= */

@media (max-width: 768px) {
    section {
        scroll-margin-top: 84px;
    }

}

/* =========================================================
   CELULAR PEQUENO (<= 480px)
========================================================= */

@media (max-width: 480px) {
    section {
        scroll-margin-top: 64px;
    }

}