*{ margin:0; padding:0; box-sizing:border-box; font-family:Arial, sans-serif; } body{ background:#0B0B0B; color:#F5F5F5; scroll-behavior:smooth; } .navbar{ display:flex; justify-content:space-between; align-items:center; padding:20px; position:fixed; width:100%; background:#0B0B0B; border-bottom:1px solid #1C1C1C; z-index:1000; } .logo{ font-size:22px; font-weight:bold; } .logo span{ color:#FF4D1C; } .nav-links{ display:flex; gap:20px; list-style:none; } .nav-links a{ color:#fff; text-decoration:none; } .hamburger{ display:none; font-size:26px; cursor:pointer; } .hero{ height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438') center/cover; } .hero h1{ font-size:50px; } .hero p{ margin:10px 0; color:#FF4D1C; } .hero-buttons button, .hero-buttons a{ padding:10px 20px; margin:10px; border:none; cursor:pointer; background:#FF4D1C; color:#fff; text-decoration:none; } .section{ padding:80px 20px; text-align:center; } .dark{ background:#1C1C1C; } .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:30px; } .card{ background:#0B0B0B; padding:20px; border:1px solid #333; transition:0.3s; } .card:hover{ transform:scale(1.05); border-color:#FF4D1C; } .price.highlight{ border:2px solid #FF4D1C; } form{ display:flex; flex-direction:column; gap:10px; max-width:400px; margin:auto; } input,select,textarea{ padding:10px; background:#0B0B0B; border:1px solid #333; color:#fff; } button{ background:#FF4D1C; padding:10px; border:none; cursor:pointer; color:#fff; } footer{ text-align:center; padding:20px; border-top:1px solid #333; } .modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; } .modal-box{ background:#1C1C1C; padding:30px; width:300px; } .close{ float:right; cursor:pointer; } @media(max-width:768px){ .nav-links{ display:none; flex-direction:column; background:#0B0B0B; position:absolute; top:60px; right:0; width:200px; padding:20px; } .hamburger{ display:block; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: hidden; } .container, .section, main { max-width: 100%; } @media (max-width: 768px) { .btn, .nav-links a, .nav-pills a { min-height: 44px; align-items: center; } .section { padding-block: 3rem; } .form-panel, .form-card, .form-elegant, .inquiry-float { padding: 1.25rem; } .inquiry-sidebar { padding: 2rem 1.25rem; } .form-area { padding: 2rem 1.25rem; } .hero-split { min-height: auto; } .hero-panel { padding: 2.5rem 0; } .hero-visual { min-height: 40vh; } .hero-center { min-height: auto; padding: 6rem 0 2.5rem; } .hero-portal { min-height: auto; padding-bottom: 2rem; } .hero-top { padding-top: 3rem; } .hero-img-wrap img { height: 40vh; min-height: 220px; } .product-row--reverse .product-row-img, .product-row--reverse .product-row-body { order: unset; } .product-num { font-size: 2.5rem; } .stat-pill { min-width: calc(50% - 0.5rem); flex: 1 1 calc(50% - 0.5rem); } .nav-float { top: 0.5rem; } .page-wrap { padding-top: 4.75rem; } .tab-label { flex: 1 1 auto; text-align: center; border-radius: 8px !important; margin-bottom: 0.25rem; } .tab-row { gap: 0.35rem; } } @media (min-width: 1200px) { .container { width: min(100% - 3rem, var(--max)); } } .inquiry-form input, .inquiry-form select, .inquiry-form textarea { max-width: 100%; }