@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap');

*{
    font-family: 'inter', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a{
   text-decoration: none;
}

.icones {
   display: flex;
   width: 100%;
   justify-content: center;
   padding: 1rem;
   font-size: 40px;
}

.titulo-divs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
 }
 
 .titulo-divs h4{
    font-weight: bold;
    text-decoration:underline;
 }

 .conteudo-divs{
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
 .conteudo-divs p{
    font-size: 17px;
    color:#717171;
    line-height: 2;
    text-align: justify;
 }
 

/* Navbar
___________________________________________________________________ */

#navbar{
   width: 100%;
   background: #2c2c2c;
   color: #eee;
   height: 80px;
   position: fixed;
}

#navbar-container{
   width: 80%;
   height: 100%;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

#navbar-itens{
   display: flex;
   list-style: none;
   text-transform: uppercase;
   text-decoration: none;
}

#navbar-itens li{
   padding: 10px;
}

#navbar-itens a{
   color: #eee;
}

/* Banner Site
___________________________________________________________________ */

#showcase{
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #eee;
   background: url("/img/banner/showcase.jpg") no-repeat center center/cover;

   background-color: rgba(0,0,0,0.7);
   background-blend-mode: color;
}

#showcase-container{
   text-align: center; 
}

#showcase-container h2{
    font-size: 4rem;
    font-weight: bold;
    text-transform: uppercase;
}

#showcase-container p{
   font-size: 1.2rem;
   padding: 7px 0;
}

/* Botao Banner Site
___________________________________________________________________ */

.btn{
   display: inline-block;
   padding: 15px 30px;
   font-size: 1.1rem;
   text-transform: uppercase;
   opacity: 0.9;
   background: #c6c6c6;
   color: #000;
   border-radius: 5px;
   transition: background 500ms ease;
}

.btn:hover{
   cursor: pointer;
   opacity: 1;
   background: #eee;
   font-weight: bold;
   color: #000;
}

/* Botão WhatsApp Paginas
___________________________________________________________________ */

#whatsapp-link{
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 1px 1px 2px #888;
    z-index: 1000;
}

.fa-whatsapp{
    margin-top: 15px;
}

/* Footer
___________________________________________________________________ */

.footer-list{
   display: flex;
   flex-direction: column;
   list-style: none;
}

#footer_content{
   width: 100%;
   color: #eee;
   background-color: #2c2c2c;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 3rem 3.5rem;
}

#footer_contacts h1{
   margin-bottom: 0.75rem;
}

#footer_social_media{
   display: flex;
   gap: 2rem;
   margin-top: 1.5rem;
}

#footer_social_media .footer-link{
   display: flex;
   justify-content: center;
   height: 2.5rem;
   width: 2.5rem;
   color: #eee;
   border-radius: 50%;
   transition: all 0.4s;
}

#footer_social_media .footer-link i {
   font-size: 1.25rem;
}

#footer_social_media .footer-link:hover{
   opacity: 0.8;
}

#instagram{
   background: linear-gradient(#7f37c9, #ff2992, #ff9807);
   align-items: center;
}

#facebook{
   background-color: #4267b3;
   align-items: center;
}

#whatsapp{
   background-color: #25d366;
}

#btn-top{
   display: none;
}

/* Slider Clientes
___________________________________________________________________ */

.slider-wrapper{
    position: relative;
 }
 
 .slider-wrapper .slide-button{
    position: absolute;
    top: 50%;
    height: 2rem;
    width: 2rem;
    color: #fff;
    border: none;
    outline: none;
    background: #000;
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: 50%;
    transform: translateY(-50%);
 }
 
 .slider-wrapper .slide-button:hover{
    background: #444;
 }
 
 .slider-wrapper .slide-button#prev-slide{
    left: -1.25rem;
 }
 
 .slider-wrapper .slide-button#next-slide{
    right: -1.25rem;
 }
 
 .slider-wrapper .image-list{
    display: grid;
    gap: 1.125rem;
    font-size: 0;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    grid-template-columns: repeat(13, 1fr);
 }
 
 .slider-wrapper .image-list::-webkit-scrollbar{
    display: none;
 }
 
 .slider-wrapper .image-list .image-item{
    width: 320px;
    height: 200px;
    object-fit: cover;
 }
 
 .container .slider-scrollbar{
    height: 1.5rem;
    width: 100%;
    display: flex;
    align-items: center;
 }
 
 .slider-scrollbar .scrollbar-track{
    height: 0.125rem;
    width: 100%;
    background: #ccc;
    position: relative;
    border-radius: 0.25rem;
 }
 
 .slider-scrollbar:hover .scrollbar-track{
    height: 0.25rem;
 }
 
 .slider-scrollbar .scrollbar-thumb{
    position: absolute;
    height: 100%;
    width: 50%;
    background: #000;
    border-radius: inherit;
    cursor: grab;
 }
 
 .slider-scrollbar .scrollbar-thumb:active{
    cursor: grabbing;
    height: 0.5rem;
    top: -0.125rem;
 }
 
 .slider-scrollbar .scrollbar-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.625;
    bottom: -0.625;
 }

/* Sobre
___________________________________________________________________ */

#sobre{
   padding-top: 80px;
}

  /* Servicos
___________________________________________________________________ */

#servicos{
   padding-top: 80px;
}

  /* Maquinas
___________________________________________________________________ */

#maquinas{
   padding-top: 80px;
}

.desc-maquina{
   display: flex;
   justify-content: center;
   align-items: center;
}

.desc-maquina p{
   font-size: 20px;
   color:#717171;
   text-align: center;
}

 /* Contato
___________________________________________________________________ */

#div_contato{
   display: grid;
   padding-top: 50px;
   grid-template-columns: repeat(2, 1fr);
}

#div-email{
   min-height: 100vh;
   display: grid;
   place-items: center;
   padding: 1rem;
}

#mapa{
   min-height: 100vh;
   display: grid;
   place-items: center;
   text-align: center;
   padding: 1rem;
}

iframe{
   width: 550px;
   height: 440px;
}

form{
   width: 100%;
   max-width: 30rem;
}

label, input, textarea, button{
   display: block;
}

input, textarea, button{
   width: 100%;
   font: inherit;
   padding: 0.5rem;
   font-weight: 700;
}

input, textarea{
   margin-bottom: 1rem;
   background: #ededed;
   border: 0.125rem solid transparent;
   border-radius: 1.125rem;
   transition: border-color 0.3s;
   box-shadow: 0.3s;
}

input:hover,
input:focus,
textarea:hover,
textarea:focus {
   outline: none;
   border-color: #6b6b6b;
   box-shadow: 0 0 0 0.2125rem #dededede;
}

label{
   margin-bottom: 0.5rem;
}

textarea{
   min-height: 12.5rem;
   resize: vertical;
}

button{
   border: none;
   border-radius: 99px;
   color: white;
   background: #1d90f5;
   cursor: pointer;
   transition: 0.3s;
}

button:hover,
button:focus{
   outline: none;
   background: #1c70d3;
}

.enviado{
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   position:absolute;
	background:#000;
   color: white;
	width:100%;
	height:100%;
}