/* Ícone laranja */
.temas .icon-box .icon .custom-icon-orange {
  width: 36px;
  height: 36px;
  transition: 0.5s;
  position: relative;
}

.temas .icon-box .icon .custom-icon-orange path {
  fill: #ffa76e;
  transition: 0.5s;
}


.temas .iconbox-orange:hover .icon .icon-background path {
  fill: #ffa76e;
}


.temas .iconbox-orange:hover .icon .custom-icon-orange path {
  fill: #ffffff;
}


/* Ícone preto */
.temas .icon-box .icon .custom-icon-black path {
  fill: #444444;
  transition: 0.5s;
}

.temas .icon-box .icon .custom-icon-black {
  width: 40px;
  height: 40px;
  transition: 0.5s;
  position: relative;
}

.temas .iconbox-black:hover .icon .custom-icon-black path {
  fill: #ffffff;
}

/* Ícone preto tema 4*/
.temas .icon-box .icon .custom-icon-black-tema4 path {
  fill: #444444;
  transition: 0.5s;
}

.temas .icon-box .icon .custom-icon-black-tema4{
  width: 40px;
  height: 40px;
  transition: 0.5s;
  position: relative;
}

.temas .iconbox-black:hover .icon .custom-icon-black-tema4 path {
  fill: #ffffff;
}

/* Ícone azul */
.temas .icon-box .icon .custom-icon-blue path {
  fill: #47aeff;
  transition: 0.5s;
}

.temas .icon-box .icon .custom-icon-blue {
  width: 40px;
  height: 40px;
  transition: 0.5s;
  position: relative;
}

.temas .iconbox-blue:hover .icon .custom-icon-blue path {
  fill: #ffffff;
}

/* Ícone laranja tema 5 */
.temas .icon-box .icon .custom-icon-orange-tema5 {
  width: 40px;
  height: 40px;
  transition: 0.5s;
  position: relative;
}

.temas .icon-box .icon .custom-icon-orange-tema5 path {
  fill: #ffa76e;
  transition: 0.5s;
}


.temas .iconbox-orange:hover .icon .icon-background path {
  fill: #ffa76e;
}


.temas .iconbox-orange:hover .icon .custom-icon-orange path {
  fill: #ffffff;
}

/* Ícone rosa */
.temas .icon-box .icon .custom-icon-pink path {
  fill: #e80368;
  transition: 0.5s;
}

.temas .icon-box .icon .custom-icon-pink {
  width: 40px;
  height: 40px;
  transition: 0.5s;
  position: relative;
}

.temas .iconbox-pink:hover .icon .custom-icon-pink path {
  fill: #ffffff;
}

/* Ícone amarelo */
.temas .icon-box .icon .custom-icon-yellow path {
  fill: #ffbb2c;
  transition: 0.5s;
}

.temas .icon-box .icon .custom-icon-yellow {
  width: 40px;
  height: 40px;
  transition: 0.5s;
  position: relative;
}

.temas .iconbox-yellow:hover .icon .custom-icon-yellow path {
  fill: #ffffff;
}

/* Fundo SVG circular */
.temas .icon-box .icon .icon-background path {
  fill: #f5f5f5;
  transition: 0.5s;
}