*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --green: #1a7a3c; --green-mid: #218a47; --green-light: #27a355; --orange: #e8720c; --orange-deep: #c45e00; --black: #1a1a1a; --dark: #f0f4f1; --card-bg: #ffffff; --border: rgba(0, 0, 0, 0.1); --text: #2a2a2a; --muted: #5a6b5e; --white: #ffffff; --page-bg: #f7faf8; --section-alt: #eef4f0; } /* NEW: Dark mode variable overrides — applied when */ html[data-theme="dark"] { --black: #f0f4f1; --dark: #12171a; --card-bg: #1c2226; --border: rgba(255, 255, 255, 0.1); --text: #e6ece7; --muted: #9fb0a4; --white: #12171a; --page-bg: #0f1315; --section-alt: #181f22; } html { scroll-behavior: smooth; } body { font-family: "Outfit", sans-serif; background: var(--page-bg); color: var(--text); line-height: 1.6; overflow-x: hidden; transition: background 0.3s ease, color 0.3s ease; } /* ANNOUNCEMENT BAR */ .ann-bar { background: var(--green); color: #fff; padding: 8px 48px 8px 20px; text-align: center; font-size: 13px; font-weight: 500; position: relative; z-index: 1200; max-height: 120px; overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.4s ease; } .ann-bar.hidden { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; } .ann-bar span { color: var(--orange); font-weight: 700; } .ann-btns { display: flex; justify-content: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; } .ann-btn { padding: 5px 16px; border-radius: 50px; text-decoration: none; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: all 0.2s; } .ann-btn:hover { transform: translateY(-1px); opacity: 0.88; } .ann-btn.call { background: #0099ff; color: #fff; } .ann-btn.email { background: #fff; color: var(--green); } .ann-btn.wa { background: #25d366; color: #fff; } .ann-close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.2); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .ann-close:hover { background: rgba(255, 255, 255, 0.38); } /* NAV */ nav { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1100; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .nav-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .logo { font-family: "Bebas Neue", sans-serif; font-size: 24px; letter-spacing: 1.5px; color: var(--black); text-decoration: none; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .logo i { color: var(--orange); font-size: 20px; } .logo span { color: var(--green); } /* NEW: nav logo image sizing */ .logo-img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; } /* NEW: Day/Night theme toggle button */ .theme-toggle { background: var(--section-alt); border: 1px solid var(--border); color: var(--black); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; margin-left: 4px; } .theme-toggle:hover { background: var(--green); color: #fff; transform: rotate(20deg); border-color: var(--green); } .theme-toggle svg { transition: opacity 0.25s ease, transform 0.4s ease; } .nav-links { display: flex; list-style: none; gap: 2px; align-items: center; } .nav-links a { text-decoration: none; color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 6px 12px; border-radius: 6px; transition: all 0.2s; cursor: pointer; white-space: nowrap; } .nav-links a:hover { color: var(--green); background: rgba(26, 122, 60, 0.08); } .nav-links a.active { color: var(--green); background: rgba(26, 122, 60, 0.1); font-weight: 600; } /* HAMBURGER */ .mob-btn { display: none; background: none; border: 1px solid var(--border); color: var(--black); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; transition: all 0.2s; } .mob-btn:hover { background: rgba(26, 122, 60, 0.08); border-color: var(--green); } /* MOBILE DRAWER */ .mobile-drawer { display: none; position: fixed; inset: 0; z-index: 2000; } .drawer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 85vw); background: #ffffff; border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1); } .mobile-drawer.open { display: block; } .mobile-drawer.open .drawer-panel { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--green); } .drawer-logo { font-family: "Bebas Neue", sans-serif; font-size: 20px; color: #fff; letter-spacing: 1px; } .drawer-logo i { color: var(--orange); margin-right: 6px; } .drawer-close { background: rgba(255, 255, 255, 0.2); border: none; color: #fff; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; } .drawer-links { list-style: none; padding: 10px 0; flex: 1; overflow-y: auto; } .drawer-links li a { display: flex; align-items: center; gap: 12px; padding: 13px 20px; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: all 0.2s; border-left: 3px solid transparent; } .drawer-links li a i { width: 18px; text-align: center; color: var(--orange); font-size: 14px; } .drawer-links li a:hover, .drawer-links li a.active { color: var(--green); background: rgba(26, 122, 60, 0.07); border-left-color: var(--green); } .drawer-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; } .drawer-footer a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; transition: opacity 0.2s; } .drawer-footer a:hover { opacity: 0.85; } .d-call { background: var(--orange); color: #fff; } .d-wa { background: #25d366; color: #fff; } /* PAGE SECTIONS */ .page-section { display: none; } .page-section.active { display: block; } /* HERO SLIDER */ .hero { position: relative; height: clamp(320px, 52vh, 500px); overflow: hidden; } .slide { position: absolute; inset: 0; opacity: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .slide-bg { position: absolute; inset: -6%; background-size: cover; background-position: center; will-change: transform, opacity; opacity: 0; } .slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 14, 11, 0.82) 0%, rgba(10, 14, 11, 0.5) 100%); z-index: 1; } /* Active slide = visible */ .slide.active { opacity: 1; } .slide.active .slide-bg { opacity: 1; transform: scale(1); } /* Entry animations per data-anim */ .slide.entering .slide-bg { animation-duration: 1.3s; animation-timing-function: ease; animation-fill-mode: both; } .slide.entering[data-anim="zoom-in"] .slide-bg { animation-name: animZoomIn; } .slide.entering[data-anim="pan-left"] .slide-bg { animation-name: animPanLeft; } .slide.entering[data-anim="pan-right"] .slide-bg { animation-name: animPanRight; } .slide.entering[data-anim="zoom-out"] .slide-bg { animation-name: animZoomOut; } .slide.entering[data-anim="pan-up"] .slide-bg { animation-name: animPanUp; } @keyframes animZoomIn { from { transform: scale(1.1); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes animPanLeft { from { transform: translateX(5%) scale(1.04); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes animPanRight { from { transform: translateX(-5%) scale(1.04); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes animZoomOut { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes animPanUp { from { transform: translateY(4%) scale(1.04); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Leaving slide */ .slide.leaving { opacity: 0; transition: opacity 0.9s ease; } /* Slide content */ .slide-content { position: relative; z-index: 2; max-width: 800px; padding: 20px 24px; text-align: center; opacity: 0; transform: translateY(18px); transition: opacity 0.7s 0.25s ease, transform 0.7s 0.25s ease; } .slide.active .slide-content, .slide.entering .slide-content { opacity: 1; transform: translateY(0); } .since-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(240, 127, 26, 0.15); border: 1px solid var(--orange); color: var(--orange); padding: 5px 16px; border-radius: 50px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; } .slide-content h1 { font-family: "Bebas Neue", sans-serif; font-size: clamp(30px, 5vw, 56px); line-height: 1.05; color: #ffffff !important; letter-spacing: 1px; margin-bottom: 12px; } .slide-content p { font-size: clamp(13px, 2vw, 16px); color: rgba(255, 255, 255, 0.75); margin-bottom: 22px; font-weight: 300; } .hero-btn { background: var(--orange); color: #fff; padding: 11px 28px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: all 0.25s; font-family: "Outfit", sans-serif; } .hero-btn:hover { background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240, 127, 26, 0.4); } /* Slider dots */ .slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 10; } .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; border: none; transition: all 0.35s; } .dot.active { background: var(--orange); width: 22px; border-radius: 4px; } /* Slider arrows */ .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.25s; } .slider-arrow:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-50%) scale(1.1); } .slider-arrow.prev { left: 16px; } .slider-arrow.next { right: 16px; } @media (max-width: 480px) { .slider-arrow { width: 36px; height: 36px; font-size: 13px; } .slider-arrow.prev { left: 10px; } .slider-arrow.next { right: 10px; } } /* SECTIONS */ section { padding: 60px 20px; } .sec-title { text-align: center; margin-bottom: 44px; } .sec-title .label { display: inline-block; background: rgba(232, 114, 12, 0.1); color: var(--orange); border: 1px solid rgba(232, 114, 12, 0.25); padding: 4px 14px; border-radius: 50px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; } .sec-title h2 { font-family: "Bebas Neue", sans-serif; font-size: clamp(30px, 4vw, 44px); letter-spacing: 1px; color: var(--black); margin-bottom: 10px; } .sec-title p { color: var(--muted); font-size: 15px; max-width: 520px; margin: 0 auto; font-weight: 400; } /* sec-title inside dark sections stays white */ .scrap-types .sec-title h2 { color: #fff; } .scrap-types .sec-title p { color: rgba(255, 255, 255, 0.6); } /* TABS */ .tab-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; } .tab-btn { background: #fff; color: var(--muted); border: 1.5px solid #d8e4dc; padding: 9px 20px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 7px; font-family: "Outfit", sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); } .tab-btn:hover { border-color: var(--green); color: var(--green); } .tab-btn.active { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(26, 122, 60, 0.25); } .tab-content { display: none; } .tab-content.active { display: block; } .ctab-content { display: none; } .ctab-content.active { display: block; } /* CATEGORIES */ .categories-section { background: var(--section-alt); } /* CHANGED: auto-fit + justify-content:center so incomplete last row centers instead of sticking left */ .cat-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 18px; justify-content: center; } .cat-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; min-height: 200px; transition: all 0.35s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); animation: cardFadeUp 0.6s ease both; } .cat-card:hover { border-color: rgba(232, 114, 12, 0.4); transform: translateY(-6px) scale(1.015); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); } /* NEW: staggered fade-up entry animation for category cards */ @keyframes cardFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .cat-card:nth-child(1) { animation-delay: 0.05s; } .cat-card:nth-child(2) { animation-delay: 0.1s; } .cat-card:nth-child(3) { animation-delay: 0.15s; } .cat-card:nth-child(4) { animation-delay: 0.2s; } .cat-card:nth-child(5) { animation-delay: 0.25s; } .cat-card:nth-child(6) { animation-delay: 0.3s; } .cat-img { width: 40%; overflow: hidden; flex-shrink: 0; } .cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; display: block; } .cat-card:hover .cat-img img { transform: scale(1.08); } .cat-body { padding: 20px; display: flex; flex-direction: column; justify-content: center; } .cat-body h3 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .cat-body h3 i { color: var(--orange); } .cat-body p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; font-weight: 400; } .price-tag { display: inline-block; background: rgba(26, 122, 60, 0.08); border: 1px solid rgba(26, 122, 60, 0.25); color: var(--green); padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } /* WHY US */ .why-us { background: var(--page-bg); } .features-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .feat-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 28px 20px; text-align: center; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .feat-card:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 10px 28px rgba(232, 114, 12, 0.12); } .feat-card .icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(232, 114, 12, 0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 20px; color: var(--orange); transition: all 0.3s; } .feat-card:hover .icon { background: var(--orange); color: #fff; } .feat-card h3 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 7px; } .feat-card p { font-size: 13px; color: var(--muted); font-weight: 400; } /* SCRAP TYPES */ .scrap-types { background: linear-gradient(160deg, #0f3320 0%, #0a1f11 100%); position: relative; overflow: hidden; } .scrap-types::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 28px 28px; } .scrap-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; position: relative; z-index: 1; } .scrap-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 28px 20px; text-align: center; transition: all 0.3s; position: relative; overflow: hidden; } .scrap-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green), var(--orange)); transform: scaleX(0); transition: transform 0.3s; } .scrap-card:hover { border-color: rgba(232, 114, 12, 0.4); transform: translateY(-6px); background: rgba(255, 255, 255, 0.09); } .scrap-card:hover::after { transform: scaleX(1); } .scrap-card i { font-size: 32px; color: var(--orange); margin-bottom: 14px; display: block; } .scrap-card h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; } .scrap-card p { font-size: 12.5px; color: rgba(255, 255, 255, 0.65); line-height: 1.6; font-weight: 300; } /* LOCATIONS */ .locations { background: var(--section-alt); } /* CHANGED: auto-fit + justify-content:center so Location page cards center instead of sticking left */ .loc-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; justify-content: center; } .loc-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 30px 24px; text-align: center; transition: all 0.35s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); animation: cardFadeUp 0.6s ease both; } .loc-card:nth-child(1) { animation-delay: 0.05s; } .loc-card:nth-child(2) { animation-delay: 0.15s; } .loc-card:nth-child(3) { animation-delay: 0.25s; } .loc-card:nth-child(4) { animation-delay: 0.35s; } .loc-card:hover { border-color: var(--green-light); transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 28px rgba(26, 122, 60, 0.16); } /* NEW: icon bounce on card hover */ .loc-card:hover .loc-icon { transform: scale(1.15) rotate(-6deg); } .loc-icon { width: 58px; height: 58px; border-radius: 50%; background: rgba(26, 122, 60, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: var(--green); transition: transform 0.3s ease; } .loc-card h3 { font-family: "Bebas Neue", sans-serif; font-size: 26px; letter-spacing: 1px; color: var(--black); margin-bottom: 7px; } .loc-card p { font-size: 13px; color: var(--muted); margin-bottom: 16px; font-weight: 400; } .loc-btn { display: inline-flex; align-items: center; gap: 7px; background: #25d366; color: #fff; padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; } .loc-btn:hover { background: #1fba5a; } /* ABOUT */ .about-us { background: #fff; } .about-wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .about-text h2 { font-family: "Bebas Neue", sans-serif; font-size: clamp(30px, 3.5vw, 42px); letter-spacing: 1px; color: var(--black); margin-bottom: 18px; line-height: 1.1; } .about-text h2 span { color: var(--orange); } .about-text p { color: var(--muted); margin-bottom: 12px; font-size: 14.5px; font-weight: 400; } .about-img img { width: 100%; border-radius: 14px; display: block; } /* CUSTOMERS */ .happiest-customers { background: var(--section-alt); } .cust-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .cust-card { aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; border: 1px solid var(--border); transition: all 0.3s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .cust-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18); border-color: rgba(232, 114, 12, 0.4); } .cust-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .cust-card:hover img { transform: scale(1.1); } .cust-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100% ); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; text-align: center; } .cust-name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.4px; } .cust-tag { font-size: 12px; color: var(--orange); font-weight: 600; margin-top: 3px; } /* CONTACT */ .contact-section { background: var(--page-bg); } .contact-wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; } .contact-info-box, .contact-form-box { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 34px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } .contact-info-box h3, .contact-form-box h3 { font-family: "Bebas Neue", sans-serif; font-size: 28px; letter-spacing: 1px; color: var(--black); margin-bottom: 24px; } .c-item { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; } .c-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(232, 114, 12, 0.08); display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 16px; flex-shrink: 0; } .c-item h4 { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .c-item p, .c-item a { font-size: 14px; color: var(--text); text-decoration: none; } .c-item a:hover { color: var(--orange); } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; letter-spacing: 0.3px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px 13px; border: 1px solid #dde5e0; border-radius: 8px; background: #fafcfb; color: var(--text); font-size: 14px; font-family: "Outfit", sans-serif; transition: border-color 0.2s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 122, 60, 0.08); } .form-group select option { background: #fff; color: var(--text); } .form-group textarea { resize: vertical; min-height: 90px; } .submit-btn { width: 100%; background: var(--green); color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: "Outfit", sans-serif; transition: all 0.25s; display: flex; align-items: center; justify-content: center; gap: 8px; } .submit-btn:hover { background: var(--green-mid); transform: translateY(-1px); } /* MAP */ .map-section { background: var(--section-alt); padding: 0 20px 60px; } .map-wrap { max-width: 1100px; margin: 0 auto; } .map-section iframe { width: 100%; height: 380px; border-radius: 14px; border: 1px solid var(--border); display: block; } /* INNER HERO */ .inner-hero { height: clamp(180px, 28vw, 260px); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; } .inner-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .inner-hero-content { position: relative; z-index: 1; padding: 0 20px; } .inner-hero h1 { font-family: "Bebas Neue", sans-serif; font-size: clamp(34px, 5vw, 50px); letter-spacing: 2px; color: #fff; } .inner-hero p { font-size: 15px; color: rgba(255, 255, 255, 0.75); margin-top: 7px; font-weight: 300; } /* FOOTER */ footer { background: #0f2318; border-top: 3px solid var(--green); padding: 52px 20px 20px; } .foot-wrap { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1.4fr 1.5fr; gap: 40px; margin-bottom: 36px; } /* ===== NEW: FAQ SECTION (AEO) ===== */ .faq-section { max-width: 900px; margin: 0 auto; padding: 20px 20px 70px; } .faq-wrap { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; transition: box-shadow 0.2s; } .faq-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } .faq-item summary { font-weight: 600; font-size: 15.5px; color: var(--black); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "\002B"; font-size: 20px; color: var(--orange); flex-shrink: 0; transition: transform 0.2s; } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.65; } /* ===== NEW: Dark mode overrides for hardcoded backgrounds ===== */ html[data-theme="dark"] nav { background: rgba(15, 19, 21, 0.95); } html[data-theme="dark"] .drawer-panel, html[data-theme="dark"] .tab-btn, html[data-theme="dark"] .cat-card, html[data-theme="dark"] .feat-card, html[data-theme="dark"] .loc-card, html[data-theme="dark"] .about-us, html[data-theme="dark"] .contact-info-box, html[data-theme="dark"] .contact-form-box, html[data-theme="dark"] .clients-strip, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .cust-card { background: var(--card-bg); } html[data-theme="dark"] .form-group input, html[data-theme="dark"] .form-group textarea, html[data-theme="dark"] .form-group select, html[data-theme="dark"] .form-group select option { background: var(--section-alt); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .ann-btn.email { background: var(--card-bg); } /* ===== FIX FOOTER SOCIAL ICONS ALIGNMENT ===== */ .social-links { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 18px !important; } .social-links a { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; padding: 0 !important; line-height: 1 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; } .social-links a i { font-size: 18px !important; line-height: 1 !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; transition: transform 0.3s ease !important; } .social-links a:hover { transform: translateY(-4px) scale(1.08) !important; border-color: transparent !important; } .social-links a.social-ig:hover { background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ) !important; box-shadow: 0 6px 20px rgba(214, 36, 159, 0.45) !important; } .social-links a.social-fb:hover { background: #1877f2 !important; box-shadow: 0 6px 20px rgba(24, 119, 242, 0.45) !important; } .social-links a.social-yt:hover { background: #ff0000 !important; box-shadow: 0 6px 20px rgba(255, 0, 0, 0.45) !important; } /* Mobile Responsive adjustment */ @media (max-width: 480px) { .social-links { gap: 10px !important; } .social-links a { width: 38px !important; height: 38px !important; } .social-links a i { font-size: 16px !important; } } .foot-social { display: flex; gap: 12px; margin-top: 8px; } .foot-col h4 { font-family: "Bebas Neue", sans-serif; font-size: 18px; letter-spacing: 1px; color: var(--orange); margin-bottom: 16px; } .foot-col p, .foot-col a { font-size: 13px; color: rgba(255, 255, 255, 0.6); text-decoration: none; display: block; margin-bottom: 7px; font-weight: 300; transition: color 0.2s; } .foot-col a:hover { color: var(--orange); } .foot-view-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--orange) !important; font-weight: 600 !important; font-size: 13px !important; } .foot-view-more:hover { color: #fff !important; } .foot-logo { font-family: "Bebas Neue", sans-serif; font-size: 22px; letter-spacing: 1.5px; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .foot-logo i { color: var(--orange); } /* CHANGED: flex layout so copyright sits left and credit link sits right */ .foot-bottom { max-width: 1280px; margin: 0 auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.35); } .foot-bottom .made-by { text-align: right; } .foot-bottom .made-by a { color: var(--orange); font-weight: 600; text-decoration: none; transition: color 0.2s; } .foot-bottom .made-by a:hover { color: #fff; text-decoration: underline; } /* FLOATING BUTTONS — safe above Android nav bar & iPhone home indicator */ .float-wa { position: fixed; bottom: 90px; right: 20px; background: #25d366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45); z-index: 9999; text-decoration: none; transition: transform 0.3s; } .float-wa:hover { transform: scale(1.1); } .float-call { position: fixed; bottom: 160px; right: 20px; background: var(--orange); color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 9999; text-decoration: none; animation: pulse 2.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 114, 12, 0.6); } 70% { box-shadow: 0 0 0 13px rgba(232, 114, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 114, 12, 0); } } /* iOS safe area support */ @supports (bottom: env(safe-area-inset-bottom)) { .float-wa { bottom: calc(env(safe-area-inset-bottom) + 90px); } .float-call { bottom: calc(env(safe-area-inset-bottom) + 160px); } } /* CLIENTS STRIP */ .clients-strip { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; display: flex; align-items: center; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .clients-label { flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--green); padding: 0 20px 0 24px; border-right: 1px solid var(--border); white-space: nowrap; } .clients-track-wrap { flex: 1; overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .clients-track { display: flex; gap: 0; width: max-content; animation: marquee 28s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .client-logo { display: flex; align-items: center; gap: 8px; padding: 6px 28px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; border-right: 1px solid var(--border); transition: color 0.2s; } .client-logo:hover { color: var(--green); } .client-logo i { color: var(--orange); font-size: 14px; } /* RESPONSIVE - Tablet ≤1024 */ @media (max-width: 1024px) { .foot-wrap { grid-template-columns: 1fr 1fr; gap: 28px; } .cat-grid { grid-template-columns: 1fr; } } /* Tablet ≤768 */ @media (max-width: 768px) { .mob-btn { display: flex; } .nav-links { display: none !important; } section { padding: 48px 16px; } .about-wrap { grid-template-columns: 1fr; } .contact-wrap { grid-template-columns: 1fr; } .scrap-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .cust-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .features-grid { grid-template-columns: repeat(2, 1fr); } .tab-btn { font-size: 12.5px; padding: 8px 14px; } } /* Mobile ≤480 */ @media (max-width: 480px) { .ann-bar { font-size: 12px; padding: 8px 44px 8px 12px; } .ann-btn { font-size: 11px; padding: 4px 10px; } .logo { font-size: 20px; } .cat-card { flex-direction: column; min-height: auto; } .cat-img { width: 100%; height: 180px; } .foot-wrap { grid-template-columns: 1fr; gap: 24px; } .scrap-grid { grid-template-columns: 1fr 1fr; } .cust-grid { grid-template-columns: 1fr 1fr; } .loc-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr 1fr; } .float-wa { width: 52px; height: 52px; right: 14px; font-size: 23px; bottom: 90px; } .float-call { width: 52px; height: 52px; right: 14px; font-size: 20px; bottom: 158px; } } /* =================================================================== IN-APP BROWSER & WEBVIEW RESPONSIVE LAYOUT FIX (Added by Claude) Fixes layout collapse inside Google Maps / Search / WhatsApp WebViews where images expand to native resolution and break grid/flex layouts. These rules are appended at the end of the file so they override earlier conflicting rules via source order + !important. =================================================================== */ /* 1. Global Image Constraints */ img { max-width: 100% !important; height: auto !important; box-sizing: border-box !important; } /* 2. Hero Slider Height & Typography Stability */ .hero { min-height: 380px !important; height: 52vh !important; max-height: 500px !important; position: relative !important; overflow: hidden !important; } .slide-content { width: 100% !important; max-width: 800px !important; box-sizing: border-box !important; padding: 20px 16px !important; } .slide-content h1 { font-size: clamp(24px, 5vw, 48px) !important; color: #ffffff !important; /* Forces pure white in all theme modes */ word-break: break-word !important; line-height: 1.1 !important; } /* 3. Category Grid & Card Layout Fixes for WebViews */ .cat-grid { display: flex !important; flex-direction: column !important; gap: 18px !important; width: 100% !important; } .cat-card { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: auto !important; background: var(--card-bg) !important; overflow: hidden !important; box-sizing: border-box !important; } .cat-img { width: 100% !important; height: 200px !important; flex-shrink: 0 !important; overflow: hidden !important; } .cat-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .cat-body { width: 100% !important; padding: 16px !important; box-sizing: border-box !important; } /* 4. Global Overflow & Text-Size Scaling Resets */ html, body { overflow-x: hidden !important; width: 100% !important; -webkit-text-size-adjust: 100% !important; }