:root {
    --navy: #06162f;
    --navy2: #0b2145;
    --gold: #d8a23a;
    --gold2: #ffdc83;
    --white: #fff;
    --cream: #fbf7ef;
    --text: #13213a;
  }
  
  

  .don-btn,
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    padding: 15px 24px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
    transition: .25s
  }
  
  .don-btn,
  .btn.gold {
    background: linear-gradient(135deg, var(--gold2), var(--gold));
    color: #071733;
    box-shadow: 0 12px 30px rgba(216, 162, 58, .3)
  }
  
  .btn.outline {
    border: 2px solid var(--gold);
    color: white;
    background: rgba(255, 255, 255, .04)
  }
  .hero{
    overflow: hidden
  }
  
  .hero .overlay{
    min-height: 740px;
    background: radial-gradient(circle at 60% 25%, rgba(255, 211, 112, .22), transparent 22%), linear-gradient(90deg, rgba(4, 14, 34, .97), rgba(7, 22, 52, .82));
    color: white;
    padding: 80px 0 90px;
    position: relative;
  }
  
  .hero .overlay:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 170px;
    background: linear-gradient(transparent, #06041a);
  }
  
  .hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 35px
  }
  
  .script {
    /*font-family: Cinzel, serif;*/
    color: var(--gold2);
    font-size: 42px
  }
  
  .hero h1 {
    /*font-family: Cinzel, serif;*/
    font-size: 76px;
    line-height: .98;
    text-transform: uppercase;
    margin: 10px 0
  }
  
  .hero h1 strong {
    color: var(--gold2)
  }
  
  .hero p {
    max-width: 600px;
    font-size: 18px
  }
  
  .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px
  }

  .goal-section .icon {
    font-size: 42px;
    color: var(--gold);
    margin-bottom: 10px
  }
  
  .speaker {
    height: 560px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 214, 126, .35);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px
  }
  
  .speaker .placeholder {
    font-size: 20px;
    color: #f6d78a
  }
  
  .speaker small {
    display: block;
    margin-top: 15px;
    color: white
  }
  
  .progress-card {
    position: relative;
    z-index: 4;
    margin-top: -80px;
    background: linear-gradient(135deg, #3b00ad, #782ecb);
    border: 2px solid rgba(216, 162, 58, .75);
    border-radius: 22px;
    padding: 34px;
    color: white;
    box-shadow: 0 20px 45px rgba(2, 8, 22, .35)
  }
  
  .progress-title {
    text-align: center;
    color: var(--gold2);
    font-weight: 900;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 24px
  }
  
  .progress-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 30px;
    align-items: center
  }
  
  .stat-label {
    color: var(--gold2);
    font-weight: 900;
    text-transform: uppercase
  }
  
  .big-number {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 2px
  }
  
  .circle {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    margin: auto;
    background: conic-gradient(var(--gold2) 0 54%, rgba(255, 255, 255, .16) 54% 100%);
    display: grid;
    place-items: center
  }
  
  .circle-inner {
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background: #3b00ad;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .1)
  }
  
  .circle b {
    font-size: 50px;
    color: var(--gold2)
  }
  
  .bar {
    height: 26px;
    border: 1px solid rgba(255, 220, 131, .6);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 25px;
    background: #06162f
  }
  
  .bar span {
    display: block;
    height: 100%;
    width: 54%;
    background: linear-gradient(90deg, var(--gold2), var(--gold));
    border-radius: 99px
  }
  
  .bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 800;
    margin-top: 8px
  }
  
  .note {
    text-align: center;
    margin-top: 15px;
    font-weight: 800;
    color: #fff
  }
  
  .section-title {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 32px
  }
  
  .section-title:before,
  .section-title:after {
    content: "";
    display: inline-block;
    width: 80px;
    height: 2px;
    background: var(--gold);
    vertical-align: middle;
    margin: 0 18px
  }
  
  .impact {
    background: white;
    border-radius: 24px;
    padding: 34px;
    box-shadow: 0 10px 30px rgba(7, 22, 52, .08)
  }
  
  .impact-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    text-align: center
  }
  
  .impact-item {
    padding: 16px;
    border-right: 1px solid rgba(216, 162, 58, .35)
  }
  
  .impact-item:last-child {
    border-right: 0
  }
  
  .impact-item .icon {
    font-size: 42px;
    color: var(--gold);
    margin-bottom: 10px
  }
  
  .impact-item b {
    font-size: 28px;
    display: block
  }
  
  .impact-item span {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px
  }
  
  .donations {
    background: #1e1e1e;
    border-radius: 24px;
    padding: 34px;
    box-shadow: 0 10px 30px rgba(7, 22, 52, .08)
  }
  
  .donation-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px
  }
  
  .donation-grid .amount {
    border: 1.5px solid rgba(216, 162, 58, .55);
    border-radius: 10px;
    padding: 25px 8px;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    background: #fff
  }
  
  .amount.featured {
    background: linear-gradient(135deg, var(--gold2), var(--gold));
    color: #071733
  }
  
  .other {
    text-align: center;
    margin-top: 16px
  }
  
  .media-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px
  }
  
  .media {
    overflow: hidden;
  }
  .media .overlay {
    width: 100%;
    min-height: 165px;
    border-radius: 12px;
    background: linear-gradient(rgb(59 0 173 / 10%), rgb(59 0 173 / 40%));
    color: white;
    /*display: flex;
    justify-content: center;
    align-items: end;
    flex-direction: column;*/
    text-align: center;
    padding: 16px;
    font-weight: 900;
    text-transform: uppercase
  }
  
  .play {
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: auto auto 15px
  }
  
  .testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
  }
  
  .testimonial {
    background: #1e1e1e;
    border: 1px solid rgba(216, 162, 58, .3);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 8px 22px rgba(7, 22, 52, .08);
    color: #fff;
  }
  
  .quote {
    color: var(--gold);
    font-size: 32px
  }
  
  .testimonial b {
    display: block;
    margin-top: 15px
  }
  
  .cta {
    background: linear-gradient(90deg, rgb(6 4 26 / 90%), rgb(6 4 26 / 95%)), url(https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop) center / cover;
    color: white;
    padding: 58px 0
  }
  
  .cta-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 30px;
    align-items: center
  }
  
  .cta h2 {
    /*font-family: Cinzel, serif;*/
    font-size: 40px;
    line-height: 1.1
  }
  
  .cta h2 span {
    color: var(--gold2)
  }
  
  .cta-buttons {
    display: grid;
    gap: 12px
  }

.impact {
    background: #1e1e1e;
    color: #fff;
}

.amount-box .radioDesign span {
    height: 80px;
    line-height: 64px;
    font-size: 1.5rem;
    color: #000;
    font-weight: 600;
}



  
  @media(max-width:900px) {
    .hero-grid,
    .progress-grid,
    .cta-grid,
    .footer-grid {
      grid-template-columns: 1fr
    }
    .hero h1 {
      font-size: 48px
    }
    .speaker {
      height: 330px
    }
    .progress-card {
      margin-top: -35px
    }
    .impact-grid,
    .donation-grid,
    .media-grid,
    .testimonials {
      grid-template-columns: repeat(2, 1fr)
    }
    .impact-item {
      border: 0
    }
    .section-title:before,
    .section-title:after {
      display: none
    }
  }
  
  @media(max-width:560px) {
    .impact-grid,
    .donation-grid,
    .media-grid,
    .testimonials {
      grid-template-columns: 1fr
    }
  }