:root {
    --primaria: #d3b22b;
    --secundaria: #a07e28;
    --terceira: ;
    --cinza-escuro: #4b5563;
    --branco: white;

    --bg-header-home: transparent;
    --bg-header-others: #a07e28;
    --color-text-header: var(--branco);
    --color-text-header-hover: var(--primaria);
    --color-i-header: var(--branco);
    --color-i-hover-header: var(--primaria);
    --color-active-hover-header: var(--primaria);


    --bg-footer: #807F7F;
    --color-text-footer: white;
    --color-i-footer: white;
    --color-links-footer: white;
    --color-hover-links-footer: var(--primaria);


    /* Btn Gray */
    --bg-btn-gray: #f3f4f6;
    --txt-btn-gray: black;
    --bg-btn-span-gray: #9ca3af;
    --icon-btn-gray: white;

    --bg-btn-hover-gray: #d1d5db;
    --txt-btn-hover-gray: var(--txt-btn-gray);
    --bg-btn-hover-span-gray: var(--bg-btn-span-gray);
    --icon-btn-hover-gray: var(--icon-btn-gray);


        /* BTN Gold */
    --bg-btn-gold: var(--secundaria);
    --txt-btn-gold: white;
    --bg-btn-span-gold: #ebdc9f;
    --icon-btn-gold: var(--bg-btn-gold);

    --bg-btn-hover-gold: var(--primaria);
    --txt-btn-hover-gold: var(--txt-btn-gold);
    --bg-btn-hover-span-gold: var(--bg-btn-gold);
    --icon-btn-hover-gold: white;



      /* BTN LightGold */
      --bg-btn-lightGold: #fcd74d;
      --txt-btn-lightGold: #545454;
      --bg-btn-span-lightGold: #d0b03a;
      --icon-btn-lightGold: var(--bg-btn-lightGold);
  
      --bg-btn-hover-lightGold: #d0b03a;
      --txt-btn-hover-lightGold: white;
      --bg-btn-hover-span-lightGold: var(--bg-btn-lightGold);
      --icon-btn-hover-lightGold: white;



      /* BTN Dark */
      --bg-btn-dark: #242424;
      --txt-btn-dark: #e2e2e2;
      --bg-btn-span-dark: #6b6b6b;
      --icon-btn-dark: var(--bg-btn-dark);
  
      --bg-btn-hover-dark: var(--bg-btn-span-dark);
      --txt-btn-hover-dark: white;
      --bg-btn-hover-span-dark: var(--bg-btn-dark);
      --icon-btn-hover-dark: white;




      /* BTN White */
      --bg-btn-white: white;
      --txt-btn-white: #242424;
      --bg-btn-span-white: #d4d4d4;
      --icon-btn-white: var(--bg-btn-white);
  
      --bg-btn-hover-white: #f0f0f0;
      --txt-btn-hover-white: var(--txt-btn-white);
      --bg-btn-hover-span-white: var(--bg-btn-white);
      --icon-btn-hover-white: var(--txt-btn-white);




      /* BTN WhiteBold */
      --bg-btn-whiteBold: white;
      --txt-btn-whiteBold: #242424;
      --bg-btn-span-whiteBold: #d4d4d4;
      --icon-btn-whiteBold: var(--bg-btn-whiteBold);
  
      --bg-btn-hover-whiteBold: #d0b03a;
      --txt-btn-hover-whiteBold: var(--bg-btn-whiteBold);
      --bg-btn-hover-span-whiteBold: var(--bg-btn-whiteBold);
      --icon-btn-hover-whiteBold: var(--txt-btn-whiteBold);

}


.btn-gray {
    background-color: var(--bg-btn-gray);
    color: var(--txt-btn-gray);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 300;
}

.btn-gray:hover {
    background-color: var(--bg-btn-hover-gray);
    color: var(--txt-btn-hover-gray);
}

.btn-gray:hover span{
    background-color: var(--bg-btn-hover-span-gray);
    color: var(--icon-btn-hover-gray);
}

.btn-gray span {
    background-color: var(--bg-btn-span-gray);
    color: var(--icon-btn-gray);
    border-radius: 50px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: -11px;
    margin-left: 8px;
}



/* GOLD */
.btn-gold {
    background-color: var(--bg-btn-gold);
    color: var(--txt-btn-gold);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 300;
    font-size: 18px;
}

.btn-gold:hover {
    background-color: var(--bg-btn-hover-gold);
    color: var(--txt-btn-hover-gold);
}

.btn-gold:hover span{
    background-color: var(--bg-btn-hover-span-gold);
    color: var(--icon-btn-hover-gold);
}

.btn-gold span {
    background-color: var(--bg-btn-span-gold);
    color: var(--icon-btn-gold);
    border-radius: 50px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: -11px;
    margin-left: 8px;
}



/* lightGold */
.btn-lightGold {
    background-color: var(--bg-btn-lightGold);
    color: var(--txt-btn-lightGold);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 300;
}

.btn-lightGold:hover {
    background-color: var(--bg-btn-hover-lightGold);
    color: var(--txt-btn-hover-lightGold);
}

.btn-lightGold:hover span{
    background-color: var(--bg-btn-hover-span-lightGold);
    color: var(--icon-btn-hover-lightGold);
}

.btn-lightGold span {
    background-color: var(--bg-btn-span-lightGold);
    color: var(--icon-btn-lightGold);
    border-radius: 50px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: -11px;
    margin-left: 8px;
}




/* lightGold */
.btn-dark {
    background-color: var(--bg-btn-dark);
    color: var(--txt-btn-dark);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 300;
}

.btn-dark:hover {
    background-color: var(--bg-btn-hover-dark);
    color: var(--txt-btn-hover-dark);
}

.btn-dark:hover span{
    background-color: var(--bg-btn-hover-span-dark);
    color: var(--icon-btn-hover-dark);
}

.btn-dark span {
    background-color: var(--bg-btn-span-dark);
    color: var(--icon-btn-dark);
    border-radius: 50px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: -11px;
    margin-left: 8px;
}



/* White */
.btn-white {
    background-color: var(--bg-btn-white);
    color: var(--txt-btn-white);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 300;
}

.btn-white:hover {
    background-color: var(--bg-btn-hover-white);
    color: var(--txt-btn-hover-white);
}

.btn-white:hover span{
    background-color: var(--bg-btn-hover-span-white);
    color: var(--icon-btn-hover-white);
}

.btn-white span {
    background-color: var(--bg-btn-span-white);
    color: var(--icon-btn-white);
    border-radius: 50px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: -11px;
    margin-left: 8px;
}



/* WhiteBold */
.btn-whiteBold {
    background-color: var(--bg-btn-whiteBold);
    color: var(--txt-btn-whiteBold);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 300;
}

.btn-whiteBold:hover {
    background-color: var(--bg-btn-hover-whiteBold);
    color: var(--txt-btn-hover-whiteBold);
}

.btn-whiteBold:hover span{
    background-color: var(--bg-btn-hover-span-whiteBold);
    color: var(--icon-btn-hover-whiteBold);
}

.btn-whiteBold span {
    background-color: var(--bg-btn-span-whiteBold);
    color: var(--icon-btn-whiteBold);
    border-radius: 50px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: -11px;
    margin-left: 8px;
}