.terms-hero { padding: var(--spacing-3xl) 0; background: var(--bg-primary); position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; } .terms-hero .breadcrumb-section { padding: 0; background: transparent; border-bottom: none; margin-top: 0; margin-bottom: var(--spacing-xl); position: relative; z-index: 2; } .terms-hero .breadcrumb-nav { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-p); color: var(--text-secondary); } .terms-hero .breadcrumb-nav a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } .terms-hero .breadcrumb-nav a:hover { color: var(--primary-hover); text-decoration: underline; } .terms-hero .breadcrumb-nav span { color: var(--text-muted); } .terms-hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto; width: 100%; } .terms-hero-title { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--spacing-xl); line-height: 1.2; } .terms-hero-description { font-size: var(--font-size-lg); color: var(--text-primary); line-height: 1.7; margin-bottom: var(--spacing-xl); } .last-updated { color: var(--text-secondary); font-size: var(--font-size-p); padding: var(--spacing-sm) var(--spacing-md); background: rgba(240, 185, 11, 0.1); border-radius: var(--border-radius-sm); border: 1px solid rgba(240, 185, 11, 0.2); display: inline-block; } .terms-content { padding: var(--spacing-3xl) 0; background: var(--bg-secondary); } .terms-text { max-width: 900px; margin: 0 auto; background: var(--bg-card); padding: var(--spacing-xl); border-radius: var(--border-radius-lg); border: 1px solid var(--gray-700); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .terms-text::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)); } .terms-text h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); border-left: 4px solid var(--primary-color); position: relative; line-height: 1.3; } .terms-text h2:first-child { margin-top: 0; } .terms-text h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-left: 3px solid var(--primary-color); line-height: 1.4; } .terms-text p { color: var(--text-primary); line-height: 1.8; margin-bottom: var(--spacing-lg); font-size: var(--font-size-p); } .terms-text ul { color: var(--text-primary); line-height: 1.8; margin-bottom: var(--spacing-lg); padding-left: var(--spacing-xl); border-left: 3px solid var(--primary-color); list-style: none; } .terms-text li { margin-bottom: var(--spacing-sm); position: relative; padding-left: var(--spacing-md); color: var(--text-primary); } .terms-text li::before { content: '✓'; color: var(--primary-color); font-weight: bold; position: absolute; left: 0; font-size: 1rem; } .terms-text strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); } .contact-info { background: rgba(240, 185, 11, 0.12); padding: var(--spacing-xl); border-radius: var(--border-radius-md); border: 1px solid rgba(240, 185, 11, 0.3); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); position: relative; box-shadow: 0 4px 15px rgba(240, 185, 11, 0.1); } .contact-info::before { content: '📞'; position: absolute; top: var(--spacing-lg); right: var(--spacing-lg); font-size: 2rem; opacity: 0.2; } .contact-info h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--spacing-md); margin-top: 0; padding: 0; background: transparent; border: none; } .contact-info p { margin-bottom: var(--spacing-md); color: var(--text-primary); font-size: var(--font-size-p); line-height: 1.7; } .contact-info p:last-child { margin-bottom: 0; } .contact-info a { color: var(--primary-color); text-decoration: none; font-weight: var(--font-weight-semibold); transition: color 0.3s ease; } .contact-info a:hover { color: var(--primary-hover); text-decoration: underline; } @media (max-width: 1024px) { .terms-text { max-width: 100%; margin: 0 var(--spacing-md); } .terms-hero .breadcrumb-section { margin-bottom: var(--spacing-lg); } .terms-hero .breadcrumb-nav { font-size: var(--font-size-sm); flex-wrap: wrap; } } @media (max-width: 768px) { .terms-hero { min-height: 50vh; padding: var(--spacing-lg) 0; } .terms-hero-title { font-size: var(--font-size-h2); } .terms-hero-description { font-size: var(--font-size-p); } .terms-text { padding: var(--spacing-lg); margin: 0 var(--spacing-sm); } .terms-text h2 { font-size: var(--font-size-h3); padding: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-xl); } .terms-text h3 { font-size: var(--font-size-h4); padding: var(--spacing-xs) var(--spacing-sm); } .terms-text ul { padding-left: var(--spacing-lg); } } @media (max-width: 480px) { .terms-hero { min-height: 45vh; padding: var(--spacing-md) 0; } .terms-content { padding: var(--spacing-lg) 0; } .terms-text { padding: var(--spacing-md); margin: 0 var(--spacing-xs); } .terms-text h2 { font-size: var(--font-size-h4); margin-top: var(--spacing-lg); padding: var(--spacing-sm); } .terms-text h3 { font-size: var(--font-size-p); font-weight: var(--font-weight-bold); } .terms-text p { font-size: var(--font-size-small); line-height: 1.7; } .terms-text ul { padding-left: var(--spacing-md); } .contact-info { padding: var(--spacing-md); } .contact-info h3 { font-size: var(--font-size-h4); } .contact-info::before { font-size: 1.5rem; top: var(--spacing-sm); right: var(--spacing-sm); } }