/* ============================================================
   M&U Painting Group - COMMON CSS (Header, Footer, Global)
   Ye file har page par load hogi (base layout se)
   ============================================================ */

:root{
  --bg-dark:#05111e;
  --accent:#e9a326;
  --white:#ffffff;
  --grey-text:#c7ccd3;
  --border-line:rgba(255,255,255,0.08);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Poppins', sans-serif;
  background:#f4f4f4;
  touch-action:manipulation;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;}

  /* ============ TOP BAR ============ */
  .topbar{
    background:var(--bg-dark);
    color:var(--grey-text);
    font-size:13px;
    padding:10px 40px;
    border-bottom:1px solid var(--border-line);
  }
  .topbar-inner{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .topbar-left, .topbar-right{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
  }
  .topbar-item{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .topbar-item i{
    color:var(--accent);
    font-size:14px;
  }
  .topbar-item a{color:var(--grey-text);}
  .topbar-item a:hover{color:var(--accent);}

  /* ============ MAIN HEADER ============ */
  .main-header{
    background:var(--bg-dark);
    padding:4px 40px;
  }
  .main-header-inner{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }

  /* logo */
  .logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .logo-img{
    display:block;
    width:auto;
    height:72px;
    max-width:100%;
    object-fit:contain;
  }

  /* mobile-only logo shown at the top of the slide-in nav panel */
  .nav-mobile-logo{
    display:none;
  }

  /* nav */
  nav.primary-nav{
    display:flex;
    align-items:center;
    gap:34px;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:30px;
  }
  .nav-links li a{
    color:var(--white);
    font-size:12px;
    font-weight:500;
    padding:8px 0;
    position:relative;
    display:flex;
    align-items:center;
    gap:6px;
    transition:color .25s ease;
  }
  .nav-links li a:hover,
  .nav-links li.active a{
    color:var(--accent);
  }
  .nav-links li.active a::after{
    content:'';
    position:absolute;
    left:0;bottom:-2px;
    width:100%;height:2px;
    background:var(--accent);
  }
  .nav-links li a i.chevron{
    font-size:10px;
    margin-left:2px;
  }

  /* dropdown */
  .dropdown{position:relative;}
  .dropdown-toggle i.chevron{
    transition:transform .35s cubic-bezier(0.16,1,0.3,1);
  }
  .dropdown:hover .dropdown-toggle i.chevron{
    transform:rotate(180deg);
    color:var(--accent);
  }
  /* invisible bridge fills the gap between the toggle and the menu
     so the mouse never leaves a hoverable box while moving down to it */
  .dropdown::after{
    content:'';
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:16px;
    z-index:49;
  }
  .dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    margin-top:16px;
    background:#0b1c30;
    min-width:230px;
    border-radius:8px;
    border:1px solid rgba(233,163,38,0.25);
    box-shadow:0 16px 32px rgba(0,0,0,0.35);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:50;
    overflow:hidden;
    padding:6px;
  }
  .dropdown:hover .dropdown-menu,
  .dropdown-menu:hover{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .dropdown-menu li{
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .dropdown-menu li:last-child{border-bottom:none;}
  .dropdown-menu li a{
    color:var(--grey-text);
    padding:11px 14px;
    font-size:14px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:5px;
    transition:background .18s ease, color .18s ease;
  }
  .dropdown-menu li a i{
    color:var(--accent);
    font-size:14px;
    width:18px;
    text-align:center;
    flex-shrink:0;
  }
  .dropdown-menu li a:hover{
    background:rgba(233,163,38,0.14);
    color:var(--white);
  }
  .dropdown-menu li.active a{
    background:rgba(233,163,38,0.14);
    color:var(--white);
  }
  .dropdown-menu li.active a i{color:var(--accent);}

  /* CTA button */
  .btn-quote{
    background:var(--accent);
    color:var(--bg-dark);
    font-weight:600;
    font-size:12px;
    padding:10px 10px;
    border-radius:4px;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:8px;
    transition:background .25s ease, transform .2s ease;
  }
  .btn-quote:hover{
    background:#ffb946;
    transform:translateY(-1px);
  }

  /* mobile toggle */
  .menu-toggle{
    display:none;
    background:transparent;
    color:var(--white);
    font-size:26px;
    line-height:1;
    min-width:28px;
    min-height:28px;
    align-items:center;
    justify-content:center;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:1200px){
    .nav-links{gap:20px;}
    .main-header, .topbar{padding-left:24px;padding-right:24px;}
  }

  @media (max-width:992px){
    .topbar-item.hide-tablet{display:none;}
    nav.primary-nav{
      position:fixed;
      top:0;
      right:-320px;
      width:300px;
      height:100vh;
      background:var(--bg-dark);
      flex-direction:column;
      align-items:flex-start;
      padding:70px 30px 30px;
      overflow-y:auto;
      transition:right .35s ease;
      box-shadow:-10px 0 30px rgba(0,0,0,0.3);
      z-index:200;
    }
    nav.primary-nav.open{right:0;}
    .nav-mobile-logo{
      display:block;
      margin-bottom:8px;
      padding-bottom:14px;
      width:100%;
      border-bottom:1px solid var(--border-line);
    }
    .nav-mobile-logo img{
      display:block;
      width:auto;
      height:58px;
      max-width:100%;
      object-fit:contain;
    }
    .nav-links{
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      width:100%;
    }
    .nav-links li{
      width:100%;
      border-bottom:1px solid var(--border-line);
    }
    .nav-links li a{
      padding:14px 0;
      width:100%;
      justify-content:space-between;
    }
    .dropdown-menu{
      position:static;
      opacity:1;
      visibility:visible;
      transform:none;
      max-height:0;
      display:block;
      box-shadow:none;
      border-radius:0;
      background:#0d1b2b;
      border:none;
      padding:0;
      transition:max-height .35s ease, padding .35s ease;
      overflow:hidden;
    }
    .dropdown-menu::before{display:none;}
    .dropdown-menu li a{
      color:var(--grey-text);
      padding:10px 14px;
      opacity:1;
      transform:none;
    }
    .dropdown.mobile-open .menu-toggle,
    .dropdown.mobile-open .dropdown-toggle i.chevron{
      transform:rotate(180deg);
      color:var(--accent);
    }
    .dropdown.mobile-open .dropdown-menu{
      max-height:300px;
      padding:6px 0;
    }
    .btn-quote{margin-top:20px;}
    .menu-toggle{display:flex;}
    .overlay{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.5);
      z-index:150;
    }
    .overlay.show{display:block;}
  }

  @media (max-width:600px){
    .topbar{font-size:12px;padding:10px 16px;}
    .topbar-inner{flex-wrap:nowrap;}
    .topbar-left{gap:6px;}
    .topbar-right{gap:6px;}
    .logo-img{height:50px;}
    .main-header{padding:12px 16px;}
  }


  /* ================= FOOTER ================= */
  .site-footer{background:var(--bg-dark);position:relative;overflow:hidden;}
  /* .site-footer::before{
    content:"";position:absolute;top:0;right:0;width:55%;height:100%;
    background:linear-gradient(115deg, transparent 40%, rgba(233,163,38,0.05) 55%, transparent 70%);
    pointer-events:none;
  } */

  /* ---- shared bits ---- */
  .footer-logo{display:flex;align-items:center;}
  .footer-logo img{display:block;width:auto;height:74px;max-width:100%;object-fit:contain;}

  .footer-socials{display:flex;gap:12px;}
  .footer-socials a{
    width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);
    color:var(--white);display:flex;align-items:center;justify-content:center;font-size:14px;
    transition:background .2s ease, border-color .2s ease;
  }
  .footer-socials a:hover{background:var(--accent);border-color:var(--accent);color:var(--bg-dark);}

  .footer-col h4{font-size:15px;font-weight:800;color:var(--white);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;}
  .footer-col-underline{display:block;width:28px;height:2.5px;background:var(--accent);border-radius:3px;margin-bottom:20px;}
  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
  .footer-col ul a{
    display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--grey-text-light);
    transition:color .2s ease;overflow-wrap:anywhere;
  }
  .footer-col ul a:hover{color:var(--accent);}
  .footer-col ul a i{color:var(--accent);font-size:11px;flex-shrink:0;}

  .footer-bottom{
    position:relative;z-index:1;border-top:1px solid rgba(255,255,255,0.1);
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:22px 20px;text-align:center;
  }
  .footer-bottom svg{width:20px;height:20px;stroke:var(--accent);flex-shrink:0;}
  .footer-bottom p{font-size:13.5px;color:var(--grey-text-light);}

  /* ---- desktop (>760px) ---- */
  .footer-desktop{display:block;position:relative;z-index:1;}
  .footer-desktop-inner{
    max-width:1400px;margin:0 auto;padding:64px 60px 44px;
    display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:30px;
  }
  .footer-brand .footer-divider{border:none;border-top:1px solid rgba(255,255,255,0.12);margin:22px 0 18px;max-width:280px;}
  .footer-brand .footer-location{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--grey-text-light);margin-bottom:20px;}
  .footer-brand .footer-location i{color:var(--accent);}

  .footer-contact p{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--grey-text-light);margin-bottom:16px;}
  .footer-contact p i{color:var(--accent);width:16px;flex-shrink:0;}
  .footer-quote-btn{
    display:inline-flex;align-items:center;gap:10px;margin-top:6px;
    background:var(--accent);color:var(--bg-dark);font-weight:700;font-size:14px;
    letter-spacing:.4px;text-transform:uppercase;padding:15px 22px;border-radius:10px;
    position:relative;overflow:hidden;isolation:isolate;
  }
  .footer-quote-btn::after{
    content:"";position:absolute;right:-14px;top:0;bottom:0;width:34px;
    background:var(--accent-light);transform:skewX(-14deg);z-index:-1;
  }

  /* ---- mobile (<=760px) ---- */
  .footer-mobile{display:none;position:relative;z-index:1;padding:44px 22px 0;}
  .footer-mobile-top{display:flex;flex-direction:column;gap:16px;margin-bottom:20px;}
  .footer-tagline{font-size:14px;color:var(--grey-text-light);line-height:1.55;max-width:320px;}
  .footer-mobile-top .footer-location{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--grey-text-light);}
  .footer-mobile-top .footer-location i{color:var(--accent);}
  .footer-mobile .footer-socials{margin-bottom:26px;}

  .footer-grid-2x2{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 16px;
    padding-top:26px;border-top:1px solid rgba(255,255,255,0.1);
  }
  .footer-grid-2x2 > .footer-col:nth-child(odd){border-right:1px solid rgba(255,255,255,0.1);padding-right:16px;}
  .footer-grid-2x2 > .footer-col:nth-child(even){padding-left:2px;}
  .footer-grid-2x2 > .footer-col:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:24px;}
  .footer-col-head{position:relative;}
  .footer-col-bgicon{position:absolute;top:-6px;right:0;font-size:30px;color:rgba(255,255,255,0.08);}
  .footer-grid-2x2 .footer-col ul{gap:0;}
  .footer-grid-2x2 .footer-col ul li{border-bottom:1px solid rgba(255,255,255,0.07);}
  .footer-grid-2x2 .footer-col ul li:last-child{border-bottom:none;}
  .footer-grid-2x2 .footer-col ul a{padding:9px 0;font-size:13px;}

  .footer-contact-mobile ul{gap:0;}
  .footer-contact-mobile li{
    display:flex;align-items:center;gap:10px;padding:11px 0;font-size:12.5px;color:var(--grey-text-light);
    border-bottom:1px solid rgba(255,255,255,0.07);overflow-wrap:anywhere;
  }
  .footer-contact-mobile li:last-child{border-bottom:none;}
  .footer-contact-mobile li i{color:var(--accent);font-size:14px;width:16px;flex-shrink:0;}

  .footer-cta-banner{
    display:flex;align-items:center;gap:14px;margin:30px 0 0;
    background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-left:3px solid var(--accent);
    border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;isolation:isolate;
  }
  .footer-cta-icon{
    width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(233,163,38,0.5);
    color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
  }
  .footer-cta-text strong{display:block;font-size:15px;font-weight:800;color:var(--white);letter-spacing:.3px;text-transform:uppercase;}
  .footer-cta-text small{display:block;font-size:12.5px;color:var(--grey-text-light);margin-top:3px;}
  .footer-cta-arrow{
    margin-left:auto;width:44px;height:100%;position:absolute;right:0;top:0;bottom:0;
    background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--bg-dark);font-size:16px;
    clip-path:polygon(35% 0, 100% 0, 100% 100%, 0% 100%);z-index:-1;
  }
  .footer-cta-arrow i{position:relative;z-index:1;margin-left:10px;}

  .footer-mobile .footer-bottom{margin-top:30px;padding:20px;}

  @media (max-width:760px){
    .footer-desktop{display:none;}
    .footer-mobile{display:block;}
  }

  /* ================= FLOATING WHATSAPP BUTTON ================= */
  .whatsapp-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    box-shadow:0 8px 24px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.2);
    z-index:300;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .whatsapp-float:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 12px 28px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.2);
    color:#ffffff;
  }
  .whatsapp-ping{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    opacity:.55;
    animation:whatsappPulse 2.2s ease-out infinite;
    z-index:-1;
  }
  @keyframes whatsappPulse{
    0%{transform:scale(1);opacity:.55;}
    100%{transform:scale(1.7);opacity:0;}
  }
  .whatsapp-tooltip{
    position:absolute;
    right:calc(100% + 14px);
    top:50%;
    transform:translateY(-50%) translateX(6px);
    background:var(--bg-dark);
    color:var(--white);
    font-size:14px;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;
    padding:9px 16px;
    border-radius:8px;
    border:1px solid rgba(233,163,38,0.3);
    box-shadow:0 10px 24px rgba(0,0,0,0.3);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .whatsapp-tooltip::after{
    content:'';
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    border:6px solid transparent;
    border-left-color:var(--bg-dark);
  }
  .whatsapp-float:hover .whatsapp-tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
  }
  @media (max-width:600px){
    .whatsapp-tooltip{display:none;}
  }

  @media (max-width:600px){
    .whatsapp-float{
      width:52px;
      height:52px;
      font-size:26px;
      right:16px;
      bottom:16px;
    }
  }