.section { padding: 80px 24px; background: #ffffff; } .container { max-width: 900px; margin: 0 auto; } .inner { background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 60%, #1b4332 100%); border-radius: 28px; padding: 48px 64px; text-align: center; position: relative; overflow: hidden; } /* Background dots */ .inner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } /* Gold glow */ .inner::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(212, 160, 23, 0.2) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .decorLeaf { font-size: 2.5rem; display: block; margin-bottom: 16px; opacity: 0.7; position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-cursive), cursive; font-size: 1.15rem; color: #d4a017; margin-bottom: 14px; position: relative; z-index: 1; } .title { font-family: var(--font-playfair), Georgia, serif; font-size: clamp(1.875rem, 3.5vw, 2.75rem); font-weight: 700; color: #ffffff; line-height: 1.2; margin: 0 0 20px; position: relative; z-index: 1; } .title em { font-style: italic; color: #d4a017; } .body { font-family: var(--font-inter), sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.78); line-height: 1.75; max-width: 560px; margin: 0 auto 40px; position: relative; z-index: 1; } .actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 0; position: relative; z-index: 1; } .btnPrimary { display: inline-block; background: #d4a017; color: #1b4332; font-family: var(--font-inter), sans-serif; font-size: 0.9375rem; font-weight: 700; padding: 14px 32px; border-radius: 50px; text-decoration: none; transition: background 0.2s, transform 0.2s; letter-spacing: 0.02em; } .btnPrimary:hover { background: #e8b520; transform: translateY(-2px); } .btnSecondary { display: inline-block; background: transparent; color: #ffffff; font-family: var(--font-inter), sans-serif; font-size: 0.9375rem; font-weight: 600; padding: 14px 32px; border-radius: 50px; text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.4); transition: border-color 0.2s, background 0.2s, transform 0.2s; letter-spacing: 0.02em; } .btnSecondary:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } /* Hours strip */ .hours { display: flex; justify-content: center; align-items: center; gap: 32px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.15); position: relative; z-index: 1; flex-wrap: wrap; } .hourItem { display: flex; align-items: center; gap: 10px; } .hourIcon { font-size: 1.25rem; opacity: 0.7; } .hourItem strong { display: block; font-family: var(--font-inter), sans-serif; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; letter-spacing: 0.05em; } .hourItem span { font-family: var(--font-inter), sans-serif; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); } .hourDivider { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.15); } @media (max-width: 768px) { .inner { padding: 48px 28px; } .hourDivider { display: none; } .hours { gap: 20px; } } @media (max-width: 480px) { .section { padding: 80px 16px; } .actions { flex-direction: column; align-items: center; } .btnPrimary, .btnSecondary { width: 100%; max-width: 280px; text-align: center; } } @media (max-width: 767px) { .section { padding: 40px 24px; } } .eyebrowIcon { font-size: 1.2rem; font-style: normal; font-family: var(--font-inter), sans-serif; }