/* FORCE OVERWRITE RESPONSIVE CSS */
/* Global Reset */
html,
body {
overflow-x: hidden;
position: relative;
width: 100%;
max-width: 100%;
}
/* Default Desktop State */
.mobile-toggle,
.mobile-menu-overlay {
display: none !important;
}
/* Mobile State */
@media screen and (max-width: 1024px) {
/* Visual indicator that this file is working (remove later) */
/* body { background-color: #fff0f0 !important; } */
/* Hide Desktop Nav */
.nav-menu {
display: none !important;
}
.header-actions .btn {
display: none !important;
}
/* Show Mobile Toggle */
.mobile-toggle {
display: flex !important;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #d32f2f;
/* Primary red */
cursor: pointer;
padding: 0.5rem;
z-index: 100;
}
/* Mobile Menu Overlay Support */
.mobile-menu-overlay {
display: none;
/* Initially hidden, js toggles to flex/block with .active */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: white;
z-index: 2000;
flex-direction: column;
padding: 1.5rem;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.mobile-menu-overlay.active {
display: flex !important;
transform: translateX(0);
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
}
.close-menu {
background: none;
border: none;
cursor: pointer;
color: var(--text-dark);
}
.mobile-links {
display: flex;
flex-direction: column;
gap: 1.5rem;
overflow-y: auto;
}
.mobile-links a {
font-size: 1.1rem;
font-weight: 500;
color: var(--text-dark);
}
.mobile-dropdown-content {
display: none;
flex-direction: column;
gap: 0.8rem;
padding-left: 1.5rem;
margin-top: 0.8rem;
border-left: 2px solid var(--border);
}
.mobile-dropdown-content.active {
display: flex;
}
.mobile-dropdown-content a {
font-size: 1rem;
color: var(--text-gray);
}
.js-dropdown-trigger {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-weight: 500;
}
/* Layout Fixes */
.container {
padding: 0 1.5rem;
max-width: 100%;
}
.trust-grid {
flex-direction: column !important;
gap: 1rem;
}
.hero-slider-container {
height: 50vh;
min-height: 400px;
}
.hero-number {
display: none !important;
}
.text-xl {
font-size: 2rem !important;
}
}
@media screen and (max-width: 768px) {
.product-showcase-grid {
grid-template-columns: 1fr !important;
display: grid !important;
}
.prod-card {
min-height: auto;
}
.cert-grid,
.news-section-grid,
.footer-grid {
grid-template-columns: 1fr !important;
}
.footer-btm {
flex-direction: column;
}
.top-nav {
display: none !important;
}
.slider-nav {
display: none !important;
}
.container {
padding: 0 1rem !important;
}
}