I see the issue - the hero section has text-align: center but the container doesn't inherit that alignment for the subtitle. Let me add text-align: center to the subtitle:

Also need to center the h1:

Added text-align: center and margin: 0 auto to both .ac-hero__h1 and .ac-hero__sub to ensure they are properly centered within their container. The margin: 0 auto centers the elements horizontally when they have a max-width constraint.

Let me read more of this file to get all the styling values:

Now I have the exact values from the design file. Let me extract the key CSS values:

Hero:

• Container: maxWidth: 1280, paddingLeft: 72, paddingRight: 72, gap: 20
• Title: fontSize: 50, lineHeight: 50, color: #F0F0EB, maxWidth: 832
• Subtitle: fontSize: 18, lineHeight: 27, color: #888888, maxWidth: 608-650
• Buttons container: gap: 16, paddingTop: 4.80
• Primary button: minHeight: 48, paddingLeft: 32.33, paddingRight: 32.33, paddingTop: 12.33, paddingBottom: 12.33, background: #D96DFD, borderRadius: 1584 (pill), fontSize: 16, color: #191919
• Secondary button: Same padding, outline: 1px #D96DFD solid, color: #D96DFD

Sections:

• paddingTop: 100, paddingBottom: 100 (100px each)
• gap: 50 between elements in section

Section Titles:

• fontSize: 50, lineHeight: 44-52.80, color: #F0F0EB

Cards (solution cards):

• width: 350, height: 120, padding: 24, background: #242424, borderRadius: 10
• Title: fontSize: 18, lineHeight: 18, color: #F0F0EB
• Text: fontSize: 14, lineHeight: 22.40, color: #888888

Let me update the CSS with these exact values:

Now let me update the CSS with the exact values from the design file:

Now let me update the buttons and cards to match the exact design specs:

Now let me update the cards to match the design (width: 350px = 21.875rem, height: 120px = 7.5rem, padding: 24px = 1.5rem):

Now let me update the replacement visual and other sections:

Now let me also update the timeline steps to match the design (width: 350, padding: 24, background: #242424):

Now let me also update the testimonial to match the design specs:

Updated the CSS to exactly match the design file specifications. Key changes include:

• Colors: Updated to exact design colors (#191919 background, #F0F0EB text, #888888 muted text)
• Hero: Title 50px/50px (3.125rem), subtitle 18px/27px (1.125rem/1.6875rem), gap: 20px (1.25rem)
• Sections: padding: 100px (6.25rem) vertical, gap: 50px (3.125rem) between elements
• Cards: width: 350px (21.875rem), min-height: 120px (7.5rem), padding: 24px (1.5rem), background: #242424, title 18px/18px, text 14px/22.4px (0.875rem/1.4rem)
• Replacement visual: Shaped box background: #34243B, service items background: #242424
• Testimonial: padding: 80px (5rem), quote 50px/50px (3.125rem)
• Timeline steps: width: 350px (21.875rem), padding: 24px (1.5rem), background: #242424