/*
Theme Name: Alem da Solucao
Theme URI: https://alemdasolucao.com.br/
Author: Emerson Rodrigues
Description: Tema personalizado do site Além da Solução
Version: 1.0
*/
:root{
    --color-violet-light: #f0eafb;
    --color-violet-light-hover: #e9dff9;
    --color-violet-light-active: #d2bcf3; 
    --color-violet-normal: #6d28d9;
    --color-violet-normal-hover: #6224c3;
    --color-violet-normal-active: #5720ae; 
    --color-violet-dark: #521ea3;
    --color-violet-dark-hover: #411882;
    --color-violet-dark-active: #311262; 
    --color-violet-darker: #260e4c; 

    --color-blue-light: #e8f0f3;
    --color-blue-light-hover: #dde8ed;
    --color-blue-light-active: #b8d0d9; 
    --color-blue-normal: #196886;
    --color-blue-normal-hover: #175e79;
    --color-blue-normal-active: #14536b; 
    --color-blue-dark: #134e65;
    --color-blue-dark-hover: #0f3e50;
    --color-blue-dark-active: #0b2f3c; 
    --color-blue-darker: #09242f;


    --color-orange-light: #fbf9f8;
    --color-orange-light-hover: #f9f6f4;
    --color-orange-light-active: #f3ede9; 
    --color-orange-normal: #d9c6b8;
    --color-orange-normal-hover: #c3b2a6;
    --color-orange-normal-active: #ae9e93; 
    --color-orange-dark: #a3958a;
    --color-orange-dark-hover: #82776e;
    --color-orange-dark-active: #625953; 
    --color-orange-darker: #4c4540;

    --gap-1:10px;
    --gap-2:20px;
    --gap-3:30px;

    --radius-3:15px;
    --radius-2:10px;
    --radius-1:5px;

    --padding-section:70px 0;
}
html,body{font-family: 'inter';background-color: var(--color-orange-light);}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{font-family: 'inter';}
.h1 {
  font-size: clamp(38.49px, 3.5vw, 54px);
}
.h2 {
  font-size: clamp(28.51px, 2.6vw, 40px);
}
.h3 {
  font-size: clamp(26.37px, 2.4vw, 37px);
}
.h4 {
  font-size: clamp(21.38px, 1.95vw, 30px);
}
.big {
  font-size: clamp(18.53px, 1.8vw, 26px);
} 
p,.text-normal {
  font-size: clamp(12.83px, 1.25vw, 18px);
  font-family: 'inter';
} 
.small {
  font-size: clamp(11.40px, 1.11vw, 16px);
}
.smaller {
  font-size: clamp(8.55px, 0.83vw, 12px);
}
.logo{width: 130px}
.color-violet-1{color:var(--color-violet-light)}
.color-violet-2{color:var(--color-violet-normal)}
.color-violet-3{color:var(--color-violet-dark)}
.color-violet-4{color:var(--color-violet-darker)}
.color-blue-1{color:var(--color-blue-light)}
.color-blue-2{color:var(--color-blue-normal)}
.color-blue-3{color:var(--color-blue-dark)}
.color-blue-3{color:var(--color-blue-dark)}
.color-orange-1{color:var(--color-orange-light)}
.color-orange-2{color:var(--color-orange-normal)}
.color-orange-3{color:var(--color-orange-dark)}
.color-white{color:white;}
.background-violet-1{background-color:var(--color-violet-light)}
.background-violet-2{background-color:var(--color-violet-normal)}
.background-violet-3{background-color:var(--color-violet-dark)}
.background-blue-1{background-color:var(--color-blue-light)}
.background-blue-2{background-color:var(--color-blue-normal)}
.background-blue-3{background-color:var(--color-blue-dark)}
.background-orange-1{background-color:var(--color-orange-light)}
.background-orange-2{background-color:var(--color-orange-normal)}
.background-orange-3{background-color:var(--color-orange-dark)}
.gap-1{gap:var(--gap-1)!important}
.gap-2{gap:var(--gap-2)!important}
.gap-3{gap:var(--gap-3)!important}
section:not(:first-child, :last-child){padding: var(--padding-section);}
.menu ul{
  display: flex; 
  padding: 0;
  box-shadow: 5px 5px 5px #D0BCFF;
  margin: 0;
  border-radius: 10px;overflow: hidden; 
}
.menu li{
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;  
position: relative;}
.menu a{transition: all .2s ease-in-out; padding: 10px; text-decoration:none;color: var(--color-violet-dark);height: 100%;width: 100%;background-color: white; }
.menu li :is(a:hover,a.active){background-color: var(--color-violet-dark);color: white;font-weight: bold;}

.menu:has(.icon-blog)::after{
  content: '';
  width: 30px;
  height: 30px; 
  position: absolute;
  top: -100%;
  background: url(img/icon-blog.png); 
  background-size: 30px 30px;
}