/* ==========================================================
   MOBILE RESPONSIVENESS (Max Width: 1024px)
   ========================================================== */

@media (max-width: 1024px) {

  /* 1. TYPOGRAPHY (Prosto One Font Everywhere, except Marathi) */
  *:not(body.marathi *):not(body.marathi):not(i[class*="fa-"]) {
    font-family: "Prosto One", sans-serif !important;
  }

  body {
    overflow-x: hidden !important;
    /* Prevent horizontal scroll */
    width: 100%;
  }

  /* 2. NAVBAR REFACTOR */
  .navbar {
    padding: 15px 20px !important;
    height: auto !important;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* Logo */
  .logo-wrap img {
    height: 60px !important;
    /* Scale down logo */
  }

  /* Hamburger Icon */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 10000;
  }

  .hamburger span {
    width: 30px;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.3s ease;
  }

  /* Nav Menu Wrapper */
  .nav-menu {
    position: fixed;
    top: 90px;
    /* Below navbar */
    right: -100%;
    /* Hidden by default */
    width: 250px;
    height: calc(100vh - 90px);
    background: rgba(40, 25, 10, 0.95);
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: center;
    padding-top: 30px;
    gap: 20px !important;
    transition: right 0.4s ease;
    z-index: 9998;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    /* Allow scrolling if menu is tall */
  }

  .nav-dropdown .dropdown-menu {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px 0 5px 15px !important;
    min-width: 100% !important;
    margin-top: 5px !important;
    border-radius: 0;
    gap: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    border-left: 2px solid #7BAF42 !important; /* visual parent-child grouping */
  }

  .nav-dropdown .dropdown-menu a {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    padding-left: 10px !important;
    line-height: 1 !important;
    opacity: 0.85;
  }

  /* B2B parent link — visually stronger than children */
  .nav-dropdown > a {
    font-weight: 600 !important;
    letter-spacing: 1.5px;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-menu a {
    font-size: 16px !important;
  }

  /* Hide original nav-actions when outside nav-menu on mobile */
  .navbar>.nav-actions {
    display: none !important;
  }

  /* Show nav-actions when moved inside nav-menu */
  .nav-menu .nav-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin-top: 30px !important;
    margin-left: 0 !important;
    padding-bottom: 30px !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
  }

  /* Hamburger Animation */
  .hamburger.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* 3. HERO & BANNERS (Scale without cutoff) */
  .hero,
  .single-banner {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .hero .slide,
  .single-banner .slide {
    position: absolute;
  }

  .hero .slide.active,
  .single-banner .slide.active {
    position: relative !important;
  }

  .hero .slide img,
  .single-banner .slide img,
  .hero img.hero-img {
    height: auto !important;
    width: 100% !important;
    object-position: center !important;
    object-fit: cover !important;
    /* Changed from contain to cover for better filling */
    display: block !important;
  }

  .careers-hero {
    height: auto !important;
    padding: 0 !important;
  }

  .careers-hero img {
    padding: 0 !important;
  }

  /* Force relative display for about hero */
  .hero img.hero-img {
    position: relative !important;
  }



  /* Hide the certified logo extra-banner on mobile */
  .extra-banner,
  .mobile-hide-section {
    display: none !important;
  }

  .single-banner {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border: none !important;
    display: block !important;
  }

  .single-banner img,
  .b2b-banner {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 4. SECTIONS & COMPONENTS (Single Column Layout) */
  .section,
  #innovation,
  .contact-section {
    padding: 60px 20px !important;
  }

  /* Convert multi-column flex/grid to single column */
  .top-products-row,
  .verticals,
  .experience,
  .map-section,
  .enquire,
  .footer-container,
  .exp-reels-wrap,
  .openings-grid,
  .values-grid,
  .vm-container,
  .approach-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    align-items: center !important;
  }

  .footer-col {
    text-align: center !important;
    align-items: center !important;
  }

  .vertical {
    width: 100% !important;
  }

  .exp-text,
  .exp-media {
    width: 100% !important;
  }

  .map-section iframe {
    width: 100% !important;
    height: 300px !important;
  }

  .visit-text {
    width: 100% !important;
    text-align: center;
  }

  /* Top products card full width */
  .top-product-card {
    width: 100% !important;
    max-width: 340px !important;
  }

  .reel-video-card {
    width: 100% !important;
  }

  /* B2B Blocks */
  .b2b-content {
    padding: 40px 20px !important;
  }

  /* 5. FORMS & INPUTS (Full Width) */
  .enquire-form,
  .career-form {
    width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .enquire-left {
    width: 100% !important;
    text-align: center;
  }

  .enquire-form input,
  .enquire-form select,
  .enquire-form textarea,
  .career-form input,
  .career-form textarea,
  .career-form button {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
  }

  /* 6. SPACING & ALIGNMENT */
  body,
  html {
    max-width: 100vw;
  }

  h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  h2,
  .section-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  .subtitle,
  p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Adjust stats */
  .stats {
    flex-direction: column !important;
    gap: 40px !important;
    padding: 50px 20px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .stat {
    text-align: center !important;
  }

  /* Info Strip text */
  .strip-track {
    animation-duration: 28s !important;
  }

  .strip-track span {
    font-size: 12px !important;
  }

  /* Shrink Vision / Mission cards */
  .vm-container {
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .vm-card {
    padding: 20px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    border-radius: 18px !important;
  }

  .vm-card h3,
  .about-card h4 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  /* Restore background videos on mobile */
  .section-bg-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .video-bg-section {
    background: transparent !important;
  }

  /* Restore footer social icons — full fix */
  .footer-social {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .footer-social a,
  .social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    font-size: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
  }

  .footer-social a i,
  .social-icon i {
    color: #fff !important;
    font-size: 20px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* MOBILE BANNERS (768px max width) */
@media (max-width: 768px) {

  /* STEP 1: FIX OVERFLOW */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
  }



  /* STEP 2: FIX NAVBAR CUTTING (HAMBURGER ISSUE) & MAKE IT STICKY */
  .navbar {
    width: 100% !important;
    padding: 12px 16px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    background: rgba(40, 25, 10, 0.95) !important;
    backdrop-filter: blur(6px) !important;
    transition: all 0.3s ease !important;
  }

  .nav-actions {
    margin-left: 0 !important;
  }

  /* STEP 3 & 4: HERO BANNER FULL WIDTH FIX & HEIGHT */
  .hero,
  .products-hero,
  .innovation-section,
  .b2b-section,
  .careers-hero,
  .blog-header,
  .blog-section {
    width: 100vw !important;
    height: 60vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .hero .slide {
    height: 60vh !important;
  }

  .hero img,
  .products-hero img,
  .innovation-banner,
  .b2b-banner,
  .careers-hero img,
  .blog-header img {
    width: 100vw !important;
    height: 60vh !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .careers-hero img,
  .innovation-banner,
  .b2b-banner {
    width: 100vw !important;
    height: 60vh !important;
    object-fit: cover !important;
    object-position: center !important;
  }




  /* STEP 7: PRODUCTS PAGE */
  body.lang-en .products-hero img {
    content: url("assets/mobile banners/Mobile/ENG Banners/Products Page Banners/Products Banner 1.jpg") !important;
  }

  /* STEP 8: INNOVATION PAGE */
  body.lang-en .innovation-banner {
    content: url("assets/mobile banners/Mobile/ENG Banners/Banner Innovation.jpg") !important;
  }

  body.lang-mr .innovation-banner {
    content: url("assets/mobile banners/Mobile/MARATHI Banners/Banner Innovation.jpg") !important;
  }

  /* STEP 9: B2B PAGE (2 BANNERS) */
  body.lang-en #banner-dealership {
    content: url("assets/mobile banners/Mobile/ENG Banners/Banner.jpg") !important;
  }

  body.lang-mr #banner-dealership {
    content: url("assets/mobile banners/Mobile/MARATHI Banners/Banner.jpg") !important;
  }

  body.lang-en #banner-bulk-orders {
    content: url("assets/mobile banners/Mobile/ENG Banners/Banner b2b white label.jpg") !important;
  }

  body.lang-mr #banner-bulk-orders {
    content: url("assets/mobile banners/Mobile/MARATHI Banners/Banner b2b white label.jpg") !important;
  }

  /* STEP 10: CAREER PAGE */
  body.lang-en .careers-hero img {
    content: url("assets/mobile banners/Mobile/ENG Banners/Banner.jpg") !important;
  }

  body.lang-mr .careers-hero img {
    content: url("assets/mobile banners/Mobile/MARATHI Banners/Banner.jpg") !important;
  }

  /* STEP 11: BLOG PAGE */
  body.lang-en .blog-header img {
    content: url("assets/mobile banners/Mobile/ENG Banners/Banner.jpg") !important;
  }

  /* STEP 12: ZERO GAP — HERO → INFO STRIP */
  body .hero.home-hero {
    height: 60vh !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border: none !important;
    display: block !important;
  }

  body .info-strip {
    margin: 0 !important;
    padding: 10px 0 !important;
    /* Restore some padding so it's not messy */
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body .info-strip .strip-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
  }

  body .info-strip .strip-track span {
    white-space: nowrap !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: max-content !important;
  }

  body .hero .slide img,
  body .hero img.hero-img {
    height: 60vh !important;
    width: 100vw !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* BEFORE / AFTER BANNER — Clean mobile slider */
  .single-banner {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 15px !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
  }

  .banner-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  }

  /* Allow only active slide to show — keep slider behaviour */
  .single-banner .slide {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    opacity: 0 !important;
    display: block !important;
    transition: opacity 0.5s ease !important;
  }

  .single-banner .slide.active {
    position: relative !important;
    opacity: 1 !important;
  }

  .single-banner .slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 15px !important;
  }

  /* Mobile banner content swap */
  body.lang-en .single-banner .slide:nth-child(1) img {
    content: url("assets/mobile banners/Mobile/ENG Banners/Before After/Before After 1.jpg") !important;
  }

  body.lang-mr .single-banner .slide:nth-child(1) img {
    content: url("assets/mobile banners/Mobile/MARATHI Banners/Before After/Before After 1.jpg") !important;
  }

  body.lang-en .single-banner .slide:nth-child(2) img {
    content: url("assets/mobile banners/Mobile/ENG Banners/Before After/Before After 3.jpg") !important;
  }

  body.lang-mr .single-banner .slide:nth-child(2) img {
    content: url("assets/mobile banners/Mobile/MARATHI Banners/Before After/Before After 3.jpg") !important;
  }



  body {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 84px !important;
    /* Adjusted to match 60px logo + 12px*2 padding */
  }

  section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    /* Ensure padding doesn't create gaps */
    padding-bottom: 0 !important;
  }

  .hero,
  .innovation-section,
  .b2b-section,
  .careers-hero {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    line-height: 0 !important;
  }

  .hero img,
  .careers-hero img,
  .products-banner img,
  .blog-header img {
    display: block !important;
  }

  .info-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .extra-banner,
  .single-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
  }

  .container {
    margin-top: 0 !important;
  }



  .product-section,
  #products {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ABOUT PAGE BANNER FIX */
  body.about-page .hero {
    height: 75vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  body.about-page .hero .hero-img {
    height: 75vh !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Swap desktop banner for mobile-optimised version */
  body.about-page.lang-en .hero img.hero-img {
    content: url("assets/mobile banners/Mobile/ENG Banners/About us.jpg") !important;
  }

  body.about-page.lang-mr .hero img.hero-img {
    content: url("assets/mobile banners/Mobile/MARATHI Banners/About us.jpg") !important;
  }

  /* INNOVATION BLACK GAP FIX */
  .innovation-video-section {
    background: #fff !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .innovation-section+.innovation-video-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* BLOG PAGE FIX */
  .blog-section {
    padding: 40px 20px !important;
    height: auto !important;
  }

  .blog-title {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }

  .blog-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }

  .blog-row.reverse {
    flex-direction: column !important;
  }

  .blog-image,
  .blog-content {
    width: 100% !important;
    padding: 0 !important;
  }

  .blog-image img {
    border-radius: 15px !important;
    height: 250px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .blog-content h2 {
    font-size: 22px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .blog-content p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .blog-cta {
    padding: 60px 20px !important;
    margin: 0 !important;
  }
}

@media (max-width: 768px) {
  body.marathi {
    font-family: 'Anek Devanagari', sans-serif;
  }

  body.marathi h1,
  body.marathi h2,
  body.marathi h3 {
    font-weight: 700;
  }

  body.marathi p,
  body.marathi span {
    font-weight: 500;
  }
}

/* ===== MOBILE: FOOTER SOCIAL ICONS + WHATSAPP BUTTON ===== */
@media (max-width: 768px) {

  /* ── FOOTER SOCIAL ICONS ────────────────────────────── */
  .footer-social {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
    padding: 0 !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .footer-social a,
  .social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    /* brighter circle */
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    font-size: 22px !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    position: relative !important;
  }

  .footer-social a i,
  .footer-social .social-icon i {
    color: #ffffff !important;
    font-size: 22px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
  }

  /* ── FLOATING WHATSAPP BUTTON ──────────────────────── */
  .whatsapp-float {
    position: fixed !important;
    bottom: 90px !important;
    /* Move higher to avoid mobile safe area clipping */
    right: 16px !important;
    z-index: 99999 !important;
    /* ensure above footer & overlays */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #128C7E !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* Hide the text label on mobile — icon only */
  .whatsapp-float span {
    display: none !important;
  }

  .whatsapp-float i {
    font-size: 28px !important;
    color: #fff !important;
    display: block !important;
    line-height: 1 !important;
  }

  /* ── PRODUCTS ACCORDION (MOBILE ONLY) ────────────────── */
  #productDetails {
    display: none !important;
    /* Hide global detail box */
  }

  .product-item {
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    height: auto !important;
  }

  .p-item-header {
    display: flex !important;
    flex-direction: column !important;
    pointer-events: none !important;
    /* Let clicks pass to parent */
  }

  .mobile-inline-details {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    cursor: default !important;
    /* Reset cursor for content */
    animation: accordionSlideDown 0.3s ease-out forwards;
  }

  @keyframes accordionSlideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-inline-details h2 {
    font-size: 1.4rem !important;
    margin-top: 15px !important;
    color: var(--primary-green) !important;
  }

  .mobile-inline-details .zoom-container {
    height: auto !important;
    min-height: 200px !important;
    background: #f9fbf9 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 10px !important;
  }

  .mobile-inline-details .product-img {
    height: auto !important;
    max-height: 240px !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .mobile-inline-details h4 {
    margin-top: 15px !important;
    padding-bottom: 5px !important;
    border-bottom: 1px solid #eee !important;
  }

  .mobile-inline-details ul {
    padding-left: 20px !important;
    margin: 8px 0 !important;
  }

  .mobile-inline-details li {
    font-size: 0.95rem !important;
    color: #555 !important;
  }
}

/* ===== MARATHI NAVBAR FONT — MOBILE / TABLET ===== */
@media (max-width: 1024px) {
  body.marathi .nav-menu a {
    font-size: 18px !important;
    letter-spacing: 1px !important;
  }

  body.marathi .nav-actions .contact-btn,
  body.marathi .nav-actions .lang-btn {
    font-size: 16px !important;
  }
}