:root{
  --amarillo: #ffd700;
  --dorado1: #af8300; 
  --dorado2: #755b00;   
  --gris:#a7a7a7;
  --negro:#29303a
}

/*Fonts properties*/

@font-face {
  src: url(../Fonts/Mangueira/MangueiraAlt-SemiBold.ttf);
  font-family: man_alt_semibold;
}

@font-face {
  src: url(../Fonts/Mangueira/MangueiraAlt-Regular.ttf);
  font-family: man_alt_regular  ;
}

.Man_Alt_SemiBold{
  font-family: man_alt_semibold;
}
 .Man_Alt_Regular{
  font-family: man_alt_regular;
}

.navItems{
  font-size:18px;
  font-family:man_alt_semibold;
  color:var(--amarillo);
  padding:10px;
  align-self:flex-start;
 }
 


/*Buttons Styles*/

.button-style{
  width:150px;
  height:40px;
  background-color:var(--dorado1);
  border-radius:12px;
  border-width:0px;
  font-family:man_alt_semibold;
  font-size:15px;
  color:white;
  cursor:pointer;
}

.button-style2{
  width:70px;
  background-color:var(--dorado1);
  border-radius:12px;
  border-width:0px;
  font-family:man_alt_semibold;
  font-size:15px;
  color:white;
  padding:3px
}

/*For center items*/
.parent_center {
  display:flex;
  justify-content: center;
/*  align-items: center;*/
}



/*Text Styles*/

.titulo1{
  font-family:man_alt_semibold;
  font-size:24px;
  color:var(--dorado1)
}

.titulo2{
  font-family:man_alt_semibold;
  font-size:20px;
  color:var(--dorado1)
}

.titulo3{
  font-family:man_alt_semibold;
  font-size:18px;
  color:var(--dorado1)
}

.titulo4{
  font-family:man_alt_semibold;
  font-size:16px;
  color:var(--dorado1)
}

.titulo5{
  font-family:man_alt_semibold;
  font-size:14px;
  color:var(--dorado1)
}
.titulo6{
  font-family:man_alt_semibold;
  font-size:12px;
  color:var(--dorado1)
}

.titulo7{
  font-family:man_alt_semibold;
  font-size:10px;
  color:var(--dorado1)
}

.texto1{
  font-family:man_alt_regular;
  font-size:24px;
  color:var(--dorado1)
}
.texto2{
  font-family:man_alt_regular;
  font-size:20px;
  color:var(--dorado1)
}
.texto3{
  font-family:man_alt_regular;
  font-size:18px;
  color:var(--dorado1)
}

.texto4{
  font-family:man_alt_regular;
  font-size:16px;
  color:var(--dorado1)
}

.texto5{
  font-family:man_alt_regular;
  font-size:14px;
  color:var(--dorado1)
}

.texto6{
  font-family:man_alt_regular;
  font-size:12px;
  color:var(--dorado1)
}

.texto7{
  font-family:man_alt_regular;
  font-size:10px;
  color:var(--dorado1)
}


.colorChangeDiv {
    background-color: transparent;  /* Initial color */
    padding: 0px 10px 0px 10px;
    margin: 10px;
    transition: background-color 0.5s;  /* Transition property for smooth color change */    
    border: 1px solid var(--negro);
    border-radius:8px
    
}

.green {
    background-color: var(--amarillo);  /* Target color */

}

.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}