/* ============================================================
   mobile.css - Bronze Creative Mobile Responsiveness
   Covers: max-width 768px and max-width 480px breakpoints
   Load AFTER style.css
   ============================================================ */

/* Global fixes */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }

/* Navbar */
@media screen and (max-width: 768px) {
  .home_nav { padding: 0 12px; height: 54px; }
  .logo h2 { font-size: 16px; letter-spacing: 1px; }
  .navbar-content { display: none; }
  .list-div { display: none !important; }
  .menu-list { width: 260px; padding: 10px 0; z-index: 9999; }
  .menu-list li { padding: 8px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 14px; }
  .menu-list li a { font-size: 14px; }
}

/* Hero / Banner */
@media screen and (max-width: 768px) { .img_1 { height: 45vh; } }
@media screen and (max-width: 480px) { .img_1 { height: 35vh; } }

/* Fix fixed bg-attachment on mobile (iOS bug) */
@media screen and (max-width: 768px) {
  .img_1 img { position: relative; z-index: auto; }
  .middle-img { height: 40vh; background-attachment: scroll; background-size: cover; }
}

/* Manufacturing & Export */
@media screen and (max-width: 768px) {
  .manufactur { display: flex; flex-direction: column; margin: 0; padding: 16px; }
  .manufactur h1 { font-size: 22px; text-align: center; }
  .part-1 { flex-direction: column; align-items: center; gap: 16px; margin-top: 10px; }
  .part-1 img { width: 120px; height: 120px; }
  .part-2 { width: 100%; }
  .part-2 p { width: 100%; text-align: center; }
  .part-2 button { display: block; margin: 12px auto 0; }
  .manufactur .part-3 { width: 100%; }
  .manufactur .part-3 img { width: 100%; height: auto; border-radius: 16px; margin-top: 12px; }
}

/* Panchaloga */
@media screen and (max-width: 768px) {
  .hover-image { justify-content: center; flex-wrap: wrap; gap: 8px; }
  .pum-images { width: 140px; height: 200px; }
  .hover-image .img5 { width: 140px; height: 200px; }
  .topic h1 { font-size: 20px; }
}
@media screen and (max-width: 480px) {
  .pum-images { width: calc(50% - 8px); height: 160px; }
  .hover-image .img5 { width: 100%; height: 200px; }
}

/* Scroll Icons */
@media screen and (max-width: 768px) {
  .slide { width: 100%; padding: 10px 0; }
  .scroll-icon { grid-template-columns: repeat(7, 240px); overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .scroll-icon .scroll-images1, .scroll-icon .scroll-images2 { width: 240px; height: 180px; scroll-snap-align: start; }
  .slide .slide-button { display: none !important; }
}

/* 23 Feet Nataraja */
@media screen and (max-width: 768px) {
  .natarajar .big-header { font-size: 48px; letter-spacing: 4px; }
  .natarajar .header { font-size: 22px; }
  .natarajar .header-2 { font-size: 14px; padding: 0 12px; }
  .big-nataraja { width: 100%; height: auto; border-radius: 8px; }
  .nataraja-images { flex-wrap: wrap; gap: 10px; margin: 20px 0 40px; justify-content: center; }
  .nataraja-images div { height: auto; }
  .nataraja-images img { width: calc(50% - 10px); height: 180px; object-fit: cover; }
  .history-img { display: flex; flex-direction: column; gap: 10px; }
  .history-img .img-1 { height: 260px; width: 100%; object-fit: cover; }
  .history-img .bottom { display: flex; flex-direction: column; gap: 10px; }
  .history-img .img-2 { height: 200px; width: 100%; object-fit: cover; }
}
@media screen and (max-width: 480px) {
  .natarajar .big-header { font-size: 32px; letter-spacing: 2px; }
  .nataraja-images img { width: 100%; height: 200px; }
}

/* Grand Abhishekam */
@media screen and (max-width: 768px) {
  .grand-abishekam img { height: auto; min-height: 220px; object-fit: cover; object-position: center top; }
  .grand-abishekam > div { position: relative; top: 0; left: 0; background: rgba(0,0,0,0.45); padding: 12px 16px; font-size: 16px; line-height: 1.4; width: 100%; text-align: center; }
  .abishegam-img .first-box { flex-direction: column; align-items: center; gap: 12px; }
  .first-box div { width: 100%; max-width: 100%; height: 220px; }
  .first-box img { object-fit: cover; }
  .abishegam-img .second-box { flex-direction: column; align-items: center; gap: 16px; }
  .second-box img { width: 100%; max-width: 100%; height: 200px; object-fit: cover; }
  .second-box p { width: 100%; text-align: center; }
  .various-click { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .various-click div { width: calc(50% - 10px); height: 140px; }
  .various-click img { width: 100%; height: 100%; object-fit: cover; }
}
@media screen and (max-width: 480px) {
  .various-click div { width: 100%; max-width: 100%; height: 180px; }
}

/* Watch Our Videos */
@media screen and (max-width: 768px) {
  .watch-video { flex-direction: column; height: auto; border-radius: 8px; margin-bottom: 40px; }
  .bc-video-left { width: 100%; padding: 24px 16px 16px; text-align: center; align-items: center; }
  .bc-video-left h3 { font-size: 22px; }
  .bc-video-left p { width: 100% !important; font-size: 14px; }
  .video-img { width: 100%; height: 220px; overflow: hidden; border-radius: 0 0 8px 8px; }
  .video-img img { width: 100%; height: 100%; object-fit: cover; }
}

/* Home Decor */
@media screen and (max-width: 768px) {
  .home-decor-idols-1 { flex-direction: column; width: 100%; }
  .home-decor-idols-1 > div:first-child { width: 100%; }
  .home-decor-idols-1 h1 { font-size: 22px; text-align: center; }
  .home-decor-idols-1 img { width: 120px; height: 160px; margin: 10px auto; }
  .home-decor-idols-1 .w-75 { width: 100% !important; padding: 0 8px; text-align: center; }
  .home-decor-idols-2 { width: 100% !important; display: flex; justify-content: center; margin-top: 16px; }
  .home-decor-idols-2 img { width: 160px !important; height: 160px !important; border-radius: 50%; object-fit: cover; }
  .attraction-img { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; overflow: visible; margin: 40px 0 20px; }
  .attraction-img div { transform: none !important; z-index: auto !important; width: calc(50% - 12px); min-width: 140px; height: 200px; border-radius: 12px; }
  .attraction-img img { border-radius: 12px; object-fit: cover; }
  .collection-slide { width: 100%; padding: 10px 0; }
  .slide-images { grid-template-columns: repeat(10, 180px); overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .slide-images .scroll-img1, .slide-images .scroll-img2 { width: 180px; height: 200px; scroll-snap-align: start; }
  .collection-slide button { display: none !important; }
}
@media screen and (max-width: 480px) {
  .attraction-img div { width: 100%; height: 220px; }
}

/* Sheet Metal Arts */
@media screen and (max-width: 768px) {
  .sheet-metal-art { display: flex; flex-direction: column; margin-top: 30px; margin-bottom: 30px; }
  .sheet-metal-art h1 { font-size: 22px; text-align: center; }
  .sheet-metal-art .part1 .box-1 { flex-direction: column; gap: 12px; padding: 12px; }
  .sheet-metal-art .part1 .box-1 ul { width: 100%; }
  .sheet-metal-art .part1 .box-1 p { padding-left: 0; }
  .hexagon-shape { width: 100%; height: 220px; }
  .hexagon-shape .shape { clip-path: unset; border-radius: 12px; height: 220px; }
  .img-wrapper2 { padding-top: 20px; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); grid-auto-rows: 140px; }
  .collection-slide-2 { width: 100%; padding: 10px 0; }
  .slide-images-2 { grid-template-columns: repeat(10, 180px); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 8px; }
  .slide-images-2 .scroll-img1, .slide-images-2 .scroll-img2 { width: 180px; height: 200px; scroll-snap-align: start; }
  .slide-button-2 { display: none !important; }
  .foreiner-visit img { height: auto; min-height: 160px; object-fit: cover; }
  .foreiner-visit p { position: static; width: 100%; text-align: center; font-size: 13px; padding: 8px; }
}

/* CERN / Nataraja in Swiss */
@media screen and (max-width: 768px) {
  .swiss-part1 { grid-template-columns: 1fr; gap: 20px; }
  .swiss-part1 .box1 P { font-size: 28px; line-height: 30px; }
  .box1-images { flex-direction: column; align-items: center; gap: 12px; }
  .box1-images .img-1, .box1-images .img-2 { width: 100%; height: 200px; }
  .swiss-part1 .box2 { align-items: center; }
  .swiss-part1 .box2 img { width: 100%; height: auto; }
  .installation-img { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; overflow: visible; margin: 30px 0; }
  .installation-img div { transform: none !important; z-index: auto !important; width: calc(50% - 12px); height: 160px; border-radius: 8px; }
  .installation-img img { object-fit: cover; border-radius: 8px; }
  .exploring-gallery { gap: 10px; padding: 0 12px 24px; }
  .exploring-gallery div { width: calc(50% - 10px); }
  .exploring-gallery img { width: 100%; height: 180px; object-fit: cover; }
}
@media screen and (max-width: 480px) {
  .exploring-gallery div { width: 100%; }
  .exploring-gallery img { height: 200px; }
  .installation-img div { width: 100%; height: 200px; }
}

/* Lost Wax Process */
@media screen and (max-width: 768px) {
  .wax-process-img { flex-direction: column; align-items: center; gap: 20px; }
  .wax-process-img div { width: 100%; text-align: center; }
  .wax-process-img img { width: 100%; height: auto; }
}

/* Home Pooja Deities & Accessories */
@media screen and (max-width: 768px) {
  .box-01 { flex-direction: column; gap: 16px; margin: 20px 0; }
  .box-01 .head { width: 100%; padding: 16px 0; }
  .box-01 .head h1 { font-size: 20px; letter-spacing: 1px; padding-bottom: 12px; }
  .hexagon-shape-2 { clip-path: unset; width: 100%; height: 220px; border-radius: 12px; margin: 0 auto; }
  .box-02, .box-03, .box-04, .box-05, .box-06 { justify-content: center; gap: 10px; }
  .box-02 div, .box-03 div { width: calc(50% - 10px); height: 160px; }
  .box-07 { flex-direction: column; align-items: center; gap: 12px; }
  .box-07 .item-1, .box-07 .item-2, .box-07 .item-3, .box-07 .item-4 { width: 100%; height: 200px; }
  .gold-plated { flex-direction: column; align-items: center; gap: 16px; margin: 20px 12px; padding: 16px; }
}
@media screen and (max-width: 480px) {
  .box-02 div, .box-03 div { width: 100%; height: 200px; }
}

/* Blog Section */
@media screen and (max-width: 768px) {
  #blog { padding: 30px 12px; }
  #blog h1 { font-size: 24px; }
}

/* Google Map */
@media screen and (max-width: 768px) {
  .g-map iframe { width: 100% !important; height: 260px; }
}

/* Footer */
@media screen and (max-width: 768px) {
  .bc-footer__grid { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
}

/* WhatsApp Float */
@media screen and (max-width: 768px) {
  .bc-wa-float { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 22px; }
}

/* Scrollbar */
@media screen and (max-width: 768px) {
  .scroll-icon::-webkit-scrollbar, .slide-images::-webkit-scrollbar, .slide-images-2::-webkit-scrollbar { height: 4px; }
  .scroll-icon::-webkit-scrollbar-thumb, .slide-images::-webkit-scrollbar-thumb, .slide-images-2::-webkit-scrollbar-thumb { background: #db8b5c; border-radius: 2px; }
}

/* General text sizing */
@media screen and (max-width: 480px) {
  body { font-size: 14px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1rem; }
}