:root
    { --saffron:#ff7a00;
      --deep-red:#8f0018;
      --dark:#0f0700;
      --cream:#fff8f0;
      --gold:#ffd9a8;
      --border:#e6c7a4;
      --primary:#b11226;
      --secondary:#f4a300;
      --light:#fff8ef;
      --glass:rgba(255,255,255,0.08);
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins',system-ui,sans-serif;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      background:var(--cream);
      color:var(--dark);
      line-height:1.8;
      overflow-x:hidden;
    }

    img{
      max-width:100%;
      display:block;
    }

    a{
      text-decoration:none;
    }

    section{
      padding:90px 20px;
      scroll-margin-top:90px;
    }

    .container{
      max-width:1200px;
      margin:auto;
    }

    /* HEADER */
    header{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:9999;
      background:rgba(15,7,0,.72);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,215,168,.15);
    }

    nav{
      max-width:1300px;
      margin:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:14px 20px;
      min-height:80px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brand img{
      width:68px;
      height:68px;
      object-fit:cover;
      flex-shrink:0;
    }



    .hamburger{
      display:none;
      flex-direction:column;
      gap:5px;
      cursor:pointer;
      padding:4px;
    }

    .hamburger span{
      width:25px;
      height:2px;
      background:var(--accent-glow);
      border-radius:2px;
      transition:0.3s ease;
    }

    .hamburger.open span:nth-child(1){
      transform:translateY(7px) rotate(45deg);
    }

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

    .hamburger.open span:nth-child(3){
      transform:translateY(-7px) rotate(-45deg);
    }

    .mobile-menu{
      display:none;
      position:fixed;
      top:76px;
      left:0;
      width:100%;
      background:rgba(5,5,5,0.97);
      backdrop-filter:blur(12px);
      z-index:999;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .mobile-menu.open{
      display:block;
    }

    .mobile-menu ul{
      list-style:none;
      display:flex;
      flex-direction:column;
    }

    .mobile-menu ul li a{
      display:block;
      color:#e8f4ff;
      text-align:center;
      padding:16px 20px;
      border-bottom:1px solid rgba(255,255,255,0.05);
      transition:0.3s ease;
    }

    .mobile-menu ul li a:hover{
      color:var(--accent-glow);
    }


    .brand h1{
      color:var(--gold);
      font-weight:700;
      letter-spacing:1px;
      font-family:'Tiro Devanagari Hindi',serif;
      font-size:20px;
      line-height:1.2;
    }

    .brand span{
      display:block;
      font-family:'Tiro Devanagari Hindi',serif;
      font-size:17px;
    }

    .nav-toggle{
      display:none;
    }

    .menu-btn{
      display:none;
      width:46px;
      height:46px;
      border:1px solid rgba(255,255,255,.2);
      border-radius:12px;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      flex-direction:column;
      gap:5px;
    }

    .menu-btn span{
      display:block;
      width:22px;
      height:2px;
      background:#fff;
      border-radius:10px;
    }

    nav ul{
      list-style:none;
      display:flex;
      align-items:center;
      gap:2rem;
    }

    nav a{
      color:#fff;
      font-weight:500;
      transition:.3s ease;
    }

    nav a:hover{
      color:var(--gold);
    }

    /* HERO */
    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:140px 20px 80px;
      background:
        linear-gradient(rgba(38,38,38,.45),rgba(63,63,63,.52)),
        url('Image/Madir Bg.jpeg') center/cover no-repeat;
    }

    .hero-inner{
      max-width:1000px;
      color:#fff;
    }

    .hero h1{
      font-family:'Tiro Devanagari Hindi',serif;
      font-size:clamp(2.2rem,6vw,3.5rem);
      color:var(--secondary);
      text-shadow:0 0 25px rgba(255,217,168,.45);
    }

    .hero h2{
      font-size:clamp(1.5rem,4vw,2.8rem);
      margin-top:1rem;
    }

    .hero-divider{
      margin:2rem auto;
      font-size:1.15rem;
      color:var(--saffron);
    }

    .hero p{
      max-width:760px;
      margin:auto;
      font-size:1.05rem;
      opacity:.96;
    }

    .flame{
      width:16px;
      height:16px;
      background:var(--saffron);
      margin:2rem auto;
      border-radius:50%;
      box-shadow:0 0 25px var(--saffron), 0 0 60px rgba(255,122,0,.8), 0 0 120px rgba(255,122,0,.6);
      animation:flame 2s infinite alternate;
    }

    @keyframes flame{
      from{transform:scale(1)}
      to{transform:scale(1.2)}
    }

    .btn{
      display:inline-block;
      margin-top:2.4rem;
      padding:1rem 2.5rem;
      border-radius:60px;
      background:linear-gradient(45deg,var(--saffron),var(--deep-red));
      color:#fff;
      font-weight:600;
      box-shadow:0 18px 45px rgba(0,0,0,.45);
      transition:.35s ease;
    }

    .btn:hover{
      transform:translateY(-3px);
      background:linear-gradient(45deg,var(--deep-red),var(--saffron));
    }

    /* COMMON */
    .section-title,
    .title{
      text-align:center;
      margin-bottom:55px;
    }

    .section-title,
    .title h2{
      font-family:'Tiro Devanagari Hindi',serif;
      font-size:clamp(2rem,4vw,2.7rem);
      color:var(--deep-red);
    }

    .divider{
      text-align:center;
      color:var(--saffron);
      font-size:1.2rem;
      margin:1.5rem 0 2rem;
    }

    .container h1 {font-size: 18px;
    font-family: serif;
  line-height: 50px;}

    .title span,
    .section-title-line,
    .others span{
      display:block;
      width:90px;
      height:4px;
      margin:14px auto 0;
      background:linear-gradient(to right,var(--primary),var(--secondary));
      border-radius:4px;
    }


    
    /* INTRO */
    .about{
      background:#fff;
    }

    .about-box{
      max-width:1100px;
      margin:auto;
      text-align:center;
      border:1px solid var(--border);
      padding:3rem 2rem;
      border-radius:30px;
      background:#fff;
      box-shadow:0 20px 45px rgba(0,0,0,.06);
    }

    .about-box p{
      font-size:1.08rem;
    }

    /* SEVA */
    .seva{
      background:linear-gradient(180deg,#fff2e6,#ffd8b8);
    }

    .seva-grid{
      max-width:1300px;
      margin:auto;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
    }

    .seva-card{
      background:#fff;
      padding:2.5rem 2rem;
      border-radius:28px;
      text-align:center;
      border:1px solid var(--border);
      box-shadow:0 25px 55px rgba(143,0,24,.16);
    }

    .seva-card h4{
      color:var(--deep-red);
      margin-bottom:10px;
      font-size:1.2rem;
    }

    /* LIVE DARSHAN */
    .darshan{
      max-width:1050px;
      margin:auto;
      text-align:center;
    }

    iframe{
      width:100%;
      border:none;
      border-radius:28px;
      box-shadow:0 20px 50px rgba(143,0,24,.20);
    }

    .darshan iframe{
      height:480px;
    }

    /* DONATION SHORT */
    .donation-short{
      max-width:900px;
      margin:auto;
      background:#fff;
      padding:3rem 2rem;
      border-radius:32px;
      border:1px solid var(--border);
      text-align:center;
      box-shadow:0 20px 50px rgba(0,0,0,.08);
    }

    /* MANTRAS */
    .mantras{
      background:var(--dark);
      color:var(--gold);
      text-align:center;
    }

    .mantras p{
      font-size:1.15rem;
      line-height:2.2;
    }

    /* CHALISA */
    .chalisa{
      background:#fffaf4;
    }

    .mantra{
      max-width:1000px;
      margin:auto;
      background:#fff;
      border:1px solid #e6c7a4;
      border-radius:32px;
      padding:3rem 2rem;
      box-shadow:0 22px 50px rgba(143,0,24,.16);
      font-family:'Tiro Devanagari Hindi',serif;
      line-height:2.1;
      font-size:1.08rem;
      text-align:center;
    }

    /* GALLERY HERO */
    .gallery-hero{
      text-align:center;
      background:
        linear-gradient(to bottom, rgba(138,138,138,.25), rgba(66,66,66,.22)),
        url('Image/Gallery Bg .jpeg') center/cover no-repeat;
      padding-top:120px;
      padding-bottom:80px;
    }

    .gallery-hero h1{
      font-family:'Playfair Display',serif;
      font-size:clamp(2.2rem,4vw,3rem);
      color:#fff;
      margin-bottom:12px;
    }

    .gallery-hero p{
      max-width:700px;
      margin:auto;
      font-size:18px;
      color:ghostwhite;
    }

    .gallery{
      max-width:1200px;
      margin:auto;
      padding-top:70px;
      padding-bottom:40px;
    }

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

    .gallery-card{
      position:relative;
      border-radius:18px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 15px 35px rgba(0,0,0,.18);
      min-height:320px;
      transition:transform .4s ease, box-shadow .4s ease;
    }

    .gallery-card:hover{
      transform:translateY(-8px);
      box-shadow:0 25px 50px rgba(0,0,0,.25);
    }

    .gallery-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .7s ease;
    }

    .gallery-card:hover img{
      transform:scale(1.12);
    }

    .gallery-overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.12));
      display:flex;
      align-items:flex-end;
      padding:22px;
      opacity:0;
      transition:opacity .4s ease;
    }

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

    .gallery-overlay h3{
      color:#fff;
      font-size:1.05rem;
      font-weight:500;
    }

    .others{
      text-align:center;
      margin:40px 0 30px;
    }

    .others h1{
      font-family:'Playfair Display',serif;
      font-size:clamp(2rem,4vw,2.4rem);
      color:var(--primary);
      margin-bottom:10px;
    }

    .extra-gallery{
      max-width:1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:20px;
    }

    .extra-gallery img{
      width:100%;
      height:300px;
      object-fit:cover;
      border-radius:20px;
      box-shadow:0 14px 30px rgba(0,0,0,.12);
    }

    /* ABOUT FULL */
    .about-hero{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      isolation:isolate;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.8)),
        url('Image/India.jpeg') center/cover no-repeat;
      color:#fff;
    }

    .hero-content{
      max-width:1100px;
      padding:40px 20px;
    }

    .hero-content h1{
      font-size:clamp(2.4rem,5vw,4rem);
      color:#ffd9a8;
      letter-spacing:1.5px;
      text-shadow:0 10px 35px rgba(0,0,0,.9);
      margin-bottom:20px;
    }

    .hero-content p{
      font-size:1.15rem;
      opacity:.95;
      max-width:900px;
      margin:auto;
    }

    .hero-shlok{
      margin-top:30px;
      font-size:1.1rem;
      color:#ffdca8;
      letter-spacing:2px;
    }

    .history{
      background:
        linear-gradient(rgba(8,8,8,.75),rgba(16,16,16,.75)),
        url('Image/IMG_6747.JPG') center/cover no-repeat fixed;
    }

    .history-wrap{
      max-width:1200px;
      margin:auto;
      font-size:1.1rem;
    }

    .history p{
      margin-bottom:26px;
      text-align:justify;
      color:#fcfcfc;
      font-weight:600;
      font-size:clamp(1rem,2.3vw,1.3rem);
    }

    .milestones{
      margin-top:50px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:25px;
    }

    .mile{
      background:#fff;
      padding:28px 24px;
      border-radius:22px;
      box-shadow:0 18px 40px rgba(0,0,0,.18);
    }

    .mile h4{
      color:var(--deep-red);
      margin-bottom:10px;
      font-size:1.2rem;
    }

    .mile p {
        color: #0f0700;
        font-size: 15px;
    }
    .priests{
      background:#fff;
    }

    .priest-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:30px;
    }

    .priest{
      position:relative;
      border-radius:26px;
      overflow:hidden;
      box-shadow:0 24px 60px rgba(0,0,0,.18);
      transition:.5s ease;
      min-height:450px;
    }

    .priest:hover{
      transform:translateY(-10px);
    }

    .priest img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .priest-info{
      background:linear-gradient(to top,rgba(0,0,0,.95),transparent);
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      padding:35px 25px;
      color:#fff;
    }

    .priest-info h3{
      font-size:1.5rem;
      color:rgb(253,228,206);
    }

    .tag{
      display:inline-block;
      margin-top:14px;
      padding:8px 18px;
      border-radius:50px;
      background:linear-gradient(90deg,var(--saffron),var(--gold));
      font-size:.85rem;
      color:#111;
      font-weight:600;
    }

    .values{
      background:
        linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.9)),
        url('Image/Varanasi On Dev Deepawali _ India’s Mega Festival.jpeg') center/cover fixed no-repeat;
      color:#fff;
    }

    .values-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:25px;
    }

    .value{
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(10px);
      padding:35px 25px;
      border-radius:22px;
      text-align:center;
      box-shadow:0 20px 50px rgba(0,0,0,.28);
    }

    .value h4{
      color:var(--gold);
      font-size:1.35rem;
      margin-bottom:14px;
    }

    .quote{
      padding:90px 20px;
      text-align:center;
      background:linear-gradient(90deg,var(--deep-red),#3c0707);
      color:#fff;
    }

    .quote p{
      font-size:1.45rem;
      max-width:1100px;
      margin:auto;
      font-style:italic;
    }

    /* CONTACT */
    .contact-hero{
      min-height:70vh;
      background:
        linear-gradient(rgba(23,23,23,.42),rgba(68,68,68,.46)),
        url('Image/ChatGPT Image Feb 12, 2026, 11_36_58 PM.png') center/cover no-repeat;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:120px 20px 60px;
    }

    .contact-hero h1{
      color:#fffce9;
      font-size:clamp(2.2rem,5vw,3.2rem);
      letter-spacing:2px;
    }

    .contact-hero p{
      color:#fff;
      margin-top:15px;
      font-size:1.05rem;
    }

    .contact-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:30px;
      max-width:900px;
      margin:auto;
    }

    .box{
      background:#fff;
      padding:40px 28px;
      border-radius:18px;
      box-shadow:0 25px 50px rgba(0,0,0,.10);
    }

    .box h2{
      font-size:30px;
      margin-bottom:25px;
      color:#8b0000;
      border-left:5px solid #ff9933;
      padding-left:15px;
    }

    .info-item{
      margin-bottom:20px;
    }

    .info-item h4{
      font-size:16px;
      margin-bottom:6px;
    }

    .info-item p{
      color:#555;
      line-height:1.7;
    }

    .aarti{
      background:
        linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)),
        url('https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3') center/cover;
    }

    .aarti-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
      text-align:center;
      max-width:1100px;
      margin:auto;
    }

    .aarti-card{
      background:#fff;
      padding:32px 22px;
      border-radius:14px;
      box-shadow:0 15px 35px rgba(0,0,0,.12);
    }

    .aarti-card h3{
      color:#8b0000;
      margin-bottom:10px;
    }

    .aarti-card p{
      color:#555;
    }

    .donation{
      background:#2b1a10;
      color:#fff;
    }

    .donation h2{
      color:#ffd700;
      text-align:center;
      margin-bottom:40px;
    }

    .donation-box{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
      max-width:1100px;
      margin:auto;
    }

    .donation-card{
      background:#3b2518;
      padding:30px 24px;
      border-radius:14px;
    }

    .donation-card h3{
      color:#ffcc66;
      margin-bottom:15px;
    }

    .donation-card p{
      opacity:.9;
      line-height:1.8;
    }

    .strip{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      margin-top:10px;
    }

    .strip img{
      width:100%;
      height:230px;
      object-fit:cover;
      border-radius:14px;
      box-shadow:0 12px 25px rgba(0,0,0,.14);
    }

    .map-wrap{
      max-width:1100px;
      margin:50px auto 0;
    }

    .map-wrap iframe{
      height:460px;
    }

    .social{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:14px;
      margin-top:35px;
    }

    .social a{
      background:#fff;
      padding:13px;
      border-radius:50%;
      height:50px;
      width:50px;
      display:grid;
      place-items:center;
      box-shadow:0 5px 10px rgba(0,0,0,.08);
      color:#111;
      transition:.3s ease;
      position:relative;
    }

    .social a svg{
      height:24px;
      width:24px;
      fill:currentColor;
    }

    .social a:hover{
      transform:translateY(-4px);
      background:var(--accent-color);
      color:#fff;
    }

    /* LOCATION */
    .map-section{
      background:linear-gradient(180deg,#fff3e6,#ffe0c2);
      text-align:center;
    }

    .map-section h3{
      color:#b00020;
      font-family:'Tiro Devanagari Hindi',serif;
      font-size:2rem;
      margin-bottom:1.2rem;
    }

    .map-section p{
      margin-bottom:1.5rem;
    }

    .map-section .container{
      max-width:1100px;
    }

    /* FOOTER */
    footer{
      background:linear-gradient(to right,var(--primary),var(--secondary));
      color:#fff;
      margin-top:0;
    }

    .footer-inner{
      max-width:1200px;
      margin:auto;
      padding:45px 20px 30px;
      text-align:center;
    }

    footer h4{
      font-family:'Playfair Display',serif;
      font-size:1.4rem;
      margin-bottom:10px;
    }

    footer p{
      font-size:.95rem;
      opacity:.9;
    }

    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.25);
      margin-top:25px;
      padding-top:15px;
      font-size:.85rem;
      opacity:.85;
    }

    /* RESPONSIVE */
    @media (max-width: 992px){
      .seva-grid,
      .aarti-grid,
      .donation-box{
        grid-template-columns:1fr;
      }

      .strip{
        grid-template-columns:repeat(2,1fr);
      }

      .darshan iframe,
      .map-wrap iframe,
      .map-section iframe{
        height:380px;
      }
    }

    @media (max-width: 500px){
      .menu-btn{
        display:flex;
      }

      nav ul{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:rgba(15,7,0,.96);
        backdrop-filter:blur(18px);
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:10px 20px 18px;
        border-top:1px solid rgba(255,255,255,.08);
        display:none;
      }

      nav ul li{
        width:100%;
      }

      nav ul li a{
        display:block;
        width:100%;
        padding:14px 0;
        border-bottom:1px solid rgba(255,255,255,.08);
      }

      .nav-toggle:checked ~ ul{
        display:flex;
      }

      .nav-links{
        display:none;
      }
      .brand h1{
        font-size:18px;
      }

      .brand span{
        font-size:15px;
      }
    }

    @media (max-width: 600px){
      section{
        padding:75px 16px;
      }

     

      .hero{
        padding-top:130px;
      }

      .about-box,
      .mantra,
      .donation-short,
      .box{
        padding:24px 18px;
      }

      .strip,
      .extra-gallery{
        grid-template-columns:1fr;
      }

      .gallery-card{
        min-height:260px;
      }

      .priest{
        min-height:380px;
      }

      .darshan iframe,
      .map-wrap iframe,
      .map-section iframe{
        height:300px;
        border-radius:20px;
      }

      .quote p{
        font-size:1.15rem;
      }

      .mobile-menu{
        top:70px;
      }
    }