@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: "New Gerbil";
    src: url('../fonts/New_Gerbil.eot');
    src: url('../fonts/New_Gerbil.woff') format('woff'),
    url('../fonts/New_Gerbil.ttf') format("truetype"),
    url("../fonts/New_Gerbil.ttf") format("svg");
    }

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

body{
    font-family: 'New Gerbil', sans-serif;
    overflow-x: hidden;
    background-color: white;
    transition: 300ms ease-in-out;
}

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

a{
    text-decoration: none;
}

/*a:hover{
    color: #de6211;
}*/

.logotipo{
    width: 3em;
}

.logotipo-mobile{
    width: 2em;
}

.menu-fixo{
    position: fixed;
    top: 0;
    width: 100vw;
    background:#092350;
    z-index: 99;
}

.navbar{
    transition: 300ms ease-in-out;
}

h1{
    font-family: 'Raleway', sans-serif;
    /* color: #707070; */
}

.container{
    width: min(90%, 110em);
    margin-left: auto!important;
    margin-right: auto!important;
}

nav > div > a{
    text-transform: uppercase;
    color: white;
    font-size: 1.2em;
    width: 9em;
    text-align: center;
    font-weight: 500;
}

.webp header{
    position: relative;
    background-image: url('../images/hero-jjsantos.webp');
    background-position: top left;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    margin-top: -5em;
    padding-top: 5em;
    min-height: 55em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.no-webp header{
    position: relative;
    background-image: url('../images/hero-jjsantos.jpg');
    background-position: top left;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    margin-top: -5em;
    padding-top: 5em;
    min-height: 55em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.bg-overlay{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background: rgb(9, 35, 80); */
    opacity: 0.7;
    z-index: 1;
    background: linear-gradient(0deg, rgba(9,35,80,1) 0%, rgba(9,35,80,0.5) 35%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,1) 100%);
}

.main-titles{
    margin-left: 5vw;
    margin-bottom: 5em;
}

.main-titles > h1{
    color: white;
    font-weight: 600;
    position: relative;
    margin-bottom: 1em;
}

.main-titles > h1::after{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.1em;
    width: 1.75em;
    content: '';
    background: #DF5527;
}

.main-titles > div > h2{
    font-size: 5em;
    font-family: 'Raleway', sans-serif;
    color: white;
}

.main-titles > div > h2:nth-child(1){
    font-weight: 900;
    font-family: 'Raleway', sans-serif;
    color: white;
}

.main-titles > div > h2:nth-child(2){
    font-weight: 100;
    font-family: 'Raleway', sans-serif;
    color: white;
}

header > div{
    z-index: 2;
    position: relative;
}

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em 7.5vw;
    /* border-bottom: 2px solid white; */
    z-index: 2;
    position: fixed;
    top: 0;
    width: 100vw;
    font-family: 'Raleway', sans-serif;
}

.empresa-especializada{
    display: flex;
    gap: 5em;
    justify-content: space-between;
    margin: 5em auto 0;
}

.empresa-especializada > div:nth-child(2){
    display: flex;
    flex-direction: column;
    /* gap: 5em; */
    justify-content: space-between;
}

.empresa-especializada > *{
    flex-basis: 100%;
}

.empresa-especializada > div > p{
    font-family: 'Raleway', sans-serif;
    font-size: 5em;
    max-width: 12em;
    color: #092350;
    font-weight: 200;
}

.empresa-especializada > div > p > b{
    font-weight: 900;
}

.webp .empresa-especializada-picl{
    background-image: url('../images/funcionario_especializado.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 40em;
    height: 50em;
}

.no-webp .empresa-especializada-picl{
    background-image: url('../images/funcionario_especializado.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 40em;
    height: 50em;
}

.webp .empresa-especializada-picr{
    background-image: url('../images/bombas-de-furo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* max-width: 35em; */
    height: 28em;
}

.no-webp .empresa-especializada-picr{
    background-image: url('../images/bombas-de-furo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* max-width: 35em; */
    height: 28em;
}

.solucao-necessidades{
    display: flex;
    margin: 5em auto 0;
}

.solucao-necessidades > *{
    flex-basis: 100%;
}

.bomba-de-agua{
    width: 35em;
}

.maintenance-icon{
    width: 3em;
    height: 3em;
}

.webp .banner-categorias{
    position: relative;
    min-height: 30em;
    background-image: url('../images/bombas-de-furo-bg.webp');
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    margin: 5em auto 0;
}

.no-webp .banner-categorias{
    position: relative;
    min-height: 30em;
    background-image: url('../images/bombas-de-furo-bg.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    margin: 5em auto 0;
}

.bg-overlay-categorias{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    background: rgb(9, 35, 80);
    opacity: 0.5;
    z-index: 1;
}

.banner-categorias > h3{
    z-index: 2;
    position: relative;
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 3em;
    width: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
    text-align: center;
}

.banner-categorias > h3:nth-child(3)::after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    /* background-color: red; */
    position: absolute;
    left: -1em;
    background-image: url('../images/SVG/bullet.svg');
}

.banner-categorias > h3:nth-child(4)::after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    /* background-color: red; */
    position: absolute;
    left: -1em;
    background-image: url('../images/SVG/bullet.svg');
}

.banner-categorias > h3:nth-child(6)::after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    /* background-color: red; */
    position: absolute;
    left: -1em;
    background-image: url('../images/SVG/bullet.svg');
}


.areas-de-atuacao{
    display: flex;
    justify-content: space-between;
    margin: 2.5em auto 0;
}

.areas-de-atuacao > div{
    width: 23em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.areas-de-atuacao > div > div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    gap: 2em;
}

.areas-de-atuacao > div > div > h3{
    font-size: 2em;
    font-weight: 900;
    color: #092350;
}

.areas-de-atuacao > div > p{
    font-family: 'Raleway', sans-serif;
    color: #092350;
    font-weight: 500;
    font-size: 1.2em;
}

.solucao-necessidades > div:nth-child(2){
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.solucao-necessidades > div:nth-child(1){
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo-damossolucao{
    font-family: 'Raleway', sans-serif;
    font-size: 5em;
    margin-bottom: 0.5em;
    width: unset!important;
    color: #092350;
    font-weight: 200;
}

.titulo-damossolucao > b{
    font-weight: 900;
}

.texto-damossolucao{
    width: 35em;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2em;
}

.call-icon{
    width: 7em;
    height: 4em;
    background-color: white;
    border-radius: 0 50px 50px 0;
    border: 2px solid #092350;
    border-left: none;
    padding: 0 1.5em 0 3em;
    margin-left: -1.8em;
    transition: 300ms ease-in-out;
}

.btn-conversar{
    position: relative;
    color: white;
    /* font-family: 'New Gerbil', sans-serif; */
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 25em;
    margin-top: 3.5em;
}

.btn-conversar > p{
    background-color: #092350;
    height: 2.7em;
    padding: 0 1em;
    border-radius: 50px;
    display: flex;
    align-items: center;
    z-index: 2;
    color: white;
    transition: 300ms ease-in-out;
    border: 2px solid #092350;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 1.5em;
}

.btn-conversar > p:hover{
    background-color: white;
    color: #092350;
    transition: 300ms ease-in-out;
    border: 2px solid #092350;
    transform: scale(1.05);
}

.logo-parceiros{
    width: 10em!important;
}

.marcas-parceiras{
    display: flex;
    justify-content: space-between;
    margin: 5em auto 0;
}

.webp .footer-jjsantos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    height: 25em;
    font-family: 'Raleway', sans-serif;
    background-image: url('../images/bg-footerjj.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin: 5em auto 0;
}

.no-webp .footer-jjsantos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    height: 25em;
    font-family: 'Raleway', sans-serif;
    background-image: url('../images/bg-footerjj.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin: 5em auto 0;
}

.footer-jjsantos > p{
    font-size: 1.5em;
    color: white;
    z-index: 2;
}

.footer-jjsantos > h2{
    color: white;
    font-size: 3em;
    font-weight: 900;
    z-index: 2;
    cursor: pointer;
}

.bg-overlay-footer{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(9, 35, 80);
    opacity: 0.5;
    z-index: 1;
}

.mosaico-bombas{
    display: flex;
}

.mosaico-bombas > *{
    flex-basis: 100%;
}

/* .grid-left{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* grid-template-columns: 1fr 1fr; 
}*/

.grid-mosaico{
    display: flex;
    flex-wrap: wrap;
    margin: 5em auto 0;
}

.grid-mosaico > div{
    height: 450px;
}

.webp #square1{
    background-image: url('../images/bg-listbombas.webp');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    width: 25%;
}

.no-webp #square1{
    background-image: url('../images/bg-listbombas.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    width: 25%;
}

.webp #square2{
    background-image: url('../images/bomba-amarela.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

.no-webp #square2{
    background-image: url('../images/bomba-amarela.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

.webp #square3{
    background-image: url('../images/piscina.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 50%;
}

.no-webp #square3{
    background-image: url('../images/piscina.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 50%;
}

.webp #square4{
    background-image: url('../images/bomba-vermelha.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

.no-webp #square4{
    background-image: url('../images/bomba-vermelha.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

.webp #square5{
    background-image: url('../images/bomba-pequena.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

.no-webp #square5{
    background-image: url('../images/bomba-pequena.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

.webp #square6{
    background-image: url('../images/bomba-cutout.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

.no-webp #square6{
    background-image: url('../images/bomba-cutout.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 25%;
}

#square7{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.5em;
    gap: 2em;
    width: 25%;
    cursor: pointer;
}

#square7 > p:nth-child(1){
    border: 2px solid #092350;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.2em 0;
    font-size: 2em;
    transition: 300ms ease-in-out;
}

#square7 > p:nth-child(1):hover{
    transform: scale(1.1);
    transition: 300ms ease-in-out;
}

.grid-left > div{
    height: 400px;
    width: 400px;
    /* border: 2px solid red; */
}

.cta-footer{
    display: flex;
    flex-direction: column;
    background-color: #092350;
    padding: 5em;
    gap: 2em;
    margin: 5em auto 0em;
}

.cta-footer > div:nth-child(1){
    color: white;
    font-size: 1.7em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.cta-footer > div:nth-child(1) > p{
    max-width: 90%;
}

.cta-footer > div:nth-child(2){
    display: flex;
    font-size: 2em;
    justify-content: space-between;
    margin-top: 2em;
    width: 90%;
}

.cta-footer > div:nth-child(2) > a{
    color: white;
    text-transform: uppercase;
    border-bottom: 4px solid #32597F;
    display: flex;
    gap: 0.5em;
    align-items: flex-end;
    padding: 0.5em 0;
    position: relative;
}

.cta-footer > div:nth-child(2) > a::after{
    bottom: 0;
}

.cta-footer > div:nth-child(2) > a:hover{
    border-bottom: 4px solid white;
}

.cta-footer > div:nth-child(2) > a > img{
    width: 0.8em;
}

.prefooter{
    display: flex;
    justify-content: space-between;
    font-size: 3em;
    color: #092350;
    margin-top: 2em;
    padding-bottom: 25px;
    border-bottom: 2px solid #092350;
}

.prefooter > a{
    color: #092350;
    position: relative;
    font-family: 'Raleway', sans-serif;
}

.tel-number::after{
    content: 'Chamada para a Rede Fixa Nacional';
    position: absolute;
    left: 0;
    bottom: -1em;
    font-size: 0.29em;
}

footer{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
    text-transform: uppercase;
    margin: 1em auto;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2em;
    font-weight: 500;
}

footer > a{
    color: black;
    border-left: 2px solid black;
    padding-left: 1em;
}

.developed-by{
    color: black;
    border-left: 2px solid black;
    padding-left: 1em;
}

.developed-by > a{
    color: #092350;
    font-weight: 900;
}

.webp .header-sobrenos{
    background-image: url('../images/header-sobrenos-jjsantos.webp')!important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.no-webp .header-sobrenos{
    background-image: url('../images/header-sobrenos-jjsantos.jpg')!important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-sobrenos > p{
    font-family: 'Raleway', sans-serif;
    font-size: 2em;
    color: white;
    max-width: 90vw;
}

.webp .header-contactos{
    background-image: url('../images/fachada-jjsantos.webp')!important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.no-webp .header-contactos{
    background-image: url('../images/fachada-jjsantos.jpg')!important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-alt{
    background: unset!important;
    height: unset!important;
    min-height: unset!important;
}

.header-alt > nav{
    border-bottom: 2px solid #092350!important;
    background-color: #092350;
}

.header-alt > nav > div > a{
    color: white!important;
}

.header-alt > nav > div > a:hover{
    border-bottom: 2px solid white;
}

.menu-active{
    border-bottom: 2px solid white;
}

.menu-active-mobile{
    border-bottom: 2px solid #092350;
    width: fit-content;
}

.navigation-menu{
    display: flex;
    gap: 3em;
}

.whiteText{
    color: white!important;
}

.webp .hero-sobre{
    background-image: url('../images/hero-sobre.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 35em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 5em auto;
    margin-top: 10em;
}

.no-webp .hero-sobre{
    background-image: url('../images/hero-sobre.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 35em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 5em auto;
    margin-top: 10em;
}

.bg-overlay-sobre{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(9, 35, 80);
    opacity: 0.5;
    z-index: 1;
}

.webp .shirt-section{
    background-image: url('../images/sobrenos-shirt.webp');
    background-size: contain;
    background-repeat: no-repeat;
    height: 40em;
    display: flex;
    align-items: flex-end;
    margin: 5em auto 0;
}

.no-webp .shirt-section{
    background-image: url('../images/sobrenos-shirt.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 40em;
    display: flex;
    align-items: flex-end;
    margin: 5em auto 0;
}

.shirt-section > div{
    max-width: 40em;
    background-color: white;
    font-family: 'Raleway', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: fit-content;
    font-size: 1.5em;
    padding: 1em;
    margin-bottom: 2em;
    color: #092350;
}

.sobrenos-second{
    display: flex;
    margin: 5em auto;
    gap: 5em;
    height: 35em;
}

.sobrenos-second > div:nth-child(1){
    flex-basis: 55%;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1em;
    color: #092350;
}

.webp .sobrenos-second > div:nth-child(2){
    flex-basis: 45%;
    background-image: url('../images/sobrenos-maintenance.webp');
    background-size: cover;
    background-repeat: no-repeat;
}

.no-webp .sobrenos-second > div:nth-child(2){
    flex-basis: 45%;
    background-image: url('../images/sobrenos-maintenance.jpg');
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
}

.titles-sobre{
    z-index: 2;
    margin-top: 5em;
}

.text-sobrenos{
    display: flex;
}

.text-sobrenos > *{
    flex-basis: 100%;
}

.text-sobrenos > div:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.text-sobrenos > div:nth-child(1) > h3{
    font-size: 3em;
    max-width: 15em;
}

.text-sobrenos > div:nth-child(2){
    display: flex;
    flex-direction: column;
}

.text-sobrenos > div:nth-child(2) > p{
    font-size: 1.5em;
}

.text-sobrenos > div:nth-child(2) > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin: 2em 0;
}

.text-sobrenos > div:nth-child(2) > div > p{
    width: 100%;
    text-align: justify;
}

.webp .fachada-jj{
    background-image: url('../images/fachada-jjsantos.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50em;
}

.no-webp .fachada-jj{
    background-image: url('../images/fachada-jjsantos.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50em;
}

.titles-candidatura > h1{
    text-transform: unset;
}

.titles-candidatura > h3{
    text-transform: uppercase;
    font-size: 2em;
}

.webp .header-candidatura{
    background-image: url('../images/bg-candidatura.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.no-webp .header-candidatura{
    background-image: url('../images/bg-candidatura.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.scroll-gif-candidatura{
    margin-bottom: 5vh;
}

.text-contact{
    font-size: 1.5em;
    line-height: 1.8em;
    margin: 5em auto;
}

.text-contact > p{
    margin: 0 5em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
    font-family: 'Raleway', sans-serif;
}

.text-contact > p:nth-child(2){
    margin-top: 3em;
    cursor: pointer;
}

.location-icon{
    width: 1em;
}

form{
    margin: 0 5em;
    display: flex;
    flex-direction: column;
}

form > input{
    border: none;
    border-bottom: 3px solid #092350;
    padding: 2em 0;
    font-family: 'Raleway', sans-serif;;
}

.form-submit{
    display: flex;
    justify-content: space-between;
    margin-top: 5em;
}

form > div > button{
    border: none;
    padding: 0.5em;
    width: 7em;
    /* margin-top: 5em; */
    font-size: 1.3em;
    text-align: left;
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    /* transition: 300ms ease-in-out; */
    -webkit-text-fill-color: black;
    color: black;
    position: relative;
}

form > div > button::after{
    content: '';
    width: 1.5em;
    height: 3px;
    bottom: 0;
    left: 0;;
    position: absolute;
    background-color: #DF5527;;
}

form > div > button > img{
    width: 0.8em;
}

form > textarea{
    border: none;
    border-bottom: 3px solid #092350;
    padding: 1.5em 0;
    height: 20em;
    font-family: 'Raleway', sans-serif;;
}

::placeholder{
    font-size: 1.5em;
    color: black;
}

form > input:focus{
    /* font-size: 1em; */
    font-family: 'Raleway', sans-serif;;
}

.titles-produtos > h1{
    text-transform: capitalize;
}

.webp .header-produtos{
    background-image: url('../images/header-osprodutos.webp')!important;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

.no-webp .header-produtos{
    background-image: url('../images/header-osprodutos.jpg')!important;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

.frase-solta{
    margin: 5em auto;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    color: #092350;
}

.selector-produtos{
    display: flex;
    position: relative;
    justify-content: space-between;
    margin: 5em auto;
}

.categoria-selector{
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    top: 7em;
    position: sticky;
    height: fit-content;
}

.categoria-selector > p{
    cursor: pointer;
    color: #092350;
}

.categoria-selector > p:hover{
    font-weight: 900;
}

.selector-ativo{
    font-weight: 900;
    position: relative;
}

.separador-ativo{
    text-decoration: underline;
}

.selector-ativo::before{
    position: absolute;
    content: '';
    width: 1.5em;
    bottom: -3px;
    left: 0;
    height: 3px;
    background-color: #DF5527;
}

.produtos-selector{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2em;
    width: 60vw;
}

.produto-single{
    width: 15em;
}

.nav-mobile{
    display: none;
    align-items: center;
    justify-content: space-between;
    height: 5em;
    padding: 0 2em;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 5;
    transition: 300ms ease-in-out;
}

.nav-mobile > a{
    color: white;
    text-decoration: none;
    font-size: 1.5em;
}

.hamburguer-icon{
    width: 2em;
}

.menu-mobile{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 70vw;
    height: 100vh;
    background: white;
    list-style: none;
    text-align: left;
    padding: 1em;
    z-index: 99;
    flex-direction: column;
    transition: 600ms ease-in-out;
}

.menu-mobile > div{
    padding-bottom: 1em;
}

.menu-mobile-items{
    display: flex;
    flex-direction: column;
}

.menu-mobile-items > a{
    padding: 0.5em;
    margin-bottom: 0.5em;
    color: black;
}

.menu-mobile-over{
    display: none;
    width: 100vw;
    height: 100vh;
    background: #0000006e;
    z-index: 98;
    position: absolute;
    top: 0;
    left: 0;
    transition: 1200ms ease-in-out;
    position: fixed;
}

.close-icon{
    width: 2em;
}

.menu-mobile-top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid black;
    margin-bottom: 2em;
}
.menu-mobile-top > a{
    font-size: 1.5em;
    color: black;
}

.menu-mobile-bottom{
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: absolute;
    bottom: 0;
}

.menu-mobile-bottom > a{
    color: black!important;
}

.fecharMenu{
    left: -100%;
    transition: 600ms ease-in-out;
}

.fecharOverlay{
    left: -100%;
    transition: 1200ms ease-in-out;
}

.form-response{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    text-align: center;
}

.form-response > h1{
    color: #092350;
}

.form-response > p{
    overflow-x: hidden;
}

.form-response > a{
    color: black;
    border-bottom: 4px solid #32597F;
    text-transform: uppercase  ;
}

.main-titles-404{
    display: flex;
    flex-direction: column;
    text-align: center;
    /* height: 50vh; */
    align-items: center;
    justify-content: center;
}

.main-titles-404 > h2{
    font-size: 3em!important;
    color: white;
}

.main-titles-404 > h1{
    font-size: 3em!important;
    text-transform: uppercase;
}

.main-titles-404 > h1::after{
    background: none!important;
}

.main-titles-404 > a{
    color: white;
    border-bottom: 4px solid white;
    text-transform: uppercase  ;
}

.header-404{
    max-height: 100vh!important;
    min-height: 100vh!important;
    align-items: center!important;
    justify-content: center!important;
}

.square-info{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    cursor: pointer;
    transition: 300ms ease-in-out;
}

.square-info > p{
    color: #092350;
    font-size: 1.7em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.menu-mobile-contactos{
    display: flex;
    flex-direction: column;
    margin-top: 3em;
    gap: 1em;
    text-transform: uppercase;
}

.menu-mobile-contactos > a{
    color: black;
    border-bottom: 2px solid #32597F;
    padding: 0.5em;
}

.privacy-policy{
    margin: 10em auto;
}

.privacy-policy > h1{
    color: #092350;
    margin-bottom: 2em;
}

.privacy-policy > div > h2{
    color: #092350;
    margin-bottom: 0.5em;
}

.privacy-policy > div > p{
    color: black;
    margin-bottom: 2em;
}

#gdpr-cookie-message{
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: white;
    z-index: 99;
    gap: 0.5em;
    padding: 1em;
    width: 30em;
    margin: 1em;
    border: 2px solid #092350;
    border-radius: 15px;
}

#gdpr-cookie-message > p{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
}

#gdpr-cookie-message > p > a{
    color: #092350;
}

#gdpr-cookie-accept{
    padding: 0.75em 1.5em;
    background: #092350;
    color: white;
    text-transform: uppercase;
    border-radius: 50px;
    border: none;
}

.mostrar-cookie{
    display: flex!important;
}

#gdpr-cookie-accept{
    cursor: pointer;
}