.banner {
    background: #FFF3CF;
}
/* #banner .title span {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards;
}

#banner .title span:nth-child(1) { animation-delay: 0.2s; }
#banner .title span:nth-child(2) { animation-delay: 0.4s; }
#banner .title span:nth-child(3) { animation-delay: 0.6s; }
#banner .title span:nth-child(4) { animation-delay: 0.8s; }
#banner .title span:nth-child(5) { animation-delay: 1s; } */

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional shimmer on "Gold" */
/* Shining gold effect */
/* shining for letters inside gold-word */
.gold-word .gold-letter {
  background: linear-gradient(90deg, #DAA520 25%, #FFD700 50%, #DAA520 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shining 2s linear infinite;
}

@keyframes shining {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}


.top-left {
    padding-top: 23%;
}
.img_2 {
    margin-bottom: -6rem;
}
.center {
    /* -webkit-animation: mover 2s infinite  alternate;
    animation: mover 2s infinite  alternate; */
    /* -webkit-animation: zoom-in-zoom-out 3s infinite  alternate;
    animation: zoom-in-zoom-out 3s infinite  alternate; */
}
@-webkit-keyframes mover {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.01, 1.01);
    }
    100% {
      transform: scale(1, 1);
    }
    0% {
      opacity: 0.7;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.8;
    }
    0% { transform: translateX(0); }
    100% { transform: translateX(-5px); }
}
@keyframes mover {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.01, 1.01);
    }
    100% {
      transform: scale(1, 1);
    }
    0% {
      opacity: 0.7;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.8;
    }
    0% { transform: translateX(0); }
    100% { transform: translateX(-5px); }
}
.rotate-left {
  animation: loader 4s linear infinite;
}
.rotate-right {
  animation: loaderRight 7s linear infinite;
}


@keyframes loader {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: y 90deg;
    scale: 0.5;
  }
  50% {
    rotate: 180deg;
  }
  75% {
    rotate: x 270deg;
    border-radius: 50%;
  }
  100% {
    rotate: 360deg;
  }
}

@supports not (rotate: 0deg) {
  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: scale(0.5) rotateY(90deg);
    }
    50% {
      transfrom: rotate(180deg);
    }
    75% {
      transform: rotateX(270deg);
      border-radius: 50%;
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

@keyframes loaderRight {
  0% {
    rotate: 0deg;
  }
  75% {
    rotate: x 270deg;
    border-radius: 50%;
  }
  50% {
    rotate: 180deg;
  }
  25% {
    rotate: y 90deg;
    scale: 0.5;
  }
  100% {
    rotate: 360deg;
  }
}

@supports not (rotate: 0deg) {
  @keyframes loaderRight {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: scale(0.5) rotateY(90deg);
    }
    50% {
      transfrom: rotate(180deg);
    }
    75% {
      transform: rotateX(270deg);
      border-radius: 50%;
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

.rotate {
  transform-origin: center;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bouns_money {
  animation: bouns 4s infinite;
}
@keyframes bouns {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-10px);
  }
}



.slides-wrapper {
    position: relative;
    height: 150px; /* adjust as needed */
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    top: 100%; /* start off-screen */
    left: 0;
    transition: top 0.8s ease-in-out;
}

.slide.active {
    top: 0; /* visible */
}

#gold_rate .title {
    font-size: 53px;
}
#gold_rate .card {
    background: linear-gradient(90deg, #FFFBEE 0%, #FFFFFF 51.75%);
    border: 1px solid var(--Primary_Yellow, #D4AF37)
}
#gold_rate hr {
    color: #D4AF37;
    height: 5px;
    background: #D4AF37;
    border-radius: 9px;
    opacity: 0.8;
    width: 75%;
}
#indicators {
    background: var(--Frame-BG, #F6FAFD);
}
#indicators .w-75 {
    place-self: center;
}
#gold_deserves .card_clr {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 12px;
    z-index: 0;
}

/* Background image layer */
#gold_deserves .card_clr::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 1s ease; /* smooth zoom effect */
    z-index: 0; /* behind content */
    transform-origin: center;
}

/* Gradient overlay layer */
#gold_deserves .card_clr::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, #000000 85.18%);
    opacity: 0.7;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Hover effect — only background scales */
#gold_deserves .card_clr:hover::before {
    transform: scale(1.1);
}

/* Optional: darken overlay on hover */
#gold_deserves .card_clr:hover::after {
    opacity: 0.85;
}

/* Ensure card content stays above */
#gold_deserves .card_clr > * {
    position: relative;
    z-index: 2;
}


#gold_deserves .card_clr .card {
    height: 40px;
    width: 40px;
}
#gold_deserves .card.gold-feature h3{
    margin-top: -1.9rem;
}
#gold_deserves .btm-btn {
    margin-top: -1.2rem;
}
#gold_deserves .card.gold-feature{
    border-color: #981D1F !important;
}
#gold_deserves .btm-btn button{
    font-size: smaller;
}
/* #trust_mmgc .frame {
    width: 9%;
} */
#lenders .h1 {
    font-size: 52px;
}
#testimonial {
    background: #FFFBEF;
}
#testimonial .profile {
    width: 15%;
    display: inline!important;
    margin-top: -1.5rem;
}
#testimonial .star1, #testimonial .star2, #testimonial .star3, #testimonial .star4{
    filter: brightness(0) saturate(100%) invert(79%) sepia(15%) saturate(5744%) hue-rotate(359deg) brightness(103%) contrast(97%);
}
#testimonial .card-foot img {
    width: 10%;
    height: fit-content;
}
.animated-hr-1 {
    border: 0;
    height: 3px;
    background: linear-gradient(to right, #DAA520, #FFD700);
    width: 0;
    animation: growLine 2s forwards;
}
.animated-hr-2 {
    border: 0;
    height: 3px;
    background: linear-gradient(to right, #DAA520, #FFD700);
    width: 0;
    animation: growLine 4s forwards;
}
.animated-hr-3 {
    border: 0;
    height: 3px;
    background: linear-gradient(to right, #DAA520, #FFD700);
    width: 0;
    animation: growLine 6s forwards;
}
@keyframes growLine {
    from { width: 0; }
    to { width: 100%; }
}

.shimmer {
    position: relative;
    display: inline-block;
    color: #DAA520;
    background: linear-gradient(90deg, #000000 25%, #ceba48 50%, #020202 75%);
    background-size: 200% auto;
    color: #DAA520;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s linear infinite;
}

@keyframes shine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}
#gold_rate .grc_text_clr {
    background: linear-gradient(90deg, #DAA520 25%, #FFD700 50%, #DAA520 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s linear infinite;
}

#gold_rate .title span {
  opacity: 0;
  transform: translateY(30px);
  display: inline-block;
  animation: fadeUpIn 0.8s forwards;
}

/* Animate each word with delay */
#gold_rate .title span:nth-child(1) { animation-delay: 0s; }
#gold_rate .title span:nth-child(2) { animation-delay: 0.4s; }
#gold_rate .title span:nth-child(3) { animation-delay: 0.8s; }
#gold_rate .title span:nth-child(4) { animation-delay: 1.2s; }
#gold_rate .title span:nth-child(5) { animation-delay: 1.6s; }

@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#indicators .title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(-20px);
}

/* Animation definition (as you already have) */
@keyframes fadeBounce {
    0% { opacity: 0; transform: translateY(-30px); }
    50% { opacity: 1; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Active animation when visible */
#indicators .title span.animate {
    animation: fadeBounce 2s forwards;
}

#indicators .title span:nth-child(1).animate { animation-delay: 0.2s; }
#indicators .title span:nth-child(2).animate { animation-delay: 0.5s; }
#indicators .title span:nth-child(3).animate { animation-delay: 0.8s; }


.typing-active {
    overflow: hidden;
    animation: typing 3s steps(40, end) forwards;
}

/* Typing animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

 .accordion-button::after {
      /* remove bootstrap's svg */
      background-image: none !important;

      /* show our symbol */
      content: "+";                 /* plus when collapsed */
      font-size: 1.25rem;
      line-height: 1;
      width: 1.25rem;
      height: 1.25rem;
      display: inline-block;
      text-align: center;
      margin-left: 0.5rem;         /* space between text and symbol */
      color: inherit;
      transition: transform .15s ease;
    }

    /* When the button is expanded (not .collapsed), show minus */
    .accordion-button:not(.collapsed)::after {
      content: "−";                 /* unicode minus (U+2212) looks better than hyphen */
    }
@media (max-width: 1025px) {
    #banner .pt-5 {
        padding-top: 4rem !important;
    }
    #gold_deserves h3{
      align-self: center;
    }
}
@media (max-width: 1025px) and (min-width: 600px){
    #gold_deserves .w-50 {
      width: 70% !important;
    }
    .trust_flex {
      display: flex;
      gap: 1rem;
    }
    #trust_mmgc h3 {
      text-align: center;
    }
    #trust_mmgc .tab-view {
      justify-self: center;
      width: 40% !important;
    }
}

    /* Optional: tweak symbol alignment for small screens */
    @media (max-width: 600px) {
      .accordion-button::after { font-size: 1.125rem; width: 1.125rem; }
      #faq .w-75 {
          width: 100% !important;
      }
      #banner .header {
        padding-left: 1.2rem;
      }
      #gold_deserves .w-50 {
        width: 90% !important;
      }
      #lenders .h1 {
        font-size: 35px;
      }
    }