html, body {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
    width: 100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    position: relative;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

/* Fix for content overflow issues */
* {
    box-sizing: border-box;
}

/* Specific overflow handling for product pages */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-8 {
    overflow-x: hidden;
    max-width: 100%;
}

/* Specific overflow handling for machinery pages */
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-8 {
    overflow-x: hidden;
    max-width: 100%;
}

/* Specific overflow handling for contact pages */
.grid.grid-cols-1.lg\:grid-cols-2.gap-12 {
    overflow-x: hidden;
    max-width: 100%;
}

/* Specific overflow handling for order pages */
.flex.flex-col.lg\:flex-row.gap-8 {
    overflow-x: hidden;
    max-width: 100%;
}

/* Specific overflow handling for about pages */
.grid.grid-cols-1.md\:grid-cols-2.gap-12.items-center {
    overflow-x: hidden;
    max-width: 100%;
}



/* Ensure FAQ content doesn't overflow */
.bg-white.rounded-lg.shadow-sm.p-6.mb-8 {
    overflow-x: hidden;
    max-width: 100%;
}

/* Prevent text overflow in FAQ answers */
.bg-white.rounded-lg.shadow-sm.p-6.mb-8 p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Ensure images don't cause overflow */
img {
    max-width: 100%;
    height: auto;
    overflow-x: hidden;
}

/* Fix for table and pre elements that might cause overflow */
table, pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Ensure containers don't overflow */
.max-w-7xl {
    max-width: 100%;
    overflow-x: hidden;
}

/* Specific overflow handling for navigation */
nav.fixed.w-full {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    box-sizing: border-box;
}

/* Specific overflow handling for navigation */
nav.fixed.w-full {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Specific overflow handling for hero section */
.hero-section {
    overflow-x: hidden;
    max-width: 100%;
}

/* Specific overflow handling for hero section text */
.hero-section h1,
.hero-section p {
    overflow-x: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Specific overflow handling for hero section H1 tag */
.hero-section h1.text-4xl.md\:text-5xl.font-bold.text-gray-900.mb-4 {
    overflow-x: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Specific overflow handling for hero section H1 tag - escaped version */
h1.text-4xl.md\:text-5xl.font-bold.text-gray-900.mb-4 {
    overflow-x: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Specific overflow handling for logo area */
.flex.items-center {
    overflow-x: hidden;
    max-width: 100%;
}

/* Specific overflow handling for logo and company name */
.flex.items-center .text-2xl {
    overflow-x: hidden;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix for any flex containers that might cause overflow */
.flex, .grid {
    min-width: 0;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure all sections don't overflow */
section, .section {
    overflow-x: hidden;
    max-width: 100%;
}

/* Prevent long URLs from causing overflow */
a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure all container elements respect boundaries */
.container, .max-w-7xl, .px-4, .px-6, .px-8 {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure no element can extend beyond the viewport */
* {
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Prevent overflow on specific content sections */
.py-16, .py-24, .pt-16, .pb-8, .pt-24, .pb-16 {
    overflow-x: hidden;
}

/* Ensure text content wraps properly */
.text-gray-600, .text-gray-900, .text-gray-400, .text-gray-700 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Ensure hero section text wraps properly */
.hero-section .text-gray-900,
.hero-section .text-gray-600 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Additional overflow handling for hero section text container */
.md\:w-1\/2.z-10 {
    overflow-x: hidden;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent overflow on heading elements */
.text-3xl, .text-xl, .text-lg, .text-4xl, .text-5xl {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure all div elements respect boundaries */
div {
    max-width: 100%;
    overflow-x: hidden;
}

/* Hide scrollbars for all elements */
*::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Comprehensive overflow prevention for all elements */
* {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Ensure proper text wrapping for all content */
*, *:before, *:after {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Prevent any element from causing horizontal overflow */
*:not(html):not(body) {
    overflow-x: hidden !important;
}

/* Ensure the entire document doesn't overflow horizontally */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}
:where([class^="ri-"])::before { content: "\f3c2"; }
        body {
            font-family: 'Poppins', sans-serif;
        }
        
        input:focus, button:focus {
            outline: none;
        }
        input[type="number"]::-webkit-inner-spin-button, 
        input[type="number"]::-webkit-outer-spin-button { 
            -webkit-appearance: none; 
            margin: 0; 
        }
        .custom-checkbox {
            position: relative;
            cursor: pointer;
        }
        .custom-checkbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #f9fafb;
            border: 2px solid #d1d5db;
            border-radius: 4px;
        }
        .custom-checkbox:hover input ~ .checkmark {
            background-color: #f3f4f6;
        }
        .custom-checkbox input:checked ~ .checkmark {
            background-color: #2E7D32;
            border-color: #2E7D32;
        }
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        .custom-checkbox input:checked ~ .checkmark:after {
            display: block;
        }
        .custom-checkbox .checkmark:after {
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .slideshow-nav-btn {
        cursor: default; /* This removes the pointer cursor */
    }
    
    /* Mobile menu styles */
    #mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e5e7eb;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease, max-height 0.3s ease, opacity 0.3s ease;
}

#mobile-menu.show {
    max-height: 500px;
    opacity: 1;
}

#mobile-menu a {
    transition: all 0.2s ease;
}

#mobile-menu button {
    width: 100%;
    text-align: left;
}

/* Enhanced mobile menu animations */
@media (max-width: 767px) {
    #mobile-menu {
        transform: translateY(-10px);
    }
    
    #mobile-menu.show {
        transform: translateY(0);
    }
    
    #mobile-menu .px-2.pt-2.pb-3 a {
        transform: translateX(-10px);
        opacity: 0;
        transition: all 0.3s ease 0.1s;
    }
    
    #mobile-menu.show .px-2.pt-2.pb-3 a {
        transform: translateX(0);
        opacity: 1;
    }
    
    /* Staggered animation for menu items */
    #mobile-menu.show .px-2.pt-2.pb-3 a:nth-child(1) {
        transition-delay: 0.1s;
    }
    
    #mobile-menu.show .px-2.pt-2.pb-3 a:nth-child(2) {
        transition-delay: 0.15s;
    }
    
    #mobile-menu.show .px-2.pt-2.pb-3 a:nth-child(3) {
        transition-delay: 0.2s;
    }
    
    #mobile-menu.show .px-2.pt-2.pb-3 a:nth-child(4) {
        transition-delay: 0.25s;
    }
    
    #mobile-menu.show .px-2.pt-2.pb-3 a:nth-child(5) {
        transition-delay: 0.3s;
    }
    
    #mobile-menu.show .px-2.pt-2.pb-3 a:nth-child(6) {
        transition-delay: 0.35s;
    }
}

/* Improved focus styles for accessibility */
#mobile-menu-button:focus,
#mobile-menu a:focus {
    outline: 2px solid #2E7D32;
    outline-offset: 2px;
}

/* Ensure mobile menu is properly positioned */
nav.fixed.w-full {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Prevent scrolling when mobile menu is open */
body.menu-open {
    overflow: hidden;
}

/* Scroll-to-top button */
#scrollToTopBtn {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 90px; /* 👈 lifted above WhatsApp button */
  right: 20px;
  background-color: #2E7D32;
  color: white;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  line-height: 60px;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 99; /* slightly lower than WhatsApp */
  display: none; /* hidden until scroll */
  transition: background-color 0.3s, transform 0.3s;
}

#scrollToTopBtn:hover {
  background-color: #1B5E20;
  transform: scale(1.1);
}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100; /* on top of scroll button */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Additional overflow fixes for specific elements */
.text-justify {
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.border-b {
    word-break: break-word;
}

/* Prevent overflow on all paragraph elements */
p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Ensure buttons don't cause overflow */
button, .button {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix for long words in headings */
h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent flexbox overflow */
.flex-wrap, .flex-nowrap, .flex-wrap-reverse {
    flex-wrap: wrap;
}

/* Ensure flex containers don't overflow */
.flex.justify-between.items-center {
    overflow-x: hidden;
    max-width: 100%;
}

/* WhatsApp button styles */
.whatsapp-button {
    position: fixed;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 99998;
    transition: all 0.3s ease;
}

.whatsapp-button:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

/* Ensure WhatsApp button is visible */
.whatsapp-button {
    z-index: 99998 !important;
    pointer-events: auto !important;
}

/* Ensure form elements don't overflow */
input, textarea, select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix for code blocks */
code, pre, kbd {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure map and iframe elements don't cause overflow */
iframe, .map-container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure all media elements don't cause overflow */
img, video, iframe, svg, object, embed {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent SVG overflow */
svg {
    max-width: 100%;
    height: auto;
}

/* Ensure back-to-top button is always visible */
#backToTop {
    z-index: 9999 !important;
    position: fixed !important;
}