html body .entry-content > div:nth-of-type(3) { position: relative !important; padding-top: 84px !important; }
html body .entry-content > div:nth-of-type(3)::before { content: "TRUSTED NORTH JERSEY ROOFER • EST. 2003" !important; position: absolute !important; top: 18px !important; left: 50% !important; transform: translateX(-50%) !important; background: linear-gradient(90deg, rgb(193, 39, 45), rgb(232, 78, 78)) !important; color: rgb(255, 255, 255) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2px !important; padding: 9px 26px !important; border-radius: 999px !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 10px !important; white-space: nowrap !important; z-index: 2 !important; font-family: inherit !important; }
@media (max-width: 921px) {
html body .entry-content > div:nth-of-type(3) { padding-top: 72px !important; }
html body .entry-content > div:nth-of-type(3)::before { font-size: 11px !important; letter-spacing: 1.5px !important; padding: 7px 18px !important; top: 14px !important; }
}
html body.page-id-17 .entry-content { text-align: center !important; }
html body.page-id-17 .entry-content > p:first-child { font-size: 1.05rem !important; color: rgb(74, 85, 104) !important; max-width: 640px !important; margin: 0px auto 24px !important; }
html body.page-id-17 .wp-block-site-logo { margin: 0px auto 16px !important; }
html body.page-id-17 .wp-block-site-logo img { max-width: 260px !important; height: auto !important; }
html body.page-id-17 h2.wp-block-heading { font-size: 2rem !important; color: rgb(15, 30, 53) !important; margin: 8px auto 28px !important; position: relative !important; display: inline-block !important; padding-bottom: 10px !important; }
html body.page-id-17 h2.wp-block-heading::after { content: "" !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; bottom: 0px !important; width: 80px !important; height: 3px !important; background: rgb(198, 40, 40) !important; border-radius: 2px !important; }
html body.page-id-17 .srfm-form-container { max-width: 640px !important; margin: 0px auto !important; background: rgb(255, 255, 255) !important; padding: 32px 28px !important; border-radius: 14px !important; box-shadow: rgba(15, 30, 53, 0.12) 0px 8px 28px !important; border: 1px solid rgb(230, 234, 240) !important; text-align: left !important; }
html body.page-id-17 .srfm-form input[type="text"], html body.page-id-17 .srfm-form input[type="email"], html body.page-id-17 .srfm-form input[type="tel"], html body.page-id-17 .srfm-form input[type="number"], html body.page-id-17 .srfm-form textarea, html body.page-id-17 .srfm-form select { width: 100% !important; padding: 12px 14px !important; border: 1.5px solid rgb(207, 214, 224) !important; border-radius: 8px !important; font-size: 1rem !important; background: rgb(248, 250, 252) !important; transition: border-color 0.2s, box-shadow 0.2s !important; }
html body.page-id-17 .srfm-form input:focus, html body.page-id-17 .srfm-form textarea:focus, html body.page-id-17 .srfm-form select:focus { border-color: rgb(15, 30, 53) !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(15, 30, 53, 0.12) 0px 0px 0px 3px !important; outline: none !important; }
html body.page-id-17 .srfm-form label, html body.page-id-17 .srfm-block-wrap label { font-weight: 600 !important; color: rgb(15, 30, 53) !important; margin-bottom: 6px !important; display: inline-block !important; }
html body.page-id-17 .srfm-form button[type="submit"], html body.page-id-17 .srfm-form .srfm-button, html body.page-id-17 .srfm-submit-btn { background: rgb(198, 40, 40) !important; color: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; padding: 14px 28px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 1.05rem !important; letter-spacing: 0.5px !important; cursor: pointer !important; transition: transform 0.15s, background 0.2s, box-shadow 0.2s !important; box-shadow: rgba(198, 40, 40, 0.3) 0px 4px 14px !important; }
html body.page-id-17 .srfm-form button[type="submit"]:hover { background: rgb(167, 31, 31) !important; transform: translateY(-1px) !important; box-shadow: rgba(198, 40, 40, 0.4) 0px 6px 18px !important; }
html body.page-id-17 .srfm-block { margin-bottom: 16px !important; }
html body.page-id-17 .wp-block-group.is-layout-constrained { padding: 20px 16px 40px !important; }
html body.page-id-17 .gaby-contact-strip { background: linear-gradient(135deg, rgb(15, 23, 42) 0%, rgb(19, 29, 59) 100%) !important; color: rgb(255, 255, 255) !important; padding: 12px 18px !important; border-radius: 10px !important; max-width: 460px !important; margin: 0px auto 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 7px !important; text-align: center !important; font-family: inherit !important; border: 1px solid rgba(0, 103, 255, 0.35) !important; box-shadow: rgba(15, 23, 42, 0.25) 0px 4px 16px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset !important; }
html body.page-id-17 .gaby-contact-strip .gcs-line { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; color: rgb(255, 255, 255) !important; text-decoration: none !important; font-size: 0.93rem !important; font-weight: 600 !important; letter-spacing: 0.2px !important; line-height: 1.25 !important; }
html body.page-id-17 .gaby-contact-strip a.gcs-line { transition: color 0.15s; color: rgb(255, 255, 255) !important; }
html body.page-id-17 .gaby-contact-strip a.gcs-line:hover { color: rgb(0, 103, 255) !important; }
html body.page-id-17 .gaby-contact-strip a.gcs-line:hover .gcs-ico { color: rgb(0, 103, 255) !important; fill: rgb(0, 103, 255) !important; }
html body.page-id-17 .gaby-contact-strip .gcs-ico { flex-shrink: 0; width: 18px; height: 18px; color: rgb(255, 255, 255); fill: rgb(255, 255, 255); }
html body.page-id-17 .gaby-contact-strip .gcs-line span { overflow-wrap: anywhere; word-break: break-word; }
html body.page-id-17 .entry-content > .gaby-contact-strip { padding-top: 12px !important; margin-top: -30px !important; }
@media (max-width: 640px) {
html body.page-id-17 .gaby-contact-strip { padding: 11px 14px !important; gap: 6px !important; margin: 0px auto 16px !important; max-width: 92% !important; border-radius: 8px !important; }
html body.page-id-17 .gaby-contact-strip .gcs-line { font-size: 0.84rem !important; gap: 8px !important; }
html body.page-id-17 .gaby-contact-strip .gcs-ico { width: 16px; height: 16px; }
html body.page-id-17 .entry-content > .gaby-contact-strip { padding-top: 10px !important; margin-top: -22px !important; }
}
html body.page-id-17 h2.wp-block-heading { font-weight: 800 !important; text-align: center !important; }
html body.page-id-17 .entry-content .wp-block-site-logo img, html body.page-id-17 .entry-content figure.wp-block-site-logo img { width: 520px !important; max-width: 100% !important; height: auto !important; }
html body.page-id-17 .entry-content .wp-block-site-logo { max-width: 520px !important; margin-left: auto !important; margin-right: auto !important; }
html body.page-id-17 .entry-content > p.has-text-align-center:first-of-type, html body.page-id-17 .entry-content > p:first-of-type { font-size: 17px !important; line-height: 1.5 !important; max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; }
@media (max-width: 921px) {
html body.page-id-17 .entry-content > p.has-text-align-center:first-of-type, html body.page-id-17 .entry-content > p:first-of-type { font-size: 14px !important; }
}
html body.page-id-17 .srfm-submit-container, html body.page-id-17 .srfm-submit-container .wp-block-button { text-align: center !important; display: block !important; width: 100% !important; }
html body.page-id-17 .srfm-submit-container .wp-block-button .srfm-submit-button { display: inline-block !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
@media (max-width: 767px) {
html body.page-id-17 .entry-content p.has-text-align-center strong { font-size: 0px !important; line-height: 0 !important; }
html body.page-id-17 .entry-content p.has-text-align-center strong::before { content: "Reach out for a free roofing or siding estimate:\a call, email, or fill out the form below\a and a member of the Gaby Roofing team\a will get back to you the same day." !important; white-space: pre-line !important; font-size: 15px !important; line-height: 1.4 !important; display: block !important; font-weight: bold !important; }
}
html body.page-id-17 .entry-content > p.has-text-align-center:first-of-type, html body.page-id-17 .entry-content > p:first-of-type { font-size: clamp(21px, 1.55vw, 25px) !important; line-height: 1.55 !important; max-width: 800px !important; margin: 42px auto 28px !important; }
@media (max-width: 768px) {
body.page-id-17 .entry-content { display: flex; flex-direction: column; }
body.page-id-17 .entry-content > .wp-block-group { display: contents; }
body.page-id-17 .entry-content > p:first-of-type, body.page-id-17 .entry-content > p.has-text-align-center:first-of-type { order: 4; margin-top: 24px !important; }
body.page-id-17 .entry-content .wp-block-group > h2.wp-block-heading { order: 1; }
body.page-id-17 .entry-content .wp-block-group > .srfm-form-container { order: 2; }
body.page-id-17 .entry-content .wp-block-group > .wp-block-site-logo { order: 3; margin-top: 12px !important; margin-bottom: 0px !important; }
}
html body.page-id-17 .entry-content > p.has-text-align-center:first-of-type, html body.page-id-17 .entry-content > p:first-of-type { text-wrap: balance; hyphens: none; word-break: normal; overflow-wrap: break-word; }
@media (max-width: 921px) {
html body.page-id-17 .entry-content > .wp-block-spacer { order: 3 !important; }
html body.page-id-17 .entry-content > div.gaby-contact-strip { order: 4 !important; }
html body.page-id-17 .entry-content > p.has-text-align-center { order: 5 !important; }
}
html body .entry-content > div:nth-of-type(3) { background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0px 0px / 26px 26px, radial-gradient(70% 55% at 50% 38%, rgba(193, 39, 45, 0.06) 0%, transparent 70%), linear-gradient(rgb(13, 28, 51) 0%, rgb(20, 42, 74) 30%, rgb(20, 42, 74) 70%, rgb(13, 28, 51) 100%) !important; }
.srfm-error-message { font-size: 0px !important; line-height: 1 !important; }
.srfm-error-message::before { content: attr(data-error-msg); font-size: 0.875rem; line-height: 1.4; color: inherit; }