/* WCAG article page. Loads after the WordPress theme/Elementor stylesheets linked in index.html and reuses the live site's type, colors, gradients and button treatments. Page rules are scoped to .ar-*. */ /* ========================================================================== WordPress inline CSS The live site prints these blocks inline in (no file to link to), so they are reproduced here. Everything else is linked from the WordPress theme/plugin files in index.html. Source: www.webheadtech.com, 2026-10-08. ========================================================================== */ /* Webhead 2026 brand refresh */ :root{--wh-navy:#2b2d7e;--wh-cyan:#23c2dc;--wh-orange:#ff7a00;--wh-yellow:#e5cb1e;--wh-magenta:#ca1d5b;--wh-white:#fff}.elementor-location-footer{background-color:var(--wh-navy) !important}.elementor-location-footer .e-con,.elementor-location-footer .elementor-section{background-color:var(--wh-navy) !important}.elementor-location-footer a{color:var(--wh-white) !important;transition:color .2s ease !important}.elementor-location-footer a:hover{color:var(--wh-cyan) !important;text-decoration:none !important}.elementor-location-footer,.elementor-location-footer p,.elementor-location-footer span,.elementor-location-footer .elementor-heading-title{color:var(--wh-white) !important}.elementor-location-footer .elementor-button{background-color:var(--wh-orange) !important;border-color:var(--wh-orange) !important;color:var(--wh-white) !important}.elementor-location-footer .elementor-button:hover{background-color:#d6721c !important;border-color:#d6721c !important}.entry-content a,.elementor-widget-text-editor a,.elementor-widget-post-content a,article a:not(.elementor-button){color:var(--wh-cyan) !important;text-decoration:none;transition:color .2s ease !important}.entry-content a:hover,.elementor-widget-text-editor a:hover,article a:not(.elementor-button):hover{color:#1aa8bf !important}.elementor-button.elementor-button-outline,.elementor-button[style*=transparent],.wp-block-button.is-style-outline .wp-block-button__link{background-color:transparent !important;border:2px solid var(--wh-cyan) !important;color:var(--wh-cyan) !important}.elementor-button.elementor-button-outline:hover,.wp-block-button.is-style-outline .wp-block-button__link:hover{background-color:var(--wh-cyan) !important;color:var(--wh-white) !important}.entry-footer a,.read-more-link,.more-link,a.post-read-more,.elementor-post__read-more,.wp-block-read-more{color:var(--wh-cyan) !important;font-weight:600;text-decoration:none !important;transition:color .2s ease !important}.entry-footer a:hover,.read-more-link:hover,.more-link:hover,a.post-read-more:hover,.elementor-post__read-more:hover{color:var(--wh-orange) !important}.elementor-location-header,.elementor-location-header .e-con,.elementor-location-header>div>.e-con{background-color:var(--wh-white) !important}.elementor-widget-heading .elementor-heading-title[class*=eyebrow],.subtitle,span.category-label,.post-category{color:var(--wh-cyan) !important}.elementor-nav-menu a:hover,.elementor-nav-menu .current-menu-item>a{color:#fc3351 !important}.elementor-icon i,.elementor-icon svg{color:var(--wh-cyan) !important;fill:var(--wh-cyan) !important}.elementor-counter-number,.elementor-stat-number,.counter-number,[class*=stat] .number,[class*=counter] .number{color:var(--wh-yellow) !important}::selection{background-color:var(--wh-cyan) !important;color:var(--wh-white) !important}.wp-block-button__link,.wp-block-button .wp-block-button__link{background-color:var(--wh-orange) !important;color:var(--wh-white) !important;border-color:var(--wh-orange) !important}.wp-block-button__link:hover{background-color:#d6721c !important}.post-grid a.read-more,.blog-card a.read-more,.elementor-posts-grid .elementor-post__read-more,.elementor-posts .elementor-post__read-more{color:var(--wh-cyan) !important;font-weight:600}.elementor-posts-grid .elementor-post__read-more:hover,.elementor-posts .elementor-post__read-more:hover{color:var(--wh-orange) !important}.rs-btn,a.rs-btn,.rs-button .rs-btn,.rs-button.style1 .rs-btn{background-color:#f18221 !important;border-color:#f18221 !important;color:#fff !important}.rs-btn:hover,a.rs-btn:hover,.rs-button .rs-btn:hover{background-color:#d6721c !important;border-color:#d6721c !important;color:#fff !important}.elementor-element-540887de,#colophon .e-con-full,#colophon>div>div>div{background-color:#020924 !important}#colophon .rs-btn,#colophon a.rs-btn{color:#fff !important}.rev_slider_wrapper .rs-btn,.rev_slider .rs-btn,[data-alias=hero] .rs-btn{background-color:#f18221 !important;border-color:#f18221 !important;color:#fff !important}.sr7-btn,a.sr7-btn,.sr7-layer.sr7-btn{background-color:#f18221 !important;border-color:#f18221 !important;color:#fff !important}.sr7-btn:hover,a.sr7-btn:hover{background-color:#d6721c !important;border-color:#d6721c !important;color:#fff !important}.elementor-nav-menu a{transition:color .2s ease !important}.elementor-button-wrapper a,.elementor-button-content-wrapper{background-color:inherit}.blog-btn-part a,.blog-btn-part a .btn-txt,.post-btn a,.post-read-more a{background-color:#23c2dc !important;color:#fff !important;border-color:#23c2dc !important}.blog-btn-part a:hover,.post-btn a:hover,.post-read-more a:hover{background-color:#f18221 !important;border-color:#f18221 !important;color:#fff !important}.blog-btn-part a .btn-txt{color:inherit !important}#rs-header img,.rs-main-header img,header .elementor-widget-image img{height:40px !important;width:auto !important;max-width:none !important;object-fit:contain !important}a.hfe-menu-item{padding-top:16px !important;padding-bottom:16px !important}a.hfe-sub-menu-item{padding-top:12px !important;padding-bottom:12px !important} /* Theme dynamic CSS (techtlk) */ :root { /* Colors */ } /* Container Size */ /** * Body Typography */ /** * Heading Typography */ /* H1 Typography */ /* H2 Typography */ /* H3 Typography */ /* H4 Typography */ /* H5 Typography */ /* H6 Typography */ /* Start dynamic style for header section */ /* Start Dynamic Style for Primary Color */ /* Cost Calculator Start */ /* Cost Calculator End */ /* Start Woocommerce Color */ /* Start Woocommerce Color */ /* Blog Page Color Start */ /* Blog Page Color End */ /* Start Dynamic Style for Preloader Section */ /* End Dynamic Style for Preloader Section */ /* Start Dynamic Style for 404 Page */ /* End Dynamic Style for 404 Page */ /* Scroll Up Dynamic CSS Start */ /* Scroll Up Dynamic CSS End */ /* Start Dynamic Style for Heading Color */ /* End Dynamic Style for Heading Color */ /* Start Dynamic Style for Primary Color */ /* Common Hooks Start */ /* Common Hooks End */ /* Video Start */ /* Video End */ /* Feature List Start */ /* Feature List End */ /* Counter Start */ /* Counter End */ /* Progress Bar Start */ /* Progress Bar End */ /* Accordion Start */ /* Accordion End */ /* Heading Start */ /* Heading End */ /* Contact Form Start */ /* Contact Form End */ /* Team Start */ /* Team End */ /* Price table Start */ /* Price table End */ /* Hotspot Start */ /* Hotspot End */ /* Button Start */ /* Button End */ /* Service Area Start */ /* Service Area End */ /* Service Start */ /* Service End */ /* Blog Start */ /* Blog End */ /* Contact Box Start */ /* Contact Box End */ /* Testimonial Slider Start */ /* Testimonial Slider End */ /* Step Flow Start */ /* Step Flow End */ /* Portfolio Start */ /* Portfolio End */ /* Advance Tab Start */ /* Advance Tab End */ /* End Dynamic Style for Primary Color */ /* Start Dynamic Style for Secondary Color */ /* Common Hooks Start */ /* Common Hooks End */ /* Video Start */ /* Video End */ /* Feature List Start */ /* Feature List End */ /* Counter Start */ /* Counter End */ /* Progress Bar Start */ /* Progress Bar End */ /* Step Flow Start */ /* Step Flow End */ /* Hotspot Start */ /* Hotspot End */ /* Accordion Start */ /* Accordion End */ /* Contact Box Start */ /* Contact Box End */ /* Service Start */ /* Service End */ /* Contact Form Start */ /* Contact Form End */ /* Price table Start */ /* Price table End */ /* Heading Start */ /* Heading End */ /* Button Start */ /* Button End */ /* Team Start */ /* Team End */ /* Portfolio Start */ /* Portfolio End */ /* Testimonial Slider Start */ /* Testimonial Slider End */ /* Advance Tab Start */ /* Advance Tab End */ /* End Dynamic Style for Secondary Color */ /* Start Dynamic Mobile Sidebar Menu Colors */ /* Normal */ /* Hover */ /* Active */ /* End Dynamic Mobile Sidebar Menu Colors */ /* Customizer > Additional CSS (#wp-custom-css) */ body a { color: #fc3351; } html.js body .elementor-nav-menu--main a.elementor-item.elementor-item-active { color: #fc3351 !important; } .interactive-element > .elementor-element, .interactive-element .elementor-button, #menu-1-9f48480 a { transform: translateY(0); transition: transform 0.1s !important; } .interactive-element > .elementor-element:hover { transform: translateY(-10px); } #menu-1-9f48480 a:hover, .interactive-element .elementor-button:hover { transform: translateY(-3px); } /* Allow separators to display correctly */ .ai-ecosystem-columns { overflow: visible !important; } /* Each icon column */ .ai-ecosystem-columns > .e-con { position: relative !important; } /* Vertical separator after every column except the last */ .ai-ecosystem-columns > .e-con:not(:last-child)::after { content: "" !important; position: absolute !important; /* Position between columns */ right: -10px !important; top: 40% !important; transform: translateY(-50%) !important; /* Separator dimensions */ width: 1px !important; height: 40px !important; /* Slightly lighter than the dark background */ background-color: rgba(255, 255, 255, 0.20) !important; pointer-events: none !important; z-index: 2 !important; } /* Hide separators when columns stack */ @media (max-width: 1024px) { .ai-ecosystem-columns > .e-con::after { display: none !important; } } .ai-ecosystem-columns p { margin-top: -20px; } /* Parent containing all five steps */ .ai-process-steps { overflow: visible !important; } /* Five direct child containers */ .ai-process-steps > .e-con { position: relative !important; overflow: visible !important; } /* Add a dotted connector after every child except the fifth */ .ai-process-steps > .e-con:not(:last-child)::after { content: "" !important; position: absolute !important; display: block !important; /* Align with the vertical center of each circle */ top: 77px !important; /* Start and end at the edges of the circles */ left: calc(50% + 50px) !important; width: calc(100% - 79px) !important; height: 3px !important; /* Round dotted line */ background-image: radial-gradient( circle, #e60087 1.5px, transparent 1.7px ) !important; background-size: 5px 1px !important; background-position: center !important; background-repeat: repeat-x !important; z-index: 1 !important; pointer-events: none !important; } /* Keep the circle images above the dotted lines */ .ai-process-steps > .e-con > .elementor-widget-image { position: relative !important; z-index: 2 !important; } /* Hide lines when the columns stack on tablets and phones */ @media (max-width: 1024px) { .ai-process-steps > .e-con::after { display: none !important; } } .orange11 { color: #fc3351 !important; font-size: 20px !important; top: -6px !important; position:relative; display: inline-block; } .rs-team-slider.team-slider-style9 .plus_team i.ri-share-line { display: none !important; } .rs-team-slider.team-slider-style9 .plus_team .social-icons1 { transition: none !important; transform: none !important; opacity: 1; } .header-logo-part { width: fit-content; } .blog-post-image.alignright.wp-post-image, .pre-blog-content { display: none; } .about-us-icons h4 { margin-top: -30px; } .about-us-icons .elementor-widget-container { text-align: center; } #before-footer-CTA .no-position { padding-right:0; padding-left:0; } .servicios-subtitulo .elementor-heading-title { font-size: 16px; letter-spacing: 0.5px; } .services-header h6.elementor-heading-title, .services-header .servicios-subtitulo .elementor-heading-title { background: linear-gradient( 141deg, #7B2CFF 0%, rgba(255, 0, 81, 1) 60%, rgba(245, 164, 82, 1) 100% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; width: fit-content; } .services-header h1, .services-header .descripcion-servicios { color: white; } .services-header h6, .services-header .descripcion-servicios { width: fit-content; } .services-header .elementor-heading-title { margin-bottom: 10px !important; } .services-header .descripcion-servicios::after, .elementor-element-40a7448 .prelements-heading .title-inner .title::after, .elementor-element-b587c3b .prelements-heading .title-inner .title::after, .content-color-line-class .prelements-heading .title-inner .title::after, .linea-colores-abajo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #d633ff 0%, #ff8a00 100%); } .linea-colores-centrada, .elementor-element-449ec1b .prelements-heading .title-inner .title::after { left: calc(50% - 60px) !important; } .elementor-element-40a7448 .prelements-heading .title-inner .title, .elementor-element-b587c3b .prelements-heading .title-inner .title, .content-color-line-class .prelements-heading .title-inner .title, .linea-colores-abajo { padding-bottom: 20px; margin-bottom: 20px; } #whywebhead .media_wrap { opacity: 0.75; } .pillars-1 .services-inner { background: linear-gradient( 90deg, #7F0140 0%, #921139 50%, #A21E22 100% ); } .pillars-2 .services-inner { background: linear-gradient( 90deg, #A21E22 0%, #B03624 50%, #BC5326 100% ); } .pillars-3 .services-inner { background: linear-gradient( 90deg, #BC5326 0%, #C56A2A 50%, #D07E33 100% ); } #whywebhead .services-inner .desc-text, #whywebhead .services-inner .title { color: #fff !important; } .elementor-button:hover { background-color: inherit !important; } .cooler-cta-1 .elementor-button, #SR7_5_1-11-3:hover, .rstab-main.horizontal .nav-tabs .nav-link.active, .elementor-33685 .elementor-element.elementor-element-56c0737 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit, .rs-blog .blog-item.rs-flat .blog-button a { background: linear-gradient( 180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.08) 100% ), linear-gradient( 90deg, #b1006a 0%, #c0006e 30%, #f02b34 60%, #ff6a2e 80%, #f89a38 100% ) !important; border-radius: 100px; color: white !important; } .archive .rs-blog .blog-item .blog-img .blog-meta, .archive .rs-blog .blog-item .blog-img .blog-meta .btm-cate li { display: none; } .bs-sidebar .tagcloud a:hover { border: 1px solid #fc3351 !important; background-color: #fc3351 !important; } .bs-sidebar .tagcloud a { border-radius: 100px; } .full-blog-content .blog-title a, .full-blog-content .blog-title a:hover { color: black !important; } .rstab-main.horizontal .nav-tabs .nav-link.active::after { content: none; } .elementor-33679 .elementor-element.elementor-element-ef30f3e .tab-menu-wrapper .nav-tabs .nav-link { border-radius: 5px 5px 0 0 !important; border: none !important; } /* CARD 1 - Soft Purple */ #slick-slide00 .testimonial-inner { border: 1px solid transparent !important; background: linear-gradient(#090321, #090321) padding-box, linear-gradient( 135deg, rgba(104, 58, 183, .55) 0%, rgba(123, 77, 255, .45) 50%, rgba(168, 85, 247, .35) 100% ) border-box; } /* CARD 2 - Deep Indigo */ #slick-slide01 .testimonial-inner { border: 1px solid transparent !important; background: linear-gradient(#090321, #090321) padding-box, linear-gradient( 135deg, rgba(59, 82, 139, .55) 0%, rgba(91, 74, 196, .45) 50%, rgba(123, 77, 255, .35) 100% ) border-box; } /* CARD 3 - Plum */ #slick-slide02 .testimonial-inner { border: 1px solid transparent !important; background: linear-gradient(#090321, #090321) padding-box, linear-gradient( 135deg, rgba(122, 61, 122, .55) 0%, rgba(145, 74, 145, .45) 50%, rgba(168, 85, 247, .35) 100% ) border-box; } .testi-card-bottom .title { position: relative; padding-top: 25px; } .testi-card-bottom .title::before { content: ""; position: absolute; top: -26px; left: 0; width: 30px; height: 2px; background: #ff008f; border-radius: 2px; } .elementor-16339 .elementor-element.elementor-element-bcd6e47 .rs-testimonial-slider .testimonial-inner .desc { min-height:216px; } .content-part-modify { position: relative; padding-left: 35px; /* space for image */ } .content-part-modify::before { content: ""; position: absolute; left: -10px; top: -10px; width: 50px; /* icon width */ height: 50px; /* icon height */ background-image: url("https://www.webheadtech.com/wp-content/uploads/2026/06/user-whca96.webp"); background-repeat: no-repeat; background-position: center; background-size: contain; } .card-1 .services-inner { position: relative; border-radius: 24px; background: #050320; /* your card background */ } .card-1 .services-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; /* border thickness */ background: linear-gradient( 135deg, rgba(255, 0, 170, 0.9) 0%, rgba(130, 50, 255, 0.8) 40%, rgba(80, 40, 255, 0.4) 70%, rgba(255, 0, 170, 0.2) 100% ); /* Show only the border */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .card-1 .services-inner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, #ff00aa, #7b2cff, #ff00aa ); filter: blur(8px); opacity: 0.35; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* card 4 services*/ .card-4 .services-inner { position: relative; border-radius: 24px; background: #04031d; overflow: hidden; } /* Gradient Border */ .card-4 .services-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(103, 70, 255, 0.85) 0%, rgba(155, 55, 255, 0.95) 30%, rgba(255, 0, 140, 0.9) 70%, rgba(255, 0, 140, 0.3) 100% ); /* Border only */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* Outer Glow */ .card-4 .services-inner::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, #6746ff 0%, #9b37ff 40%, #ff008c 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(10px); opacity: 0.35; pointer-events: none; z-index: 1; } /* card 5*/ .card-5 .services-inner { position: relative; border-radius: 24px; background: #0b0018; overflow: hidden; } /* Gradient Border */ .card-5 .services-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 40, 120, 0.95) 0%, rgba(255, 0, 90, 0.9) 35%, rgba(255, 80, 0, 0.85) 70%, rgba(255, 140, 0, 0.4) 100% ); /* Border only */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* Outer Glow */ .card-5 .services-inner::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, #ff2878 0%, #ff005a 40%, #ff5000 75%, #ff8c00 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(10px); opacity: 0.35; pointer-events: none; z-index: 1; } /* card 6 */ .card-6 .services-inner { position: relative; border-radius: 24px; background: #0b0018; overflow: hidden; } /* Gradient Border */ .card-6 .services-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 120, 40, 0.95) 0%, rgba(255, 140, 0, 0.9) 35%, rgba(255, 170, 0, 0.85) 70%, rgba(255, 200, 80, 0.4) 100% ); /* Border only */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* Outer Glow */ .card-6 .services-inner::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, #ff7828 0%, #ff8c00 40%, #ffaa00 75%, #ffc850 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(10px); opacity: 0.35; pointer-events: none; z-index: 1; } .card-1 .desc-text { position: relative; padding-top: 16px; } .card-1 .desc-text::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, #ff00a8 0%, #861b55 100% ); } .card-4 .desc-text { position: relative; padding-top: 16px; } .card-4 .desc-text::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, #5f3be0 0%, #b71ec7 100% ); } .card-5 .desc-text { position: relative; padding-top: 16px; } .card-5 .desc-text::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, #ec552e 0%, #a93924 100% ); } .card-6 .desc-text { position: relative; padding-top: 16px; } .card-6 .desc-text::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, #ee7a25 0%, #69311e 100% ); } .new-dark-boxes .media_wrap { background-color: transparent !important; } .services-inner .services-title .title, .services-inner .services-title { margin-top: 10px !important; } .elementor-16344 .elementor-element.elementor-element-2e2680b .rs_stickys_form.search-form .search-input { border: solid 1px; } .elementor-16344 .elementor-element.elementor-element-2e2680b .search-form.rs_stickys_form button i { color: #09012A; } .prelements-heading .title-inner span.sub-text { color: inherit; } .new-dark-boxes .services-inner { background-image: url("https://www.webheadtech.com/wp-content/uploads/2026/06/456.png"), linear-gradient(90deg, #0D0E19 0%, #1F0A38 100%); background-repeat: no-repeat, no-repeat; background-position: bottom center, center; background-size: 100% auto, cover; border-radius: 20px !important; } .new-dark-boxes .desc-text, .new-dark-boxes h4 { color: #fff !important; } .home .slick-dots { display: none !important; } .new-magenta { color: #e1008a; } .new-orange { color: #ff7a00; } /* #page h2, #page h3, #page h4, #page h5 { color: #1a0f2e; } */ h1, h2, h3, h4, h5, h6 { font-family: Poppins !important; font-weight:500 !important; } p, li, ul, ol { font-family: Inter !important; } .elementor-button, .rs-btn { border-radius: 100px !important; } /* .prelements-heading .title-inner span.sub-text { color: #e100ba !important; } */ .elementor-nav-menu a:hover, .elementor-nav-menu .current-menu-item > a { color: #ff7a00; } a.homectagradient, .elementor-152 .elementor-element.elementor-element-1b2c639 .rs-social-menu ul li a, .whca96-tablet-hero-cta { position: relative !important; background: transparent !important; border: none !important; background-color: transparent !important; } .sr7-btn, a.sr7-btn, .sr7-layer.sr7-btn { background-color: transparent !important; } .homectagradient::before, .elementor-152 .elementor-element.elementor-element-1b2c639 .rs-social-menu ul li a::before, .whca96-tablet-hero-cta::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 200px !important; padding: 2px !important; background: linear-gradient( 141deg, rgba(199, 26, 190, 1) 0%, rgba(255, 0, 81, 1) 30%, rgba(245, 164, 82, 1) 90% ) !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; } a.homectagradient:hover, .whca96-tablet-hero-cta:hover { background-color: transparent !important; border-radius: 100px !important; } .elementor-element-cfa854a svg path { fill: rgba(245, 164, 82, 1); } h1.gradientherohomeh1, #before-footer-CTA .sub-text, .elementor-element-cfa854a .elementor-button-content-wrapper, .coloreeeees p, .whca96-tablet-hero-heading span { background: linear-gradient( 141deg, rgba(199, 26, 190, 1) 0%, rgba(255, 0, 81, 1) 25%, rgba(245, 164, 82, 1) 67% ) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; } div.whca96-tablet-hero-heading span { line-height: 1.26 !important; } .coloreeeees p { margin-top: 30px; margin-bottom: 5px; } .whca96-tablet-hero-overlay { padding: 44px max(32px, calc((100vw - 1360px) / 2 + 40px)) !important; } a.whca96-tablet-hero-cta span:hover, a.whca96-tablet-hero-cta:hover { color: white !important; } .elementor-element-cfa854a .elementor-button-content-wrapper::after, .elementor-16339 .elementor-element.elementor-element-aced82b .prelements-heading .title-inner .title::after { content: ""; position: absolute; left: 0; bottom: -12px; /* space between text and line */ width: 40px; /* underline length */ height: 3px; /* underline thickness */ background: linear-gradient( 90deg, rgba(199, 26, 190, 1) 0%, rgba(245, 164, 82, 1) 100% ); border-radius: 2px; } h1.homenewslider123 { font-weight:500 !important; font-size:68px !important; letter-spacing:-2px !important; } h1.homenewslider456 { font-weight:500 !important; font-size:60px !important; line-height:72px !important; letter-spacing:-2px !important; } .elementor-16339 .elementor-element.elementor-element-3405338 .elementor-button { padding: 0; } .home-insights-top-border .elementor-divider-separator { --accent: #e6007e; position: relative; width: 76px; height: 6px; margin: 0; font-size: 0; line-height: 0; border-top: 2px solid var(--accent); } .home-insights-top-border .elementor-divider-separator::after { content: ""; position: absolute; top: -4px; right: -1px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--accent); } #fluentform_1 input, #fluentform_1 textarea { background-color: #020924; color: white; border: solid 2px white; } body.page input:focus-visible, #fluentform_1 textarea:focus-visible { outline: none !important; } #fluentform_1 input:focus, #fluentform_1 textarea:focus { border: solid 2px #fc3351; } .rs-service-flex .row .grid-item.active .service-inner { background: rgba(0, 0, 0, 0.4); border-bottom: solid 6px #fc3351; } @media screen and (max-width: 1494px) { sr7-mask:nth-of-type(5) { top: 72px !important; } sr7-mask:nth-of-type(4) { top: 152px !important; } h1.homenewslider456 { line-height:61px !important; } } @media screen and (max-width: 1355px) { #SR7_5_1-11 sr7-mask:nth-of-type(5) { top: 50px !important; height: 160px !important; } h1.homenewslider123 { font-size:60px !important; } sr7-mask:nth-of-type(4) { top: 122px !important; } } @media screen and (max-width: 1278px) { h1.homenewslider123 { font-size:52px !important; } h1.homenewslider456 { font-size:50px !important; line-height: 50px !important; } sr7-mask:nth-of-type(4) { top: 111px !important; } sr7-mask:nth-of-type(2) { top: 329px !important; } sr7-mask:nth-of-type(3) { top: 235px !important; } } @media screen and (max-width: 1229px) { sr7-mask:nth-of-type(3) { top: 264px !important; } } @media screen and (max-width: 1089px) { sr7-mask:nth-of-type(3) { top: 269px !important; } #page div.ai-ecosystem-columns img { max-width:60px; } } @media screen and (max-width: 1024px) { .elementor-element-d826e28 { display: block !important; max-width: fit-content; color: #fff !important; margin-right: 10px; } sr7-mask:nth-of-type(3) { top: 230px !important; } .elementor-nav-menu--dropdown { top:50px !important; } .elementor-33679 .elementor-element.elementor-element-ef30f3e .tab-menu-wrapper .nav-tabs .nav-link:not(.collapsed), .elementor-33679 .elementor-element.elementor-element-ef30f3e .tab-menu-wrapper .nav-tabs .nav-link .show { background: linear-gradient( 180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.08) 100% ), linear-gradient( 90deg, #b1006a 0%, #c0006e 30%, #f02b34 60%, #ff6a2e 80%, #f89a38 100% ) !important; border-radius: 100px; } } @media screen and (min-width: 1024px) { .menu-item { border: none !important; } ul.elementor-nav-menu--dropdown a { border-inline-start: none !important; } } @media screen and (max-width: 768px) { h1.homenewslider456 { font-size:40px !important; line-height:52px !important; } h1.homenewslider123 { font-size:48px !important; } sr7-bullets { display: none !important; } #page .new-dark-boxes .services-inner { background-position: center bottom; background-size: 740px auto; } } @media screen and (min-width: 768px) { .elementor-element-9dd3ab0 { padding-left: 0; padding-right: 0; } } @media screen and (max-width: 492px) { h1.homenewslider456 { font-size:37px !important; line-height:52px !important; } h1.homenewslider123 { font-size:41px !important; } .elementor-author-box { display: block; } .elementor-author-box__avatar { text-align: center; } } @media screen and (max-width: 479px) { #SR7_5_1-11-2 { font-size: 14px !important; line-height: 20px !important; } sr7-mask:nth-of-type(3) { top: 216px !important; } } @media screen and (max-width: 440px) { h1.homenewslider456 { font-size:28px !important; line-height:36px !important; } #SR7_4_1-9-0 { font-size:42px !important; line-height:42px !important; } h1.homenewslider123 { font-size:36px !important; } sr7-mask:nth-of-type(3) { top: 196px !important; } sr7-mask:nth-of-type(4) { top: 100px !important; } } @media screen and (max-width: 375px) { h1.homenewslider456 { font-size:26px !important; line-height:36px !important; } h1.homenewslider123 { font-size:30px !important; } sr7-mask:nth-of-type(4) { top: 95px !important; } sr7-mask:nth-of-type(3) { top: 182px !important; } sr7-mask:nth-of-type(2) { top: 330px !important; } } /* #whca96-slider-height-reservation (header menu layout, services header) */ .elementor-nav-menu--layout-horizontal, .elementor-nav-menu--layout-horizontal .elementor-nav-menu, .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li { display: flex; } .elementor-nav-menu--layout-horizontal .elementor-nav-menu { flex-wrap: wrap; } .elementor-nav-menu--main .elementor-nav-menu ul { position: absolute; width: max-content !important; min-width: 18rem; max-width: min(24rem, calc(100vw - 2rem)); } .elementor-nav-menu--main .elementor-nav-menu ul a { width: 100%; white-space: nowrap; } /* * Public mobile requests can receive the inner-page Elementor rules * after the first paint. Supply the shared hero image and safe content * gutters here so those pages never present a blank hero or edge-bound * text while the generated stylesheet catches up. */ @media (max-width: 1024px) { /* * The About accordion's theme CSS can arrive after Elementor's * mobile rules and leave white labels on white controls. Pin both * collapsed and selected states to verified high-contrast pairs. */ body.page-id-33679 #page .elementor-element-ef30f3e .nav-link.accordion-button { color: #020924 !important; -webkit-text-fill-color: #020924 !important; background-color: #f5f6f7 !important; opacity: 1 !important; text-shadow: none !important; } body.page-id-33679 #page .elementor-element-ef30f3e .nav-link.accordion-button.show, body.page-id-33679 #page .elementor-element-ef30f3e .nav-link.accordion-button.active, body.page-id-33679 #page .elementor-element-ef30f3e .nav-link.accordion-button:not(.collapsed), body.page-id-33679 #page .elementor-element-ef30f3e .nav-link.accordion-button[aria-selected="true"] { color: #fff !important; -webkit-text-fill-color: #fff !important; background-color: #020924 !important; } body.page-id-33679 #page .elementor-element-ef30f3e .accordion-collapse .content--teb-area { box-sizing: border-box; padding: 20px 24px 24px !important; } body:not(.home) .services-header { min-height: 420px !important; padding: 0 20px !important; background-color: #020924 !important; background-image: url("https://www.webheadtech.com/wp-content/uploads/2026/06/header-services.png") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; } body:not(.home) .services-header > .e-con-inner { width: 100%; max-width: 100%; padding: 40px 0 !important; } body:not(.home) [data-elementor-type="wp-page"] > .e-con.e-parent:not(.services-header) { --padding-left: 20px; --padding-right: 20px; } body:not(.home) [data-elementor-type="wp-page"] .box-inner.pointer-none { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; margin-left: 0 !important; margin-right: 0 !important; } body:not(.home) [data-elementor-type="wp-page"] .elementor-widget-rs-iconbox { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } body:not(.home) [data-elementor-type="wp-page"] h1, body:not(.home) [data-elementor-type="wp-page"] h2, body:not(.home) [data-elementor-type="wp-page"] h3, body:not(.home) [data-elementor-type="wp-page"] h4, body:not(.home) [data-elementor-type="wp-page"] h5, body:not(.home) [data-elementor-type="wp-page"] h6, body:not(.home) [data-elementor-type="wp-page"] p, body:not(.home) [data-elementor-type="wp-page"] li, body:not(.home) [data-elementor-type="wp-page"] a, body:not(.home) [data-elementor-type="wp-page"] table, body:not(.home) [data-elementor-type="wp-page"] iframe, body:not(.home) [data-elementor-type="wp-page"] img { max-width: 100%; overflow-wrap: anywhere; box-sizing: border-box; } } /* * The unstyled mobile header briefly expands to more than 1,500px * before Elementor's stylesheet arrives, then collapses to 90px and * moves the full document. Reserve the verified final height from the * first paint at every viewport. */ #rs-header { height: 90px; } /* * Elementor's responsive header rules arrive late on a cold mobile * load. Mirror the final mobile flex geometry up front so the menu * widget does not render as a full-width, 700px-tall block first. */ @media (max-width: 1024px) { #rs-header .elementor-element-ae257e4, #rs-header .elementor-element-ae257e4 > .e-con-inner, #rs-header .elementor-element-912d9cf { display: flex; width: 100%; height: 90px; } #rs-header .elementor-element-912d9cf { flex-flow: row nowrap; align-items: center; justify-content: space-between; } #rs-header .elementor-element-d826e28 { display: block; flex: 0 0 33px; width: 33px; height: 33px; margin: 0 10px 0 0; } #rs-header .elementor-element-9f48480 { display: block; width: 33px; height: 33px; } } @media (min-width: 1025px) { .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle, .elementor-nav-menu--dropdown-tablet nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { display: none; } } .elementor-widget-slider_revolution, .elementor-widget-slider_revolution > .elementor-widget-container, .wp-block-themepunch-revslider, #SR7_5_1 { width: 100% !important; max-width: 100%; } #SR7_5_1, #SR7_5_1 > sr7-adjuster { display: block !important; min-height: min(820px, calc(100vw * 820 / 1720)); } /* * Slider Revolution paints this image to a canvas. Its tablet/touch * renderer can leave that canvas transparent, which makes the white * hero copy disappear. Keep an identical same-origin image behind the * canvas as a durable visual fallback. */ #SR7_5_1 { background-color: #020924 !important; background-image: url("https://www.webheadtech.com/wp-content/uploads/2026/06/dark-banner-no-images-whca96.webp") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; } /* * Preserve the approved multicolor continuation line and filled CTA * while Slider Revolution owns the animated desktop composition. */ #SR7_5_1-11-1 { color: #fff !important; background-image: linear-gradient(90deg, #ca1d5b 0%, #ff7a00 48%, #23c2dc 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } #SR7_5_1-11-3 { border-color: #d6721c !important; border-radius: 60px !important; background: #d6721c !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } #SR7_5_1-11-3:hover, #SR7_5_1-11-3:focus-visible { border-color: #b85400 !important; background: #b85400 !important; } .whca96-static-hero { box-sizing: border-box; color: #fff; display: flex; align-items: center; width: 100%; min-height: min(820px, calc(100vw * 820 / 1720)); overflow: hidden; background-color: #020924; background-image: url("https://www.webheadtech.com/wp-content/uploads/2026/06/dark-banner-no-images-whca96.webp"); background-position: center center; background-repeat: no-repeat; background-size: cover; } .whca96-static-hero-content { box-sizing: border-box; width: min(1284px, 100%); margin: 0 auto; padding: 56px 32px; } .whca96-static-hero h1 { display: flex; flex-direction: column; gap: 0; max-width: 1050px; margin: 0 0 26px; color: #fff; font-family: "Poppins", Arial, sans-serif; font-size: clamp(50px, 4.65vw, 80px) !important; font-weight: 700; letter-spacing: -1px; line-height: 1.08 !important; } .whca96-static-hero h1 > span:first-child { color: #fff !important; -webkit-text-fill-color: #fff; } .whca96-static-hero-gradient { color: #fff; background: linear-gradient(90deg, #ca1d5b 0%, #ff7a00 48%, #23c2dc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .whca96-static-hero p { max-width: 680px; margin: 0 0 34px; color: #fff; font-family: "Inter", Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.45; } .whca96-static-hero-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px; border: 2px solid #d6721c; border-radius: 4px; background: #d6721c; color: #fff !important; font-family: "Inter", Arial, sans-serif; font-size: 19px; font-weight: 700; line-height: 1; text-decoration: none !important; } .whca96-static-hero-cta:hover, .whca96-static-hero-cta:focus-visible { border-color: #b85400; background: #b85400; color: #fff !important; } /* * The theme's global heading rule can override the service-card * titles with the page's navy text color. These cards use dark image * backgrounds, so keep their six headings explicitly white. */ body.home .elementor-element-6711dee .elementor-widget-rs-service-grid .services-inner .title { color: #fff !important; -webkit-text-fill-color: #fff !important; } @media (max-width: 1024px) { #SR7_5_1, #SR7_5_1 > sr7-adjuster { min-height: calc(100vw * 768 / 1024); } .whca96-static-hero { min-height: calc(100vw * 768 / 1024); } .whca96-static-hero-content { padding: 50px 20px; } .whca96-static-hero h1 { max-width: 760px; font-size: clamp(48px, 6.25vw, 64px) !important; } } @media (min-width: 0) { #SR7_5_1 { position: relative !important; } #SR7_5_1, #SR7_5_1 > sr7-adjuster { min-height: clamp(580px, 47.7vw, 820px); } .whca96-hero-primary-mask, .whca96-hero-continuation-mask, .whca96-hero-copy-mask, .whca96-hero-cta-mask { display: none !important; } .whca96-tablet-hero-overlay { box-sizing: border-box; color: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: absolute; inset: 0; z-index: 100; padding: 44px max(32px, calc((100vw - 1280px) / 2 + 40px)); pointer-events: none; } .whca96-tablet-hero-overlay > * { animation: whca96-hero-content-enter 720ms cubic-bezier(.22, 1, .36, 1) both; } .whca96-tablet-hero-overlay > p { animation-delay: 90ms; } .whca96-tablet-hero-overlay > .whca96-tablet-hero-cta { animation-delay: 180ms; } @keyframes whca96-hero-content-enter { from { opacity: 0; transform: translate3d(-48px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .whca96-tablet-hero-heading { background: none !important; color: #fff !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #fff !important; font-family: "Poppins", sans-serif; font-size: clamp(44px, 4.2vw, 64px) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.8px !important; margin: 0; max-width: 1100px; } .whca96-tablet-hero-heading span { display: block; color: #fff; background: linear-gradient(90deg, #ca1d5b 0%, #ff7a00 48%, #23c2dc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(34px, 3.1vw, 44px) !important; font-weight: 700 !important; line-height: 1.1 !important; margin-top: 8px; max-width: 1100px; } .whca96-tablet-hero-overlay p { color: #fff; font-family: "Inter", sans-serif; font-size: 18px; line-height: 24px; margin: 24px 0 0; max-width: 640px; } .whca96-tablet-hero-cta { border: 2px solid #d6721c; border-radius: 60px; background: #d6721c; color: #fff; display: inline-flex; align-items: center; min-height: 46px; margin-top: 24px; padding: 0 24px; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 500; line-height: 1; text-decoration: none; pointer-events: auto; gap: 10px; } .whca96-tablet-hero-cta-arrow { display: inline-block; font-size: 1.25em; line-height: .8; transform: translateY(-1px); } #SR7_5_1-11-0 { height: auto !important; font-size: 48px !important; line-height: 54px !important; } .whca96-hero-primary-mask { height: 54px !important; } #SR7_5_1-11-1 { height: auto !important; font-size: 40px !important; line-height: 46px !important; } .whca96-hero-continuation-mask { height: auto !important; } } /* * Slider Revolution keeps the desktop layer positions from its * 1720px canvas while scaling the available text widths. Between the * tablet and full desktop layouts that makes the two-line heading * grow to three lines and collide with the supporting copy. Keep the * authored positions, but use fluid type that fits those layer boxes. */ @media (min-width: 1025px) and (max-width: 1599px) { #SR7_5_1-11-0 { height: auto !important; font-size: clamp(50px, 4vw, 62px) !important; line-height: 1.08 !important; } } @media (min-width: 1025px) { #SR7_5_1-11-1 { height: auto !important; font-size: 43px !important; line-height: 1.08 !important; } } @media (min-width: 1280px) { .whca96-tablet-hero-overlay { padding-top: 44px; padding-bottom: 124px; } } @media (prefers-reduced-motion: reduce) { .whca96-tablet-hero-overlay > * { animation: none; } } @media (max-width: 778px) { #SR7_5_1, #SR7_5_1 > sr7-adjuster { min-height: clamp(580px, 78vw, 610px); } .whca96-static-hero { min-height: calc(100vw * 630 / 778); } .whca96-tablet-hero-overlay { padding: 36px 20px; } .whca96-tablet-hero-heading { font-size: clamp(34px, 6.2vw, 44px) !important; line-height: 1.08 !important; letter-spacing: -0.5px !important; } .whca96-tablet-hero-heading span { font-size: clamp(30px, 5.2vw, 36px) !important; line-height: 1.12 !important; margin-top: 8px; } .whca96-tablet-hero-overlay p { font-size: 16px; line-height: 1.42; margin-top: 22px; max-width: 640px; } .whca96-tablet-hero-cta { min-height: 46px; margin-top: 22px; padding: 0 20px; font-size: 16px; } } @media (max-width: 480px) { #SR7_5_1, #SR7_5_1 > sr7-adjuster { min-height: 620px; } .whca96-tablet-hero-overlay { padding: 34px 18px; } .whca96-tablet-hero-heading { font-size: clamp(32px, 8.5vw, 38px) !important; } .whca96-tablet-hero-heading span { font-size: clamp(29px, 7.5vw, 34px) !important; } .whca96-static-hero { align-items: flex-start; min-height: max(650px, calc(100vw * 580 / 480)); } .whca96-static-hero-content { padding: 38px 16px 30px; } .whca96-static-hero h1 { margin-bottom: 20px; font-size: clamp(34px, 9vw, 43px) !important; line-height: 1.08 !important; } .whca96-static-hero p { margin-bottom: 24px; font-size: 16px; line-height: 1.42; } .whca96-static-hero-cta { min-height: 46px; padding: 0 20px; } } /* #whca96-layout-font-stability (font-display changed to swap so text never falls back to Times) */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://www.webheadtech.com/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLGT9V15vFP-KUEg.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2") format("woff2"); } /* #whca96-contrast-styles */ html body .elementor-nav-menu--main a.elementor-item.elementor-item-active { color: #C51D3A !important; } a[href^="mailto:accessibility@webheadtech.com"] { color: #2558E6 !important; } /* #whca96-focus-styles */ body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible, body textarea:focus-visible, body [role="button"]:focus-visible, body [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid #FFD54F !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #102A43 !important; } /* #whca96-lightweight-scroll-arrow */ #to_top_scrollup::before { content: "\2191"; display: block; font-family: Arial, sans-serif; font-size: 27px; font-style: normal; font-weight: 700; line-height: 32px; text-align: center; } /* Static-page replacements for behaviour WordPress normally drives with jQuery (used by script.js: desktop submenus, search toggle, cookie notice, back-to-top). */ .elementor-nav-menu--main .menu-item-has-children{position:relative} .elementor-nav-menu--main .menu-item-has-children>.sub-menu{display:none;position:absolute;top:100%;left:0;min-width:290px;z-index:1000} .elementor-nav-menu--main .menu-item-has-children:hover>.sub-menu,.elementor-nav-menu--main .menu-item-has-children:focus-within>.sub-menu{display:block} .search_icons{cursor:pointer} .search-form{display:none} .search-form.plain-search-open{display:block!important;position:absolute;right:0;top:100%;width:min(450px,90vw);background:white;padding:20px;box-shadow:0 5px 20px #0002;z-index:999} #cookie-notice{display:block!important;visibility:visible!important}#cookie-notice[hidden]{display:none!important} #to_top_scrollup{cursor:pointer;display:none;position:fixed;right:20px;bottom:85px;z-index:99}#to_top_scrollup.plain-visible{display:block} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ========================================================================== Page styles ========================================================================== */ :root { --ar-ink: #020924; --ar-ink-soft: #3b4258; --ar-dark: #0d1121; --ar-card: #050320; --ar-light: #f5f6f7; --ar-line: #e3e6ee; --ar-width: 1282px; --ar-text-gradient: linear-gradient(90deg, #e000a2 0%, #ff163b 30%, #f2b845 74%); --ar-cta-gradient: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,.08) 100%), linear-gradient(90deg, #b1006a 0%, #c0006e 30%, #f02b34 60%, #ff6a2e 80%, #f89a38 100%); --ar-border-gradient: linear-gradient(135deg, rgba(255,0,170,.9) 0%, rgba(130,50,255,.8) 40%, rgba(80,40,255,.4) 70%, rgba(255,0,170,.2) 100%); } .ar-page { font-family: Inter, sans-serif; color: var(--ar-ink); } .ar-page *, .ar-page *::before, .ar-page *::after { box-sizing: border-box; } /* The theme sets font-family:"Inter" without a fallback; keep sans-serif if Inter is skipped. */ .ar-page p, .ar-page li, .ar-page .desc p { font-family: Inter, sans-serif !important; } .ar-wrap { width: 100%; max-width: var(--ar-width); margin: 0 auto; padding: 0 20px; } .ar-section { padding: 110px 0; background: #fff; } .ar-section--light { background: var(--ar-light); } .ar-section--dark { background: var(--ar-dark); color: #fff; } /* Headings: same scale as the homepage section headings. */ .ar-eyebrow { display: block; margin: 0 0 14px; font: 600 16px/22px Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--ar-ink); } .ar-section--dark .ar-eyebrow { color: #fff; } .ar-page h2.ar-title { margin: 0 0 20px; font-family: Poppins, sans-serif; font-weight: 500; font-size: 42px; line-height: 50px; letter-spacing: -1px; color: inherit; } .ar-page h3.ar-tagline { margin: 0 0 32px; font-family: Poppins, sans-serif; font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -.5px; background: var(--ar-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .ar-lead { margin: 0; font-size: 18px; line-height: 27px; color: var(--ar-ink-soft); } .ar-section--dark .ar-lead { color: rgba(255,255,255,.82); } .ar-head { max-width: 820px; margin: 0 0 56px; } .ar-head--center { margin-left: auto; margin-right: auto; text-align: center; } .ar-gradient-rule { display: block; width: 120px; height: 3px; border-radius: 2px; margin: 0 0 24px; background: linear-gradient(90deg, #d633ff 0%, #ff8a00 100%); } .ar-head--center .ar-gradient-rule { margin-left: auto; margin-right: auto; } /* Buttons: gradient pill (homepage CTA) and gradient-outline pill (homepage hero). */ .ar-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; border-radius: 100px; font: 500 18px/27px Inter, sans-serif; text-decoration: none; color: #fff !important; background: var(--ar-cta-gradient); transition: filter .2s ease, transform .2s ease; } .ar-btn:hover, .ar-btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); } .ar-btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; } .ar-btn--outline { border: 2px solid transparent; padding: 10px 22px; background: linear-gradient(#100321,#100321) padding-box, linear-gradient(100deg,#e000a2,#fc1645,#f4bb48) border-box; } .ar-btn--outline:hover, .ar-btn--outline:focus-visible { background: linear-gradient(100deg,#a80088,#e01d47,#ac6c12) padding-box, linear-gradient(100deg,#e000a2,#fc1645,#f4bb48) border-box; } .ar-btn:focus-visible { outline: 3px solid #f2b845; outline-offset: 3px; } .ar-actions { display: flex; flex-wrap: wrap; gap: 16px; } /* Hero: same banner as webheadtech.com/services/. The generic .services-header, .servicios-subtitulo, .descripcion-servicios and tablet/mobile rules come from styles.css; these are that page's own Elementor settings (element 7e54674). */ .ar-services-hero.services-header { --display: flex; --flex-direction: column; --gap: 0px 20px; --row-gap: 0px; --column-gap: 20px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; min-height: 500px; overflow: hidden; background-color: #020924; background-image: url("https://www.webheadtech.com/wp-content/uploads/2026/06/header-services.png"); background-position: right center; background-repeat: no-repeat; background-size: cover; } .ar-services-hero.services-header > .e-con-inner { display: flex; flex-direction: column; width: 100%; max-width: min(100%, 1310px); margin: 0 auto; padding: 100px 0 0; } .ar-services-hero .hfe-page-title { padding: 10px 0 0; } .ar-services-hero .hfe-page-title .elementor-heading-title { margin: 0 0 10px !important; font-family: Poppins, sans-serif; font-weight: 500; font-size: 60px; line-height: 60px; letter-spacing: -1px; color: #fff; } .ar-services-hero .servicios-subtitulo .elementor-heading-title { margin-bottom: 10px !important; line-height: 16px; } .ar-services-hero .descripcion-servicios { position: relative; width: fit-content; color: #fff; } .ar-services-hero .descripcion-servicios p { margin: 0 0 26px; color: #fff; font-size: 18px; line-height: 27px; } @media (max-width: 1366px) { .ar-services-hero.services-header { padding: 0 0 0 20px; } .ar-services-hero.services-header > .e-con-inner { padding: 105px 0 0; } } @media (max-width: 1024px) { .ar-services-hero .hfe-page-title .elementor-heading-title { font-size: 36px; line-height: 46px; } } .ar-intro-actions { margin-top: 40px; } /* Intro statement (homepage "Engineering the Edge Means..." block). */ .ar-intro { padding: 96px 0 104px; } .ar-statement { margin: 0 0 48px; max-width: 1120px; font-family: Poppins, sans-serif; font-weight: 500; font-size: 33px; line-height: 41px; letter-spacing: -.5px; color: var(--ar-ink); } .ar-intro-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 32px; border-top: 1px solid var(--ar-line); } .ar-intro-cols p { margin: 0; font-size: 18px; line-height: 27px; color: var(--ar-ink-soft); } /* Gradient-bordered dark cards (homepage service cards). */ .ar-card { position: relative; border-radius: 24px; background: var(--ar-card); color: #fff; padding: 36px 32px; } .ar-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--ar-border-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* Audience grid. */ .ar-audience { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; } .ar-audience li { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; } .ar-audience li:nth-child(4) { grid-column: 2 / span 2; } .ar-audience .ar-num { font: 500 15px/1 Poppins, sans-serif; letter-spacing: 1px; background: var(--ar-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .ar-audience h3 { margin: 0; font: 500 21px/29px Poppins, sans-serif; letter-spacing: -.5px; color: #fff; } .ar-audience p { margin: 0; font-size: 17px; line-height: 26px; color: rgba(255,255,255,.8); } /* Service index. */ .ar-service-nav { background: #fff; border-bottom: 1px solid var(--ar-line); } .ar-service-nav ul { list-style: none; margin: 0; padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; } .ar-service-nav li:first-child { font: 600 14px/22px Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; margin-right: 8px; } .ar-service-nav a { display: inline-block; padding: 7px 16px; border: 1px solid var(--ar-line); border-radius: 100px; font-size: 15px; line-height: 22px; color: var(--ar-ink); text-decoration: none; transition: border-color .2s, background .2s; } .ar-service-nav a:hover, .ar-service-nav a:focus-visible { border-color: #e000a2; background: #fff5fb; } /* Service blocks. */ .ar-service { scroll-margin-top: 24px; } .ar-service-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .ar-service .ar-eyebrow { display: flex; align-items: center; gap: 12px; } .ar-service .ar-eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: #ff008f; } .ar-detail { padding: 24px 0; border-top: 1px solid var(--ar-line); } .ar-detail:last-of-type { border-bottom: 1px solid var(--ar-line); margin-bottom: 36px; } .ar-detail h4 { margin: 0 0 8px; font: 600 14px/22px Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--ar-ink); } .ar-detail p { margin: 0; font-size: 18px; line-height: 27px; color: var(--ar-ink-soft); } .ar-offers h4 { margin: 0 0 8px; font: 600 14px/22px Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.7); } .ar-offers ul { list-style: none; margin: 0; padding: 0; } .ar-offers li { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.12); } .ar-offers li:last-child { border-bottom: 0; padding-bottom: 0; } .ar-offers strong { display: block; margin-bottom: 6px; font: 500 19px/27px Poppins, sans-serif; letter-spacing: -.3px; color: #fff; } .ar-offers span { display: block; font-size: 16px; line-height: 25px; color: rgba(255,255,255,.78); } /* Why Webhead: homepage "pillars" gradients. */ .ar-why-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: center; } .ar-why-copy p { margin: 0 0 18px; font-size: 18px; line-height: 27px; color: var(--ar-ink-soft); } .ar-why-copy .ar-btn { margin-top: 18px; } .ar-pillars { display: grid; gap: 16px; } .ar-pillar { border-radius: 20px; padding: 28px 32px; color: #fff; display: flex; align-items: center; gap: 24px; } .ar-pillar:nth-child(1) { background: linear-gradient(90deg, #7F0140 0%, #921139 50%, #A21E22 100%); } .ar-pillar:nth-child(2) { background: linear-gradient(90deg, #A21E22 0%, #B03624 50%, #BC5326 100%); } .ar-pillar:nth-child(3) { background: linear-gradient(90deg, #BC5326 0%, #C56A2A 50%, #D07E33 100%); } .ar-pillar b { flex: none; min-width: 92px; font: 500 44px/1 Poppins, sans-serif; letter-spacing: -1px; } .ar-pillar span { font: 500 19px/27px Poppins, sans-serif; letter-spacing: -.3px; } /* Process steps. */ .ar-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; } .ar-steps li { position: relative; padding-top: 34px; counter-increment: step; } .ar-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e000a2, #ff163b, #f2b845); opacity: .9; } .ar-steps li::after { content: counter(step, decimal-leading-zero); display: block; position: absolute; top: 34px; right: 0; font: 500 15px/1 Poppins, sans-serif; color: rgba(255,255,255,.45); letter-spacing: 1px; } .ar-steps h3 { margin: 0 0 12px; padding-right: 36px; font: 500 24px/32px Poppins, sans-serif; letter-spacing: -.5px; color: #fff; } .ar-steps p { margin: 0; font-size: 17px; line-height: 26px; color: rgba(255,255,255,.8); } /* Closing CTA: reuses #before-footer-CTA; only the contact line is new. */ #before-footer-CTA .ar-contact-wrap { align-self: center; text-align: center; } .ar-contact { margin-top: 28px !important; font-size: 17px; line-height: 26px; color: rgba(255,255,255,.85) !important; } .ar-contact a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); } .ar-contact a:hover, .ar-contact a:focus-visible { border-bottom-color: #f2b845; } @media (max-width: 1024px) { .ar-section { padding: 80px 0; } .ar-page h2.ar-title { font-size: 36px; line-height: 46px; } .ar-statement { font-size: 28px; line-height: 36px; } .ar-audience { grid-template-columns: 1fr 1fr; } .ar-audience li, .ar-audience li:nth-child(4) { grid-column: auto; } .ar-audience li:last-child { grid-column: 1 / -1; } .ar-service-grid, .ar-why-grid { grid-template-columns: 1fr; gap: 40px; } .ar-steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } } @media (max-width: 767px) { .ar-section, .ar-intro { padding: 64px 0; } .ar-wrap { padding: 0 16px; } .ar-page h2.ar-title { font-size: 30px; line-height: 38px; } .ar-page h3.ar-tagline { font-size: 21px; line-height: 29px; } .ar-statement { font-size: 23px; line-height: 31px; margin-bottom: 32px; } .ar-intro-cols, .ar-audience, .ar-steps { grid-template-columns: 1fr; gap: 20px; } .ar-audience li:last-child { grid-column: auto; } .ar-card { padding: 28px 22px; } .ar-btn { font-size: 16px; } .ar-pillar { padding: 24px; gap: 18px; } .ar-pillar b { min-width: 72px; font-size: 36px; } .ar-pillar span { font-size: 17px; line-height: 25px; } } /* Motion. Kept deliberately quiet: short fades, small distances, one easing curve. Reveal styles only apply once the page script adds .ar-motion to , so content stays visible without JavaScript, and styles.css disables all of it under prefers-reduced-motion. */ :root { --ar-ease: cubic-bezier(.22, .61, .36, 1); } html { scroll-behavior: smooth; } /* Entrance: fade up as elements scroll into view, staggered within a group. */ .ar-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ar-ease), transform .7s var(--ar-ease); transition-delay: var(--ar-delay, 0ms); } .ar-motion [data-reveal].is-visible { opacity: 1; transform: none; } /* Gradient rules and process lines draw in from the left once revealed. */ .ar-motion [data-reveal] .ar-gradient-rule { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ar-ease) .25s; } .ar-motion .ar-head--center[data-reveal] .ar-gradient-rule { transform-origin: center; } .ar-motion [data-reveal].is-visible .ar-gradient-rule { transform: scaleX(1); } .ar-motion .ar-steps li[data-reveal]::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ar-ease); transition-delay: calc(var(--ar-delay, 0ms) + 150ms); } .ar-motion .ar-steps li[data-reveal].is-visible::before { transform: scaleX(1); } /* Hero: a single staggered fade on load. */ @keyframes ar-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .ar-motion .ar-services-hero .e-con-inner > * { animation: ar-rise .8s var(--ar-ease) both; } .ar-motion .ar-services-hero .e-con-inner > :nth-child(2) { animation-delay: .1s; } .ar-motion .ar-services-hero .e-con-inner > :nth-child(3) { animation-delay: .2s; } /* Buttons: lift and arrow nudge; settle on press. */ .ar-btn, #before-footer-CTA .elementor-button { transition: transform .35s var(--ar-ease), filter .35s var(--ar-ease), background .35s var(--ar-ease); } .ar-btn:hover, .ar-btn:focus-visible, #before-footer-CTA .elementor-button:hover, #before-footer-CTA .elementor-button:focus-visible { transform: translateY(-2px); filter: brightness(1.06); } .ar-btn:active, #before-footer-CTA .elementor-button:active { transform: translateY(0) scale(.98); transition-duration: .12s; } .ar-btn svg, #before-footer-CTA .elementor-button-icon svg { transition: transform .35s var(--ar-ease); } .ar-btn:hover svg, .ar-btn:focus-visible svg, #before-footer-CTA .elementor-button:hover .elementor-button-icon svg { transform: translateX(3px); } /* Service index chips. */ .ar-service-nav a { transition: border-color .3s var(--ar-ease), background-color .3s var(--ar-ease), color .3s var(--ar-ease), transform .3s var(--ar-ease); } .ar-service-nav a:hover, .ar-service-nav a:focus-visible { transform: translateY(-1px); } .ar-service-nav a:active { transform: none; transition-duration: .1s; } /* Contact links: underline fills with the brand gold. */ .ar-contact a { transition: border-color .3s var(--ar-ease), color .3s var(--ar-ease); } /* Hero H1: keep the longer heading clear of the ring artwork on the right. */ .ar-services-hero .hfe-page-title .elementor-heading-title { max-width: 780px; } /* Service actions: contact CTA plus a secondary link to the detailed service page. */ .ar-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .ar-link { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/24px Inter, sans-serif; color: var(--ar-ink) !important; text-decoration: none; background: linear-gradient(90deg, #e000a2, #f2b845) left bottom / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ar-ease), color .3s var(--ar-ease); } .ar-link span { transition: transform .35s var(--ar-ease); } .ar-link:hover, .ar-link:focus-visible { background-size: 100% 1px; color: #b1006a !important; } .ar-link:hover span, .ar-link:focus-visible span { transform: translateX(3px); } /* FAQ */ .ar-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .ar-faq .ar-head { margin-bottom: 0; } .ar-faq-list { border-top: 1px solid var(--ar-line); } .ar-faq-item { border-bottom: 1px solid var(--ar-line); } .ar-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; } .ar-faq-item summary::-webkit-details-marker { display: none; } .ar-faq-item summary h3 { margin: 0; font: 500 20px/28px Poppins, sans-serif; letter-spacing: -.3px; color: var(--ar-ink); transition: color .3s var(--ar-ease); } .ar-faq-item summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .35s var(--ar-ease); color: var(--ar-ink); } .ar-faq-item[open] summary::after { transform: translateY(3px) rotate(-135deg); } .ar-faq-item summary:hover h3, .ar-faq-item[open] summary h3 { color: #b1006a; } .ar-faq-answer { padding: 0 48px 26px 0; } .ar-faq-answer p, .ar-faq-answer li { margin: 0 0 12px; font-size: 17px; line-height: 27px; color: var(--ar-ink-soft); } .ar-faq-answer ul { margin: 0; padding-left: 20px; } .ar-faq-answer li { margin-bottom: 6px; } .ar-faq-answer a { color: #b1006a; text-decoration: underline; text-underline-offset: 3px; } .ar-motion .ar-faq-item[open] .ar-faq-answer { animation: ar-rise .45s var(--ar-ease) both; } @media (max-width: 1024px) { .ar-faq-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 767px) { .ar-faq-item summary h3 { font-size: 18px; line-height: 26px; } .ar-faq-answer { padding-right: 0; } .ar-service-actions { gap: 16px; } } /* ========================================================================== Article: WCAG 2.1 requirements for Texas government websites Same tokens, cards, gradients and motion as the services page above. ========================================================================== */ /* The site's blog CSS turns every `article a` cyan with !important; keep this page's buttons and links on the services-page treatment instead. */ .ar-page .ar-article a.ar-btn, .ar-page .ar-article a.ar-btn:hover { color: #fff !important; } .ar-page .ar-article a.ar-link { color: var(--ar-ink) !important; } .ar-page .ar-article a.ar-link:hover, .ar-page .ar-article a.ar-link:focus-visible { color: #b1006a !important; } .ar-page .ar-article .ar-post-meta a, .ar-page .ar-article .ar-post-meta a:hover { color: #fff !important; } .ar-page .ar-article .servicios-subtitulo a, .ar-page .ar-article .servicios-subtitulo a:hover { color: inherit !important; } /* Hero: post meta line (author, published and updated dates). */ .ar-services-hero .servicios-subtitulo a { color: inherit; text-decoration: none; } .ar-services-hero .servicios-subtitulo a:hover, .ar-services-hero .servicios-subtitulo a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .ar-services-hero .hfe-page-title .elementor-heading-title { max-width: 860px; font-size: 52px; line-height: 60px; } .ar-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 4px 0 0; padding: 0; list-style: none; } .ar-post-meta li { margin: 0; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.85); } .ar-post-meta li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 18px 2px 0; border-radius: 50%; background: #ff163b; vertical-align: middle; } .ar-post-meta a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); } .ar-post-meta a:hover, .ar-post-meta a:focus-visible { border-bottom-color: #f2b845; } .ar-post-meta strong { font-weight: 600; color: #fff; } /* Long-form copy blocks. */ .ar-prose p { margin: 0 0 20px; font-size: 18px; line-height: 29px; color: var(--ar-ink-soft); } .ar-prose p:last-child { margin-bottom: 0; } /* Two-column split: heading on the left, content on the right (same rhythm as the FAQ). */ .ar-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .ar-split .ar-head { margin-bottom: 0; } /* Stat callouts: the homepage "pillars" gradients, laid out as a row. */ .ar-stats { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ar-stats .ar-pillar { flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; } .ar-stats .ar-pillar b { min-width: 0; } .ar-stats .ar-pillar b.ar-stat-date { font-size: 34px; line-height: 44px; } .ar-stats .ar-pillar span { font: 400 17px/26px Inter, sans-serif; letter-spacing: 0; color: rgba(255,255,255,.92); } /* Four principles. */ .ar-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .ar-principles li { display: flex; flex-direction: column; gap: 14px; margin: 0; } .ar-principles .ar-num { font: 500 15px/1 Poppins, sans-serif; letter-spacing: 1px; background: var(--ar-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .ar-principles h3 { margin: 0; font: 500 24px/32px Poppins, sans-serif; letter-spacing: -.5px; color: #fff; } .ar-principles p { margin: 0; font-size: 17px; line-height: 27px; color: rgba(255,255,255,.8); } /* Pull quote. */ .ar-quote-section { padding: 96px 0; } /* The theme styles every blockquote (gray panel, icon-font ::before, rule before cite); reset those here. */ .ar-page .ar-quote { position: relative; max-width: 1060px; margin: 0 auto; padding: 0 0 0 48px; border: 0; border-radius: 0; background: none !important; } .ar-page .ar-quote::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 0; width: 3px; height: auto; border: 0; border-radius: 2px; font-size: 0; transform: none; background: linear-gradient(180deg, #e000a2, #ff163b, #f2b845); } .ar-page .ar-quote::after, .ar-page .ar-quote cite::before, .ar-page .ar-quote cite::after { content: none; display: none; } .ar-quote p { margin: 0 0 24px; font-family: Poppins, sans-serif !important; font-weight: 500; font-size: 30px; line-height: 40px; letter-spacing: -.5px; color: var(--ar-ink); } .ar-quote cite { display: block; font: normal 600 15px/22px Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--ar-ink-soft); } /* "Does not allow" list reuses .ar-card.ar-offers; failure checklist below. */ .ar-offers--wide li { padding: 24px 0; } .ar-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; } .ar-checks li { position: relative; margin: 0; padding: 22px 0 22px 40px; border-top: 1px solid rgba(255,255,255,.14); font-size: 18px; line-height: 27px; color: rgba(255,255,255,.88); } .ar-checks li::before { content: ""; position: absolute; left: 0; top: 25px; width: 22px; height: 22px; border-radius: 50%; background: var(--ar-cta-gradient); } .ar-checks li::after { content: ""; position: absolute; left: 8px; top: 30px; width: 6px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } /* Get started: copy beside an audit call-to-action card. */ .ar-audit-card { padding: 44px 40px; } .ar-audit-card .ar-eyebrow { color: rgba(255,255,255,.7); } .ar-page .ar-audit-card h3 { margin: 0 0 14px; font: 500 30px/38px Poppins, sans-serif; letter-spacing: -.5px; color: #fff; } .ar-audit-card p { margin: 0 0 28px; font-size: 18px; line-height: 27px; color: rgba(255,255,255,.82); } /* About the author. */ .ar-author { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .ar-author-name { margin: 0 0 6px; font: 500 24px/32px Poppins, sans-serif; letter-spacing: -.5px; color: var(--ar-ink); } .ar-author-role { display: block; margin: 0 0 20px; font-size: 16px; line-height: 24px; color: var(--ar-ink-soft); } @media (max-width: 1024px) { .ar-services-hero .hfe-page-title .elementor-heading-title { font-size: 36px; line-height: 46px; } .ar-split, .ar-author { grid-template-columns: 1fr; gap: 40px; } .ar-stats { grid-template-columns: 1fr; } .ar-quote p { font-size: 26px; line-height: 36px; } } @media (max-width: 767px) { .ar-services-hero .hfe-page-title .elementor-heading-title { font-size: 30px; line-height: 38px; } .ar-post-meta li { font-size: 15px; } .ar-stats { margin-top: 44px; } .ar-principles, .ar-checks { grid-template-columns: 1fr; } .ar-quote-section { padding: 64px 0; } .ar-page .ar-quote { padding-left: 28px; } .ar-quote p { font-size: 22px; line-height: 31px; } .ar-audit-card { padding: 32px 24px; } .ar-page .ar-audit-card h3 { font-size: 25px; line-height: 33px; } }