.elementor-6 .elementor-element.elementor-element-6decf73{--display:flex;}/* Start custom CSS */<!DOCTYPE html>
<html lang="mr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us — गाथा महाराष्ट्राची</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Noto+Serif+Devanagari:wght@600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    --maroon:#6f1d2b;
    --maroon-dark:#54141f;
    --cream:#f6efdc;
    --cream-2:#efe6cc;
    --gold:#e2963f;
    --gold-light:#f0b769;
    --teal:#1b5c53;
    --ink:#2a1a12;
    --ink-soft:#5a4536;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Noto Sans Devanagari', sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.75;
  }
  h1,h2,h3{ font-family:'Noto Serif Devanagari', serif; font-weight:800; }
  .eyebrow{
    color:var(--gold); font-weight:600; letter-spacing:.04em;
    font-size:.95rem; margin-bottom:.5rem; display:inline-block;
  }

  .hero{
    background:linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%);
    color:var(--cream);
    padding:60px 24px 130px;
    position:relative; overflow:hidden; text-align:center;
  }
  .hero h1{ font-size:clamp(2rem, 5vw, 3rem); color:var(--cream); }
  .hero h1 span{ color:var(--gold-light); }
  .hero p{ max-width:560px; margin:16px auto 0; color:#eadfc8; font-size:1rem; }
  .mountains{ position:absolute; left:0; right:0; bottom:-2px; line-height:0; }
  .mountains svg{ width:100%; height:80px; display:block; }

  .wrap{ max-width:760px; margin:0 auto; padding:0 24px; }
  .content-block{
    margin-top:-60px; position:relative; z-index:2;
    background:var(--cream); border-radius:18px;
    padding:44px clamp(22px, 5vw, 50px) 50px;
  }

  .card-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:18px;
    margin-bottom:8px;
  }
  .info-card{
    background:var(--cream-2);
    border:1px solid #e3d6ae;
    border-radius:14px;
    padding:24px;
  }
  .info-card h2{
    color:var(--maroon);
    font-size:1.15rem;
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
  }
  .info-card p{ color:var(--ink-soft); margin-bottom:6px; font-size:.98rem; }
  .info-card a{ color:var(--maroon); font-weight:600; text-decoration:none; }
  .info-card a:hover{ text-decoration:underline; }

  .social-list{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
  .social-list a{
    display:flex; align-items:center; gap:10px;
    color:var(--ink-soft);
    font-size:.95rem;
    text-decoration:none;
  }
  .social-list a:hover{ color:var(--maroon); }
  .social-list .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--gold); flex-shrink:0;
  }

  .response-note{
    background:var(--teal);
    color:#eef7f4;
    border-radius:14px;
    padding:20px 24px;
    margin-top:18px;
    text-align:center;
    font-size:.95rem;
  }
  .response-note strong{ color:var(--gold-light); }

  .thanks{
    text-align:center;
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid #e3d6ae;
  }
  .thanks h2{ color:var(--maroon); font-size:1.2rem; margin-bottom:8px; }
  .thanks p{ color:var(--ink-soft); font-size:.96rem; }

  @media (max-width:600px){
    .content-block{ padding:30px 18px 34px; border-radius:14px;}
  }
</style>
</head>
<body>

  <section class="hero">
    <span class="eyebrow">गाथा महाराष्ट्राची</span>
    <h1>Contact <span>Us</span></h1>
    <p>तुम्हाला कोणतेही प्रश्न, सूचना, तक्रार किंवा सहयोगाबद्दल बोलायचे असल्यास आमच्याशी संपर्क साधा.</p>
    <div class="mountains">
      <svg viewBox="0 0 1440 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,100 L0,60 L120,20 L260,70 L400,10 L560,55 L720,15 L900,65 L1040,25 L1200,70 L1320,30 L1440,60 L1440,100 Z" fill="#3a3a3a"/>
        <path d="M0,100 L0,80 L150,55 L320,90 L480,50 L650,85 L820,45 L1000,88 L1180,55 L1320,90 L1440,75 L1440,100 Z" fill="#2a2a2a" opacity="0.6"/>
      </svg>
    </div>
  </section>

  <div class="wrap">
    <div class="content-block">

      <div class="card-row">
        <div class="info-card">
          <h2>📧 Email</h2>
          <p><a href="mailto:contact@gathamaharashtrachi.com">contact@gathamaharashtrachi.com</a></p>
          <p style="font-size:.85rem; opacity:.75;">सर्वसाधारण प्रश्न व सूचनांसाठी</p>
        </div>

        <div class="info-card">
          <h2>📱 Social Media</h2>
          <div class="social-list">
            <a href="https://www.instagram.com/maharashtrachi_gaatha" target="_blank" rel="noopener"><span class="dot"></span>Instagram</a>
            <a href="https://www.facebook.com/share/17U8uCQERC/" target="_blank" rel="noopener"><span class="dot"></span>Facebook</a>
            <a href="https://www.youtube.com/@gathamaharashtraachi" target="_blank" rel="noopener"><span class="dot"></span>YouTube</a>
            <a href="https://x.com/bhaveshdingore1" target="_blank" rel="noopener"><span class="dot"></span>Twitter (X)</a>
          </div>
        </div>
      </div>

      <div class="card-row" style="margin-top:18px;">
        <div class="info-card" style="grid-column:1/-1;">
          <h2>📝 Business / Collaboration साठी</h2>
          <p>कोणत्याही व्यावसायिक कामासाठी किंवा सहकार्याबाबत बोलण्यासाठी:</p>
          <p>👉 <a href="mailto:contact@gathamaharashtrachi.com">contact@gathamaharashtrachi.com</a></p>
          <p>👉 किंवा DM करा <a href="https://www.instagram.com/maharashtrachi_gaatha" target="_blank" rel="noopener">Instagram</a> वर.</p>
        </div>
      </div>

      <div class="response-note">
        📌 आम्ही साधारणतः <strong>24 ते 48 तासांच्या</strong> आत तुमच्या संदेशाला उत्तर देतो.
      </div>

      <div class="thanks">
        <h2>🙏 धन्यवाद!</h2>
        <p>तुम्ही आमच्या ब्लॉगला दिलेल्या पाठिंब्याबद्दल मन:पूर्वक आभार! तुमचा प्रतिसाद आमच्यासाठी महत्वाचा आहे.</p>
      </div>

    </div>
  </div>

</body>
</html>/* End custom CSS */