:root{
    --font-family-primary: 'Roboto', sans-serif;
    --font-family-secondary:'Marcellus', serif;
    --color-blue-text:#0B4874;
    --background-dark-blue: #0B4874;
    --background-light-blue: #5495C4;
    --text-big: 36px;
    --color-orange: #E2AA44;
    --hr-color-blue: #5495C3;
    --text-medium : 20px;
    --color-gray: #3C3C51;
    --cor-text-default: #4F4D4D;
    --font-size-default: 1rem;
    --text-medium: 20px;
    --color-blue-titles: #5495C4;
    --titles-background: #0B4874;
    --text-titles: #0A3943;
    --buttons-background: #5495C4;
    --border-color:#D1CCCC;
    --button-information : #D2DAE4;
    
}


*{
    scroll-behavior: smooth;
}
   
#menu-hamburguer{
   position: absolute;
   top: 0;
   z-index: 9999999999999999;
   display: none;
}
.crm{
    font-size: 1rem;
    font-family:  var(--font-family-primary);
}

  
body{
    margin: 0;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
   font-family:  var(--font-family-primary);
 
    
    
   
  
    
    
    
}

nav ul{
    list-style: none;
    display: flex;
    
 
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
   
    gap: 30px;
   
   
    
}

header #top{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
    justify-content: space-evenly;
    margin-right: 20px;
    align-items: center;
    background-color: rgb(250, 250, 250);
    position: fixed;
    top: 0;
    width: 100%;
  
  z-index: 99999;
  
    

    

   
  
   
}
button{
    cursor: pointer;
}
#logo{
    padding: 20px;
    width: 20%;
}
#button-top{
 
    border-radius: 8px 0px 0px 8px;
    background-color: var(--titles-background);
    color: white;
    max-width: 150px;
    text-align: right;
    padding: 10px;
    margin-left:40px;
    position: absolute;
    right: 0;
    top:20px;
}
#banner{
    margin-top: 250px;
    height: 320px;

background-color:white; 
    background-image:
    radial-gradient(rgb(230, 223, 238) 9px, transparent 1px),
    repeating-radial-gradient(rgb(230, 223, 238) 0, rgb(230, 223, 238) 4px, transparent 5px, transparent 20px, rgb(230, 223, 238) 21px, rgb(230, 223, 238) 25px, transparent 26px, transparent 50px);
    background-size: 30px 30px, 90px 90px;
    background-position:center center;
    background-attachment: fixed; 
 

   
   
}
#content{
    margin-top: 250px;
   
  
   
}
#banner_image img{
    border-radius: 0px 32px ;
    max-height: 480px;
    max-width: 543px;
    position: absolute;
    margin-top:-20px;
    
}
#banner_nome {
    background-color: white;
  
    background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 32px 32px 0px 32px;


display: flex;
flex-direction: column;
flex-wrap: wrap;
padding:30px;
font-family: var(--font-family-secondary);
color:var(--color-blue-text);
font-size:var(--text-big);
max-width: 500px;
padding: 20px;

    
}
.hr-orange {
    border: 1px solid var(--color-orange);
    width: 60%;
    
}
#banner_content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 350px;
  
    background-image: url('../images/banner-image.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size:  contain contain;
    background-position: right;
    background-attachment: fixed;
   
   
   

}
#services{
    
    font-size: var(--text-medium);
    color: var(--color-gray);
    
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
   

   
    
      
    

    

}

ion-icon #top{
    font-size:50px;
    
}
#hamburguer{
    display: none;
}
#button-top a{
    color: white;
    text-decoration: none;
    cursor: pointer;
}