{"id":10,"date":"2026-06-12T11:13:26","date_gmt":"2026-06-12T11:13:26","guid":{"rendered":"https:\/\/dev.awrange.com\/?page_id=10"},"modified":"2026-06-12T13:07:51","modified_gmt":"2026-06-12T13:07:51","slug":"home","status":"publish","type":"page","link":"https:\/\/dev.awrange.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nServices Grid<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n\r\n#svc-grid-section *, #svc-grid-section *::before, #svc-grid-section *::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n#svc-grid-section {\r\n width: 100%;\r\n background: linear-gradient(180deg, #000000 0%, #040462 27%, #0808C4 87%);\r\n padding: 72px 48px;\r\n font-family: 'Figtree', sans-serif;\r\n}\r\n\r\n#svc-grid-section .sg-header {\r\n text-align: center;\r\n margin-bottom: 56px;\r\n}\r\n\r\n#svc-grid-section .sg-title {\r\n font-size: 50px;\r\n font-weight: 700;\r\n line-height: 1.2;\r\n margin-bottom: 16px;\r\n letter-spacing: -0.5px;\r\n background: linear-gradient(135deg, #ffffff 0%, #ffffff 38%, #ff5a2c 50%, #ffffff 62%, #ffffff 100%);\r\nbackground-size: 400% 400%;\r\n-webkit-background-clip: text;\r\n-webkit-text-fill-color: transparent;\r\nbackground-clip: text;\r\nanimation: sgTitleFlow 60s ease-in-out infinite;\r\n}\r\n@keyframes sgTitleFlow {\r\n 0% { background-position: 0% 0%; }\r\n 10% { background-position: 80% 20%; }\r\n 20% { background-position: 30% 80%; }\r\n 35% { background-position: 100% 50%; }\r\n 50% { background-position: 20% 100%; }\r\n 65% { background-position: 70% 10%; }\r\n 75% { background-position: 10% 60%; }\r\n 90% { background-position: 90% 90%; }\r\n 100% { background-position: 0% 0%; }\r\n}\r\n#svc-grid-section .sg-desc {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: rgba(255,255,255,0.65);\r\n line-height: 1.75;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n color: #FFFFFF;\r\n}\r\n\r\n#svc-grid-section .sg-grid {\r\n display: grid;\r\n grid-template-columns: repeat(6, 1fr);\r\n gap: 16px;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n}\r\n\r\n#svc-grid-section .sg-card {\r\n background: #ffffff;\r\n border-radius: 14px;\r\n padding: 28px 16px 22px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 14px;\r\n cursor: pointer;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n border: 1px solid rgba(255,255,255,0.15);\r\n}\r\n\r\n#svc-grid-section .sg-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 12px 32px rgba(8,8,196,0.35);\r\n}\r\n\r\n#svc-grid-section .sg-card:hover .sg-icon svg {\r\n filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(360deg) brightness(119%) contrast(119%);\r\n}#svc-grid-section .sg-icon {\r\n width: 52px;\r\n height: 52px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n#svc-grid-section .sg-icon svg {\r\n width: 100%;\r\n height: 100%;\r\n stroke: #3b5bdb;\r\n fill: none;\r\n stroke-width: 1.4;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n}\r\n\r\n#svc-grid-section .sg-label {\r\n font-size: 15px;\r\n font-weight: 500;\r\n color: #111;\r\n text-align: center;\r\n line-height: 1.4;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n #svc-grid-section .sg-grid { grid-template-columns: repeat(3, 1fr); }\r\n}\r\n@media (max-width: 600px) {\r\n #svc-grid-section .sg-grid { grid-template-columns: repeat(3, 1fr); }\r\n #svc-grid-section { padding: 48px 12px; }\r\n #svc-grid-section .sg-card { padding: 16px 8px 14px; gap: 8px; }\r\n #svc-grid-section .sg-label { font-size: 11px; }\r\n #svc-grid-section .sg-icon { width: 40px; height: 40px; }\r\n #svc-grid-section .sg-title { font-size:30px; }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"svc-grid-section\">\r\n\r\n <div class=\"sg-header\">\r\n <h2 class=\"sg-title\">Bold Websites. Smarter Marketing. Bigger Results.<\/h2>\r\n <p class=\"sg-desc\">We are a digital-first agency focused on strategy and design. With 8+ years of experience, we help brands grow online through clarity and results.<\/p>\r\n <\/div>\r\n\r\n <div class=\"sg-grid\">\r\n\r\n <!-- Search Engine Optimization -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg width=\"58\" height=\"52\" viewBox=\"0 0 58 52\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n\r\n<path d=\"M48.2316 32.8983L41.1638 25.8305C42.0877 24.2895 42.6198 22.4878 42.6198 20.564C42.6198 14.8996 38.0115 10.2911 32.3469 10.2911C31.3292 10.2911 30.3237 10.4397 29.3584 10.7326C29.0488 10.8266 28.874 11.1539 28.968 11.4635C29.0619 11.7732 29.3891 11.9479 29.6988 11.8541C30.5536 11.5946 31.4445 11.463 32.3469 11.463C37.3652 11.463 41.4479 15.5458 41.4479 20.564C41.4479 25.2572 37.8768 29.1318 33.3094 29.6141L33.8635 29.0599C34.1714 28.752 34.3287 28.3505 34.3381 27.946C37.6462 27.0576 39.9925 24.0405 39.9925 20.564C39.9925 16.3482 36.5627 12.9184 32.3469 12.9184C28.1311 12.9184 24.7013 16.3482 24.7013 20.564C24.7013 24.0764 27.0676 27.0721 30.3644 27.9496L29.2056 29.1084C25.6382 27.8097 23.234 24.3788 23.246 20.564C23.246 17.3583 24.9628 14.3531 27.7262 12.7213C28.0048 12.5568 28.0974 12.1974 27.9329 11.9188C27.7684 11.6402 27.4092 11.5477 27.1304 11.7122C25.8342 12.4776 24.7191 13.5235 23.8697 14.7618V13.0816C23.8697 12.4399 23.3476 11.9178 22.7059 11.9178H12.1148C11.473 11.9178 10.951 12.44 10.951 13.0816V20.5554C10.951 21.1971 11.4731 21.7192 12.1148 21.7192H15.3108C15.414 21.7192 15.5086 21.7713 15.5637 21.8585L16.6706 23.6095C16.8318 23.8647 17.1084 24.017 17.4102 24.017C17.7121 24.017 17.9886 23.8647 18.1499 23.6095L19.2567 21.8585C19.3119 21.7713 19.4064 21.7192 19.5096 21.7192H22.1395C22.2739 22.9233 22.6165 24.0721 23.1361 25.1245H14.9776C14.6539 25.1245 14.3917 25.3868 14.3917 25.7104C14.3917 26.0341 14.6539 26.2964 14.9776 26.2964H23.8129C24.0666 26.6745 24.3467 27.0344 24.6486 27.3757V33.6654L22.9094 35.4046C22.5609 35.7531 22.3084 36.1887 22.1791 36.6645L21.9026 37.6822H12.8124C12.4887 37.6822 12.2264 37.9445 12.2264 38.2681C12.2264 38.5917 12.4887 38.8541 12.8124 38.8541H22.3507C22.403 38.8542 22.4539 38.8454 22.5043 38.8336L23.9543 38.4397C24.1985 38.3733 24.432 38.274 24.6487 38.1463V40.5369H10.1719V26.2965H12.1841C12.5078 26.2965 12.77 26.0341 12.77 25.7105C12.77 25.3869 12.5078 25.1246 12.1841 25.1246H9.86667C9.38884 25.1246 9 25.5133 9 25.9912V40.8422C9 41.3201 9.38884 41.7088 9.86667 41.7088H24.9539C25.4318 41.7088 25.8205 41.3201 25.8205 40.8422V37.103L32.0899 30.8337C33.9969 30.8844 35.8464 30.3917 37.4039 29.5032L39.8147 31.914C39.9292 32.0284 40.0792 32.0856 40.2291 32.0856C40.379 32.0856 40.529 32.0285 40.6435 31.914C40.8723 31.6852 40.8723 31.3141 40.6435 31.0854L38.4097 28.8516C39.1963 28.2747 39.8978 27.5889 40.4922 26.8163L47.403 33.727C47.678 34.002 47.8294 34.3676 47.8294 34.7565C47.8294 35.1454 47.678 35.511 47.4029 35.786C47.1279 36.061 46.7623 36.2124 46.3734 36.2124C45.9846 36.2124 45.619 36.061 45.344 35.786L42.6671 33.1091C42.4382 32.8803 42.0673 32.8803 41.8384 33.1091C41.6096 33.338 41.6096 33.709 41.8384 33.9377L44.5153 36.6146C45.0117 37.111 45.6716 37.3843 46.3735 37.3843C47.0753 37.3843 47.7353 37.111 48.2317 36.6146C49.2562 35.59 49.2562 33.9229 48.2316 32.8983ZM25.8733 20.564C25.8733 16.9945 28.7773 14.0904 32.3469 14.0904C35.9165 14.0904 38.8205 16.9945 38.8205 20.564C38.8205 23.5408 36.7895 26.1198 33.9393 26.8392C33.2471 26.0204 31.993 26.1441 31.3527 26.9613C28.2101 26.4791 25.8733 23.7766 25.8733 20.564ZM18.2661 21.2324L17.4103 22.5864L16.5545 21.2323C16.2833 20.8033 15.8184 20.5472 15.3109 20.5472H12.1229V13.0897H22.6977V17.0385C22.2898 18.1569 22.0763 19.3449 22.0744 20.5473H19.5097C19.0021 20.5473 18.5373 20.8034 18.2661 21.2324ZM25.8205 28.5047C26.562 29.1129 27.3949 29.6224 28.3041 30.01L25.8205 32.4936V28.5047ZM23.6469 37.3088L23.1843 37.4345L23.31 36.9719C23.3858 36.693 23.5338 36.4376 23.7381 36.2333L32.3874 27.5839C32.4767 27.4947 32.5939 27.4501 32.7111 27.4501C32.8283 27.4501 32.9456 27.4947 33.0348 27.5839C33.2133 27.7625 33.2133 28.0528 33.0348 28.2313L24.3855 36.8806C24.1812 37.0849 23.9259 37.233 23.6469 37.3088Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M33.0952 22.3136C33.0952 21.99 32.833 21.7277 32.5093 21.7277H31.6211V21.1503H32.4006C32.7243 21.1503 32.9866 20.888 32.9866 20.5644C32.9866 20.2408 32.7243 19.9784 32.4006 19.9784H31.6211V19.401H32.5093C32.833 19.401 33.0952 19.1387 33.0952 18.8151C33.0952 18.4915 32.833 18.2291 32.5093 18.2291H31.0352C30.7115 18.2291 30.4492 18.4915 30.4492 18.8151V22.3135C30.4492 22.6372 30.7115 22.8995 31.0352 22.8995H32.5093C32.833 22.8996 33.0952 22.6372 33.0952 22.3136Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M29.103 20.0419C28.6957 19.8916 28.3147 19.7286 28.1715 19.6662C28.151 19.6439 28.1433 19.615 28.1483 19.5798C28.1589 19.5062 28.2243 19.4461 28.3277 19.4149C28.7472 19.2887 29.1504 19.6006 29.1664 19.6134C29.4142 19.8177 29.7808 19.7848 29.9879 19.5384C30.1961 19.2908 30.1641 18.9211 29.9164 18.7129C29.5909 18.4393 28.8189 18.0428 27.9897 18.2928C27.4478 18.4561 27.0641 18.8854 26.9883 19.4134C26.9168 19.9122 27.1332 20.3922 27.5531 20.666C27.579 20.6828 27.6062 20.6976 27.6344 20.7102C27.655 20.7194 28.1455 20.9377 28.6974 21.1414C28.8825 21.2097 29.0906 21.3343 29.068 21.4609C29.0476 21.5747 28.8829 21.7431 28.5936 21.7431C28.2828 21.7431 27.9853 21.6194 27.7975 21.4122C27.5802 21.1724 27.2095 21.1543 26.9698 21.3715C26.7301 21.5888 26.7118 21.9594 26.9291 22.1992C27.3414 22.6542 27.9481 22.915 28.5937 22.915C29.408 22.915 30.0927 22.3901 30.2217 21.6669C30.3199 21.1171 30.0776 20.4014 29.103 20.0419Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M35.5662 22.9152C36.8627 22.9152 37.9175 21.8604 37.9175 20.5638C37.9175 19.2673 36.8627 18.2125 35.5662 18.2125C34.2696 18.2125 33.2148 19.2673 33.2148 20.5638C33.2148 21.8604 34.2696 22.9152 35.5662 22.9152ZM35.5662 19.3845C36.2165 19.3845 36.7456 19.9136 36.7456 20.5639C36.7456 21.2143 36.2166 21.7433 35.5662 21.7433C34.9158 21.7433 34.3868 21.2143 34.3868 20.5639C34.3868 19.9136 34.9158 19.3845 35.5662 19.3845Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M19.8972 14.9502C19.5204 14.5456 19.009 14.3174 18.4571 14.3076C18.0811 14.3009 17.724 14.395 17.4101 14.5778C17.0961 14.395 16.7369 14.301 16.3631 14.3076C15.8113 14.3174 15.2999 14.5456 14.923 14.9502C14.18 15.7479 14.2129 16.9877 14.9978 17.7727L16.4571 19.2319C16.7116 19.4865 17.0501 19.6267 17.4101 19.6267C17.7701 19.6267 18.1086 19.4865 18.3631 19.2319L19.8222 17.7727C20.6072 16.9877 20.6402 15.748 19.8972 14.9502ZM18.9936 16.944L17.5344 18.4033C17.4918 18.4458 17.4433 18.4547 17.4101 18.4547C17.3769 18.4547 17.3284 18.4458 17.2858 18.4033L15.8266 16.944C15.4957 16.613 15.475 16.0769 15.7806 15.7489C15.9386 15.5792 16.1529 15.4834 16.384 15.4793C16.3891 15.4793 16.3943 15.4792 16.3994 15.4792C16.6248 15.4792 16.8361 15.5666 16.9958 15.7264C17.2247 15.9552 17.5956 15.9552 17.8245 15.7264C17.9878 15.5631 18.2038 15.475 18.4363 15.4793C18.6673 15.4834 18.8815 15.5792 19.0397 15.7489C19.3452 16.077 19.3245 16.6131 18.9936 16.944Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M21.9906 28.1388H12.8125C12.4888 28.1388 12.2266 28.4011 12.2266 28.7247C12.2266 29.0484 12.4888 29.3107 12.8125 29.3107H21.9907C22.3144 29.3107 22.5767 29.0484 22.5767 28.7247C22.5767 28.4011 22.3143 28.1388 21.9906 28.1388Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M22.5766 31.9059C22.5766 31.5823 22.3143 31.3199 21.9906 31.3199H12.8125C12.4888 31.3199 12.2266 31.5823 12.2266 31.9059C12.2266 32.2295 12.4888 32.4919 12.8125 32.4919H21.9907C22.3143 32.4919 22.5766 32.2295 22.5766 31.9059Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M12.8125 34.5011C12.4888 34.5011 12.2266 34.7635 12.2266 35.0871C12.2266 35.4107 12.4888 35.673 12.8125 35.673H20.7213C21.045 35.673 21.3072 35.4107 21.3072 35.0871C21.3072 34.7635 21.045 34.5011 20.7213 34.5011H12.8125Z\" fill=\"#FC440C\" stroke=\"#FC440C\" stroke-width=\"0.0937529\"\/>\r\n<\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Search Engine<br>Optimization<\/span>\r\n <\/div>\r\n\r\n <!-- Website Development -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n<svg width=\"58\" height=\"52\" viewBox=\"0 0 58 52\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n\r\n<path d=\"M12.5352 8.34869C12.2115 8.34869 11.9492 8.61096 11.9492 8.93463C11.9492 9.2583 12.2115 9.52057 12.5352 9.52057H13.1545C13.4781 9.52057 13.7404 9.2583 13.7404 8.93463C13.7404 8.61096 13.4781 8.34869 13.1545 8.34869H12.5352Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M15.3906 9.52051H16.0099C16.3336 9.52051 16.5959 9.25824 16.5959 8.93457C16.5959 8.6109 16.3336 8.34863 16.0099 8.34863H15.3906C15.067 8.34863 14.8047 8.6109 14.8047 8.93457C14.8047 9.25824 15.067 9.52051 15.3906 9.52051Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M18.8653 9.52051C19.189 9.52051 19.4512 9.25824 19.4512 8.93457C19.4512 8.6109 19.189 8.34863 18.8653 8.34863H18.2461C17.9224 8.34863 17.6602 8.6109 17.6602 8.93457C17.6602 9.25824 17.9224 9.52051 18.2461 9.52051H18.8653Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M47.0322 6H16.3026C15.9789 6 15.7166 6.26227 15.7166 6.58594C15.7166 6.90961 15.9789 7.17188 16.3026 7.17188H47.0322C47.4711 7.17188 47.8281 7.52891 47.8281 7.96781V10.6974H10.1719V7.96781C10.1719 7.52891 10.529 7.17188 10.9679 7.17188H14.0369C14.3605 7.17188 14.6228 6.90961 14.6228 6.58594C14.6228 6.26227 14.3605 6 14.037 6H10.9679C9.88281 6 9 6.88281 9 7.96781V44.032C9 45.1172 9.88281 46 10.9679 46H23.2742C23.5979 46 23.8602 45.7377 23.8602 45.4141C23.8602 45.0904 23.5979 44.8281 23.2742 44.8281H10.9679C10.529 44.8281 10.1719 44.471 10.1719 44.0321V11.8694H47.8281V44.0321C47.8281 44.471 47.4711 44.8281 47.0322 44.8281H25.5399C25.2162 44.8281 24.954 45.0904 24.954 45.4141C24.954 45.7377 25.2162 46 25.5399 46H47.0322C48.1172 46 49 45.1172 49 44.0321V7.96781C49 6.88281 48.1172 6 47.0322 6Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M31.6675 21.2905C31.6675 20.9038 31.4763 20.5434 31.1562 20.3263L28.1521 18.2903C27.7943 18.0478 27.3349 18.0231 26.953 18.2256C26.5712 18.4281 26.334 18.8223 26.334 19.2545V23.3263C26.334 23.7585 26.5712 24.1527 26.953 24.3552C27.1247 24.4463 27.3122 24.4914 27.4989 24.4914C27.7275 24.4914 27.9552 24.4239 28.1521 24.2905L31.1561 22.2545C31.4763 22.0376 31.6675 21.6772 31.6675 21.2905ZM27.5059 23.3127L27.5059 19.2681L30.4899 21.2904L27.5059 23.3127Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M20.8853 16.6519H18.4082C18.0845 16.6519 17.8223 16.9141 17.8223 17.2378C17.8223 17.5615 18.0845 17.8237 18.4082 17.8237H20.8853C21.209 17.8237 21.4713 17.5615 21.4713 17.2378C21.4713 16.9141 21.2089 16.6519 20.8853 16.6519Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M20.8853 19.002H18.4082C18.0845 19.002 17.8223 19.2642 17.8223 19.5879C17.8223 19.9116 18.0845 20.1738 18.4082 20.1738H20.8853C21.209 20.1738 21.4713 19.9116 21.4713 19.5879C21.4713 19.2642 21.2089 19.002 20.8853 19.002Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M20.8853 21.3516H18.4082C18.0845 21.3516 17.8223 21.6138 17.8223 21.9375C17.8223 22.2612 18.0845 22.5234 18.4082 22.5234H20.8853C21.209 22.5234 21.4713 22.2612 21.4713 21.9375C21.4713 21.6138 21.2089 21.3516 20.8853 21.3516Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M20.8853 23.7012H18.4082C18.0845 23.7012 17.8223 23.9634 17.8223 24.2871C17.8223 24.6108 18.0845 24.873 18.4082 24.873H20.8853C21.209 24.873 21.4713 24.6108 21.4713 24.2871C21.4713 23.9634 21.2089 23.7012 20.8853 23.7012Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M37.1133 17.8237H39.5904C39.9141 17.8237 40.1763 17.5615 40.1763 17.2378C40.1763 16.9141 39.9141 16.6519 39.5904 16.6519H37.1133C36.7896 16.6519 36.5273 16.9141 36.5273 17.2378C36.5273 17.5615 36.7897 17.8237 37.1133 17.8237Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M37.1133 20.1738H39.5904C39.9141 20.1738 40.1763 19.9116 40.1763 19.5879C40.1763 19.2642 39.9141 19.002 39.5904 19.002H37.1133C36.7896 19.002 36.5273 19.2642 36.5273 19.5879C36.5273 19.9116 36.7897 20.1738 37.1133 20.1738Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M37.1133 22.5234H39.5904C39.9141 22.5234 40.1763 22.2612 40.1763 21.9375C40.1763 21.6138 39.9141 21.3516 39.5904 21.3516H37.1133C36.7896 21.3516 36.5273 21.6138 36.5273 21.9375C36.5273 22.2612 36.7897 22.5234 37.1133 22.5234Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M37.1133 24.873H39.5904C39.9141 24.873 40.1763 24.6108 40.1763 24.2871C40.1763 23.9634 39.9141 23.7012 39.5904 23.7012H37.1133C36.7896 23.7012 36.5273 23.9634 36.5273 24.2871C36.5273 24.6108 36.7897 24.873 37.1133 24.873Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M22.997 33.8622V32.3656C22.997 31.7722 22.5141 31.2896 21.9208 31.2896H15.6875C15.0941 31.2896 14.6113 31.7723 14.6113 32.3656V33.8622C14.6113 34.4556 15.0941 34.9384 15.6875 34.9384H21.9208C22.5142 34.9384 22.997 34.4556 22.997 33.8622ZM21.8251 33.7665H15.7831V32.4613H21.8251V33.7665Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M34.6094 31.29C34.0159 31.29 33.5332 31.7728 33.5332 32.3661V33.8627C33.5332 34.4561 34.016 34.9389 34.6094 34.9389H42.4051C42.9985 34.9389 43.4813 34.4561 43.4813 33.8627V32.3661C43.4813 31.7727 42.9984 31.29 42.4051 31.29H34.6094ZM42.3094 33.7671H34.7051V32.4619H42.3095L42.3094 33.7671Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M15.6875 39.6157C15.0941 39.6157 14.6113 40.0985 14.6113 40.6919V42.1885C14.6113 42.7819 15.0941 43.2646 15.6875 43.2646H20.3583C20.9517 43.2646 21.4345 42.7818 21.4345 42.1885V40.6919C21.4345 40.0985 20.9516 39.6157 20.3583 39.6157H15.6875ZM20.2626 42.0928H15.7831V40.7876H20.2626V42.0928Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M30.6531 42.1885V40.6919C30.6531 40.0985 30.1704 39.6157 29.577 39.6157H24.9062C24.3128 39.6157 23.8301 40.0985 23.8301 40.6919V42.1885C23.8301 42.7819 24.3129 43.2645 24.9062 43.2645H29.577C30.1704 43.2645 30.6531 42.7819 30.6531 42.1885ZM29.4812 42.0927H25.0019V40.7875H29.4812V42.0927Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M38.7977 39.6157H34.127C33.5335 39.6157 33.0508 40.0985 33.0508 40.6919V42.1885C33.0508 42.7819 33.5336 43.2646 34.127 43.2646H38.7977C39.3911 43.2646 39.8738 42.7818 39.8738 42.1885V40.6919C39.8738 40.0985 39.3911 39.6157 38.7977 39.6157ZM38.702 42.0928H34.2226V40.7876H38.702V42.0928Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M23.8027 39.101H38.6298C39.2232 39.101 39.7059 38.6182 39.7059 38.0249V36.5283C39.7059 35.9349 39.2231 35.4521 38.6298 35.4521H23.8027C23.2093 35.4521 22.7266 35.935 22.7266 36.5283V38.0249C22.7265 38.6182 23.2093 39.101 23.8027 39.101ZM23.8984 36.6239H38.534V37.929H23.8984V36.6239Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<path d=\"M40.947 13.7383H17.0537C16.0903 13.7383 15.3066 14.522 15.3066 15.4854V27.0966C15.3066 28.0599 16.0903 28.8437 17.0537 28.8437H29.2684C29.592 28.8437 29.8543 28.5814 29.8543 28.2577C29.8543 27.9341 29.592 27.6718 29.2684 27.6718H17.0537C16.7365 27.6718 16.4785 27.4138 16.4785 27.0966V15.4854C16.4785 15.1681 16.7366 14.9102 17.0537 14.9102H40.947C41.2642 14.9102 41.5222 15.1682 41.5222 15.4854V27.0966C41.5222 27.4138 41.2641 27.6718 40.947 27.6718H31.534C31.2103 27.6718 30.948 27.9341 30.948 28.2577C30.948 28.5814 31.2103 28.8437 31.534 28.8437H40.947C41.9104 28.8437 42.6941 28.0599 42.6941 27.0966V15.4854C42.6941 14.522 41.9104 13.7383 40.947 13.7383Z\" fill=\"#060690\" stroke=\"#060690\" stroke-width=\"0.0937529\"\/>\r\n<\/svg>\r\n\r\n <\/div>\r\n <span class=\"sg-label\">Website<br>Development<\/span>\r\n <\/div>\r\n\r\n <!-- Brand Naming Services -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"16\"\/><circle cx=\"24\" cy=\"24\" r=\"8\"\/><circle cx=\"24\" cy=\"24\" r=\"2\" fill=\"#3b5bdb\"\/><line x1=\"24\" y1=\"8\" x2=\"24\" y2=\"16\"\/><line x1=\"24\" y1=\"32\" x2=\"24\" y2=\"40\"\/><line x1=\"8\" y1=\"24\" x2=\"16\" y2=\"24\"\/><line x1=\"32\" y1=\"24\" x2=\"40\" y2=\"24\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Brand Naming<br>Services<\/span>\r\n <\/div>\r\n\r\n <!-- Brand Naming Services 2 -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><path d=\"M24 8 L28 18 L38 18 L30 25 L33 35 L24 29 L15 35 L18 25 L10 18 L20 18 Z\"\/><circle cx=\"24\" cy=\"22\" r=\"3\" fill=\"#3b5bdb\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Brand Naming<br>Services<\/span>\r\n <\/div>\r\n\r\n <!-- E-Commerce Development -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><path d=\"M8 10 H14 L18 28 H36 L40 16 H18\"\/><circle cx=\"20\" cy=\"34\" r=\"3\"\/><circle cx=\"34\" cy=\"34\" r=\"3\"\/><rect x=\"22\" y=\"18\" width=\"10\" height=\"8\" rx=\"2\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">E-Commerce<br>Development<\/span>\r\n <\/div>\r\n\r\n <!-- Logo Naming & Designing -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"20\" r=\"12\"\/><path d=\"M14 34 Q24 44 34 34\"\/><line x1=\"20\" y1=\"17\" x2=\"28\" y2=\"23\"\/><line x1=\"28\" y1=\"17\" x2=\"20\" y2=\"23\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Logo Naming &<br>Designing<\/span>\r\n <\/div>\r\n\r\n <!-- LinkedIn Profile Management -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><rect x=\"8\" y=\"8\" width=\"32\" height=\"32\" rx=\"6\"\/><line x1=\"16\" y1=\"22\" x2=\"16\" y2=\"34\"\/><line x1=\"16\" y1=\"16\" x2=\"16\" y2=\"18\"\/><line x1=\"22\" y1=\"22\" x2=\"22\" y2=\"34\"\/><path d=\"M22 27 Q22 22 28 22 Q34 22 34 28 L34 34\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">LinkedIn Profile<br>Management<\/span>\r\n <\/div>\r\n\r\n <!-- WordPress Development -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"16\"\/><path d=\"M10 24 Q14 20 18 24 Q22 28 24 24 Q26 20 30 24 Q34 28 38 24\"\/><line x1=\"24\" y1=\"8\" x2=\"24\" y2=\"40\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">WordPress<br>Development<\/span>\r\n <\/div>\r\n\r\n <!-- Business Card Designing -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><rect x=\"6\" y=\"14\" width=\"36\" height=\"22\" rx=\"3\"\/><line x1=\"14\" y1=\"22\" x2=\"24\" y2=\"22\"\/><line x1=\"14\" y1=\"27\" x2=\"20\" y2=\"27\"\/><rect x=\"28\" y=\"20\" width=\"10\" height=\"8\" rx=\"1\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Business Card<br>Designing<\/span>\r\n <\/div>\r\n\r\n <!-- Google Paid Ads (PPC) -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"14\"\/><path d=\"M24 10 A14 14 0 0 1 38 24\"\/><line x1=\"24\" y1=\"10\" x2=\"24\" y2=\"38\"\/><line x1=\"10\" y1=\"24\" x2=\"38\" y2=\"24\"\/><circle cx=\"24\" cy=\"24\" r=\"3\" fill=\"#3b5bdb\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Google Paid<br>Ads (PPC)<\/span>\r\n <\/div>\r\n\r\n <!-- Mobile App Development -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><rect x=\"16\" y=\"6\" width=\"16\" height=\"36\" rx=\"4\"\/><line x1=\"16\" y1=\"14\" x2=\"32\" y2=\"14\"\/><line x1=\"16\" y1=\"34\" x2=\"32\" y2=\"34\"\/><circle cx=\"24\" cy=\"39\" r=\"1.5\" fill=\"#3b5bdb\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Mobile App<br>Development<\/span>\r\n <\/div>\r\n\r\n <!-- Letterhead Designing -->\r\n <div class=\"sg-card\">\r\n <div class=\"sg-icon\">\r\n <svg viewBox=\"0 0 48 48\"><rect x=\"10\" y=\"8\" width=\"28\" height=\"34\" rx=\"3\"\/><line x1=\"16\" y1=\"18\" x2=\"32\" y2=\"18\"\/><line x1=\"16\" y1=\"24\" x2=\"32\" y2=\"24\"\/><line x1=\"16\" y1=\"30\" x2=\"26\" y2=\"30\"\/><rect x=\"10\" y=\"8\" width=\"28\" height=\"6\" rx=\"3\" fill=\"rgba(59,91,219,0.2)\"\/><\/svg>\r\n <\/div>\r\n <span class=\"sg-label\">Letterhead<br>Designing<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-05cf363 e-flex e-con-boxed e-con e-parent\" data-id=\"05cf363\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22893e5 elementor-widget elementor-widget-html\" data-id=\"22893e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Our Growth in Numbers<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\"\/>\r\n <style>\r\n .gn-wrapper *, .gn-wrapper *::before, .gn-wrapper *::after { box-sizing: border-box; }\r\n\r\n :root {\r\n --blue: #2323d4;\r\n --orange: #f04f0e;\r\n --bg: #ffffff;\r\n --card-bg: #f0f2f8;\r\n --text-main: #111111;\r\n --text-muted: #6b6b80;\r\n }\r\n\r\n .gn-wrapper {\r\n font-family: 'Figtree', sans-serif;\r\n background: var(--bg);\r\n color: var(--text-main);\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 60px 40px;\r\n}\r\n\r\n .gn-section {\r\n max-width: 100% !important;\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr 1.1fr;\r\n gap: 60px;\r\n align-items: center;\r\n}\r\n\r\n .gn-left {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n animation: fadeUp 0.6s ease both;\r\n }\r\n\r\n .gn-left h2 {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 36px;\r\n font-weight: 700;\r\n line-height: 1.2;\r\n letter-spacing: -0.5px;\r\n color: var(--text-main);\r\n }\r\n\r\n .gn-left p {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: var(--text-muted);\r\n line-height: 1.7;\r\n max-width: 380px;\r\n }\r\n\r\n .gn-btn {\r\n display: inline-block;\r\n background: #FC440C;\r\n color: #FFF;\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n padding: 13px 30px;\r\n border-radius: 8px;\r\n border: none;\r\n cursor: pointer;\r\n width: fit-content;\r\n letter-spacing: 0.01em;\r\n transition: opacity 0.2s, transform 0.2s;\r\n }\r\n\r\n .gn-btn:hover {\r\n opacity: 0.88;\r\n transform: translateY(-1px);\r\n }\r\n\r\n .gn-office-img {\r\n width: 100%;\r\n max-width: 440px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n aspect-ratio: 4\/3;\r\n background: #c8cad8;\r\n }\r\n\r\n .gn-office-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n .gn-right {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .gn-stat-card {\r\n background: var(--card-bg);\r\n border-radius: 20px;\r\n padding: 36px 24px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: 8px;\r\n transition: transform 0.25s, box-shadow 0.25s;\r\n }\r\n\r\n .gn-stat-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 14px 36px rgba(35, 35, 212, 0.10);\r\n }\r\n\r\n .gn-stat-number {\r\n font-family: 'Figtree', sans-serif;\r\n font-weight: 700;\r\n font-size: 48px;\r\n color: var(--blue);\r\n line-height: 1;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .gn-stat-label {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--text-main);\r\n margin-top: 4px;\r\n }\r\n\r\n .gn-stat-desc {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: var(--text-muted);\r\n line-height: 1.65;\r\n margin-top: 2px;\r\n }\r\n\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(24px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .gn-left { animation: fadeUp 0.6s 0.0s ease both; }\r\n .gn-stat-card:nth-child(1) { animation: fadeUp 0.5s 0.1s ease both; }\r\n .gn-stat-card:nth-child(2) { animation: fadeUp 0.5s 0.2s ease both; }\r\n .gn-stat-card:nth-child(3) { animation: fadeUp 0.5s 0.3s ease both; }\r\n .gn-stat-card:nth-child(4) { animation: fadeUp 0.5s 0.4s ease both; }\r\n\r\n @media (max-width: 768px) {\r\n .gn-section {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .gn-office-img {\r\n max-width: 100%;\r\n }\r\n .gn-wrapper {\r\n padding: 40px 20px;\r\n }\r\n .gn-left h2 {\r\n font-size: 26px;\r\n }\r\n .gn-left p {\r\n font-size: 14px;\r\n max-width: 100%;\r\n }\r\n .gn-right {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .gn-stat-card {\r\n padding: 24px 16px;\r\n }\r\n .gn-stat-number {\r\n font-size: 34px;\r\n }\r\n .gn-stat-label {\r\n font-size: 14px;\r\n }\r\n .gn-stat-desc {\r\n font-size: 12px;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"gn-wrapper\">\r\n<section class=\"gn-section\">\r\n\r\n <!-- LEFT -->\r\n <div class=\"gn-left\">\r\n <h2>Our Growth in Numbers<\/h2>\r\n <p>Our growth is more than just words\u2014it's in the numbers. Discover how we've scaled our operations, improved results<\/p>\r\n <button class=\"gn-btn\">View More<\/button>\r\n <div class=\"gn-office-img\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/Image.png\" alt=\"Office\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT: Stats Grid -->\r\n <div class=\"gn-right\">\r\n <div class=\"gn-stat-card\">\r\n <div class=\"gn-stat-number\">200+<\/div>\r\n <div class=\"gn-stat-label\">Active Clients<\/div>\r\n <div class=\"gn-stat-desc\">Our active clients are at the heart of everything we do. We're proud to collaborate.<\/div>\r\n <\/div>\r\n <div class=\"gn-stat-card\">\r\n <div class=\"gn-stat-number\">55M<\/div>\r\n <div class=\"gn-stat-label\">Revenue Generated<\/div>\r\n <div class=\"gn-stat-desc\">Our strategies have helped generate substantial revenue, reflecting our ability to turn opportunities.<\/div>\r\n <\/div>\r\n <div class=\"gn-stat-card\">\r\n <div class=\"gn-stat-number\">89+<\/div>\r\n <div class=\"gn-stat-label\">Orders in Queue<\/div>\r\n <div class=\"gn-stat-desc\">Our orders in queue reflect the trust clients place in us. We're actively processing orders with precision.<\/div>\r\n <\/div>\r\n <div class=\"gn-stat-card\">\r\n <div class=\"gn-stat-number\">175+<\/div>\r\n <div class=\"gn-stat-label\">Team Members<\/div>\r\n <div class=\"gn-stat-desc\">Our team members are the backbone of our success, bringing expertise and dedication to every project.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c3b17f4 e-con-full e-flex e-con e-parent\" data-id=\"c3b17f4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dd0f8b0 elementor-widget elementor-widget-html\" data-id=\"dd0f8b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Portfolio Section<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n \r\n\r\n .portfolio-section {\r\n padding: 80px 60px;\r\n width: 1000%;\r\n max-width: 100% !important;\r\n background: #fff;\r\n box-sizing: border-box;\r\n}\r\n\r\n .portfolio-header {\r\n text-align: center;\r\n margin-bottom: 56px;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n\r\n .portfolio-header h2 {\r\n font-size: 31px;\r\n font-weight: 700;\r\n color: #0d0d1a;\r\n margin-bottom: 14px;\r\n line-height: 1.3;\r\n text-align: center;\r\n }\r\n\r\n .portfolio-header p {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #666;\r\n max-width: 580px;\r\n margin: 0 auto;\r\n line-height: 1.7;\r\n text-align: center;\r\n }\r\n\r\n .portfolio-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 40px 32px;\r\n margin-bottom: 52px;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }\r\n .portfolio-section { padding: 60px 30px; }\r\n .portfolio-header h2 { font-size: 26px; }\r\n .portfolio-header p { font-size: 14px; }\r\n}\r\n\r\n@media (max-width: 560px) {\r\n .portfolio-grid { grid-template-columns: 1fr; gap: 32px; }\r\n .portfolio-section { padding: 40px 16px; }\r\n .portfolio-header h2 { font-size: 22px; }\r\n .portfolio-header p { font-size: 14px; }\r\n .portfolio-header { margin-bottom: 32px; }\r\n .portfolio-card-title a { font-size: 0.95rem; }\r\n .portfolio-btn-more { padding: 12px 28px; font-size: 14px; }\r\n}\r\n @media (max-width: 560px) {\r\n .portfolio-grid { grid-template-columns: 1fr; }\r\n .portfolio-section { padding: 40px 16px; }\r\n }\r\n\r\n .portfolio-img {\r\n width: 100%;\r\n border-radius: 12px;\r\n margin-bottom: 20px;\r\n display: block;\r\n }\r\n\r\n \/* \u2500\u2500 Card Text \u2500\u2500 *\/\r\n .portfolio-card-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .portfolio-card-title a {\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n color: #0d0d1a;\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n\r\n .portfolio-card-title a:hover { color: #0808C4; }\r\n\r\n .portfolio-arrow-btn {\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 50%;\r\n background: #0d0d1a;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: background 0.2s, transform 0.2s;\r\n }\r\n\r\n .portfolio-card-title:hover .portfolio-arrow-btn {\r\n background: #0808C4;\r\n transform: translateX(3px);\r\n }\r\n\r\n .portfolio-arrow-btn svg {\r\n width: 13px;\r\n height: 13px;\r\n stroke: #fff;\r\n fill: none;\r\n stroke-width: 2.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .portfolio-card-desc {\r\n font-size: 0.83rem;\r\n color: #777;\r\n line-height: 1.65;\r\n }\r\n\r\n \/* \u2500\u2500 View More Button \u2500\u2500 *\/\r\n .portfolio-btn-wrap {\r\n text-align: center;\r\n }\r\n\r\n .portfolio-btn-more {\r\n display: inline-block;\r\n padding: 13px 36px;\r\n background: #FC440C;\r\n color: #fff !important;\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 16px;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n text-decoration: none;\r\n transition: background 0.2s, transform 0.2s;\r\n }\r\n\r\n .portfolio-btn-more:hover {\r\n background: #e04820;\r\n transform: translateY(-2px);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<section class=\"portfolio-section\">\r\n\r\n <div class=\"portfolio-header\">\r\n <h2>Designed from scratch, custom built and delivered with passion<\/h2>\r\n <p>We don't just manage SEO. We drive growth with enterprise-focused strategies that align with your scale, boost visibility, increase conversions, and deliver measurable business impact where it actually matters.<\/p>\r\n <\/div>\r\n\r\n <div class=\"portfolio-grid\">\r\n\r\n <!-- CARD 1 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project1.webp\" alt=\"Project 1\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum dolor<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Tincidunt sed eu ornare neque sed.<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 2 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project2.webp\" alt=\"Project 2\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Non cum libero volutpat sem risus.<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 3 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project3.webp\" alt=\"Project 3\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum dolor<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Sollicitudin purus.<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 4 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project4.webp\" alt=\"Project 4\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum dolor<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Tincidunt sed eu ornare neque sed.<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 5 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project5.webp\" alt=\"Project 5\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Non cum libero volutpat sem risus.<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 6 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project6.webp\" alt=\"Project 6\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum dolor<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Sollicitudin purus.<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 7 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project7.webp\" alt=\"Project 7\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum dolor<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Sollicitudin purus.<\/p>\r\n <\/div>\r\n\r\n <!-- CARD 8 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project8.webp\" alt=\"Project 8\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum dolor<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Sollicitudin purus.<\/p>\r\n <\/div>\r\n <!-- CARD 9 -->\r\n <div class=\"portfolio-card\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/project9.webp\" alt=\"Project 8\" class=\"portfolio-img\"\/>\r\n <div class=\"portfolio-card-title\">\r\n <a href=\"#\">Lorem ipsum dolor<\/a>\r\n <div class=\"portfolio-arrow-btn\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <p class=\"portfolio-card-desc\">Lorem ipsum dolor sit amet consectetur. Sollicitudin purus.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-btn-wrap\">\r\n <a href=\"#\" class=\"portfolio-btn-more\">View More<\/a>\r\n <\/div>\r\n\r\n<\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-96e1c1b e-con-full e-flex e-con e-parent\" data-id=\"96e1c1b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b655c2d elementor-widget elementor-widget-html\" data-id=\"b655c2d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t <!DOCTYPE html>\r\n <html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\"\/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n <title>Case Studies<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n .cs-section {\r\n padding: 80px 60px;\r\n background: #fff;\r\n font-family: 'Figtree', sans-serif;\r\n }\r\n \r\n .cs-header {\r\n text-align: center;\r\n margin-bottom: 48px;\r\n }\r\n \r\n .cs-header h2 {\r\n font-size: 31px;\r\n font-weight: 700;\r\n color: #0d0d1a;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .cs-header p {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #000;\r\n max-width: 820px;\r\n margin: 0 auto;\r\n line-height: 1.6;\r\n }\r\n \r\n .cs-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 28px;\r\n margin-bottom: 48px;\r\n }\r\n \r\n @media (max-width: 900px) {\r\n .cs-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n .cs-section { padding: 60px 30px; }\r\n .cs-header h2 { font-size: 26px; }\r\n .cs-header p { font-size: 14px; }\r\n}\r\n\r\n@media (max-width: 560px) {\r\n .cs-grid { grid-template-columns: 1fr; gap: 24px; }\r\n .cs-section { padding: 40px 16px; }\r\n .cs-header h2 { font-size: 22px; }\r\n .cs-header p { font-size: 14px; }\r\n .cs-header { margin-bottom: 32px; }\r\n .cs-card-img { height: 160px; }\r\n .cs-stat-value { font-size: 24px; }\r\n .cs-stat { padding: 6px 8px; }\r\n .cs-stats { padding: 16px 10px; }\r\n .cs-btn-more { padding: 12px 28px; font-size: 0.88rem; }\r\n .cs-btn-study { padding: 9px 20px; font-size: 0.78rem; }\r\n}\r\n \r\n \/* Card *\/\r\n .cs-card {\r\n border: 1px solid #e8e8f0;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n background: #fff;\r\n box-shadow: 0 2px 12px rgba(0,0,0,0.06);\r\n }\r\n \r\n .cs-card-img {\r\n width: 100%;\r\n height: 190px;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n \r\n .cs-card-img-placeholder {\r\n width: 100%;\r\n height: 190px;\r\n background: #e8e8f0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #aaa;\r\n font-size: 0.85rem;\r\n }\r\n \r\n .cs-card-body {\r\n padding: 18px 18px 0;\r\n flex: 1;\r\n }\r\n \r\n .cs-card-title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n color: #0d0d1a;\r\n line-height: 1.4;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .cs-card-desc {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #777;\r\n line-height: 1.65;\r\n margin-bottom: 16px;\r\n }\r\n \r\n \/* Stats *\/\r\n .cs-stats {\r\n display: flex;\r\n justify-content: space-around;\r\n padding: 24px 18px 24px;\r\n background: #FFF8F6;\r\n}\r\n .cs-stat {\r\n text-align: center;\r\n flex: 1;\r\n padding: 8px 16px;\r\n}\r\n \r\n .cs-stat-value {\r\n font-size: 24px;\r\n font-weight: 700;\r\n color: #ff5a2c;\r\n display: block;\r\n line-height: 1.2;\r\n }\r\n \r\n .cs-stat-label {\r\n font-size: 0.70rem;\r\n color: #888;\r\n margin-top: 4px;\r\n display: block;\r\n line-height: 1.3;\r\n }\r\n \r\n \/* Button inside card *\/\r\n .cs-card-footer {\r\n padding: 14px 18px 18px;\r\n text-align: center;\r\n background: #FFF8F6;\r\n}\r\n \r\n .cs-btn-study {\r\n display: inline-block;\r\n padding: 10px 26px;\r\n background: #ff5a2c;\r\n color: #fff !important;\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 0.82rem;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n text-decoration: none !important;\r\n transition: background 0.2s, transform 0.2s;\r\n }\r\n \r\n .cs-btn-study:hover {\r\n background: #e04820;\r\n transform: translateY(-2px);\r\n }\r\n \r\n \/* View More *\/\r\n .cs-btn-wrap {\r\n text-align: center;\r\n }\r\n \r\n .cs-btn-more {\r\n display: inline-block;\r\n padding: 13px 36px;\r\n background: #FC440C;\r\n color: #fff !important;\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n text-decoration: none !important;\r\n transition: background 0.2s, transform 0.2s;\r\n }\r\n \r\n .cs-btn-more:hover {\r\n background: #e04820;\r\n transform: translateY(-2px);\r\n }\r\n \r\n .cs-loading {\r\n text-align: center;\r\n padding: 60px 0;\r\n color: #888;\r\n font-size: 0.95rem;\r\n grid-column: 1 \/ -1;\r\n }\r\n \r\n .cs-error {\r\n text-align: center;\r\n padding: 40px 0;\r\n color: #e04820;\r\n font-size: 0.9rem;\r\n grid-column: 1 \/ -1;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <section class=\"cs-section\">\r\n \r\n <div class=\"cs-header\">\r\n <h2>Case Studies<\/h2>\r\n <p>Lorem ipsum dolor sit amet consectetur. Pharetra risus magna vel donec nunc habitasse amet cursus.<\/p>\r\n <\/div>\r\n \r\n <div class=\"cs-grid\" id=\"cs-grid\">\r\n <div class=\"cs-loading\">Loading case studies...<\/div>\r\n <\/div>\r\n \r\n <div class=\"cs-btn-wrap\">\r\n <a href=\"https:\/\/awrange.com\/case-studies\/\" class=\"cs-btn-more\">View All Case Studies<\/a>\r\n <\/div>\r\n \r\n <\/section>\r\n \r\n <script>\r\n const API = 'https:\/\/awrange.com\/wp-json\/wp\/v2\/case-studies?per_page=3&_embed&acf_format=standard';\r\n \r\n fetch(API)\r\n .then(res => res.json())\r\n .then(posts => {\r\n const grid = document.getElementById('cs-grid');\r\n grid.innerHTML = '';\r\n \r\n if (!posts.length) {\r\n grid.innerHTML = '<div class=\"cs-error\">No case studies found.<\/div>';\r\n return;\r\n }\r\n \r\n posts.forEach(post => {\r\n \/\/ Featured image\r\n let imgHTML = '<div class=\"cs-card-img-placeholder\">No Image<\/div>';\r\n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\r\n const imgUrl = post._embedded['wp:featuredmedia'][0].source_url;\r\n imgHTML = `<img decoding=\"async\" src=\"${imgUrl}\" alt=\"${post.title.rendered}\" class=\"cs-card-img\"\/>`;\r\n }\r\n \r\n const title = post.title.rendered || '';\r\n \r\n const excerpt = post.excerpt && post.excerpt.rendered\r\n ? post.excerpt.rendered.replace(\/<[^>]+>\/g, '').trim().substring(0, 130) + '...'\r\n : '';\r\n \r\n const statsHTML = `\r\n <div class=\"cs-stats\">\r\n <div class=\"cs-stat\">\r\n <span class=\"cs-stat-value\">122%<\/span>\r\n <span class=\"cs-stat-label\">Traffic Growth<\/span>\r\n <\/div>\r\n <div class=\"cs-stat\">\r\n <span class=\"cs-stat-value\">3.59s<\/span>\r\n <span class=\"cs-stat-label\">Load Time<\/span>\r\n <\/div>\r\n <div class=\"cs-stat\">\r\n <span class=\"cs-stat-value\">213%<\/span>\r\n <span class=\"cs-stat-label\">Organic Users<\/span>\r\n <\/div>\r\n <\/div>`;\r\n\r\n grid.innerHTML += `\r\n <div class=\"cs-card\">\r\n ${imgHTML}\r\n <div class=\"cs-card-body\">\r\n <div class=\"cs-card-title\">${title}<\/div>\r\n <p class=\"cs-card-desc\">${excerpt}<\/p>\r\n <\/div>\r\n ${statsHTML}\r\n <div class=\"cs-card-footer\">\r\n <a href=\"${post.link}\" class=\"cs-btn-study\">View Case Study<\/a>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n })\r\n .catch(err => {\r\n document.getElementById('cs-grid').innerHTML =\r\n '<div class=\"cs-error\">Failed to load case studies. Please try again.<\/div>';\r\n console.error(err);\r\n });\r\n <\/script>\r\n \r\n <\/body>\r\n <\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-92e4f86 e-con-full e-flex e-con e-parent\" data-id=\"92e4f86\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79ddd78 elementor-widget elementor-widget-html\" data-id=\"79ddd78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Services Section<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=Caveat:wght@500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n#svca-outer {\r\n width: 100%;\r\n font-family: 'Figtree', sans-serif;\r\n}\r\n\r\n\/* \u2500\u2500 Page header \u2500\u2500 *\/\r\n#svca-outer .svca-page-header {\r\n text-align: center;\r\n padding: 48px 16px 24px;\r\n background: #f5f5f5;\r\n}\r\n#svca-outer .svca-page-header h1 {\r\n font-size: 36px; font-weight: 800; color: #111118;\r\n letter-spacing: -0.02em; margin-bottom: 12px;\r\n}\r\n#svca-outer .svca-page-header p {\r\n font-size: 15px; color: #6b7280;\r\n max-width: 560px; margin: 0 auto; line-height: 1.7;\r\n}\r\n\r\n\/* \u2500\u2500 Sticky scroll container \u2500\u2500 *\/\r\n#svca-outer .svca-sticky-wrap {\r\n position: relative;\r\n}\r\n\r\n\/* Each panel is sticky and stacks *\/\r\n#svca-outer .svca-panel {\r\n position: sticky;\r\n top: 120px;\r\n width: 100%;\r\n height: calc(100vh - 120px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0 20px 20px;\r\n overflow: hidden;\r\n transition: opacity 0.8s ease, transform 0.8s ease;\r\n}\r\n\r\n\/* The spacer that creates scroll room for each panel *\/\r\n#svca-outer .svca-panel-spacer {\r\n height: 0vh;\r\n}\r\n\r\n\/* \u2500\u2500 TOP ROW \u2500\u2500 *\/\r\n#svca-outer .svca-top-row {\r\n display: grid;\r\n grid-template-columns: 300px 1fr 460px;\r\n align-items: stretch;\r\n width: 100%;\r\n max-width: 1300px;\r\n min-height: 500px;\r\n position: relative;\r\n}\r\n\r\n\/* \u2500\u2500 LEFT \u2500\u2500 *\/\r\n#svca-outer .svca-col-left {\r\n padding: 40px 24px 40px 8px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n#svca-outer .svca-eyebrow {\r\n display: flex; align-items: center; gap: 8px;\r\n font-size: 11px; font-weight: 700;\r\n letter-spacing: 0.14em; text-transform: uppercase;\r\n margin-bottom: 14px;\r\n}\r\n#svca-outer .svca-eyebrow-dot {\r\n width: 8px; height: 8px; border-radius: 50%;\r\n}\r\n#svca-outer .svca-headline {\r\n font-size: 40px; font-weight: 900;\r\n line-height: 1.08; color: #111118;\r\n margin-bottom: 12px; letter-spacing: -0.02em;\r\n}\r\n#svca-outer .svca-h-divider {\r\n width: 36px; height: 3px;\r\n border-radius: 2px; margin-bottom: 16px;\r\n}\r\n#svca-outer .svca-subtext {\r\n font-size: 14px; line-height: 1.75; color: #6b7280;\r\n max-width: 250px; margin-bottom: 24px;\r\n}\r\n#svca-outer .svca-cta-link {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n font-size: 13px; font-weight: 600; text-decoration: none;\r\n transition: opacity .2s;\r\n}\r\n#svca-outer .svca-cta-link:hover { opacity: 0.7; }\r\n#svca-outer .svca-cta-link svg { width: 15px; height: 15px; transition: transform .2s; }\r\n#svca-outer .svca-cta-link:hover svg { transform: translateX(3px); }\r\n#svca-outer .svca-star-block { display: flex; align-items: center; gap: 16px; margin-top: 24px; }\r\n#svca-outer .svca-star-circle {\r\n width: 68px; height: 68px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n#svca-outer .svca-star-svg {\r\n width: 32px; height: 32px;\r\n animation: svcaSpinStar 10s linear infinite;\r\n}\r\n@keyframes svcaSpinStar { to { transform: rotate(360deg); } }\r\n#svca-outer .svca-ideas-text {\r\n font-family: 'Caveat', cursive;\r\n font-size: 20px; font-weight: 500;\r\n line-height: 1.3; color: inherit;\r\n}\r\n\r\n\/* \u2500\u2500 MIDDLE \u2500\u2500 *\/\r\n#svca-outer .svca-col-middle {\r\n position: relative;\r\n padding: 16px 0;\r\n z-index: 2;\r\n}\r\n#svca-outer .svca-svc-list {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n height: 100%;\r\n padding: 16px 0;\r\n}\r\n#svca-outer .svca-svc-row {\r\n display: flex;\r\n align-items: flex-start;\r\n cursor: pointer;\r\n padding: 10px 10px;\r\n position: relative;\r\n transition: opacity .3s;\r\n}\r\n#svca-outer .svca-icon-bubble {\r\n width: 50px; height: 50px; border-radius: 50%;\r\n background: #fff;\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n transition: background .25s, border-color .25s, transform .3s cubic-bezier(.34,1.56,.64,1);\r\n box-shadow: 0 2px 12px rgba(0,0,0,.08);\r\n position: relative; z-index: 4;\r\n border: 1.5px solid #e0e0e8;\r\n}\r\n#svca-outer .svca-svc-row:hover .svca-icon-bubble,\r\n#svca-outer .svca-svc-row.svca-active .svca-icon-bubble {\r\n transform: scale(1.08);\r\n}\r\n#svca-outer .svca-icon-bubble svg {\r\n width: 20px; height: 20px; fill: none;\r\n stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;\r\n}\r\n#svca-outer .svca-svc-content { flex: 1; padding-left: 16px; }\r\n#svca-outer .svca-title-row {\r\n display: flex; align-items: center; margin-bottom: 4px;\r\n}\r\n#svca-outer .svca-svc-title {\r\n font-size: 14px; font-weight: 700; color: #111118;\r\n white-space: nowrap;\r\n}\r\n#svca-outer .svca-svc-line {\r\n flex: 1; height: 1px; background: #d0d0e8;\r\n margin: 0 10px;\r\n transform-origin: left; transform: scaleX(0);\r\n transition: transform .35s cubic-bezier(.4,0,.2,1);\r\n}\r\n#svca-outer .svca-svc-row:hover .svca-svc-line,\r\n#svca-outer .svca-svc-row.svca-active .svca-svc-line { transform: scaleX(1); }\r\n#svca-outer .svca-arrow-btn {\r\n width: 28px; height: 28px; border-radius: 50%;\r\n border: 1.5px solid #d0d0e8; background: #fff;\r\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\r\n transition: background .2s, border-color .2s, transform .25s;\r\n}\r\n#svca-outer .svca-svc-row:hover .svca-arrow-btn,\r\n#svca-outer .svca-svc-row.svca-active .svca-arrow-btn {\r\n transform: translateX(6px);\r\n}\r\n#svca-outer .svca-arrow-btn svg { width: 11px; height: 11px; fill: none; stroke-width: 2.2; }\r\n#svca-outer .svca-svc-desc { font-size: 12.5px; color: #6b7280; line-height: 1.6; max-width: 220px; }\r\n\r\n\/* \u2500\u2500 PATH OVERLAY \u2500\u2500 *\/\r\n#svca-outer .svca-path-overlay {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n overflow: visible;\r\n}\r\n\r\n\/* \u2500\u2500 RIGHT \u2500\u2500 *\/\r\n#svca-outer .svca-col-right {\r\n border-radius: 16px; overflow: hidden;\r\n position: relative; background: #e5e2f0;\r\n z-index: 2; margin-left: 16px;\r\n}\r\n#svca-outer .svca-img-grid {\r\n position: absolute; inset: 0;\r\n display: none;\r\n grid-template-rows: 58% 42%;\r\n grid-template-columns: 54% 46%;\r\n opacity: 0;\r\n}\r\n#svca-outer .svca-img-grid.svca-active {\r\n display: grid;\r\n animation: svcaFadeGrid .4s cubic-bezier(.4,0,.2,1) forwards;\r\n}\r\n@keyframes svcaFadeGrid {\r\n from { opacity:0; transform:scale(.97); }\r\n to { opacity:1; transform:scale(1); }\r\n}\r\n#svca-outer .svca-img-cell { overflow: hidden; }\r\n#svca-outer .svca-img-cell.svca-span-full { grid-column: 1\/-1; }\r\n#svca-outer .svca-img-cell img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s; }\r\n#svca-outer .svca-img-cell:hover img { transform: scale(1.04); }\r\n#svca-outer .svca-img-ph {\r\n position:absolute; inset:0; display:flex; flex-direction:column;\r\n align-items:center; justify-content:center; gap:10px;\r\n color:#bbb; font-size:13px; font-style:italic;\r\n}\r\n#svca-outer .svca-img-ph svg { width:32px; height:32px; stroke:#ccc; fill:none; stroke-width:1.5; }\r\n\r\n\/* \u2500\u2500 STATS BAR \u2500\u2500 *\/\r\n#svca-outer .svca-stats-bar {\r\n background: #fff; border-radius: 14px;\r\n margin-top: 12px; padding: 20px 28px;\r\n display: flex; align-items: center;\r\n width: 100%; max-width: 1300px;\r\n}\r\n#svca-outer .svca-stat-item {\r\n flex: 1; display: flex; align-items: center; gap: 12px;\r\n padding: 0 20px; border-right: 1px solid #ede9fe;\r\n}\r\n#svca-outer .svca-stat-item:first-child { padding-left: 0; }\r\n#svca-outer .svca-stat-item:last-child { border-right: none; }\r\n#svca-outer .svca-stat-icon {\r\n width: 40px; height: 40px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\r\n}\r\n#svca-outer .svca-stat-icon svg { width:18px; height:18px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }\r\n#svca-outer .svca-stat-num { font-size:24px; font-weight:800; color:#111118; line-height:1; letter-spacing:-0.02em; }\r\n#svca-outer .svca-stat-lbl { font-size:12px; color:#6b7280; margin-top:2px; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"svca-outer\">\r\n \r\n\r\n <div style=\"position:sticky; top:0; z-index:100; text-align:center; padding: 28px 16px 20px; background:#f5f5f5;\">\r\n <h1 style=\"font-size:36px; font-weight:800; color:#111118; letter-spacing:-0.02em; margin-bottom:8px; font-family:'Figtree',sans-serif;\">Our Services<\/h1>\r\n <p style=\"font-size:15px; color:#6b7280; max-width:560px; margin:0 auto; line-height:1.7; font-family:'Figtree',sans-serif;\">Lorem ipsum dolor sit amet consectetur. Pharetra risus magna vel donec nunc habitasse amet cursus.<\/p>\r\n<\/div>\r\n<div class=\"svca-sticky-wrap\" id=\"svca-sticky-wrap\">\r\n <!-- panels injected by JS -->\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst SVCA_SLIDES = [\r\n {\r\n id: 'webdev',\r\n bg: '#F6FAFF',\r\n accent: '#0808C4',\r\n accentLight: '#E8EEFF',\r\n eyebrow: 'Our Services',\r\n title: 'Website',\r\n titleAcc: 'Development',\r\n desc: 'From strategy to execution, we create digital experiences and brand assets that connect, convert, and create impact.',\r\n cta: 'See all services',\r\n ideas: '\u2726 Ideas\\n in Motion',\r\n svcs: [\r\n { id:'branding', title:'Branding & Collateral', desc:'Crafting identities and print designs that leave a lasting impression.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"\/><circle cx=\"7\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1586717791821-3f44a563fa4c?w=900&q=80','https:\/\/images.unsplash.com\/photo-1634084462412-b54873c0a56d?w=600&q=80','https:\/\/images.unsplash.com\/photo-1561070791-2526d30994b5?w=600&q=80']},\r\n { id:'marketing', title:'Digital Marketing', desc:'Data-driven campaigns that build reach, engagement, and measurable growth.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?w=900&q=80','https:\/\/images.unsplash.com\/photo-1432888498266-38ffec3eaf0a?w=600&q=80','https:\/\/images.unsplash.com\/photo-1611532736597-de2d4265fba3?w=600&q=80']},\r\n { id:'web', title:'Website Development', desc:'High-performance websites built for speed, scalability, and seamless experiences.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?w=900&q=80','https:\/\/images.unsplash.com\/photo-1461749280684-dccba630e2f6?w=600&q=80','https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?w=600&q=80']},\r\n { id:'photo', title:'Photography & Video', desc:'Visual storytelling that captures attention and communicates with impact.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"\/><circle cx=\"12\" cy=\"13\" r=\"4\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1452587925148-ce544e77e70d?w=900&q=80','https:\/\/images.unsplash.com\/photo-1492691527719-9d1e07e534b4?w=600&q=80','https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?w=600&q=80']},\r\n ]\r\n },\r\n {\r\n id: 'ai',\r\n bg: '#FFF8F6',\r\n accent: '#FC440C',\r\n accentLight: '#FFE8E0',\r\n eyebrow: 'Our Services',\r\n title: 'AI',\r\n titleAcc: 'Solutions',\r\n desc: 'From strategy to implementation, we help businesses leverage artificial intelligence to automate workflows, improve decision-making, and unlock new growth opportunities.',\r\n cta: 'See all services',\r\n ideas: '\u2726 Think\\n Smarter',\r\n svcs: [\r\n { id:'consulting', title:'AI Consulting', desc:'Identify opportunities to integrate AI into your business and marketing operations.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"\/><circle cx=\"7\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1677442135703-1787eea5ce01?w=900&q=80','https:\/\/images.unsplash.com\/photo-1620712943543-bcc4688e7485?w=600&q=80','https:\/\/images.unsplash.com\/photo-1655720828018-edd2daec9349?w=600&q=80']},\r\n { id:'automation', title:'AI Automation', desc:'Automate repetitive tasks, lead nurturing, reporting, and customer interactions.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1485827404703-89b55fcc595e?w=900&q=80','https:\/\/images.unsplash.com\/photo-1531746790731-6c087fecd65a?w=600&q=80','https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=600&q=80']},\r\n { id:'content', title:'AI Content & Marketing', desc:'Generate content, optimize campaigns, and improve performance using AI-powered systems.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1499750310107-5fef28a66643?w=900&q=80','https:\/\/images.unsplash.com\/photo-1542744094-3a31f272c490?w=600&q=80','https:\/\/images.unsplash.com\/photo-1432888498266-38ffec3eaf0a?w=600&q=80']},\r\n { id:'bi', title:'Business Intelligence', desc:'Transform business data into actionable insights through AI-driven analytics.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"\/><circle cx=\"12\" cy=\"13\" r=\"4\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?w=900&q=80','https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?w=600&q=80','https:\/\/images.unsplash.com\/photo-1504868584819-f8e8b4b6d7e3?w=600&q=80']},\r\n ]\r\n },\r\n {\r\n id: 'digmkt',\r\n bg: '#E4EEF0',\r\n accent: '#046A38',\r\n accentLight: '#D0EAD8',\r\n eyebrow: 'Our Services',\r\n title: 'Digital',\r\n titleAcc: 'Marketing',\r\n desc: 'Helping businesses attract, engage, and convert customers through data-driven digital growth strategies.',\r\n cta: 'See all services',\r\n ideas: '\u2726 Grow\\n Further',\r\n svcs: [\r\n { id:'seo', title:'SEO & GEO', desc:'Improve search visibility across Google and AI-powered search platforms.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"\/><circle cx=\"7\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1572177812156-58036aae439c?w=900&q=80','https:\/\/images.unsplash.com\/photo-1562577309-4932fdd64cd1?w=600&q=80','https:\/\/images.unsplash.com\/photo-1432888498266-38ffec3eaf0a?w=600&q=80']},\r\n { id:'performance', title:'Performance Marketing', desc:'Drive qualified leads and measurable ROI through paid advertising campaigns.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?w=900&q=80','https:\/\/images.unsplash.com\/photo-1611532736597-de2d4265fba3?w=600&q=80','https:\/\/images.unsplash.com\/photo-1504868584819-f8e8b4b6d7e3?w=600&q=80']},\r\n { id:'webdevdm', title:'Website Development', desc:'High-performance websites built for speed, scalability, and seamless experiences.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?w=900&q=80','https:\/\/images.unsplash.com\/photo-1461749280684-dccba630e2f6?w=600&q=80','https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?w=600&q=80']},\r\n { id:'photodm', title:'Photography & Video', desc:'Visual storytelling that captures attention and communicates with impact.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"\/><circle cx=\"12\" cy=\"13\" r=\"4\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1452587925148-ce544e77e70d?w=900&q=80','https:\/\/images.unsplash.com\/photo-1492691527719-9d1e07e534b4?w=600&q=80','https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?w=600&q=80']},\r\n ]\r\n },\r\n {\r\n id: 'branding',\r\n bg: '#EFEBF5',\r\n accent: '#8100BA',\r\n accentLight: '#E8D5F5',\r\n eyebrow: 'Our Services',\r\n title: 'Branding',\r\n titleAcc: 'Collaterals',\r\n desc: 'From strategy to execution, we create digital experiences and brand assets that connect, convert, and create impact.',\r\n cta: 'See all services',\r\n ideas: '\u2726 Stand Out,\\n Always',\r\n svcs: [\r\n { id:'brandbc', title:'Branding & Collateral', desc:'Crafting identities and print designs that leave a lasting impression.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z\"\/><circle cx=\"7\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1586717791821-3f44a563fa4c?w=900&q=80','https:\/\/images.unsplash.com\/photo-1634084462412-b54873c0a56d?w=600&q=80','https:\/\/images.unsplash.com\/photo-1561070791-2526d30994b5?w=600&q=80']},\r\n { id:'mktbc', title:'Digital Marketing', desc:'Data-driven campaigns that build reach, engagement, and measurable growth.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?w=900&q=80','https:\/\/images.unsplash.com\/photo-1432888498266-38ffec3eaf0a?w=600&q=80','https:\/\/images.unsplash.com\/photo-1611532736597-de2d4265fba3?w=600&q=80']},\r\n { id:'webbc', title:'Website Development', desc:'High-performance websites built for speed, scalability, and seamless experiences.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?w=900&q=80','https:\/\/images.unsplash.com\/photo-1461749280684-dccba630e2f6?w=600&q=80','https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085?w=600&q=80']},\r\n { id:'photobc', title:'Photography & Video', desc:'Visual storytelling that captures attention and communicates with impact.',\r\n icon:`<svg viewBox=\"0 0 24 24\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\"\/><circle cx=\"12\" cy=\"13\" r=\"4\"\/><\/svg>`,\r\n imgs:['https:\/\/images.unsplash.com\/photo-1452587925148-ce544e77e70d?w=900&q=80','https:\/\/images.unsplash.com\/photo-1492691527719-9d1e07e534b4?w=600&q=80','https:\/\/images.unsplash.com\/photo-1574717024653-61fd2cf4d44d?w=600&q=80']},\r\n ]\r\n },\r\n];\r\n\r\n\r\n\r\nconst CUSTOM_INDENTS = [120, 43, 10, -80];\r\nconst wrap = document.getElementById('svca-sticky-wrap');\r\nconst panelEls = [];\r\nconst pathDone = new Set();\r\n\r\nSVCA_SLIDES.forEach((slide, si) => {\r\n \/\/ Spacer div creates scroll distance\r\n const spacer = document.createElement('div');\r\n spacer.className = 'svca-panel-spacer';\r\n if (si === 0) spacer.style.height = '0'; \/\/ first panel no extra space\r\n wrap.appendChild(spacer);\r\n\r\n const panel = document.createElement('div');\r\n panel.className = 'svca-panel';\r\n panel.id = 'svca-panel-' + si;\r\n panel.style.background = slide.bg;\r\n panel.style.zIndex = si + 1;\r\n\r\n \/\/ Build services rows HTML\r\n let svcRowsHTML = '';\r\n slide.svcs.forEach(s => {\r\n svcRowsHTML += `<div class=\"svca-svc-row\" id=\"svca-row-${si}-${s.id}\">\r\n <div class=\"svca-icon-bubble\" id=\"svca-icon-${si}-${s.id}\" style=\"border-color:${slide.accentLight}\">\r\n <svg viewBox=\"0 0 24 24\" style=\"stroke:${slide.accent}\">${s.icon.replace(\/<svg[^>]*>\/,'')}<\/svg>\r\n <\/div>\r\n <div class=\"svca-svc-content\">\r\n <div class=\"svca-title-row\">\r\n <span class=\"svca-svc-title\">${s.title}<\/span>\r\n <span class=\"svca-svc-line\" style=\"background:${slide.accentLight}\"><\/span>\r\n <span class=\"svca-arrow-btn\" id=\"svca-arrowbtn-${si}-${s.id}\" style=\"border-color:${slide.accentLight}\">\r\n <svg viewBox=\"0 0 24 24\" style=\"stroke:${slide.accent}\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n<\/span>\r\n <\/div>\r\n <div class=\"svca-svc-desc\">${s.desc}<\/div>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n\r\n \/\/ Build image grids HTML\r\n let imgGridsHTML = `<div class=\"svca-img-ph\" id=\"svca-imgph-${si}\" style=\"background:${slide.accentLight}\">\r\n <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\r\n Hover a service\r\n <\/div>`;\r\n slide.svcs.forEach(s => {\r\n imgGridsHTML += `<div class=\"svca-img-grid\" id=\"svca-grid-${si}-${s.id}\">\r\n <div class=\"svca-img-cell svca-span-full\"><img decoding=\"async\" src=\"${s.imgs[0]}\" alt=\"${s.title}\" loading=\"lazy\"><\/div>\r\n <div class=\"svca-img-cell\"><img decoding=\"async\" src=\"${s.imgs[1]}\" alt=\"\" loading=\"lazy\"><\/div>\r\n <div class=\"svca-img-cell\"><img decoding=\"async\" src=\"${s.imgs[2]}\" alt=\"\" loading=\"lazy\"><\/div>\r\n <\/div>`;\r\n });\r\n\r\n \r\n\r\n const ideasLines = slide.ideas.split('\\n');\r\n\r\n panel.innerHTML = `\r\n <div class=\"svca-top-row\" id=\"svca-toprow-${si}\">\r\n <svg class=\"svca-path-overlay\" id=\"svca-pathov-${si}\"><\/svg>\r\n\r\n <div class=\"svca-col-left\">\r\n <div>\r\n <div class=\"svca-eyebrow\" style=\"color:${slide.accent}\">\r\n <span class=\"svca-eyebrow-dot\" style=\"background:${slide.accent}\"><\/span>\r\n ${slide.eyebrow}\r\n <\/div>\r\n <h2 class=\"svca-headline\" style=\"color:#111118\">\r\n ${slide.title}<br><span style=\"color:${slide.accent}\">${slide.titleAcc}<\/span>\r\n <\/h2>\r\n <div class=\"svca-h-divider\" style=\"background:${slide.accent}\"><\/div>\r\n <p class=\"svca-subtext\">${slide.desc}<\/p>\r\n <a class=\"svca-cta-link\" href=\"#\" style=\"color:${slide.accent}\">\r\n ${slide.cta}\r\n <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"svca-star-block\">\r\n <div class=\"svca-star-circle\" id=\"svca-star-${si}\" style=\"background:${slide.accentLight}\">\r\n <svg class=\"svca-star-svg\" viewBox=\"0 0 24 24\" style=\"fill:${slide.accent}\">\r\n <path d=\"M12 2C11.8 6.5 10.2 9.2 8.5 9.8 5.8 10.8 2 12 2 12s3.8 1.2 6.5 2.2C10.2 14.8 11.8 17.5 12 22c.2-4.5 1.8-7.2 3.5-7.8C18.2 13.2 22 12 22 12s-3.8-1.2-6.5-2.2C13.8 9.2 12.2 6.5 12 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"svca-ideas-text\" style=\"color:${slide.accent};transform:rotate(-2deg)\">${ideasLines[0]}<br>${ideasLines[1]||''}<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"svca-col-middle\">\r\n <div class=\"svca-svc-list\" id=\"svca-svclist-${si}\">${svcRowsHTML}<\/div>\r\n <\/div>\r\n\r\n <div class=\"svca-col-right\" id=\"svca-imgpanel-${si}\" style=\"background:${slide.accentLight}\">${imgGridsHTML}<\/div>\r\n <\/div>\r\n\r\n \r\n `;\r\n\r\n wrap.appendChild(panel);\r\n panelEls.push(panel);\r\n\r\n \/\/ Hover events\r\n slide.svcs.forEach(s => {\r\n setTimeout(() => {\r\n const row = panel.querySelector(`#svca-row-${si}-${s.id}`);\r\n if (row) {\r\n row.addEventListener('mouseenter', () => {\r\n activateSvc(si, s.id);\r\n const btn = document.getElementById(`svca-arrowbtn-${si}-${s.id}`);\r\n if (btn) {\r\n btn.style.background = slide.accent;\r\n btn.style.borderColor = slide.accent;\r\n btn.querySelector('svg').style.stroke = '#fff';\r\n }\r\n});\r\nrow.addEventListener('mouseleave', () => {\r\n const btn = document.getElementById(`svca-arrowbtn-${si}-${s.id}`);\r\n if (btn) {\r\n btn.style.background = '#fff';\r\n btn.style.borderColor = slide.accentLight;\r\n btn.querySelector('svg').style.stroke = slide.accent;\r\n }\r\n});\r\nrow.addEventListener('click', () => activateSvc(si, s.id));\r\n }\r\n }, 100);\r\n });\r\n});\r\n\r\n\/\/ Extra spacer at the end so last panel can fully show\r\nconst endSpacer = document.createElement('div');\r\nendSpacer.style.height = '0vh';\r\nwrap.appendChild(endSpacer);\r\n\r\nfunction activateSvc(si, id) {\r\n const panel = panelEls[si];\r\n panel.querySelectorAll('.svca-svc-row').forEach(r => r.classList.remove('svca-active'));\r\n panel.querySelectorAll('.svca-img-grid').forEach(g => g.classList.remove('svca-active'));\r\n const ph = document.getElementById('svca-imgph-' + si);\r\n if (ph) ph.style.display = 'none';\r\n const row = document.getElementById(`svca-row-${si}-${id}`);\r\n const grid = document.getElementById(`svca-grid-${si}-${id}`);\r\n if (row) row.classList.add('svca-active');\r\n if (grid) grid.classList.add('svca-active');\r\n}\r\n\r\nfunction buildPath(si) {\r\n if (pathDone.has(si)) return;\r\n pathDone.add(si);\r\n\r\n const topRowEl = document.getElementById('svca-toprow-' + si);\r\n const overlay = document.getElementById('svca-pathov-' + si);\r\n const starEl = document.getElementById('svca-star-' + si);\r\n if (!topRowEl || !overlay || !starEl) return;\r\n\r\n const slide = SVCA_SLIDES[si];\r\n const panel = panelEls[si];\r\n const rows = Array.from(panel.querySelectorAll('.svca-svc-row'));\r\n\r\n rows.forEach((row, domIdx) => {\r\n row.style.marginLeft = CUSTOM_INDENTS[domIdx] + 'px';\r\n row.style.opacity = '0';\r\n row.style.transform = 'translateY(16px)';\r\n row.style.transition = 'opacity .4s, transform .4s';\r\n });\r\n\r\n void topRowEl.offsetHeight;\r\n\r\n const rowRect = topRowEl.getBoundingClientRect();\r\n const starRect = starEl.getBoundingClientRect();\r\n const sx = starRect.left - rowRect.left + starRect.width \/ 2;\r\n const sy = starRect.top - rowRect.top + starRect.height \/ 2;\r\n\r\n const iconIds = slide.svcs.map(s => `svca-icon-${si}-${s.id}`);\r\n const pts = iconIds.map(id => {\r\n const el = document.getElementById(id);\r\n if (!el) return { x: 0, y: 0 };\r\n const r = el.getBoundingClientRect();\r\n return { x: r.left - rowRect.left + r.width\/2, y: r.top - rowRect.top + r.height\/2 };\r\n });\r\n\r\n const x1 = sx, y1 = sy;\r\n const x2 = pts[0].x, y2 = pts[0].y;\r\n const pathD = `M ${x1},${y1} C ${x1+400},${y1+60} ${x2-120},${y2-40} ${x2},${y2}`;\r\n\r\n overlay.setAttribute('viewBox', `0 0 ${rowRect.width} ${rowRect.height}`);\r\n overlay.innerHTML = '';\r\n\r\n const ghost = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','path');\r\n ghost.setAttribute('d', pathD); ghost.setAttribute('fill','none');\r\n overlay.appendChild(ghost);\r\n const totalLen = ghost.getTotalLength();\r\n\r\n const pathEl = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','path');\r\n pathEl.setAttribute('d', pathD); pathEl.setAttribute('fill','none');\r\n pathEl.setAttribute('stroke', slide.accent);\r\npathEl.setAttribute('stroke-opacity', '0.3'); pathEl.setAttribute('stroke-width','2');\r\n pathEl.setAttribute('stroke-linecap','round');\r\n pathEl.style.strokeDasharray = totalLen;\r\n pathEl.style.strokeDashoffset = totalLen;\r\n pathEl.style.transition = `stroke-dashoffset 2s cubic-bezier(.4,0,.2,1) .1s`;\r\n overlay.appendChild(pathEl);\r\n\r\n \/\/ Dot\r\n const dot = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','circle');\r\n dot.setAttribute('r','5'); dot.setAttribute('fill', slide.accent);\r\n dot.setAttribute('opacity','0');\r\n overlay.appendChild(dot);\r\n\r\n setTimeout(() => {\r\n pathEl.style.strokeDashoffset = '0';\r\n \/\/ animate dot\r\n const tmp = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','path');\r\n tmp.setAttribute('d', pathD); tmp.setAttribute('fill','none');\r\n overlay.appendChild(tmp);\r\n const len = tmp.getTotalLength();\r\n const dur = 2000;\r\n let t0 = null;\r\n function frame(ts) {\r\n if (!t0) t0 = ts;\r\n const t = Math.min((ts-t0)\/dur, 1);\r\n const ease = t < .5 ? 2*t*t : 1-Math.pow(-2*t+2,2)\/2;\r\n const pt = tmp.getPointAtLength(ease * len);\r\n dot.setAttribute('cx', pt.x); dot.setAttribute('cy', pt.y);\r\n dot.setAttribute('opacity', t > .01 && t < .99 ? '1' : '0');\r\n if (t < 1) requestAnimationFrame(frame);\r\n else { dot.remove(); tmp.remove(); }\r\n }\r\n requestAnimationFrame(frame);\r\n }, 80);\r\n\r\n \/\/ Reveal rows\r\n [3,2,1,0].forEach((ri, step) => {\r\n setTimeout(() => {\r\n if (rows[ri]) {\r\n rows[ri].style.opacity = '1';\r\n rows[ri].style.transform = 'translateY(0)';\r\n }\r\n }, 400 + step * 300);\r\n });\r\n\r\n \/\/ Activate first service\r\n setTimeout(() => {\r\n activateSvc(si, slide.svcs[0].id);\r\n }, 400 + 3 * 300 + 200);\r\n}\r\n\r\n\/\/ Scroll-based sticky panel visibility\r\nfunction onScroll() {\r\n const wrapTop = wrap.getBoundingClientRect().top;\r\n const wh = window.innerHeight;\r\n const totalScrollHeight = wrap.scrollHeight - wh;\r\n const scrolled = Math.max(0, -wrapTop);\r\n const progress = Math.min(1, scrolled \/ totalScrollHeight);\r\n const panelCount = SVCA_SLIDES.length;\r\n\r\n panelEls.forEach((panel, i) => {\r\n \/\/ pProgress: 0 = panel just entering, 1 = panel just leaving\r\n const pProgress = (progress - i \/ panelCount) \/ (1 \/ panelCount);\r\n\r\n \/\/ Remove CSS transition so movement follows scroll directly\r\n panel.style.transition = 'none';\r\n\r\n if (pProgress < 0) {\r\n \/\/ Panel hasn't arrived yet \u2014 below\r\n const t = Math.max(-1, pProgress); \/\/ clamp\r\n const opacity = Math.max(0, 1 + t * 12);\r\nconst translateY = Math.min(20, -t * 20);\r\n panel.style.opacity = opacity;\r\n panel.style.transform = `translateY(${translateY}px)`;\r\n } else if (pProgress <= 0.75) {\r\n panel.style.opacity = '1';\r\n panel.style.transform = 'translateY(0)';\r\n if (pProgress > 0.15 && !pathDone.has(i)) buildPath(i);\r\n } else {\r\n \/\/ Panel leaving \u2014 scroll it up and fade out\r\n const t = (pProgress - 0.75) \/ 0.25;\r\nconst opacity = Math.max(0, 1 - t);\r\nconst translateY = -t * 20;\r\n panel.style.opacity = opacity;\r\n panel.style.transform = `translateY(${translateY}px)`;\r\n }\r\n });\r\n\r\n if (scrolled <= 0) {\r\n panelEls[0].style.opacity = '1';\r\n panelEls[0].style.transform = 'translateY(0)';\r\n }\r\n\r\n \/\/ Update header background to match active panel\r\n let activeIdx = 0;\r\n panelEls.forEach((panel, i) => {\r\n const pProgress = (progress - i \/ panelCount) \/ (1 \/ panelCount);\r\n if (pProgress >= 0 && pProgress <= 0.75) activeIdx = i;\r\n });\r\n const header = document.querySelector('#svca-outer > div[style]');\r\n if (header) {\r\n header.style.background = SVCA_SLIDES[activeIdx].bg;\r\n header.style.transition = 'background 0.5s ease';\r\n }\r\n}\r\n\r\nwindow.addEventListener('scroll', onScroll, { passive: true });\r\n\r\n\/\/ Init\r\nsetTimeout(() => {\r\n onScroll();\r\n}, 200);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afd91b4 e-flex e-con-boxed e-con e-parent\" data-id=\"afd91b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-580d0b5 elementor-widget elementor-widget-html\" data-id=\"580d0b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<title>Why Enterprise SEO<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n\r\n#wes-section *, #wes-section *::before, #wes-section *::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n#wes-section {\r\n width: 100%;\r\n background: #ffffff;\r\n font-family: 'Figtree', sans-serif;\r\n padding: 64px 48px;\r\n color: #111;\r\n}\r\n\r\n#wes-section .wes-inner {\r\n max-width: 100%;\r\n}\r\n\r\n#wes-section .wes-header {\r\n margin-bottom: 48px;\r\n}\r\n\r\n#wes-section .wes-main-title {\r\n font-size: 31px;\r\n font-weight: 700;\r\n color: #000;\r\n line-height: 1.25;\r\n margin-bottom: 14px;\r\n}\r\n\r\n#wes-section .wes-main-desc {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #000;\r\n line-height: 1.75;\r\n max-width: 620px;\r\n}\r\n\r\n#wes-section .wes-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 48px;\r\n align-items: start;\r\n}\r\n\r\n#wes-section .wes-image-wrap {\r\n width: 100%;\r\n border-radius: 50px;\r\n overflow: hidden;\r\n}\r\n\r\n#wes-section .wes-image-wrap img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n}\r\n\r\n#wes-section .wes-cards {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n}\r\n\r\n#wes-section .wes-card {\r\n padding: 22px 24px;\r\n border-radius: 10px;\r\n border: 1.5px solid transparent;\r\n transition: border-color 0.2s ease, background 0.2s ease;\r\n cursor: default;\r\n position: relative;\r\n}\r\n\r\n\r\n#wes-section .wes-card + .wes-card {\r\n margin-top: 4px;\r\n}\r\n\r\n#wes-section .wes-card:hover {\r\n border-color: #ff5a2c;\r\n background: #fff8f6;\r\n}\r\n\r\n#wes-section .wes-card-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #111;\r\n margin-bottom: 8px;\r\n line-height: 1.3;\r\n}\r\n\r\n\r\n#wes-section .wes-card:hover .wes-card-title {\r\n color: #ff5a2c;\r\n}\r\n\r\n#wes-section .wes-card-desc {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #555;\r\n line-height: 1.72;\r\n}\r\n\r\n#wes-section .wes-divider {\r\n height: 1px;\r\n background: #e8e8e8;\r\n margin: 0 24px;\r\n}\r\n\r\n@media (max-width: 860px) {\r\n #wes-section .wes-grid {\r\n grid-template-columns: 1fr;\r\n gap: 32px;\r\n }\r\n #wes-section {\r\n padding: 48px 24px;\r\n }\r\n #wes-section .wes-main-title { font-size: 26px; }\r\n #wes-section .wes-main-desc { font-size: 15px; max-width: 100%; }\r\n #wes-section .wes-header { margin-bottom: 32px; }\r\n}\r\n\r\n@media (max-width: 560px) {\r\n #wes-section { padding: 36px 16px; }\r\n #wes-section .wes-main-title { font-size: 22px; }\r\n #wes-section .wes-main-desc { font-size: 14px; }\r\n #wes-section .wes-card-title { font-size: 16px; }\r\n #wes-section .wes-card-desc { font-size: 14px; }\r\n #wes-section .wes-card { padding: 16px 14px; }\r\n #wes-section .wes-image-wrap { border-radius: 20px; }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"wes-section\">\r\n <div class=\"wes-inner\">\r\n\r\n <div class=\"wes-header\">\r\n <h2 class=\"wes-main-title\">Why Does Your Brand Need Enterprise SEO Services?<\/h2>\r\n <p class=\"wes-main-desc\">Managing SEO for a 10 page website is one thing. Managing it for 10,000 or a million pages? That's a different ballgame. Large scale websites especially in ecommerce, SaaS, media, or enterprise grade businesses face challenges that standard SEO strategies can't handle. Unlike traditional or local SEO, enterprise SEO provides a more strategic approach that can effectively address the complexities of large websites and drive significant online growth.<\/p>\r\n <\/div>\r\n\r\n <div class=\"wes-grid\">\r\n\r\n <div class=\"wes-image-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/awrange.com\/wp-content\/uploads\/2026\/06\/Left_-Image-1.png\" alt=\"Enterprise SEO illustration\"\/>\r\n <\/div>\r\n\r\n <div class=\"wes-cards\">\r\n\r\n <div class=\"wes-card\">\r\n <h3 class=\"wes-card-title\">Complex Site, Slower Growth<\/h3>\r\n <p class=\"wes-card-desc\">Enterprise sites carry years of legacy, from mergers, rebrands, and growth. With tens of thousands of pages across platforms, even small SEO updates turn into complex tasks.<\/p>\r\n <\/div>\r\n\r\n <div class=\"wes-divider\"><\/div>\r\n\r\n <div class=\"wes-card\">\r\n <h3 class=\"wes-card-title\">Technical SEO Lags, Sluggish Performance<\/h3>\r\n <p class=\"wes-card-desc\">The bigger your website, the more room for small technical issues to multiply. Missed redirects, broken internal links, or inconsistent meta tags can harm your rankings. Technical SEO at this level is a full-time job rather than a one-time fix.<\/p>\r\n <\/div>\r\n\r\n <div class=\"wes-divider\"><\/div>\r\n\r\n <div class=\"wes-card\">\r\n <h3 class=\"wes-card-title\">Inconsistent Content, Weakened Authority<\/h3>\r\n <p class=\"wes-card-desc\">For enterprises it's not about producing enough content, rather producing the right kind of content at scale. Inconsistent messaging, duplicated ideas, and unoptimized assets can confuse both the users as well as the search engines.<\/p>\r\n <\/div>\r\n\r\n <div class=\"wes-divider\"><\/div>\r\n\r\n <div class=\"wes-card\">\r\n <h3 class=\"wes-card-title\">Global Presence, Local Challenges<\/h3>\r\n <p class=\"wes-card-desc\">Global expansions bring its own set of new challenges like language variations, cultural nuances, hreflang tags, along with regional SERP behavior. Missing out on an international SEO framework without optimising localised SEO can do more harm than good.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d07e440 e-con-full e-flex e-con e-parent\" data-id=\"d07e440\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4efbe88 elementor-widget elementor-widget-html\" data-id=\"4efbe88\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Enterprise SEO Slider<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\r\n#ent2-section *, #ent2-section *::before, #ent2-section *::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n#ent2-section {\r\n width: 100%;\r\n min-height: 100vh;\r\n background: linear-gradient(180deg, #000000 0%, #040462 40%, #0808C4 87%);\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n overflow: hidden;\r\n padding: 60px 0;\r\n}\r\n\r\n#ent2-section::before {\r\n content: '';\r\n position: absolute;\r\n top: -150px;\r\n left: -100px;\r\n width: 700px;\r\n height: 700px;\r\n background: radial-gradient(circle, rgba(8,8,196,0.4) 0%, transparent 65%);\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.ent2-container {\r\n position: relative;\r\n z-index: 1;\r\n width: 92%;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(16px, 2.8vh, 40px);\r\n}\r\n\r\n.ent2-top-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: 20px;\r\n}\r\n\r\n.ent2-left-content { max-width: 800px; }\r\n\r\n.ent2-left-content h2 {\r\n font-family: 'Figtree', sans-serif;\r\n color: #fff;\r\n font-size: clamp(22px, 2.8vw, 48px);\r\n font-weight: 700;\r\n line-height: 1.2;\r\n margin-bottom: clamp(8px, 1vh, 16px);\r\n letter-spacing: -0.4px;\r\n}\r\n\r\n.ent2-left-content p {\r\n font-family: 'Figtree', sans-serif;\r\n color: rgba(255,255,255,0.72);\r\n font-size: clamp(12px, 1vw, 16px);\r\n line-height: 1.75;\r\n max-width: 680px;\r\n}\r\n\r\n.ent2-arrow-controls {\r\n display: flex;\r\n gap: 12px;\r\n align-items: center;\r\n flex-shrink: 0;\r\n align-self: center;\r\n}\r\n\r\n.ent2-arrow-btn {\r\n width: 48px;\r\n height: 48px;\r\n min-width: 48px;\r\n min-height: 48px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,0.35);\r\n background: rgba(255,255,255,0.08);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n color: #fff;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;\r\n font-size: 18px;\r\n line-height: 1;\r\n user-select: none;\r\n}\r\n\r\n.ent2-arrow-btn:hover {\r\n background: rgba(255,255,255,0.2);\r\n border-color: rgba(255,255,255,0.7);\r\n transform: scale(1.08);\r\n}\r\n\r\n.ent2-arrow-btn:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.ent2-slider-wrapper {\r\n overflow: hidden;\r\n position: relative;\r\n padding: 12px 0 16px;\r\n margin: -12px 0 -16px;\r\n}\r\n\r\n.ent2-slider-wrapper::before,\r\n.ent2-slider-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n width: 80px;\r\n z-index: 2;\r\n pointer-events: none;\r\n}\r\n.ent2-slider-wrapper::before {\r\n left: 0;\r\n background: linear-gradient(to right, #040462 0%, transparent 100%);\r\n}\r\n.ent2-slider-wrapper::after {\r\n right: 0;\r\n background: linear-gradient(to left, #000 0%, transparent 100%);\r\n}\r\n\r\n.ent2-slider-track {\r\n display: flex;\r\n gap: 24px;\r\n width: max-content;\r\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n will-change: transform;\r\n}\r\n\r\n.ent2-card {\r\n flex-shrink: 0;\r\n width: clamp(280px, 22vw, 360px);\r\n height: clamp(200px, calc(100vh - 280px), 300px);\r\n background: rgba(255,255,255,0.9);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border-radius: 20px;\r\n border: 1px solid rgba(255,255,255,0.55);\r\n padding: clamp(24px, 2.2vw, 36px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n box-shadow: 0 8px 32px rgba(0,0,0,0.18);\r\n cursor: default;\r\n transition: transform 0.35s ease, box-shadow 0.35s ease;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.ent2-card::after {\r\n content: '';\r\n position: absolute;\r\n top: -40px; right: -40px;\r\n width: 130px; height: 130px;\r\n border-radius: 50%;\r\n background: rgba(8,8,196,0.06);\r\n pointer-events: none;\r\n}\r\n\r\n.ent2-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 24px 52px rgba(0,0,0,0.28);\r\n}\r\n\r\n.ent2-card h3 {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: clamp(15px, 1.35vw, 20px);\r\n font-weight: 700;\r\n line-height: 1.3;\r\n margin-bottom: clamp(8px, 1vh, 14px);\r\n color: #111;\r\n}\r\n\r\n.ent2-card p {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: clamp(12px, 0.85vw, 14px);\r\n line-height: 1.82;\r\n color: #444;\r\n}\r\n\r\n@media (max-width: 991px) {\r\n .ent2-top-content { flex-direction: column; gap: 16px; }\r\n #ent2-section { padding: 48px 0; min-height: auto; }\r\n .ent2-container { width: 92%; }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n #ent2-section { padding: 40px 0; min-height: auto; }\r\n .ent2-left-content h2 { font-size: 22px; }\r\n .ent2-left-content p { font-size: 13px; }\r\n .ent2-arrow-controls { align-self: flex-start; }\r\n .ent2-arrow-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 16px; }\r\n .ent2-card {\r\n width: clamp(240px, 75vw, 300px);\r\n height: auto;\r\n min-height: 180px;\r\n padding: 20px;\r\n }\r\n .ent2-card h3 { font-size: 14px; }\r\n .ent2-card p { font-size: 12px; }\r\n .ent2-slider-wrapper::before,\r\n .ent2-slider-wrapper::after { width: 40px; }\r\n}\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"ent2-section\">\r\n <div class=\"ent2-container\">\r\n\r\n <div class=\"ent2-top-content\">\r\n <div class=\"ent2-left-content\">\r\n <h2>Our Full-Stack Enterprise SEO Solutions,<br>Built to Scale With You<\/h2>\r\n <p>\r\n We offer enterprise SEO services tailored to your business model,\r\n market demands, and internal capabilities with full-stack strategies\r\n including audits, technical fixes, content, automation, AI scaling,\r\n and both global and local SEO.\r\n <\/p>\r\n <\/div>\r\n <div class=\"ent2-arrow-controls\">\r\n <button class=\"ent2-arrow-btn\" id=\"ent2-prevBtn\" aria-label=\"Previous\">←<\/button>\r\n <button class=\"ent2-arrow-btn\" id=\"ent2-nextBtn\" aria-label=\"Next\">→<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ent2-slider-wrapper\">\r\n <div class=\"ent2-slider-track\" id=\"ent2-sliderTrack\">\r\n\r\n <div class=\"ent2-card\">\r\n <h3>Global Best Practices + Local Market Insight<\/h3>\r\n <p>Our global SEO services combine international expertise with localized strategies that deliver measurable growth and visibility for enterprises across multiple markets.<\/p>\r\n <\/div>\r\n <div class=\"ent2-card\">\r\n <h3>Comprehensive Site Audits & Strategic Planning<\/h3>\r\n <p>Detailed enterprise audits spanning crawlability, performance, duplication, indexation, architecture and growth opportunities, paired with an actionable roadmap.<\/p>\r\n <\/div>\r\n <div class=\"ent2-card\">\r\n <h3>Technical SEO Optimization at Scale<\/h3>\r\n <p>Improve search visibility with technical SEO strategies including core web vitals, structured data, mobile optimization, sitemap management and crawl budget improvements.<\/p>\r\n <\/div>\r\n <div class=\"ent2-card\">\r\n <h3>AI-Powered Content Scaling<\/h3>\r\n <p>Scale content production using AI workflows while maintaining quality, relevance and topical authority across large websites with thousands of pages.<\/p>\r\n <\/div>\r\n <div class=\"ent2-card\">\r\n <h3>International SEO Expansion<\/h3>\r\n <p>Reach new markets with hreflang implementation, localization strategies, multilingual content optimization and international search growth frameworks.<\/p>\r\n <\/div>\r\n <div class=\"ent2-card\">\r\n <h3>Enterprise Analytics & Reporting<\/h3>\r\n <p>Monitor rankings, traffic, engagement and conversions using advanced dashboards built for enterprise decision making and executive reporting.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n const ent2Track = document.getElementById('ent2-sliderTrack');\r\n const ent2Prev = document.getElementById('ent2-prevBtn');\r\n const ent2Next = document.getElementById('ent2-nextBtn');\r\n const ent2Cards = ent2Track.querySelectorAll('.ent2-card');\r\n const ent2Count = ent2Cards.length;\r\n let ent2Index = 0;\r\n\r\n function ent2CardWidth() {\r\n const gap = parseInt(getComputedStyle(ent2Track).gap) || 24;\r\n return ent2Cards[0].offsetWidth + gap;\r\n }\r\n\r\n function ent2Visible() {\r\n return Math.floor(ent2Track.parentElement.offsetWidth \/ ent2CardWidth()) || 1;\r\n }\r\n\r\n function ent2MaxIndex() {\r\n return Math.max(0, ent2Count - ent2Visible());\r\n }\r\n\r\n function ent2Update() {\r\n ent2Track.style.transform = `translateX(-${ent2Index * ent2CardWidth()}px)`;\r\n ent2Prev.style.opacity = ent2Index === 0 ? '0.4' : '1';\r\n ent2Next.style.opacity = ent2Index >= ent2MaxIndex() ? '0.4' : '1';\r\n }\r\n\r\n ent2Prev.addEventListener('click', () => {\r\n if (ent2Index > 0) { ent2Index--; ent2Update(); }\r\n });\r\n\r\n ent2Next.addEventListener('click', () => {\r\n if (ent2Index < ent2MaxIndex()) { ent2Index++; ent2Update(); }\r\n });\r\n\r\n window.addEventListener('resize', () => {\r\n ent2Index = Math.min(ent2Index, ent2MaxIndex());\r\n ent2Update();\r\n });\r\n\r\n ent2Update();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2979b23 e-con-full e-flex e-con e-parent\" data-id=\"2979b23\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-566f2c3 elementor-widget elementor-widget-html\" data-id=\"566f2c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Testimonials Slider<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\r\n.tm-wrap *, .tm-wrap *::before, .tm-wrap *::after {\r\n margin: 0; padding: 0; box-sizing: border-box;\r\n}\r\n\r\n.tm-wrap {\r\n width: 100%;\r\n background: #f5f5fa;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n gap: clamp(20px, 3.5vh, 44px);\r\n padding: 60px 0;\r\n}\r\n\r\n.tm-heading { text-align: center; padding: 0 20px; }\r\n\r\n.tm-heading h2 {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 31px;\r\n font-weight: 700;\r\n color: #000;\r\n margin-bottom: 10px;\r\n letter-spacing: -0.5px;\r\n}\r\n\r\n.tm-heading p {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 16px;\r\n color: #000;\r\n line-height: 1.7;\r\n}\r\n\r\n.tm-track-wrap {\r\n width: 100%;\r\n overflow: hidden;\r\n position: relative;\r\n padding: 14px 0 18px;\r\n margin: -14px 0 -18px;\r\n}\r\n\r\n.tm-track-wrap::before,\r\n.tm-track-wrap::after {\r\n content: '';\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n width: 120px;\r\n z-index: 2;\r\n pointer-events: none;\r\n}\r\n.tm-track-wrap::before { left: 0; background: linear-gradient(to right, #f5f5fa, transparent); }\r\n.tm-track-wrap::after { right: 0; background: linear-gradient(to left, #f5f5fa, transparent); }\r\n\r\n.tm-track {\r\n display: flex;\r\n gap: 24px;\r\n width: max-content;\r\n animation: tm-roll 60s linear infinite;\r\n}\r\n.tm-track:hover { animation-play-state: paused; }\r\n\r\n@keyframes tm-roll {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n}\r\n\r\n.tm-card {\r\n flex-shrink: 0;\r\n width: clamp(290px, 26vw, 400px);\r\n background: #fff;\r\n border-radius: 18px;\r\n border: 1px solid #e8e8f0;\r\n padding: clamp(22px, 2.2vw, 34px);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n box-shadow: 0 2px 16px rgba(0,0,0,0.05);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n cursor: default;\r\n}\r\n\r\n.tm-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 18px 48px rgba(70,60,200,0.11);\r\n}\r\n\r\n.tm-card-top {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n}\r\n\r\n.tm-person { display: flex; align-items: center; gap: 12px; }\r\n\r\n.tm-person-info h4 {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: clamp(14px, 1.1vw, 16px);\r\n font-weight: 700;\r\n color: #111;\r\n line-height: 1.3;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.tm-person-info span {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: clamp(11px, 0.85vw, 13px);\r\n color: #999;\r\n}\r\n\r\n.tm-quote-svg {\r\n flex-shrink: 0;\r\n margin-top: -2px;\r\n}\r\n\r\n.tm-card p {\r\n font-family: 'Figtree', sans-serif;\r\n font-size: clamp(12px, 0.9vw, 14.5px);\r\n line-height: 1.85;\r\n color: #555;\r\n}\r\n@media (max-width: 600px) {\r\n .tm-wrap {\r\n padding: 40px 0;\r\n gap: 24px;\r\n }\r\n .tm-heading h2 {\r\n font-size: 22px;\r\n }\r\n .tm-heading p {\r\n font-size: 14px;\r\n }\r\n .tm-card {\r\n width: clamp(240px, 80vw, 300px);\r\n padding: 18px;\r\n gap: 12px;\r\n }\r\n .tm-track-wrap::before,\r\n .tm-track-wrap::after {\r\n width: 40px;\r\n }\r\n .tm-quote-svg {\r\n width: 30px;\r\n height: 24px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"tm-wrap\">\r\n\r\n <div class=\"tm-heading\">\r\n <h2>What The People Think About Us<\/h2>\r\n <p>Lorem ipsum dolor sit amet consectetur. Pharetra risus magna vel donec nunc habitasse amet cursus.<\/p>\r\n <\/div>\r\n\r\n <div class=\"tm-track-wrap\">\r\n <div class=\"tm-track\" id=\"tm-track\"><\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst tmPeople = [\r\n {\r\n name: \"Emily Smith\",\r\n role: \"Project Manager\",\r\n text: \"User-friendly and feature-rich, it has transformed our operations, making tasks seamless and efficient. Highly recommended for professionals!\"\r\n },\r\n {\r\n name: \"Michael Johnson\",\r\n role: \"Sales Head\",\r\n text: \"A game-changer for our sales team! Easy to use, reliable, and packed with great features that enhance efficiency and collaboration.\"\r\n },\r\n {\r\n name: \"Sarah Lee\",\r\n role: \"Marketing Director\",\r\n text: \"Incredible platform! The analytics and automation features have doubled our campaign performance. It has become indispensable to our workflow.\"\r\n },\r\n {\r\n name: \"Robert Chen\",\r\n role: \"CTO\",\r\n text: \"The technical depth and scalability of this solution is remarkable. Our engineering team was onboarded in days, not weeks. Truly enterprise-grade.\"\r\n },\r\n {\r\n name: \"Aisha Patel\",\r\n role: \"Operations Lead\",\r\n text: \"From onboarding to daily use, the experience is flawless. Support is responsive and the product keeps getting better with every update.\"\r\n },\r\n {\r\n name: \"David Nguyen\",\r\n role: \"Product Manager\",\r\n text: \"We evaluated dozens of tools and this was the clear winner. Clean UI, powerful integrations, and a team that actually listens to feedback.\"\r\n }\r\n];\r\n\r\nconst tmQuoteSVG = `<svg class=\"tm-quote-svg\" width=\"42\" height=\"34\" viewBox=\"0 0 42 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0 34V20.8C0 14.4 1.6 9.46667 4.8 5.94C8 2.31333 12.5333 0.266667 18.4 0L19.6 3.28C16.6667 3.81333 14.2 5.1 12.2 7.14C10.3333 9.07333 9.46667 11.32 9.6 13.88H18.4V34H0ZM22.4 34V20.8C22.4 14.4 24 9.46667 27.2 5.94C30.4 2.31333 34.9333 0.266667 40.8 0L42 3.28C39.0667 3.81333 36.6 5.1 34.6 7.14C32.7333 9.07333 31.8667 11.32 32 13.88H40.8V34H22.4Z\" fill=\"#4B35FF\"\/>\r\n<\/svg>`;\r\n\r\nfunction tmMakeCard(p) {\r\n return `<div class=\"tm-card\">\r\n <div class=\"tm-card-top\">\r\n <div class=\"tm-person\">\r\n <div class=\"tm-person-info\">\r\n <h4>${p.name}<\/h4>\r\n <span>${p.role}<\/span>\r\n <\/div>\r\n <\/div>\r\n ${tmQuoteSVG}\r\n <\/div>\r\n <p>${p.text}<\/p>\r\n <\/div>`;\r\n}\r\n\r\nconst tmTrack = document.getElementById(\"tm-track\");\r\nconst tmHtml = [...tmPeople, ...tmPeople].map(tmMakeCard).join(\"\");\r\ntmTrack.innerHTML = tmHtml;\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3db39b4 e-con-full e-flex e-con e-parent\" data-id=\"3db39b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33fde22 elementor-widget elementor-widget-html\" data-id=\"33fde22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<title>Blog Section<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Figtree:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\"\/>\r\n<style>\r\n\r\n#blog-section *, #blog-section *::before, #blog-section *::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n#blog-section {\r\n width: 100%;\r\n background: #fdf5f2;\r\n font-family: 'Figtree', sans-serif;\r\n padding: 64px 68px;\r\n}\r\n\r\n\/* \u2500\u2500 Top Row \u2500\u2500 *\/\r\n#blog-section .bl-top {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 48px;\r\n align-items: center;\r\n margin-bottom: 48px;\r\n}\r\n\r\n#blog-section .bl-top-left h2 {\r\n font-size: 48px;\r\n font-weight: 700;\r\n color: #000;\r\n line-height: 1.2;\r\n letter-spacing: -0.5px;\r\n}\r\n\r\n#blog-section .bl-top-right {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n align-items: flex-start;\r\n}\r\n\r\n#blog-section .bl-top-right p {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #000;\r\n line-height: 1.75;\r\n}\r\n\r\n#blog-section .bl-btn {\r\n display: inline-block;\r\n padding: 12px 40px;\r\n background: #FC440C;\r\n color: #fff !important;\r\n font-family: 'Figtree', sans-serif;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n border-radius: 50px;\r\n text-decoration: none !important;\r\n transition: background 0.2s, transform 0.2s;\r\n}\r\n\r\n#blog-section .bl-btn:hover {\r\n background: #e04820;\r\n transform: translateY(-2px);\r\n}\r\n\r\n\/* \u2500\u2500 Cards Grid \u2500\u2500 *\/\r\n#blog-section .bl-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n}\r\n\r\n\/* \u2500\u2500 Card \u2500\u2500 *\/\r\n#blog-section .bl-card {\r\n background: #FFE9E2;\r\n border-radius: 16px;\r\n padding: 24px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n border: 1px solid #f0e8e4;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\r\n text-decoration: none;\r\n}\r\n\r\n#blog-section .bl-card:hover {\r\n background: #FFD2C4;\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 32px rgba(255,90,44,0.12);\r\n}\r\n\r\n#blog-section .bl-card-meta {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n#blog-section .bl-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: #ff5a2c;\r\n flex-shrink: 0;\r\n}\r\n\r\n#blog-section .bl-card-cat {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: #999;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n}\r\n\r\n#blog-section .bl-card-read {\r\n font-size: 11px;\r\n color: #bbb;\r\n}\r\n\r\n#blog-section .bl-card-title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n color: #111;\r\n line-height: 1.4;\r\n flex: 1;\r\n}\r\n\r\n#blog-section .bl-card-desc {\r\n font-size: 16px;\r\n color: #777;\r\n line-height: 1.65;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n#blog-section .bl-card-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-top: auto;\r\n padding-top: 8px;\r\n}\r\n\r\n#blog-section .bl-arrow {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n background: #ff5a2c;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: background 0.2s, transform 0.2s;\r\n margin-left: auto;\r\n}\r\n\r\n#blog-section .bl-card:hover .bl-arrow {\r\n background: #e04820;\r\n transform: translateX(3px);\r\n}\r\n\r\n#blog-section .bl-arrow svg {\r\n width: 16px;\r\n height: 16px;\r\n stroke: #fff;\r\n fill: none;\r\n stroke-width: 2.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n}\r\n\r\n\/* highlighted last card *\/\r\n#blog-section .bl-card.bl-card-highlight {\r\n background: #FFE9E2;\r\n border-color: #ffd0c0;\r\n}\r\n\r\n#blog-section .bl-card.bl-card-highlight:hover {\r\n background: #FFD2C4;\r\n}\r\n\r\n#blog-section .bl-loading {\r\n grid-column: 1\/-1;\r\n text-align: center;\r\n padding: 40px;\r\n color: #999;\r\n font-size: 0.9rem;\r\n}\r\n\r\n#blog-section .bl-error {\r\n grid-column: 1\/-1;\r\n text-align: center;\r\n padding: 40px;\r\n color: #e04820;\r\n font-size: 0.9rem;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n #blog-section .bl-top { grid-template-columns: 1fr; gap: 24px; }\r\n #blog-section .bl-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }\r\n #blog-section { padding: 48px 24px; }\r\n #blog-section .bl-top-left h2 { font-size: 32px; }\r\n #blog-section .bl-top-right p { font-size: 14px; }\r\n}\r\n\r\n@media (max-width: 560px) {\r\n #blog-section { padding: 36px 16px; }\r\n #blog-section .bl-top { gap: 20px; margin-bottom: 28px; }\r\n #blog-section .bl-top-left h2 { font-size: 24px; }\r\n #blog-section .bl-top-right p { font-size: 14px; }\r\n #blog-section .bl-grid { grid-template-columns: 1fr; gap: 16px; }\r\n #blog-section .bl-card { padding: 18px; gap: 10px; }\r\n #blog-section .bl-card-title { font-size: 15px; }\r\n #blog-section .bl-card-desc { font-size: 12px; }\r\n #blog-section .bl-btn { padding: 10px 28px; font-size: 0.85rem; }\r\n #blog-section .bl-arrow { width: 36px; height: 36px; }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section id=\"blog-section\">\r\n\r\n <!-- Top Row -->\r\n <div class=\"bl-top\">\r\n <div class=\"bl-top-left\">\r\n <h2>Digital Marketing & SEO Services That Grow Traffic & Increase Revenue<\/h2>\r\n <\/div>\r\n <div class=\"bl-top-right\">\r\n <p>We are the top digital marketing agency for branding corp. We offer a full range of services to help clients improve their search engine rankings and drive more traffic to their websites.<\/p>\r\n <a href=\"https:\/\/awrange.com\/blog\/\" class=\"bl-btn\">View More<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Blog Cards -->\r\n <div class=\"bl-grid\" id=\"bl-grid\">\r\n <div class=\"bl-loading\">Loading blogs...<\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n const BL_API = 'https:\/\/awrange.com\/wp-json\/wp\/v2\/posts?per_page=3&_embed';\r\n\r\n fetch(BL_API)\r\n .then(res => res.json())\r\n .then(posts => {\r\n const grid = document.getElementById('bl-grid');\r\n grid.innerHTML = '';\r\n\r\n if (!posts.length) {\r\n grid.innerHTML = '<div class=\"bl-error\">No posts found.<\/div>';\r\n return;\r\n }\r\n\r\n posts.forEach((post, index) => {\r\n \/\/ Category\r\n let cat = 'Uncategorized';\r\nif (post._embedded && post._embedded['wp:term']) {\r\n const terms = post._embedded['wp:term'];\r\n for (let i = 0; i < terms.length; i++) {\r\n const filtered = terms[i].filter(t => t.taxonomy === 'category' && t.name !== 'Uncategorized');\r\n if (filtered.length > 0) {\r\n cat = filtered[0].name;\r\n break;\r\n }\r\n }\r\n}\r\n\r\n \/\/ Title\r\n const title = post.title.rendered || '';\r\n\r\n \/\/ Excerpt \u2014 strip HTML\r\n const excerpt = post.excerpt && post.excerpt.rendered\r\n ? post.excerpt.rendered.replace(\/<[^>]+>\/g, '').trim().substring(0, 200)\r\n : '';\r\n\r\n \/\/ Read time estimate\r\n const wordCount = post.content && post.content.rendered\r\n ? post.content.rendered.replace(\/<[^>]+>\/g, '').split(\/\\s+\/).length\r\n : 300;\r\n const readTime = Math.max(1, Math.round(wordCount \/ 200));\r\n\r\n \/\/ Highlight last card\r\n const highlight = index === 2 ? 'bl-card-highlight' : '';\r\n\r\n grid.innerHTML += `\r\n <a href=\"${post.link}\" class=\"bl-card ${highlight}\" target=\"_blank\">\r\n <div class=\"bl-card-meta\">\r\n <div style=\"display:flex;align-items:center;gap:8px;\">\r\n <div class=\"bl-dot\"><\/div>\r\n <span class=\"bl-card-cat\">${cat}<\/span>\r\n <\/div>\r\n \r\n <\/div>\r\n <div class=\"bl-card-title\">${title}<\/div>\r\n <div class=\"bl-card-desc\">${excerpt}<\/div>\r\n <div class=\"bl-card-footer\">\r\n <div class=\"bl-arrow\">\r\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/a>`;\r\n });\r\n })\r\n .catch(err => {\r\n document.getElementById('bl-grid').innerHTML =\r\n '<div class=\"bl-error\">Failed to load blogs. Please try again.<\/div>';\r\n console.error(err);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Services Grid Bold Websites. Smarter Marketing. Bigger Results. We are a digital-first agency focused on strategy and design. With 8+ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.awrange.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.awrange.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.awrange.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.awrange.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.awrange.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":5,"href":"https:\/\/dev.awrange.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/dev.awrange.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/dev.awrange.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}