/*---------BUTTONS---------*/
/***************************/
/* Style all buttons */
.btn-primary,
.btn-primary-border,
.btn-secondary,
.btn-secondary-border,
.btn-white,
.btn-white-border {
  font-size: var(--font-size-h6);
  font-weight: bold;
  letter-spacing: .1rem;
  margin-top: var(--spacing-extraSmall);
  margin-bottom: var(--spacing-extraSmall);
  padding: var(--spacing-extraSmall) var(--spacing-small);
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  border-radius:var(--radius-rounded);
  text-transform: uppercase;
  color: var(--color-white);
  display: inline-block;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
}

/*Primary buttons*/
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/*Secondary buttons*/
.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/*white buttons*/
.btn-white {
  background-color: var(--color-white);
  border-color: var(--color-white);
}


/*-----Hover-----*/

.btn-primary:hover,
.btn-primary-border:hover,
.btn-secondary:hover,
.btn-secondary-border:hover,
.btn-white:hover,
.btn-white-border:hover {
  background-color: transparent;
  transform: translateY(-5px);
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

/*Primary buttons*/
.btn-primary:hover {
  color: var(--color-primary);
}

/*Badge*/
.badge {
  font-size: var(--font-size-h5);
  margin-top: var(--spacing-extraSmall);
  margin-bottom: var(--spacing-extraSmall);
  padding: var(--spacing-extraSmall) var(--spacing-small);
  border-style: solid;
  border-width: 1px;
  border-radius:var(--radius-small);
background-color:white;
  color: var(--color-primary);
  display: inline-block;
}


.--circle-icon::before {
    content: url("https://www.renardise-studio.com/wp-content/uploads/2022/09/icon-circle.svg");
    margin-right: -12px;
    transform: translateX(-22px);
    display: inline-block;
  }

  .separator-full {
    width: 100%;
  }
  
  .separator-little {
    width: 112px;
  }
  
  .separator-full,
  .separator-little {
    display: block;
    height: 2px;
    margin-bottom: 1.3rem;
    margin-top: .7rem;
  }
  

  


/*----------------- UTILITIES -----------------*/

/*----- Effects -----*/

.--hover-scale, .--hover-scale:hover, .--hover-transition-up, .--hover-transition-up:hover, .--hover-transition-left:hover, .--hover-transition-left, .--hover-transition-right:hover, .--hover-transition-right {
  transition: all .3s ease;
}

.--hover-scale:hover {
  transform: scale(1.05);
}

.--hover-transition-up:hover {
  transform: translateY(-5px);
}

.--hover-transition-left:hover {
  transform: translateX(-5px);
}

.--hover-transition-right:hover {
  transform: translateX(5px);
}

  /*---------BORDER RADIUS---------*/
  /***************************/
  
  .border-radius-small {
    border-radius: var(--radius-small);
  }
  
  .border-radius-medium {
    border-radius: var(--radius-medium);
  }
  
  .border-radius-large {
    border-radius: var(--radius-large);
  }
  
  .border-radius-rounded {
    border-radius: var(--radius-rounded);
  }