:root{
    --azul-principal:#14c6c1;
    --azul-light:#0cdbd4;
    --azul-deep:#03a5a5;
    --azul-dark: #021424;
    --amarelo-principal: #ffc200;
    --magenta-principal: #c9126a;
    --preto-principal: #333;
}
*{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  box-sizing: border-box;
}
html,body{
    margin: 0;
    padding: 0;
}

/* REGRAS ABRANGENTES */  
a,a:active,a:hover{
    text-decoration: none;
    color: white;

}
section{
    display: flex;
    flex-direction: column;
    align-items: center;
}
section>*{
    padding: 8px;
}

section>div{
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section.color{
    background-color: var(--azul-principal);
    color: white;
}
section.color.alt-1{
    background-color: var(--amarelo-principal);
}
section.color.alt-2{
    background-color: var(--magenta-principal);
}
section.color.alt-3{
    background-color: var(--preto-principal);
}
/* REGRAS especificas */  

#logo{
    max-width: 70%;
    margin-top: 36px;
    margin-bottom: 36px;
    
}

#servicos{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

}
.servico{
    max-width: 290px;
    width: 100%;
    background-color: var(--azul-principal); 
    padding: 8px;
    border-radius: 3px;
}
.servico img{
    width: 100%;
    height: auto;
    border-radius: 3px;
}
.servico h2{
    font-size: 1.2em;
    font-weight: 800;
    margin: 0;
    padding: 0;
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 0px 2px 2px var(--azul-dark);
}
.servico .servico-button{
    background-color: var(--azul-deep);
    color: white;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    margin-top: 8px;
    display: block;
}
.servico .servico-button:hover,.servico .servico-button:active{
    background-color: var(--azul-light);
}
header{
    
    background: 
    linear-gradient(
          rgba(255, 255, 255, 0.6), 
          rgba(255, 255, 255, 0.6)
        ),
    url(img/bg/banner-adesivo.png);
    animation-name: bg-animation;
  animation-duration: 16s;
    background-position: center;
    background-size: cover;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite; 
}
@keyframes bg-animation{
  0%   {background:linear-gradient(
          rgba(255, 255, 255, 0.6), 
          rgba(255, 255, 255, 0.6)
        ),
    url(img/bg/banner-adesivo.png);
  background-position: center;
    background-size: cover;
}
  20%  {background:linear-gradient(
          rgba(255, 255, 255, 0.6), 
          rgba(255, 255, 255, 0.6)
        ),
    url(img/bg/banner.png);
  background-position: center;
    background-size: cover;
}
  40%  {background:linear-gradient(
          rgba(255, 255, 255, 0.6), 
          rgba(255, 255, 255, 0.6)
        ),
    url(img/bg/letra-caixa-banner.png);
  background-position: center;
    background-size: cover;}
  60% {background:linear-gradient(
          rgba(255, 255, 255, 0.6), 
          rgba(255, 255, 255, 0.6)
        ),
    url(img/bg/lone-ilhois.png);
  background-position: center;
    background-size: cover;}
    80% {background:linear-gradient(
          rgba(255, 255, 255, 0.6), 
          rgba(255, 255, 255, 0.6)
        ),
    url(img/bg/banner-sinalizacao.png);
  background-position: center;
    background-size: cover;}
    
}

header marquee{
    font-size: 1em;
    font-weight: 500;
    background-color: var(--amarelo-principal); 
}
.bg-cinza{
    background-color: #eee;
}

footer section{
    padding-top: 32px;
}
footer section div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
footer section div img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
} 

.floating-button{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.floating-button.whatsapp{
    background-image: url(img/botoes/whatsapp-logo.png);
    bottom: 80px;    
}
.floating-button.instagram{
    background-image: url(img/botoes/instagram-logo.png);

}