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:
maxWidth: 1280, paddingLeft: 72, paddingRight: 72, gap: 20fontSize: 50, lineHeight: 50, color: #F0F0EB, maxWidth: 832fontSize: 18, lineHeight: 27, color: #888888, maxWidth: 608-650gap: 16, paddingTop: 4.80minHeight: 48, paddingLeft: 32.33, paddingRight: 32.33, paddingTop: 12.33, paddingBottom: 12.33, background: #D96DFD, borderRadius: 1584 (pill), fontSize: 16, color: #191919outline: 1px #D96DFD solid, color: #D96DFDSections:
paddingTop: 100, paddingBottom: 100 (100px each)gap: 50 between elements in sectionSection Titles:
fontSize: 50, lineHeight: 44-52.80, color: #F0F0EBCards (solution cards):
width: 350, height: 120, padding: 24, background: #242424, borderRadius: 10fontSize: 18, lineHeight: 18, color: #F0F0EBfontSize: 14, lineHeight: 22.40, color: #888888Let 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:
#191919 background, #F0F0EB text, #888888 muted text)50px/50px (3.125rem), subtitle 18px/27px (1.125rem/1.6875rem), gap: 20px (1.25rem)padding: 100px (6.25rem) vertical, gap: 50px (3.125rem) between elementswidth: 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)background: #34243B, service items background: #242424padding: 80px (5rem), quote 50px/50px (3.125rem)width: 350px (21.875rem), padding: 24px (1.5rem), background: #242424You can send messages while the preview loads