From 281b8d8b55f02ebe2f985b1e10099327dc1ea5fd Mon Sep 17 00:00:00 2001
From: Ashish <ashish.k@canopas.com>
Date: Wed, 8 Nov 2023 10:42:22 +0530
Subject: [PATCH] ctaSection added calc for image height adjust

---
 .../flutter-app-development/CtaSection.vue         | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection.vue b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
index 82dec8b8a..c062e0aac 100644
--- a/nuxt-frontend/components/flutter-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
@@ -1,32 +1,32 @@
 <template>
   <section>
-    <div class="relative h-[40vh] lg:h-[34.5rem]">
+    <div class="relative h-[40vh] lg:h-[476px]">
       <img
         :src="background400"
         :srcset="`${background400} 400w, ${background800} 800w`"
-        class="h-full w-full object-cover opacity-20 lg:hidden"
+        class="h-full w-full object-fill opacity-10 lg:hidden"
         alt="flutter-cta"
         loading="lazy"
       />
       <img
         :src="background1200"
         :srcset="`${background1200} 1200w, ${background2400} 2400w`"
-        class="h-full w-full object-cover opacity-20 hidden lg:block"
+        class="h-full w-full object-fill opacity-10 hidden lg:block"
         alt="flutter-cta"
         loading="lazy"
       />
-      <div class="absolute top-0 w-full h-full">
+      <div class="absolute top-16 lg:top-12 xl:top-8 2xl:top-12 w-full">
         <div
-          class="flex flex-col lg:flex-row container gap-1 lg:gap-[5.25rem] text-center mt-16"
+          class="flex flex-col lg:flex-row container gap-1 lg:gap-[5.25rem] text-center lg:[&_img]:h-[calc(476px-theme(spacing.16)-1rem)]"
         >
           <img
             :src="hex"
-            class="flex-1 w-full h-full object-cover hidden lg:block"
+            class="w-full h-full object-contain flex-1 hidden lg:block"
             alt="flutter-hex-image"
             loading="lazy"
           />
           <div
-            class="flex flex-col gap-4 lg:gap-6 lg:text-left lg:flex-1 lg:my-auto"
+            class="flex flex-col gap-4 lg:gap-6 lg:text-left lg:flex-1 my-auto"
           >
             <div class="text-black-core/[0.87]">
               <p class="header-1">Let's code your success story together!</p>