/* ============
   FLOATING CTA
   ============= */
   
#floating-cta {
   position: fixed;
   white-space: nowrap;
   z-index: 88;
   bottom: 1.5rem;
   right: var(--spacing__sm);
   background-color: var(--color__blue__tint);
   color: var(--color__blue__1);
   font-weight: 600;
   border: none;
   outline: none;
   cursor: pointer;
   padding: .75em 1em;
   border-radius: 15em;
   transition: all 0.5s;
   display: none; /* Initially hidden */ }

#floating-cta .icons {
   width: 1em;
   height: 1em;
   margin-left: .5em;
   display: inline-block;
   position: relative; }   

#floating-cta .icons .icon {
   transition: opacity .3s;
   position: absolute;
   width: 1em;
   top: .15em;
   left: 0;
   height: .8em;
   display: inline-block;
   background: no-repeat center;
   background-size: contain;
   background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%234074B8' points='13 1.45 6.5 8 0 1.45 1.44 0 6.5 5.09 11.56 0'/%3E%3C/svg%3E"); }   

#floating-cta .icons .icon__hover {
   z-index: 1;
   opacity: 0;
   background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23FFFFFF' points='13 1.45 6.5 8 0 1.45 1.44 0 6.5 5.09 11.56 0'/%3E%3C/svg%3E"); }
   
 #floating-cta .icon-up {
    transform: rotate(180deg); }  

   
#floating-cta:hover {
   background-color: var(--color__blue__1);
   color: var(--color__white); }

#floating-cta:hover .icons .icon {
   opacity: 0; }
   
#floating-cta:hover .icons .icon__hover {
  opacity: 1; }



       
       
       
@media (max-width:600px) {
   
   #floating-cta {
      min-width: 18rem;
      text-align: center;
      left: 50%;
     transform: translateX(-50%); }
   
}