{"id":11489,"date":"2023-07-07T12:53:43","date_gmt":"2023-07-07T10:53:43","guid":{"rendered":"https:\/\/devlight.io\/?post_type=case_studies&#038;p=11489"},"modified":"2024-05-14T12:28:23","modified_gmt":"2024-05-14T10:28:23","slug":"ukrnafta","status":"publish","type":"case_studies","link":"https:\/\/devlight.io\/portfolio\/ukrnafta\/","title":{"rendered":"Ukrnafta"},"content":{"rendered":"<div id=\"block_64b7c4113521b\" class=\"cases-header alignfull l-block\" >\n  \n  \r\n\r\n\r\n  <div class=\"l-wrap cases-container\">\r\n    <div class=\"cases-header__logo\"><img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/uploads\/2023\/07\/Layer-2.svg\" alt=\"\" width=\"86\" height=\"86\"><\/div><h1 class=\"cases-header__title\">Building an application for the largest national network of filling stations : Ukrnafta Case Study<\/h1><div class=\"cases-header__description\">Devlight collaborates with Ukrnafta to revolutionize fuel stations through a cutting-edge mobile app. Explore enhanced operations and customer engagement, uncovering challenges and innovative solutions in this industry-transforming collaboration.<\/div>\r\n        <div class=\"cases-header__links\">\r\n              <a href=\"https:\/\/azs.ukrnafta.com\/\" class=\"cases-header__link\" target=\"blank\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.9795 5.03028C14.4743 5.11461 13.9867 5.27631 13.5596 5.50115C13.1321 5.72623 12.8336 5.97356 11.8336 6.93133C9.84226 8.83845 9.68083 8.99979 9.47786 9.28569C9.02326 9.92598 8.78743 10.5906 8.73288 11.3849C8.69445 11.9444 8.82192 12.6397 9.06614 13.2026C9.29402 13.7278 9.60853 14.1613 10.0572 14.5685C10.3479 14.8323 10.6397 15.0362 10.7265 15.0362C10.7857 15.0362 11.2927 14.5582 11.5547 14.2554C11.6529 14.1419 11.8025 13.9524 11.8873 13.8341C12.0809 13.5641 12.0796 13.4959 11.8786 13.3716C11.661 13.2371 11.5359 13.133 11.3709 12.9494C11.1747 12.7309 10.9846 12.3662 10.9229 12.0897C10.8592 11.8041 10.8797 11.3813 10.9701 11.1138C11.0441 10.8948 11.2583 10.5719 11.5051 10.3071C11.7827 10.0094 14.2521 7.63597 14.4577 7.46935C14.6872 7.28343 15.0082 7.13069 15.309 7.06424C15.6113 6.99748 16.1399 7.01825 16.4192 7.10788C16.8749 7.25408 17.3148 7.58756 17.5546 7.96848C17.7 8.19945 17.8156 8.53399 17.8441 8.80601C17.8702 9.05545 17.8172 9.4135 17.7172 9.66395C17.6772 9.76395 17.5904 9.92583 17.5243 10.0237C17.4582 10.1216 17.084 10.5133 16.6926 10.8941C16.3013 11.275 15.9811 11.6068 15.9811 11.6314C15.9811 11.6561 16.0148 11.7859 16.0559 11.9199C16.2003 12.3901 16.2429 12.7109 16.2446 13.342C16.2455 13.6995 16.2299 14.0221 16.2049 14.1621C16.1823 14.2891 16.1697 14.3986 16.1769 14.4054C16.1842 14.4122 16.8195 13.8111 17.5887 13.0696C18.3579 12.3281 19.07 11.617 19.1711 11.4894C19.3956 11.2062 19.6357 10.7782 19.765 10.4305C19.8182 10.2877 19.8926 10.0358 19.9305 9.8707C19.9861 9.62848 19.9995 9.47382 20 9.06962C20.0004 8.70692 19.9853 8.4966 19.9452 8.30726C19.8242 7.73603 19.6136 7.25108 19.2853 6.78792C18.6681 5.9171 17.7065 5.30147 16.5883 5.06119C16.2894 4.99696 15.2938 4.97783 14.9795 5.03028ZM12.8199 10.3112C12.4488 10.6487 12.2369 10.8982 12.0533 11.2138C11.9119 11.4567 11.9211 11.5271 12.1086 11.637C12.3362 11.7705 12.565 11.9699 12.7071 12.1586C12.9998 12.5473 13.1087 12.8549 13.1105 13.2978C13.1119 13.6315 13.051 13.8748 12.8967 14.151C12.8361 14.2597 12.6934 14.4581 12.5797 14.5919C12.2826 14.9415 9.59175 17.5184 9.39862 17.6382C9.18063 17.7736 9.08523 17.8176 8.84518 17.8934C8.56484 17.9819 8.09181 18.0035 7.78105 17.9419C7.65195 17.9163 7.42751 17.8402 7.28232 17.7728C7.07801 17.678 6.96052 17.5963 6.76256 17.4113C6.55887 17.221 6.48041 17.1214 6.37728 16.9219C6.18724 16.5544 6.14346 16.3578 6.16083 15.9503C6.17128 15.7052 6.19463 15.5575 6.2448 15.4192C6.37969 15.0474 6.52304 14.8695 7.28129 14.1327C7.79094 13.6375 8.00014 13.4147 8.00014 13.3672C8.00014 13.3303 7.96605 13.1703 7.9244 13.0117C7.88274 12.853 7.83025 12.6238 7.80775 12.5022C7.7623 12.2565 7.75025 11.1441 7.78944 10.808L7.81348 10.6018L6.49722 11.854C5.20587 13.0825 4.90425 13.3915 4.69124 13.7042C4.54752 13.9152 4.32991 14.3338 4.25113 14.5509C4.05355 15.0953 3.97765 15.5869 4.0056 16.1411C4.04563 16.9349 4.30296 17.6515 4.78826 18.3205C5.02644 18.6488 5.42805 19.0293 5.7953 19.2745C6.11297 19.4867 6.58886 19.7138 6.93767 19.8198C7.44075 19.9726 7.66021 20.001 8.32876 20C8.89979 19.9991 8.98367 19.9921 9.28472 19.921C9.46622 19.878 9.71166 19.8086 9.83012 19.7666C10.1327 19.6594 10.5103 19.4744 10.7856 19.2985C11.2008 19.0333 13.7673 16.5928 14.3849 15.8759C14.5565 15.6768 14.6988 15.4688 14.824 15.2343C15.149 14.6258 15.2716 14.1266 15.2708 13.4156C15.2702 12.8848 15.2152 12.5448 15.0578 12.0998C14.8513 11.5161 14.544 11.0406 14.0763 10.581C13.7112 10.2223 13.3978 9.99776 13.2623 9.99776C13.1805 9.99776 13.1081 10.049 12.8199 10.3112Z\" fill=\"#4D4E4E\" \/>\r\n          <\/svg>\r\n          View Ukrnafta WebPage\r\n        <\/a>\r\n                    <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.ukrnafta.android&#038;hl=en&#038;gl=US\" class=\"cases-header__link\" target=\"blank\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"18\" viewBox=\"0 0 16 18\" fill=\"none\">\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.316367 0.277582C0.115828 0.495696 0 0.828974 0 1.2652V16.7373C0 17.1736 0.115828 17.5068 0.323282 17.7162L0.376875 17.7633L8.96547 9.09463V8.90094L0.36996 0.230469L0.316367 0.277582Z\" fill=\"url(#paint0_linear_1696_20599)\" \/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8216 11.9909L8.95703 9.09959V8.89718L11.8216 6.00586L11.8839 6.04425L15.2723 7.98808C16.2421 8.53947 16.2421 9.45032 15.2723 10.0087L11.8839 11.9525L11.8216 11.9909Z\" fill=\"url(#paint1_linear_1696_20599)\" \/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8844 11.9541L8.95762 9L0.31543 17.7228C0.631797 18.0648 1.16253 18.1032 1.75551 17.7699L11.8844 11.9541Z\" fill=\"url(#paint2_linear_1696_20599)\" \/>\r\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8844 6.04513L1.75551 0.238065C1.16253 -0.103938 0.630068 -0.056825 0.31543 0.285178L8.95762 8.99927L11.8844 6.04513Z\" fill=\"url(#paint3_linear_1696_20599)\" \/>\r\n            <path opacity=\"0.2\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8241 11.8906L1.7643 17.6593C1.20244 17.9856 0.701094 17.9629 0.377811 17.6663L0.324219 17.7204L0.377811 17.7675C0.701094 18.0624 1.20244 18.0868 1.7643 17.7605L11.8932 11.9534L11.8241 11.8906Z\" fill=\"black\" \/>\r\n            <path opacity=\"0.12\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.2747 9.9091L11.8154 11.8913L11.8777 11.9541L15.2661 10.0103C15.7519 9.73112 15.9904 9.36469 15.9904 9C15.9611 9.33502 15.7138 9.6526 15.2747 9.9091Z\" fill=\"black\" \/>\r\n            <path opacity=\"0.25\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.75644 0.338412L15.2738 8.08931C15.7129 8.33883 15.9601 8.66513 15.9982 8.99841C15.9982 8.63373 15.7596 8.26729 15.2738 7.98811L1.75644 0.237207C0.786596 -0.32291 0 0.144727 0 1.26322V1.36442C0 0.244186 0.786596 -0.214725 1.75644 0.338412Z\" fill=\"white\" \/>\r\n            <defs>\r\n              <linearGradient id=\"paint0_linear_1696_20599\" x1=\"8.19509\" y1=\"1.09827\" x2=\"-5.57916\" y2=\"4.73451\" gradientUnits=\"userSpaceOnUse\">\r\n                <stop stop-color=\"#00A0FF\" \/>\r\n                <stop offset=\"0.00657\" stop-color=\"#00A1FF\" \/>\r\n                <stop offset=\"0.2601\" stop-color=\"#00BEFF\" \/>\r\n                <stop offset=\"0.5122\" stop-color=\"#00D2FF\" \/>\r\n                <stop offset=\"0.7604\" stop-color=\"#00DFFF\" \/>\r\n                <stop offset=\"1\" stop-color=\"#00E3FF\" \/>\r\n              <\/linearGradient>\r\n              <linearGradient id=\"paint1_linear_1696_20599\" x1=\"16.537\" y1=\"8.99841\" x2=\"-0.237241\" y2=\"8.99841\" gradientUnits=\"userSpaceOnUse\">\r\n                <stop stop-color=\"#FFE000\" \/>\r\n                <stop offset=\"0.4087\" stop-color=\"#FFBD00\" \/>\r\n                <stop offset=\"0.7754\" stop-color=\"#FFA500\" \/>\r\n                <stop offset=\"1\" stop-color=\"#FF9C00\" \/>\r\n              <\/linearGradient>\r\n              <linearGradient id=\"paint2_linear_1696_20599\" x1=\"10.293\" y1=\"10.6075\" x2=\"-0.903741\" y2=\"29.2782\" gradientUnits=\"userSpaceOnUse\">\r\n                <stop stop-color=\"#FF3A44\" \/>\r\n                <stop offset=\"1\" stop-color=\"#C31162\" \/>\r\n              <\/linearGradient>\r\n              <linearGradient id=\"paint3_linear_1696_20599\" x1=\"-1.86077\" y1=\"-4.86983\" x2=\"3.13456\" y2=\"3.46889\" gradientUnits=\"userSpaceOnUse\">\r\n                <stop stop-color=\"#32A071\" \/>\r\n                <stop offset=\"0.0685\" stop-color=\"#2DA771\" \/>\r\n                <stop offset=\"0.4762\" stop-color=\"#15CF74\" \/>\r\n                <stop offset=\"0.8009\" stop-color=\"#06E775\" \/>\r\n                <stop offset=\"1\" stop-color=\"#00F076\" \/>\r\n              <\/linearGradient>\r\n            <\/defs>\r\n          <\/svg>\r\n          Get it on Google Play\r\n        <\/a>\r\n                    <a href=\"https:\/\/apps.apple.com\/ua\/app\/ukrnafta\/id6449353231\" class=\"cases-header__link\" target=\"blank\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"20\" viewBox=\"0 0 16 20\" fill=\"none\">\r\n            <path d=\"M13.3637 10.603C13.3413 8.20265 15.398 7.03487 15.492 6.9805C14.3272 5.3398 12.5219 5.11562 11.8875 5.09775C10.3712 4.94358 8.9004 5.97433 8.128 5.97433C7.34018 5.97433 6.15075 5.11264 4.86881 5.13797C3.21918 5.16254 1.67592 6.0853 0.829517 7.51822C-0.917247 10.4399 0.385503 14.7335 2.05904 17.0951C2.89619 18.2517 3.87441 19.5431 5.1548 19.4977C6.40744 19.4478 6.87536 18.7261 8.38701 18.7261C9.88478 18.7261 10.3242 19.4977 11.63 19.4686C12.9744 19.4478 13.8208 18.3068 14.6286 17.1398C15.5961 15.8141 15.9846 14.5085 16 14.4415C15.9684 14.4311 13.3891 13.48 13.3637 10.603Z\" fill=\"black\" \/>\r\n            <path d=\"M10.8961 3.54532C11.5698 2.7313 12.0308 1.62384 11.9028 0.5C10.9277 0.541707 9.70821 1.15167 9.00596 1.94781C8.38465 2.64938 7.82963 3.79929 7.97301 4.88068C9.0684 4.95962 10.1931 4.34669 10.8961 3.54532Z\" fill=\"black\" \/>\r\n          <\/svg>\r\n          Download on the App Store\r\n        <\/a>\r\n          <\/div>\r\n      <\/div>\r\n\r\n\r\n\r\n<\/div>\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"2204\" height=\"1266\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/cover-main-1.png.webp\" alt=\"\" class=\"wp-image-13118\" srcset=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/cover-main-1.png.webp 2204w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/cover-main-1-300x172.png.webp 300w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/cover-main-1-1024x588.png.webp 1024w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/cover-main-1-768x441.png.webp 768w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/cover-main-1-1536x882.png.webp 1536w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/cover-main-1-2048x1176.png.webp 2048w\" sizes=\"(max-width: 2204px) 100vw, 2204px\" \/><\/figure><\/div>\n\n\n      <div id=\"block_64ba2e48491cd\" class=\"about-project  alignfull relative  l-block\" >\n  \n  \r\n<div class=\"l-wrap cases-container\">\r\n  <div class=\"about-project__inner\">\r\n    <div class=\"about-project__col about-project__col--info\">\r\n      <div class=\"about-project__title\">about the project<\/div><div class=\"about-project__text\">&#8220;Ukrnafta&#8221; is Ukraine&#8217;s largest oil company. It was created in 1994 through the privatization of the state enterprise &#8220;Ukrnafta Production Association,&#8221; which had existed since 1945. Ukrnafta operates more than two thousand wells, the vast majority of which are oil wells. The single-brand network of UKRNAFTA includes 460 gas stations in almost all regions of Ukraine.<\/div>    <\/div>\r\n    <div class=\"about-project__col about-project__col--lists\">\r\n      <div class=\"about-project__group\"><div class=\"about-project__group-title\">services<\/div><ul class=\"about-project__group-list\"><li class=\"about-project__group-item\"><a href=\"https:\/\/devlight.io\/blog\/discovery-phase-in-software-development\/\" target=\"_blank\">Discovery Phase<\/a><\/li><li class=\"about-project__group-item\"><a href=\"https:\/\/devlight.io\/digital-product-development\/\" target=\"_blank\">Product Development<\/a><\/li><li class=\"about-project__group-item\"><a href=\"https:\/\/devlight.io\/ux-ui-design\/\" target=\"_blank\">UI\/UX Design<\/a><\/li><li class=\"about-project__group-item\"><a href=\"https:\/\/devlight.io\/mobile-app-development\/\" target=\"_blank\">Mobile App Development<\/a><\/li><\/ul><\/div><div class=\"about-project__group\"><div class=\"about-project__group-title\">Technologies<\/div><ul class=\"about-project__group-list\"><li class=\"about-project__group-item\">Swift<\/li><li class=\"about-project__group-item\">Kotlin<\/li><li class=\"about-project__group-item\">Java<\/li><li class=\"about-project__group-item\">Firebase<\/li><li class=\"about-project__group-item\">React<\/li><\/ul><\/div>    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/div>\n\n \n      <div id=\"block_64b933e216d0f\" class=\"block-cases-numbers alignfull l-block\" >\n  \n    <style>\n    .numbers__inner-row{\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 250px;\n}\n  .big--info{\n      max-width: 795px;\n\n      font-weight: 600;\n      font-size: 290px;\n      line-height: 353px;\n      color: rgba(0, 0, 0, 0.15);\n  }\n  .small--info{\n    max-width: 389px;\n    font-family: 'RoadRadio';\n    font-weight: 700;\n    font-size: 50px;\n    line-height: 50px;\n    color: #000000;\n  }\n    \n  <\/style>\n\n    <div class=\"l-wrap cases-container\">\n\n      <div class=\"cases-numbers-header\">\n                  <div class=\"cases-numbers-title\">          \n            <p>Ukrnafta by the numbers<\/p>            \n          <\/div>\n           \n                  <div class=\"cases-numbers-text\">          \n            <p>Ukrnafta, the leading oil company of Ukraine, has had an extensive service network since 1994.<\/p>      \n          <\/div>\n          \n      <\/div>\n\n      <div class=\"numbers__grid\">\n                  <div class=\"numbers__item\">\n            <div class=\"numbers__item-title\"> 1.4M+<\/div>\n            <div class=\"numbers__item-text\"> average annual oil production<\/div>\n          <\/div>\n                  <div class=\"numbers__item\">\n            <div class=\"numbers__item-title\"> 20k+<\/div>\n            <div class=\"numbers__item-text\"> total number of employees<\/div>\n          <\/div>\n                  <div class=\"numbers__item\">\n            <div class=\"numbers__item-title\"> 460<\/div>\n            <div class=\"numbers__item-text\"> filling stations in almost all regions of Ukraine<\/div>\n          <\/div>\n                  <div class=\"numbers__item\">\n            <div class=\"numbers__item-title\"> 91<\/div>\n            <div class=\"numbers__item-text\"> special permits for hydrocarbon production<\/div>\n          <\/div>\n                  \n    <\/div>\n\n\n  <!--   <div class=\"numbers__inner-row\">\n\n      <div class=\"numbers__inner-info big--info\">\n        3M+\n      <\/div>\n\n      <div class=\"numbers__inner-info small--info\">\n        Instals of app in App Store and Google Play\n      <\/div>\n      \n    \n    <\/div>\n\n    <div class=\"numbers__inner-row\">\n\n      <div class=\"numbers__inner-info small--info\">\n        Instals of app in App Store and Google Play\n      <\/div>\n\n        <div class=\"numbers__inner-info big--info\">\n          3M+\n        <\/div>\n\n    <\/div>\n -->\n\n  <\/div>\n\n\n\n  <!-- {\"title\":\"GET A FREE COPY\",\"url\":\"#block_6278a5544ddae\",\"target\":\"\"} -->\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading width-sm has-large-font-size\">About the client &amp; the story behind them<\/h2>\n\n\n\n<p class=\"width-sm\">UKRNAFTA, acknowledged as the largest national network of gas stations in Ukraine and proudly occupying esteemed positions within the top 10 according to the Ukraine Business Awards, faced a notable absence\u2014a lack of a dedicated mobile application for customer interaction and communication.<br>Despite its substantial presence with 456 filling stations across the nation, UKRNAFTA recognized a crucial void in its service offerings. The company, which connects people through its extensive network, identified the potential of a mobile application as a powerful tool for effective communication and overall enhancement.<br><br>In a bid to modernize and amplify customer engagement, UKRNAFTA embarked on a significant rebranding effort for its gas stations across Ukraine in 2017, a move that earned the company an accolade from the Reddot Awards at 2019. This rebranding initiative reinforced the company&#8217;s commitment to evolution and improvement.<br><br>Realizing the significance of aligning with contemporary consumer expectations, especially considering the competitive landscape where rival companies had already embraced mobile applications, UKRNAFTA recognized the imperative need to bridge this gap. Thus, the decision was made to develop a mobile app \u2014 a strategic move aimed at not only enhancing customer experiences but also establishing a seamless, modern communication channel to better serve its diverse customer base.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1104\" height=\"577\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-1-2.png.webp\" alt=\"\" class=\"wp-image-13119\" style=\"width:1104px;height:577px\" srcset=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-1-2.png.webp 1104w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-1-2-300x157.png.webp 300w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-1-2-1024x535.png.webp 1024w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-1-2-768x401.png.webp 768w\" sizes=\"(max-width: 1104px) 100vw, 1104px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading width-sm has-large-font-size\">Request to Devlight<\/h2>\n\n\n\n<p class=\"width-sm\">The initial objective presented to Devlight was the development of a competitive mobile application aiming to engage a younger audience by offering competitive prices and innovative features. The primary goals encompassed attracting new customers, particularly those interested in non-fuel products, and implementing customer segmentation strategies.<br><br>Critical performance metrics for the app revolved around enhancing sales by increasing the volume of liters sold through transactions not reliant on traditional cash registers. The focus on wallet-based purchases was integral to driving sales. Key advantages of the application included its swift functionality and the prominent display of pricing on the main screen, ensuring immediate value delivery upon user interaction.<br><br>UKRNAFTA&#8217;s overarching business objectives post-app launch were twofold: achieving a substantial increase in customer acquisition within three months and driving significant growth in cashless transactions over the same period.<br><br>Devlight was chosen as the development partner following a competitive tender process that centered on our proposal for a user-centric design approach, ensuring a qualitatively superior application development flow. Our approach aligned seamlessly with UKRNAFTA&#8217;s vision for the app, emphasizing both user-centric approach and efficient development methodologies.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2208\" height=\"1254\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/mockup-3.png.webp\" alt=\"\" class=\"wp-image-13120\" srcset=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/mockup-3.png.webp 2208w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/mockup-3-300x170.png.webp 300w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/mockup-3-1024x582.png.webp 1024w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/mockup-3-768x436.png.webp 768w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/mockup-3-1536x872.png.webp 1536w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/mockup-3-2048x1163.png.webp 2048w\" sizes=\"(max-width: 2208px) 100vw, 2208px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading width-sm has-large-font-size\">Challenges and Limitation<\/h2>\n\n\n\n<p class=\"width-sm\">The project encountered several challenges that impacted the development process. One primary hurdle was the urgency to swiftly implement the product within a limited timeframe, amidst evolving product development requirements and loosely defined business goals.<br><br>The decision-making procedures within UKRNAFTA, being a state-owned entity, introduced complexities such as security protocols and bureaucratic processes. This created initial delays in commencing the design phase as decisions had been made earlier based on the application design concept.<br><br>Integration with the CRM system posed another significant challenge. Originally intended to work in tandem, the application&#8217;s development faced hindrances due to insufficient data accessibility from the CRM system. Subsequently, the client introduced a new, untested CRM system from another vendor, necessitating the development of an independent admin panel to ensure operational efficiency and autonomy from the CRM. This entailed the intricate task of integrating the newly developed admin panel with the CRM system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading width-sm\" id=\"width-sm\">Problems we faced<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Technical challenges arose in implementing payment and refueling processes from a vehicle without using a cash register system;<\/li>\n\n\n\n<li>Change of managers (product owners) on the customer side, impacting consistent communication and decision-making;<\/li>\n\n\n\n<li>Efforts were directed towards increasing sales through wallet-based and contactless transactions, necessitating technical adaptations for seamless execution;<\/li>\n\n\n\n<li>Initiating digitization for customers who previously had no digital interaction or platform engagement posed a fundamental challenge;<\/li>\n\n\n\n<li>The need to establish groundwork for a personalized loyalty program was hindered by changes in project direction and functionality due to customer rejections during mid-development stages. This impacted the loyalty program, discounts, and related features.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading width-sm has-large-font-size\">How we did it \u2014 solutions, approach, methodology<\/h2>\n\n\n\n<p class=\"width-sm\">As we embarked on the journey of developing the UKRNAFTA mobile application, our initial phase, termed &#8216;Discovery,&#8217; was pivotal. This stage involved extensive discussions with the client, delving deep into their operational constraints and allowances. We meticulously crafted a blueprint by defining requirements through acceptance criteria, Business Process Model and Notation (BPMN), and meticulously documented APIs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1104\" height=\"720\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-2.png.webp\" alt=\"\" class=\"wp-image-13121\" srcset=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-2.png.webp 1104w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-2-300x196.png.webp 300w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-2-1024x668.png.webp 1024w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/photo-2-768x501.png.webp 768w\" sizes=\"(max-width: 1104px) 100vw, 1104px\" \/><\/figure>\n\n\n\n<p class=\"width-sm\">In the initial stages of development, due to time constraints on the client&#8217;s end, it was decided to bypass the wireframing stage and proceed directly to crafting detailed UI &amp; UX designs. This approach ensured a comprehensive groundwork before advancing into the development phase.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"2408\" height=\"1468\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/ui-kit.png.webp\" alt=\"\" class=\"wp-image-13122\" style=\"width:1154px;height:692px\" srcset=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/ui-kit.png.webp 2408w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/ui-kit-300x183.png.webp 300w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/ui-kit-1024x624.png.webp 1024w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/ui-kit-768x468.png.webp 768w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/ui-kit-1536x936.png.webp 1536w, https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/ui-kit-2048x1249.png.webp 2048w\" sizes=\"(max-width: 2408px) 100vw, 2408px\" \/><\/figure>\n\n\n\n<p class=\"width-sm\">As we transitioned into development, our team concurrently tackled backend and front-end development. Simultaneously, we delved into native development for both iOS and Android platforms, shaping the app&#8217;s future. However, amidst this progress, we encountered a hurdle during Azure deployment. The integration with a financial partner had to be postponed due to a pause initiated by the client, momentarily delaying our process. Nevertheless, our backend was skillfully developed using Java, ensuring robust functionality.<\/p>\n\n\n\n<p class=\"width-sm\">The testing phase was crucial, marked by closed beta testing exclusively for the client&#8217;s review. This rigorous testing ensured that the application was stable, functional, and aligned with the client&#8217;s expectations.<br><br>Finally, the culmination of our efforts led to a momentous event\u2014the successful release of the application to the world. The launch marked a significant milestone, but the real impact lay in the user experience, the app&#8217;s functionality, and its reception in the market. The release opened new chapters, inviting users to engage with the app and setting the stage for further growth and enhancements.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading width-sm has-large-font-size\" style=\"font-style:normal;font-weight:600\">Completed Challenges<\/h2>\n\n\n\n<p class=\"width-sm\">Upon overcoming the challenges, the project achieved several significant milestones:<br><br>The release of the application marked a significant achievement, boasting a user-friendly design that prioritized convenience.<br><br>Operational enhancements were profound, automating gas station processes and facilitating customer digitization, thereby enabling effective segmentation. This transformation provided a competitive edge, elevating the gas station&#8217;s stature and aligning it with industry trends.<br><br>Notable features introduced included the fuel wallet option, offering benefits such as convenient gas station mapping for easier searchability. These advancements elevated the gas station&#8217;s competitiveness, positioning it as a higher-tier player within the industry and in sync with contemporary trends observed among other gas stations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading width-sm has-large-font-size\" style=\"font-style:normal;font-weight:600\">Future challenges<\/h2>\n\n\n\n<p class=\"width-sm\">Moving forward, the gas station market remains dynamic, with each player continuously enhancing its functionality. While the current version surpasses the MVP (Minimum Viable Product), future plans involve integrating promotions, discounts, and an independent loyalty program rewarding fuel purchases. The aim is to broaden functionality by incorporating additional useful features.<br><br>The ongoing collaboration aims to elevate the application&#8217;s capabilities, providing enhanced value and further enhancing service quality. Continual efforts are dedicated to refining the app to offer an even richer user experience and to meet evolving customer needs in this competitive market landscape.<\/p>\n\n\n\n      <div id=\"block_64b909c516d08\" class=\"key-features alignfull l-block\" >\n  \n  \r\n\r\n\r\n  <div class=\"l-wrap cases-container\">\r\n  <h2 class=\"key-features__title\">KEY FEATURES AND VALUE<\/h2><div class=\"key-features__cards\"><div class=\"key-features__card\"><div class=\"key-features__img-wrap\" style=\"--bg: rgb(117,121,128)\"><img decoding=\"async\" class=\"key-features__img\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/Eldorado_test-4.png.webp\" alt=\"\" width=\"200\" height=\"300\"><\/div><div class=\"key-features__card-title\">Quick registration<\/div><div class=\"key-features__card-description\">Quick registration can make the application more attractive to users, which allows to increase their flow;<\/div><\/div><div class=\"key-features__card\"><div class=\"key-features__img-wrap\" style=\"--bg: rgb(106,118,129)\"><img decoding=\"async\" class=\"key-features__img\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/Theoretical_part-4.png.webp\" alt=\"\" width=\"200\" height=\"300\"><\/div><div class=\"key-features__card-title\">Fuel wallet<\/div><div class=\"key-features__card-description\">A fuel wallet can help increase sales as it makes the process of buying fuel more convenient and attractive for users;<\/div><\/div><div class=\"key-features__card\"><div class=\"key-features__img-wrap\" style=\"--bg: rgb(92,103,98)\"><img decoding=\"async\" class=\"key-features__img\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/Practical_part-6.png.webp\" alt=\"\" width=\"200\" height=\"300\"><\/div><div class=\"key-features__card-title\">NaftaPay<\/div><div class=\"key-features__card-description\">Nafta Pay can help the company increase sales, as it makes the process of buying fuel more convenient and attractive for users;<\/div><\/div><div class=\"key-features__card\"><div class=\"key-features__img-wrap\" style=\"--bg: rgb(116,138,142)\"><img decoding=\"async\" class=\"key-features__img\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/Emotions_diary-6.png.webp\" alt=\"\" width=\"200\" height=\"300\"><\/div><div class=\"key-features__card-title\">Search map<\/div><div class=\"key-features__card-description\">The search map allows users to easily and quickly find the nearest gas station with the required type of fuel and service.<\/div><\/div><div class=\"key-features__card\"><div class=\"key-features__img-wrap\" style=\"--bg: rgb(132,127,121)\"><img decoding=\"async\" class=\"key-features__img\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/Practical_part-1-4.png.webp\" alt=\"\" width=\"200\" height=\"300\"><\/div><div class=\"key-features__card-title\">News<\/div><div class=\"key-features__card-description\">News and personalized messages create greater user interest in the application and the company as a whole, which leads to increased user engagement;<\/div><\/div><div class=\"key-features__card\"><div class=\"key-features__img-wrap\" style=\"--bg: rgb(66,68,84)\"><img decoding=\"async\" class=\"key-features__img\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/Emotions_diary-1-4.png.webp\" alt=\"\" width=\"200\" height=\"300\"><\/div><div class=\"key-features__card-title\">User profile<\/div><div class=\"key-features__card-description\">The Company may use this information to provide personalized services, such as fuel and service recommendations.<\/div><\/div><\/div>  <\/div>\r\n\r\n\r\n\r\n<\/div>\n\n\n      <div id=\"block_6283843bb9f79\" class=\"block-cases-design-final alignfull  l-block\" >\n  \n  \n<style>\n    .swiper-scrollbar-drag{\n      background-color: #273051;\n    }\n    \/* .cases-design-final-bg-color{\n      padding: 120px 0px;\n    } *\/\n    \/* @media (max-width: 1200px){\n      .cases-design-final-bg-color {\n        padding-bottom: 133px;\n      }\n    } *\/\n    @media (max-width: 880px){\n\/*    .cases-design-final-bg-color {\n        padding-top: 0;\n      } *\/\n    }\n    @media (max-width: 1400px) and (min-width: 1200px){\n        .cases-final-slider figure img:nth-child(2) {\n          left: 99px;\n      }\n    }\n    @media (max-width: 1050px) and (min-width:900px){\n      .cases-final-slider figure img:nth-child(2) {\n        left: 97px;\n      }\n    }\n\n  \n\n<\/style>   \n\n<div class=\"cases-design-final-bg-color\" style=\"background-color: #ffffff\">\n  <div class=\"l-wrap cases-container\">\n          <div class=\"cases-design-final__content  md:pl-4 flex-row\" style=\"color: #000101\">\n          <h2>Final design<\/h2>\n<p>Here are some of the final design screens that we want to share with you.<\/p>      <\/div>\n    \n          <div class=\"js-image-slider-wrap relative\">\n        <div class=\"js-image-slider js-image-gallery cases-final-slider !pb-14 !lg:pb-11\">\n          <div class=\"swiper-container\">\n              <div class=\"swiper-wrapper\">\n\n                                                      <div class=\"cases-final-slider swiper-slide\">\n                    <figure>\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/iPhone-14-Pro-1-2.png.webp\" alt=\"slider\">\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/iphone_shadow_vertical.svg\" alt=\"slider\">\n                    <\/figure>\n                  <\/div>\n\n                                                    <div class=\"cases-final-slider swiper-slide\">\n                    <figure>\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/iPhone-14-Pro-2-2.png.webp\" alt=\"slider\">\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/iphone_shadow_vertical.svg\" alt=\"slider\">\n                    <\/figure>\n                  <\/div>\n\n                                                    <div class=\"cases-final-slider swiper-slide\">\n                    <figure>\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/iPhone-14-Pro-3-2.png.webp\" alt=\"slider\">\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/iphone_shadow_vertical.svg\" alt=\"slider\">\n                    <\/figure>\n                  <\/div>\n\n                                                    <div class=\"cases-final-slider swiper-slide\">\n                    <figure>\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/iPhone-14-Pro-4-2.png.webp\" alt=\"slider\">\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/iphone_shadow_vertical.svg\" alt=\"slider\">\n                    <\/figure>\n                  <\/div>\n\n                                                    <div class=\"cases-final-slider swiper-slide\">\n                    <figure>\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/iPhone-14-Pro-5-2.png.webp\" alt=\"slider\">\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/iphone_shadow_vertical.svg\" alt=\"slider\">\n                    <\/figure>\n                  <\/div>\n\n                                                    <div class=\"cases-final-slider swiper-slide\">\n                    <figure>\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/iPhone-14-Pro-11.png.webp\" alt=\"slider\">\n                      <img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/iphone_shadow_vertical.svg\" alt=\"slider\">\n                    <\/figure>\n                  <\/div>\n\n                                \n              <\/div>\n                <div class=\"swiper-scrollbar\">\n                <\/div>\n          <\/div>\n          \n        <\/div>\n      <\/div>\n    \n    <div class=\"cases-final-slider__tip text-center mt-8 flex justify-center\">\n      *Scroll to view      <svg class=\"ml-4\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\">\n        <path d=\"M5.46816 8.3125C5.46816 6.63003 6.13652 5.01648 7.32621 3.82679C8.51589 2.63711 10.1294 1.96875 11.8119 1.96875C13.4944 1.96875 15.1079 2.63711 16.2976 3.82679C17.4873 5.01648 18.1557 6.63003 18.1557 8.3125C18.1557 8.48655 18.0865 8.65347 17.9635 8.77654C17.8404 8.89961 17.6735 8.96875 17.4994 8.96875C17.3254 8.96875 17.1584 8.89961 17.0354 8.77654C16.9123 8.65347 16.8432 8.48655 16.8432 8.3125C16.8432 6.97813 16.3131 5.69841 15.3695 4.75487C14.426 3.81133 13.1463 3.28125 11.8119 3.28125C10.4775 3.28125 9.19783 3.81133 8.25428 4.75487C7.31074 5.69841 6.78066 6.97813 6.78066 8.3125C6.78066 8.48655 6.71152 8.65347 6.58845 8.77654C6.46538 8.89961 6.29846 8.96875 6.12441 8.96875C5.95037 8.96875 5.78345 8.89961 5.66038 8.77654C5.5373 8.65347 5.46816 8.48655 5.46816 8.3125ZM20.5619 13.3438C19.9927 13.3432 19.4366 13.5144 18.9661 13.8348C18.8688 13.3867 18.6646 12.9688 18.3708 12.6167C18.0771 12.2645 17.7026 11.9887 17.2792 11.8126C16.8557 11.6365 16.396 11.5654 15.9392 11.6054C15.4824 11.6454 15.042 11.7952 14.6557 12.0422V8.3125C14.6557 7.55829 14.3561 6.83497 13.8227 6.30166C13.2894 5.76836 12.5661 5.46875 11.8119 5.46875C11.0577 5.46875 10.3344 5.76836 9.80108 6.30166C9.26777 6.83497 8.96816 7.55829 8.96816 8.3125V17.8281L8.14457 16.5047C7.76558 15.852 7.14284 15.3766 6.41333 15.1831C5.68383 14.9896 4.90733 15.0937 4.25465 15.4727C3.60197 15.8517 3.12657 16.4745 2.93304 17.204C2.73951 17.9335 2.84371 18.71 3.2227 19.3627L6.42957 24.8314C6.51945 24.9769 6.66257 25.0816 6.82847 25.1231C6.99437 25.1647 7.16993 25.1398 7.31777 25.0538C7.46562 24.9679 7.57406 24.8276 7.62001 24.6629C7.66596 24.4981 7.64579 24.322 7.56379 24.1719L4.3602 18.7031C4.25965 18.529 4.1944 18.3367 4.16815 18.1373C4.14191 17.938 4.15519 17.7354 4.20724 17.5411C4.31237 17.1488 4.56902 16.8144 4.92074 16.6113C5.27247 16.4083 5.69045 16.3533 6.08273 16.4584C6.27698 16.5104 6.45906 16.6002 6.6186 16.7227C6.77814 16.8451 6.912 16.9977 7.01254 17.1719C7.01556 17.1784 7.01923 17.1846 7.02348 17.1905L9.0666 20.4717C9.14183 20.5931 9.25459 20.6866 9.38778 20.7381C9.52097 20.7896 9.66732 20.7963 9.80463 20.757C9.94193 20.7178 10.0627 20.6349 10.1486 20.5208C10.2345 20.4068 10.2809 20.2678 10.2807 20.125V8.3125C10.2807 7.90639 10.442 7.51691 10.7292 7.22974C11.0163 6.94258 11.4058 6.78125 11.8119 6.78125C12.218 6.78125 12.6075 6.94258 12.8947 7.22974C13.1818 7.51691 13.3432 7.90639 13.3432 8.3125V15.75C13.3432 15.924 13.4123 16.091 13.5354 16.214C13.6584 16.3371 13.8254 16.4062 13.9994 16.4062C14.1735 16.4062 14.3404 16.3371 14.4635 16.214C14.5865 16.091 14.6557 15.924 14.6557 15.75V14.4375C14.6557 14.0314 14.817 13.6419 15.1042 13.3547C15.3913 13.0676 15.7808 12.9062 16.1869 12.9062C16.593 12.9062 16.9825 13.0676 17.2697 13.3547C17.5568 13.6419 17.7182 14.0314 17.7182 14.4375V16.625C17.7182 16.799 17.7873 16.966 17.9104 17.089C18.0334 17.2121 18.2004 17.2812 18.3744 17.2812C18.5485 17.2812 18.7154 17.2121 18.8385 17.089C18.9615 16.966 19.0307 16.799 19.0307 16.625V16.1875C19.0307 15.7814 19.192 15.3919 19.4792 15.1047C19.7663 14.8176 20.1558 14.6562 20.5619 14.6562C20.968 14.6562 21.3575 14.8176 21.6447 15.1047C21.9318 15.3919 22.0932 15.7814 22.0932 16.1875V20.125C22.0932 22.5455 21.2947 24.1916 21.2871 24.2069C21.211 24.3621 21.1992 24.541 21.2543 24.7049C21.3094 24.8687 21.4269 25.0042 21.5813 25.0819C21.6716 25.1298 21.7722 25.1553 21.8744 25.1562C21.9966 25.1565 22.1164 25.1226 22.2203 25.0585C22.3243 24.9943 22.4083 24.9024 22.4629 24.7931C22.5011 24.7166 23.4068 22.8736 23.4068 20.125V16.1875C23.4068 15.814 23.3332 15.4441 23.1902 15.099C23.0472 14.7539 22.8376 14.4404 22.5735 14.1763C22.3093 13.9122 21.9957 13.7028 21.6505 13.5599C21.3054 13.4171 20.9355 13.3436 20.5619 13.3438Z\" fill=\"#343A40\"\/>\n      <\/svg>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<\/div>\n\n\n      <div id=\"block_62988f1e86460\" class=\"block-cases-wireframes block-cases-wireframes--v2 alignfull  l-block\" >\n  \n  \n\n    <style>\n        \/* .block-cases-wireframes {\n            padding: 125px 0px 130px;\n        }\n\n        .cases-wireframes__header {\n            font-weight: 700;\n            font-size: 50px;\n            line-height: 60px;\n            display: flex;\n            justify-content: space-between;\n            flex-wrap: wrap;\n            align-items: center;\n            color: #000101;\n            margin-bottom: 180px;\n        }\n\n        .cases-wireframes__header p {\n            max-width: 585px;\n            font-weight: 400;\n            font-size: 18px;\n            line-height: 40px;\n            color: rgba(0, 1, 1, 0.8);\n        }\n\n        .cases-wireframes__header h3 {\n            font-family: 'RoadRadio';\n            font-weight: 700;\n            font-size: 50px;\n            line-height: 60px;\n            color: #000101;\n        }\n\n        @media (max-width: 991px) {\n            .cases-wireframes__header h3 {\n                font-size: 38px\n            }\n        } *\/\n\n\n        .section-ios .grid-item-horizontal,\n        .section-ios .grid-item-vertical,\n        .glass-container {\n            display: block;\n            position: relative;\n            z-index: 1\n        }\n\n        .section-ios .grid-item-horizontal:after,\n        .section-ios .grid-item-horizontal:before,\n        .section-ios .grid-item-vertical:after,\n        .section-ios .grid-item-vertical:before,\n        .glass-container:after,\n        .glass-container:before {\n            content: \"\";\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0;\n            z-index: 1\n        }\n\n        .section-ios .grid-item-horizontal .glass-hardware,\n        .section-ios .grid-item-horizontal .glass-screen,\n        .section-ios .grid-item-vertical .glass-hardware,\n        .section-ios .grid-item-vertical .glass-screen,\n        .glass-container .glass-hardware,\n        .glass-container .glass-screen {\n            display: block;\n            position: absolute;\n            top: 0;\n            left: 0\n        }\n\n        .section-ios .grid-item-horizontal .glass-hardware,\n        .section-ios .grid-item-vertical .glass-hardware,\n        .glass-container .glass-hardware {\n            pointer-events: none;\n            z-index: 3\n        }\n\n        .section-ios .grid-item-horizontal .glass-screen,\n        .section-ios .grid-item-vertical .glass-screen,\n        .glass-container .glass-screen {\n            z-index: 4\n        }\n\n        .section-ios {\n            overflow: hidden;\n            position: relative;\n            margin-bottom: -120px;\n            --device-width: 185px;\n            --logo-width: 192px;\n            --logo-height: 192px;\n            --logo-scale: 1.875;\n            --grid-rows: 6;\n            --grid-gap: 50px;\n            --grid-padding-top: 130px;\n            --grid-padding-bottom: 140px;\n            --grid-vertical-centering-offset: 26px\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios {\n                --device-width: 220px;\n                --logo-width: 155px;\n                --logo-height: 155px;\n                --grid-gap: 30px;\n                --grid-padding-top: 106px;\n                --grid-padding-bottom: 106px;\n                --grid-vertical-centering-offset: 10px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios {\n                --device-width: 134px;\n                --logo-width: 101px;\n                --logo-height: 101px;\n                --logo-scale: 1.8614;\n                --grid-rows: 7;\n                --grid-gap: 20px;\n                --grid-padding-top: 130px;\n                --grid-padding-bottom: 100px\n            }\n        }\n\n        .section-ios .ios-grid {\n            display: grid;\n            grid-template-rows: var(--device-width) var(--device-width) var(--logo-width) var(--device-width) var(--device-width) auto;\n            grid-template-columns: var(--device-width) var(--device-width) var(--device-width) var(--device-width) var(--logo-height) var(--device-width) var(--device-width) var(--device-width) var(--device-width) var(--device-width);\n            grid-gap: var(--grid-gap);\n            gap: var(--grid-gap);\n            margin-bottom: var(--grid-padding-bottom);\n            margin-left: calc(var(--device-width)\/2 + var(--grid-gap)\/2);\n            justify-content: center;\n            align-content: center;\n            width: 100%;\n            margin-top: calc(var(--device-width)*-1 + var(--r-localnav-height))\n        }\n\n        @media only screen and (min-width:1069px)and (max-height:1150px) {\n            .section-ios .ios-grid {\n                margin-top: calc(var(--grid-rows)*(var(--device-width) + var(--grid-gap))*0.33*-1 - -50vh + var(--device-width)\/2*-1 + var(--grid-gap)\/2*-1 - var(--grid-vertical-centering-offset)*-1 - var(--r-localnav-height)*-1);\n                \/* margin-bottom: -120px; *\/\n            }\n        }\n\n        @media only screen and (min-width:735px)and (max-width:1068px)and (max-height:1025px) {\n            .section-ios .ios-grid {\n                margin-top: calc(var(--grid-rows)*(var(--device-width) + var(--grid-gap))*0.33*-1 - -50vh + var(--device-width)\/2*-1 + var(--grid-gap)\/2*-1 - var(--grid-vertical-centering-offset)*-1 - var(--r-localnav-height)*-1);\n                \/* margin-bottom: -120px; *\/\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-grid {\n                margin-top: calc(var(--device-width)*-1 + var(--r-localnav-height) - 13px);\n                \/* margin-bottom: -120px; *\/\n            }\n        }\n\n        .section-ios .ios-grid-item-logo {\n            grid-area: 3\/5\n        }\n\n        .section-ios .ios-grid-item-content {\n            grid-area: 5\/4\/7\/7\n        }\n\n        .section-ios .ios-grid-item-1 {\n            grid-area: 2\/1\n        }\n\n        .section-ios .ios-grid-item-2 {\n            grid-area: 2\/3\n        }\n\n        .section-ios .ios-grid-item-3 {\n            grid-area: 2\/4\n        }\n\n        .section-ios .ios-grid-item-4 {\n            grid-area: 2\/5\n        }\n\n        .section-ios .ios-grid-item-5 {\n            grid-area: 1\/7\n        }\n\n        .section-ios .ios-grid-item-6 {\n            grid-area: 2\/8\n        }\n\n        .section-ios .ios-grid-item-7 {\n            grid-area: 1\/9\n        }\n\n        .section-ios .ios-grid-item-8 {\n            grid-area: 3\/1\n        }\n\n        .section-ios .ios-grid-item-9 {\n            grid-area: 3\/2\n        }\n\n        .section-ios .ios-grid-item-10 {\n            grid-area: 4\/3\n        }\n\n        .section-ios .ios-grid-item-11 {\n            grid-area: 4\/4\n        }\n\n        .section-ios .ios-grid-item-12 {\n            grid-area: 3\/6\n        }\n\n        .section-ios .ios-grid-item-13 {\n            grid-area: 3\/7\n        }\n\n        .section-ios .ios-grid-item-14 {\n            grid-area: 5\/8\n        }\n\n        .section-ios .ios-grid-item-15 {\n            grid-area: 4\/8\n        }\n\n        .section-ios .ios-grid-item-16 {\n            grid-area: 4\/9\n        }\n\n        .section-ios .ios-grid-item-17 {\n            grid-area: 5\/1\n        }\n\n        .section-ios .ios-grid-item-18 {\n            grid-area: 6\/2\n        }\n\n        .section-ios .ios-grid-item-19 {\n            grid-area: 5\/7\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-grid-item-content {\n                grid-area: last\/3\/last\/8\n            }\n\n            .section-ios .ios-grid-item-4 {\n                grid-area: 5\/5\n            }\n\n            .section-ios .ios-grid-item-12 {\n                grid-area: 6\/5\n            }\n\n            .section-ios .ios-grid-item-13 {\n                grid-area: 5\/4\n            }\n\n            .section-ios .ios-grid-item-15 {\n                grid-area: 6\/6\n            }\n\n            .section-ios .ios-grid-item-18 {\n                grid-area: 2\/5\n            }\n\n            .section-ios .ios-grid-item-19 {\n                grid-area: 3\/6\n            }\n        }\n\n        .section-ios .ios-grid-item-logo {\n            width: 120px;\n            height: 120px;\n            background-size: 120px 120px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg');\n            margin: auto;\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .ios-grid-item-logo {\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .ios-grid-item-logo {\n                width: 120px;\n                height: 120px;\n                background-size: 120px 120px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .ios-grid-item-logo {\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-grid-item-logo {\n                width: 101px;\n                height: 101px;\n                background-size: 101px 101px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .ios-grid-item-logo {\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (inverted-colors) {\n            .section-ios .ios-grid-item-logo {\n                filter: invert(1)\n            }\n        }\n\n        html.enhance-ios .section-ios .ios-grid-item-logo {\n            width: 384px;\n            height: 384px;\n            background-size: 384px 384px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg');\n            width: 150px;\n            height: 150px;\n            background-size: 150px 150px;\n            transform: scale(var(--logo-scale))\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                width: 310px;\n                height: 310px;\n                background-size: 310px 310px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                width: 202px;\n                height: 202px;\n                background-size: 202px 202px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                background-image: url('https:\/\/devlight.io\/wp-content\/themes\/devlight\/assets\/img\/logo-fishka.svg')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                width: 155px;\n                height: 155px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                width: 101px;\n                height: 101px\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                background-size: 155px 155px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            html.enhance-ios .section-ios .ios-grid-item-logo {\n                background-size: 101px 101px\n            }\n        }\n\n        .section-ios .ios-grid-item-content {\n            text-align: center;\n            align-self: start\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-grid-item-content {\n                text-align: left\n            }\n        }\n\n        .section-ios .ios-grid-item-horizontal {\n            grid-column-end: span 2\n        }\n\n        .section-ios .ios-grid-item-vertical {\n            grid-row-end: span 2\n        }\n\n        .section-ios .ios-grid-item-11 {\n            margin-top: 2px\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-grid-item-15 {\n                margin-left: 17px\n            }\n        }\n\n        .section-ios .ios-grid-item-offset {\n            margin-top: calc(var(--device-width)*-1 - var(--logo-width)*-1 - -2px)\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-grid-item-offset.no-top-offset-small {\n                margin-top: 0\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-grid-item-offset-horizontal {\n                margin-left: -16px\n            }\n        }\n\n        .section-ios .justify-self-end {\n            justify-self: end\n        }\n\n        .section-ios .image-screen-1 .glass-screen {\n            width: 375px;\n            height: 185px;\n            background-size: 375px 185px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-1.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-1 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-1.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-2 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-2.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-2 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-2.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-2 .glass-screen {\n                width: 204px;\n                height: 426px;\n                background-size: 204px 426px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-2.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-2 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-2.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-3 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-3 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-3 .glass-screen {\n                width: 204px;\n                height: 426px;\n                background-size: 204px 426px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-3 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-3 .glass-screen {\n                width: 124px;\n                height: 260px;\n                background-size: 124px 260px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-3 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-4 .glass-screen {\n            width: 375px;\n            height: 185px;\n            background-size: 375px 185px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-4.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-4 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-4.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-4 .glass-screen {\n                width: 426px;\n                height: 204px;\n                background-size: 426px 204px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-4.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-4 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-4.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-4 .glass-screen {\n                width: 260px;\n                height: 124px;\n                background-size: 260px 124px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-4.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-4 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-4.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-5 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-5.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-5 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-5.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-5 .glass-screen {\n                width: 204px;\n                height: 426px;\n                background-size: 204px 426px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-5.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-5 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-5.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-6 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-10.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-6 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-10.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-7 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-7 .glass-screen {\n            }\n        }\n\n        .section-ios .image-screen-8 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-8 .glass-screen {\n            }\n        }\n\n        .section-ios .image-screen-9 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-9.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-9 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-9.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-10 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-10.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-10 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-10.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-10 .glass-screen {\n                width: 204px;\n                height: 426px;\n                background-size: 204px 426px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-10.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-10 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-10.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-11 .glass-screen {\n            width: 375px;\n            height: 185px;\n            background-size: 375px 185px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-11 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-11 .glass-screen {\n                width: 426px;\n                height: 204px;\n                background-size: 426px 204px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-11 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-11 .glass-screen {\n                width: 260px;\n                height: 124px;\n                background-size: 260px 124px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-11 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-12 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-12.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-12 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-12.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-12 .glass-screen {\n                width: 204px;\n                height: 426px;\n                background-size: 204px 426px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-12.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-12 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-12.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-12 .glass-screen {\n                width: 124px;\n                height: 260px;\n                background-size: 124px 260px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-12.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-12 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-12.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-13 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-13.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-13 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-13.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-13 .glass-screen {\n                width: 204px;\n                height: 426px;\n                background-size: 204px 426px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-13.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-13 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-13.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-13 .glass-screen {\n                width: 124px;\n                height: 260px;\n                background-size: 124px 260px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-13.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-13 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-13.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-14 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-14.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-14 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-14.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-15 .glass-screen {\n            width: 375px;\n            height: 185px;\n            background-size: 375px 185px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-15 .glass-screen {\n              background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-15 .glass-screen {\n                width: 260px;\n                height: 124px;\n                background-size: 260px 124px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-15 .glass-screen {\n              background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-11.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-16 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-14.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-16 .glass-screen {\n              background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-14.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-17 .glass-screen {\n            width: 375px;\n            height: 185px;\n            background-size: 375px 185px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-17.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-17 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-17.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-18 .glass-screen {\n            width: 375px;\n            height: 185px;\n            background-size: 375px 185px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-18.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-18 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-18.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-18 .glass-screen {\n                width: 426px;\n                height: 204px;\n                background-size: 426px 204px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-18.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-18 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-18.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-18 .glass-screen {\n                width: 260px;\n                height: 124px;\n                background-size: 260px 124px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-18.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-18 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-18.png.webp')\n            }\n        }\n\n        .section-ios .image-screen-19 .glass-screen {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .image-screen-19 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .image-screen-19 .glass-screen {\n                width: 204px;\n                height: 426px;\n                background-size: 204px 426px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-19 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .image-screen-19 .glass-screen {\n                width: 124px;\n                height: 260px;\n                background-size: 124px 260px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .image-screen-19 .glass-screen {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-fishka-3.png.webp')\n            }\n        }\n\n        .section-ios .grid-item-horizontal {\n            width: 375px;\n            height: 185px\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-horizontal {\n                width: 442px;\n                height: 220px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-horizontal {\n                width: 270px;\n                height: 136px\n            }\n        }\n\n        .section-ios .grid-item-horizontal .glass-hardware {\n            width: 375px;\n            height: 185px;\n            background-size: 375px 185px;\n            background-repeat: no-repeat;\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .grid-item-horizontal .glass-hardware {\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-horizontal .glass-hardware {\n                width: 442px;\n                height: 220px;\n                background-size: 442px 220px;\n                background-repeat: no-repeat;\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-horizontal .glass-hardware {\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-horizontal .glass-hardware {\n                width: 270px;\n                height: 136px;\n                background-size: 270px 136px;\n                background-repeat: no-repeat;\n            }\n            .ios-grid-item-1,\n            .ios-grid-item-2,\n            .ios-grid-item-10,\n            .ios-grid-item-17 {\n              display: none;\n            }\n\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-horizontal .glass-hardware {\n            }\n        }\n\n        .section-ios .grid-item-horizontal .glass-screen {\n            z-index: 2;\n            margin-left: 8px;\n            margin-top: 8px\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-horizontal .glass-screen {\n                margin-left: 5px;\n                margin-top: 5px\n            }\n        }\n\n        .section-ios .grid-item-horizontal:before {\n            width: 500px;\n            height: 290px;\n            background-size: 485px 276px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-horizontal.png.webp');\n            left: 0;\n            top: 0;\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .grid-item-horizontal:before {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-horizontal.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-horizontal:before {\n                width: 568px;\n                height: 382px;\n                background-size: 568px 382px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-horizontal.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-horizontal:before {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-horizontal.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-horizontal:before {\n                width: 332px;\n                height: 222px;\n                background-size: 332px 222px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-horizontal.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-horizontal:before {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-horizontal.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-horizontal:before {\n                left: -19px;\n                top: -17px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-horizontal:before {\n                left: -5px;\n                top: -4px\n            }\n        }\n\n        .section-ios .grid-item-vertical {\n            width: 185px;\n            height: 552px\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-vertical {\n                width: 220px;\n                height: 442px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-vertical {\n                width: 134px;\n                height: 270px\n            }\n        }\n\n        .section-ios .grid-item-vertical .glass-hardware {\n            width: 185px;\n            height: 375px;\n            background-size: 185px 375px;\n            background-repeat: no-repeat;\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .grid-item-vertical .glass-hardware {\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-vertical .glass-hardware {\n                width: 220px;\n                height: 442px;\n                background-size: 220px 442px;\n                background-repeat: no-repeat;\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-vertical .glass-hardware {\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-vertical .glass-hardware {\n                width: 134px;\n                height: 270px;\n                background-size: 134px 270px;\n                background-repeat: no-repeat;\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-vertical .glass-hardware {\n            }\n        }\n\n        .section-ios .grid-item-vertical .glass-screen {\n            z-index: 2;\n            margin-left: 8px;\n            margin-top: 8px\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-vertical .glass-screen {\n                margin-left: 5px;\n                margin-top: 5px\n            }\n        }\n\n        .section-ios .grid-item-vertical:before {\n            width: 300px;\n            height: 500px;\n            background-size: 276px 485px;\n            background-repeat: no-repeat;\n            background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-vertical.png.webp');\n            left: 0;\n            top: 0;\n            opacity: 1;\n        }\n\n        @media (-webkit-min-device-pixel-ratio:1.5),\n        (min-resolution:144dpi),\n        only screen and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (min-resolution:1.5dppx) {\n            .section-ios .grid-item-vertical:before {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-vertical.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-vertical:before {\n                width: 382px;\n                height: 568px;\n                background-size: 382px 568px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-vertical.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:1068px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:1068px)and (min-resolution:1.5dppx),\n        only screen and (max-width:1068px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-vertical:before {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-vertical.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-vertical:before {\n                width: 222px;\n                height: 332px;\n                background-size: 222px 332px;\n                background-repeat: no-repeat;\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-vertical.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),\n        only screen and (max-width:734px)and (min-resolution:1.5dppx),\n        only screen and (max-width:734px)and (min-resolution:144dpi) {\n            .section-ios .grid-item-vertical:before {\n                background-image: url('https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/themes\/devlight\/assets\/img\/a-shadow-vertical.png.webp');\n            }\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .grid-item-vertical:before {\n                left: -17px;\n                top: -19px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .grid-item-vertical:before {\n                left: -8px;\n                top: -10px\n            }\n        }\n\n        @media only screen and (inverted-colors) {\n\n            .section-ios .grid-item-horizontal,\n            .section-ios .grid-item-vertical,\n            .section-ios .glass-container {\n                filter: invert(1)\n            }\n        }\n\n        html.enhance-ios .section-ios .grid-item-horizontal,\n        html.enhance-ios .section-ios .grid-item-vertical,\n        html.enhance-ios .section-ios .glass-container {\n            opacity: 0\n        }\n\n        .section-ios .glass-screen {\n            border-radius: 27px\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .glass-screen {\n                border-radius: 20px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .glass-screen {\n                border-radius: 17px\n            }\n        }\n\n        .section-ios .ios-content {\n            box-sizing: border-box;\n            padding: calc(var(--grid-gap)\/2) calc(var(--grid-gap)\/2) 0 calc(var(--grid-gap)\/2);\n            text-align: center;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n        .section-ios .ios-content-img {\n            width: 50px;\n            height: 50px;\n        }\n        .section-ios .ios-content-title {\n            font-family: 'RoadRadio';\n            font-weight: 700;\n            font-size: 56px;\n            line-height: 64px;\n            color: #191919;    \n            margin-top: 25px;\n            max-width: 424px;\n        }\n        .section-ios .ios-content-title > * {\n            margin: 0;\n        }\n        .section-ios .ios-content-text {\n            margin-top: 16px;\n            font-family: 'Proxima Nova';\n            font-style: normal;\n            font-weight: 600;\n            font-size: 16px;\n            line-height: 24px;\n        }\n        .section-ios .ios-content-btn {\n            font-family: 'RoadRadio';\n            background: #EE4046;\n            border-radius: 2px;\n            font-weight: 700;\n            font-size: 16px;\n            line-height: 16px;\n            letter-spacing: 1px;\n            color: #FFFFFF;\n            padding: 20px 46px;\n            text-align: center;\n            margin-top: 40px;\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-content {\n                padding-top: calc(52px - var(--grid-gap));\n                margin: 0 auto;\n                max-width: 87.5vw;\n                padding-left: 0;\n                padding-right: 0\n            }\n        }\n\n        html.enhance-ios .section-ios .ios-content [data-animate-ios-content] {\n            opacity: 0\n        }\n\n        .section-ios .ios-intro {\n            margin-top: 80px\n        }\n\n        @media only screen and (max-width:1068px) {\n            .section-ios .ios-intro {\n                margin-top: 35px\n            }\n        }\n\n        @media only screen and (max-width:734px) {\n            .section-ios .ios-intro {\n                margin-top: 0\n            }\n        }\n\n        .section-ios .ios-availability {\n            color: #6e6e73\n        }\n    <\/style>\n\n    <section class=\"section section-ios\" id=\"section-ios-2\">\n        <div class=\"ios-grid\">\n            <figure  class=\"ios-grid-item ios-grid-item-logo\" id=\"ios-grid-item-logo\" style=\"transform: matrix(1, 0, 0, 1, 0, 0);background-image: url('https:\/\/devlight.io\/wp-content\/uploads\/2023\/07\/Layer-2.svg');\"><\/figure>\n            <div class=\"ios-grid-item ios-grid-item-1 ios-grid-item-horizontal ios-grid-item-offset justify-self-end medium-hide small-hide\">\n                <div class=\"glass-container grid-item-horizontal image-screen-1\" id=\"image-screen-1\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/1-5.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-2 ios-grid-item-vertical small-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-2\" id=\"image-screen-2\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/2-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-3 ios-grid-item-vertical\">\n                <div class=\"glass-container grid-item-vertical image-screen-3\" id=\"image-screen-3\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/3-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-4 ios-grid-item-horizontal ios-grid-item-offset-horizontal\">\n                <div class=\"glass-container grid-item-horizontal image-screen-4\" id=\"image-screen-4\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/4-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-5 ios-grid-item-vertical align-self-end small-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-5\" id=\"image-screen-5\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/5-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-6 ios-grid-item-vertical medium-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-6\" id=\"image-screen-6\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/6-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-7 ios-grid-item-vertical medium-hide\" hidden>\n                <div class=\"glass-container grid-item-vertical image-screen-7\" id=\"image-screen-7\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url();\"><\/div>\n                <\/div>\n            <\/div>\n            <!-- <div class=\"ios-grid-item ios-grid-item-8 ios-grid-item-vertical ios-grid-item-offset medium-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-8\" id=\"image-screen-8\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url();\"><\/div>\n                <\/div>\n            <\/div> -->\n            <div class=\"ios-grid-item ios-grid-item-9 ios-grid-item-vertical ios-grid-item-offset medium-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-9\" id=\"image-screen-9\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/9-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-10 ios-grid-item-vertical small-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-10\" id=\"image-screen-10\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/10-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-11 ios-grid-item-horizontal\">\n                <div class=\"glass-container grid-item-horizontal image-screen-11\" id=\"image-screen-11\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/11-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-12 ios-grid-item-vertical ios-grid-item-offset-horizontal\">\n                <div class=\"glass-container grid-item-vertical image-screen-12\" id=\"image-screen-12\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/12-3.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-13 ios-grid-item-vertical ios-grid-item-offset-horizontal\">\n                <div class=\"glass-container grid-item-vertical image-screen-13\" id=\"image-screen-13\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/13-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-14 ios-grid-item-vertical medium-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-14\" id=\"image-screen-14\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/14-3.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-15 ios-grid-item-horizontal ios-grid-item-offset no-top-offset-small medium-hide small-show\">\n                <div class=\"glass-container grid-item-horizontal image-screen-15\" id=\"image-screen-15\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/15-4.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <!-- <div class=\"ios-grid-item ios-grid-item-16 ios-grid-item-vertical medium-hide\">\n                <div class=\"glass-container grid-item-vertical image-screen-16\" id=\"image-screen-16\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url();\"><\/div>\n                <\/div>\n            <\/div> -->\n            <div class=\"ios-grid-item ios-grid-item-17 ios-grid-item-horizontal ios-grid-item-offset justify-self-end medium-hide\">\n                <div class=\"glass-container grid-item-horizontal image-screen-17\" id=\"image-screen-17\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/17-2.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-18 ios-grid-item-horizontal ios-grid-item-offset no-top-offset-small justify-self-end\">\n                <div class=\"glass-container grid-item-horizontal image-screen-18\" id=\"image-screen-18\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/18-3.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-19 ios-grid-item-vertical\">\n                <div class=\"glass-container grid-item-vertical image-screen-19\" id=\"image-screen-19\" style=\"transform: matrix(1, 0, 0, 1, 0, 0); opacity: 0;\">\n                    <div class=\"glass-hardware\"><\/div>\n                    <div class=\"glass-screen\" style=\"background-image: url(https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/19-3.png.webp);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ios-grid-item ios-grid-item-content\">\n                <div class=\"ios-content\">\n                    <img decoding=\"async\" class=\"ios-content-img\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2022\/06\/heart.png.webp\" alt=\"heart\" width=\"50\" height=\"50\">\n                    <div class=\"ios-content-title\"><p>Thank you for your interest!<\/p><\/div>\n                    <div class=\"ios-content-text\">\n                        Stay connected with us                     \n                    <\/div>\n                    <a style=\"background-color: #0a0303\"\n                     href=\"https:\/\/devlight.io\/contact-us\/\" class=\"ios-content-btn\">Get a consultation<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    <script src=\"https:\/\/scrollmagic.io\/assets\/js\/lib\/greensock\/TweenMax.min.js\"><\/script>\n    <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/ScrollMagic\/2.0.7\/ScrollMagic.min.js\"><\/script>\n    <script src=\"https:\/\/scrollmagic.io\/scrollmagic\/uncompressed\/plugins\/animation.gsap.js\"><\/script>\n    <!-- <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/ScrollMagic\/2.0.7\/plugins\/debug.addIndicators.min.js\"><\/script> -->\n\n    <script>\n      jQuery(function () { \n\/\/ init controller\nvar controller = new ScrollMagic.Controller();\n\n\/\/ build Tween\nif (jQuery( window ).width() >= 1024) {\n  var timeline = new TimelineMax()\n  .add([ \n    TweenMax.from(\"#section-ios-2 .glass-container\", 1, {opacity: 0}),\n    TweenMax.to(\"#section-ios-2 .glass-container\", 1, {opacity: 1}),\n    TweenMax.from(\"#section-ios-2 #ios-grid-item-logo\", 1, {transform: 'matrix(1.875, 0, 0, 1.875, 0, 0)'}),\n    TweenMax.to(\"#section-ios-2 #ios-grid-item-logo\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-1\", 1, {transform: 'matrix(1, 0, 0, 1, 0, -1622)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-1\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}), \n    TweenMax.from(\"#section-ios-2 #image-screen-2\", 1, {transform: 'matrix(1, 0, 0, 1, 0, -697)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-2\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-3\", 1, {transform: 'matrix(1, 0, 0, 1, 0, -885)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-3\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-4\", 1, {transform: 'matrix(1, 0, 0, 1, 954, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-4\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-5\", 1, {transform: 'matrix(1, 0, 0, 1, 1434, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-5\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-6\", 1, {transform: 'matrix(1, 0, 0, 1, 1324, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-6\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-7\", 1, {transform: 'matrix(1, 0, 0, 1, 2184, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-7\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-8\", 1, {transform: 'matrix(1, 0, 0, 1, 0, -1232)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-8\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-9\", 1, {transform: 'matrix(1, 0, 0, 1, 0, -1282)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-9\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-10\", 1, {transform: 'matrix(1, 0, 0, 1, -1375, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-10\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-11\", 1, {transform: 'matrix(1, 0, 0, 1, -957, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-11\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-12\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 882)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-12\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-13\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 547)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-13\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-14\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 958)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-14\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-15\", 1, {transform: 'matrix(1, 0, 0, 1, 2339, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-15\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-16\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 1478)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-16\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-17\", 1, {transform: 'matrix(1, 0, 0, 1, -1330, 0)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-17\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n    TweenMax.from(\"#section-ios-2 #image-screen-17\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 534)'}),\n    TweenMax.to(\"#section-ios-2 #image-screen-17\", 1, {transform: 'matrix(1, 0, 0, 1, 0, 0)'}),\n  ]);  \n} else {\n  var timeline = new TimelineMax()\n  .add([ \n    TweenMax.from(\"#section-ios-2 .glass-container\", 1, {opacity: 0}),\n    TweenMax.to(\"#section-ios-2 .glass-container\", 1, {opacity: 1}),\n    TweenMax.from(\"#section-ios- #ios-grid-item-logo\", 1, {transform: 'matrix(1.875, 0, 0, 1.875, 0, 0)'}),\n  ]);\n  \n}\n\n\/\/ build scene\nnew ScrollMagic.Scene({\n        triggerElement: \"#section-ios-2\",\n        triggerHook: 0.4, \n        duration: \"400px\", \n        offset: 0 \n      })\n      .setTween(timeline)\n    \/\/   .addIndicators({name: \"GSAP\"})\n      .addTo(controller);\n  \n});\n    <\/script>\n\n\n\n<\/div>\n\n\n      <div id=\"block_65f46cf54baee\" class=\"cases-rmore alignfull relative  l-block\" >\n  \n  \r\n<div class=\"l-wrap cases-container\">\r\n  <div class=\"cases-rmore__header\">\r\n    <h2 class=\"cases-rmore__title\">READ MORE CASE STUDIES<\/h2><div class=\"cases-rmore__subtitle\">Check out more Devlight project and success stories<\/div>  <\/div>\r\n  <div class=\"cases-rmore__grid\"><a class=\"cases-rmore__item\" href=\"https:\/\/devlight.io\/portfolio\/fishka\/\" taget=\"_blank\"><div class=\"cases-rmore__item-img\"><img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2023\/07\/Frame-34233-1-1.png.webp\" alt=\"\"><\/div><div class=\"cases-rmore__item-body\"><div class=\"cases-rmore__item-title\">Fishka \u2013 A loyalty program that unites more than 6 million customers.<\/div><\/div><\/a><a class=\"cases-rmore__item\" href=\"https:\/\/devlight.io\/portfolio\/eldorado-ua\/\" taget=\"_blank\"><div class=\"cases-rmore__item-img\"><img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/Frame-34233-2.png.webp\" alt=\"\"><\/div><div class=\"cases-rmore__item-body\"><div class=\"cases-rmore__item-title\">eldorado.ua &#8211;  retail network of electronics and household appliances #1 in terms of turnover in Ukraine.<\/div><\/div><\/a><a class=\"cases-rmore__item\" href=\"https:\/\/devlight.io\/portfolio\/brocard\/\" taget=\"_blank\"><div class=\"cases-rmore__item-img\"><img decoding=\"async\" src=\"https:\/\/devlight.io\/wp-content\/webp-express\/webp-images\/uploads\/2024\/03\/Frame-34233-10.png.webp\" alt=\"\"><\/div><div class=\"cases-rmore__item-body\"><div class=\"cases-rmore__item-title\">Brocard \u2013 chain of stores and online retailer of premium perfumes and cosmetics.<\/div><\/div><\/a><\/div><\/div>\r\n\r\n<\/div> \n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>","protected":false},"featured_media":0,"parent":0,"template":"","class_list":["post-11489","case_studies","type-case_studies","status-publish",""],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building an application for the largest national network of filling stations Ukrnafta - Devlight<\/title>\n<meta name=\"description\" content=\"Devlight collaborates with Ukrnafta to revolutionize fuel stations through a cutting-edge mobile app. Explore enhanced operations and customer engagement, uncovering challenges and innovative solutions in this industry-transforming collaboration.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devlight.io\/portfolio\/ukrnafta\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an application for the largest national network of filling stations Ukrnafta\" \/>\n<meta property=\"og:description\" content=\"Devlight collaborates with Ukrnafta to revolutionize fuel stations through a cutting-edge mobile app. Explore enhanced operations and customer engagement, uncovering challenges and innovative solutions in this industry-transforming collaboration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devlight.io\/portfolio\/ukrnafta\/\" \/>\n<meta property=\"og:site_name\" content=\"Devlight\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-14T10:28:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2204\" \/>\n\t<meta property=\"og:image:height\" content=\"1266\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data2\" content=\"Henn Akimov\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devlight.io\/portfolio\/ukrnafta\/\",\"url\":\"https:\/\/devlight.io\/portfolio\/ukrnafta\/\",\"name\":\"Building an application for the largest national network of filling stations Ukrnafta - Devlight\",\"isPartOf\":{\"@id\":\"https:\/\/devlight.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devlight.io\/portfolio\/ukrnafta\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devlight.io\/portfolio\/ukrnafta\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png\",\"datePublished\":\"2023-07-07T10:53:43+00:00\",\"dateModified\":\"2024-05-14T10:28:23+00:00\",\"description\":\"Devlight collaborates with Ukrnafta to revolutionize fuel stations through a cutting-edge mobile app. Explore enhanced operations and customer engagement, uncovering challenges and innovative solutions in this industry-transforming collaboration.\",\"breadcrumb\":{\"@id\":\"https:\/\/devlight.io\/portfolio\/ukrnafta\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devlight.io\/portfolio\/ukrnafta\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devlight.io\/portfolio\/ukrnafta\/#primaryimage\",\"url\":\"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png\",\"contentUrl\":\"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png\",\"width\":2204,\"height\":1266},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devlight.io\/portfolio\/ukrnafta\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devlight.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ukrnafta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devlight.io\/#website\",\"url\":\"https:\/\/devlight.io\/\",\"name\":\"Devlight\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devlight.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building an application for the largest national network of filling stations Ukrnafta - Devlight","description":"Devlight collaborates with Ukrnafta to revolutionize fuel stations through a cutting-edge mobile app. Explore enhanced operations and customer engagement, uncovering challenges and innovative solutions in this industry-transforming collaboration.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devlight.io\/portfolio\/ukrnafta\/","og_locale":"en_US","og_type":"article","og_title":"Building an application for the largest national network of filling stations Ukrnafta","og_description":"Devlight collaborates with Ukrnafta to revolutionize fuel stations through a cutting-edge mobile app. Explore enhanced operations and customer engagement, uncovering challenges and innovative solutions in this industry-transforming collaboration.","og_url":"https:\/\/devlight.io\/portfolio\/ukrnafta\/","og_site_name":"Devlight","article_modified_time":"2024-05-14T10:28:23+00:00","og_image":[{"width":2204,"height":1266,"url":"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes","Written by":"Henn Akimov"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devlight.io\/portfolio\/ukrnafta\/","url":"https:\/\/devlight.io\/portfolio\/ukrnafta\/","name":"Building an application for the largest national network of filling stations Ukrnafta - Devlight","isPartOf":{"@id":"https:\/\/devlight.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devlight.io\/portfolio\/ukrnafta\/#primaryimage"},"image":{"@id":"https:\/\/devlight.io\/portfolio\/ukrnafta\/#primaryimage"},"thumbnailUrl":"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png","datePublished":"2023-07-07T10:53:43+00:00","dateModified":"2024-05-14T10:28:23+00:00","description":"Devlight collaborates with Ukrnafta to revolutionize fuel stations through a cutting-edge mobile app. Explore enhanced operations and customer engagement, uncovering challenges and innovative solutions in this industry-transforming collaboration.","breadcrumb":{"@id":"https:\/\/devlight.io\/portfolio\/ukrnafta\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devlight.io\/portfolio\/ukrnafta\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devlight.io\/portfolio\/ukrnafta\/#primaryimage","url":"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png","contentUrl":"https:\/\/devlight.io\/wp-content\/uploads\/2024\/03\/cover-main-1.png","width":2204,"height":1266},{"@type":"BreadcrumbList","@id":"https:\/\/devlight.io\/portfolio\/ukrnafta\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devlight.io\/"},{"@type":"ListItem","position":2,"name":"Ukrnafta"}]},{"@type":"WebSite","@id":"https:\/\/devlight.io\/#website","url":"https:\/\/devlight.io\/","name":"Devlight","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devlight.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/devlight.io\/wp-json\/wp\/v2\/case_studies\/11489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devlight.io\/wp-json\/wp\/v2\/case_studies"}],"about":[{"href":"https:\/\/devlight.io\/wp-json\/wp\/v2\/types\/case_studies"}],"wp:attachment":[{"href":"https:\/\/devlight.io\/wp-json\/wp\/v2\/media?parent=11489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}