/* ============================================================
   footer.css — Alchemy Stones Matrix
   Footer shared styles

   NEW PAGE ME USE KARNA:
   1. <head> me link karo: <link rel="stylesheet" href="footer.css">
   2. Footer HTML snippet paste karo (page ka last element)
   3. <script src="footer.js"> </body> se pehle add karo
   ============================================================ */

/* ---------- CSS Variables (safe to redeclare) ---------- */
:root {
  --navy:    #1A3A5C;
  --steel:   #275683;
  --stone:   #7A7A7A;
  --charcoal: #1F1F1F;
  --pad-x:   clamp(24px, 5vw, 96px);
  --serif:   'Playfair Display', 'Times New Roman', serif;
  --sans:    'Montserrat', system-ui, sans-serif;
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid rgba(91, 123, 154, 0.3);
  padding: 64px 0 0;
  overflow: hidden;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.1fr 2fr 0.8fr;
  gap: 48px;
  align-items: start;
  padding: 0 var(--pad-x) 32px;
}

.footer__brand-name {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--navy);
  margin-top: 4px;
}

.footer__tag {
  margin-top: 8px;
  font-size: 13px;
  color: var(--stone);
}

.footer__col-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 16px;
}

.footer__companies {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--charcoal);
}

.footer__social {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--navy);
  opacity: 0.7;
  transition: opacity 200ms;
}
.footer__social a:hover { opacity: 1; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--pad-x) 30px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--stone);
  border-top: 1px solid rgba(91, 123, 154, 0.12);
}

.footer__legal {
  display: flex;
  gap: 20px;
}
.footer__legal a { text-decoration: none; color: inherit; }
.footer__legal a:hover { color: var(--navy); }

/* ---------- Marquee ---------- */
.footer__marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(91, 123, 154, 0.18);
  padding: 14px 0;
}
.footer__marquee-track {
  display: flex;
  gap: 48px;
  font-family: var(--serif);
  font-style: normal;
  font-size: 14px;
  color: rgba(26, 58, 92, 0.5);
  white-space: nowrap;
  animation: marqueeSlide 50s linear infinite;
  width: max-content;
}

@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer__social { justify-content: flex-start; }
  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .footer__companies { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   FOOTER HTML SNIPPET — naye page me yeh paste karo:

   <link rel="stylesheet" href="footer.css">   (head me)

   <footer class="footer" id="contact">
     <div class="footer__top">
       <div>
         <a href="./Alchemy Awwwards Homepage.html#hero" class="nav__logo">
           <img src="./uploads/logog.png" alt="" class="logo--light" style="height:60px;">
         </a>
         <div class="footer__tag">Mining &amp; Project Execution · Since 2005</div>
       </div>
       <div>
         <div class="footer__col-label" id="group">Group Companies</div>
         <div class="footer__companies">
           <span>Alchemy Stones India</span>
           <span>Alchemy Grani Marmo</span>
           <span>Alchemy Rock Stones</span>
           <span>Alchemy Granites</span>
           <span>Alchemy Marbles</span>
           <span>Alchemy Minerals</span>
           <span>Aaradhya Projects</span>
         </div>
       </div>
       <div>
         <div class="footer__col-label" style="text-align:right;">Connect</div>
         <div class="footer__social">
           <a href="#" aria-label="LinkedIn">
             <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
               <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.62 0 4.29 2.38 4.29 5.48v6.26zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.21 0 22.23 0z"/>
             </svg>
           </a>
           <a href="#" aria-label="Instagram">
             <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
               <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.86 5.86 0 0 0-2.13 1.39A5.86 5.86 0 0 0 .63 4.14c-.3.76-.5 1.64-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.32.81.74 1.5 1.39 2.13.63.65 1.32 1.07 2.13 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.86 5.86 0 0 0 2.13-1.39 5.86 5.86 0 0 0 1.39-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.86 5.86 0 0 0-1.39-2.13A5.86 5.86 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/>
             </svg>
           </a>
         </div>
       </div>
     </div>
     <div class="footer__bottom">
       <div>© 2026 Alchemy Stones Matrix Pvt Ltd. A Dhinwa Group Company.</div>
       <div class="footer__legal">
         <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Cookies</a>
       </div>
     </div>
     <div class="footer__marquee">
       <div class="footer__marquee-track" id="footerMarquee"></div>
     </div>
   </footer>

   <script src="footer.js"></script>   (</body> se pehle)
   ============================================================ */
