.section { padding: 80px 24px; background: #f9fafb; } .container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 72px; align-items: center; } /* Left */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-cursive), cursive; font-size: 1.15rem; color: #d4a017; margin-bottom: 14px; } .title { font-family: var(--font-playfair), Georgia, serif; font-size: clamp(1.875rem, 2.8vw, 2.625rem); font-weight: 700; color: #1b4332; line-height: 1.2; margin: 0 0 20px; } .title em { font-style: italic; color: #2d6a4f; } .body { font-family: var(--font-inter), sans-serif; font-size: 0.9375rem; color: #6b7280; line-height: 1.8; margin: 0 0 36px; max-width: 460px; } .actions { display: flex; gap: 14px; flex-wrap: wrap; } .btnPrimary { display: inline-block; background: #1b4332; color: #ffffff; font-family: var(--font-inter), sans-serif; font-size: 0.9375rem; font-weight: 600; padding: 13px 30px; border-radius: 50px; text-decoration: none; transition: background 0.2s, transform 0.2s; } .btnPrimary:hover { background: #2d6a4f; transform: translateY(-2px); } .btnSecondary { display: inline-block; background: transparent; color: #1b4332; font-family: var(--font-inter), sans-serif; font-size: 0.9375rem; font-weight: 600; padding: 13px 30px; border-radius: 50px; text-decoration: none; border: 2px solid #1b4332; transition: background 0.2s, color 0.2s, transform 0.2s; } .btnSecondary:hover { background: #1b4332; color: #ffffff; transform: translateY(-2px); } /* Right column */ .right { display: flex; flex-direction: column; gap: 20px; } /* Quick links card */ .card { background: #ffffff; border: 1.5px solid #e5e7eb; border-radius: 18px; padding: 28px 32px; } .cardTitle { font-family: var(--font-inter), sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; margin: 0 0 18px; } .links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .links li a { display: flex; align-items: center; gap: 10px; font-family: var(--font-inter), sans-serif; font-size: 0.9375rem; font-weight: 500; color: #1b4332; text-decoration: none; padding: 10px 12px; border-radius: 10px; transition: background 0.15s, color 0.15s; } .links li a:hover { background: #f0faf4; color: #2d6a4f; } .links li a span { font-size: 1.125rem; width: 28px; text-align: center; } /* Contact card */ .contactCard { background: #1b4332; border-radius: 18px; padding: 24px 32px; text-align: center; } .contactLabel { font-family: var(--font-inter), sans-serif; font-size: 0.8125rem; color: rgba(255,255,255,0.6); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.06em; } .phone { display: block; font-family: var(--font-playfair), Georgia, serif; font-size: 1.625rem; font-weight: 700; color: #d4a017; text-decoration: none; margin-bottom: 6px; transition: color 0.2s; } .phone:hover { color: #e8b520; } .contactSub { font-family: var(--font-inter), sans-serif; font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin: 0; } @media (max-width: 1024px) { .container { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 640px) { .section { padding: 80px 20px; } .actions { flex-direction: column; } .btnPrimary, .btnSecondary { 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; }