.circleContainer {
   width: 100%;
}

.circleContainer .circle-outer {
   border: 2px solid var(--border-blue);
   background-color: var(--white-color);
}

.circleContainer .circle-outer:hover {
   border-color: var(--border-orange);
}

.circleContainer .circle-outer:hover>.circle-inner {
   background-color: var(--border-orange);
}

.circleContainer .circle-outer:hover>.circle-inner img {
   filter: brightness(0) invert(1);
}

.circleContainer .circle-outer:hover>.circle-inner p {
   color: var(--white-color);
}

.circleContainer .circle-inner {
   background-color: transparent;
   width: 96%;
   height: 96%;

}

.circleContainer .circle-inner img {
   margin-top: 15%;
   margin-bottom: 5%;
}

.circleContainer .circle-inner p {
   color: var(--blue-color);
   font-weight: 600;
   line-height: 1;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
}


@media (max-width: 480px) {
   .circleContainer .circle-outer {
      width: 38vw;
      height: 38vw;
   }

   .circleContainer .circle-inner {

      margin: 0% 0% 0% 0%;
   }

   .circleContainer .circle-inner p {
      font-size: 3.5vw;
   }
}

@media (min-width: 481px) {
   .circleContainer .circle-outer {
      width: 38vw;
      height: 38vw;
   }

   .circleContainer .circle-inner {

      margin: 0% 0% 0% 0%;
   }

   .circleContainer .circle-inner p {
      font-size: 3.5vw;
   }
}

@media (min-width: 576px) {
   .circleContainer .circle-outer {
      width: 25vw;
      height: 25vw;
   }

   .circleContainer .circle-inner p {
      font-size: 2.5vw;
   }
}


@media (min-width: 768px) {

   .circleContainer .circle-outer {
      width: 20vw;
      height: 20vw;
   }

   .circleContainer .circle-inner p {
      font-size: 2vw;
   }
}

@media (min-width: 992px) {
   .circleContainer .circle-outer {
      width: 12vw;
      height: 12vw;
   }

   .circleContainer .circle-inner {

      margin: 0% 0% 0% 0%;
   }

   .circleContainer .circle-inner p {

      font-size: 1.2vw;

   }
}

@media (min-width: 1400px) {
   .circleContainer .circle-outer {
      width: 10vw;
      height: 10vw;
   }

   .circleContainer .circle-inner {

      margin: 0% 0% 0% 0%;
   }

   .circleContainer .circle-inner p {

      font-size: 1vw;

   }
}