:root{
  --brand:#003838;
  --accent:#ffd700;
  --page-bg:#fff;
  --text:#222;
  --muted:#666;
  --radius:10px;
  --shadow:0 6px 20px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Roboto, "Noto Sans Kannada", Arial, sans-serif;color:var(--text);background:var(--page-bg);line-height:1.6}
.container{width:92%;max-width:1200px;margin:0 auto;padding:18px}

/* Header + nav */
.site-header{background:var(--brand);color:#fff;position:sticky;top:0;z-index:1400;box-shadow:0 3px 10px rgba(0,0,0,0.12)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.logo img{height:56px;object-fit:contain}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:#fff;text-decoration:none;font-weight:600;padding:8px 10px;border-radius:6px}
.nav-links a.highlight{background:rgba(255,215,0,0.07);color:var(--accent)}
.menu-toggle{display:none;background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer}
.menu-close{display:none}

/* IMAGE responsiveness (fixes your mobile scaling issues) */
.responsive-img, img {
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  object-fit:cover; /* for cropped / hero images */
  border-radius:8px;
}

/* For images that must never be cropped (product photos etc) use .contain-img */
.contain-img {
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  max-width:100%;
  border-radius:8px;
}

/* Utility to constrain image height without cropping (for tall images on desktop) */
.img-frame {
  width:100%;
  max-height:620px;
  overflow:hidden;
  border-radius:12px;
}
.img-frame img { width:100%; height:100%; object-fit:cover; }

/* Cards / grids */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;padding:30px 0}
.service-card{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.service-card img{height:180px;object-fit:cover;border-radius:8px}

/* Gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:20px 0}
.gallery-grid img{width:100%;height:320px;object-fit:cover;border-radius:8px}

/* Hero scroll (feedback page) */
.hero-strip{display:flex;gap:14px;overflow-x:auto;padding:18px 0;scroll-snap-type:x mandatory}
.hero-strip img{flex:0 0 auto;width:90%;max-width:980px;height:340px;object-fit:cover;border-radius:12px;scroll-snap-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.12)}

/* Footer quick-link colors fixed */
.site-footer{background:var(--brand);color:#fff;padding:40px 0;margin-top:30px;border-top:6px solid var(--accent)}
.footer-links li{list-style:none;margin:8px 0}
.footer-links a{color:var(--accent);text-decoration:none;font-weight:600}
.footer-links a:hover{color:#fff}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none}
.btn.primary{background:var(--brand);color:#fff}
.btn.secondary{background:var(--accent);color:#111}

/* Contact card & forms */
.contact-form{background:#fff;padding:18px;border-radius:12px;box-shadow:var(--shadow)}
.contact-form label{display:block;margin:10px 0 6px;font-weight:600}
.contact-form input, .contact-form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:1rem}

/* Floating feedback button */
.floating-btn{position:fixed;right:22px;bottom:26px;background:var(--brand);color:#fff;padding:12px 16px;border-radius:34px;border:none;box-shadow:0 8px 20px rgba(0,0,0,0.18);cursor:pointer;z-index:1600}

/* Mobile menu */
@media (max-width:768px){
  .menu-toggle{display:inline-block}
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:280px;background:var(--brand);flex-direction:column;padding-top:78px;transition:right .33s;z-index:1600}
  .nav-links.active{right:0}
  .nav-links a{display:block;padding:14px 20px}
  .menu-close{display:block;position:absolute;top:18px;right:18px;color:#fff;background:none;border:none;font-size:20px}
  .hero-strip img{height:260px}
  .gallery-grid img{height:220px}
}

/* small screens image adjustments */
@media (max-width:480px){
  .hero-strip img{height:200px}
  .service-card img{height:160px}
  .gallery-grid img{height:200px}
}