.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.22s; }
.d3 { animation-delay: 0.34s; }
.d4 { animation-delay: 0.48s; }
.d5 { animation-delay: 0.62s; }
.d6 { animation-delay: 0.76s; }
.d7 { animation-delay: 0.9s; }
.d8 { animation-delay: 1.04s; }

.circle-pulse .gb-shape{ position: relative; z-index: 1; }
.circle-pulse .gb-shape:before{
    content: "";
    position: absolute;
    top: 48%;
    left: 48%;
    width: 100%;
    height: 100%;
    
    /* Start centered and behind */
    transform: translate(-50%, -50%) scale(1);
    background: rgba(255, 255, 255, 0.4); /* Adjust color to your theme */
    border-radius: 50%;
    z-index: -1; /* Keeps it behind the SVG */
    
    /* The Animation */
    -webkit-animation: pulseRadial 2s infinite ease-out;
    animation: pulseRadial 2s infinite ease-out;    
}

@keyframes pulseRadial {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

.cta--pulse { animation: cta-pulse 2s ease-out 1; }
@keyframes cta-pulse {
	0%  { box-shadow: 0 0 0 0 rgb(201 81 13 / 55%); }
	70% { box-shadow: 0 0 0 12px rgb(201 81 13 / 0%); }
	100%{ box-shadow: 0 0 0 0 rgb(201 81 13 / 0%); }
}

.fadeInUp {
   animation: fadeInUp 0.75s var(--t-ease); 
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInLeft  {
    animation: fadeInLeft 0.75s var(--t-ease);
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

.fadeInRight  {
    animation: fadeInRight 0.75s var(--t-ease);
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0); /* Starts off-screen to the right */
    }
    100% {
        opacity: 1;
        transform: none; /* Ends in its natural position */
    }
}

.slide-in  { animation: slideIn .28s var(--t-ease) both; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

.slide-out { animation: slideOut .18s ease-in both; }
@keyframes slideOut {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.slide-back { animation: slideBack .28s var(--t-ease) both; }
@keyframes slideBack {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}