.buttonContainer {
   width: 55vw;
   height: 200px;
   display: flex;
   justify-content: flex-start;
   margin: auto;
}

.buttonContainer.white {
   display: flex;
   justify-content: flex-start;
   align-items: end;
   margin: auto;
}

button {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   position: relative;
   cursor: pointer;
   outline: none;
   border: 0;
   vertical-align: middle;
   text-decoration: none;
   background: transparent;
   padding: 0;
   font-size: inherit;
   font-family: inherit;
   width: auto;
}

button.learn-more {
   width: 12rem;
   height: auto;
   margin: 0 auto;
}
button.learn-more .circle {
   transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
   position: relative;
   display: block;
   margin: 0;
   width: 2rem;
   height: 2rem;
   background: var(--jadegruen);
   border-radius: 1.625rem;
}

button.learn-more .circle.cyan {
   background: var(--cyan);
}

button.learn-more .circle.darkblue {
   background: var(--darkblue);
}

button.learn-more .circle .icon {
   transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   background: #fff;
}
button.learn-more .circle .icon.arrow {
   transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
   left: 0.225rem;
   width: 1.125rem;
   height: 0.125rem;
   background: none;
}
button.learn-more .circle .icon.arrow::before {
   position: absolute;
   content: "";
   top: -0.3rem;
   right: 0.0625rem;
   width: 0.625rem;
   height: 0.625rem;
   border-top: 0.125rem solid #fff;
   border-right: 0.125rem solid #fff;
   transform: rotate(45deg);
}
button.learn-more .button-text {
   font-family: var(--haas-font);
   transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 0.45rem 0;
   margin: 0 0 0 1.85rem;
   color: var(--darkblue);
   font-size: 0.75rem;
   letter-spacing: 0.1rem;
   font-weight: 700;
   line-height: 1.6;
   text-align: center;
   text-transform: uppercase;
}

button.learn-more .button-text-white {
   font-family: var(--haas-font);
   transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 0.45rem 0;
   margin: 0 0 0 1.85rem;
   color: var(--jadegruen);
   font-size: 0.75rem;
   letter-spacing: 0.1rem;
   font-weight: 700;
   line-height: 1.6;
   text-align: center;
   text-transform: uppercase;
}


button:hover .circle {
   width: 100%;
}
button:hover .circle .icon.arrow {
   background: #fff;
   transform: translate(1rem, 0);
}
button:hover .button-text {
   color: #fff;
}

button:hover .button-text-white {
   color: #fff;
}

@media screen and (min-width: 769px) and (max-width: 1023px) {

   button.learn-more {
      width: 12rem;
      height: auto;
   }
   button.learn-more .button-text,
   button.learn-more .button-text-white {
      font-size: 0.65rem;
      padding: 0.40rem 0;
      margin: 0 0 0 0.5rem;
   }
}