Fix css in services page

nuxt-frontend/assets/css/global.css

@@ -8,7 +8,6 @@
 
 @tailwind components;
 
-
 @layer components {
   .hidden-scrollbar::-webkit-scrollbar,
   .parallax::-webkit-scrollbar,
@@ -239,4 +238,3 @@
 }
 
 @tailwind utilities;
-

nuxt-frontend/components/about/HowItAllStartedSection.vue

@@ -6,14 +6,10 @@
       How it all started?
     </h1>
     <div
-      :class="
-        width > 1399 && width < 1536 ? '2xl:!w-full' : '2xl:!w-[1535px]'
-      "
+      :class="width > 1399 && width < 1536 ? '2xl:!w-full' : '2xl:!w-[1535px]'"
       class="flex flex-row items-center mx-auto w-full xll:w-[1530px] 3xl:w-[1595px] xl:pt-20"
     >
-      <div
-        class="flex flex-col w-[60%] xll:w-[70%] overflow-hidden py-40"
-      >
+      <div class="flex flex-col w-[60%] xll:w-[70%] overflow-hidden py-40">
         <div class="relative">
           <ul
             ref="years"

nuxt-frontend/components/about/WithCanopas.vue

@@ -57,9 +57,7 @@
               <img
                 :src="phase.image"
                 class="w-full h-full object-cover"
-                :class="
-                  phase.title == 'Marketing' ? 'h-full md:h-[84%]' : ''
-                "
+                :class="phase.title == 'Marketing' ? 'h-full md:h-[84%]' : ''"
                 loading="lazy"
                 :alt="phase.alt"
               />

nuxt-frontend/components/android-app-development/BlogSection.vue

@@ -18,9 +18,7 @@
             class="relative flex flex-col"
           >
             <div class="overflow-hidden">
-              <div
-                class="scale-75 transition-all duration-200 ease-out"
-              >
+              <div class="scale-75 transition-all duration-200 ease-out">
                 <img
                   @click="openBlog(blog.link, 'tap_android_app_blog_section')"
                   :src="blog.image[0]"
@@ -57,9 +55,7 @@
     <div
       class="container flex hidden flex-col lg:block lg:min-h-[580px] lg:py-0"
     >
-      <p class="mb-8 text-center header-2 text-black-core/[0.87]">
-        Our blogs
-      </p>
+      <p class="mb-8 text-center header-2 text-black-core/[0.87]">Our blogs</p>
       <div class="flex flex-row space-x-5 space-y-1">
         <div
           @click="openBlog(blog.link, 'tap_android_app_blog_section')"

nuxt-frontend/components/android-app-development/CaseStudySection.vue

@@ -32,10 +32,7 @@
             loading="lazy"
           />
 
-          <div
-            :class="item.textalign"
-            class="absolute bottom-4 flex flex-col"
-          >
+          <div :class="item.textalign" class="absolute bottom-4 flex flex-col">
             <span class="header-2 text-black-core/[0.87]">{{
               item.title
             }}</span>
@@ -129,18 +126,14 @@
                 alt="case_study_result_image"
               />
 
-              <div
-                class="bg-white drop-shadow-md rounded lg:w-[457px]"
-              >
+              <div class="bg-white drop-shadow-md rounded lg:w-[457px]">
                 <div class="inline-flex p-2 lg:p-4">
                   <div class="p-[0.8rem]">
                     <span
                       class="font-opensans-semibold header-3 text-[#FF9472]"
                       >{{ item.resultcount[0] }}</span
                     >
-                    <div
-                      class="flex-1 text-black-core-[0.87] sub-h3-regular"
-                    >
+                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
                       <span>Downloads</span>
                     </div>
                   </div>
@@ -149,9 +142,7 @@
                       class="font-opensans-semibold header-3 text-[#FF9472]"
                       >{{ item.resultcount[1] }}</span
                     >
-                    <div
-                      class="flex-1 text-black-core-[0.87] sub-h3-regular"
-                    >
+                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
                       <span>App Rating</span>
                     </div>
                   </div>
@@ -160,9 +151,7 @@
                       class="font-opensans-semibold header-3 text-[#FF9472]"
                       >{{ item.resultcount[2] }}</span
                     >
-                    <div
-                      class="flex-1 text-black-core-[0.87] sub-h3-regular"
-                    >
+                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
                       <span>Monthly Users</span>
                     </div>
                   </div>
@@ -185,9 +174,7 @@
             </div>
           </div>
         </swiper-slide>
-        <div
-          class="absolute top-0 left-0 w-full h-1 bg-black-core/[0.08]"
-        >
+        <div class="absolute top-0 left-0 w-full h-1 bg-black-core/[0.08]">
           <div
             class="progressbar h-1 bg-gradient-to-r from-[#FF835B] to-[#F2709C] rounded-xl"
             ref="progressBar"

nuxt-frontend/components/android-app-development/CtaSection.vue

@@ -46,9 +46,7 @@
         >
           <span>Let’s talk about what we can build and scale together.</span>
         </div>
-        <div
-          class="ml-auto mt-4 lg:mt-10 xl:!ml-[14%] 2xl:!ml-[-7%]"
-        >
+        <div class="ml-auto mt-4 lg:mt-10 xl:!ml-[14%] 2xl:!ml-[-7%]">
           <router-link
             class="gradient-btn primary-btn"
             to="/contact"

nuxt-frontend/components/android-app-development/DevelopmentSection.vue

@@ -2,16 +2,13 @@
   <div class="mt-16 md:mt-40 xl:mt-60 bg-white h-[70%]">
     <div class="sticky-parent">
       <div class="lg:sticky lg:!top-[128px] 3xl:!top-[500px]">
-        <div
-          class="container flex flex-col text-center xll:-mb-72"
-        >
+        <div class="container flex flex-col text-center xll:-mb-72">
           <span
             class="header-2 text-black-core/[0.87] lg:!mx-0 lg:!w-full xs:mx-auto xs:w-[71%]"
           >
             Android app development services</span
           >
-          <span
-            class="mt-4 md:mt-6 sub-h1-regular text-black-core/[0.60]"
+          <span class="mt-4 md:mt-6 sub-h1-regular text-black-core/[0.60]"
             >With over a decade of expertise in Android app development, our
             team can help you craft high- quality, user-friendly apps that drive
             business growth and customer engagement.</span
@@ -103,9 +100,7 @@
 
         <!-- ---------------------DESKTOP UI START------------------ -->
 
-        <div
-          class="sticky sticky main overflow-hidden hidden lg:block"
-        >
+        <div class="sticky main overflow-hidden hidden lg:block">
           <div class="flex">
             <div
               v-for="(item, index) in items"
@@ -130,9 +125,7 @@
                 class="ml-auto xll:ml-[12%] xll:ml-auto rounded-[1.25rem] p-[1.88rem] !w-[39.75rem] xl:!w-[45rem] mx-auto"
                 :class="[item.bgColor]"
               >
-                <div
-                  class="justify-left flex flex-row items-center"
-                >
+                <div class="justify-left flex flex-row items-center">
                   <img
                     alt="development-icon"
                     :src="item.icon"

nuxt-frontend/components/android-app-development/PinkCtaSection.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="relative md:h-[376px] xl:h-[476px] 3xl:outer-container"
-  >
+  <div class="relative md:h-[376px] xl:h-[476px] 3xl:outer-container">
     <img
       :src="background"
       alt="Background-Image"
@@ -12,19 +10,15 @@
       class="container absolute left-1/2 flex w-full -translate-x-1/2 -translate-y-[116%] xl:-translate-y-[120%] transform flex-row items-center lg:mt-4"
     >
       <div class="flex w-[66%]">
-        <div
-          class="w-[80%] py-5 text-white lg:w-[90%] xl:m-auto 2xl:w-9/12"
-        >
+        <div class="w-[80%] py-5 text-white lg:w-[90%] xl:m-auto 2xl:w-9/12">
           <p class="header-2">Whether you need...</p>
           <ul class="pt-6 sub-h1-semibold">
             <li v-for="reason in reasons" :key="reason" class="flex">
               <span class="pr-1">*</span>
               <div class="sm:w-[90%]">{{ reason }}</div>
             </li>
           </ul>
-          <div
-            class="text-white/[0.8] pb-8 pt-4 sub-h3-regular xl:w-[85%]"
-          >
+          <div class="text-white/[0.8] pb-8 pt-4 sub-h3-regular xl:w-[85%]">
             Bring us your toughest challenge and we'll show you the path to a
             sleek solution.
           </div>

nuxt-frontend/components/contact/NewContactForm.vue

@@ -53,9 +53,7 @@
                 class="absolute top-4 left-0 mb-5 text-black-core/[.6] font-inter-regular text-[1rem] md:text-[1.375rem] leading-[1.21rem] md:leading-[2.0625rem] transform -translate-y-4 origin-[0] scale-75 duration-300 peer-focus:text-black-core/[0.6] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                 >Your email</label
               >
-              <span
-                v-if="showEmailValidationError"
-                class="error text-red-600"
+              <span v-if="showEmailValidationError" class="error text-red-600"
                 >Email is required</span
               >
               <span
@@ -64,9 +62,7 @@
                 >Please enter valid email address</span
               >
             </div>
-            <div
-              class="relative md:col-span-2 mb-5 md:mb-5 pt-8 text-left"
-            >
+            <div class="relative md:col-span-2 mb-5 md:mb-5 pt-8 text-left">
               <textarea
                 class="block peer mx-0 w-full min-h-[50px] md:min-h-[90px] rounded-none border-b border-slate-400 bg-transparent px-0 transition ease-in-out appearance-none text-[1rem] md:text-[1.375rem] font-inter-regular leading-[1.21rem] md:leading-[2.0625rem] text-black-core placeholder-black-core/[.6] focus:outline-none active:outline-none"
                 id="project"
@@ -95,9 +91,7 @@
                 >This field is required</span
               >
             </div>
-            <div
-              class="relative md:col-span-2 pt-6 md:pt-8 text-left"
-            >
+            <div class="relative md:col-span-2 pt-6 md:pt-8 text-left">
               <input
                 class="block peer mx-0 w-full rounded-none border-b border-slate-400 bg-transparent px-0 transition ease-in-out appearance-none text-[1rem] md:text-[1.375rem] font-inter-regular text-black-core placeholder-black-core/[.6] focus:outline-none active:outline-none"
                 type="text"
@@ -175,9 +169,7 @@
                   </li>
                 </ul>
               </div>
-              <span
-                v-if="showInvestValidationError"
-                class="error text-red-600"
+              <span v-if="showInvestValidationError" class="error text-red-600"
                 >This field is required</span
               >
             </div>

nuxt-frontend/components/contact/thank-you/BenefitSection.vue

@@ -1,7 +1,5 @@
 <template>
-  <section
-    class="relative mt-[30px] xl:mt-[100px] 2xl:mt-[130px] mb-[150px]"
-  >
+  <section class="relative mt-[30px] xl:mt-[100px] 2xl:mt-[130px] mb-[150px]">
     <h1
       class="mt-8 mb-8 v2-canopas-gradient-text text-center text-[2.5rem] md:text-[3.5rem] lg:text-[5rem] leading-[3rem] md:leading-[4rem] lg:leading-[5.5rem] font-inter-bold"
     >
@@ -46,9 +44,7 @@
       </div>
     </div>
     <div class="lg:mt-32">
-      <div
-        class="xll:container absolute 2xl:inset-0 hidden lg:block"
-      >
+      <div class="xll:container absolute 2xl:inset-0 hidden lg:block">
         <img
           :src="width > 2440 ? benefitbg2Images[2] : benefitbg2Images[0]"
           :srcset="
@@ -201,8 +197,7 @@ For the sake of simplicity, we prefer using one channel once the contract is est
           title: `Transparency and honesty`,
           description: `We believe in building trust with our clients. That's why we are transparent and honest about our products or services. 
 You can expect clear and upfront pricing, honest product descriptions, and easy-to understand terms and conditions.`,
-          className:
-            "top-[4.5rem] left-12 w-[20%] h-[131px]   border-l-[3px]",
+          className: "top-[4.5rem] left-12 w-[20%] h-[131px]   border-l-[3px]",
           secondBorder:
             "top-[2.95rem] xl:top-[1.9rem] 2xl:top-[0.9rem]  left-[-5.4rem] xl:left-[-6.4rem] 2xl:left-[-7.335rem] h-[166px] xl:h-[199px] 2xl:h-[231px] border-l-[3px]  -rotate-90",
           thirdBorder:

nuxt-frontend/components/contact/thank-you/HappyClient.vue

@@ -1,12 +1,8 @@
 <template>
   <section>
     <div class="container my-20 md:my-32">
-      <div
-        class="flex flex-col lg:flex-row gap-y-20 xl:justify-between"
-      >
-        <div
-          class="flex flex-col items-center justify-center basis-[40%]"
-        >
+      <div class="flex flex-col lg:flex-row gap-y-20 xl:justify-between">
+        <div class="flex flex-col items-center justify-center basis-[40%]">
           <span
             class="text-[1.875rem] md:text-[3.4375rem] leading-[2.4375rem] md:leading-[5.15625rem] text-center lg:text-left font-inter-bold md:font-inter-semibold text-black-core/[0.87]"
             >Join our happy Clients!</span
@@ -74,9 +70,7 @@
                           alt="reviewClutchImage"
                         />
                       </div>
-                      <div
-                        class="flex flex-col mt-2.5 sm:mt-5 sm:justify-end"
-                      >
+                      <div class="flex flex-col mt-2.5 sm:mt-5 sm:justify-end">
                         <span class="flex flex-row">
                           <Icon
                             v-for="i in 5"

nuxt-frontend/components/contact/thank-you/ScheduleMeeting.vue

@@ -18,9 +18,7 @@
       <hr
         class="absolute top-[30.8rem] xl:top-[36.8rem] w-full h-[3px] hidden lg:block border-[1px] bg-gray-500"
       />
-      <div
-        class="container md:mx-auto lg:max-w-[652px] xl:max-w-[797px]"
-      >
+      <div class="container md:mx-auto lg:max-w-[652px] xl:max-w-[797px]">
         <p
           class="text-center font-inter-bold text-[1.125rem] md:text-[1.563rem] xl:text-[1.875rem] leading-[1.688rem] md:leading-[2.375rem] xl:leading-[2.813rem] text-black-core/[0.87]"
         >
@@ -118,9 +116,7 @@
               class="relative flex flex-col w-full border-1 border-gray border-solid rounded-md rounded-3xl bg-white bg-clip-padding outline-0"
             >
               <div class="relative flex-auto">
-                <CalendlyIframe
-                  class="w-full h-screen overflow-hidden"
-                />
+                <CalendlyIframe class="w-full h-screen overflow-hidden" />
 
                 <button
                   type="button"

nuxt-frontend/components/contributions/AnimatedCreation.vue

@@ -39,9 +39,7 @@
     </div>
     <!-- Mobile UI end -->
     <!-- Desktop UI start -->
-    <div
-      class="container mt-[50px] hidden flex-row gap-8 md:flex"
-    >
+    <div class="container mt-[50px] hidden flex-row gap-8 md:flex">
       <div class="flex w-[50%] flex-col gap-8">
         <div v-for="animation in animations.slice(0, 3)" :key="animation.id">
           <div

nuxt-frontend/components/contributions/DesignExplore.vue

@@ -22,9 +22,7 @@
               v-for="(item, index) in mobileGrid"
               :key="index"
               class="ml-8 flex flex-[0_0_320px] flex-col justify-center rounded-2xl text-left text-[1rem] leading-[1.125rem] sm:flex-[0_0_480px] md:text-[1.0625rem] md:leading-[1.5rem] lg:flex-[0_0_528px] lg:text-[1.1875rem] lg:leading-[1.875rem]"
-              :class="
-                pausedId == index ? 'scale-[0.97] cursor-pointer' : ''
-              "
+              :class="pausedId == index ? 'scale-[0.97] cursor-pointer' : ''"
               @mouseover="pausedId = index"
               @mouseleave="pausedId = 0"
               @touchstart.passive="pausedId = index"

nuxt-frontend/components/contributions/DesktopLanding.vue

@@ -2,9 +2,7 @@
   <section
     class="mb-48 2xl:mb-56 2xll:mb-64 xll:mb-[25rem] mt-[25px] bg-gradient-to-r from-[#FFFFFF] via-[#F2709C]/[0.05] to-[#FFFFFF] bg-gradient-[180.05deg]"
   >
-    <div
-      class="relative xll:container w-full h-full pb-16 lg:pt-12"
-    >
+    <div class="relative xll:container w-full h-full pb-16 lg:pt-12">
       <div
         class="flex flex-col items-center mx-auto w-[52%] lg:w-[55%] xl:w-[62%] 2xll:w-[45%] xll:w-[60%] 3xl:w-[60%] md:text-center"
       >
@@ -90,8 +88,7 @@
             >
               3K+</span
             >
-            <span
-              class="mt-2.5 font-inter-medium text-base text-white"
+            <span class="mt-2.5 font-inter-medium text-base text-white"
               >Daily Visitors on Our Blog
             </span>
           </div>