:root{
      --bg:#1a0d00; /* deep brown */
      --accent:#ff9933; /* bhagwa */
      --accent-2:#ff6600;
      --muted:#ffd699;
      --card:#2a1200;
      --glass: rgba(255,255,255,0.03);
      --glass-2: rgba(255,255,255,0.02);
      --glass-3: rgba(255,255,255,0.012);
      --max-width:1140px;
      font-family: Inter, system-ui, Roboto, "Helvetica Neue", Arial;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:
      radial-gradient(900px 420px at 12% 8%, rgba(255,153,51,0.06), transparent),
      linear-gradient(180deg,#1a0d00 0%, #3d1a00 100%);
      color:#fffaf0;-webkit-font-smoothing:antialiased}

    a{color:var(--muted);text-decoration:none}
    .container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

    /* Header */
    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:18px 0}
    .logo{display:flex;gap:12px;align-items:center}
    .mark{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:900;color:#111}
    
    nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

nav a {
  position: relative;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Hover / Focus / Active effects */
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  transition: width 0.3s ease;
}

nav a:hover,
nav a:focus {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255, 153, 51, 0.5);
}

nav a:hover::after,
nav a:focus::after {
  width: 100%;
}

nav a.active {
  color: var(--accent-2);
  text-shadow: 0 0 10px rgba(255, 153, 51, 0.6);
}

nav a.active::after {
  width: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* Mobile view */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 880px) {
  nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 74px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    flex-direction: column;
    padding: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 1000;
  }

  nav.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  nav a {
    padding: 10px 0;
    font-size: 18px;
  }
}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 480px;gap:32px;align-items:center;padding:40px 0}
    @media (max-width:980px){.hero{grid-template-columns:1fr;gap:20px}}
    .card{background:linear-gradient(180deg,var(--glass),var(--glass-2));padding:22px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 18px 60px rgba(0,0,0,0.6)}
    h1{color:var(--accent);margin:0 0 8px;font-size:clamp(24px,3.8vw,40px)}
    p.lead{margin:0 0 12px;color:rgba(255,235,200,0.95)}

    /* floating dots and om symbols */
    .bg-effects{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
    .particle{position:absolute;background:radial-gradient(circle,#ffd699, transparent 40%);width:8px;height:8px;border-radius:50%;opacity:0.06;mix-blend-mode:screen}
    .om-float{position:absolute;color:rgba(255,200,140,0.06);font-size:36px;font-weight:900;mix-blend-mode:screen}

    /* Portrait / Surya Mandala */
    .portrait-wrap{position:relative;height:460px;display:flex;align-items:center;justify-content:center}
    .surya-svg{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:540px;height:540px;pointer-events:none;z-index:2}
    .light-sweep{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:620px;height:620px;border-radius:50%;mix-blend-mode:screen;z-index:3;pointer-events:none;background:conic-gradient(from 120deg at 50% 50%, rgba(255,255,255,0.02), rgba(255,153,51,0.12), rgba(255,235,180,0.02));animation:sweep 6s linear infinite}
    .glow{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:760px;height:760px;border-radius:50%;z-index:1;filter:blur(28px);opacity:0.36;background:radial-gradient(circle at 50% 40%, rgba(255,153,51,0.12), transparent 35%)}
    @keyframes sweep{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}

    /* Modal */
    .modal-overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,0.85));display:flex;align-items:center;justify-content:center;z-index:9999}
    .modal-inner{position:relative;width:92%;max-width:980px;height:600px;border-radius:16px;display:flex;align-items:center;justify-content:center}
    .modal-card{position:relative;width:100%;max-width:920px;height:560px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:28px;padding:26px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.03)}
    .close-btn{position:absolute;right:18px;top:18px;background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:#fff;cursor:pointer;z-index:12}

    /* Surya spin & pulse (class added dynamically when audio beats) */
    .surya-spin{animation:rotateSurya 28s linear infinite}
    @keyframes rotateSurya{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
    .surya-pulse{transform-origin:50% 50%;animation:suryaPulse 1.1s ease-out infinite}
    @keyframes suryaPulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}100%{transform:translate(-50%,-50%) scale(1)}}

    /* Teachings carousel */
    .carousel{position:relative;padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03)}
    .carousel .item{min-height:100px;display:flex;align-items:center;justify-content:center;font-size:18px}

    /* Gallery */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media (max-width:880px){.gallery{grid-template-columns:repeat(2,1fr)}}
    .gallery img{width:100%;height:auto;object-fit:cover;border-radius:10px;cursor:pointer;border:1px solid rgba(255,255,255,0.03)}

    /* Events */
    .events{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    @media (max-width:980px){.events{grid-template-columns:repeat(1,1fr)}}
    .event{padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.03)}
    .event h4{margin:6px 0;color:var(--accent)}

    /* Contact */
    .contact{display:grid;grid-template-columns:1fr 360px;gap:20px}
    @media (max-width:980px){.contact{grid-template-columns:1fr}}
    .contact form{display:flex;flex-direction:column;gap:10px}
    .contact input,.contact textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}
    .btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:10px 14px;border:none;color:#111;border-radius:10px;cursor:pointer;font-weight:800}

    /* Chatbot */
    .chatbot-button{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#111;border:none;padding:14px 18px;border-radius:50%;font-size:22px;cursor:pointer;box-shadow:0 0 30px rgba(255,153,51,0.35);z-index:9997}
    .chatbot-window{position:fixed;bottom:86px;right:20px;width:360px;max-height:520px;background:linear-gradient(180deg,#1f0f02,#2c1200);border:1px solid rgba(255,255,255,0.06);border-radius:12px;display:none;flex-direction:column;overflow:hidden;z-index:9998}
    .chatbot-header{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:10px;color:#111;font-weight:800;display:flex;justify-content:space-between;align-items:center}
    .chatbot-messages{flex:1;padding:12px;overflow:auto;font-size:14px;color:var(--muted);background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}
    .chatbot-input{display:flex;border-top:1px solid rgba(255,255,255,0.03)}
    .chatbot-input input{flex:1;padding:10px;border:none;background:transparent;color:#fff;padding-left:12px}
    .chatbot-input button{background:var(--accent);border:none;padding:10px 12px;cursor:pointer;color:#111;font-weight:800}

    footer{padding:22px 0;text-align:center;color:var(--muted);z-index:2}

    /* Lightbox */
    .lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:10000}
    .lightbox img{max-width:90%;max-height:90%;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,0.8)}

    /* small animations */
    .fade-up{opacity:0;transform:translateY(12px);transition:all .7s ease}
    .fade-up.show{opacity:1;transform:translateY(0)}

      :root {
    --accent: #ff9933;
    --accent-2: #ffcc66;
    --muted: #f5e6cc;
  }

  .footer {
    background: linear-gradient(180deg, rgba(26, 13, 0, 0.95), rgba(61, 26, 0, 0.98));
    padding: 50px 0 20px 0;
    color: var(--muted);
    position: relative;
    overflow: hidden;
  }

  .footer::before {
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 153, 51, 0.08), transparent 70%);
    filter: blur(60px);
    z-index: 0;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 2;
    padding: 0 20px;
  }

  .footer-about h3 {
    color: var(--accent);
    margin-bottom: 12px;
    font-size: 20px;
  }

  .footer-about p {
    line-height: 1.6;
    font-size: 15px;
  }

  .footer-links h4,
  .footer-social h4 {
    color: var(--accent-2);
    margin-bottom: 10px;
    font-size: 18px;
  }

  .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-links li {
    margin-bottom: 6px;
  }

  .footer-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 15px;
  }

  .footer-links a:hover {
    color: var(--accent);
  }

  .social-icons {
    display: flex;
    gap: 14px;
    margin-top: 12px;
  }

  .social {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #111;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 18px rgba(255, 153, 51, 0.35);
    transition: all 0.3s ease;
    font-size: 17px;
  }

  .social:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 28px rgba(255, 153, 51, 0.5);
  }

  .footer-bottom {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 14px;
    position: relative;
    z-index: 2;
  }

  @media (max-width: 600px) {
    .footer {
      padding: 40px 0 16px 0;
    }
    .social-icons {
      justify-content: center;
    }
    .footer-bottom p {
      font-size: 13px;
      line-height: 1.5;
    }
  }

  /* ---------- PAGE SPECIFIC CSS ---------- */

    .hero-about {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding: 80px 0 40px;
      position: relative;
      z-index: 2;
    }

    .hero-about .text {
      flex: 1;
      min-width: 300px;
    }

    .hero-about h1 {
      font-size: clamp(28px, 4vw, 46px);
      color: var(--accent);
      margin-bottom: 12px;
    }

    .hero-about p {
      color: var(--muted);
      line-height: 1.7;
      font-size: 17px;
    }

    .hero-about .guru-image {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .guru-image img {
      width: 100%;
      max-width: 360px;
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,0.1);
      box-shadow: 0 0 40px rgba(255,153,51,0.15);
      z-index: 2;
    }

    .hero-about .aura {
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(255,153,51,0.1), transparent 70%);
      filter: blur(80px);
      border-radius: 50%;
      z-index: 1;
      animation: rotateAura 12s linear infinite;
    }

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

    /* ---------- ABOUT SECTION ---------- */
    .about-section {
      padding: 60px 0;
      text-align: center;
    }

    .about-section h2 {
      color: var(--accent);
      font-size: 28px;
      margin-bottom: 16px;
    }

    .about-section p {
      max-width: 780px;
      margin: 0 auto;
      color: var(--muted);
      line-height: 1.8;
      font-size: 16px;
    }

    /* ---------- LINEAGE ---------- */
    .lineage {
      padding: 70px 0;
    }

    .lineage h2 {
      color: var(--accent-2);
      text-align: center;
      margin-bottom: 40px;
      font-size: 26px;
    }

    .guru-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }

    .guru-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 14px;
      padding: 18px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .guru-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 0 28px rgba(255,153,51,0.15);
    }

    .guru-card img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
      margin-bottom: 12px;
      border: 2px solid rgba(255,153,51,0.3);
    }

    .guru-card h4 {
      color: var(--accent);
      margin-bottom: 6px;
      font-size: 18px;
    }

    .guru-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    /* ---------- TEACHINGS ---------- */
    .teachings {
      padding: 60px 0;
      text-align: center;
    }

    .teachings h2 {
      color: var(--accent);
      font-size: 26px;
      margin-bottom: 24px;
    }

    .teachings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
    }

    .teaching-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 14px;
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .teaching-card:hover {
      transform: scale(1.03);
      box-shadow: 0 0 24px rgba(255,153,51,0.15);
    }

    .teaching-card h4 {
      color: var(--accent-2);
      margin-bottom: 10px;
    }

    .teaching-card p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
    }


    /* ---------- PAGE SPECIFIC CSS ---------- */

    .hero-services {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding: 80px 0 40px;
      position: relative;
      z-index: 2;
    }

    .hero-services .text {
      flex: 1;
      min-width: 300px;
    }

    .hero-services h1 {
      font-size: clamp(28px, 4vw, 46px);
      color: var(--accent);
      margin-bottom: 12px;
    }

    .hero-services p {
      color: var(--muted);
      line-height: 1.7;
      font-size: 17px;
    }

    .hero-services .image {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .hero-services .image img {
      width: 100%;
      max-width: 360px;
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,0.1);
      box-shadow: 0 0 40px rgba(255,153,51,0.15);
      z-index: 2;
    }

    .hero-services .aura {
      position: absolute;
      width: 520px;
      height: 520px;
      background: radial-gradient(circle, rgba(255,153,51,0.1), transparent 70%);
      filter: blur(80px);
      border-radius: 50%;
      z-index: 1;
      animation: rotateAura 14s linear infinite;
    }

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

    /* ---------- SERVICES GRID ---------- */
    .services {
      padding: 60px 0;
      text-align: center;
    }

    .services h2 {
      color: var(--accent);
      font-size: 28px;
      margin-bottom: 40px;
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }

    .service-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 14px;
      padding: 26px 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 0 28px rgba(255,153,51,0.15);
    }

    .service-icon {
      font-size: 38px;
      color: var(--accent-2);
      margin-bottom: 12px;
    }

    .service-card h4 {
      color: var(--accent);
      font-size: 18px;
      margin-bottom: 8px;
    }

    .service-card p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
    }

    /* ---------- SPECIAL CTA ---------- */
    .cta {
      background: linear-gradient(180deg, rgba(255,153,51,0.06), transparent);
      padding: 60px 20px;
      text-align: center;
      border-radius: 14px;
      margin: 60px 0;
    }

    .cta h3 {
      color: var(--accent);
      font-size: 24px;
      margin-bottom: 12px;
    }

    .cta p {
      color: var(--muted);
      margin-bottom: 18px;
    }

    .cta .btn {
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: #111;
      font-weight: 800;
      padding: 10px 20px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .cta .btn:hover {
      transform: scale(1.05);
    }

    /* ---------- PAGE SPECIFIC ---------- */
    .hero-gallery {
      text-align: center;
      padding: 80px 20px 40px;
      position: relative;
    }
    .hero-gallery h1 {
      font-size: clamp(28px, 4vw, 46px);
      color: var(--accent);
      margin-bottom: 10px;
    }
    .hero-gallery p {
      color: var(--muted);
      font-size: 17px;
    }

    /* ---------- TABS ---------- */
    .tabs {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: 40px 0 30px;
    }

    .tab {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.05);
      color: var(--muted);
      padding: 10px 20px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 15px;
      transition: 0.3s;
    }

    .tab.active {
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: #111;
      font-weight: 600;
    }

    .tab:hover {
      transform: scale(1.05);
    }

    /* ---------- GRID ---------- */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 18px;
      padding-bottom: 60px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.06);
      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s;
      display: block;
    }

    .gallery-item.hidden {
      display: none;
    }

    .gallery-item:hover {
      transform: translateY(-6px);
      box-shadow: 0 0 25px rgba(255,153,51,0.15);
    }

    .gallery-item img,
    .gallery-item video {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 14px;
      object-fit: cover;
    }

    .gallery-item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      color: #fff;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s ease;
      border-radius: 14px;
      font-weight: 600;
      font-size: 16px;
    }

    .gallery-item:hover .overlay {
      opacity: 1;
    }

    /* ---------- AURA ---------- */
    .aura {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255,153,51,0.1), transparent 70%);
      filter: blur(80px);
      border-radius: 50%;
      animation: rotateAura 14s linear infinite;
      z-index: 0;
    }

    @keyframes rotateAura {
      from {transform: translate(-50%, -50%) rotate(0deg);}
      to {transform: translate(-50%, -50%) rotate(360deg);}
    }

    /* Hero */
.hero-timeline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:80px 0 40px;
  position:relative;
  z-index:2;
}
.hero-timeline h1{
  font-size:clamp(28px,4vw,46px);
  color:var(--accent);
  margin-bottom:12px;
}
.hero-timeline p{
  color:var(--muted);
  line-height:1.7;
  font-size:17px;
}
.hero-timeline .image{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-timeline .image img{
  width:100%;
  max-width:360px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,0.1);
  box-shadow:0 0 40px rgba(255,153,51,0.15);
  z-index:2;
}
.hero-timeline .aura{
  position:absolute;
  width:520px;
  height:520px;
  background:radial-gradient(circle, rgba(255,153,51,0.1), transparent 70%);
  filter:blur(80px);
  border-radius:50%;
  animation:rotateAura 14s linear infinite;
  z-index:1;
}
@keyframes rotateAura{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* Timeline Section */
.timeline-section{
  padding:60px 0 100px;
  position:relative;
}
.timeline-section h2{
  text-align:center;
  color:var(--accent);
  font-size:28px;
  margin-bottom:50px;
}

/* Timeline */
.timeline{
  position:relative;
  margin:0 auto;
  padding:0 0 40px;
  max-width:800px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:3px;
  height:100%;
  background:linear-gradient(180deg,var(--accent-2),transparent);
  opacity:0.3;
}
.timeline-item{
  width:50%;
  padding:20px 30px;
  position:relative;
}
.timeline-item::before{
  content:"";
  position:absolute;
  top:25px;
  width:14px;
  height:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:50%;
  box-shadow:0 0 20px rgba(255,153,51,0.4);
  z-index:2;
}
.timeline-item.left{left:0;text-align:right;}
.timeline-item.left::before{right:-7px;}
.timeline-item.right{left:50%;}
.timeline-item.right::before{left:-7px;}
.timeline-item .content{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:14px;
  padding:20px;
  position:relative;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item .content:hover{
  transform:translateY(-6px);
  box-shadow:0 0 25px rgba(255,153,51,0.15);
}
.timeline-item h3{
  color:var(--accent-2);
  margin-bottom:8px;
}
.timeline-item p{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.timeline-item img{
  width:100%;
  max-height:200px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,0.1);
}

/* Responsive */
@media(max-width:800px){
  .timeline::before{left:8px;}
  .timeline-item{width:100%;padding-left:40px;text-align:left;}
  .timeline-item::before{left:0;}
  .timeline-item.left,.timeline-item.right{left:0;}
}

/* Hero */
.hero-contact{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding:80px 0 40px;}
.hero-contact h1{font-size:clamp(28px,4vw,46px);color:var(--accent)}
.hero-contact p{color:var(--muted);line-height:1.8;font-size:17px;max-width:550px}
.hero-contact .image{position:relative;flex:1;display:flex;justify-content:center}
.hero-contact img{width:100%;max-width:340px;border-radius:18px;border:2px solid rgba(255,255,255,0.1);box-shadow:0 0 40px rgba(255,153,51,0.2)}
.hero-contact .aura{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(255,153,51,0.08),transparent 70%);filter:blur(80px);border-radius:50%;animation:rotateAura 15s linear infinite;}
@keyframes rotateAura{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Contact Cards */
.contact-section{padding:60px 0}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
.card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;
  padding:20px;
  box-shadow:0 0 25px rgba(255,153,51,0.1);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 0 40px rgba(255,153,51,0.25);}
.card h3{color:var(--accent-2);margin-bottom:8px;}
.card p{color:var(--muted);font-size:15px;line-height:1.6;}
.map iframe{width:100%;height:200px;border:0;border-radius:12px;margin-top:10px}

/* Contact Form */
.form-section{padding:80px 0;text-align:center;}
.form-section h2{color:var(--accent);margin-bottom:8px;}
.form-section p{color:var(--muted);margin-bottom:30px;}
.contact-form{max-width:640px;margin:auto;text-align:left;display:grid;gap:20px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group input,.form-group textarea{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:12px;
  color:#fff;
  font-size:15px;
  outline:none;
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);}
.btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#111;
  border:none;
  padding:12px 24px;
  font-weight:700;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(255,153,51,0.3);}

/* Social Links */
.social-section{text-align:center;padding:60px 0;}
.social-section h2{color:var(--accent);margin-bottom:20px;}
.social-links{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;}
.social-links a{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  padding:10px 16px;border-radius:10px;
  color:var(--muted);font-weight:500;text-decoration:none;
  transition:all 0.3s ease;
}
.social-links a:hover{color:var(--accent-2);border-color:var(--accent);}
.social-links img{width:20px;height:20px;}


.events-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 30px;
      padding: 40px 8%;
    }

    .event-card {
      background: var(--glass);
      border: 1px solid var(--accent-2);
      border-radius: 18px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      box-shadow: 0 0 20px rgba(255, 153, 51, 0.15);
    }

    .event-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 0 25px rgba(255, 153, 51, 0.35);
    }

    .event-image img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    .event-content {
      padding: 20px;
    }

    .event-content h3 {
      color: var(--accent);
      margin-top: 0;
      font-size: 1.3em;
    }

    .event-meta {
      font-size: 0.9em;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .event-meta span {
      display: inline-block;
      margin-right: 10px;
      opacity: 0.8;
    }

    .event-desc {
      font-size: 0.95em;
      color: #ffebb3;
    }