.gfd-hero { background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(139, 58, 139, 0.4) 50%, rgba(0, 0, 0, 0.3) 100%), url('https://243485664.fs1.hubspotusercontent-na2.net/hubfs/243485664/Social%20media%20desk.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--gfd-white); padding: 140px 0 120px; text-align: left; position: relative; } .gfd-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%); z-index: 1; } .gfd-hero .gfd-container { position: relative; z-index: 2; max-width: 800px; } .gfd-hero h1 { font-size: 3.5rem; margin-bottom: 25px; font-weight: 800; line-height: 1.2; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .gfd-hero .subtitle { font-size: 1.8rem; margin-bottom: 20px; font-weight: 600; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .gfd-hero p { font-size: 1.2rem; max-width: 650px; margin: 0 0 40px; line-height: 1.7; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .gfd-hero .gfd-btn-primary { font-size: 1.2rem; padding: 18px 45px; box-shadow: 0 8px 25px rgba(255, 140, 0, 0.5); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } .gfd-hero .gfd-btn-primary:hover { box-shadow: 0 12px 35px rgba(255, 140, 0, 0.7); transform: translateY(-3px); } @media (max-width: 768px) { .gfd-hero { padding: 80px 0 70px; text-align: center; } .gfd-hero::before { background: rgba(0, 0, 0, 0.5); } .gfd-hero .gfd-container { max-width: 100%; } .gfd-hero h1 { font-size: 2.2rem; } .gfd-hero .subtitle { font-size: 1.3rem; } .gfd-hero p { font-size: 1.05rem; } .gfd-hero .gfd-btn-primary { font-size: 1.05rem; padding: 16px 35px; } }