/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  height:100%;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; 
  color:#222;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:all 0.3s ease}

/* Custom scrollbar */
::-webkit-scrollbar {width: 8px}
::-webkit-scrollbar-track {background: #f1f1f1}
::-webkit-scrollbar-thumb {background: #d4af37; border-radius: 4px}
::-webkit-scrollbar-thumb:hover {background: #b8941f}

    /* Page container */
    .page{min-height:100%;display:flex;flex-direction:column}

    /* NAV */
    .nav{
      position:fixed;
      top:20px;
      left:0;
      right:0;
      z-index:50;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 48px;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      border-radius: 15px;
      margin: 0 20px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .nav .brand{
      font-family:'Great Vibes', cursive;
      font-size:28px;
      color:#fff;
      text-shadow:0 2px 12px rgba(0,0,0,0.45);
    }
    .brand img{
      height:100px;
      width:auto;
      vertical-align:middle;
      margin-right:8px;
      filter: brightness(0) invert(1);
    }
    .nav .menu{display:flex;gap:30px;align-items:center}
    .nav .menu a{
      color:rgba(255,255,255,0.95);
      font-weight:600;
      opacity:0.95;
      position: relative;
      padding: 8px 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    .nav .menu a:hover{
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }
    .nav .menu a::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: #d4af37;
      transition: all 0.3s ease;
      transform: translateX(-50%);
    }
    .nav .menu a:hover::after{
      width: 80%;
    }
    .nav .cta{
      background: linear-gradient(45deg, #d1a42a, #f4e4a6);
      padding:12px 20px;
      border-radius:25px;
      color:#fff;
      font-weight:700;
      box-shadow: 0 4px 15px rgba(209, 164, 42, 0.3);
      transform: scale(1);
      transition: all 0.3s ease;
    }
    .nav .cta:hover{
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(209, 164, 42, 0.4);
    }

    /* HERO */
    .hero{
      height:100vh;
      position:relative;
      background-image: url('assets/hero-img.jpeg');
      background-size:cover;
      background-position:center;
      background-repeat: no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      background-attachment: fixed;
    }
    .hero::before{
      content:'';
      position:absolute;
      inset:0;
      background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
      z-index:1;
    }
    .hero::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(45deg, rgba(212,175,55,0.1) 0%, rgba(30,60,114,0.3) 100%);
      z-index:2;
    }
    .hero-inner{
      position:relative;
      z-index:3;
      max-width:1100px;
      width:100%;
      text-align:center;
      padding:32px;
      animation: heroSlideUp 1.2s ease-out;
    }
    .hero-title{
      font-family:'Great Vibes',cursive;
      font-size:clamp(60px, 6vw, 100px);
      line-height:auto;
      color:#fff;
      letter-spacing:2px;
      margin-bottom: 20px;
      text-shadow: 0 4px 20px rgba(0,0,0,0.7);
      background: linear-gradient(45deg, #fff, #d4af37);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: titleGlow 3s ease-in-out infinite alternate;
    }
    .hero-sub{
      color:rgba(255,255,255,0.95);
      margin-top:20px;
      font-weight:600;
      font-size:clamp(16px, 2vw, 20px);
      letter-spacing:1px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
      animation: fadeInUp 1s 0.5s both;
    }
    .hero-cta{
      margin-top:40px;
      display:inline-block;
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      padding:16px 32px;
      border-radius:30px;
      color:#fff;
      font-weight:700;
      font-size:18px;
      letter-spacing:1px;
      text-transform:uppercase;
      box-shadow: 0 8px 25px rgba(30,60,114,0.4);
      transition: all 0.3s ease;
      animation: fadeInUp 1s 0.8s both;
      position:relative;
      overflow:hidden;
    }
    .hero-cta::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }
    .hero-cta:hover{
      transform: translateY(-3px);
      box-shadow: 0 12px 35px rgba(30,60,114,0.6);
    }
    .hero-cta:hover::before{
      left:100%;
    }

    @keyframes heroSlideUp{
      0%{opacity:0;transform:translateY(50px)}
      100%{opacity:1;transform:translateY(0)}
    }
    @keyframes titleGlow{
      0%{text-shadow: 0 4px 20px rgba(212,175,55,0.3)}
      100%{text-shadow: 0 4px 30px rgba(212,175,55,0.6)}
    }
    @keyframes fadeInUp{
      0%{opacity:0;transform:translateY(30px)}
      100%{opacity:1;transform:translateY(0)}
    }

    /* Audio card */
    .audio-card{
      position:relative;
      max-width:900px;
      margin:-50px auto 40px;
      background: linear-gradient(135deg, #f8f6f3, #e8e1db);
      border-radius:15px;
      display:flex;
      align-items:center;
      padding:24px;
      box-shadow:0 20px 50px rgba(0,0,0,0.15);
      gap:24px;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.2);
      transition: all 0.3s ease;
    }
    .audio-card:hover{
      transform: translateY(-5px);
      box-shadow:0 25px 60px rgba(0,0,0,0.2);
    }
    .audio-thumb{
      width:140px;
      height:90px;
      border-radius:12px;
      background-size:cover;
      background-position:center;
      flex:0 0 140px;
      position: relative;
      overflow: hidden;
    }
    .audio-thumb::after{
      content:'';
      position:absolute;
      inset:0;
      background: linear-gradient(45deg, rgba(212,175,55,0.2), rgba(78,42,42,0.2));
      opacity:0;
      transition: opacity 0.3s ease;
    }
    .audio-card:hover .audio-thumb::after{
      opacity:1;
    }
    .audio-meta{flex:1}
    .audio-meta h4{
      margin-bottom:8px;
      font-size:20px;
      font-weight:700;
      color:#1e3c72;
    }
    .audio-controls{display:flex;align-items:center;gap:16px}
    .play-btn{
      width:50px;
      height:50px;
      border-radius:50%;
      background: linear-gradient(135deg, #fff, #f5f5f5);
      display:grid;
      place-items:center;
      cursor:pointer;
      box-shadow:0 8px 25px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      border: 2px solid rgba(212,175,55,0.2);
    }
    .play-btn:hover{
      transform: scale(1.1);
      box-shadow:0 12px 35px rgba(0,0,0,0.15);
      border-color: #d4af37;
    }
    .progress{
      height:8px;
      background:rgba(78,42,42,0.1);
      border-radius:6px;
      overflow:hidden;
      position:relative;
    }
    .progress > span{
      display:block;
      height:100%;
      width:0;
      background: linear-gradient(90deg, #d4af37, #f4e4a6);
      border-radius:6px;
      position:relative;
      transition: width 0.3s ease;
    }
    .progress > span::after{
      content:'';
      position:absolute;
      top:0;
      right:0;
      width:4px;
      height:100%;
      background:#fff;
      border-radius:50%;
      box-shadow: 0 0 10px rgba(212,175,55,0.5);
    }

    /* SECTION: Intro */
    .intro{
      padding:80px 18px 60px;
      text-align:center;
      background: linear-gradient(135deg, #fafafa, #f0f0f0);
      position: relative;
      overflow: hidden;
    }
    .intro::before{
      content:'';
      position:absolute;
      top:-50%;
      right:-50%;
      width:100%;
      height:100%;
      background: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
      animation: float 6s ease-in-out infinite;
    }
    .intro h2{
      font-size:clamp(24px, 4vw, 36px);
      font-weight:800;
      margin-bottom:20px;
      color:#2c2c2c;
      position:relative;
      z-index:2;
      background: linear-gradient(45deg, #2c2c2c, #1e3c72);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .intro p{
      max-width:820px;
      margin:0 auto;
      color:#666;
      font-size:18px;
      position:relative;
      z-index:2;
    }

    @keyframes float{
      0%, 100%{transform: translateY(0) rotate(0deg)}
      50%{transform: translateY(-20px) rotate(180deg)}
    }

    /* GRID features */
    .features{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:40px;
      padding:80px 18px;
      max-width:1400px;
      margin:0 auto;
    }
    .feature{
      background:white;
      border-radius:25px;
      overflow:hidden;
      box-shadow:0 20px 40px rgba(0,0,0,0.1);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position:relative;
    }
    .feature:hover{
      transform: translateY(-15px) scale(1.03);
      box-shadow:0 30px 60px rgba(0,0,0,0.2);
    }
    .feature::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:6px;
      background: linear-gradient(90deg, #d4af37, #f4e4a6);
      opacity:0;
      transition: opacity 0.3s ease;
    }
    .feature:hover::before{
      opacity:1;
    }
    .feature .img{
      height:400px;
      width:400px;
      background-size:cover;
      background-position:center;
      position:relative;
      overflow:hidden;
    }
    .feature .img::after{
      content:'';
      position:absolute;
      inset:0;
      background: linear-gradient(45deg, rgba(212,175,55,0.1), rgba(30,60,114,0.1));
      opacity:0;
      transition: opacity 0.3s ease;
    }
    .feature:hover .img::after{
      opacity:1;
    }
    .feature .label{
      padding:30px;
      font-weight:700;
      font-size:22px;
      color:#1e3c72;
      text-align:center;
      position:relative;
    }

    /* GOLD BANNER */
    .gold-banner{
      background: linear-gradient(135deg, #d1a42a, #b8941f);
      color:#fff;
      padding:40px 18px;
      margin-top:18px;
      display:flex;
      justify-content:center;
      align-items:center;
      position:relative;
      overflow:hidden;
    }
    .gold-banner::before{
      content:'';
      position:absolute;
      top:-50%;
      left:-50%;
      width:200%;
      height:200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      animation: rotate 10s linear infinite;
    }
    .gold-banner .inner{
      max-width:1100px;
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:relative;
      z-index:2;
    }
    .gold-banner .inner > div:first-child{
      font-size:20px;
      font-weight:600;
      text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .gold-banner .btn{
      border:2px solid rgba(255,255,255,0.8);
      padding:12px 24px;
      border-radius:25px;
      font-weight:700;
      transition: all 0.3s ease;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
    }
    .gold-banner .btn:hover{
      background: rgba(255,255,255,0.2);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }

    @keyframes rotate{
      0%{transform: rotate(0deg)}
      100%{transform: rotate(360deg)}
    }

    /* VALUES section */
    .values{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:60px 18px}
    .values .left{position:relative}
    .values .photo-stack{position:relative}
    .values .photo-stack img{width:100%;display:block;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,0.12)}
    .values .right h3{font-size:22px;margin-bottom:12px}
    .values .right p{color:#666}

    /* CONTACT FORM */
    .contact-section {
      background: linear-gradient(135deg, #f9f9f9, #f0f0f0);
      padding: 100px 18px;
      position: relative;
      overflow: hidden;
    }

    .contact-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(212,175,55,0.03) 0%, transparent 70%);
      animation: float 10s ease-in-out infinite;
    }

    .contact-container {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      position: relative;
      z-index: 2;
    }

    .contact-info {
      background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,248,248,0.9));
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    .contact-info h3 {
      font-size: 28px;
      margin-bottom: 25px;
      color: #1e3c72;
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .contact-details {
      margin-bottom: 30px;
    }

    .contact-details p {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 16px;
      color: #666;
      padding: 10px;
      background: rgba(255,255,255,0.5);
      border-radius: 10px;
      transition: all 0.3s ease;
    }

    .contact-details p i {
      color: #d4af37;
      font-size: 1.2rem;
      min-width: 20px;
    }

    .contact-details p:hover {
      background: rgba(212,175,55,0.1);
      transform: translateX(5px);
    }

    .contact-form {
      background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,248,248,0.95));
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    .contact-form h3 {
      font-size: 28px;
      margin-bottom: 25px;
      color: #1e3c72;
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .form-group {
      margin-bottom: 25px;
    }

    .form-group label {
      display: block;
      margin-bottom: 10px;
      font-weight: 700;
      color: #444;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .form-control {
      width: 100%;
      padding: 15px 20px;
      border: 2px solid rgba(212,175,55,0.2);
      border-radius: 10px;
      font-family: inherit;
      font-size: 16px;
      background: rgba(255,255,255,0.8);
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .form-control:focus {
      outline: none;
      border-color: #d4af37;
      background: rgba(255,255,255,0.95);
      box-shadow: 0 0 20px rgba(212,175,55,0.2);
      transform: translateY(-2px);
    }

    textarea.form-control {
      min-height: 120px;
      resize: vertical;
    }

    .submit-btn {
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      color: white;
      border: none;
      padding: 15px 30px;
      border-radius: 25px;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
      overflow: hidden;
    }

    .submit-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }

    .submit-btn:hover {
      background: linear-gradient(45deg, #142a5c, #1e3c72);
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(30,60,114,0.4);
    }

    .submit-btn:hover::before {
      left: 100%;
    }

    /* FOOTER */
    .site-footer {
      background: #222;
      color: white;
      padding: 60px 18px 30px;
    }
    .footer-container {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }
    .footer-column h4 {
      font-size: 18px;
      margin-bottom: 20px;
      color: #d1a42a;
    }
    .footer-column p, .footer-column a {
      opacity: 0.8;
      margin-bottom: 10px;
      display: block;
    }
    .footer-column a:hover {
      opacity: 1;
      color: #d1a42a;
    }
    .social-links {
      display: flex;
      gap: 15px;
      margin-top: 15px;
    }
    .social-links a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
      color: #fff;
      font-size: 1.2rem;
    }
    .social-links a:hover {
      background: #d1a42a;
      transform: translateY(-2px);
    }
    .copyright {
      max-width: 1100px;
      margin: 40px auto 0;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.1);
      text-align: center;
      opacity: 0.7;
      font-size: 14px;
    }

    /* Mobile Hamburger Menu */
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      padding: 8px;
      z-index: 1001;
    }

    .hamburger span {
      width: 25px;
      height: 3px;
      background-color: #fff;
      margin: 3px 0;
      transition: 0.3s;
      border-radius: 3px;
    }

    .hamburger.active span:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px);
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px);
    }

    /* About Us Section */
    .about-section {
      padding: 100px 20px;
      background: 
        linear-gradient(135deg, rgba(248, 246, 243, 0.511), rgba(237,232,225,0.9)),
        url('assets/SA-Flag.png');
      background-size: cover, fill;
      background-position: center, center;
      background-repeat: no-repeat, no-repeat;
      background-attachment: fixed, fixed;
      position: relative;
      overflow: hidden;
    }

    .about-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(212,175,55,0.03) 0%, transparent 70%);
      animation: float 8s ease-in-out infinite;
    }

    .about-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .about-content {
      position: relative;
    }

    .about-content::before {
      content: '';
      position: absolute;
      top: -20px;
      left: -20px;
      width: 60px;
      height: 60px;
      background: linear-gradient(45deg, #d4af37, #f4e4a6);
      border-radius: 50%;
      opacity: 0.1;
      z-index: -1;
    }

    .about-content h3 {
      font-size: 2.8rem;
      color: #1e3c72;
      margin: 20px 0;
      line-height: 1.2;
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
    }

    .about-content h3::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #d4af37, #f4e4a6);
      border-radius: 2px;
    }

    .about-content p {
      color: #666;
      line-height: 1.9;
      margin-bottom: 25px;
      font-size: 1.15rem;
      font-weight: 400;
    }

    .stats {
      display: flex;
      gap: 50px;
      margin-top: 50px;
    }

    .stat {
      text-align: center;
      position: relative;
      padding: 20px;
      background: rgba(255,255,255,0.7);
      border-radius: 15px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(212,175,55,0.2);
      transition: all 0.3s ease;
    }

    .stat:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.1);
      border-color: #d4af37;
    }

    .stat h4 {
      font-size: 3rem;
      background: linear-gradient(45deg, #d4af37, #b8941f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0;
      font-weight: 800;
      line-height: 1;
    }

    .stat p {
      color: #666;
      margin: 10px 0 0 0;
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-weight: 600;
    }

    .about-image {
      position: relative;
    }

    .about-image::before {
      content: '';
      position: absolute;
      top: 20px;
      right: 20px;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(212,175,55,0.2), rgba(30,60,114,0.2));
      border-radius: 12px;
      z-index: -1;
    }

    .about-image img {
      width: 100%;
      height: 450px;
      object-fit: cover;
      border-radius: 15px;
      box-shadow: 0 25px 50px rgba(0,0,0,0.15);
      transition: all 0.3s ease;
    }

    .about-image:hover img {
      transform: translateY(-5px);
      box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    }

    /* Mission & Vision Section */
    .mission-vision {
      padding: 100px 20px;
      background: linear-gradient(135deg, #fff, #f8f8f8);
      position: relative;
    }

    .mission-vision::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 20%, rgba(212,175,55,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(30,60,114,0.05) 0%, transparent 50%);
      pointer-events: none;
    }

    .mission-vision-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 40px;
      position: relative;
      z-index: 1;
    }

    .mission, .vision, .values-card {
      background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,246,243,0.9));
      padding: 50px 40px;
      border-radius: 20px;
      text-align: center;
      box-shadow: 0 20px 40px rgba(0,0,0,0.08);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.3);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
    }

    .mission::before, .vision::before, .values-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(from 0deg, transparent, rgba(212,175,55,0.1), transparent);
      animation: rotate 8s linear infinite;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .mission:hover::before, .vision:hover::before, .values-card:hover::before {
      opacity: 1;
    }

    .mission:hover, .vision:hover, .values-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    }

    .mission .icon, .vision .icon, .values-card .icon {
      font-size: 4rem;
      margin-bottom: 30px;
      display: block;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
      color: #d4af37;
    }

    .mission .icon i, .vision .icon i, .values-card .icon i {
      font-size: 3rem;
    }

    .mission h3, .vision h3, .values-card h3 {
      color: #1e3c72;
      font-size: 2rem;
      margin-bottom: 25px;
      position: relative;
      z-index: 2;
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .mission p, .vision p {
      color: #666;
      line-height: 1.8;
      font-size: 1.1rem;
      position: relative;
      z-index: 2;
    }

    .values-card ul {
      list-style: none;
      padding: 0;
      text-align: left;
      position: relative;
      z-index: 2;
    }

    .values-card li {
      color: #666;
      padding: 12px 0;
      border-bottom: 1px solid rgba(224,224,224,0.5);
      font-size: 1.1rem;
      transition: all 0.3s ease;
      position: relative;
      padding-left: 30px;
    }

    .values-card li:last-child {
      border-bottom: none;
    }

    .values-card li:before {
      content: "✓";
      color: #d4af37;
      font-weight: bold;
      position: absolute;
      left: 0;
      top: 12px;
      font-size: 1.2rem;
    }

    .values-card li:hover {
      color: #1e3c72;
      padding-left: 35px;
    }

    /* DONATION SECTION */
    .donation-section {
      background: linear-gradient(135deg, #f8f6f3, #ede8e1);
      padding: 100px 20px;
      position: relative;
      overflow: hidden;
    }

    .donation-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
      animation: float 12s ease-in-out infinite;
    }

    .donation-container {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .donation-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .donation-header h2 {
      font-size: 3rem;
      color: #1e3c72;
      margin-bottom: 20px;
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .donation-header p {
      font-size: 1.2rem;
      color: #666;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.8;
    }

    .donation-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      margin-bottom: 50px;
    }

    .donation-info h3, .account-details h3 {
      font-size: 2rem;
      color: #1e3c72;
      margin-bottom: 30px;
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .donation-reasons {
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .reason {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 25px;
      background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,248,248,0.9));
      border-radius: 15px;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
    }

    .reason:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    .reason-icon {
      font-size: 3rem;
      padding: 15px;
      background: linear-gradient(45deg, #d4af37, #f4e4a6);
      border-radius: 50%;
      min-width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 25px rgba(212,175,55,0.3);
      color: #fff;
    }

    .reason-icon i {
      font-size: 2rem;
    }

    .reason-text h4 {
      font-size: 1.3rem;
      color: #1e3c72;
      margin-bottom: 8px;
    }

    .reason-text p {
      color: #666;
      line-height: 1.6;
    }

    .account-card {
      background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,248,248,0.95));
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
      margin-bottom: 40px;
    }

    .account-info {
      margin-bottom: 30px;
    }

    .account-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid rgba(224,224,224,0.5);
      transition: all 0.3s ease;
    }

    .account-row:last-child {
      border-bottom: none;
    }

    .account-row:hover {
      background: rgba(212,175,55,0.05);
      margin: 0 -10px;
      padding: 15px 10px;
      border-radius: 8px;
    }

    .account-row .label {
      font-weight: 700;
      color: #1e3c72;
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .account-row .value {
      font-weight: 600;
      color: #333;
      font-family: 'Courier New', monospace;
      background: rgba(212,175,55,0.1);
      padding: 5px 10px;
      border-radius: 5px;
    }

    .copy-buttons {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .copy-btn {
      background: linear-gradient(45deg, #1e3c72, #2a5298);
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 25px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
      overflow: hidden;
    }

    .copy-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }

    .copy-btn:hover {
      background: linear-gradient(45deg, #142a5c, #1e3c72);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(30,60,114,0.4);
    }

    .copy-btn:hover::before {
      left: 100%;
    }

    .donation-methods h4 {
      font-size: 1.5rem;
      color: #1e3c72;
      margin-bottom: 20px;
      text-align: center;
    }

    .methods-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .method {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 20px;
      background: rgba(255,255,255,0.7);
      border-radius: 15px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(212,175,55,0.2);
      transition: all 0.3s ease;
      text-align: center;
    }

    .method:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      border-color: #d4af37;
    }

    .method-icon {
      font-size: 2rem;
      padding: 10px;
      background: linear-gradient(45deg, #d4af37, #f4e4a6);
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .method span {
      font-weight: 600;
      color: #1e3c72;
      font-size: 0.9rem;
    }

    .donation-footer {
      background: linear-gradient(135deg, rgba(78,42,42,0.1), rgba(212,175,55,0.1));
      padding: 30px;
      border-radius: 15px;
      text-align: center;
      border: 1px solid rgba(212,175,55,0.2);
    }

    .donation-footer p {
      color: #666;
      font-size: 1rem;
      line-height: 1.6;
      margin: 0;
    }

    .donation-footer strong {
      color: #4e2a2a;
    }

    /* Mobile Responsiveness for Donation Section */
    @media (max-width: 768px) {
      .donation-content {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      
      .donation-header h2 {
        font-size: 2.2rem;
      }
      
      .reason {
        flex-direction: column;
        text-align: center;
      }
      
      .reason-icon {
        min-width: 60px;
        height: 60px;
        font-size: 2.5rem;
      }
      
      .copy-buttons {
        justify-content: center;
      }
      
      .methods-grid {
        grid-template-columns: 1fr;
      }
      
      .account-row {
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }
      
      .account-row .value {
        font-size: 0.9rem;
      }
    }

    /* Responsiveness */
    @media (max-width:900px){
      .hero-title{font-size:64px}
      .features{grid-template-columns:1fr}
      .values{grid-template-columns:1fr}
      .nav{padding:12px}
      .contact-container{grid-template-columns:1fr}
      .footer-container{grid-template-columns:1fr 1fr}
    }
    @media (max-width:600px){
      .footer-container{grid-template-columns:1fr}
    }
    @media (max-width: 768px) {
      .hamburger {
        display: flex;
      }
      
      .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: rgba(30, 60, 114, 0.95);
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease;
        z-index: 1000;
        gap: 30px;
      }
      
      .menu.active {
        right: 0;
      }
      
      .menu a {
        color: #fff;
        font-size: 1.2rem;
        text-decoration: none;
        opacity: 0.9;
        transition: opacity 0.3s;
      }
      
      .menu a:hover {
        opacity: 1;
      }
      
      .menu .cta {
        background: #d4af37;
        padding: 12px 24px;
        border-radius: 6px;
        color: #1e3c72 !important;
        font-weight: 700;
      }
      
      .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      
      .about-content h3 {
        font-size: 2rem;
      }
      
      .stats {
        justify-content: space-around;
        gap: 20px;
      }
      
      .stat h4 {
        font-size: 2rem;
      }
      
      .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      
      .mission, .vision, .values-card {
        padding: 30px;
      }
    }