Document<\/title>\r\n<\/head>\r\n<body>\r\n <style>\r\n \r\n\r\n @font-face {\r\n font-family: \"Hempa Sans\";\r\n src: url(\"https:\/\/itzfizzdigital.b-cdn.net\/UniteaSans-Regular.ttf\");\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n body {\r\n font-family: \"Hempa Sans\";\r\n overflow-x: hidden !important;\r\n \/* contain: paint; *\/\r\n }\r\n ::-webkit-scrollbar {\r\n width: 10px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background-color: #1e1e1e;\r\n \/* border-radius: 50%; *\/\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background-color: #ff9e44;\r\n border-radius: 50%;\r\n }\r\n \r\n \/* Section 1 *\/\r\n \r\n .individualchar {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100vw;\r\n font-family: \"Hempa Sans\";\r\n font-weight: 800;\r\n }\r\n .individualchar h2 {\r\n font-size: 15vw;\r\n font-weight: 900;\r\n color: #000000;\r\n \/* padding-left: -39.4vw; *\/\r\n }\r\n .anything {\r\n font-weight: 600;\r\n font-family: \"Hempa Sans\";\r\n padding-left: 17.9vw;\r\n }\r\n .n {\r\n position: relative;\r\n }\r\n .windmill {\r\n position: absolute;\r\n top: -9.4vh;\r\n width: 8.5vw;\r\n animation: windmillrotate 3s ease-in-out infinite;\r\n transform-origin: center;\r\n }\r\n .h {\r\n position: relative;\r\n }\r\n @keyframes worm {\r\n 0%,\r\n 100% {\r\n transform: translateY(30px);\r\n }\r\n 50% {\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes windmillrotate {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 25% {\r\n transform: rotate(90deg);\r\n }\r\n 50% {\r\n transform: rotate(180deg);\r\n }\r\n 75% {\r\n transform: rotate(270deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n .A {\r\n display: inline-block;\r\n animation: A 0.5s;\r\n }\r\n \r\n @keyframes A {\r\n 0% {\r\n transform: rotateX(180deg) translateY(-200px);\r\n }\r\n 100% {\r\n transform: rotateX(0deg) translateY(0);\r\n }\r\n }\r\n \r\n .i2 {\r\n display: inline-block;\r\n animation: i2 1.5s infinite;\r\n }\r\n \r\n @keyframes i2 {\r\n 0% {\r\n transform: rotateX(-540deg);\r\n }\r\n 100% {\r\n transform: rotateX(180deg);\r\n }\r\n }\r\n \r\n .n {\r\n display: inline-block;\r\n animation: n 0.5s 0.5s forwards;\r\n opacity: 0;\r\n }\r\n @keyframes n {\r\n 0% {\r\n transform: translateY(100px);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n .i {\r\n display: inline-block;\r\n animation: i 0.5s 1s forwards;\r\n opacity: 0;\r\n }\r\n @keyframes i {\r\n 0% {\r\n transform: translateY(-200px);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n .m {\r\n display: inline-block;\r\n animation: m 0.5s 1.5s forwards;\r\n opacity: 0;\r\n }\r\n @keyframes m {\r\n 0% {\r\n transform: translateX(-50px);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n }\r\n .a2 {\r\n display: inline-block;\r\n opacity: 0;\r\n animation: a2 0.5s 2s forwards;\r\n }\r\n @keyframes a2 {\r\n 0% {\r\n transform: scale(0.5);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n .wheel {\r\n position: absolute;\r\n top: 190px;\r\n width: 130px;\r\n z-index: -1;\r\n opacity: 0;\r\n animation: wheel 2s 1s;\r\n }\r\n @keyframes wheel {\r\n 0% {\r\n transform: translateX(-160px) scale(0.5) rotate(0);\r\n opacity: 1;\r\n }\r\n 25% {\r\n transform: translateX(-160px) scale(1) rotate(90deg);\r\n opacity: 1;\r\n }\r\n 50% {\r\n transform: translateX(0) scale(1) rotate(180deg);\r\n opacity: 1;\r\n }\r\n 75%,\r\n 100% {\r\n transform: scale(0.5) rotate(200deg);\r\n opacity: 0;\r\n }\r\n }\r\n .e {\r\n display: inline-block;\r\n animation: e 0.5s 3s both;\r\n visibility: hidden;\r\n }\r\n @keyframes e {\r\n 0% {\r\n transform: rotateY(180deg);\r\n visibility: hidden;\r\n }\r\n 100% {\r\n transform: rotateY(0);\r\n visibility: visible;\r\n }\r\n }\r\n \r\n .t2 {\r\n display: inline-block;\r\n position: relative;\r\n animation: t2 1.5s 2s forwards;\r\n transform: scale(0);\r\n }\r\n .y {\r\n position: relative;\r\n }\r\n .bolt {\r\n position: absolute;\r\n z-index: -1;\r\n min-width: 200px;\r\n top: 2vh;\r\n margin-left: 3vw !important;\r\n mix-blend-mode: multiply;\r\n }\r\n @keyframes t2 {\r\n 0% {\r\n transform: scale(0);\r\n }\r\n 25% {\r\n transform: scale(0.25);\r\n }\r\n 50% {\r\n transform: scale(0.5);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n \r\n \/* section 2 *\/\r\n \r\n .hero-bg-black {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n overflow: hidden;\r\n z-index: 1;\r\n width: 100%;\r\n height: 0%;\r\n background-color: #fff;\r\n position: absolute;\r\n }\r\n .section-2 {\r\n text-align: center;\r\n background: url(https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/back-sect-2.png);\r\n width: 100vw;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 2000ms;\r\n \r\n }\r\n .content-section-2 {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-card.png\");\r\n background-size: contain;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n width: 100vw;\r\n padding-bottom: 5vh;\r\n \/*padding-top: 5vh;*\/\r\n height: 90vh;\r\n }\r\n .content-sect-2 {\r\n width: 75vw;\r\n }\r\n .content-sect-2 h2 {\r\n color: #fff;\r\n font-size: 4vw !important;\r\n font-weight: 500;\r\n -webkit-text-stroke-width: 1;\r\n -webkit-text-stroke-color: #000;\r\n font-family: \"Hempa Sans\";\r\n line-height: 12.5vh;\r\n }\r\n .sect-2-para-1 {\r\n margin-top: 5vh !important;\r\n color: #fff;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2.8vw !important;\r\n font-style: normal;\r\n font-weight: 400;\r\n \/*line-height: 8.5vh !important ;*\/\r\n }\r\n .sect-2-para-2 {\r\n width: 80%;\r\n margin-left: 10%;\r\n color: #fff;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 1.5vw !important;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 6.3vh !important; \r\n }\r\n .btn-sect-2 {\r\n border: 2px solid #fff;\r\n box-shadow: 5px 5px 0 #fff;\r\n padding: 2.3vh 1.3vw;\r\n background-color: transparent;\r\n border-radius: 50px;\r\n margin-top: 5.5vh;\r\n color: #fff;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2.5vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 3.8vh;\r\n }\r\n .overlay-img-sect-2-1 {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 25vw;\r\n margin-top: -10vh;\r\n z-index: 0;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .overlay-img-sect-2-2 {\r\n position: absolute;\r\n top: 50;\r\n right: 0;\r\n width: 21.4vw;\r\n z-index: 0;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-2-curly-underline {\r\n position: absolute;\r\n margin-top: -3vh;\r\n margin-left: -1.8vw;\r\n width: 12.8vw;\r\n }\r\n .sect-2-underline {\r\n position: absolute;\r\n width: 33.6vw;\r\n margin-top: 9.8vh;\r\n margin-left: -0.71vw;\r\n }\r\n .sect-2-orange-arrow {\r\n position: absolute;\r\n margin-top: 12.6vh;\r\n width: 4.65vw;\r\n margin-left: 12.1vw;\r\n }\r\n .sect-2-arrow {\r\n position: absolute;\r\n margin-top: -7.2vh;\r\n width: 15.8vw;\r\n margin-left: -14vw;\r\n }\r\n \r\n \/* section 3 *\/\r\n \r\n .section-3 {\r\n background-color: #ffe0aa;\r\n text-align: center;\r\n width: 100vw;\r\n height: 120vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: start;\r\n position: relative;\r\n padding-bottom: 5vh ;\r\n }\r\n .content-section-3 {\r\n width: 70vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n \r\n }\r\n .content-sect-3 h3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-3-circle.png');\r\n \r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: -32%;\r\n left: 20%;\r\n width: 60%;\r\n height: 85%;\r\n z-index: 1;\r\n }\r\n \r\n .content-sect-3 h3 {\r\n margin-bottom: 40px;\r\n margin-top: 50px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2vw;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n width: 22vw;\r\n height: 15vh;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1 {\r\n margin-bottom: 40px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 128px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 124px; \/* 112.5% *\/\r\n }\r\n .content-sect-3 p {\r\n margin-bottom: 40px;\r\n width: 970px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 40px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 54px;\r\n }\r\n .btn-sect-3 {\r\n background-color: #ff9e44;\r\n font-size: 24px;\r\n border: none;\r\n box-shadow: 5px 5px 0 #000;\r\n padding: 9px 54px;\r\n border-radius: 50px;\r\n margin-bottom: 40px;\r\n \r\n font-weight: 600;\r\n position: relative;\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0%;\r\n left: -6vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0%;\r\n right: -6vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .sect-3-left {\r\n position: absolute;\r\n left: 0;\r\n top: 35%;\r\n width: 250px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-3-right {\r\n position: absolute;\r\n right: -3%;\r\n top: 0;\r\n width: 250px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n \r\n .sect-3-left-arrow {\r\n position: absolute;\r\n width: 57px;\r\n top: 610px;\r\n left: 570px;\r\n }\r\n .sect-3-right-arrow {\r\n position: absolute;\r\n width: 57px;\r\n top: 610px;\r\n right: 570px;\r\n }\r\n \r\n \/* Section 4 Cards *\/\r\n .card-section {\r\n width: 100%;\r\n height: fit-content;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n background-color: #ffe0aa;\r\n }\r\n .stack-area {\r\n width: 100%;\r\n height: 300vh;\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .right-section,\r\n .left-section {\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: sticky;\r\n top: 0;\r\n box-sizing: border-box;\r\n }\r\n .cards {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n }\r\n .vid-sect{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-top: -8vh;\r\n }\r\n .individual-card {\r\n width: 400px;\r\n height: 500px;\r\n box-sizing: border-box;\r\n padding: 35px;\r\n border-radius: 6mm;\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: start;\r\n flex-direction: column;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transition: 0.5s ease-in-out;\r\n }\r\n .individual-card:nth-child(1) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002666.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 5;\r\n }\r\n .individual-card:nth-child(2) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002667.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 4;\r\n }\r\n .individual-card:nth-child(3) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002668.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 3;\r\n }\r\n .individual-card:nth-child(4) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002669.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 2;\r\n }\r\n .individual-card:nth-child(5) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002670.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 1;\r\n }\r\n .sub {\r\n font-size: 20px;\r\n font-weight: 700;\r\n }\r\n .content {\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n margin-left: -0.5vw;\r\n letter-spacing: 1px;\r\n margin-top: -11vh;\r\n flex-wrap: wrap;\r\n }\r\n .content-proto{\r\n color: #fff;\r\n }\r\n .individual-card.active {\r\n transform-origin: bottom left;\r\n }\r\n .left {\r\n align-items: center;\r\n flex-direction: column;\r\n }\r\n .top,\r\n .bottom {\r\n width: 100%;\r\n height: 100vh;\r\n \/* font-family: poppins; *\/\r\n font-size: 70px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .vidCards{\r\n width: 70%;\r\n object-fit: cover;\r\n \r\n }\r\n \r\n \/*CSS Code for responsiveness*\/\r\n @media screen and (max-width: 800px) {\r\n .left {\r\n position: relative;\r\n width: 100vw;\r\n }\r\n }\r\n \r\n \/* Section 5 *\/\r\n \r\n .section-5 {\r\n position: relative;\r\n }\r\n .spacer {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding-top: 50px;\r\n flex-direction: column;\r\n text-align: center;\r\n margin-top: 40px;\r\n padding-bottom: 50px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 2000ms;\r\n \r\n }\r\n .spacer p {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 40px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 54px; \/* 135% *\/\r\n width: 970px;\r\n }\r\n .designsection {\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n padding: 30px;\r\n padding-top: 50px;\r\n gap: 40px;\r\n }\r\n .content-sect-4 h3 {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 1.5vw;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n width: 16vw;\r\n height: 5vh;\r\n }\r\n .content-sect-4 h3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-circle.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n top: -1.5vw;\r\n left: 1vw;\r\n width: 13.2vw;\r\n height: 5.5vw;\r\n z-index: 1;\r\n }\r\n \r\n \r\n .designanimation-sect-5 {\r\n color: #222;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 108px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 145px; \/* 113.281% *\/\r\n letter-spacing: 2.56px;\r\n text-transform: capitalize;\r\n width: 1150px;\r\n }\r\n .span-itzfizz {\r\n padding: 3px 9px;\r\n border: 2px solid #000;\r\n border-radius: 20px;\r\n }\r\n .design_process {\r\n border: 2px solid #222222;\r\n border-radius: 200px;\r\n width: 1355px;\r\n height: 330px;\r\n padding: 50px 0px;\r\n transform: translateX(45vw);\r\n \r\n }\r\n \r\n .design_process {\r\n overflow: hidden;\r\n text-align: center;\r\n margin: 0 5px;\r\n background: transparent;\r\n font-weight: 900;\r\n }\r\n \r\n .design_process:before {\r\n position: absolute;\r\n content: \"\";\r\n left: 0;\r\n bottom: 0;\r\n height: 4px;\r\n width: 100%;\r\n border-bottom: 4px solid transparent;\r\n border-left: 4px solid transparent;\r\n box-sizing: border-box;\r\n transform: translateX(100%);\r\n border-radius: 300px;\r\n }\r\n \r\n .design_process:after {\r\n position: absolute;\r\n content: \"\";\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n border-top: 4px solid transparent;\r\n border-right: 4px solid transparent;\r\n box-sizing: border-box;\r\n transform: translateX(-100%);\r\n border-radius: 200px;\r\n }\r\n \r\n .design_process:hover {\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\r\n border: none;\r\n }\r\n \r\n .design_process:hover:before {\r\n border-color: #ff9e44;\r\n height: 100%;\r\n transform: translateX(0);\r\n transition: 0.3s transform linear, 0.3s height linear 0.3s;\r\n }\r\n \r\n .design_process:hover:after {\r\n border-color: #ff9e44;\r\n height: 100%;\r\n transform: translateX(0);\r\n transition: 0.3s transform linear, 0.3s height linear 0.5s;\r\n }\r\n \r\n .designanimation {\r\n width: 900px;\r\n font-size: 98px;\r\n margin-bottom: 40px;\r\n color: #222222;\r\n }\r\n .spacer p {\r\n width: 650px;\r\n font-size: 32px;\r\n color: #000000;\r\n margin-bottom: 40px;\r\n }\r\n \r\n .serial-num-black,\r\n .serial-num-orange {\r\n color: #222;\r\n font-family: \"Hempa Sans\";\r\n font-size: 128px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 145px; \/* 113.281% *\/\r\n letter-spacing: 2.56px;\r\n text-transform: capitalize;\r\n }\r\n .design_process-sect-1 {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n .design-process-heading {\r\n padding-left: 25px;\r\n color: #222;\r\n font-family: \"Hempa Sans\";\r\n font-size: 48px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 28px; \/* 58.333% *\/\r\n letter-spacing: 0.96px;\r\n text-transform: capitalize;\r\n }\r\n .design_process-sect-2 {\r\n width: 337px;\r\n }\r\n .design_process-sect-2 span {\r\n color: #222;\r\n font-family: \"Hempa Sans\";\r\n font-size: 20px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 5vh; \/* 140% *\/\r\n letter-spacing: 0.4px;\r\n }\r\n .design_process {\r\n display: flex;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n }\r\n \r\n \r\n .sect-5-left-asset {\r\n position: absolute;\r\n left: -9%;\r\n top: -1%;\r\n width: 350px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-5-right-asset {\r\n position: absolute;\r\n right: 12%;\r\n top: 2%;\r\n width: 350px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-5-left-arrow {\r\n position: absolute;\r\n top: 540px;\r\n left: 38%;\r\n width: 57px;\r\n }\r\n .sect-5-right-arrow {\r\n position: absolute;\r\n top: 540px;\r\n right: 38%;\r\n width: 57px;\r\n }\r\n .sect-5-underline {\r\n position: absolute;\r\n top: 22vw;\r\n right: 19%;\r\n width: 30vw;\r\n }\r\n \r\n \/* section 6 *\/\r\n \r\n .section-6 {\r\n background-color: #ffe0aa;\r\n width: 100vw;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n padding-bottom: 200px;\r\n position: relative;\r\n }\r\n .content-sect-6 h2 {\r\n margin-top: 25px;\r\n margin-bottom: 25px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 128px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 144px; \/* 112.5% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n width: 1101px;\r\n }\r\n .content-sect-6 p {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 40px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 54px; \/* 135% *\/\r\n width: 970px;\r\n }\r\n .wildleaf {\r\n width: 80vw;\r\n padding: 100px 0 0 0;\r\n }\r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 80px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 84px; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n }\r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n width: 50vw;\r\n line-height: 51px;\r\n }\r\n .sect-6-left-asset {\r\n position: absolute;\r\n top: 105px;\r\n left: -170px;\r\n width: 600px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-6-right-asset {\r\n position: absolute;\r\n top: 145px;\r\n right: -140px;\r\n width: 400px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n \r\n .sect-6-left-arrow {\r\n position: absolute;\r\n top: 670px;\r\n left: 570px;\r\n width: 57px;\r\n }\r\n .sect-6-right-arrow {\r\n position: absolute;\r\n top: 670px;\r\n right: 570px;\r\n width: 57px;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 190px;\r\n top: 70px;\r\n left: 44%;\r\n }\r\n .portfolio-tags{\r\n width: 20vw;\r\n display: grid;\r\n grid-template-columns: repeat(3, auto);\r\n grid-gap: 10px; \r\n margin-bottom: 30px;\r\n }\r\n .portfolio-tags div{ \r\n overflow: hidden;\r\n padding: 10px;\r\n white-space: nowrap;\r\n border-radius: 5px;\r\n border: 2px solid black;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .portfolio-tags div h5{\r\n margin: 0;\r\n text-align: center;\r\n transition: all 0.3s ease-in-out;\r\n font-weight: 400;\r\n font-size: 15px;\r\n }\r\n \/* mobile - tab \/\/ section 6 *\/\r\n .carousel-container {\r\n margin-top: 100px;\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \r\n padding-left: 200px;\r\n \r\n > button {\r\n all: unset;\r\n }\r\n }\r\n \r\n .carousel-heading-container {\r\n height: auto;\r\n overflow: hidden;\r\n }\r\n \r\n .carousel-heading {\r\n transition: all 0.3s ease-in-out;\r\n }\r\n \r\n .mobile-carousel {\r\n cursor: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/curse2.svg\"),\r\n auto;\r\n background-color: #000;\r\n border: 3px solid black;\r\n border-radius: 50px;\r\n filter: drop-shadow(0.5vw 0.5vw black);\r\n width: 350px;\r\n height: auto;\r\n overflow: hidden;\r\n \r\n > img {\r\n transition: all 0.3s ease-in-out;\r\n width: 100%;\r\n }\r\n }\r\n .tablet-carousel {\r\n cursor: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/curse2.svg\"),\r\n auto;\r\n background-color: #000;\r\n border: 3px solid black;\r\n border-radius: 60px 0 0 60px;\r\n filter: drop-shadow(0.5vw 0.5vw black);\r\n width: 800px;\r\n height: auto;\r\n overflow: hidden;\r\n left: 200px;\r\n \r\n > img {\r\n transition: all 0.3s ease-in-out;\r\n width: 100%;\r\n }\r\n }\r\n \r\n \/* Section 7 *\/\r\n \r\n .section-7 {\r\n padding: 0;\r\n margin: 0;\r\n border: none;\r\n color: aliceblue;\r\n display: flex;\r\n align-items: center;\r\n min-height: 100vh;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n .bg {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n background-color: #ff9e44;\r\n min-height: 100vh;\r\n z-index: 0;\r\n }\r\n \r\n .wrapper {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n background-color: #ff9e44;\r\n position: absolute;\r\n }\r\n \r\n .quote-row {\r\n margin: auto;\r\n width: 100%;\r\n max-width: 1440px;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n justify-content: center;\r\n }\r\n .quote-column {\r\n z-index: 51;\r\n position: absolute;\r\n padding: 0 !important;\r\n overflow: hidden;\r\n transition-property: top, left, right, bottom;\r\n background: transparent;\r\n box-shadow: none;\r\n margin-top: 150px;\r\n \/* transition: .4s; *\/\r\n }\r\n .col-active {\r\n width: 33.33% !important;\r\n transform: translate(-50%, -50%) !important;\r\n top: 50% !important;\r\n left: 50% !important;\r\n bottom: unset !important;\r\n background: rgba(255, 255, 255, 0.375);\r\n box-shadow: 5px 5px 0px #000;\r\n border-radius: 1.3rem;\r\n border: 1px solid rgba(255, 255, 255, 0.37);\r\n overflow: hidden;\r\n z-index: 1;\r\n }\r\n \r\n .col-inner {\r\n position: relative;\r\n width: 100%;\r\n max-width: 130px;\r\n align-items: stretch;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n .col-active .col-inner {\r\n max-width: 100%;\r\n }\r\n \r\n .author-meta {\r\n width: 100%;\r\n position: relative;\r\n border: none;\r\n }\r\n .col-active .author-meta {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n border-bottom: 1px solid #ff9e44;\r\n }\r\n \r\n .image-cover {\r\n position: absolute;\r\n width: 100%;\r\n float: left;\r\n aspect-ratio: 1\/1;\r\n overflow: hidden;\r\n border-radius: 100%;\r\n z-index: 1;\r\n position: relative;\r\n cursor: pointer;\r\n border-right: 5px solid #000;\r\n border-bottom: 5px solid #000;\r\n }\r\n \r\n .col-active .image-cover {\r\n position: relative;\r\n width: 30%;\r\n max-width: 140px;\r\n float: left;\r\n aspect-ratio: 1\/1;\r\n overflow: hidden;\r\n border-radius: 1.3rem 0rem 1.3rem 0rem;\r\n z-index: 1;\r\n }\r\n \r\n .author-info {\r\n width: 70%;\r\n float: left;\r\n padding: 10px;\r\n overflow: hidden;\r\n visibility: hidden;\r\n }\r\n .col-active .author-info {\r\n visibility: visible;\r\n }\r\n \r\n .author-info .author-name,\r\n .author-info .person-title {\r\n transform: translate(-100%, 0%);\r\n transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n }\r\n \r\n .show .author-info .author-name {\r\n transform: translate(0%, 0%);\r\n }\r\n .show .author-info .person-title {\r\n transform: translate(0%, 0%);\r\n transition-delay: 0.2s;\r\n }\r\n \r\n .person-name {\r\n font-family: \"Syne\", sans-serif;\r\n font-size: 21.7px;\r\n color: #000;\r\n margin: 0;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .person-title {\r\n font-family: \"Inter\", sans-serif;\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: #000;\r\n margin: 0;\r\n }\r\n \r\n .quote-wrapper {\r\n position: relative;\r\n width: 100%;\r\n margin: auto;\r\n color: #ff9e44;\r\n padding: 20px 15px;\r\n text-align: center;\r\n overflow: hidden;\r\n visibility: hidden;\r\n z-index: 0;\r\n }\r\n .col-active .quote-wrapper {\r\n visibility: visible;\r\n }\r\n \r\n .box-image-inner img {\r\n object-fit: cover;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n \r\n .box-text-inner {\r\n width: 400px;\r\n margin: auto;\r\n color: #000;\r\n }\r\n \r\n .quote-wrapper .quote-symbol {\r\n font-size: 14vw;\r\n line-height: 1em;\r\n position: absolute;\r\n top: 0;\r\n width: 50%;\r\n height: 100%;\r\n overflow: hidden;\r\n background-color: #222;\r\n z-index: 1;\r\n transition: 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);\r\n }\r\n \r\n .quote-wrapper .quote-symbol:first-child {\r\n left: 0%;\r\n text-align: right;\r\n }\r\n \r\n .quote-wrapper .quote-symbol:last-child {\r\n right: 0%;\r\n text-align: left;\r\n }\r\n \r\n .show .quote-wrapper .quote-symbol:first-child {\r\n left: -50%;\r\n }\r\n \r\n .show .quote-wrapper .quote-symbol:last-child {\r\n right: -50%;\r\n }\r\n \r\n \/*--Arrow--*\/\r\n .arrows-wrap {\r\n position: unset;\r\n }\r\n \r\n .arrow {\r\n position: absolute;\r\n width: 30px;\r\n height: 30px;\r\n top: 80%;\r\n background-color: #494949;\r\n cursor: pointer;\r\n }\r\n \r\n .left-arrow {\r\n float: left;\r\n left: 30px;\r\n clip-path: polygon(\r\n 40% 0%,\r\n 40% 20%,\r\n 100% 33%,\r\n 100% 67%,\r\n 40% 80%,\r\n 40% 100%,\r\n 0% 50%\r\n );\r\n }\r\n \r\n .right-arrow {\r\n float: right;\r\n right: 30px;\r\n clip-path: polygon(\r\n 0 33%,\r\n 60% 20%,\r\n 60% 0%,\r\n 100% 50%,\r\n 60% 100%,\r\n 60% 80%,\r\n 0 67%\r\n );\r\n }\r\n \r\n @media (min-width: 640px) {\r\n .col-active {\r\n width: 75% !important;\r\n height: unset !important;\r\n transform: translate(-50%, -50%) !important;\r\n top: 50% !important;\r\n left: 50% !important;\r\n }\r\n }\r\n \r\n @media (min-width: 840px) {\r\n .col-active {\r\n width: 50% !important;\r\n }\r\n }\r\n \r\n @media (min-width: 1080px) {\r\n .col-active {\r\n width: 33.33% !important;\r\n }\r\n }\r\n \r\n @media (max-width: 640px) {\r\n .quote-column {\r\n width: 90% !important;\r\n top: 50%;\r\n position: absolute;\r\n opacity: 0;\r\n transform: translate(-50%, -50%) !important;\r\n left: 50%;\r\n height: auto !important;\r\n z-index: 51;\r\n transition: 0.5s all;\r\n }\r\n \r\n .col-active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n \r\n .col-inner {\r\n max-width: 100%;\r\n }\r\n .author-meta {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.432);\r\n }\r\n .image-cover {\r\n position: relative;\r\n width: 30%;\r\n max-width: 140px;\r\n float: left;\r\n aspect-ratio: 1\/1;\r\n overflow: hidden;\r\n border-radius: 1.3rem 0rem 1.3rem 0rem;\r\n z-index: 1;\r\n }\r\n .quote-wrapper {\r\n visibility: visible;\r\n }\r\n \r\n .quote-wrapper .quote-symbol {\r\n font-size: 34vh;\r\n }\r\n }\r\n .sect-7-left-asset {\r\n position: absolute;\r\n top: 13%;\r\n left: 0;\r\n width: 460px;\r\n z-index: 2;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-7-right-asset {\r\n position: absolute;\r\n top: 0%;\r\n right: 0;\r\n width: 520px;\r\n z-index: 2;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-7-content-parent {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n }\r\n .sect-7-content-parent h3 {\r\n margin-right: -1508px;\r\n font-family: \"Hempa Sans\";\r\n margin-top: -458px;\r\n position: relative;\r\n color: #fff;\r\n font-size: 24px;\r\n font-weight: 600;\r\n }\r\n .hell-heading {\r\n margin-top: -258px;\r\n margin-left: 510px;\r\n position: relative;\r\n font-weight: 400;\r\n font-family: \"Hempa Sans\";\r\n width: 500px;\r\n text-align: center;\r\n color: #fff;\r\n font-size: 48px;\r\n line-height: 54px; \/* 112.5% *\/\r\n letter-spacing: 0.96px;\r\n }\r\n .sect-7-circle {\r\n position: absolute;\r\n top: 120px;\r\n left: 680px;\r\n z-index: 1;\r\n width: 150px;\r\n }\r\n .sect-7-start-circle {\r\n position: absolute;\r\n top: -185px;\r\n left: 38%;\r\n z-index: 1;\r\n width: 476px;\r\n height: 169px;\r\n }\r\n \r\n \/* Section 8 *\/\r\n \r\n .faqsection {\r\n display: flex;\r\n \/* width: 100vw; *\/\r\n height: 100vh;\r\n font-family: \"Hempa Sans\";\r\n font-weight: 800;\r\n }\r\n \r\n .faqsection section {\r\n display: flex;\r\n cursor: pointer;\r\n overflow: hidden;\r\n }\r\n \r\n .faqsection .title {\r\n z-index: 10;\r\n width: 100px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .faqsection .results,\r\n .faqsection .growth {\r\n background-color: #ffc869;\r\n }\r\n \r\n .faqsection .analysis {\r\n background-color: #ff9e44;\r\n }\r\n \r\n .faqsection .title > h2 {\r\n font-size: 40px;\r\n font-weight: normal;\r\n writing-mode: vertical-rl;\r\n padding: 18px;\r\n }\r\n \r\n .faqsection section[data-status=\"open\"] {\r\n cursor: default;\r\n flex: 9;\r\n }\r\n .faqsection .content-sect-8 {\r\n position: relative;\r\n flex: auto;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .faqquestion {\r\n position: absolute;\r\n top: 0;\r\n left: 180px;\r\n width: 120px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .faqsection .contentcontainer {\r\n text-align: center;\r\n width: 80%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n \r\n > p {\r\n text-align: left;\r\n }\r\n }\r\n .contentcontainer h3 {\r\n margin-bottom: 15px;\r\n position: relative;\r\n \r\n > img {\r\n position: absolute;\r\n top: -5px;\r\n left: 100px;\r\n width: 100px;\r\n }\r\n }\r\n .contentcontainer h2 {\r\n position: relative;\r\n font-size: 40px;\r\n font-weight: 700;\r\n font-family: \"Hempa Sans\";\r\n \r\n > img {\r\n width: 310px;\r\n top: 35px;\r\n left: 0px;\r\n position: absolute;\r\n }\r\n }\r\n \r\n .faqsection section[data-status=\"close\"] > .content-sect-8 {\r\n overflow: hidden;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n padding: 0;\r\n margin: 0;\r\n gap: 0;\r\n font-size: 0;\r\n }\r\n .orange-faq {\r\n color: #ff9e44;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n }\r\n .content-sect-8-para {\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 400;\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n line-height: normal;\r\n }\r\n \r\n .horizontal-div {\r\n border-top: 3px dashed #000;\r\n padding: 25px;\r\n \/* width: 100%; *\/\r\n width: 65vw;\r\n }\r\n .horizontal-div h4 {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: normal;\r\n width: 65vw;\r\n \r\n }\r\n .horizontal-div p {\r\n font-size: 24px;\r\n font-weight: 400;\r\n width: 65vw;\r\n \r\n }\r\n .btn-horizontal {\r\n border-radius: 30px;\r\n background: #ffc869;\r\n box-shadow: 6px 5px 0px 0px #000, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\r\n width: 260px;\r\n height: 53px;\r\n flex-shrink: 0;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n margin-top: 4vw;\r\n \/* margin-left: -32.5vw; *\/\r\n }\r\n .faq-div {\r\n padding: 25px;\r\n width: 100%;\r\n }\r\n\r\n .faq-quest{\r\n font-weight: 800;\r\n \r\n\r\n }\r\n \r\n \r\n \/* @keyframes designprocess {\r\n to {\r\n transform: translateX(0);\r\n }\r\n } *\/\r\n \r\n \r\n \/* Responsive *\/\r\n \r\n @media screen and (min-device-width: 250px)and (max-device-width: 767px){\r\n \r\n .individualchar h2{\r\n font-size: 20vw;\r\n \r\n }\r\n .anything {\r\n padding-left: 0px;\r\n }\r\n .windmill{\r\n width: 70px;\r\n }\r\n .wheel {\r\n top: 34%;\r\n min-width: 10vw !important;\r\n }\r\n .bolt{\r\n min-width: 20vw !important;\r\n top: 5%;\r\n left: 5%;\r\n }\r\n \r\n \/* Section 2 *\/\r\n \r\n \r\n .content-section-2 {\r\n padding-right: 5vw;\r\n height: 100vh;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group%201000002715%20(2).png');\r\n background-size: contain;\r\n }\r\n .content-sect-2 {\r\n width: 90vw;\r\n }\r\n .content-sect-2 h2{\r\n font-size: 8.3vw !important;\r\n line-height: 150%;\r\n width: 90%;\r\n margin-left: 5.5%;\r\n }\r\n .sect-2-para-1{\r\n font-size: 4vw !important;\r\n margin-top: 5vh;\r\n width: 90vw;\r\n }\r\n .sect-2-para-2{\r\n margin-top: 3vh;\r\n font-size: 4vw !important;\r\n line-height: normal !important;\r\n \r\n }\r\n .btn-sect-2{\r\n line-height: 3vh;\r\n padding: 2% 4%;\r\n font-size: 4vw;\r\n background-color: #ff9e44;\r\n color: #000;\r\n }\r\n \r\n .sect-2-curly-underline{\r\n width: 24vw;\r\n margin-top: -4%;\r\n margin-left: -2%;\r\n }\r\n .sect-2-underline{\r\n width: 71vw;\r\n margin-top: 21%;\r\n margin-left: -35%;\r\n }\r\n .sect-2-orange-arrow{\r\n margin-top: 25%;\r\n width: 7vw;\r\n margin-left: 23%;\r\n }\r\n .overlay-img-sect-2-1{\r\n width: 20vw;\r\n }\r\n .overlay-img-sect-2-2{\r\n width: 25vw;\r\n top: 85%;\r\n \r\n }\r\n .sect-2-arrow {\r\n margin-top: -10%;\r\n width: 28vw;\r\n margin-left: -18%;\r\n rotate: 45deg;\r\n }\r\n \r\n \/* Section 3 *\/\r\n \r\n .section-3 {\r\n width: 100vw;\r\n height: 60vh; \r\n \/* padding-bottom: 30vh; *\/\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: -1vh;\r\n left: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: -1vh;\r\n right: -9vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .content-section-3 {\r\n width: 80vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 h3{\r\n padding-top: 5vh;\r\n width: 50vw;\r\n font-size: 4vw;\r\n height: 5vh;\r\n }\r\n .content-sect-3 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 6vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1{\r\n font-size: 8vw;\r\n line-height: normal;\r\n margin-bottom: 20px;\r\n \r\n }\r\n .content-sect-3 p{\r\n font-size: 4vw;\r\n margin-bottom: 15%;\r\n width: 80vw;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-3{\r\n font-size: 4vw;\r\n padding: 2% 7%;\r\n }\r\n .sect-3-left{\r\n width: 21vw;\r\n top: 22%;\r\n left: -6%;\r\n }\r\n .sect-3-right{\r\n width: 23vw;\r\n right: 0%;\r\n \r\n }\r\n \r\n \r\n \/* Section 4 *\/\r\n .stack-area{\r\n height: 300vh;\r\n contain: paint;\r\n \r\n }\r\n .individual-card {\r\n width: 270px;\r\n height: 340px;\r\n object-fit: cover;\r\n }\r\n \r\n .content {\r\n font-size: 2.58vw;\r\n font-weight: 500;\r\n line-height: normal;\r\n margin-left: -4vw;\r\n letter-spacing: 0.2px;\r\n flex-wrap: wrap;\r\n margin-top:-5vh;\r\n }\r\n .vid-sect{\r\n margin-top: -4vh;\r\n }\r\n .spacer {\r\n margin-top: 0px;\r\n padding-top: 30px;\r\n padding-bottom: 0px;\r\n }\r\n \r\n \/* .section-4{\r\n padding-top: 55vh;\r\n } *\/\r\n \r\n \/* Section 5 *\/\r\n \r\n .content-sect-4 h3 {\r\n width: 50vw;\r\n font-size: 4vw;\r\n \r\n }\r\n .content-sect-4 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 2vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .designanimation-sect-5{\r\n font-size: 8vw;\r\n width: 90vw;\r\n \r\n line-height: normal; \r\n }\r\n .spacer p{\r\n font-size: 4vw;\r\n margin-bottom: 6%;\r\n margin-top: 5%;\r\n width: 80vw;\r\n line-height: normal;\r\n }\r\n \r\n .sect-5-circle{\r\n width: 90px;\r\n right: 38%;\r\n top: 1.5%;\r\n visibility: hidden;\r\n }\r\n .sect-5-left-asset{\r\n width: 20vw;\r\n top: 0;\r\n }\r\n .sect-5-right-asset{\r\n width: 30vw;\r\n right: 0;\r\n top: 0;\r\n \r\n }\r\n .sect-5-underline{\r\n top: 9.6%;\r\n right: 20vw;\r\n width: 200px;\r\n }\r\n .serial-num-black,\r\n .serial-num-orange {\r\n font-size: 6vw;\r\n \r\n \r\n }\r\n .design_process{\r\n width: 99vw;\r\n height: 15vh;\r\n }\r\n .design-process-heading{\r\n font-size: 4vw;\r\n \r\n }\r\n .design_process-sect-2{\r\n width: 40vw;\r\n \r\n }\r\n .design_process-sect-2 span{\r\n font-size: 2vw;\r\n line-height: normal;\r\n \r\n }\r\n .design_process {\r\n transform: translateX(45vw);\r\n }\r\n .designsection{\r\n overflow-x: hidden;\r\n padding-top:0px;\r\n gap: 20px;\r\n }\r\n .design_process:after{\r\n border-top: 2px solid transparent;\r\n border-right: 2px solid transparent;\r\n }\r\n .design_process::before{\r\n border-bottom: 2px solid transparent;\r\n border-left: 2px solid transparent;\r\n }\r\n \r\n \r\n \/* Section 6 *\/\r\n \r\n .section-6{\r\n padding-bottom: 10vh;\r\n }\r\n \r\n .content-sect-6 h2{\r\n font-size: 8vw;\r\n font-weight: 700;\r\n width: 90vw;\r\n line-height: normal;\r\n z-index: 2; \r\n margin:0px;\r\n }\r\n .content-sect-6 p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n width: 90vw;\r\n line-height: normal;\r\n }\r\n .sect-6-left-asset{\r\n left: -10%;\r\n top: 11%;\r\n width: 33vw;\r\n }\r\n .sect-6-right-asset{\r\n width: 20vw;\r\n right: 0%;\r\n top: 0;\r\n \r\n }\r\n .sect-6-left-arrow{\r\n top: 820px;\r\n left: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-right-arrow{\r\n top: 820px;\r\n right: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 100px;\r\n top: 3.57%;\r\n left: 37%;\r\n }\r\n \r\n \/* Company names *\/\r\n \r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 11vw;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 104px; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n }\r\n .portfolio-tags{\r\n width: 80vw;\r\n }\r\n .wildleaf{\r\n padding: 0px 0 0 0\r\n }\r\n \r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n width: 85vw;\r\n font-size: 4vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: normal;\r\n text-align: start;\r\n }\r\n .carousel-container{\r\n padding-left: 0%;\r\n margin-top: 25px;\r\n \r\n flex-direction: column;\r\n \r\n }\r\n .mobile-carousel{\r\n width: 350px;\r\n }\r\n .tablet-carousel{\r\n width: 97.5%;\r\n margin-left: 2%;\r\n margin-top: 10%;\r\n right: 0;\r\n \r\n }\r\n \r\n \/* .section-7 *\/\r\n \r\n .quote-column{\r\n margin-top: 100px;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n \r\n .sect-7-content-parent h3{\r\n \/* margin-right: -50vw; *\/\r\n margin-right: -100vw;\r\n font-family: \"Hempa Sans\";\r\n \/* margin-top: -48px; *\/\r\n z-index: 25;\r\n margin-top: -300px;\r\n position: absolute;\r\n color: #fff;\r\n font-size: 4vw;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n \r\n }\r\n .hell-heading{\r\n display: none;\r\n }\r\n .sect-7-start-circle{\r\n display: none;\r\n }\r\n \r\n \/* Section 8 *\/\r\n .faqquestion {\r\n width: 100px;\r\n left: 50px;\r\n }\r\n .contentcontainer {\r\n text-align: center;\r\n padding: 50px 0 100px 0;\r\n > p {\r\n margin-block: 25px;\r\n }\r\n }\r\n hr {\r\n margin: 20px 0;\r\n }\r\n \r\n .faqbackdrop1 {\r\n width: 200px;\r\n bottom: -50px;\r\n left: 0px;\r\n }\r\n .faqbackdrop2 {\r\n width: 150px;\r\n bottom: -50px;\r\n right: 0px;\r\n }\r\n .contentcontainer h3 {\r\n margin-top: 25px;\r\n > img{\r\n left: 85px;\r\n }\r\n }\r\n .contentcontainer h2 {\r\n font-size: 32.5px;\r\n }\r\n .horizontal-div{\r\n width: 95vw;\r\n \r\n }\r\n .horizontal-div h4{\r\n font-size: 25px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n \r\n .horizontal-div p {\r\n font-size: 24px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n .content-sect-8-para{\r\n font-size: 20px;\r\n }\r\n .para-2-faq{\r\n visibility: collapse;\r\n display: none;\r\n }\r\n .primary-heading h3 {\r\n font-size: 12px;\r\n font-weight: 300;\r\n margin-bottom: 20px;\r\n }\r\n .secondary-heading h2 {\r\n font-size: 24px;\r\n font-weight: 300;\r\n }\r\n .content-heading {\r\n width: 600px;\r\n }\r\n .content-heading h2 {\r\n font-size: 8px;\r\n }\r\n .section4-rightdivs {\r\n width: 350px;\r\n }\r\n .faqsection {\r\n flex-direction: column;\r\n height: max-content;\r\n text-align: center;\r\n }\r\n .faqsection .title {\r\n height: 8svh;\r\n width: 100vw;\r\n align-items: center;\r\n }\r\n .faqsection section {\r\n flex-direction: column;\r\n }\r\n .faqsection .title > h2 {\r\n writing-mode: horizontal-tb;\r\n padding: 0 30px;\r\n margin: 15px 0;\r\n font-size: 7vw;\r\n }\r\n .lastcontain{\r\npadding:0px;\r\n }\r\n \r\n }\r\n @media screen and (min-device-width: 768px)and (max-device-width: 1024px){\r\n \r\n .individualchar h2{\r\n font-size: 20vw;\r\n \r\n }\r\n .anything {\r\n padding-left: 0px;\r\n }\r\n .windmill{\r\n min-width: 120px;\r\n }\r\n .wheel {\r\n top: 34%;\r\n width: 20vw;\r\n }\r\n .bolt{\r\n min-width: 25vw;\r\n top: -5%;\r\n left: -20%;\r\n }\r\n \r\n \/* Section 2 *\/\r\n \r\n \r\n .content-section-2 {\r\n padding-right: 5vw;\r\n height: 100vh;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group%201000003081.png');\r\n background-size: contain;\r\n }\r\n .content-sect-2 {\r\n width: 90vw;\r\n }\r\n .content-sect-2 h2{\r\n font-size: 4.7vw !important;\r\n line-height: 195%;\r\n width: 90%;\r\n margin-left: 5.5%;\r\n }\r\n .sect-2-para-1{\r\n font-size: 4vw !important;\r\n margin-top: 5vh;\r\n width: 95vw;\r\n }\r\n .sect-2-para-2{\r\n margin-top: 3vh;\r\n font-size: 4vw !important;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-2{\r\n line-height: 3vh;\r\n padding: 2% 4%;\r\n font-size: 4vw;\r\n \r\n }\r\n \r\n .sect-2-curly-underline{\r\n width: 14vw;\r\n margin-top: -3%;\r\n margin-left: -1%;\r\n }\r\n .sect-2-underline{\r\n width: 50vw;\r\n margin-top: 7%;\r\n margin-left: -10%;\r\n }\r\n .sect-2-orange-arrow{\r\n margin-top: 10.5%;\r\n width: 6vw;\r\n margin-left: 18%;\r\n }\r\n .overlay-img-sect-2-1{\r\n width: 20vw;\r\n }\r\n .overlay-img-sect-2-2{\r\n width: 25vw;\r\n top: 85%;\r\n \r\n }\r\n .sect-2-arrow {\r\n margin-top: -10%;\r\n width: 28vw;\r\n margin-left: -20%;\r\n rotate: 45deg;\r\n }\r\n \r\n \/* Section 3 *\/\r\n \r\n .section-3 {\r\n width: 100vw;\r\n height: 80vh; \r\n \/* padding-bottom: 30vh; *\/\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0;\r\n left: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0;\r\n right: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .content-section-3 {\r\n width: 80vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 h3{\r\n padding-top: 5vh;\r\n width: 50vw;\r\n font-size: 4vw;\r\n height: 8vh;\r\n }\r\n .content-sect-3 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 6vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1{\r\n font-size: 8vw;\r\n line-height: normal; \r\n margin-bottom: 20px;\r\n \r\n }\r\n .content-sect-3 p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n width: 80vw;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-3{\r\n font-size: 4vw;\r\n padding: 2% 7%;\r\n }\r\n .sect-3-left{\r\n width: 25vw;\r\n top: 62%;\r\n }\r\n .sect-3-right{\r\n width: 25vw;\r\n right: 0%;\r\n \r\n }\r\n \r\n \/* Section 4 *\/\r\n .stack-area{\r\n height: 300vh;\r\n contain: paint;\r\n \r\n }\r\n .individual-card {\r\n width: 500px;\r\n height: 600px;\r\n object-fit: contain;\r\n }\r\n \r\n .content {\r\n font-size: 2.25vw;\r\n font-weight: 500;\r\n line-height: 3vh;\r\n margin-left: 0;\r\n letter-spacing: 0.2px;\r\n flex-wrap: wrap;\r\n \/*margin-top: -vh;*\/\r\n }\r\n \/* Section 5 *\/\r\n \r\n .content-sect-4 h3 {\r\n width: 50vw;\r\n font-size: 4vw;\r\n \r\n }\r\n .content-sect-4 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 2vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .designanimation-sect-5{\r\n font-size: 8vw;\r\n width: 90vw;\r\n \r\n line-height: normal; \r\n }\r\n .spacer p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n margin-top: 5%;\r\n width: 80vw;\r\n line-height: normal;\r\n }\r\n \r\n .sect-5-circle{\r\n width: 90px;\r\n right: 38%;\r\n top: 1.5%;\r\n visibility: hidden;\r\n }\r\n .sect-5-left-asset{\r\n width: 20vw;\r\n }\r\n .sect-5-right-asset{\r\n width: 30vw;\r\n right: 0;\r\n top: 0;\r\n \r\n }\r\n .sect-5-underline{\r\n top: 10%;\r\n right: 20vw;\r\n width: 200px;\r\n }\r\n .serial-num-black,\r\n .serial-num-orange {\r\n font-size: 6vw;\r\n \r\n \r\n }\r\n .design_process{\r\n width: 99vw;\r\n height: 25vh;\r\n }\r\n .design-process-heading{\r\n font-size: 4vw;\r\n \r\n }\r\n .design_process-sect-2{\r\n width: 40vw;\r\n \r\n }\r\n .design_process-sect-2 span{\r\n font-size: 2vw;\r\n line-height: normal;\r\n \r\n }\r\n .design_process {\r\n transform: translateX(45vw);\r\n }\r\n .designsection{\r\n overflow-x: hidden;\r\n padding-top: 0px;\r\n }\r\n .design_process:after{\r\n border-top: 2px solid transparent;\r\n border-right: 2px solid transparent;\r\n }\r\n .design_process::before{\r\n border-bottom: 2px solid transparent;\r\n border-left: 2px solid transparent;\r\n }\r\n \r\n \r\n \r\n \/* Section 6 *\/\r\n \r\n .content-sect-6 h2{\r\n font-size: 8vw;\r\n font-weight: 700;\r\n width: 70vw;\r\n line-height: normal;\r\n z-index: 2; \r\n margin:0;\r\n }\r\n .content-sect-6 p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n width: 90vw;\r\n line-height: normal;\r\n }\r\n .sect-6-left-asset{\r\n left: -10%;\r\n top: 10%;\r\n \r\n width: 40vw;\r\n }\r\n .sect-6-right-asset{\r\n width: 20vw;\r\n right: 0%;\r\n top: 0;\r\n \r\n }\r\n .sect-6-left-arrow{\r\n top: 820px;\r\n left: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-right-arrow{\r\n top: 820px;\r\n right: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 100px;\r\n top: 3.57%;\r\n left: 37%;\r\n }\r\n \r\n \/* Company names *\/\r\n \r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 11vw;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 104px; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n }\r\n .wildleaf {\r\n width: 80vw;\r\n padding: 50px 0 0 0;\r\n}\r\n .portfolio-tags{\r\n width: 80vw;\r\n }\r\n \r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n width: 85vw;\r\n font-size: 4vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 51px;\r\n text-align: start;\r\n }\r\n .carousel-container{\r\n padding-left: 0%;\r\n margin-top: 50px;\r\n \r\n flex-direction: column;\r\n \r\n }\r\n .mobile-carousel{\r\n width: 350px;\r\n }\r\n .tablet-carousel{\r\n width: 97.5%;\r\n margin-left: 2%;\r\n margin-top: 10%;\r\n \r\n }\r\n \r\n \/* .section-7 *\/\r\n \r\n .quote-column{\r\n margin-top: 100px;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n \r\n .sect-7-content-parent h3{\r\n \/* margin-right: -50vw; *\/\r\n margin-right: -100vw;\r\n font-family: \"Hempa Sans\";\r\n \/* margin-top: -48px; *\/\r\n z-index: 25;\r\n margin-top: -300px;\r\n position: absolute;\r\n color: #fff;\r\n font-size: 4vw;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n \r\n }\r\n .hell-heading{\r\n display: none;\r\n }\r\n .sect-7-start-circle{\r\n display: none;\r\n }\r\n \r\n \/* Section 8 *\/\r\n .faqquestion {\r\n width: 100px;\r\n left: 50px;\r\n }\r\n .contentcontainer {\r\n text-align: center;\r\n padding: 50px 0 100px 0;\r\n > p {\r\n margin-block: 25px;\r\n }\r\n }\r\n hr {\r\n margin: 20px 0;\r\n }\r\n \r\n .faqbackdrop1 {\r\n width: 200px;\r\n bottom: -50px;\r\n left: 0px;\r\n }\r\n .faqbackdrop2 {\r\n width: 150px;\r\n bottom: -50px;\r\n right: 0px;\r\n }\r\n .contentcontainer h3 {\r\n margin-top: 25px;\r\n }\r\n .contentcontainer h2 {\r\n font-size: 39px;\r\n }\r\n .horizontal-div{\r\n width: 95vw;\r\n \r\n }\r\n .horizontal-div h4{\r\n font-size: 25px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n \r\n .horizontal-div p {\r\n font-size: 24px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n .content-sect-8-para{\r\n font-size: 20px;\r\n }\r\n .para-2-faq{\r\n visibility: collapse;\r\n display: none;\r\n }\r\n .primary-heading h3 {\r\n font-size: 12px;\r\n font-weight: 300;\r\n margin-bottom: 20px;\r\n }\r\n .secondary-heading h2 {\r\n font-size: 24px;\r\n font-weight: 300;\r\n }\r\n .content-heading {\r\n width: 600px;\r\n }\r\n .content-heading h2 {\r\n font-size: 8px;\r\n }\r\n .section4-rightdivs {\r\n width: 350px;\r\n }\r\n .faqsection {\r\n flex-direction: column;\r\n height: max-content;\r\n text-align: center;\r\n }\r\n .faqsection .title {\r\n height: 8svh;\r\n width: 100vw;\r\n align-items: center;\r\n }\r\n .faqsection section {\r\n flex-direction: column;\r\n }\r\n .faqsection .title > h2 {\r\n writing-mode: horizontal-tb;\r\n padding: 0 30px;\r\n margin: 15px 0;\r\n }\r\n \r\n }\r\n @media screen and (min-device-width: 1024px)and (max-device-width: 1300px){\r\n \r\n .individualchar h2{\r\n font-size: 15vw;\r\n \r\n }\r\n .windmill{\r\n width: 70px;\r\n }\r\n .wheel {\r\n top: 34%;\r\n width: 20vw;\r\n }\r\n .bolt{\r\n width: 25vw;\r\n top: 2px;\r\n left: 42%;\r\n }\r\n \r\n \/* Section 2 *\/\r\n \r\n \r\n .content-section-2 {\r\n padding-right: 5vw;\r\n height: 100vh;\r\n background-size: cover;\r\n }\r\n .content-sect-2 {\r\n width: 90vw;\r\n }\r\n .content-sect-2 h2{\r\n font-size: 6vw !important;\r\n line-height: 125%;\r\n width: 95vw;\r\n margin-right: 10;\r\n }\r\n .sect-2-para-1{\r\n font-size: 3vw;\r\n margin-top: 5vh;\r\n width: 95vw;\r\n }\r\n .sect-2-para-2{\r\n margin-top: 2.5vh;\r\n font-size: 2.5vw;\r\n \r\n }\r\n .btn-sect-2{\r\n line-height: 3vh;\r\n padding: 2% 4%;\r\n font-size: 3vw;\r\n \r\n }\r\n .btn-sect-2:hover{\r\n background-color: #ff9e44;\r\n }\r\n \r\n .sect-2-curly-underline{\r\n width: 16vw;\r\n margin-top: -1%;\r\n margin-left: 1%;\r\n }\r\n .sect-2-underline{\r\n width: 50vw;\r\n margin-top: 6%;\r\n margin-left: -1%;\r\n \r\n }\r\n .sect-2-orange-arrow{\r\n margin-top: 13%;\r\n width: 10vw;\r\n display: none;\r\n margin-left: 22%;\r\n }\r\n .overlay-img-sect-2-1{\r\n width: 20vw;\r\n }\r\n .overlay-img-sect-2-2{\r\n width: 25vw;\r\n top: 85%;\r\n \r\n }\r\n .sect-2-arrow {\r\n margin-top: -10%;\r\n width: 28vw;\r\n margin-left: -20%;\r\n display: none;\r\n rotate: 45deg;\r\n }\r\n \r\n \/* Section 3 *\/\r\n \r\n .section-3 {\r\n width: 100vw;\r\n height: max-content; \r\n \/* padding-bottom: 30vh; *\/\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 1vh;\r\n left: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 1vh;\r\n right: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .content-section-3 {\r\n width: 80vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 h3{\r\n padding-top: 5vh;\r\n width: 50vw;\r\n font-size: 2vw;\r\n height: 10vh;\r\n }\r\n .content-sect-3 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 3vw;\r\n left: 17.5vw;\r\n width: 30%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1{\r\n font-size: 6vw;\r\n line-height: normal; \r\n \r\n }\r\n .content-sect-3 p{\r\n font-size: 3vw;\r\n margin-bottom: 15%;\r\n width: 80vw;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-3{\r\n font-size: 3vw;\r\n padding: 2% 7%;\r\n }\r\n .sect-3-left{\r\n width: 15vw;\r\n top: 22%;\r\n }\r\n .sect-3-right{\r\n width: 15vw;\r\n right: 0%;\r\n \r\n }\r\n \r\n \/* Section 4 *\/\r\n .stack-area{\r\n height: 300vh;\r\n contain: paint;\r\n \r\n }\r\n .individual-card {\r\n width: 400px;\r\n height: 500px;\r\n object-fit: contain;\r\n }\r\n \r\n .content {\r\n font-size: 1.25vw !important;\r\n font-weight: 500;\r\n line-height: 4vh;\r\n margin-left: -1vw;\r\n letter-spacing: 0.2px;\r\n flex-wrap: wrap;\r\n margin-top: -10vh;\r\n width: 350px;\r\n }\r\n .vid-sect{\r\n margin-top: -4vh;\r\n }\r\n \/* Section 5 *\/\r\n \r\n .content-sect-4 h3 {\r\n width: 50vw;\r\n font-size: 4vw;\r\n \r\n }\r\n .content-sect-4 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 2.7vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .designanimation-sect-5{\r\n font-size: 8vw;\r\n width: 90vw;\r\n \r\n line-height: normal; \r\n }\r\n .spacer p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n margin-top: 5%;\r\n width: 80vw;\r\n line-height: normal;\r\n }\r\n \r\n .sect-5-circle{\r\n width: 90px;\r\n right: 38%;\r\n top: 1.5%;\r\n visibility: hidden;\r\n }\r\n .sect-5-left-asset{\r\n width: 20vw;\r\n }\r\n .sect-5-right-asset{\r\n width: 30vw;\r\n right: 0;\r\n top: 0;\r\n \r\n }\r\n .sect-5-underline{\r\n top: 10%;\r\n right: 20vw;\r\n width: 200px;\r\n }\r\n .serial-num-black,\r\n .serial-num-orange {\r\n font-size: 6vw;\r\n \r\n \r\n }\r\n .design_process{\r\n width: 99vw;\r\n height: 25vh;\r\n }\r\n .design-process-heading{\r\n font-size: 4vw;\r\n \r\n }\r\n .design_process-sect-2{\r\n width: 40vw;\r\n \r\n }\r\n .design_process-sect-2 span{\r\n font-size: 2vw;\r\n line-height: normal;\r\n \r\n }\r\n .design_process {\r\n transform: translateX(45vw);\r\n }\r\n .designsection{\r\n overflow-x: hidden;\r\n \r\n }\r\n .design_process:after{\r\n border-top: 2px solid transparent;\r\n border-right: 2px solid transparent;\r\n }\r\n .design_process::before{\r\n border-bottom: 2px solid transparent;\r\n border-left: 2px solid transparent;\r\n }\r\n \r\n \r\n \r\n \/* Section 6 *\/\r\n \r\n .content-sect-6 h2{\r\n font-size: 9vw;\r\n font-weight: 700;\r\n width: 90vw;\r\n line-height: normal;\r\n z-index: 2; \r\n }\r\n .content-sect-6 p{\r\n font-size: 5vw;\r\n margin-bottom: 15%;\r\n width: 90vw;\r\n line-height: normal;\r\n }\r\n .sect-6-left-asset{\r\n left: -10%;\r\n top: 20%;\r\n \r\n width: 40vw;\r\n }\r\n .sect-6-right-asset{\r\n width: 30vw;\r\n right: 0%;\r\n \r\n }\r\n .sect-6-left-arrow{\r\n top: 820px;\r\n left: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-right-arrow{\r\n top: 820px;\r\n right: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 100px;\r\n top: 3.57%;\r\n left: 37%;\r\n }\r\n \r\n \/* Company names *\/\r\n \r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 11vw;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: normal; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n margin-bottom: 2%;\r\n }\r\n .portfolio-tags{\r\n width: 80vw;\r\n }\r\n .portfolio-tags div h5{\r\n font-size: 2.5vw;\r\n }\r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n width: 80vw;\r\n font-size: 3vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: normal;\r\n text-align: start;\r\n }\r\n .carousel-container{\r\n padding-left: 0%;\r\n margin-top: 50px;\r\n \r\n flex-direction: column;\r\n \r\n }\r\n .mobile-carousel{\r\n width: 350px;\r\n }\r\n .tablet-carousel{\r\n width: 97.5%;\r\n margin-left: 2%;\r\n margin-top: 10%;\r\n \r\n }\r\n \r\n \/* .section-7 *\/\r\n \r\n .quote-column{\r\n margin-top: 100px;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n \r\n .sect-7-content-parent h3{\r\n \/* margin-right: -50vw; *\/\r\n margin-right: -100vw;\r\n font-family: \"Hempa Sans\";\r\n \/* margin-top: -48px; *\/\r\n z-index: 25;\r\n margin-top: -300px;\r\n position: absolute;\r\n color: #fff;\r\n font-size: 4vw;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n \r\n }\r\n .hell-heading{\r\n display: none;\r\n }\r\n .sect-7-start-circle{\r\n display: none;\r\n }\r\n \r\n \/* Section 8 *\/\r\n .faqquestion {\r\n width: 100px;\r\n left: 50px;\r\n }\r\n .contentcontainer {\r\n text-align: center;\r\n padding: 50px 0 100px 0;\r\n > p {\r\n margin-block: 25px;\r\n }\r\n }\r\n hr {\r\n margin: 20px 0;\r\n }\r\n \r\n .faqbackdrop1 {\r\n width: 200px;\r\n bottom: -50px;\r\n left: 0px;\r\n }\r\n .faqbackdrop2 {\r\n width: 150px;\r\n bottom: -50px;\r\n right: 0px;\r\n }\r\n .contentcontainer h3 {\r\n margin-top: 25px;\r\n }\r\n .contentcontainer h2 {\r\n font-size: 39px;\r\n }\r\n .horizontal-div{\r\n width: 95vw;\r\n \r\n }\r\n .horizontal-div h4{\r\n font-size: 25px;\r\n text-align: start;\r\n width: 65vw;\r\n }\r\n \r\n .horizontal-div p {\r\n font-size: 24px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n .content-sect-8-para{\r\n font-size: 30px;\r\n }\r\n .para-2-faq{\r\n visibility: collapse;\r\n display: none;\r\n }\r\n .primary-heading h3 {\r\n font-size: 12px;\r\n font-weight: 300;\r\n margin-bottom: 20px;\r\n }\r\n .secondary-heading h2 {\r\n font-size: 24px;\r\n font-weight: 300;\r\n }\r\n .content-heading {\r\n width: 600px;\r\n }\r\n .content-heading h2 {\r\n font-size: 8px;\r\n }\r\n .section4-rightdivs {\r\n width: 350px;\r\n }\r\n .faqsection {\r\n flex-direction: column;\r\n height: max-content;\r\n text-align: center;\r\n }\r\n .faqsection .title {\r\n height: 8svh;\r\n width: 100vw;\r\n align-items: center;\r\n }\r\n .faqsection section {\r\n flex-direction: column;\r\n }\r\n .faqsection .title > h2 {\r\n writing-mode: horizontal-tb;\r\n padding: 0 30px;\r\n font-size: 2vw;\r\n margin: 15px 0;\r\n }\r\n \r\n }\r\n <\/style> \r\n \r\n \r\n \r\n <div class=\"individualchar\">\r\n <h2>\r\n <span class=\"A\">D<\/span><span class=\"n\"><img decoding=\"async\" class=\"windmill\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group%201000002565.png\"\/>e<\/span><span class=\"i\">s<\/span\r\n ><span class=\"m\">i<\/span><svg class=\"wheel\" viewBox=\"0 0 157 156\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" aria-hidden=\"true\" style=\"translate: none; rotate: none; scale: none; transform: rotate(360deg);\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M82.2214 104.04L105.483 143.586C108.242 148.276 114.274 149.852 118.974 147.112V147.112C123.675 144.371 125.275 138.345 122.552 133.634L99.5971 93.9091L144.009 105.424C149.276 106.79 154.656 103.639 156.042 98.3773V98.3773C157.428 93.1154 154.298 87.7233 149.042 86.317L104.72 74.4593L144.266 51.1978C148.957 48.439 150.533 42.407 147.792 37.7062V37.7062C145.052 33.0054 139.026 31.4057 134.314 34.1282L94.5898 57.0835L106.105 12.6719C107.471 7.40463 104.32 2.02469 99.058 0.638673V0.638673C93.7961 -0.747342 88.4041 2.38242 86.9977 7.63895L75.14 51.9603L51.8786 12.4142C49.1197 7.72403 43.0878 6.14763 38.387 8.8883V8.8883C33.6862 11.629 32.0865 17.6548 34.809 22.3662L57.7643 62.0908L13.3526 50.5758C8.08539 49.2101 2.70545 52.3607 1.31944 57.6226V57.6226C-0.0665745 62.8845 3.06319 68.2766 8.31971 69.6829L52.6411 81.5406L13.095 104.802C8.4048 107.561 6.8284 113.593 9.56907 118.294V118.294C12.3097 122.994 18.3356 124.594 23.0469 121.872L62.7716 98.9164L51.2566 143.328C49.8909 148.595 53.0414 153.975 58.3034 155.361V155.361C63.5653 156.747 68.9573 153.617 70.3637 148.361L82.2214 104.04Z\" fill=\"white\"><\/path>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M82.2214 104.04L105.483 143.586C108.242 148.276 114.274 149.852 118.974 147.112V147.112C123.675 144.371 125.275 138.345 122.552 133.634L99.5971 93.9091L144.009 105.424C149.276 106.79 154.656 103.639 156.042 98.3773V98.3773C157.428 93.1154 154.298 87.7233 149.042 86.317L104.72 74.4593L144.266 51.1978C148.957 48.439 150.533 42.407 147.792 37.7062V37.7062C145.052 33.0054 139.026 31.4057 134.314 34.1282L94.5898 57.0835L106.105 12.6719C107.471 7.40463 104.32 2.02469 99.058 0.638673V0.638673C93.7961 -0.747342 88.4041 2.38242 86.9977 7.63895L75.14 51.9603L51.8786 12.4142C49.1197 7.72403 43.0878 6.14763 38.387 8.8883V8.8883C33.6862 11.629 32.0865 17.6548 34.809 22.3662L57.7643 62.0908L13.3526 50.5758C8.08539 49.2101 2.70545 52.3607 1.31944 57.6226V57.6226C-0.0665745 62.8845 3.06319 68.2766 8.31971 69.6829L52.6411 81.5406L13.095 104.802C8.4048 107.561 6.8284 113.593 9.56907 118.294V118.294C12.3097 122.994 18.3356 124.594 23.0469 121.872L62.7716 98.9164L51.2566 143.328C49.8909 148.595 53.0414 153.975 58.3034 155.361V155.361C63.5653 156.747 68.9573 153.617 70.3637 148.361L82.2214 104.04Z\" fill=\"url(#paint0_radial_1413_80169)\"><\/path>\r\n <path fill-opacity=\".6\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M82.2214 104.04L105.483 143.586C108.242 148.276 114.274 149.852 118.974 147.112V147.112C123.675 144.371 125.275 138.345 122.552 133.634L99.5971 93.9091L144.009 105.424C149.276 106.79 154.656 103.639 156.042 98.3773V98.3773C157.428 93.1154 154.298 87.7233 149.042 86.317L104.72 74.4593L144.266 51.1978C148.957 48.439 150.533 42.407 147.792 37.7062V37.7062C145.052 33.0054 139.026 31.4057 134.314 34.1282L94.5898 57.0835L106.105 12.6719C107.471 7.40463 104.32 2.02469 99.058 0.638673V0.638673C93.7961 -0.747342 88.4041 2.38242 86.9977 7.63895L75.14 51.9603L51.8786 12.4142C49.1197 7.72403 43.0878 6.14763 38.387 8.8883V8.8883C33.6862 11.629 32.0865 17.6548 34.809 22.3662L57.7643 62.0908L13.3526 50.5758C8.08539 49.2101 2.70545 52.3607 1.31944 57.6226V57.6226C-0.0665745 62.8845 3.06319 68.2766 8.31971 69.6829L52.6411 81.5406L13.095 104.802C8.4048 107.561 6.8284 113.593 9.56907 118.294V118.294C12.3097 122.994 18.3356 124.594 23.0469 121.872L62.7716 98.9164L51.2566 143.328C49.8909 148.595 53.0414 153.975 58.3034 155.361V155.361C63.5653 156.747 68.9573 153.617 70.3637 148.361L82.2214 104.04Z\" fill=\"url(#pattern-home-hero-star-0)\" style=\"mix-blend-mode:multiply\"><\/path>\r\n <defs>\r\n <pattern id=\"pattern-home-hero-star-0\" patternContentUnits=\"objectBoundingBox\" width=\"0.625\" height=\"0.625\">\r\n <use xlink:href=\"#svg-noise\" transform=\"scale(0.00125)\"><\/use>\r\n <\/pattern>\r\n <radialGradient id=\"paint0_radial_1413_80169\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"translate(124.192 87.08) rotate(149.757) scale(126.034)\">\r\n <stop stop-color=\"#FFEBE7\"><\/stop>\r\n <stop offset=\"0.6721\" stop-color=\"#FF9C7C\"><\/stop>\r\n <stop offset=\"0.8164\" stop-color=\"#FF9983\"><\/stop>\r\n <stop offset=\"0.9014\" stop-color=\"#FF774B\"><\/stop>\r\n <stop offset=\"1\" stop-color=\"#E76F00\"><\/stop>\r\n <\/radialGradient>\r\n <\/defs>\r\n <\/svg><span class=\"a2\">g<\/span><span id=\"t\" class=\"t\">n<\/span\r\n > <br \/><\/span\r\n >\r\n <span class=\"anything\">\r\n <span class=\"a3\">a<\/span><span class=\"n2\">n<\/span\r\n ><span class=\"y\"><video class=\"bolt\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/gsap_ani.mp4\" autoplay muted><\/video>y<\/span><span class=\"t2\">t<\/span><span class=\"h\">h<\/span\r\n ><span class=\"i2\">i<\/span><span class=\"n3\">n<\/span\r\n ><span class=\"g\">g<\/span>\r\n <\/span>\r\n \r\n <\/h2>\r\n <div class=\"hero-bg-black\">\r\n <section class=\"section-2\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-as.png\" alt=\"\" class=\"overlay-img-sect-2-1\">\r\n <div class=\"content-section-2\">\r\n <div class=\"content-sect-2\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-underline.png\" alt=\"\" class=\"sect-2-underline\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-orange-arrow.png\" alt=\"\" class=\"sect-2-orange-arrow\">\r\n \r\n <h2>Crafting intuitive digital experiences with Itzfizz<\/h2>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-curly-underline.png\" alt=\"\" class=\"sect-2-curly-underline\">\r\n <p class=\"sect-2-para-1\">\r\n UI\/UX Services Tailored to Your Brand\r\n <\/p>\r\n <p class=\"sect-2-para-2\">\r\n In today's digital landscape, user experience is paramount. Dive into a journey where your brand's essence meets our design expertise\r\n <\/p>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-arrow.png\" alt=\"\" class=\"sect-2-arrow\">\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-2\">Kickstart Your Design Journey<\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-as-2.png\" alt=\"\" class=\"overlay-img-sect-2-2\">\r\n <\/section>\r\n \r\n <\/div>\r\n <\/div> \r\n\r\n \r\n\r\n <section class=\"section-3\">\r\n <div class=\"content-section-3\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-3-left.png\" alt=\"\" class=\"sect-3-left\">\r\n <div class=\"content-sect-3\">\r\n <h3>Our services<\/h3>\r\n <h1>Our UI\/UX Design Offerings<\/h1>\r\n <p>Every touchpoint matters. We focus on creating intuitive, user-friendly designs that resonate with your audience and align with your brand's values<\/p>\r\n \r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-3\">Kick-start<\/button><\/a>\r\n \r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-3-right.png\" alt=\"\" class=\"sect-3-right\">\r\n \r\n <\/div>\r\n \r\n \r\n <\/section> \r\n\r\n \r\n\r\n <section class=\"section-4\">\r\n <div class=\"card-section\">\r\n <div class=\"stack-area\">\r\n <div class=\"right-section\">\r\n <div class=\"cards\">\r\n <div class=\"individual-card\">\r\n<div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/userresearch_uiux.mp4\" autoplay muted loop><\/video>\r\n<\/div>\r\n<div class=\"content\">Dwelling deep into understanding your audience's needs, behaviour, and motivations<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/wireframing_uiux_1.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n <div class=\"content content-wireframing\">Crafting the blueprint for your digital interface<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/prototyping_uiux.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n \r\n <div class=\"content content-proto\">Breathing life into design concepts for tangible feedback<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/usertesting_uiux.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n \r\n <div class=\"content\">Ensuring the design exceeds user expectations and needs<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/uiuxdesign_uiux_1.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n \r\n <div class=\"content content-proto\">Designing visually captivating interfaces that enhance user engagement<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section> \r\n \r\n \r\n \r\n \r\n <section class=\"section-5\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-asset.png\" alt=\"\" class=\"sect-5-left-asset\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-asset.png\" alt=\"\" class=\"sect-5-right-asset\">\r\n \r\n <div class=\"spacer\">\r\n <div class=\"content-sect-4\">\r\n \r\n <h3>Our process<\/h3>\r\n <\/div>\r\n <h2 class=\"designanimation-sect-5\">Our Design Process: Insight to Interface<\/h2>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-underline.png\" alt=\"\" class=\"sect-5-underline\">\r\n <p>\r\n A meticulous approach that places user needs and business objectives at\r\n the forefront.\r\n <\/p>\r\n \r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-3\">Kick-start<\/button><\/a>\r\n <\/div>\r\n <section class=\"designsection\">\r\n \r\n <div class=\"design_process divM1\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-orange\">1.<\/h2>\r\n <span class=\"design-process-heading\">Discovery<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Grasping the project scope, objectives, and target audience.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"design_process divM2\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-black\">2.<\/h2>\r\n <span class=\"design-process-heading\">Research<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Gathering pivotal insights about user behaviours and pain\r\n points.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"design_process divM3\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-orange\">3.<\/h2>\r\n <span class=\"design-process-heading\">Design<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Formulating wireframes, mockups, and interactive prototypes.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"design_process divM4\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-black\">4.<\/h2>\r\n <span class=\"design-process-heading\">Testing<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Collating user feedback and refining the design<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"design_process divM5\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-black\">5.<\/h2>\r\n <span class=\"design-process-heading\">Implementating<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Actualizing the final design, ensuring consistency and\r\n finesse.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/section> \r\n \r\n \r\n \r\n <section class=\"section-6\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-6-left-asset.png\" alt=\"\" class=\"sect-6-left-asset\">\r\n <div class=\"spacer content-sect-6\">\r\n <div class=\"content-sect-4\">\r\n <h3>Our portfolio<\/h3>\r\n <\/div>\r\n <h2>Showcasing Our Design Mastery<\/h2>\r\n <p>\r\n Witness the transformative power of design through our curated portfolio, reflecting our unwavering commitment to excellence.\r\n <\/p>\r\n\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-3\">Enquire Now<\/button><\/a>\r\n \r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-6-right-asset.png\" alt=\"\" class=\"sect-6-right-asset\">\r\n <div class=\"wildleaf\">\r\n <div class=\"carousel-heading-container\">\r\n <h2 class=\"carousel-heading\">Wildleaf<\/h2>\r\n <\/div>\r\n <div class=\"portfolio-tags\">\r\n <div>\r\n <h5 class=\"tag1\">Wildleaf<\/h5>\r\n <\/div>\r\n <div>\r\n <h5 class=\"tag2\">Tipplr<\/h5>\r\n <\/div>\r\n <div>\r\n <h5 class=\"tag3\">Content Whale<\/h5>\r\n <\/div>\r\n <div>\r\n <h5 class=\"tag4\">Dexwin<\/h5>\r\n <\/div> \r\n <\/div>\r\n <p>Witness the transformative power of design through our curated portfolio, reflecting our unwavering commitment to excellence.<\/p>\r\n <\/div> \r\n \r\n \r\n <div class=\"carousel-container\">\r\n <button class=\"carousel-button\">\r\n <div class=\"mobile-carousel\">\r\n <img decoding=\"async\" class=\"mobile-carousel-img\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg1.png\"\/>\r\n <\/div>\r\n <\/button>\r\n <button class=\"carousel-button\"> \r\n <div class=\"tablet-carousel\">\r\n <img decoding=\"async\" class=\"tablet-carousel-img\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg1.png\"\/>\r\n <\/div>\r\n <\/button>\r\n <\/div>\r\n \r\n <\/section> \r\n \r\n \r\n \r\n <section class=\"section-7\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-7-left-asset.png\" alt=\"\" class=\"sect-7-left-asset\">\r\n <div class=\"bg\"><\/div>\r\n <div class=\"wrapper\" id=\"wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-7-start-circle.png\" alt=\"\" class=\"sect-7-start-circle\">\r\n \r\n <div class=\"content-sect-4 sect-7-content-parent\">\r\n <h3>Testimonial<\/h3>\r\n <\/div>\r\n <h2 class=\"hell-heading\">What our clients think about us?<\/h2><\/div>\r\n <div class=\"quote-row\">\r\n \r\n <div class=\"quote-column col-active show\">\r\n \r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQzfHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Tom hawck<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Harry john<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1488426862026-3ee34a7d66df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Larry Will<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1463453091185-61582044d556?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Augustine<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDZ8fHBlb3BsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Jack Danny<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504439904031-93ded9f93e4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTl8fHBlb3BsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Luich Harry<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1474176857210-7287d38d27c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Alisha Angela<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1592621385612-4d7129426394?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTE5fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Lofy Sthamam<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1557053910-d9eadeed1c58?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTI2fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Angela Baby<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTM1fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Hanry Harry<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cm9ib3R8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Dlang Dhal<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-7-right-asset.png\" alt=\"\" class=\"sect-7-right-asset\">\r\n <\/div>\r\n <\/section> \r\n \r\n \r\n \r\n \r\n \r\n <section class=\"section-8\">\r\n <section class=\"faqsection\">\r\n <section class=\"principal-section\" data-status=\"open\">\r\n <div class=\"results title\" onclick=\"changeStatus(0)\">\r\n <h2>Benefits?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n How Can Good UX Design Benefit My Business?<\/span><br \/>Good UX design is crucial for any business delivering services or products digitally. It directly impacts your bottom line by improving conversion rates, customer retention, reducing customer acquisition costs, and enhancing overall user satisfaction.\r\n <\/p>\r\n \r\n \r\n \r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"principal-section\" data-status=\"close\">\r\n <div class=\"analysis title\" onclick=\"changeStatus(1)\">\r\n <h2>Client information?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n What Information Do I Need to Provide for a UX Design Project?<\/span><br \/><br \/>We begin with a detailed brainstorming session to understand your business\/organizational goals, target audience, product goals, expected outcomes, KPIs, technical specifications, and any existing market research or user analytics data.\r\n <\/p>\r\n \r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button><\/a>\r\n \r\n <\/div>\r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"principal-section\" data-status=\"close\">\r\n <div class=\"growth title\" onclick=\"changeStatus(2)\">\r\n <h2>Tools?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n What Tools Do You Use for UX Design?<\/span><br \/><br \/>Our team uses a variety of tools across different stages of the UX design process, including Hotjar and Usabilla for user research, Adobe XD, Figma, and Invision for design, Crazyegg and UserTesting.com for user testing, and Basecamp, Miro, and Notion for project management.\r\n <\/p>\r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button><\/a>\r\n \r\n <\/div>\r\n \r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"principal-section\" data-status=\"close\">\r\n <div class=\"analysis title\" onclick=\"changeStatus(3)\">\r\n <h2>Services?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer lastcontain\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n Will You Provide Support After the Product Launch?<\/span><br \/><br \/>We offer support according to the client's needs, including a 3-month post-launch support period. Clients can also opt for an Annual Support Contract (ASC) for extended services.\r\n <\/p>\r\n \r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button><\/a>\r\n \r\n <\/div>\r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/section>\r\n <\/section> \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/Observer.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/TextPlugin.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN\/o0jlpcV8Qyq46cDfL\" crossorigin=\"anonymous\"><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n <script>\r\n AOS.init();\r\n <\/script> \r\n <script>\r\n \r\n document.addEventListener(\"DOMContentLoaded\", function () {\r\n const letterElement = document.getElementById(\"t\");\r\n \r\n let animationStartTime;\r\n const animationDuration = 3000;\r\n \r\n function startAnimation() {\r\n animationStartTime = performance.now();\r\n animate();\r\n }\r\n \r\n function animate() {\r\n const currentTime = performance.now();\r\n const elapsedTime = currentTime - animationStartTime;\r\n \r\n if (elapsedTime < animationDuration) {\r\n const progress = elapsedTime \/ animationDuration;\r\n const path = \"abcdefghijklmnopqrst\";\r\n const currentPos = Math.floor(progress * path.length);\r\n letterElement.textContent = path[currentPos];\r\n \r\n requestAnimationFrame(animate);\r\n } else {\r\n letterElement.textContent = \"n\";\r\n }\r\n }\r\n \r\n startAnimation();\r\n });\r\n \r\n gsap.registerPlugin(ScrollTrigger);\r\n \r\n gsap.to(\".hero-bg-black\", {\r\n height: \"120vh\",\r\n scrollTrigger: {\r\n trigger: \".individualchar\",\r\n start: \"50% center\",\r\n end: \"bottom top\",\r\n scrub: true,\r\n pin: true,\r\n \/\/ markers: true,\r\n },\r\n });\r\n \r\n \/\/ Section 4 Cards ANimations\r\n \r\n let cards = document.querySelectorAll(\".individual-card\");\r\n let stackArea = document.querySelector(\".stack-area\");\r\n \r\n function rotateCards() {\r\n let angle = 0;\r\n cards.forEach((card) => {\r\n if (card.classList.contains(\"active\")) {\r\n card.style.transform = `translate(-50%, -120vh) rotate(-48deg)`;\r\n } else {\r\n card.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;\r\n angle = angle - 10;\r\n }\r\n });\r\n }\r\n \r\n rotateCards();\r\n \r\n window.addEventListener(\"scroll\", () => {\r\n let proportion = stackArea.getBoundingClientRect().top \/ window.innerHeight;\r\n if (proportion <= 0) {\r\n let n = cards.length;\r\n let index = Math.ceil((proportion * n) \/ 2);\r\n index = Math.abs(index) - 1;\r\n for (let i = 0; i < n; i++) {\r\n if (i <= index) {\r\n cards[i].classList.add(\"active\");\r\n } else {\r\n cards[i].classList.remove(\"active\");\r\n }\r\n }\r\n rotateCards();\r\n }\r\n });\r\n \r\n \/\/Code for responsiveness\r\n \r\n \/\/ function adjust() {\r\n \/\/ let windowWidth = window.innerWidth;\r\n \/\/ let left = document.querySelector(\".left\");\r\n \/\/ left.remove();\r\n \/\/ if (windowWidth < 800) {\r\n \/\/ stackArea.insertAdjacentElement(\"beforebegin\", left);\r\n \/\/ } else {\r\n \/\/ stackArea.insertAdjacentElement(\"afterbegin\", left);\r\n \/\/ }\r\n \/\/ }\r\n \/\/ adjust();\r\n \r\n \/\/ \/\/detect Resize\r\n \r\n \/\/ window.addEventListener(\"resize\", adjust);\r\n \r\n \/\/ Section 8\r\n \r\n function changeStatus(x) {\r\n const sections = document.querySelectorAll(\".principal-section\");\r\n if (sections[x].dataset.status === \"close\") {\r\n for (let i = 0; i < sections.length; i++) {\r\n sections[i].dataset.status = \"close\";\r\n }\r\n sections[x].dataset.status = \"open\";\r\n }\r\n }\r\n \r\n \/\/ Section 6 carousels\r\n \r\n \/\/ Data for carousel items\r\n const carouselItems = [\r\n {\r\n text: \"Wildleaf\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg1.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg1.png\",\r\n tag3: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag4: \"Content Whale\",\r\n tag2: \"Tipplr\",\r\n },\r\n {\r\n text: \"Tipplr\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg2.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg2.png\",\r\n tag3: \"Tipplr\",\r\n tag4: \"Wildleaf\",\r\n tag2: \"Dexwin\",\r\n tag1: \"Content Whale\",\r\n },\r\n {\r\n text: \"Dexwin\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg3.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg3.png\",\r\n tag4: \"Tipplr\",\r\n tag1: \"Wildleaf\",\r\n tag2: \"Dexwin\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Content Whale\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg4.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg4.png\",\r\n tag4: \"Tipplr\",\r\n tag1: \"Content Whale\",\r\n tag3: \"Wildleaf\",\r\n tag2: \"Dexwin\",\r\n },\r\n {\r\n text: \"Pear 5\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg5.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg5.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 6\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg6.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg6.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 7\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg7.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg7.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 8\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg8.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg8.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 9\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg9.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg9.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 10\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg10.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg10.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Axxonet 11\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003012%20(1).png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003010.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Analytics\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Axxonet\",\r\n },\r\n {\r\n text: \"Scribble 12\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003013.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003011.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Masters\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Scribble\",\r\n }\r\n ];\r\n \r\n \r\n const carouselButtons = document.querySelectorAll(\".carousel-button\");\r\n const carouselHeading = document.querySelector(\".carousel-heading\");\r\n const mobileCarouselImg = document.querySelector(\".mobile-carousel-img\");\r\n const tabletCarouselImg = document.querySelector(\".tablet-carousel-img\");\r\n const tag_1 = document.querySelector(\".tag1\");\r\n const tag_2 = document.querySelector(\".tag2\");\r\n const tag_3 = document.querySelector(\".tag3\");\r\n const tag_4 = document.querySelector(\".tag4\");\r\n \r\n let currentIndex = 0;\r\n \r\n function updateCarousel() {\r\n const currentItem = carouselItems[currentIndex];\r\n carouselHeading.style.opacity = 0;\r\n carouselHeading.style.transform = 'translateX(-350px)';\r\n \r\n mobileCarouselImg.style.opacity = 0;\r\n mobileCarouselImg.style.transform = 'scale(1.1)';\r\n \r\n tabletCarouselImg.style.opacity = 0;\r\n tabletCarouselImg.style.transform = 'scale(1.1)';\r\n \r\n tag_1.style.transform = 'translateY(50px)';\r\n tag_2.style.transform = 'translateY(50px)';\r\n tag_3.style.transform = 'translateY(50px)';\r\n tag_4.style.transform = 'translateY(50px)';\r\n \r\n setTimeout(() => {\r\n carouselHeading.textContent = currentItem.text;\r\n carouselHeading.style.opacity = 1;\r\n carouselHeading.style.transform = 'translateX(0)';\r\n \r\n mobileCarouselImg.src = currentItem.mobileImg;\r\n mobileCarouselImg.style.opacity = 1;\r\n mobileCarouselImg.style.transform = 'scale(1)'; \r\n \r\n tabletCarouselImg.src = currentItem.tabletImg;\r\n tabletCarouselImg.style.opacity = 1;\r\n tabletCarouselImg.style.transform = 'scale(1)'; \r\n \r\n tag_1.textContent = currentItem.tag1;\r\n tag_1.style.transform = 'translateY(0)';\r\n \r\n tag_2.textContent = currentItem.tag2;\r\n tag_2.style.transform = 'translateY(0)';\r\n \r\n tag_3.textContent = currentItem.tag3;\r\n tag_3.style.transform = 'translateY(0)';\r\n \r\n tag_4.textContent = currentItem.tag4;\r\n tag_4.style.transform = 'translateY(0)';\r\n }, 300);\r\n }\r\n \r\n carouselButtons.forEach(function(button) {\r\n button.addEventListener(\"click\", function () {\r\n currentIndex = (currentIndex + 1) % carouselItems.length;\r\n updateCarousel();\r\n });\r\n });\r\n \r\n let mobileWidth = 640;\r\n let tabWidth = 1080;\r\n let deskWidth = 1220;\r\n let pWidth, pHeight, screenWidth, screenHeight;\r\n let index = document.getElementsByClassName(\"quote-column\");\r\n let pTransition = 3;\r\n let activeShow = \"col-active\";\r\n const arrowIcon = \"<div class='arrow left-arrow ' onclick='arrowControl(-1)'><i class='arrow-icon'><i><\/div><div class='arrow right-arrow' onclick='arrowControl(1)'><i class='arrow-icon'><i><\/div>\"\r\n const ArrowParent = document.createElement(\"div\");\r\n ArrowParent.classList.add(\"arrows-wrap\");\r\n ArrowParent.innerHTML = arrowIcon;\r\n let arrowEnabled = false;\r\n let activeQuoteHeight = 400;\r\n \r\n getElem();\r\n function getElem() {\r\n let hAndW;\r\n let targetElem;\r\n index[0].parentElement.style.minHeight = (index.length \/ 2) * 140 + \"px\";\/\/ assign row element height\r\n \r\n for (let i = 0; i < index.length; i++) {\r\n targetElem = index[i];\r\n pWidth = targetElem.parentElement.offsetWidth;\r\n pHeight = targetElem.parentElement.offsetHeight;\r\n \r\n \/\/When viewing on desktop\r\n if (screenWidth > tabWidth) {\r\n hAndW = randomPos(60, (screenHeight \/ (index.length \/ 1.5))) + 'px';\/\/Lets make the height and width variables randomly\r\n \r\n \/\/ lets devide all the elements by less then 2 and positioning them left and right not in the middle;\r\n \/\/this is for left side\r\n if (i < index.length \/ 1.9) {\r\n targetElem.style.left = randomPos(100, targetElem.parentElement.offsetWidth \/ 3 - 100) + 'px'; \/\/ X position left\r\n targetElem.style.top = (targetElem.parentElement.offsetHeight \/ (index.length \/ 2)) * (i - 1) + 'px'; \/\/Y position left\r\n }\r\n \/\/ this is for right side\r\n else if (i > index.length \/ 1.9) {\r\n targetElem.style.right = randomPos(100, targetElem.parentElement.offsetWidth \/ 3 - 100) + 'px'; \/\/ X position right\r\n targetElem.style.left = 'auto'; \/\/ X position right\r\n targetElem.style.top = (targetElem.parentElement.offsetHeight \/ (index.length \/ 2)) * ((index.length - 1) - i) + 'px'; \/\/Y position right\r\n }\r\n if (arrowEnabled) ArrowParent.style.display = \"block\";\/\/ When arrow added make them visible\r\n else ArrowParent.style.display = \"none\";\/\/ When arrow added make them hidden\r\n }\r\n \r\n \/\/When viewing on tab\r\n if (screenWidth <= tabWidth && screenWidth >= mobileWidth) {\r\n hAndW = randomPos(30, (screenHeight \/ (index.length \/ 1.5))) + 'px';\r\n targetElem.parentElement.style.minHeight = \"70vh\";\r\n targetElem.style.bottom = '0px'; \/\/Y position\r\n targetElem.style.left = (targetElem.parentElement.offsetWidth) \/ (index.length - 1) * (i - 1) + 'px'; \/\/ X position left\r\n targetElem.style.zIndex = '100'; \/\/Y position\r\n targetElem.style.top = 'auto'; \/\/Y position\r\n if (arrowEnabled) ArrowParent.style.display = \"block\";\/\/ When arrow added make them visible\r\n else ArrowParent.style.display = \"none\";\/\/ When arrow added make them visible\r\n }\r\n \r\n \/\/When viewing on mobile\r\n if (screenWidth < mobileWidth) {\r\n targetElem.style.left = '50%'; \/\/ X position left\r\n ArrowParent.style.display = \"block\";\/\/ When arrow added make them visible\r\n }\r\n else if (!arrowEnabled) ArrowParent.style.display = \"none\";\/\/ otherwise hidden\r\n \r\n \/\/after all the work done lets sizing the element\r\n targetElem.style.width = hAndW;\r\n targetElem.style.height = hAndW;\r\n \/\/and the active one position default\r\n if (i != 0) {\r\n targetElem.addEventListener('click', quoteShow, false); \/\/So we dont need click event on the active one\r\n }\r\n targetElem.classList.add(\"moves\");\r\n }\r\n setTimeout(() => {\r\n for (let i = 0; i < index.length; i++) {\r\n \/\/ targetElem.style.transition = \"0s\";\r\n }\r\n }, 2000);\r\n }\r\n \r\n \r\n let clickCheck = true, showClear, showClear2;\r\n function quoteShow(evt) {\r\n const style = getComputedStyle(this);\r\n console.log(style);\r\n if (clickCheck) {\r\n clickCheck = false;\r\n clearTimeout(showClear2);\r\n let activeQuote = document.getElementsByClassName(activeShow);\r\n let aq;\r\n for (let j = 0; j < activeQuote.length; j++) {\r\n aq = activeQuote[j];\r\n aq.classList.remove(\"show\");\r\n aq.style.transition = \"0.4s\";\r\n }\r\n this.style.transition = \"0.4s\";\r\n setTimeout(() => {\r\n aq.style.top = this.offsetTop + \"px\";\r\n aq.style.left = this.offsetLeft + \"px\";\r\n aq.style.width = this.offsetWidth + \"px\";\r\n aq.style.height = this.offsetHeight + \"px\";\r\n aq.addEventListener('click', quoteShow, false);\r\n aq.classList.remove(activeShow);\r\n }, 600);\r\n \r\n setTimeout(() => {\r\n this.classList.add(activeShow);\r\n this.removeEventListener(\"click\", quoteShow, false);\r\n }, 1200);\r\n \r\n showClear2 = setTimeout(() => {\r\n this.classList.toggle(\"show\");\r\n aq.style.transition = \"\";\r\n this.style.transition = \"\";\r\n clickCheck = true;\r\n }, 1800);\r\n }\r\n }\r\n \r\n let arrowClicked = true; nowActive = 0;\r\n \r\n \r\n function arrowControl(val) {\r\n \/\/ else nowActive += val;\r\n if (arrowClicked) {\r\n arrowClicked = false;\r\n for (let i = 0; i < index.length; i++) {\r\n index[nowActive].classList.remove(\"show\");\r\n index[nowActive].style.transition = \".4s\";\r\n index[nowActive].addEventListener('click', quoteShow, false);\r\n }\r\n setTimeout(() => {\r\n for (let j = 0; j < index.length; j++) {\r\n index[j].classList.remove(activeShow);\r\n }\r\n nowActive += val;\r\n if (nowActive > index.length - 1) nowActive = 0;\r\n else if (nowActive < 0) nowActive = index.length - 1;\r\n }, 600);\r\n \r\n setTimeout(() => {\r\n index[nowActive].classList.add(activeShow);\r\n index[nowActive].removeEventListener(\"click\", quoteShow, false);\r\n }, 610);\r\n \r\n setTimeout(() => {\r\n index[nowActive].classList.toggle(\"show\");\r\n index[nowActive].style.transition = \"\";\r\n arrowClicked = true\r\n }, 1800);\r\n }\r\n }\r\n \r\n function randomPos(min, max) {\r\n return Math.floor(Math.random() * (max - min + 1)) + min;\r\n }\r\n \r\n function getScreenSize() {\r\n screenWidth = window.innerWidth;\r\n screenHeight = window.innerHeight;\r\n getElem();\r\n }\r\n \r\n window.onresize = getScreenSize;\r\n window.addEventListener('resize', getScreenSize);\r\n window.addEventListener('load', function () {\r\n getScreenSize();\r\n getElem();\r\n }, true);\r\n \r\n function arrowFunc() {\r\n try {\r\n index[0].parentElement.appendChild(ArrowParent);\/\/ try insert arrow element for slide control\r\n } catch (error) { }\r\n }\r\n arrowFunc();\r\n \r\n \r\n \r\n \r\n \/\/Flaoting animation class;\r\n class MoveAnim {\r\n constructor(max, tm) {\r\n this.time = tm;\r\n if (Math.random() > .5) this.uDVal = max; else this.uDVal = 0;\r\n if (Math.random() > .5) this.lRVal = max; else this.lRVal = 0;\r\n this.max = max;\r\n if (Math.random() > .5) this.uD = false; else this.uD = true;\r\n if (Math.random() > .5) this.lR = false; else this.lR = true;\r\n this.upDown(this.max);\r\n this.leftRight(this.max);\r\n this.scale = .01;\r\n }\r\n \r\n upDown() {\r\n setInterval(() => {\r\n if (!this.uDVal) {\r\n if (this.uD >= this.max) { this.uDVal = true; }\r\n if (this.uD < this.max) { this.uD += this.scale; }\r\n }\r\n else if (this.uDVal) {\r\n if (this.uD <= -this.max) { this.uDVal = false; }\r\n if (this.uD >= -this.max) { this.uD -= this.scale; }\r\n }\r\n return this.uD;\r\n }, this.time \/ 1000);\r\n }\r\n leftRight() {\r\n setInterval(() => {\r\n if (!this.lRVal) {\r\n if (this.lR >= this.max) { this.lRVal = true; }\r\n if (this.lR < this.max) { this.lR += this.scale; }\r\n }\r\n else if (this.lRVal) {\r\n if (this.lR <= -this.max) { this.lRVal = false; }\r\n if (this.lR >= -this.max) { this.lR -= this.scale; }\r\n }\r\n return this.lR;\r\n }, this.time \/ 1000);\r\n }\r\n \r\n letMove(el, ud = false, lr = false) {\r\n \r\n setInterval(() => {\r\n if (ud === true && lr === false) {\r\n el.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, \" + 0 + \",\" + this.uD + \", 0, 1)\";\r\n }\r\n else if (ud === false && lr === true) {\r\n el.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, \" + this.lR + \",\" + 0 + \", 0, 1)\";\r\n }\r\n else {\r\n el.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, \" + this.lR + \",\" + this.uD + \", 0, 1)\";\r\n }\r\n \r\n \r\n }, 1);\r\n }\r\n \r\n start(elem, ud, lr) {\r\n this.letMove(elem, ud, lr);\r\n this.upDown();\r\n this.leftRight();\r\n }\r\n }\r\n \r\n class ShowAnim {\r\n constructor(mElem, dist, times) {\r\n this.mElem = document.getElementsByClassName(mElem);\r\n this.pElem = mElem.parentElement;\r\n this.cElem = mElem.children;\r\n this.count = 0;\r\n this.max = dist;\r\n this.min = 10;\r\n this.times = times;\r\n this.randomCount(this.max);\r\n }\r\n randomCount(max) {\r\n return Math.floor(Math.random() * (max - this.min + 1)) + this.min;\r\n }\r\n show(ud, lr) {\r\n for (this.count = 0; this.count < this.mElem.length; this.count++) {\r\n this.moveanim = new MoveAnim(this.randomCount(this.max), this.times,);\r\n this.moveanim.start(this.mElem[this.count], ud, lr);\r\n }\r\n }\r\n }\r\n \r\n \r\n let animShow = new ShowAnim(\"moves\", 40, 50);\/\/ Element, Max Distance, Times in milliseconds\r\n \r\n \/\/Start floating\r\n animShow.show(true, true);\/\/ Up-Down, Left-Right;\r\n \r\n \r\n \/*;-------------------------------------------------\r\n GSAP\r\n -------------------------------------------------;*\/\r\n \r\n \r\n let tl2 = gsap.timeline({scrollTrigger:{\r\n trigger:\".section-3\",\r\n start:\"top 0%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n pin: false,\r\n \/\/ markers:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl2.to('.sect-3-left',{\r\n yPercent: 50,\r\n ease: \"none\",\r\n \r\n }, 'section-3')\r\n tl2.to('.sect-3-right',{\r\n yPercent: 50,\r\n ease: \"none\",\r\n \r\n }, 'section-3')\r\n \r\n \r\n \/\/ ----------------------------------\r\n \r\n \r\n let tl4= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-5\",\r\n start:\"top 0%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl4.to('.sect-5-left-asset',{\r\n yPercent: 400,\r\n ease: \"none\",\r\n \r\n }, 'section-5')\r\n tl4.to('.sect-5-right-asset',{\r\n yPercent: 150,\r\n ease: \"none\",\r\n \r\n }, 'section-5')\r\n \r\n \r\n \/\/ --------------------------------------------\r\n \r\n let tl5= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-6\",\r\n start:\"top 0%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:'true',\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl5.to('.sect-6-left-asset',{\r\n yPercent: 40,\r\n ease: \"none\",\r\n \r\n }, 'section-6')\r\n tl5.to('.sect-6-right-asset',{\r\n yPercent: 50,\r\n ease: \"none\",\r\n \r\n }, 'section-6')\r\n \r\n \/\/ -----------------------------------------\r\n \r\n \r\n let tl7= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-7\",\r\n start:\"top 10%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl7.to('.sect-7-left-asset',{\r\n yPercent: 20,\r\n ease: \"none\",\r\n \r\n }, 'section-7')\r\n tl7.to('.sect-7-right-asset',{\r\n yPercent: 20,\r\n ease: \"none\",\r\n \r\n }, 'section-7')\r\n \r\n \r\n \/\/ --------------------------\r\n \r\n \r\n let tl8= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-7\",\r\n start:\"bottom 10%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl8.to('.faqquestion',{\r\n yPercent: -20,\r\n ease: \"none\",\r\n \r\n }, 'section-8')\r\n \r\n \r\n gsap.registerPlugin(ScrollTrigger);\r\n \r\n function animateOnScroll(element) {\r\n gsap.to(element, {\r\n x: 0,\r\n scrollTrigger: {\r\n scrub: true,\r\n trigger: element,\r\n start: \"top 90%\",\r\n end: \"bottom 60%\",\r\n \/\/ markers: true,\r\n },\r\n });\r\n }\r\n \r\n animateOnScroll(\".divM1\");\r\n animateOnScroll(\".divM2\");\r\n animateOnScroll(\".divM3\");\r\n animateOnScroll(\".divM4\");\r\n animateOnScroll(\".divM5\");\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_ae_slider elementor-element elementor-element-cd8f22f e-flex e-con-boxed ae-bg-gallery-type-default e-con e-parent\" data-id=\"cd8f22f\" data-element_type=\"container\" id=\"lllii\" data-settings=\"{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcd8246 elementor-widget elementor-widget-shortcode\" data-id=\"dcd8246\" data-element_type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n <div \n class=\"elfsight-widget-whatsapp-chat elfsight-widget\" \n data-elfsight-whatsapp-chat-options=\"%7B%22facebookSubgoup%22%3Anull%2C%22whatsappSubgoup%22%3Anull%2C%22telegramSubgoup%22%3Anull%2C%22viberSubgoup%22%3Anull%2C%22rumbletalkSubgoup%22%3Anull%2C%22divider-1%22%3Anull%2C%22userAccessToken%22%3Anull%2C%22page%22%3Anull%2C%22phone%22%3A%227338376454%22%2C%22link%22%3Anull%2C%22userAccessTokenBubbleSubgroup%22%3Anull%2C%22bubbleIcon%22%3A%22whatsapp-chat%22%2C%22bubbleText%22%3A%22%22%2C%22picture%22%3A%22custom%22%2C%22pictureLibrary%22%3A%7B%22photo%22%3A%22https%3A%5C%2F%5C%2Fpbs.twimg.com%5C%2Fprofile_images%5C%2F951055655594545153%5C%2FF6eybr-i.jpg%22%7D%2C%22pictureCustom%22%3A%22https%3A%5C%2F%5C%2Fitzfizz.com%5C%2Fwp-content%5C%2Fuploads%5C%2F2024%5C%2F09%5C%2FScreenshot-2024-09-03-160434.png%22%2C%22name%22%3A%22Sales%20Team%22%2C%22nameCaptionType%22%3A%22custom%22%2C%22nameCaptionReplyTime%22%3A%22Typically%20replies%20within%20a%20day%22%2C%22nameCaptionCustom%22%3A%22Typically%20replies%20within%201%20business%20day%22%2C%22welcomeMessage%22%3A%22Hi%20there%20%3F%3F%3F%3F%3Cbr%3E%3Cbr%3EHow%20can%20I%20help%20you%3F%22%2C%22buttonText%22%3A%22Start%20Chat%22%2C%22buttonIconVisible%22%3Atrue%2C%22position%22%3A%22floating%22%2C%22align%22%3A%22right%22%2C%22whereToDisplayChat%22%3A%22allPages%22%2C%22excludedPages%22%3A%5B%5D%2C%22specificPages%22%3A%5B%5D%2C%22devicesToDisplay%22%3A%5B%22mobile%22%2C%22desktop%22%5D%2C%22showChatTo%22%3A%22allVisitors%22%2C%22displayDays%22%3A%5B0%2C1%2C2%2C3%2C4%2C5%2C6%5D%2C%22timeSchedule%22%3Afalse%2C%22displayStartTime%22%3A%2200%3A00%22%2C%22displayEndTime%22%3A%2200%3A00%22%2C%22timeZone%22%3A0%2C%22timeOnPage%22%3A0%2C%22timeOnSite%22%3A0%2C%22scrollPosition%22%3A0%2C%22exiIntent%22%3Afalse%2C%22notifications%22%3A%5B%22bubbleBadge%22%2C%22tabTitle%22%5D%2C%22headerBackgroundColor%22%3A%22rgb%289%2C%2094%2C%2084%29%22%2C%22buttonColor%22%3A%22rgb%2879%2C%20206%2C%2093%29%22%2C%22bubbleBackgroundColor%22%3A%22rgb%2879%2C%20206%2C%2093%29%22%2C%22bubbleIconColor%22%3A%22rgb%28255%2C%20255%2C%20255%29%22%2C%22windowBackgroundColor%22%3A%22rgb%28230%2C%20221%2C%20212%29%22%2C%22windowBackgroundPattern%22%3A%22https%3A%5C%2F%5C%2Felfsight.com%5C%2Fassets%5C%2Fchats%5C%2Fpatterns%5C%2Fwhatsapp.png%22%2C%22buttonBorderRadius%22%3A20%2C%22widgetId%22%3A%221%22%7D\" \n data-elfsight-whatsapp-chat-version=\"1.2.0\"\n data-elfsight-widget-id=\"elfsight-whatsapp-chat-1\">\n <\/div>\n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Document Desi gn anything Crafting intuitive digital experiences with Itzfizz UI\/UX Services Tailored to Your Brand In today’s digital landscape, user experience is paramount. Dive into a journey where your brand’s essence meets our design expertise Kickstart Your Design Journey Our services Our UI\/UX Design Offerings Every touchpoint matters. We focus on creating intuitive, user-friendly […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-806","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages\/806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/comments?post=806"}],"version-history":[{"count":776,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages\/806\/revisions"}],"predecessor-version":[{"id":54798,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages\/806\/revisions\/54798"}],"wp:attachment":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/media?parent=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Document<\/title>\r\n<\/head>\r\n<body>\r\n <style>\r\n \r\n\r\n @font-face {\r\n font-family: \"Hempa Sans\";\r\n src: url(\"https:\/\/itzfizzdigital.b-cdn.net\/UniteaSans-Regular.ttf\");\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n body {\r\n font-family: \"Hempa Sans\";\r\n overflow-x: hidden !important;\r\n \/* contain: paint; *\/\r\n }\r\n ::-webkit-scrollbar {\r\n width: 10px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background-color: #1e1e1e;\r\n \/* border-radius: 50%; *\/\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background-color: #ff9e44;\r\n border-radius: 50%;\r\n }\r\n \r\n \/* Section 1 *\/\r\n \r\n .individualchar {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n width: 100vw;\r\n font-family: \"Hempa Sans\";\r\n font-weight: 800;\r\n }\r\n .individualchar h2 {\r\n font-size: 15vw;\r\n font-weight: 900;\r\n color: #000000;\r\n \/* padding-left: -39.4vw; *\/\r\n }\r\n .anything {\r\n font-weight: 600;\r\n font-family: \"Hempa Sans\";\r\n padding-left: 17.9vw;\r\n }\r\n .n {\r\n position: relative;\r\n }\r\n .windmill {\r\n position: absolute;\r\n top: -9.4vh;\r\n width: 8.5vw;\r\n animation: windmillrotate 3s ease-in-out infinite;\r\n transform-origin: center;\r\n }\r\n .h {\r\n position: relative;\r\n }\r\n @keyframes worm {\r\n 0%,\r\n 100% {\r\n transform: translateY(30px);\r\n }\r\n 50% {\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes windmillrotate {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 25% {\r\n transform: rotate(90deg);\r\n }\r\n 50% {\r\n transform: rotate(180deg);\r\n }\r\n 75% {\r\n transform: rotate(270deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n .A {\r\n display: inline-block;\r\n animation: A 0.5s;\r\n }\r\n \r\n @keyframes A {\r\n 0% {\r\n transform: rotateX(180deg) translateY(-200px);\r\n }\r\n 100% {\r\n transform: rotateX(0deg) translateY(0);\r\n }\r\n }\r\n \r\n .i2 {\r\n display: inline-block;\r\n animation: i2 1.5s infinite;\r\n }\r\n \r\n @keyframes i2 {\r\n 0% {\r\n transform: rotateX(-540deg);\r\n }\r\n 100% {\r\n transform: rotateX(180deg);\r\n }\r\n }\r\n \r\n .n {\r\n display: inline-block;\r\n animation: n 0.5s 0.5s forwards;\r\n opacity: 0;\r\n }\r\n @keyframes n {\r\n 0% {\r\n transform: translateY(100px);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n .i {\r\n display: inline-block;\r\n animation: i 0.5s 1s forwards;\r\n opacity: 0;\r\n }\r\n @keyframes i {\r\n 0% {\r\n transform: translateY(-200px);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n .m {\r\n display: inline-block;\r\n animation: m 0.5s 1.5s forwards;\r\n opacity: 0;\r\n }\r\n @keyframes m {\r\n 0% {\r\n transform: translateX(-50px);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n }\r\n .a2 {\r\n display: inline-block;\r\n opacity: 0;\r\n animation: a2 0.5s 2s forwards;\r\n }\r\n @keyframes a2 {\r\n 0% {\r\n transform: scale(0.5);\r\n opacity: 0;\r\n }\r\n 100% {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n .wheel {\r\n position: absolute;\r\n top: 190px;\r\n width: 130px;\r\n z-index: -1;\r\n opacity: 0;\r\n animation: wheel 2s 1s;\r\n }\r\n @keyframes wheel {\r\n 0% {\r\n transform: translateX(-160px) scale(0.5) rotate(0);\r\n opacity: 1;\r\n }\r\n 25% {\r\n transform: translateX(-160px) scale(1) rotate(90deg);\r\n opacity: 1;\r\n }\r\n 50% {\r\n transform: translateX(0) scale(1) rotate(180deg);\r\n opacity: 1;\r\n }\r\n 75%,\r\n 100% {\r\n transform: scale(0.5) rotate(200deg);\r\n opacity: 0;\r\n }\r\n }\r\n .e {\r\n display: inline-block;\r\n animation: e 0.5s 3s both;\r\n visibility: hidden;\r\n }\r\n @keyframes e {\r\n 0% {\r\n transform: rotateY(180deg);\r\n visibility: hidden;\r\n }\r\n 100% {\r\n transform: rotateY(0);\r\n visibility: visible;\r\n }\r\n }\r\n \r\n .t2 {\r\n display: inline-block;\r\n position: relative;\r\n animation: t2 1.5s 2s forwards;\r\n transform: scale(0);\r\n }\r\n .y {\r\n position: relative;\r\n }\r\n .bolt {\r\n position: absolute;\r\n z-index: -1;\r\n min-width: 200px;\r\n top: 2vh;\r\n margin-left: 3vw !important;\r\n mix-blend-mode: multiply;\r\n }\r\n @keyframes t2 {\r\n 0% {\r\n transform: scale(0);\r\n }\r\n 25% {\r\n transform: scale(0.25);\r\n }\r\n 50% {\r\n transform: scale(0.5);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n \r\n \/* section 2 *\/\r\n \r\n .hero-bg-black {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n overflow: hidden;\r\n z-index: 1;\r\n width: 100%;\r\n height: 0%;\r\n background-color: #fff;\r\n position: absolute;\r\n }\r\n .section-2 {\r\n text-align: center;\r\n background: url(https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/back-sect-2.png);\r\n width: 100vw;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 2000ms;\r\n \r\n }\r\n .content-section-2 {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-card.png\");\r\n background-size: contain;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n width: 100vw;\r\n padding-bottom: 5vh;\r\n \/*padding-top: 5vh;*\/\r\n height: 90vh;\r\n }\r\n .content-sect-2 {\r\n width: 75vw;\r\n }\r\n .content-sect-2 h2 {\r\n color: #fff;\r\n font-size: 4vw !important;\r\n font-weight: 500;\r\n -webkit-text-stroke-width: 1;\r\n -webkit-text-stroke-color: #000;\r\n font-family: \"Hempa Sans\";\r\n line-height: 12.5vh;\r\n }\r\n .sect-2-para-1 {\r\n margin-top: 5vh !important;\r\n color: #fff;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2.8vw !important;\r\n font-style: normal;\r\n font-weight: 400;\r\n \/*line-height: 8.5vh !important ;*\/\r\n }\r\n .sect-2-para-2 {\r\n width: 80%;\r\n margin-left: 10%;\r\n color: #fff;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 1.5vw !important;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 6.3vh !important; \r\n }\r\n .btn-sect-2 {\r\n border: 2px solid #fff;\r\n box-shadow: 5px 5px 0 #fff;\r\n padding: 2.3vh 1.3vw;\r\n background-color: transparent;\r\n border-radius: 50px;\r\n margin-top: 5.5vh;\r\n color: #fff;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2.5vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 3.8vh;\r\n }\r\n .overlay-img-sect-2-1 {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 25vw;\r\n margin-top: -10vh;\r\n z-index: 0;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .overlay-img-sect-2-2 {\r\n position: absolute;\r\n top: 50;\r\n right: 0;\r\n width: 21.4vw;\r\n z-index: 0;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-2-curly-underline {\r\n position: absolute;\r\n margin-top: -3vh;\r\n margin-left: -1.8vw;\r\n width: 12.8vw;\r\n }\r\n .sect-2-underline {\r\n position: absolute;\r\n width: 33.6vw;\r\n margin-top: 9.8vh;\r\n margin-left: -0.71vw;\r\n }\r\n .sect-2-orange-arrow {\r\n position: absolute;\r\n margin-top: 12.6vh;\r\n width: 4.65vw;\r\n margin-left: 12.1vw;\r\n }\r\n .sect-2-arrow {\r\n position: absolute;\r\n margin-top: -7.2vh;\r\n width: 15.8vw;\r\n margin-left: -14vw;\r\n }\r\n \r\n \/* section 3 *\/\r\n \r\n .section-3 {\r\n background-color: #ffe0aa;\r\n text-align: center;\r\n width: 100vw;\r\n height: 120vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: start;\r\n position: relative;\r\n padding-bottom: 5vh ;\r\n }\r\n .content-section-3 {\r\n width: 70vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n \r\n }\r\n .content-sect-3 h3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-3-circle.png');\r\n \r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: -32%;\r\n left: 20%;\r\n width: 60%;\r\n height: 85%;\r\n z-index: 1;\r\n }\r\n \r\n .content-sect-3 h3 {\r\n margin-bottom: 40px;\r\n margin-top: 50px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2vw;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n width: 22vw;\r\n height: 15vh;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1 {\r\n margin-bottom: 40px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 128px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 124px; \/* 112.5% *\/\r\n }\r\n .content-sect-3 p {\r\n margin-bottom: 40px;\r\n width: 970px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 40px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 54px;\r\n }\r\n .btn-sect-3 {\r\n background-color: #ff9e44;\r\n font-size: 24px;\r\n border: none;\r\n box-shadow: 5px 5px 0 #000;\r\n padding: 9px 54px;\r\n border-radius: 50px;\r\n margin-bottom: 40px;\r\n \r\n font-weight: 600;\r\n position: relative;\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0%;\r\n left: -6vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0%;\r\n right: -6vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .sect-3-left {\r\n position: absolute;\r\n left: 0;\r\n top: 35%;\r\n width: 250px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-3-right {\r\n position: absolute;\r\n right: -3%;\r\n top: 0;\r\n width: 250px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n \r\n .sect-3-left-arrow {\r\n position: absolute;\r\n width: 57px;\r\n top: 610px;\r\n left: 570px;\r\n }\r\n .sect-3-right-arrow {\r\n position: absolute;\r\n width: 57px;\r\n top: 610px;\r\n right: 570px;\r\n }\r\n \r\n \/* Section 4 Cards *\/\r\n .card-section {\r\n width: 100%;\r\n height: fit-content;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n background-color: #ffe0aa;\r\n }\r\n .stack-area {\r\n width: 100%;\r\n height: 300vh;\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .right-section,\r\n .left-section {\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: sticky;\r\n top: 0;\r\n box-sizing: border-box;\r\n }\r\n .cards {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n }\r\n .vid-sect{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-top: -8vh;\r\n }\r\n .individual-card {\r\n width: 400px;\r\n height: 500px;\r\n box-sizing: border-box;\r\n padding: 35px;\r\n border-radius: 6mm;\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: start;\r\n flex-direction: column;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transition: 0.5s ease-in-out;\r\n }\r\n .individual-card:nth-child(1) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002666.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 5;\r\n }\r\n .individual-card:nth-child(2) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002667.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 4;\r\n }\r\n .individual-card:nth-child(3) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002668.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 3;\r\n }\r\n .individual-card:nth-child(4) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002669.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 2;\r\n }\r\n .individual-card:nth-child(5) {\r\n background-image: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group\\ 1000002670.png\");\r\n background-position: center;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n z-index: 1;\r\n }\r\n .sub {\r\n font-size: 20px;\r\n font-weight: 700;\r\n }\r\n .content {\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n margin-left: -0.5vw;\r\n letter-spacing: 1px;\r\n margin-top: -11vh;\r\n flex-wrap: wrap;\r\n }\r\n .content-proto{\r\n color: #fff;\r\n }\r\n .individual-card.active {\r\n transform-origin: bottom left;\r\n }\r\n .left {\r\n align-items: center;\r\n flex-direction: column;\r\n }\r\n .top,\r\n .bottom {\r\n width: 100%;\r\n height: 100vh;\r\n \/* font-family: poppins; *\/\r\n font-size: 70px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .vidCards{\r\n width: 70%;\r\n object-fit: cover;\r\n \r\n }\r\n \r\n \/*CSS Code for responsiveness*\/\r\n @media screen and (max-width: 800px) {\r\n .left {\r\n position: relative;\r\n width: 100vw;\r\n }\r\n }\r\n \r\n \/* Section 5 *\/\r\n \r\n .section-5 {\r\n position: relative;\r\n }\r\n .spacer {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding-top: 50px;\r\n flex-direction: column;\r\n text-align: center;\r\n margin-top: 40px;\r\n padding-bottom: 50px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 2000ms;\r\n \r\n }\r\n .spacer p {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 40px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 54px; \/* 135% *\/\r\n width: 970px;\r\n }\r\n .designsection {\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n padding: 30px;\r\n padding-top: 50px;\r\n gap: 40px;\r\n }\r\n .content-sect-4 h3 {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 1.5vw;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n width: 16vw;\r\n height: 5vh;\r\n }\r\n .content-sect-4 h3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-circle.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n top: -1.5vw;\r\n left: 1vw;\r\n width: 13.2vw;\r\n height: 5.5vw;\r\n z-index: 1;\r\n }\r\n \r\n \r\n .designanimation-sect-5 {\r\n color: #222;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 108px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 145px; \/* 113.281% *\/\r\n letter-spacing: 2.56px;\r\n text-transform: capitalize;\r\n width: 1150px;\r\n }\r\n .span-itzfizz {\r\n padding: 3px 9px;\r\n border: 2px solid #000;\r\n border-radius: 20px;\r\n }\r\n .design_process {\r\n border: 2px solid #222222;\r\n border-radius: 200px;\r\n width: 1355px;\r\n height: 330px;\r\n padding: 50px 0px;\r\n transform: translateX(45vw);\r\n \r\n }\r\n \r\n .design_process {\r\n overflow: hidden;\r\n text-align: center;\r\n margin: 0 5px;\r\n background: transparent;\r\n font-weight: 900;\r\n }\r\n \r\n .design_process:before {\r\n position: absolute;\r\n content: \"\";\r\n left: 0;\r\n bottom: 0;\r\n height: 4px;\r\n width: 100%;\r\n border-bottom: 4px solid transparent;\r\n border-left: 4px solid transparent;\r\n box-sizing: border-box;\r\n transform: translateX(100%);\r\n border-radius: 300px;\r\n }\r\n \r\n .design_process:after {\r\n position: absolute;\r\n content: \"\";\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n border-top: 4px solid transparent;\r\n border-right: 4px solid transparent;\r\n box-sizing: border-box;\r\n transform: translateX(-100%);\r\n border-radius: 200px;\r\n }\r\n \r\n .design_process:hover {\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\r\n border: none;\r\n }\r\n \r\n .design_process:hover:before {\r\n border-color: #ff9e44;\r\n height: 100%;\r\n transform: translateX(0);\r\n transition: 0.3s transform linear, 0.3s height linear 0.3s;\r\n }\r\n \r\n .design_process:hover:after {\r\n border-color: #ff9e44;\r\n height: 100%;\r\n transform: translateX(0);\r\n transition: 0.3s transform linear, 0.3s height linear 0.5s;\r\n }\r\n \r\n .designanimation {\r\n width: 900px;\r\n font-size: 98px;\r\n margin-bottom: 40px;\r\n color: #222222;\r\n }\r\n .spacer p {\r\n width: 650px;\r\n font-size: 32px;\r\n color: #000000;\r\n margin-bottom: 40px;\r\n }\r\n \r\n .serial-num-black,\r\n .serial-num-orange {\r\n color: #222;\r\n font-family: \"Hempa Sans\";\r\n font-size: 128px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 145px; \/* 113.281% *\/\r\n letter-spacing: 2.56px;\r\n text-transform: capitalize;\r\n }\r\n .design_process-sect-1 {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n .design-process-heading {\r\n padding-left: 25px;\r\n color: #222;\r\n font-family: \"Hempa Sans\";\r\n font-size: 48px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 28px; \/* 58.333% *\/\r\n letter-spacing: 0.96px;\r\n text-transform: capitalize;\r\n }\r\n .design_process-sect-2 {\r\n width: 337px;\r\n }\r\n .design_process-sect-2 span {\r\n color: #222;\r\n font-family: \"Hempa Sans\";\r\n font-size: 20px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: 5vh; \/* 140% *\/\r\n letter-spacing: 0.4px;\r\n }\r\n .design_process {\r\n display: flex;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n }\r\n \r\n \r\n .sect-5-left-asset {\r\n position: absolute;\r\n left: -9%;\r\n top: -1%;\r\n width: 350px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-5-right-asset {\r\n position: absolute;\r\n right: 12%;\r\n top: 2%;\r\n width: 350px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-5-left-arrow {\r\n position: absolute;\r\n top: 540px;\r\n left: 38%;\r\n width: 57px;\r\n }\r\n .sect-5-right-arrow {\r\n position: absolute;\r\n top: 540px;\r\n right: 38%;\r\n width: 57px;\r\n }\r\n .sect-5-underline {\r\n position: absolute;\r\n top: 22vw;\r\n right: 19%;\r\n width: 30vw;\r\n }\r\n \r\n \/* section 6 *\/\r\n \r\n .section-6 {\r\n background-color: #ffe0aa;\r\n width: 100vw;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n padding-bottom: 200px;\r\n position: relative;\r\n }\r\n .content-sect-6 h2 {\r\n margin-top: 25px;\r\n margin-bottom: 25px;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 128px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 144px; \/* 112.5% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n width: 1101px;\r\n }\r\n .content-sect-6 p {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 40px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 54px; \/* 135% *\/\r\n width: 970px;\r\n }\r\n .wildleaf {\r\n width: 80vw;\r\n padding: 100px 0 0 0;\r\n }\r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 80px;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 84px; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n }\r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 2vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n width: 50vw;\r\n line-height: 51px;\r\n }\r\n .sect-6-left-asset {\r\n position: absolute;\r\n top: 105px;\r\n left: -170px;\r\n width: 600px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-6-right-asset {\r\n position: absolute;\r\n top: 145px;\r\n right: -140px;\r\n width: 400px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n \r\n .sect-6-left-arrow {\r\n position: absolute;\r\n top: 670px;\r\n left: 570px;\r\n width: 57px;\r\n }\r\n .sect-6-right-arrow {\r\n position: absolute;\r\n top: 670px;\r\n right: 570px;\r\n width: 57px;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 190px;\r\n top: 70px;\r\n left: 44%;\r\n }\r\n .portfolio-tags{\r\n width: 20vw;\r\n display: grid;\r\n grid-template-columns: repeat(3, auto);\r\n grid-gap: 10px; \r\n margin-bottom: 30px;\r\n }\r\n .portfolio-tags div{ \r\n overflow: hidden;\r\n padding: 10px;\r\n white-space: nowrap;\r\n border-radius: 5px;\r\n border: 2px solid black;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .portfolio-tags div h5{\r\n margin: 0;\r\n text-align: center;\r\n transition: all 0.3s ease-in-out;\r\n font-weight: 400;\r\n font-size: 15px;\r\n }\r\n \/* mobile - tab \/\/ section 6 *\/\r\n .carousel-container {\r\n margin-top: 100px;\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \r\n padding-left: 200px;\r\n \r\n > button {\r\n all: unset;\r\n }\r\n }\r\n \r\n .carousel-heading-container {\r\n height: auto;\r\n overflow: hidden;\r\n }\r\n \r\n .carousel-heading {\r\n transition: all 0.3s ease-in-out;\r\n }\r\n \r\n .mobile-carousel {\r\n cursor: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/curse2.svg\"),\r\n auto;\r\n background-color: #000;\r\n border: 3px solid black;\r\n border-radius: 50px;\r\n filter: drop-shadow(0.5vw 0.5vw black);\r\n width: 350px;\r\n height: auto;\r\n overflow: hidden;\r\n \r\n > img {\r\n transition: all 0.3s ease-in-out;\r\n width: 100%;\r\n }\r\n }\r\n .tablet-carousel {\r\n cursor: url(\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/curse2.svg\"),\r\n auto;\r\n background-color: #000;\r\n border: 3px solid black;\r\n border-radius: 60px 0 0 60px;\r\n filter: drop-shadow(0.5vw 0.5vw black);\r\n width: 800px;\r\n height: auto;\r\n overflow: hidden;\r\n left: 200px;\r\n \r\n > img {\r\n transition: all 0.3s ease-in-out;\r\n width: 100%;\r\n }\r\n }\r\n \r\n \/* Section 7 *\/\r\n \r\n .section-7 {\r\n padding: 0;\r\n margin: 0;\r\n border: none;\r\n color: aliceblue;\r\n display: flex;\r\n align-items: center;\r\n min-height: 100vh;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n .bg {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n background-color: #ff9e44;\r\n min-height: 100vh;\r\n z-index: 0;\r\n }\r\n \r\n .wrapper {\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n background-color: #ff9e44;\r\n position: absolute;\r\n }\r\n \r\n .quote-row {\r\n margin: auto;\r\n width: 100%;\r\n max-width: 1440px;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n justify-content: center;\r\n }\r\n .quote-column {\r\n z-index: 51;\r\n position: absolute;\r\n padding: 0 !important;\r\n overflow: hidden;\r\n transition-property: top, left, right, bottom;\r\n background: transparent;\r\n box-shadow: none;\r\n margin-top: 150px;\r\n \/* transition: .4s; *\/\r\n }\r\n .col-active {\r\n width: 33.33% !important;\r\n transform: translate(-50%, -50%) !important;\r\n top: 50% !important;\r\n left: 50% !important;\r\n bottom: unset !important;\r\n background: rgba(255, 255, 255, 0.375);\r\n box-shadow: 5px 5px 0px #000;\r\n border-radius: 1.3rem;\r\n border: 1px solid rgba(255, 255, 255, 0.37);\r\n overflow: hidden;\r\n z-index: 1;\r\n }\r\n \r\n .col-inner {\r\n position: relative;\r\n width: 100%;\r\n max-width: 130px;\r\n align-items: stretch;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n .col-active .col-inner {\r\n max-width: 100%;\r\n }\r\n \r\n .author-meta {\r\n width: 100%;\r\n position: relative;\r\n border: none;\r\n }\r\n .col-active .author-meta {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n border-bottom: 1px solid #ff9e44;\r\n }\r\n \r\n .image-cover {\r\n position: absolute;\r\n width: 100%;\r\n float: left;\r\n aspect-ratio: 1\/1;\r\n overflow: hidden;\r\n border-radius: 100%;\r\n z-index: 1;\r\n position: relative;\r\n cursor: pointer;\r\n border-right: 5px solid #000;\r\n border-bottom: 5px solid #000;\r\n }\r\n \r\n .col-active .image-cover {\r\n position: relative;\r\n width: 30%;\r\n max-width: 140px;\r\n float: left;\r\n aspect-ratio: 1\/1;\r\n overflow: hidden;\r\n border-radius: 1.3rem 0rem 1.3rem 0rem;\r\n z-index: 1;\r\n }\r\n \r\n .author-info {\r\n width: 70%;\r\n float: left;\r\n padding: 10px;\r\n overflow: hidden;\r\n visibility: hidden;\r\n }\r\n .col-active .author-info {\r\n visibility: visible;\r\n }\r\n \r\n .author-info .author-name,\r\n .author-info .person-title {\r\n transform: translate(-100%, 0%);\r\n transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);\r\n }\r\n \r\n .show .author-info .author-name {\r\n transform: translate(0%, 0%);\r\n }\r\n .show .author-info .person-title {\r\n transform: translate(0%, 0%);\r\n transition-delay: 0.2s;\r\n }\r\n \r\n .person-name {\r\n font-family: \"Syne\", sans-serif;\r\n font-size: 21.7px;\r\n color: #000;\r\n margin: 0;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .person-title {\r\n font-family: \"Inter\", sans-serif;\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: #000;\r\n margin: 0;\r\n }\r\n \r\n .quote-wrapper {\r\n position: relative;\r\n width: 100%;\r\n margin: auto;\r\n color: #ff9e44;\r\n padding: 20px 15px;\r\n text-align: center;\r\n overflow: hidden;\r\n visibility: hidden;\r\n z-index: 0;\r\n }\r\n .col-active .quote-wrapper {\r\n visibility: visible;\r\n }\r\n \r\n .box-image-inner img {\r\n object-fit: cover;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n \r\n .box-text-inner {\r\n width: 400px;\r\n margin: auto;\r\n color: #000;\r\n }\r\n \r\n .quote-wrapper .quote-symbol {\r\n font-size: 14vw;\r\n line-height: 1em;\r\n position: absolute;\r\n top: 0;\r\n width: 50%;\r\n height: 100%;\r\n overflow: hidden;\r\n background-color: #222;\r\n z-index: 1;\r\n transition: 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);\r\n }\r\n \r\n .quote-wrapper .quote-symbol:first-child {\r\n left: 0%;\r\n text-align: right;\r\n }\r\n \r\n .quote-wrapper .quote-symbol:last-child {\r\n right: 0%;\r\n text-align: left;\r\n }\r\n \r\n .show .quote-wrapper .quote-symbol:first-child {\r\n left: -50%;\r\n }\r\n \r\n .show .quote-wrapper .quote-symbol:last-child {\r\n right: -50%;\r\n }\r\n \r\n \/*--Arrow--*\/\r\n .arrows-wrap {\r\n position: unset;\r\n }\r\n \r\n .arrow {\r\n position: absolute;\r\n width: 30px;\r\n height: 30px;\r\n top: 80%;\r\n background-color: #494949;\r\n cursor: pointer;\r\n }\r\n \r\n .left-arrow {\r\n float: left;\r\n left: 30px;\r\n clip-path: polygon(\r\n 40% 0%,\r\n 40% 20%,\r\n 100% 33%,\r\n 100% 67%,\r\n 40% 80%,\r\n 40% 100%,\r\n 0% 50%\r\n );\r\n }\r\n \r\n .right-arrow {\r\n float: right;\r\n right: 30px;\r\n clip-path: polygon(\r\n 0 33%,\r\n 60% 20%,\r\n 60% 0%,\r\n 100% 50%,\r\n 60% 100%,\r\n 60% 80%,\r\n 0 67%\r\n );\r\n }\r\n \r\n @media (min-width: 640px) {\r\n .col-active {\r\n width: 75% !important;\r\n height: unset !important;\r\n transform: translate(-50%, -50%) !important;\r\n top: 50% !important;\r\n left: 50% !important;\r\n }\r\n }\r\n \r\n @media (min-width: 840px) {\r\n .col-active {\r\n width: 50% !important;\r\n }\r\n }\r\n \r\n @media (min-width: 1080px) {\r\n .col-active {\r\n width: 33.33% !important;\r\n }\r\n }\r\n \r\n @media (max-width: 640px) {\r\n .quote-column {\r\n width: 90% !important;\r\n top: 50%;\r\n position: absolute;\r\n opacity: 0;\r\n transform: translate(-50%, -50%) !important;\r\n left: 50%;\r\n height: auto !important;\r\n z-index: 51;\r\n transition: 0.5s all;\r\n }\r\n \r\n .col-active {\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n \r\n .col-inner {\r\n max-width: 100%;\r\n }\r\n .author-meta {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.432);\r\n }\r\n .image-cover {\r\n position: relative;\r\n width: 30%;\r\n max-width: 140px;\r\n float: left;\r\n aspect-ratio: 1\/1;\r\n overflow: hidden;\r\n border-radius: 1.3rem 0rem 1.3rem 0rem;\r\n z-index: 1;\r\n }\r\n .quote-wrapper {\r\n visibility: visible;\r\n }\r\n \r\n .quote-wrapper .quote-symbol {\r\n font-size: 34vh;\r\n }\r\n }\r\n .sect-7-left-asset {\r\n position: absolute;\r\n top: 13%;\r\n left: 0;\r\n width: 460px;\r\n z-index: 2;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-7-right-asset {\r\n position: absolute;\r\n top: 0%;\r\n right: 0;\r\n width: 520px;\r\n z-index: 2;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .sect-7-content-parent {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n }\r\n .sect-7-content-parent h3 {\r\n margin-right: -1508px;\r\n font-family: \"Hempa Sans\";\r\n margin-top: -458px;\r\n position: relative;\r\n color: #fff;\r\n font-size: 24px;\r\n font-weight: 600;\r\n }\r\n .hell-heading {\r\n margin-top: -258px;\r\n margin-left: 510px;\r\n position: relative;\r\n font-weight: 400;\r\n font-family: \"Hempa Sans\";\r\n width: 500px;\r\n text-align: center;\r\n color: #fff;\r\n font-size: 48px;\r\n line-height: 54px; \/* 112.5% *\/\r\n letter-spacing: 0.96px;\r\n }\r\n .sect-7-circle {\r\n position: absolute;\r\n top: 120px;\r\n left: 680px;\r\n z-index: 1;\r\n width: 150px;\r\n }\r\n .sect-7-start-circle {\r\n position: absolute;\r\n top: -185px;\r\n left: 38%;\r\n z-index: 1;\r\n width: 476px;\r\n height: 169px;\r\n }\r\n \r\n \/* Section 8 *\/\r\n \r\n .faqsection {\r\n display: flex;\r\n \/* width: 100vw; *\/\r\n height: 100vh;\r\n font-family: \"Hempa Sans\";\r\n font-weight: 800;\r\n }\r\n \r\n .faqsection section {\r\n display: flex;\r\n cursor: pointer;\r\n overflow: hidden;\r\n }\r\n \r\n .faqsection .title {\r\n z-index: 10;\r\n width: 100px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .faqsection .results,\r\n .faqsection .growth {\r\n background-color: #ffc869;\r\n }\r\n \r\n .faqsection .analysis {\r\n background-color: #ff9e44;\r\n }\r\n \r\n .faqsection .title > h2 {\r\n font-size: 40px;\r\n font-weight: normal;\r\n writing-mode: vertical-rl;\r\n padding: 18px;\r\n }\r\n \r\n .faqsection section[data-status=\"open\"] {\r\n cursor: default;\r\n flex: 9;\r\n }\r\n .faqsection .content-sect-8 {\r\n position: relative;\r\n flex: auto;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n .faqquestion {\r\n position: absolute;\r\n top: 0;\r\n left: 180px;\r\n width: 120px;\r\n transition: all cubic-bezier(0.19, 1, 0.2, 1) 4000ms;\r\n \r\n }\r\n .faqsection .contentcontainer {\r\n text-align: center;\r\n width: 80%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n \r\n > p {\r\n text-align: left;\r\n }\r\n }\r\n .contentcontainer h3 {\r\n margin-bottom: 15px;\r\n position: relative;\r\n \r\n > img {\r\n position: absolute;\r\n top: -5px;\r\n left: 100px;\r\n width: 100px;\r\n }\r\n }\r\n .contentcontainer h2 {\r\n position: relative;\r\n font-size: 40px;\r\n font-weight: 700;\r\n font-family: \"Hempa Sans\";\r\n \r\n > img {\r\n width: 310px;\r\n top: 35px;\r\n left: 0px;\r\n position: absolute;\r\n }\r\n }\r\n \r\n .faqsection section[data-status=\"close\"] > .content-sect-8 {\r\n overflow: hidden;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n padding: 0;\r\n margin: 0;\r\n gap: 0;\r\n font-size: 0;\r\n }\r\n .orange-faq {\r\n color: #ff9e44;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n }\r\n .content-sect-8-para {\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 400;\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n line-height: normal;\r\n }\r\n \r\n .horizontal-div {\r\n border-top: 3px dashed #000;\r\n padding: 25px;\r\n \/* width: 100%; *\/\r\n width: 65vw;\r\n }\r\n .horizontal-div h4 {\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 700;\r\n line-height: normal;\r\n width: 65vw;\r\n \r\n }\r\n .horizontal-div p {\r\n font-size: 24px;\r\n font-weight: 400;\r\n width: 65vw;\r\n \r\n }\r\n .btn-horizontal {\r\n border-radius: 30px;\r\n background: #ffc869;\r\n box-shadow: 6px 5px 0px 0px #000, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\r\n width: 260px;\r\n height: 53px;\r\n flex-shrink: 0;\r\n color: #000;\r\n text-align: center;\r\n font-family: \"Hempa Sans\";\r\n font-size: 24px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n margin-top: 4vw;\r\n \/* margin-left: -32.5vw; *\/\r\n }\r\n .faq-div {\r\n padding: 25px;\r\n width: 100%;\r\n }\r\n\r\n .faq-quest{\r\n font-weight: 800;\r\n \r\n\r\n }\r\n \r\n \r\n \/* @keyframes designprocess {\r\n to {\r\n transform: translateX(0);\r\n }\r\n } *\/\r\n \r\n \r\n \/* Responsive *\/\r\n \r\n @media screen and (min-device-width: 250px)and (max-device-width: 767px){\r\n \r\n .individualchar h2{\r\n font-size: 20vw;\r\n \r\n }\r\n .anything {\r\n padding-left: 0px;\r\n }\r\n .windmill{\r\n width: 70px;\r\n }\r\n .wheel {\r\n top: 34%;\r\n min-width: 10vw !important;\r\n }\r\n .bolt{\r\n min-width: 20vw !important;\r\n top: 5%;\r\n left: 5%;\r\n }\r\n \r\n \/* Section 2 *\/\r\n \r\n \r\n .content-section-2 {\r\n padding-right: 5vw;\r\n height: 100vh;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group%201000002715%20(2).png');\r\n background-size: contain;\r\n }\r\n .content-sect-2 {\r\n width: 90vw;\r\n }\r\n .content-sect-2 h2{\r\n font-size: 8.3vw !important;\r\n line-height: 150%;\r\n width: 90%;\r\n margin-left: 5.5%;\r\n }\r\n .sect-2-para-1{\r\n font-size: 4vw !important;\r\n margin-top: 5vh;\r\n width: 90vw;\r\n }\r\n .sect-2-para-2{\r\n margin-top: 3vh;\r\n font-size: 4vw !important;\r\n line-height: normal !important;\r\n \r\n }\r\n .btn-sect-2{\r\n line-height: 3vh;\r\n padding: 2% 4%;\r\n font-size: 4vw;\r\n background-color: #ff9e44;\r\n color: #000;\r\n }\r\n \r\n .sect-2-curly-underline{\r\n width: 24vw;\r\n margin-top: -4%;\r\n margin-left: -2%;\r\n }\r\n .sect-2-underline{\r\n width: 71vw;\r\n margin-top: 21%;\r\n margin-left: -35%;\r\n }\r\n .sect-2-orange-arrow{\r\n margin-top: 25%;\r\n width: 7vw;\r\n margin-left: 23%;\r\n }\r\n .overlay-img-sect-2-1{\r\n width: 20vw;\r\n }\r\n .overlay-img-sect-2-2{\r\n width: 25vw;\r\n top: 85%;\r\n \r\n }\r\n .sect-2-arrow {\r\n margin-top: -10%;\r\n width: 28vw;\r\n margin-left: -18%;\r\n rotate: 45deg;\r\n }\r\n \r\n \/* Section 3 *\/\r\n \r\n .section-3 {\r\n width: 100vw;\r\n height: 60vh; \r\n \/* padding-bottom: 30vh; *\/\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: -1vh;\r\n left: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: -1vh;\r\n right: -9vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .content-section-3 {\r\n width: 80vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 h3{\r\n padding-top: 5vh;\r\n width: 50vw;\r\n font-size: 4vw;\r\n height: 5vh;\r\n }\r\n .content-sect-3 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 6vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1{\r\n font-size: 8vw;\r\n line-height: normal;\r\n margin-bottom: 20px;\r\n \r\n }\r\n .content-sect-3 p{\r\n font-size: 4vw;\r\n margin-bottom: 15%;\r\n width: 80vw;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-3{\r\n font-size: 4vw;\r\n padding: 2% 7%;\r\n }\r\n .sect-3-left{\r\n width: 21vw;\r\n top: 22%;\r\n left: -6%;\r\n }\r\n .sect-3-right{\r\n width: 23vw;\r\n right: 0%;\r\n \r\n }\r\n \r\n \r\n \/* Section 4 *\/\r\n .stack-area{\r\n height: 300vh;\r\n contain: paint;\r\n \r\n }\r\n .individual-card {\r\n width: 270px;\r\n height: 340px;\r\n object-fit: cover;\r\n }\r\n \r\n .content {\r\n font-size: 2.58vw;\r\n font-weight: 500;\r\n line-height: normal;\r\n margin-left: -4vw;\r\n letter-spacing: 0.2px;\r\n flex-wrap: wrap;\r\n margin-top:-5vh;\r\n }\r\n .vid-sect{\r\n margin-top: -4vh;\r\n }\r\n .spacer {\r\n margin-top: 0px;\r\n padding-top: 30px;\r\n padding-bottom: 0px;\r\n }\r\n \r\n \/* .section-4{\r\n padding-top: 55vh;\r\n } *\/\r\n \r\n \/* Section 5 *\/\r\n \r\n .content-sect-4 h3 {\r\n width: 50vw;\r\n font-size: 4vw;\r\n \r\n }\r\n .content-sect-4 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 2vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .designanimation-sect-5{\r\n font-size: 8vw;\r\n width: 90vw;\r\n \r\n line-height: normal; \r\n }\r\n .spacer p{\r\n font-size: 4vw;\r\n margin-bottom: 6%;\r\n margin-top: 5%;\r\n width: 80vw;\r\n line-height: normal;\r\n }\r\n \r\n .sect-5-circle{\r\n width: 90px;\r\n right: 38%;\r\n top: 1.5%;\r\n visibility: hidden;\r\n }\r\n .sect-5-left-asset{\r\n width: 20vw;\r\n top: 0;\r\n }\r\n .sect-5-right-asset{\r\n width: 30vw;\r\n right: 0;\r\n top: 0;\r\n \r\n }\r\n .sect-5-underline{\r\n top: 9.6%;\r\n right: 20vw;\r\n width: 200px;\r\n }\r\n .serial-num-black,\r\n .serial-num-orange {\r\n font-size: 6vw;\r\n \r\n \r\n }\r\n .design_process{\r\n width: 99vw;\r\n height: 15vh;\r\n }\r\n .design-process-heading{\r\n font-size: 4vw;\r\n \r\n }\r\n .design_process-sect-2{\r\n width: 40vw;\r\n \r\n }\r\n .design_process-sect-2 span{\r\n font-size: 2vw;\r\n line-height: normal;\r\n \r\n }\r\n .design_process {\r\n transform: translateX(45vw);\r\n }\r\n .designsection{\r\n overflow-x: hidden;\r\n padding-top:0px;\r\n gap: 20px;\r\n }\r\n .design_process:after{\r\n border-top: 2px solid transparent;\r\n border-right: 2px solid transparent;\r\n }\r\n .design_process::before{\r\n border-bottom: 2px solid transparent;\r\n border-left: 2px solid transparent;\r\n }\r\n \r\n \r\n \/* Section 6 *\/\r\n \r\n .section-6{\r\n padding-bottom: 10vh;\r\n }\r\n \r\n .content-sect-6 h2{\r\n font-size: 8vw;\r\n font-weight: 700;\r\n width: 90vw;\r\n line-height: normal;\r\n z-index: 2; \r\n margin:0px;\r\n }\r\n .content-sect-6 p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n width: 90vw;\r\n line-height: normal;\r\n }\r\n .sect-6-left-asset{\r\n left: -10%;\r\n top: 11%;\r\n width: 33vw;\r\n }\r\n .sect-6-right-asset{\r\n width: 20vw;\r\n right: 0%;\r\n top: 0;\r\n \r\n }\r\n .sect-6-left-arrow{\r\n top: 820px;\r\n left: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-right-arrow{\r\n top: 820px;\r\n right: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 100px;\r\n top: 3.57%;\r\n left: 37%;\r\n }\r\n \r\n \/* Company names *\/\r\n \r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 11vw;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 104px; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n }\r\n .portfolio-tags{\r\n width: 80vw;\r\n }\r\n .wildleaf{\r\n padding: 0px 0 0 0\r\n }\r\n \r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n width: 85vw;\r\n font-size: 4vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: normal;\r\n text-align: start;\r\n }\r\n .carousel-container{\r\n padding-left: 0%;\r\n margin-top: 25px;\r\n \r\n flex-direction: column;\r\n \r\n }\r\n .mobile-carousel{\r\n width: 350px;\r\n }\r\n .tablet-carousel{\r\n width: 97.5%;\r\n margin-left: 2%;\r\n margin-top: 10%;\r\n right: 0;\r\n \r\n }\r\n \r\n \/* .section-7 *\/\r\n \r\n .quote-column{\r\n margin-top: 100px;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n \r\n .sect-7-content-parent h3{\r\n \/* margin-right: -50vw; *\/\r\n margin-right: -100vw;\r\n font-family: \"Hempa Sans\";\r\n \/* margin-top: -48px; *\/\r\n z-index: 25;\r\n margin-top: -300px;\r\n position: absolute;\r\n color: #fff;\r\n font-size: 4vw;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n \r\n }\r\n .hell-heading{\r\n display: none;\r\n }\r\n .sect-7-start-circle{\r\n display: none;\r\n }\r\n \r\n \/* Section 8 *\/\r\n .faqquestion {\r\n width: 100px;\r\n left: 50px;\r\n }\r\n .contentcontainer {\r\n text-align: center;\r\n padding: 50px 0 100px 0;\r\n > p {\r\n margin-block: 25px;\r\n }\r\n }\r\n hr {\r\n margin: 20px 0;\r\n }\r\n \r\n .faqbackdrop1 {\r\n width: 200px;\r\n bottom: -50px;\r\n left: 0px;\r\n }\r\n .faqbackdrop2 {\r\n width: 150px;\r\n bottom: -50px;\r\n right: 0px;\r\n }\r\n .contentcontainer h3 {\r\n margin-top: 25px;\r\n > img{\r\n left: 85px;\r\n }\r\n }\r\n .contentcontainer h2 {\r\n font-size: 32.5px;\r\n }\r\n .horizontal-div{\r\n width: 95vw;\r\n \r\n }\r\n .horizontal-div h4{\r\n font-size: 25px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n \r\n .horizontal-div p {\r\n font-size: 24px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n .content-sect-8-para{\r\n font-size: 20px;\r\n }\r\n .para-2-faq{\r\n visibility: collapse;\r\n display: none;\r\n }\r\n .primary-heading h3 {\r\n font-size: 12px;\r\n font-weight: 300;\r\n margin-bottom: 20px;\r\n }\r\n .secondary-heading h2 {\r\n font-size: 24px;\r\n font-weight: 300;\r\n }\r\n .content-heading {\r\n width: 600px;\r\n }\r\n .content-heading h2 {\r\n font-size: 8px;\r\n }\r\n .section4-rightdivs {\r\n width: 350px;\r\n }\r\n .faqsection {\r\n flex-direction: column;\r\n height: max-content;\r\n text-align: center;\r\n }\r\n .faqsection .title {\r\n height: 8svh;\r\n width: 100vw;\r\n align-items: center;\r\n }\r\n .faqsection section {\r\n flex-direction: column;\r\n }\r\n .faqsection .title > h2 {\r\n writing-mode: horizontal-tb;\r\n padding: 0 30px;\r\n margin: 15px 0;\r\n font-size: 7vw;\r\n }\r\n .lastcontain{\r\npadding:0px;\r\n }\r\n \r\n }\r\n @media screen and (min-device-width: 768px)and (max-device-width: 1024px){\r\n \r\n .individualchar h2{\r\n font-size: 20vw;\r\n \r\n }\r\n .anything {\r\n padding-left: 0px;\r\n }\r\n .windmill{\r\n min-width: 120px;\r\n }\r\n .wheel {\r\n top: 34%;\r\n width: 20vw;\r\n }\r\n .bolt{\r\n min-width: 25vw;\r\n top: -5%;\r\n left: -20%;\r\n }\r\n \r\n \/* Section 2 *\/\r\n \r\n \r\n .content-section-2 {\r\n padding-right: 5vw;\r\n height: 100vh;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group%201000003081.png');\r\n background-size: contain;\r\n }\r\n .content-sect-2 {\r\n width: 90vw;\r\n }\r\n .content-sect-2 h2{\r\n font-size: 4.7vw !important;\r\n line-height: 195%;\r\n width: 90%;\r\n margin-left: 5.5%;\r\n }\r\n .sect-2-para-1{\r\n font-size: 4vw !important;\r\n margin-top: 5vh;\r\n width: 95vw;\r\n }\r\n .sect-2-para-2{\r\n margin-top: 3vh;\r\n font-size: 4vw !important;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-2{\r\n line-height: 3vh;\r\n padding: 2% 4%;\r\n font-size: 4vw;\r\n \r\n }\r\n \r\n .sect-2-curly-underline{\r\n width: 14vw;\r\n margin-top: -3%;\r\n margin-left: -1%;\r\n }\r\n .sect-2-underline{\r\n width: 50vw;\r\n margin-top: 7%;\r\n margin-left: -10%;\r\n }\r\n .sect-2-orange-arrow{\r\n margin-top: 10.5%;\r\n width: 6vw;\r\n margin-left: 18%;\r\n }\r\n .overlay-img-sect-2-1{\r\n width: 20vw;\r\n }\r\n .overlay-img-sect-2-2{\r\n width: 25vw;\r\n top: 85%;\r\n \r\n }\r\n .sect-2-arrow {\r\n margin-top: -10%;\r\n width: 28vw;\r\n margin-left: -20%;\r\n rotate: 45deg;\r\n }\r\n \r\n \/* Section 3 *\/\r\n \r\n .section-3 {\r\n width: 100vw;\r\n height: 80vh; \r\n \/* padding-bottom: 30vh; *\/\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0;\r\n left: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 0;\r\n right: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .content-section-3 {\r\n width: 80vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 h3{\r\n padding-top: 5vh;\r\n width: 50vw;\r\n font-size: 4vw;\r\n height: 8vh;\r\n }\r\n .content-sect-3 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 6vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1{\r\n font-size: 8vw;\r\n line-height: normal; \r\n margin-bottom: 20px;\r\n \r\n }\r\n .content-sect-3 p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n width: 80vw;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-3{\r\n font-size: 4vw;\r\n padding: 2% 7%;\r\n }\r\n .sect-3-left{\r\n width: 25vw;\r\n top: 62%;\r\n }\r\n .sect-3-right{\r\n width: 25vw;\r\n right: 0%;\r\n \r\n }\r\n \r\n \/* Section 4 *\/\r\n .stack-area{\r\n height: 300vh;\r\n contain: paint;\r\n \r\n }\r\n .individual-card {\r\n width: 500px;\r\n height: 600px;\r\n object-fit: contain;\r\n }\r\n \r\n .content {\r\n font-size: 2.25vw;\r\n font-weight: 500;\r\n line-height: 3vh;\r\n margin-left: 0;\r\n letter-spacing: 0.2px;\r\n flex-wrap: wrap;\r\n \/*margin-top: -vh;*\/\r\n }\r\n \/* Section 5 *\/\r\n \r\n .content-sect-4 h3 {\r\n width: 50vw;\r\n font-size: 4vw;\r\n \r\n }\r\n .content-sect-4 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 2vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .designanimation-sect-5{\r\n font-size: 8vw;\r\n width: 90vw;\r\n \r\n line-height: normal; \r\n }\r\n .spacer p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n margin-top: 5%;\r\n width: 80vw;\r\n line-height: normal;\r\n }\r\n \r\n .sect-5-circle{\r\n width: 90px;\r\n right: 38%;\r\n top: 1.5%;\r\n visibility: hidden;\r\n }\r\n .sect-5-left-asset{\r\n width: 20vw;\r\n }\r\n .sect-5-right-asset{\r\n width: 30vw;\r\n right: 0;\r\n top: 0;\r\n \r\n }\r\n .sect-5-underline{\r\n top: 10%;\r\n right: 20vw;\r\n width: 200px;\r\n }\r\n .serial-num-black,\r\n .serial-num-orange {\r\n font-size: 6vw;\r\n \r\n \r\n }\r\n .design_process{\r\n width: 99vw;\r\n height: 25vh;\r\n }\r\n .design-process-heading{\r\n font-size: 4vw;\r\n \r\n }\r\n .design_process-sect-2{\r\n width: 40vw;\r\n \r\n }\r\n .design_process-sect-2 span{\r\n font-size: 2vw;\r\n line-height: normal;\r\n \r\n }\r\n .design_process {\r\n transform: translateX(45vw);\r\n }\r\n .designsection{\r\n overflow-x: hidden;\r\n padding-top: 0px;\r\n }\r\n .design_process:after{\r\n border-top: 2px solid transparent;\r\n border-right: 2px solid transparent;\r\n }\r\n .design_process::before{\r\n border-bottom: 2px solid transparent;\r\n border-left: 2px solid transparent;\r\n }\r\n \r\n \r\n \r\n \/* Section 6 *\/\r\n \r\n .content-sect-6 h2{\r\n font-size: 8vw;\r\n font-weight: 700;\r\n width: 70vw;\r\n line-height: normal;\r\n z-index: 2; \r\n margin:0;\r\n }\r\n .content-sect-6 p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n width: 90vw;\r\n line-height: normal;\r\n }\r\n .sect-6-left-asset{\r\n left: -10%;\r\n top: 10%;\r\n \r\n width: 40vw;\r\n }\r\n .sect-6-right-asset{\r\n width: 20vw;\r\n right: 0%;\r\n top: 0;\r\n \r\n }\r\n .sect-6-left-arrow{\r\n top: 820px;\r\n left: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-right-arrow{\r\n top: 820px;\r\n right: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 100px;\r\n top: 3.57%;\r\n left: 37%;\r\n }\r\n \r\n \/* Company names *\/\r\n \r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 11vw;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: 104px; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n }\r\n .wildleaf {\r\n width: 80vw;\r\n padding: 50px 0 0 0;\r\n}\r\n .portfolio-tags{\r\n width: 80vw;\r\n }\r\n \r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n width: 85vw;\r\n font-size: 4vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 51px;\r\n text-align: start;\r\n }\r\n .carousel-container{\r\n padding-left: 0%;\r\n margin-top: 50px;\r\n \r\n flex-direction: column;\r\n \r\n }\r\n .mobile-carousel{\r\n width: 350px;\r\n }\r\n .tablet-carousel{\r\n width: 97.5%;\r\n margin-left: 2%;\r\n margin-top: 10%;\r\n \r\n }\r\n \r\n \/* .section-7 *\/\r\n \r\n .quote-column{\r\n margin-top: 100px;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n \r\n .sect-7-content-parent h3{\r\n \/* margin-right: -50vw; *\/\r\n margin-right: -100vw;\r\n font-family: \"Hempa Sans\";\r\n \/* margin-top: -48px; *\/\r\n z-index: 25;\r\n margin-top: -300px;\r\n position: absolute;\r\n color: #fff;\r\n font-size: 4vw;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n \r\n }\r\n .hell-heading{\r\n display: none;\r\n }\r\n .sect-7-start-circle{\r\n display: none;\r\n }\r\n \r\n \/* Section 8 *\/\r\n .faqquestion {\r\n width: 100px;\r\n left: 50px;\r\n }\r\n .contentcontainer {\r\n text-align: center;\r\n padding: 50px 0 100px 0;\r\n > p {\r\n margin-block: 25px;\r\n }\r\n }\r\n hr {\r\n margin: 20px 0;\r\n }\r\n \r\n .faqbackdrop1 {\r\n width: 200px;\r\n bottom: -50px;\r\n left: 0px;\r\n }\r\n .faqbackdrop2 {\r\n width: 150px;\r\n bottom: -50px;\r\n right: 0px;\r\n }\r\n .contentcontainer h3 {\r\n margin-top: 25px;\r\n }\r\n .contentcontainer h2 {\r\n font-size: 39px;\r\n }\r\n .horizontal-div{\r\n width: 95vw;\r\n \r\n }\r\n .horizontal-div h4{\r\n font-size: 25px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n \r\n .horizontal-div p {\r\n font-size: 24px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n .content-sect-8-para{\r\n font-size: 20px;\r\n }\r\n .para-2-faq{\r\n visibility: collapse;\r\n display: none;\r\n }\r\n .primary-heading h3 {\r\n font-size: 12px;\r\n font-weight: 300;\r\n margin-bottom: 20px;\r\n }\r\n .secondary-heading h2 {\r\n font-size: 24px;\r\n font-weight: 300;\r\n }\r\n .content-heading {\r\n width: 600px;\r\n }\r\n .content-heading h2 {\r\n font-size: 8px;\r\n }\r\n .section4-rightdivs {\r\n width: 350px;\r\n }\r\n .faqsection {\r\n flex-direction: column;\r\n height: max-content;\r\n text-align: center;\r\n }\r\n .faqsection .title {\r\n height: 8svh;\r\n width: 100vw;\r\n align-items: center;\r\n }\r\n .faqsection section {\r\n flex-direction: column;\r\n }\r\n .faqsection .title > h2 {\r\n writing-mode: horizontal-tb;\r\n padding: 0 30px;\r\n margin: 15px 0;\r\n }\r\n \r\n }\r\n @media screen and (min-device-width: 1024px)and (max-device-width: 1300px){\r\n \r\n .individualchar h2{\r\n font-size: 15vw;\r\n \r\n }\r\n .windmill{\r\n width: 70px;\r\n }\r\n .wheel {\r\n top: 34%;\r\n width: 20vw;\r\n }\r\n .bolt{\r\n width: 25vw;\r\n top: 2px;\r\n left: 42%;\r\n }\r\n \r\n \/* Section 2 *\/\r\n \r\n \r\n .content-section-2 {\r\n padding-right: 5vw;\r\n height: 100vh;\r\n background-size: cover;\r\n }\r\n .content-sect-2 {\r\n width: 90vw;\r\n }\r\n .content-sect-2 h2{\r\n font-size: 6vw !important;\r\n line-height: 125%;\r\n width: 95vw;\r\n margin-right: 10;\r\n }\r\n .sect-2-para-1{\r\n font-size: 3vw;\r\n margin-top: 5vh;\r\n width: 95vw;\r\n }\r\n .sect-2-para-2{\r\n margin-top: 2.5vh;\r\n font-size: 2.5vw;\r\n \r\n }\r\n .btn-sect-2{\r\n line-height: 3vh;\r\n padding: 2% 4%;\r\n font-size: 3vw;\r\n \r\n }\r\n .btn-sect-2:hover{\r\n background-color: #ff9e44;\r\n }\r\n \r\n .sect-2-curly-underline{\r\n width: 16vw;\r\n margin-top: -1%;\r\n margin-left: 1%;\r\n }\r\n .sect-2-underline{\r\n width: 50vw;\r\n margin-top: 6%;\r\n margin-left: -1%;\r\n \r\n }\r\n .sect-2-orange-arrow{\r\n margin-top: 13%;\r\n width: 10vw;\r\n display: none;\r\n margin-left: 22%;\r\n }\r\n .overlay-img-sect-2-1{\r\n width: 20vw;\r\n }\r\n .overlay-img-sect-2-2{\r\n width: 25vw;\r\n top: 85%;\r\n \r\n }\r\n .sect-2-arrow {\r\n margin-top: -10%;\r\n width: 28vw;\r\n margin-left: -20%;\r\n display: none;\r\n rotate: 45deg;\r\n }\r\n \r\n \/* Section 3 *\/\r\n \r\n .section-3 {\r\n width: 100vw;\r\n height: max-content; \r\n \/* padding-bottom: 30vh; *\/\r\n }\r\n .btn-sect-3::before{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 1vh;\r\n left: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .btn-sect-3::after{\r\n content: '';\r\n position: absolute;\r\n background-image: url('https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-arrow.png');\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: contain;\r\n top: 1vh;\r\n right: -8vw;\r\n width: 6vw;\r\n height: 6vh;\r\n }\r\n .content-section-3 {\r\n width: 80vw;\r\n height: 100vh;\r\n }\r\n .content-sect-3 h3{\r\n padding-top: 5vh;\r\n width: 50vw;\r\n font-size: 2vw;\r\n height: 10vh;\r\n }\r\n .content-sect-3 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 3vw;\r\n left: 17.5vw;\r\n width: 30%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .content-sect-3 h2,.content-sect-3 h1{\r\n font-size: 6vw;\r\n line-height: normal; \r\n \r\n }\r\n .content-sect-3 p{\r\n font-size: 3vw;\r\n margin-bottom: 15%;\r\n width: 80vw;\r\n line-height: normal;\r\n \r\n }\r\n .btn-sect-3{\r\n font-size: 3vw;\r\n padding: 2% 7%;\r\n }\r\n .sect-3-left{\r\n width: 15vw;\r\n top: 22%;\r\n }\r\n .sect-3-right{\r\n width: 15vw;\r\n right: 0%;\r\n \r\n }\r\n \r\n \/* Section 4 *\/\r\n .stack-area{\r\n height: 300vh;\r\n contain: paint;\r\n \r\n }\r\n .individual-card {\r\n width: 400px;\r\n height: 500px;\r\n object-fit: contain;\r\n }\r\n \r\n .content {\r\n font-size: 1.25vw !important;\r\n font-weight: 500;\r\n line-height: 4vh;\r\n margin-left: -1vw;\r\n letter-spacing: 0.2px;\r\n flex-wrap: wrap;\r\n margin-top: -10vh;\r\n width: 350px;\r\n }\r\n .vid-sect{\r\n margin-top: -4vh;\r\n }\r\n \/* Section 5 *\/\r\n \r\n .content-sect-4 h3 {\r\n width: 50vw;\r\n font-size: 4vw;\r\n \r\n }\r\n .content-sect-4 h3::before{\r\n background-image: url(\"Vector\\ 1977.png\");\r\n background-size: contain;\r\n top: 2.7vw;\r\n left: 25%;\r\n width: 50%;\r\n height: 90%;\r\n z-index: 1;\r\n }\r\n .designanimation-sect-5{\r\n font-size: 8vw;\r\n width: 90vw;\r\n \r\n line-height: normal; \r\n }\r\n .spacer p{\r\n font-size: 4vw;\r\n margin-bottom: 10%;\r\n margin-top: 5%;\r\n width: 80vw;\r\n line-height: normal;\r\n }\r\n \r\n .sect-5-circle{\r\n width: 90px;\r\n right: 38%;\r\n top: 1.5%;\r\n visibility: hidden;\r\n }\r\n .sect-5-left-asset{\r\n width: 20vw;\r\n }\r\n .sect-5-right-asset{\r\n width: 30vw;\r\n right: 0;\r\n top: 0;\r\n \r\n }\r\n .sect-5-underline{\r\n top: 10%;\r\n right: 20vw;\r\n width: 200px;\r\n }\r\n .serial-num-black,\r\n .serial-num-orange {\r\n font-size: 6vw;\r\n \r\n \r\n }\r\n .design_process{\r\n width: 99vw;\r\n height: 25vh;\r\n }\r\n .design-process-heading{\r\n font-size: 4vw;\r\n \r\n }\r\n .design_process-sect-2{\r\n width: 40vw;\r\n \r\n }\r\n .design_process-sect-2 span{\r\n font-size: 2vw;\r\n line-height: normal;\r\n \r\n }\r\n .design_process {\r\n transform: translateX(45vw);\r\n }\r\n .designsection{\r\n overflow-x: hidden;\r\n \r\n }\r\n .design_process:after{\r\n border-top: 2px solid transparent;\r\n border-right: 2px solid transparent;\r\n }\r\n .design_process::before{\r\n border-bottom: 2px solid transparent;\r\n border-left: 2px solid transparent;\r\n }\r\n \r\n \r\n \r\n \/* Section 6 *\/\r\n \r\n .content-sect-6 h2{\r\n font-size: 9vw;\r\n font-weight: 700;\r\n width: 90vw;\r\n line-height: normal;\r\n z-index: 2; \r\n }\r\n .content-sect-6 p{\r\n font-size: 5vw;\r\n margin-bottom: 15%;\r\n width: 90vw;\r\n line-height: normal;\r\n }\r\n .sect-6-left-asset{\r\n left: -10%;\r\n top: 20%;\r\n \r\n width: 40vw;\r\n }\r\n .sect-6-right-asset{\r\n width: 30vw;\r\n right: 0%;\r\n \r\n }\r\n .sect-6-left-arrow{\r\n top: 820px;\r\n left: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-right-arrow{\r\n top: 820px;\r\n right: 20%;\r\n width: 10vw;\r\n }\r\n .sect-6-circle {\r\n position: absolute;\r\n width: 100px;\r\n top: 3.57%;\r\n left: 37%;\r\n }\r\n \r\n \/* Company names *\/\r\n \r\n .wildleaf h2 {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n font-size: 11vw;\r\n font-style: normal;\r\n font-weight: 500;\r\n line-height: normal; \/* 105% *\/\r\n letter-spacing: 2px;\r\n text-transform: capitalize;\r\n margin-bottom: 2%;\r\n }\r\n .portfolio-tags{\r\n width: 80vw;\r\n }\r\n .portfolio-tags div h5{\r\n font-size: 2.5vw;\r\n }\r\n .wildleaf p {\r\n color: #000;\r\n font-family: \"Hempa Sans\";\r\n width: 80vw;\r\n font-size: 3vw;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: normal;\r\n text-align: start;\r\n }\r\n .carousel-container{\r\n padding-left: 0%;\r\n margin-top: 50px;\r\n \r\n flex-direction: column;\r\n \r\n }\r\n .mobile-carousel{\r\n width: 350px;\r\n }\r\n .tablet-carousel{\r\n width: 97.5%;\r\n margin-left: 2%;\r\n margin-top: 10%;\r\n \r\n }\r\n \r\n \/* .section-7 *\/\r\n \r\n .quote-column{\r\n margin-top: 100px;\r\n }\r\n .section-7{\r\n display: none;\r\n visibility: collapse !important;\r\n }\r\n \r\n .sect-7-content-parent h3{\r\n \/* margin-right: -50vw; *\/\r\n margin-right: -100vw;\r\n font-family: \"Hempa Sans\";\r\n \/* margin-top: -48px; *\/\r\n z-index: 25;\r\n margin-top: -300px;\r\n position: absolute;\r\n color: #fff;\r\n font-size: 4vw;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n \r\n }\r\n .hell-heading{\r\n display: none;\r\n }\r\n .sect-7-start-circle{\r\n display: none;\r\n }\r\n \r\n \/* Section 8 *\/\r\n .faqquestion {\r\n width: 100px;\r\n left: 50px;\r\n }\r\n .contentcontainer {\r\n text-align: center;\r\n padding: 50px 0 100px 0;\r\n > p {\r\n margin-block: 25px;\r\n }\r\n }\r\n hr {\r\n margin: 20px 0;\r\n }\r\n \r\n .faqbackdrop1 {\r\n width: 200px;\r\n bottom: -50px;\r\n left: 0px;\r\n }\r\n .faqbackdrop2 {\r\n width: 150px;\r\n bottom: -50px;\r\n right: 0px;\r\n }\r\n .contentcontainer h3 {\r\n margin-top: 25px;\r\n }\r\n .contentcontainer h2 {\r\n font-size: 39px;\r\n }\r\n .horizontal-div{\r\n width: 95vw;\r\n \r\n }\r\n .horizontal-div h4{\r\n font-size: 25px;\r\n text-align: start;\r\n width: 65vw;\r\n }\r\n \r\n .horizontal-div p {\r\n font-size: 24px;\r\n text-align: start;\r\n width: 65vw;\r\n \r\n }\r\n .content-sect-8-para{\r\n font-size: 30px;\r\n }\r\n .para-2-faq{\r\n visibility: collapse;\r\n display: none;\r\n }\r\n .primary-heading h3 {\r\n font-size: 12px;\r\n font-weight: 300;\r\n margin-bottom: 20px;\r\n }\r\n .secondary-heading h2 {\r\n font-size: 24px;\r\n font-weight: 300;\r\n }\r\n .content-heading {\r\n width: 600px;\r\n }\r\n .content-heading h2 {\r\n font-size: 8px;\r\n }\r\n .section4-rightdivs {\r\n width: 350px;\r\n }\r\n .faqsection {\r\n flex-direction: column;\r\n height: max-content;\r\n text-align: center;\r\n }\r\n .faqsection .title {\r\n height: 8svh;\r\n width: 100vw;\r\n align-items: center;\r\n }\r\n .faqsection section {\r\n flex-direction: column;\r\n }\r\n .faqsection .title > h2 {\r\n writing-mode: horizontal-tb;\r\n padding: 0 30px;\r\n font-size: 2vw;\r\n margin: 15px 0;\r\n }\r\n \r\n }\r\n <\/style> \r\n \r\n \r\n \r\n <div class=\"individualchar\">\r\n <h2>\r\n <span class=\"A\">D<\/span><span class=\"n\"><img decoding=\"async\" class=\"windmill\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/Group%201000002565.png\"\/>e<\/span><span class=\"i\">s<\/span\r\n ><span class=\"m\">i<\/span><svg class=\"wheel\" viewBox=\"0 0 157 156\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" aria-hidden=\"true\" style=\"translate: none; rotate: none; scale: none; transform: rotate(360deg);\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M82.2214 104.04L105.483 143.586C108.242 148.276 114.274 149.852 118.974 147.112V147.112C123.675 144.371 125.275 138.345 122.552 133.634L99.5971 93.9091L144.009 105.424C149.276 106.79 154.656 103.639 156.042 98.3773V98.3773C157.428 93.1154 154.298 87.7233 149.042 86.317L104.72 74.4593L144.266 51.1978C148.957 48.439 150.533 42.407 147.792 37.7062V37.7062C145.052 33.0054 139.026 31.4057 134.314 34.1282L94.5898 57.0835L106.105 12.6719C107.471 7.40463 104.32 2.02469 99.058 0.638673V0.638673C93.7961 -0.747342 88.4041 2.38242 86.9977 7.63895L75.14 51.9603L51.8786 12.4142C49.1197 7.72403 43.0878 6.14763 38.387 8.8883V8.8883C33.6862 11.629 32.0865 17.6548 34.809 22.3662L57.7643 62.0908L13.3526 50.5758C8.08539 49.2101 2.70545 52.3607 1.31944 57.6226V57.6226C-0.0665745 62.8845 3.06319 68.2766 8.31971 69.6829L52.6411 81.5406L13.095 104.802C8.4048 107.561 6.8284 113.593 9.56907 118.294V118.294C12.3097 122.994 18.3356 124.594 23.0469 121.872L62.7716 98.9164L51.2566 143.328C49.8909 148.595 53.0414 153.975 58.3034 155.361V155.361C63.5653 156.747 68.9573 153.617 70.3637 148.361L82.2214 104.04Z\" fill=\"white\"><\/path>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M82.2214 104.04L105.483 143.586C108.242 148.276 114.274 149.852 118.974 147.112V147.112C123.675 144.371 125.275 138.345 122.552 133.634L99.5971 93.9091L144.009 105.424C149.276 106.79 154.656 103.639 156.042 98.3773V98.3773C157.428 93.1154 154.298 87.7233 149.042 86.317L104.72 74.4593L144.266 51.1978C148.957 48.439 150.533 42.407 147.792 37.7062V37.7062C145.052 33.0054 139.026 31.4057 134.314 34.1282L94.5898 57.0835L106.105 12.6719C107.471 7.40463 104.32 2.02469 99.058 0.638673V0.638673C93.7961 -0.747342 88.4041 2.38242 86.9977 7.63895L75.14 51.9603L51.8786 12.4142C49.1197 7.72403 43.0878 6.14763 38.387 8.8883V8.8883C33.6862 11.629 32.0865 17.6548 34.809 22.3662L57.7643 62.0908L13.3526 50.5758C8.08539 49.2101 2.70545 52.3607 1.31944 57.6226V57.6226C-0.0665745 62.8845 3.06319 68.2766 8.31971 69.6829L52.6411 81.5406L13.095 104.802C8.4048 107.561 6.8284 113.593 9.56907 118.294V118.294C12.3097 122.994 18.3356 124.594 23.0469 121.872L62.7716 98.9164L51.2566 143.328C49.8909 148.595 53.0414 153.975 58.3034 155.361V155.361C63.5653 156.747 68.9573 153.617 70.3637 148.361L82.2214 104.04Z\" fill=\"url(#paint0_radial_1413_80169)\"><\/path>\r\n <path fill-opacity=\".6\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M82.2214 104.04L105.483 143.586C108.242 148.276 114.274 149.852 118.974 147.112V147.112C123.675 144.371 125.275 138.345 122.552 133.634L99.5971 93.9091L144.009 105.424C149.276 106.79 154.656 103.639 156.042 98.3773V98.3773C157.428 93.1154 154.298 87.7233 149.042 86.317L104.72 74.4593L144.266 51.1978C148.957 48.439 150.533 42.407 147.792 37.7062V37.7062C145.052 33.0054 139.026 31.4057 134.314 34.1282L94.5898 57.0835L106.105 12.6719C107.471 7.40463 104.32 2.02469 99.058 0.638673V0.638673C93.7961 -0.747342 88.4041 2.38242 86.9977 7.63895L75.14 51.9603L51.8786 12.4142C49.1197 7.72403 43.0878 6.14763 38.387 8.8883V8.8883C33.6862 11.629 32.0865 17.6548 34.809 22.3662L57.7643 62.0908L13.3526 50.5758C8.08539 49.2101 2.70545 52.3607 1.31944 57.6226V57.6226C-0.0665745 62.8845 3.06319 68.2766 8.31971 69.6829L52.6411 81.5406L13.095 104.802C8.4048 107.561 6.8284 113.593 9.56907 118.294V118.294C12.3097 122.994 18.3356 124.594 23.0469 121.872L62.7716 98.9164L51.2566 143.328C49.8909 148.595 53.0414 153.975 58.3034 155.361V155.361C63.5653 156.747 68.9573 153.617 70.3637 148.361L82.2214 104.04Z\" fill=\"url(#pattern-home-hero-star-0)\" style=\"mix-blend-mode:multiply\"><\/path>\r\n <defs>\r\n <pattern id=\"pattern-home-hero-star-0\" patternContentUnits=\"objectBoundingBox\" width=\"0.625\" height=\"0.625\">\r\n <use xlink:href=\"#svg-noise\" transform=\"scale(0.00125)\"><\/use>\r\n <\/pattern>\r\n <radialGradient id=\"paint0_radial_1413_80169\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" gradientTransform=\"translate(124.192 87.08) rotate(149.757) scale(126.034)\">\r\n <stop stop-color=\"#FFEBE7\"><\/stop>\r\n <stop offset=\"0.6721\" stop-color=\"#FF9C7C\"><\/stop>\r\n <stop offset=\"0.8164\" stop-color=\"#FF9983\"><\/stop>\r\n <stop offset=\"0.9014\" stop-color=\"#FF774B\"><\/stop>\r\n <stop offset=\"1\" stop-color=\"#E76F00\"><\/stop>\r\n <\/radialGradient>\r\n <\/defs>\r\n <\/svg><span class=\"a2\">g<\/span><span id=\"t\" class=\"t\">n<\/span\r\n > <br \/><\/span\r\n >\r\n <span class=\"anything\">\r\n <span class=\"a3\">a<\/span><span class=\"n2\">n<\/span\r\n ><span class=\"y\"><video class=\"bolt\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/gsap_ani.mp4\" autoplay muted><\/video>y<\/span><span class=\"t2\">t<\/span><span class=\"h\">h<\/span\r\n ><span class=\"i2\">i<\/span><span class=\"n3\">n<\/span\r\n ><span class=\"g\">g<\/span>\r\n <\/span>\r\n \r\n <\/h2>\r\n <div class=\"hero-bg-black\">\r\n <section class=\"section-2\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-as.png\" alt=\"\" class=\"overlay-img-sect-2-1\">\r\n <div class=\"content-section-2\">\r\n <div class=\"content-sect-2\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-underline.png\" alt=\"\" class=\"sect-2-underline\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-orange-arrow.png\" alt=\"\" class=\"sect-2-orange-arrow\">\r\n \r\n <h2>Crafting intuitive digital experiences with Itzfizz<\/h2>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-curly-underline.png\" alt=\"\" class=\"sect-2-curly-underline\">\r\n <p class=\"sect-2-para-1\">\r\n UI\/UX Services Tailored to Your Brand\r\n <\/p>\r\n <p class=\"sect-2-para-2\">\r\n In today's digital landscape, user experience is paramount. Dive into a journey where your brand's essence meets our design expertise\r\n <\/p>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-arrow.png\" alt=\"\" class=\"sect-2-arrow\">\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-2\">Kickstart Your Design Journey<\/button><\/a>\r\n <\/div>\r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-2-as-2.png\" alt=\"\" class=\"overlay-img-sect-2-2\">\r\n <\/section>\r\n \r\n <\/div>\r\n <\/div> \r\n\r\n \r\n\r\n <section class=\"section-3\">\r\n <div class=\"content-section-3\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-3-left.png\" alt=\"\" class=\"sect-3-left\">\r\n <div class=\"content-sect-3\">\r\n <h3>Our services<\/h3>\r\n <h1>Our UI\/UX Design Offerings<\/h1>\r\n <p>Every touchpoint matters. We focus on creating intuitive, user-friendly designs that resonate with your audience and align with your brand's values<\/p>\r\n \r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-3\">Kick-start<\/button><\/a>\r\n \r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-3-right.png\" alt=\"\" class=\"sect-3-right\">\r\n \r\n <\/div>\r\n \r\n \r\n <\/section> \r\n\r\n \r\n\r\n <section class=\"section-4\">\r\n <div class=\"card-section\">\r\n <div class=\"stack-area\">\r\n <div class=\"right-section\">\r\n <div class=\"cards\">\r\n <div class=\"individual-card\">\r\n<div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/userresearch_uiux.mp4\" autoplay muted loop><\/video>\r\n<\/div>\r\n<div class=\"content\">Dwelling deep into understanding your audience's needs, behaviour, and motivations<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/wireframing_uiux_1.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n <div class=\"content content-wireframing\">Crafting the blueprint for your digital interface<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/prototyping_uiux.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n \r\n <div class=\"content content-proto\">Breathing life into design concepts for tangible feedback<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/usertesting_uiux.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n \r\n <div class=\"content\">Ensuring the design exceeds user expectations and needs<\/div>\r\n <\/div>\r\n <div class=\"individual-card\">\r\n <div class=\"vid-sect\">\r\n <video class=\"vidCards\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_prototyping_uiux-mp4_2024-06-05_1328\/uiuxdesign_uiux_1.mp4\" autoplay muted loop><\/video>\r\n <\/div>\r\n \r\n \r\n <div class=\"content content-proto\">Designing visually captivating interfaces that enhance user engagement<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section> \r\n \r\n \r\n \r\n \r\n <section class=\"section-5\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-left-asset.png\" alt=\"\" class=\"sect-5-left-asset\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-right-asset.png\" alt=\"\" class=\"sect-5-right-asset\">\r\n \r\n <div class=\"spacer\">\r\n <div class=\"content-sect-4\">\r\n \r\n <h3>Our process<\/h3>\r\n <\/div>\r\n <h2 class=\"designanimation-sect-5\">Our Design Process: Insight to Interface<\/h2>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-5-underline.png\" alt=\"\" class=\"sect-5-underline\">\r\n <p>\r\n A meticulous approach that places user needs and business objectives at\r\n the forefront.\r\n <\/p>\r\n \r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-3\">Kick-start<\/button><\/a>\r\n <\/div>\r\n <section class=\"designsection\">\r\n \r\n <div class=\"design_process divM1\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-orange\">1.<\/h2>\r\n <span class=\"design-process-heading\">Discovery<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Grasping the project scope, objectives, and target audience.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"design_process divM2\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-black\">2.<\/h2>\r\n <span class=\"design-process-heading\">Research<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Gathering pivotal insights about user behaviours and pain\r\n points.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"design_process divM3\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-orange\">3.<\/h2>\r\n <span class=\"design-process-heading\">Design<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Formulating wireframes, mockups, and interactive prototypes.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"design_process divM4\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-black\">4.<\/h2>\r\n <span class=\"design-process-heading\">Testing<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Collating user feedback and refining the design<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n <div class=\"design_process divM5\">\r\n <div class=\"design_process-sect-1\">\r\n <h2 class=\"serial-num-black\">5.<\/h2>\r\n <span class=\"design-process-heading\">Implementating<\/span>\r\n <\/div>\r\n <div class=\"design_process-sect-2\">\r\n <span\r\n >Actualizing the final design, ensuring consistency and\r\n finesse.<\/span\r\n >\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/section> \r\n \r\n \r\n \r\n <section class=\"section-6\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-6-left-asset.png\" alt=\"\" class=\"sect-6-left-asset\">\r\n <div class=\"spacer content-sect-6\">\r\n <div class=\"content-sect-4\">\r\n <h3>Our portfolio<\/h3>\r\n <\/div>\r\n <h2>Showcasing Our Design Mastery<\/h2>\r\n <p>\r\n Witness the transformative power of design through our curated portfolio, reflecting our unwavering commitment to excellence.\r\n <\/p>\r\n\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-sect-3\">Enquire Now<\/button><\/a>\r\n \r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-6-right-asset.png\" alt=\"\" class=\"sect-6-right-asset\">\r\n <div class=\"wildleaf\">\r\n <div class=\"carousel-heading-container\">\r\n <h2 class=\"carousel-heading\">Wildleaf<\/h2>\r\n <\/div>\r\n <div class=\"portfolio-tags\">\r\n <div>\r\n <h5 class=\"tag1\">Wildleaf<\/h5>\r\n <\/div>\r\n <div>\r\n <h5 class=\"tag2\">Tipplr<\/h5>\r\n <\/div>\r\n <div>\r\n <h5 class=\"tag3\">Content Whale<\/h5>\r\n <\/div>\r\n <div>\r\n <h5 class=\"tag4\">Dexwin<\/h5>\r\n <\/div> \r\n <\/div>\r\n <p>Witness the transformative power of design through our curated portfolio, reflecting our unwavering commitment to excellence.<\/p>\r\n <\/div> \r\n \r\n \r\n <div class=\"carousel-container\">\r\n <button class=\"carousel-button\">\r\n <div class=\"mobile-carousel\">\r\n <img decoding=\"async\" class=\"mobile-carousel-img\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg1.png\"\/>\r\n <\/div>\r\n <\/button>\r\n <button class=\"carousel-button\"> \r\n <div class=\"tablet-carousel\">\r\n <img decoding=\"async\" class=\"tablet-carousel-img\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg1.png\"\/>\r\n <\/div>\r\n <\/button>\r\n <\/div>\r\n \r\n <\/section> \r\n \r\n \r\n \r\n <section class=\"section-7\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-7-left-asset.png\" alt=\"\" class=\"sect-7-left-asset\">\r\n <div class=\"bg\"><\/div>\r\n <div class=\"wrapper\" id=\"wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-7-start-circle.png\" alt=\"\" class=\"sect-7-start-circle\">\r\n \r\n <div class=\"content-sect-4 sect-7-content-parent\">\r\n <h3>Testimonial<\/h3>\r\n <\/div>\r\n <h2 class=\"hell-heading\">What our clients think about us?<\/h2><\/div>\r\n <div class=\"quote-row\">\r\n \r\n <div class=\"quote-column col-active show\">\r\n \r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQzfHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Tom hawck<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Harry john<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1488426862026-3ee34a7d66df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Larry Will<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1463453091185-61582044d556?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Augustine<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDZ8fHBlb3BsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Jack Danny<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504439904031-93ded9f93e4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTl8fHBlb3BsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Luich Harry<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1474176857210-7287d38d27c6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Alisha Angela<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1592621385612-4d7129426394?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTE5fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Lofy Sthamam<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1557053910-d9eadeed1c58?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTI2fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Angela Baby<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column \">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTM1fHxwZW9wbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Hanry Harry<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-column\">\r\n <div class=\"col-inner\">\r\n <div class=\"author-meta\">\r\n <div class=\"box-image-inner image-cover\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cm9ib3R8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60\">\r\n <\/div>\r\n <div class=\"author-info\">\r\n <div class=\"author-name\"> <p class=\"person-name\">Dlang Dhal<\/p><\/div>\r\n <div class=\"author-status\"> <p class=\"person-title\"> IT Solution Company <\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"quote-wrapper\">\r\n <div class=\"quote-symbol\">\u275b<\/div>\r\n <div class=\"box-text-inner\">\r\n <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<\/p>\r\n <\/div>\r\n <div class=\"quote-symbol\">\u275c<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/sect-7-right-asset.png\" alt=\"\" class=\"sect-7-right-asset\">\r\n <\/div>\r\n <\/section> \r\n \r\n \r\n \r\n \r\n \r\n <section class=\"section-8\">\r\n <section class=\"faqsection\">\r\n <section class=\"principal-section\" data-status=\"open\">\r\n <div class=\"results title\" onclick=\"changeStatus(0)\">\r\n <h2>Benefits?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n How Can Good UX Design Benefit My Business?<\/span><br \/>Good UX design is crucial for any business delivering services or products digitally. It directly impacts your bottom line by improving conversion rates, customer retention, reducing customer acquisition costs, and enhancing overall user satisfaction.\r\n <\/p>\r\n \r\n \r\n \r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"principal-section\" data-status=\"close\">\r\n <div class=\"analysis title\" onclick=\"changeStatus(1)\">\r\n <h2>Client information?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n What Information Do I Need to Provide for a UX Design Project?<\/span><br \/><br \/>We begin with a detailed brainstorming session to understand your business\/organizational goals, target audience, product goals, expected outcomes, KPIs, technical specifications, and any existing market research or user analytics data.\r\n <\/p>\r\n \r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button><\/a>\r\n \r\n <\/div>\r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"principal-section\" data-status=\"close\">\r\n <div class=\"growth title\" onclick=\"changeStatus(2)\">\r\n <h2>Tools?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n What Tools Do You Use for UX Design?<\/span><br \/><br \/>Our team uses a variety of tools across different stages of the UX design process, including Hotjar and Usabilla for user research, Adobe XD, Figma, and Invision for design, Crazyegg and UserTesting.com for user testing, and Basecamp, Miro, and Notion for project management.\r\n <\/p>\r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button><\/a>\r\n \r\n <\/div>\r\n \r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"principal-section\" data-status=\"close\">\r\n <div class=\"analysis title\" onclick=\"changeStatus(3)\">\r\n <h2>Services?<\/h2>\r\n <\/div>\r\n <div class=\"content-sect-8\">\r\n <img decoding=\"async\" class=\"faqquestion\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqquestion.png\" \/>\r\n \r\n <div class=\"contentcontainer lastcontain\">\r\n <div>\r\n <h3 class=\"orange-faq\">\r\n FAQ\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/faqcircle.png\" \/>\r\n <\/h3>\r\n <h2>\r\n Popular Questions\r\n <img decoding=\"async\" src=\"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/servicesbackdrop3.png\" \/>\r\n <\/h2>\r\n <\/div>\r\n \r\n <p class=\"content-sect-8-para\"><span class=\"faq-quest\">\r\n Will You Provide Support After the Product Launch?<\/span><br \/><br \/>We offer support according to the client's needs, including a 3-month post-launch support period. Clients can also opt for an Annual Support Contract (ASC) for extended services.\r\n <\/p>\r\n \r\n <div class=\"horizontal-div para-2-faq\">\r\n <h4><span class=\"faq-quest\">Poised to Elevate Your User Experience?<\/span><\/h4>\r\n <p class=\"faqp\">\r\n Reach out to us and embark on a transformative design journey tailored to your brand's essence.\r\n <\/p>\r\n <a href=\"https:\/\/itzfizz.typeform.com\/to\/wXFpOXOH\" target=\"_blank\" rel=\"noopener\"><button class=\"btn-horizontal\">Let\u2019s talk!<\/button><\/a>\r\n \r\n <\/div>\r\n \r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/section>\r\n <\/section> \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/Observer.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/TextPlugin.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN\/o0jlpcV8Qyq46cDfL\" crossorigin=\"anonymous\"><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\r\n <script>\r\n AOS.init();\r\n <\/script> \r\n <script>\r\n \r\n document.addEventListener(\"DOMContentLoaded\", function () {\r\n const letterElement = document.getElementById(\"t\");\r\n \r\n let animationStartTime;\r\n const animationDuration = 3000;\r\n \r\n function startAnimation() {\r\n animationStartTime = performance.now();\r\n animate();\r\n }\r\n \r\n function animate() {\r\n const currentTime = performance.now();\r\n const elapsedTime = currentTime - animationStartTime;\r\n \r\n if (elapsedTime < animationDuration) {\r\n const progress = elapsedTime \/ animationDuration;\r\n const path = \"abcdefghijklmnopqrst\";\r\n const currentPos = Math.floor(progress * path.length);\r\n letterElement.textContent = path[currentPos];\r\n \r\n requestAnimationFrame(animate);\r\n } else {\r\n letterElement.textContent = \"n\";\r\n }\r\n }\r\n \r\n startAnimation();\r\n });\r\n \r\n gsap.registerPlugin(ScrollTrigger);\r\n \r\n gsap.to(\".hero-bg-black\", {\r\n height: \"120vh\",\r\n scrollTrigger: {\r\n trigger: \".individualchar\",\r\n start: \"50% center\",\r\n end: \"bottom top\",\r\n scrub: true,\r\n pin: true,\r\n \/\/ markers: true,\r\n },\r\n });\r\n \r\n \/\/ Section 4 Cards ANimations\r\n \r\n let cards = document.querySelectorAll(\".individual-card\");\r\n let stackArea = document.querySelector(\".stack-area\");\r\n \r\n function rotateCards() {\r\n let angle = 0;\r\n cards.forEach((card) => {\r\n if (card.classList.contains(\"active\")) {\r\n card.style.transform = `translate(-50%, -120vh) rotate(-48deg)`;\r\n } else {\r\n card.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;\r\n angle = angle - 10;\r\n }\r\n });\r\n }\r\n \r\n rotateCards();\r\n \r\n window.addEventListener(\"scroll\", () => {\r\n let proportion = stackArea.getBoundingClientRect().top \/ window.innerHeight;\r\n if (proportion <= 0) {\r\n let n = cards.length;\r\n let index = Math.ceil((proportion * n) \/ 2);\r\n index = Math.abs(index) - 1;\r\n for (let i = 0; i < n; i++) {\r\n if (i <= index) {\r\n cards[i].classList.add(\"active\");\r\n } else {\r\n cards[i].classList.remove(\"active\");\r\n }\r\n }\r\n rotateCards();\r\n }\r\n });\r\n \r\n \/\/Code for responsiveness\r\n \r\n \/\/ function adjust() {\r\n \/\/ let windowWidth = window.innerWidth;\r\n \/\/ let left = document.querySelector(\".left\");\r\n \/\/ left.remove();\r\n \/\/ if (windowWidth < 800) {\r\n \/\/ stackArea.insertAdjacentElement(\"beforebegin\", left);\r\n \/\/ } else {\r\n \/\/ stackArea.insertAdjacentElement(\"afterbegin\", left);\r\n \/\/ }\r\n \/\/ }\r\n \/\/ adjust();\r\n \r\n \/\/ \/\/detect Resize\r\n \r\n \/\/ window.addEventListener(\"resize\", adjust);\r\n \r\n \/\/ Section 8\r\n \r\n function changeStatus(x) {\r\n const sections = document.querySelectorAll(\".principal-section\");\r\n if (sections[x].dataset.status === \"close\") {\r\n for (let i = 0; i < sections.length; i++) {\r\n sections[i].dataset.status = \"close\";\r\n }\r\n sections[x].dataset.status = \"open\";\r\n }\r\n }\r\n \r\n \/\/ Section 6 carousels\r\n \r\n \/\/ Data for carousel items\r\n const carouselItems = [\r\n {\r\n text: \"Wildleaf\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg1.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg1.png\",\r\n tag3: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag4: \"Content Whale\",\r\n tag2: \"Tipplr\",\r\n },\r\n {\r\n text: \"Tipplr\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg2.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg2.png\",\r\n tag3: \"Tipplr\",\r\n tag4: \"Wildleaf\",\r\n tag2: \"Dexwin\",\r\n tag1: \"Content Whale\",\r\n },\r\n {\r\n text: \"Dexwin\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg3.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg3.png\",\r\n tag4: \"Tipplr\",\r\n tag1: \"Wildleaf\",\r\n tag2: \"Dexwin\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Content Whale\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg4.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg4.png\",\r\n tag4: \"Tipplr\",\r\n tag1: \"Content Whale\",\r\n tag3: \"Wildleaf\",\r\n tag2: \"Dexwin\",\r\n },\r\n {\r\n text: \"Pear 5\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg5.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg5.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 6\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg6.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg6.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 7\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg7.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg7.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 8\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg8.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg8.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 9\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg9.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg9.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Pear 10\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/mobileimg10.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/tabimg10.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Dexwin\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Content Whale\",\r\n },\r\n {\r\n text: \"Axxonet 11\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003012%20(1).png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003010.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Analytics\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Axxonet\",\r\n },\r\n {\r\n text: \"Scribble 12\",\r\n mobileImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003013.png\",\r\n tabletImg: \"https:\/\/itzfizzdigital.b-cdn.net\/Design%20Page%20assets\/wetransfer_group-1000003011-png_2024-06-29_1738\/Group%201000003011.png\",\r\n tag4: \"Wildleaf\",\r\n tag1: \"Masters\",\r\n tag2: \"Tipplr\",\r\n tag3: \"Scribble\",\r\n }\r\n ];\r\n \r\n \r\n const carouselButtons = document.querySelectorAll(\".carousel-button\");\r\n const carouselHeading = document.querySelector(\".carousel-heading\");\r\n const mobileCarouselImg = document.querySelector(\".mobile-carousel-img\");\r\n const tabletCarouselImg = document.querySelector(\".tablet-carousel-img\");\r\n const tag_1 = document.querySelector(\".tag1\");\r\n const tag_2 = document.querySelector(\".tag2\");\r\n const tag_3 = document.querySelector(\".tag3\");\r\n const tag_4 = document.querySelector(\".tag4\");\r\n \r\n let currentIndex = 0;\r\n \r\n function updateCarousel() {\r\n const currentItem = carouselItems[currentIndex];\r\n carouselHeading.style.opacity = 0;\r\n carouselHeading.style.transform = 'translateX(-350px)';\r\n \r\n mobileCarouselImg.style.opacity = 0;\r\n mobileCarouselImg.style.transform = 'scale(1.1)';\r\n \r\n tabletCarouselImg.style.opacity = 0;\r\n tabletCarouselImg.style.transform = 'scale(1.1)';\r\n \r\n tag_1.style.transform = 'translateY(50px)';\r\n tag_2.style.transform = 'translateY(50px)';\r\n tag_3.style.transform = 'translateY(50px)';\r\n tag_4.style.transform = 'translateY(50px)';\r\n \r\n setTimeout(() => {\r\n carouselHeading.textContent = currentItem.text;\r\n carouselHeading.style.opacity = 1;\r\n carouselHeading.style.transform = 'translateX(0)';\r\n \r\n mobileCarouselImg.src = currentItem.mobileImg;\r\n mobileCarouselImg.style.opacity = 1;\r\n mobileCarouselImg.style.transform = 'scale(1)'; \r\n \r\n tabletCarouselImg.src = currentItem.tabletImg;\r\n tabletCarouselImg.style.opacity = 1;\r\n tabletCarouselImg.style.transform = 'scale(1)'; \r\n \r\n tag_1.textContent = currentItem.tag1;\r\n tag_1.style.transform = 'translateY(0)';\r\n \r\n tag_2.textContent = currentItem.tag2;\r\n tag_2.style.transform = 'translateY(0)';\r\n \r\n tag_3.textContent = currentItem.tag3;\r\n tag_3.style.transform = 'translateY(0)';\r\n \r\n tag_4.textContent = currentItem.tag4;\r\n tag_4.style.transform = 'translateY(0)';\r\n }, 300);\r\n }\r\n \r\n carouselButtons.forEach(function(button) {\r\n button.addEventListener(\"click\", function () {\r\n currentIndex = (currentIndex + 1) % carouselItems.length;\r\n updateCarousel();\r\n });\r\n });\r\n \r\n let mobileWidth = 640;\r\n let tabWidth = 1080;\r\n let deskWidth = 1220;\r\n let pWidth, pHeight, screenWidth, screenHeight;\r\n let index = document.getElementsByClassName(\"quote-column\");\r\n let pTransition = 3;\r\n let activeShow = \"col-active\";\r\n const arrowIcon = \"<div class='arrow left-arrow ' onclick='arrowControl(-1)'><i class='arrow-icon'><i><\/div><div class='arrow right-arrow' onclick='arrowControl(1)'><i class='arrow-icon'><i><\/div>\"\r\n const ArrowParent = document.createElement(\"div\");\r\n ArrowParent.classList.add(\"arrows-wrap\");\r\n ArrowParent.innerHTML = arrowIcon;\r\n let arrowEnabled = false;\r\n let activeQuoteHeight = 400;\r\n \r\n getElem();\r\n function getElem() {\r\n let hAndW;\r\n let targetElem;\r\n index[0].parentElement.style.minHeight = (index.length \/ 2) * 140 + \"px\";\/\/ assign row element height\r\n \r\n for (let i = 0; i < index.length; i++) {\r\n targetElem = index[i];\r\n pWidth = targetElem.parentElement.offsetWidth;\r\n pHeight = targetElem.parentElement.offsetHeight;\r\n \r\n \/\/When viewing on desktop\r\n if (screenWidth > tabWidth) {\r\n hAndW = randomPos(60, (screenHeight \/ (index.length \/ 1.5))) + 'px';\/\/Lets make the height and width variables randomly\r\n \r\n \/\/ lets devide all the elements by less then 2 and positioning them left and right not in the middle;\r\n \/\/this is for left side\r\n if (i < index.length \/ 1.9) {\r\n targetElem.style.left = randomPos(100, targetElem.parentElement.offsetWidth \/ 3 - 100) + 'px'; \/\/ X position left\r\n targetElem.style.top = (targetElem.parentElement.offsetHeight \/ (index.length \/ 2)) * (i - 1) + 'px'; \/\/Y position left\r\n }\r\n \/\/ this is for right side\r\n else if (i > index.length \/ 1.9) {\r\n targetElem.style.right = randomPos(100, targetElem.parentElement.offsetWidth \/ 3 - 100) + 'px'; \/\/ X position right\r\n targetElem.style.left = 'auto'; \/\/ X position right\r\n targetElem.style.top = (targetElem.parentElement.offsetHeight \/ (index.length \/ 2)) * ((index.length - 1) - i) + 'px'; \/\/Y position right\r\n }\r\n if (arrowEnabled) ArrowParent.style.display = \"block\";\/\/ When arrow added make them visible\r\n else ArrowParent.style.display = \"none\";\/\/ When arrow added make them hidden\r\n }\r\n \r\n \/\/When viewing on tab\r\n if (screenWidth <= tabWidth && screenWidth >= mobileWidth) {\r\n hAndW = randomPos(30, (screenHeight \/ (index.length \/ 1.5))) + 'px';\r\n targetElem.parentElement.style.minHeight = \"70vh\";\r\n targetElem.style.bottom = '0px'; \/\/Y position\r\n targetElem.style.left = (targetElem.parentElement.offsetWidth) \/ (index.length - 1) * (i - 1) + 'px'; \/\/ X position left\r\n targetElem.style.zIndex = '100'; \/\/Y position\r\n targetElem.style.top = 'auto'; \/\/Y position\r\n if (arrowEnabled) ArrowParent.style.display = \"block\";\/\/ When arrow added make them visible\r\n else ArrowParent.style.display = \"none\";\/\/ When arrow added make them visible\r\n }\r\n \r\n \/\/When viewing on mobile\r\n if (screenWidth < mobileWidth) {\r\n targetElem.style.left = '50%'; \/\/ X position left\r\n ArrowParent.style.display = \"block\";\/\/ When arrow added make them visible\r\n }\r\n else if (!arrowEnabled) ArrowParent.style.display = \"none\";\/\/ otherwise hidden\r\n \r\n \/\/after all the work done lets sizing the element\r\n targetElem.style.width = hAndW;\r\n targetElem.style.height = hAndW;\r\n \/\/and the active one position default\r\n if (i != 0) {\r\n targetElem.addEventListener('click', quoteShow, false); \/\/So we dont need click event on the active one\r\n }\r\n targetElem.classList.add(\"moves\");\r\n }\r\n setTimeout(() => {\r\n for (let i = 0; i < index.length; i++) {\r\n \/\/ targetElem.style.transition = \"0s\";\r\n }\r\n }, 2000);\r\n }\r\n \r\n \r\n let clickCheck = true, showClear, showClear2;\r\n function quoteShow(evt) {\r\n const style = getComputedStyle(this);\r\n console.log(style);\r\n if (clickCheck) {\r\n clickCheck = false;\r\n clearTimeout(showClear2);\r\n let activeQuote = document.getElementsByClassName(activeShow);\r\n let aq;\r\n for (let j = 0; j < activeQuote.length; j++) {\r\n aq = activeQuote[j];\r\n aq.classList.remove(\"show\");\r\n aq.style.transition = \"0.4s\";\r\n }\r\n this.style.transition = \"0.4s\";\r\n setTimeout(() => {\r\n aq.style.top = this.offsetTop + \"px\";\r\n aq.style.left = this.offsetLeft + \"px\";\r\n aq.style.width = this.offsetWidth + \"px\";\r\n aq.style.height = this.offsetHeight + \"px\";\r\n aq.addEventListener('click', quoteShow, false);\r\n aq.classList.remove(activeShow);\r\n }, 600);\r\n \r\n setTimeout(() => {\r\n this.classList.add(activeShow);\r\n this.removeEventListener(\"click\", quoteShow, false);\r\n }, 1200);\r\n \r\n showClear2 = setTimeout(() => {\r\n this.classList.toggle(\"show\");\r\n aq.style.transition = \"\";\r\n this.style.transition = \"\";\r\n clickCheck = true;\r\n }, 1800);\r\n }\r\n }\r\n \r\n let arrowClicked = true; nowActive = 0;\r\n \r\n \r\n function arrowControl(val) {\r\n \/\/ else nowActive += val;\r\n if (arrowClicked) {\r\n arrowClicked = false;\r\n for (let i = 0; i < index.length; i++) {\r\n index[nowActive].classList.remove(\"show\");\r\n index[nowActive].style.transition = \".4s\";\r\n index[nowActive].addEventListener('click', quoteShow, false);\r\n }\r\n setTimeout(() => {\r\n for (let j = 0; j < index.length; j++) {\r\n index[j].classList.remove(activeShow);\r\n }\r\n nowActive += val;\r\n if (nowActive > index.length - 1) nowActive = 0;\r\n else if (nowActive < 0) nowActive = index.length - 1;\r\n }, 600);\r\n \r\n setTimeout(() => {\r\n index[nowActive].classList.add(activeShow);\r\n index[nowActive].removeEventListener(\"click\", quoteShow, false);\r\n }, 610);\r\n \r\n setTimeout(() => {\r\n index[nowActive].classList.toggle(\"show\");\r\n index[nowActive].style.transition = \"\";\r\n arrowClicked = true\r\n }, 1800);\r\n }\r\n }\r\n \r\n function randomPos(min, max) {\r\n return Math.floor(Math.random() * (max - min + 1)) + min;\r\n }\r\n \r\n function getScreenSize() {\r\n screenWidth = window.innerWidth;\r\n screenHeight = window.innerHeight;\r\n getElem();\r\n }\r\n \r\n window.onresize = getScreenSize;\r\n window.addEventListener('resize', getScreenSize);\r\n window.addEventListener('load', function () {\r\n getScreenSize();\r\n getElem();\r\n }, true);\r\n \r\n function arrowFunc() {\r\n try {\r\n index[0].parentElement.appendChild(ArrowParent);\/\/ try insert arrow element for slide control\r\n } catch (error) { }\r\n }\r\n arrowFunc();\r\n \r\n \r\n \r\n \r\n \/\/Flaoting animation class;\r\n class MoveAnim {\r\n constructor(max, tm) {\r\n this.time = tm;\r\n if (Math.random() > .5) this.uDVal = max; else this.uDVal = 0;\r\n if (Math.random() > .5) this.lRVal = max; else this.lRVal = 0;\r\n this.max = max;\r\n if (Math.random() > .5) this.uD = false; else this.uD = true;\r\n if (Math.random() > .5) this.lR = false; else this.lR = true;\r\n this.upDown(this.max);\r\n this.leftRight(this.max);\r\n this.scale = .01;\r\n }\r\n \r\n upDown() {\r\n setInterval(() => {\r\n if (!this.uDVal) {\r\n if (this.uD >= this.max) { this.uDVal = true; }\r\n if (this.uD < this.max) { this.uD += this.scale; }\r\n }\r\n else if (this.uDVal) {\r\n if (this.uD <= -this.max) { this.uDVal = false; }\r\n if (this.uD >= -this.max) { this.uD -= this.scale; }\r\n }\r\n return this.uD;\r\n }, this.time \/ 1000);\r\n }\r\n leftRight() {\r\n setInterval(() => {\r\n if (!this.lRVal) {\r\n if (this.lR >= this.max) { this.lRVal = true; }\r\n if (this.lR < this.max) { this.lR += this.scale; }\r\n }\r\n else if (this.lRVal) {\r\n if (this.lR <= -this.max) { this.lRVal = false; }\r\n if (this.lR >= -this.max) { this.lR -= this.scale; }\r\n }\r\n return this.lR;\r\n }, this.time \/ 1000);\r\n }\r\n \r\n letMove(el, ud = false, lr = false) {\r\n \r\n setInterval(() => {\r\n if (ud === true && lr === false) {\r\n el.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, \" + 0 + \",\" + this.uD + \", 0, 1)\";\r\n }\r\n else if (ud === false && lr === true) {\r\n el.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, \" + this.lR + \",\" + 0 + \", 0, 1)\";\r\n }\r\n else {\r\n el.style.transform = \"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, \" + this.lR + \",\" + this.uD + \", 0, 1)\";\r\n }\r\n \r\n \r\n }, 1);\r\n }\r\n \r\n start(elem, ud, lr) {\r\n this.letMove(elem, ud, lr);\r\n this.upDown();\r\n this.leftRight();\r\n }\r\n }\r\n \r\n class ShowAnim {\r\n constructor(mElem, dist, times) {\r\n this.mElem = document.getElementsByClassName(mElem);\r\n this.pElem = mElem.parentElement;\r\n this.cElem = mElem.children;\r\n this.count = 0;\r\n this.max = dist;\r\n this.min = 10;\r\n this.times = times;\r\n this.randomCount(this.max);\r\n }\r\n randomCount(max) {\r\n return Math.floor(Math.random() * (max - this.min + 1)) + this.min;\r\n }\r\n show(ud, lr) {\r\n for (this.count = 0; this.count < this.mElem.length; this.count++) {\r\n this.moveanim = new MoveAnim(this.randomCount(this.max), this.times,);\r\n this.moveanim.start(this.mElem[this.count], ud, lr);\r\n }\r\n }\r\n }\r\n \r\n \r\n let animShow = new ShowAnim(\"moves\", 40, 50);\/\/ Element, Max Distance, Times in milliseconds\r\n \r\n \/\/Start floating\r\n animShow.show(true, true);\/\/ Up-Down, Left-Right;\r\n \r\n \r\n \/*;-------------------------------------------------\r\n GSAP\r\n -------------------------------------------------;*\/\r\n \r\n \r\n let tl2 = gsap.timeline({scrollTrigger:{\r\n trigger:\".section-3\",\r\n start:\"top 0%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n pin: false,\r\n \/\/ markers:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl2.to('.sect-3-left',{\r\n yPercent: 50,\r\n ease: \"none\",\r\n \r\n }, 'section-3')\r\n tl2.to('.sect-3-right',{\r\n yPercent: 50,\r\n ease: \"none\",\r\n \r\n }, 'section-3')\r\n \r\n \r\n \/\/ ----------------------------------\r\n \r\n \r\n let tl4= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-5\",\r\n start:\"top 0%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl4.to('.sect-5-left-asset',{\r\n yPercent: 400,\r\n ease: \"none\",\r\n \r\n }, 'section-5')\r\n tl4.to('.sect-5-right-asset',{\r\n yPercent: 150,\r\n ease: \"none\",\r\n \r\n }, 'section-5')\r\n \r\n \r\n \/\/ --------------------------------------------\r\n \r\n let tl5= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-6\",\r\n start:\"top 0%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:'true',\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl5.to('.sect-6-left-asset',{\r\n yPercent: 40,\r\n ease: \"none\",\r\n \r\n }, 'section-6')\r\n tl5.to('.sect-6-right-asset',{\r\n yPercent: 50,\r\n ease: \"none\",\r\n \r\n }, 'section-6')\r\n \r\n \/\/ -----------------------------------------\r\n \r\n \r\n let tl7= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-7\",\r\n start:\"top 10%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl7.to('.sect-7-left-asset',{\r\n yPercent: 20,\r\n ease: \"none\",\r\n \r\n }, 'section-7')\r\n tl7.to('.sect-7-right-asset',{\r\n yPercent: 20,\r\n ease: \"none\",\r\n \r\n }, 'section-7')\r\n \r\n \r\n \/\/ --------------------------\r\n \r\n \r\n let tl8= gsap.timeline({scrollTrigger:{\r\n trigger:\".section-7\",\r\n start:\"bottom 10%\",\r\n \/\/ end:\"bottom center\",\r\n \/\/ markers:true,\r\n scrub:true,\r\n toggleActions:\"restart none none reset\"\r\n }})\r\n tl8.to('.faqquestion',{\r\n yPercent: -20,\r\n ease: \"none\",\r\n \r\n }, 'section-8')\r\n \r\n \r\n gsap.registerPlugin(ScrollTrigger);\r\n \r\n function animateOnScroll(element) {\r\n gsap.to(element, {\r\n x: 0,\r\n scrollTrigger: {\r\n scrub: true,\r\n trigger: element,\r\n start: \"top 90%\",\r\n end: \"bottom 60%\",\r\n \/\/ markers: true,\r\n },\r\n });\r\n }\r\n \r\n animateOnScroll(\".divM1\");\r\n animateOnScroll(\".divM2\");\r\n animateOnScroll(\".divM3\");\r\n animateOnScroll(\".divM4\");\r\n animateOnScroll(\".divM5\");\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"has_ae_slider elementor-element elementor-element-cd8f22f e-flex e-con-boxed ae-bg-gallery-type-default e-con e-parent\" data-id=\"cd8f22f\" data-element_type=\"container\" id=\"lllii\" data-settings=\"{"background_background":"classic","ekit_has_onepagescroll_dot":"yes"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcd8246 elementor-widget elementor-widget-shortcode\" data-id=\"dcd8246\" data-element_type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n <div \n class=\"elfsight-widget-whatsapp-chat elfsight-widget\" \n data-elfsight-whatsapp-chat-options=\"%7B%22facebookSubgoup%22%3Anull%2C%22whatsappSubgoup%22%3Anull%2C%22telegramSubgoup%22%3Anull%2C%22viberSubgoup%22%3Anull%2C%22rumbletalkSubgoup%22%3Anull%2C%22divider-1%22%3Anull%2C%22userAccessToken%22%3Anull%2C%22page%22%3Anull%2C%22phone%22%3A%227338376454%22%2C%22link%22%3Anull%2C%22userAccessTokenBubbleSubgroup%22%3Anull%2C%22bubbleIcon%22%3A%22whatsapp-chat%22%2C%22bubbleText%22%3A%22%22%2C%22picture%22%3A%22custom%22%2C%22pictureLibrary%22%3A%7B%22photo%22%3A%22https%3A%5C%2F%5C%2Fpbs.twimg.com%5C%2Fprofile_images%5C%2F951055655594545153%5C%2FF6eybr-i.jpg%22%7D%2C%22pictureCustom%22%3A%22https%3A%5C%2F%5C%2Fitzfizz.com%5C%2Fwp-content%5C%2Fuploads%5C%2F2024%5C%2F09%5C%2FScreenshot-2024-09-03-160434.png%22%2C%22name%22%3A%22Sales%20Team%22%2C%22nameCaptionType%22%3A%22custom%22%2C%22nameCaptionReplyTime%22%3A%22Typically%20replies%20within%20a%20day%22%2C%22nameCaptionCustom%22%3A%22Typically%20replies%20within%201%20business%20day%22%2C%22welcomeMessage%22%3A%22Hi%20there%20%3F%3F%3F%3F%3Cbr%3E%3Cbr%3EHow%20can%20I%20help%20you%3F%22%2C%22buttonText%22%3A%22Start%20Chat%22%2C%22buttonIconVisible%22%3Atrue%2C%22position%22%3A%22floating%22%2C%22align%22%3A%22right%22%2C%22whereToDisplayChat%22%3A%22allPages%22%2C%22excludedPages%22%3A%5B%5D%2C%22specificPages%22%3A%5B%5D%2C%22devicesToDisplay%22%3A%5B%22mobile%22%2C%22desktop%22%5D%2C%22showChatTo%22%3A%22allVisitors%22%2C%22displayDays%22%3A%5B0%2C1%2C2%2C3%2C4%2C5%2C6%5D%2C%22timeSchedule%22%3Afalse%2C%22displayStartTime%22%3A%2200%3A00%22%2C%22displayEndTime%22%3A%2200%3A00%22%2C%22timeZone%22%3A0%2C%22timeOnPage%22%3A0%2C%22timeOnSite%22%3A0%2C%22scrollPosition%22%3A0%2C%22exiIntent%22%3Afalse%2C%22notifications%22%3A%5B%22bubbleBadge%22%2C%22tabTitle%22%5D%2C%22headerBackgroundColor%22%3A%22rgb%289%2C%2094%2C%2084%29%22%2C%22buttonColor%22%3A%22rgb%2879%2C%20206%2C%2093%29%22%2C%22bubbleBackgroundColor%22%3A%22rgb%2879%2C%20206%2C%2093%29%22%2C%22bubbleIconColor%22%3A%22rgb%28255%2C%20255%2C%20255%29%22%2C%22windowBackgroundColor%22%3A%22rgb%28230%2C%20221%2C%20212%29%22%2C%22windowBackgroundPattern%22%3A%22https%3A%5C%2F%5C%2Felfsight.com%5C%2Fassets%5C%2Fchats%5C%2Fpatterns%5C%2Fwhatsapp.png%22%2C%22buttonBorderRadius%22%3A20%2C%22widgetId%22%3A%221%22%7D\" \n data-elfsight-whatsapp-chat-version=\"1.2.0\"\n data-elfsight-widget-id=\"elfsight-whatsapp-chat-1\">\n <\/div>\n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Document Desi gn anything Crafting intuitive digital experiences with Itzfizz UI\/UX Services Tailored to Your Brand In today’s digital landscape, user experience is paramount. Dive into a journey where your brand’s essence meets our design expertise Kickstart Your Design Journey Our services Our UI\/UX Design Offerings Every touchpoint matters. We focus on creating intuitive, user-friendly […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-806","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages\/806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/comments?post=806"}],"version-history":[{"count":776,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages\/806\/revisions"}],"predecessor-version":[{"id":54798,"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/pages\/806\/revisions\/54798"}],"wp:attachment":[{"href":"https:\/\/itzfizz.com\/wp-json\/wp\/v2\/media?parent=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}