/* Aishi Distributor Website - Main Stylesheet */
:root {
    --primary-color: #0072ce;
    --secondary-color: #f8f9fa;
    --accent-color: #dd6b20;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-light: #718096;
    --border-color: #e2e8f0;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --font-size-base: 1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --border-radius-md: 12px;
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-base); line-height: 1.6; color: var(--text-primary); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
.header-top { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-lg) 0; border-bottom: 1px solid var(--border-color); }
.logo h1 { font-size: var(--font-size-2xl); color: var(--primary-color); }
.logo p { font-size: 0.875rem; color: var(--text-light); }
.contact-info { display: flex; gap: var(--spacing-lg); }
.contact-link { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.contact-link:hover { color: var(--primary-color); }
nav ul { display: flex; list-style: none; gap: var(--spacing-lg); padding: var(--spacing-md) 0; }
nav ul li a { color: var(--text-primary); text-decoration: none; font-weight: 500; padding: 8px 16px; border-radius: 4px; transition: all 0.3s ease; }
nav ul li a:hover, nav ul li a.active { color: var(--primary-color); background-color: var(--secondary-color); }
.hero-banner { background: linear-gradient(135deg, var(--primary-color), #005a9e); color: white; padding: 6rem 0; text-align: center; }
.hero-banner h2 { font-size: var(--font-size-3xl); margin-bottom: 1rem; }
.hero-banner p { font-size: var(--font-size-xl); margin-bottom: 2rem; opacity: 0.9; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; }
.btn { display: inline-block; padding: 12px 28px; border-radius: 4px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.btn-primary { background-color: var(--accent-color); color: white; }
.btn-primary:hover { background-color: #c05616; transform: translateY(-2px); }
.btn-secondary { border: 2px solid white; color: white; }
.btn-secondary:hover { background-color: white; color: var(--primary-color); transform: translateY(-2px); }
.page-header { background: var(--secondary-color); padding: 4rem 0; text-align: center; }
.page-header h1 { color: var(--primary-color); font-size: var(--font-size-3xl); margin-bottom: 0.5rem; }
.page-header p { color: var(--text-secondary); font-size: var(--font-size-xl); }
.hamburger { display: none; flex-direction: column; cursor: pointer; padding: 5px; }
.hamburger span { width: 25px; height: 3px; background-color: var(--text-secondary); margin: 3px 0; transition: 0.3s; }
@media (max-width: 768px) {
    .hamburger { display: flex; }
    nav ul { display: none; }
    nav ul.show { display: block; padding: 10px 0; }
    .header-top { flex-direction: column; gap: var(--spacing-md); }
    .contact-info { flex-direction: column; gap: var(--spacing-sm); }
    .hero-banner h2 { font-size: var(--font-size-2xl); }
    .cta-buttons { flex-direction: column; align-items: center; }
}