/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
}

a{color: #f1f1f1;}

body {
    font-family: "Source Sans 3", sans-serif;
    color: #333;
}

.branco{color:#fff;}
.laranja{color:#FF671A;}
.preto{color:#000;}

h1{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 80px;
   display: inline-block;
    line-height: 1;
}

h2{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 38px;
   display: inline-block;
    line-height: 1;
}

h3{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 23px;
   display: inline-block;
}

p{
    font-family: "Source Sans 3", sans-serif;
    font-size: 18px;
   display: inline-block;
}

div.interno{
    width: 1350px;
    height: auto;
    margin: 0 auto;
}

/* Header */
header.desktop {
    height: 115px;
    width: 100%;
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px;
    position: fixed;
    z-index: 99;
}

header div.interno{
    display: flex;
    align-items: center;
    justify-content: space-between;
}



#logo {
    width: 180px;
    height: 80px;
    background: url('img/logo.png') no-repeat center;
    background-size: contain;
     display: inline-block;
}

nav {
    float: right;
    width: auto;
    height: 50px;
    display: flex;
    align-items: center;
}

a#menu{
   display: inline-block;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 23px;
    margin-right: 20px;
    width: auto;
    height: 35px;
}

a#menu.ativo{
   border-bottom:5px  solid #FF671A;
}

#botao_header {
    width: 150px;
    height: 50px;
    float: right;
    background: #FF671A;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 23px;
}

#botao_header:hover {
    background: #923609;
}

/* Seção Hero */
#hero_section {
    background: url('img/hero-bg.jpg') no-repeat center center/cover;
    color: white;
    display: inline-block;
    width: 100%;
    height: 700px;
}

#conteudo_interno{
    width: 100%;
    float: left;
    min-height: calc(100vh - 400px) ;
    padding: 50px 0;
    background: #fff;
}

#wrap_contato{
    margin-top: 20px;
}

#wrap_texto{
    margin-top: 20px;
}


#coluna1{
    display: inline-block;
    float: left;
    width: 45%;
}

#coluna2{
    display: inline-block;
    float: right;
    width: 45%;
}

#coluna_tri1{
    display: inline-block;
    float: left;
    width: 28%;
}
#coluna_tri2{
    display: inline-block;
    float: left;
    width: 28%;
}
#coluna_tri3{
    display: inline-block;
    float: left;
    width: 28%;
}


#hero_section_interno{
    background: url('img/hero-bg.jpg') no-repeat center center/cover;
    color: white;
    display: inline-block;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
}  

#hero_section_interno h1{
    margin-top: 120px;
}

#hero_text{
   display: inline-block;
    height: auto;
    width: 500px;
    margin: 200px 0 0 00px;
}

#hero_text h2{
    font-size: 25px !important;
}

a#botao_principal{
    width: 200px;
    height: 60px;
   display: inline-block;
    background: linear-gradient(to right, rgba(255, 103, 26, 1) 0%,rgba(87, 27, 0, 1) 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 30px;
    margin-top: 20px;
    float: left;
}


#botao_principal:hover {
    background: #923609;
}

a#botao_secundario{
    width: 200px;
    height: 60px;
   display: inline-block;
    color: #FF671A;
    border: 3px solid #FF671A;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 30px;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

#botao_secundario:hover {
    color: #923609;    
    border: 3px solid #923609;

}

/* Seção Sobre Nós */
#sobre_nos_section {
    color: white;
   display: inline-block;
    width: 100%;
    height: 400px;
    padding: 0 00px;
}

#conteudo_interno div.interno{
    display: flex;
    justify-content: space-between;
}

#sobre_nos_text{
   display: inline-block;
    height: auto;
    width: 500px;
    margin: 75px 0 0 00px;
}

#sobre_nos_text p{
    margin-top: 10px;
}

a#link_interno {
   color: #565656;
  display: inline-block;
   font-family: "Bebas Neue", sans-serif;
   font-size: 23px;
   font-weight: 500;
   text-decoration: underline;
   margin-top: 10px;
}

/* Seção Cardápio */
#cardapio_section {
    background: #F2E1D7;
    display: inline-block;
    width: 100%;
    height: 900px;
    padding:50px 00px;
}

#cardapio_section h2 {
    display: block;
    text-align: center;
    margin: 00px auto 50px auto;

}

#box_cardapio_wrap{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#box_cardapio {
    width: 32%;
    display: flex;
    padding: 20px;
    height: auto;
    background-color: #f1f1f1;
    border-radius: 15px;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

#tumb_cardapio{
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 10px;    
}

#box_cardapio h3{
    color: #FF671A;
    font-size: 30px;
    margin-top: 10px ;
}

#box_cardapio p{
    text-align: center;
    margin-bottom: 10px;
}

#botao_principal_cardapio{
    width: 350px;
    height: 60px;   
    background:#FF671A;
    color: #fff;
    text-decoration: none;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
    font-size: 30px;
    margin: 50px auto 0 auto;
}

#botao_principal_cardapio:hover{
    background: #923609;    
}


/* Seção Nossa História */
#nossa_historia_section {
    background: #fff;
    display: inline-block;
    width: 100%;
    height: 400px;
    padding: 60px 00px;
    display: flex;
    justify-content: center;
}

#nossa_historia_section div.interno{
    display: flex;
    justify-content: center;
    align-items: center;
}

#nossa_historia_section img{
    float: left;
    width: 380px;
}

#nossa_historia_text{
    display: inline-block;
     height: auto;
     width: 500px;
     margin: 20px 0 0 40px;
 }
 
 #nossa_historia_text p{
     margin-top: 10px;
 }

 #nossa_historia_text h3{
    display:block;
}



/* Seção Depoimentos */
#depoimentos_section {
    background:url(img/depoimentos-bg.jpg);
    background-position: center;
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 70px 00px 180px 00px;
}

#depoimentos_section h2 {
    display: block;
    text-align: center;
    margin: 0px auto 30px auto;

}

#box_depoimento_wrap{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#box_depoimento {
    width: 32%;
    padding: 20px;
    height: auto;
    background-color: #000;
    color: #fff;
    border-radius: 15px;
    box-shadow: 37px 0px 33px 0px #ff671a33;
}

#depoimento_tumb{
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background: #BB4545;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    float: left;
}

#depoimento_nome_area{
    height: 45px;
    width: auto;
    display: flex;
    float: left;
    align-items: flex-start;
    margin-left: 10px;
    flex-direction: column;
    margin-bottom: 15px;
}

img.google{
    width:100px;
    margin-top: 20px;
}

#depoimento_nome_area img{
    width: 60px;
    display: block;
}


/* Seção Endereço */
#endereco_section {
    width: 1500px;
    height: 200px;
    border-radius: 20px;
    background-color: #f9f9f9;
    text-align: center;
    position: relative;
    top: -120px;
    box-shadow: 0px 9px 8px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

#endereco_section p {
    width: 330px;
    padding-left: 50px;
}

/* Seção Mapa */
#mapa_section {
    width: 100%;
    height: 550px;
    display: inline-block;
    margin-top: -200px;
}

.mapa{
    float: left;
    width: 100%;
    height: 550px;
    margin: 0;
}

/* Footer */
footer {
    background-color: #000000;
    color: #fff;
    height: auto;
    padding: 20px 00px;
}

#logo_footer {
    width: 180px;
    height: 80px;
    background: url('img/logo.png') no-repeat center;
    background-size: contain;
    display: inline-block;
}

#contatos_area{
    width: 450px;
    height: 60px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

a#icone_insta{
    display: inline-block;
    width:30px;
    height:30px;
    border-radius: 20%;
    background:url('img/instagram.png');
    background-size: contain;
    background-repeat: no-repeat;
}

a#icone_facebook{
    display: inline-block;
    width:30px;
    height:30px;
    border-radius: 20%;
    background:url('img/facebook.png');
    background-size: contain;
    margin-left: 10px;
    margin-right: 30px;
    background-repeat: no-repeat;
}

#icone_telefone{
    display: inline-block;
    width:30px;
    height:30px;
    border-radius: 20%;
    background:url('img/icone_telefone.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 5px;
}

#legal{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pizzas_hero_wrap{
    width: 690px;
    height: 1100px;
    position: absolute;
    right: 0;
    overflow: hidden;
}

#pizzas_hero_wrap_interno{
    width: 690px;
    height: 300px;
    position: absolute;
    right: 0;
    overflow: hidden;
}

#pizza1{
    width: 716px;
    height: 700px;
    position: relative;
    display: inline-block;
    left: 175px;
    top: -110px;
    background-repeat: no-repeat;
    z-index: 1;
    background: url(img/pizza1.png) no-repeat center center;
    background-size: cover;
    filter: drop-shadow(-27px 25px 19px rgba(0, 0, 0, 0.3)); 
}


#pizza2{
    width: 900px;
    height: 900px;
    display: inline-block;
    z-index: 0;
    filter: drop-shadow(-27px 25px 19px rgba(0, 0, 0, 0.3)); 
    background: url(img/pizza2.png) no-repeat center center;
    background-size: cover;
    position: relative;
    display: inline-block;
    top: -500px;
}



#mangericao_1 {
    width: 130px;
    height: 130px;
    position: absolute;
    background: url(img/mangericao_1.png) no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    right: 590px;
    top: 490px;
    z-index: 50;
    transform: matrix(0.50, 0.87, -0.87, 0.50, -0.00, -0.00);
    filter: drop-shadow(19px 34px 7px rgba(0, 0, 0, 0.4));
}

#mangericao_2 {
    width: 163px;
    height: 130px;
    position: absolute;
    background: url(img/mangericao_2.png) no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    left: 40px;
    top: 610px;
    z-index: 50;
    transform: matrix(0.85, 0.53, -0.53, 0.85, 0.00, -0.00);
    filter: drop-shadow(3px 24px 4px rgba(0, 0, 0, 0.3));
}

#mangericao_3 {
    width: 163px;
    height: 130px;
    position: absolute;
    background: url(img/mangericao_3.png) no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    right: 230px;
    top: 1030px;
    z-index: 50;
    transform: matrix(0.94, -0.35, 0.35, 0.94, 0.00, -0.00);
    filter: drop-shadow(3px 24px 4px rgba(0, 0, 0, 0.3));
}

#mangericao_4 {
    width: 123px;
    height: 130px;
    position: absolute;
    background: url(img/mangericao_1.png) no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    left: 50px;
    top: 1932px;
    z-index: 50;
    transform: matrix(-0.31, -0.95, 0.95, -0.31, -0.00, -0.00);
    filter: drop-shadow(-14px -20px 4px rgba(0, 0, 0, 0.3));
}

#mangericao_5 {
    width: 163px;
    height: 130px;
    position: absolute;
    background: url(img/mangericao_3.png) no-repeat center center;
    background-size: contain;
    background-repeat: no-repeat;
    right: 250px;
    top: 2320px;
    z-index: 50;
    transform: matrix(0.94, -0.35, 0.35, 0.94, 0.00, -0.00);
    filter: drop-shadow(3px 24px 4px rgba(0, 0, 0, 0.3));
}

#menu_mobile{
    display: none;
}

#sessao_historia1,#sessao_historia2, #sessao_historia3 {
    float: left;
    margin-bottom: 50px;
    display: flex;
    align-items: center;   
}

#historia_img1{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    display: inline-block;
    background: url(img/historia1.png);
    background-size:cover ;
}
#historia_img2{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    display: inline-block;
    background: url(img/historia2.jpg);
    background-size:cover ;
}
#historia_img3{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    display: inline-block;
    background: url(img/historia3.jpg);
    background-size:cover ;
}

#wrap_historia{
    width: calc(100% - 200px);
    margin-left:50px
}

/* Estilo do Carrossel ============================================ */
#carrossel_fotos {
    position: relative;
    width: 1350px;
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin: 00px auto;
    border-radius: 15px;
}

/* Container de Slides */
#slides_container {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
}

/* Cada Slide */
.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Botões de Navegação */
#nav_buttons {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

#nav_buttons button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

/* Indicadores de Slide */
#indicator_container {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

#indicator_container .indicator {
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
}

#indicator_container .indicator.active {
    opacity: 1;
    background-color: #fff;
}

/*PARA PC MENOR ----------------------------------------*/
@media (max-width: 1580px) {
    #carrossel_fotos {
        position: relative;
        width: 1024px;
        height: auto;
        aspect-ratio: 16/9;
        overflow: hidden;
        margin: 00px auto;
        border-radius: 15px;
    }

    div.interno{
        width: 1024px;
    }

    #endereco_section{
        width: 1024px; 
    }

    #cardapio_section{
        height: 740px;
    }

    #mangericao_1{
        right: 460px;
    }
    #mangericao_4{
        top: 1782px;
    }
    #mangericao_5{
        top: 2170px;
        right: 98px;
    }
    
    #pizzas_hero_wrap{
        width: 600px;
    }

    #pizzas_hero_wrap_interno{
       display: none;
    }
}

#menu_mobile_overlay{
    display: none;
}


#sobre_nos_img1{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius:15px;
    margin: 10px 0 30px 0;
    background: url(img/sobre_nos1.png);
    background-size: cover;
    background-position: center;
}

#sobre_nos_img2{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius:15px;
    margin: 10px 0 30px 0;
    background: url(img/sobre_nos2.jpg);
    background-size: cover;
    background-position: center;
}

#sobre_nos_img3{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius:15px;
    margin: 10px 0 30px 0;
    background: url(img/sobre_nos3.jpg);
    background-size: cover;
    background-position: center;
}




/*PARA TABLET ======================================*/
@media (max-width: 1080px) {
    
    #pizzas_hero_wrap{
        width: 400px;
    }

    div.interno{
        width: 750px;
    }

    #carrossel_fotos {
        width: 750px;

    }
    
    nav{
        display: none;
    }

    #endereco_section{
        width: 750px; 
    }

    #mangericao_1{
        right: 250px;
    }

    #mangericao_3{
        right: 60px;
    }

    #cardapio_section{
        height: 680px;
    }

    #nossa_historia_section{
        height: 470px;
    }

    #mangericao_4 {
        top: 1712px;
    }

    #sobre_nos_text{
        width: 386px
    }

    #pizza2 {
        width: 700px;
        height: 700px;
        left: 90px;
    }

    #menu_mobile{
        display: block;
        width: 30px;
        height: 30px;
        background: url(img/menu-burger.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    #menu_mobile_overlay{
        display: none;
        position: fixed;
        width: 100%;
        height: calc(100% - 90px);
        z-index: 100;
        background: #000000e8;
        top: 90px;
    }

    #menu_mobile_overlay  a#menu{
        width: 90%;
        margin: 20px 5% 0 5%;
    }

    header.desktop{
        height: 90px;
        background: #000000e8;
    }

}


/*PARA CELULAR*/
@media (max-width: 790px) {
    #sessao_historia1,#sessao_historia2, #sessao_historia3 {
        float: left;
        margin-bottom: 50px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    #conteudo_interno{
        display: flex;
        align-items: center;
    }

    #carrossel_fotos {
        width: 90%;
        aspect-ratio: 1;
    }

    #wrap_historia{
        width: 100%;
        margin-left: 0;
    }

    #wrap_historia h2,#wrap_historia p{
        
    }

    #wrap_historia h2{
        margin-top: 15px;
        width: 100%;
    }

    #coluna1{
        display: inline-block;
        float: left;
        width: 100%;
    }
    
    #coluna2{
        display: inline-block;
        float: right;
        width: 100%;
        margin-top: 50px;
    }

    #conteudo_interno div.interno{
        display: flex;
        flex-direction: column;
    }

    #coluna_tri1{
        display: inline-block;
        float: left;
        width: 100%;
      }
    #coluna_tri2{
        display: inline-block;
        float: left;
        width:100%;
        margin-top: 50px;
    }
    #coluna_tri3{
        display: inline-block;
        float: left;
        width: 100%;
        margin-top: 50px;
    }

    div.interno{
        width: 90%;
    }

    #endereco_section{
        width: 90%; 
    }

    h1{
        font-size: 60px;
    }

    #hero_text h3{
        display: block;
    }

    a#botao_principal{
        width: 100%;
    }
    a#botao_secundario{
        width: 100%;
        margin-left: 0;
    }

    #hero_section{
        height: 880px;
        background: url(img/hero-bg-mobile.jpg);
        background-size: cover;
    }

    #pizzas_hero_wrap{
        width: 100%;
        height: 280px;
        top: 600px;
    }

    #hero_text{
        width: 100%;
        margin: 150px 0 0 00px
    }

    #pizza1 {
        width: 81%;
        height: auto;
        aspect-ratio: 1;
        position: relative;
        display: inline-block;
        left: -100px;
        top: 100px;
        background-repeat: no-repeat;
        z-index: 1;
        background: url(img/pizza1.png) no-repeat center center;
        background-size: cover;
        filter: drop-shadow(-27px 25px 19px rgba(0, 0, 0, 0.3));
    }

    #pizza2 {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        position: absolute;
        display: inline-block;
        left: 160px;
        top: 30px;
        background-repeat: no-repeat;
        z-index: 1;
        background: url(img/pizza2.png) no-repeat center center;
        background-size: cover;
        filter: drop-shadow(-27px 25px 19px rgba(0, 0, 0, 0.3));
        z-index: 1;
    }

    #mangericao_2{
        width: 153px;
        height: 130px;
        position: absolute;
        background: url(img/mangericao_2.png) no-repeat center center;
        background-size: contain;
        background-repeat: no-repeat;
        left: -40px;
        top: 650px;
        z-index: 50;
        transform: matrix(0.85, 0.53, -0.53, 0.85, 0.00, -0.00);
        filter: drop-shadow(3px 24px 4px rgba(0, 0, 0, 0.3));
    }

    #mangericao_1 {
        right: 30px;
        top: 810px;
        width: 110px;
    }
    
    #sobre_nos_text {
        width: 100%;
        margin: 0;
    }

    #sobre_nos_section{
        display: flex;
        align-items: center;
    }

    #mangericao_3 {
        display: none;
    } 
    
    #mangericao_4 {
        display: none;
    }
    
    #mangericao_5 {
        display: none;
    }

    #box_cardapio_wrap{
        width: 100%;
        margin: 0 auto;
        display: block;
    }

    #box_cardapio {
        width: 100%;
        display: block;
        padding: 20px;
        height: 180px;
        background-color: #f1f1f1;
        border-radius: 15px;
        margin-bottom: 22px;
    }

    #box_cardapio #wrap{
        width: calc(100% - 170px);
        display: inline-block;
        float: right;
    }

    #box_cardapio h3{
        margin-top: 0;
    }

    #box_cardapio #wrap p{
        text-align: left;
    }

    #tumb_cardapio {
        width: 140px;
        height: auto;
        aspect-ratio: 1;
        border-radius: 10px;
        display: inline-block;
    }

    #cardapio_section {
        height: 970px;
    }

    #nossa_historia_section {
        display: flex;
        align-items: center;
        height: 670px;
    }


    #nossa_historia_section div.interno{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #nossa_historia_section img{
        width: 320px;
    }

    #nossa_historia_text {
        display: inline-block;
        height: auto;
        width: 90%;
        margin: 20px auto ;
    }

    #nossa_historia_text h3{
        display: block;
    }

    #box_depoimento_wrap{
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        
    }

    #box_depoimento{
        width: 80%;
        padding: 20px;
        height: auto;
        background-color: #000;
        color: #fff;
        border-radius: 15px;
        margin-bottom: 10px;
        
    }

    #depoimentos_section{
        background: url(img/hero-bg-mobile.jpg);
    }

    #endereco_section p {
        width: 100%;
        display: block;
        padding-left: 50px;
        text-align: center;
    }

    #endereco_section{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 230px;
        top: -150px;
    }

    #mapa_section {
        width: 100%;
        height: 550px;
        display: inline-block;
        margin-top: -230px;
    }

    #mapa_section_contato {
        width: 100%;
        height: 550px;
        display: inline-block;
        margin-top:0px;
    }

    footer div.interno{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #contatos_area{
        width: 90%;
        padding: 20px 0;
    }

    #contatos_area h3{
        font-size:18px;
    }

    #legal p{
        text-align: center;
    }

    a#icone_facebook{
        background-size: contain;
        margin-left: 10px;
        margin-right: 10px;

    }

    #icone_telefone{
        width: 15px;
        height: 15px;
    }
}