color corrections updated

app/careers/careers.module.css

@@ -241,7 +241,7 @@
     position: absolute;
     left: 25px;
     /* Center of numbering */
-    top: 170px;
+    top: 220px;
     /* Start below the first number to avoid line going above */
     bottom: 55px;
     /* End before last number */
@@ -285,6 +285,22 @@
     line-height: 1.6;
 }
 
+/* Hiring Process Visibility Fix: 
+   Makes text white on dark image and black on white background during scroll 
+*/
+@media (max-width: 899px){
+  .processList h2,
+  .processList .subTitle,
+  .processContent h4,
+  .processContent p {
+    color: white !important;
+    mix-blend-mode: difference;
+    z-index: 10;
+    position: relative;
+  }
+}
+
+
 
 /* 4. Benefits / Ultimate Experience (Vertical Connected Cards) */
 .benefitsSection {

app/channels/[slug]/channel-page.module.css

@@ -99,15 +99,17 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 400px;
+    /* min-height: 400px; Reduced to decrease vertical space */
-    padding: 2rem;
+    /* padding: 2rem 0; */
+    /* Reduced padding */
 }
 
 .aboutMainImgWrapper {
     position: relative;
     z-index: 2;
     width: 100%;
-    max-width: 500px;
+    max-width: 400px;
+    /* Reduced from 500px */
     aspect-ratio: 1;
     border-radius: 24px;
     overflow: hidden;
@@ -120,7 +122,8 @@
     left: 50%;
     z-index: 1;
     width: 100%;
-    max-width: 500px;
+    max-width: 400px;
+    /* Reduced to match wrapper */
     height: auto;
     /* Let it match aspect ratio via padding-bottom usually, but here using aspect-ratio property */
     aspect-ratio: 1;
@@ -190,7 +193,7 @@
 
 /* --- Section 2: Benefits --- */
 .benefitsSection {
-    padding: 6rem 0;
+    padding: 4rem 0;
     background: var(--background-secondary);
 }
 
@@ -311,7 +314,7 @@
 
 /* --- Section 3: Testimonials (New Split Layout) --- */
 .testimonialSection {
-    padding: 6rem 0;
+    padding: 4rem 0;
     background: #fff;
     overflow: hidden;
 }
@@ -677,6 +680,7 @@
     transition: transform 0.2s;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     display: inline-block;
+    text-decoration: none;
 }
 
 .ctaFullBtn:hover {

app/contact/contact.module.css

@@ -178,7 +178,7 @@
 }
 
 .iconBox {
-    background: var(--text-primary);
+    background: #2563eb;
     /* Dark background for icon box */
     width: 40px;
     height: 40px;
@@ -186,7 +186,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--yellow);
+    color: #fff;
     /* Yellow/Gold icon color */
     margin-bottom: 0.5rem;
 }
@@ -235,7 +235,7 @@
 .formWrapper {
     background: #eef6f6;
     /* Light greenish-blue background as in image */
-    padding: 3rem;
+    /* padding: 3rem; */
     border-radius: 20px;
 }
 
@@ -299,7 +299,7 @@
 }
 
 .submitBtn {
-    background: var(--text-primary);
+    background: #2563eb;
     /* Dark blue button */
     color: white;
     padding: 1rem 2rem;

app/features/[slug]/feature-page.module.css

@@ -301,7 +301,7 @@
 /* Right side: Slider Styles (Used by Client Component) */
 .testimonialSliderContainer {
     position: relative;
-    padding: 2rem;
+    padding: 2rem 2rem 0;
 }
 
 .testSliderContent {
@@ -450,6 +450,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
+    text-decoration: none;
 }
 
 /* --- Section 5: FAQ --- */
@@ -571,6 +572,7 @@
     transition: transform 0.2s;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     display: inline-block;
+    text-decoration: none;
 }
 
 .ctaFullBtn:hover {

app/features/features.module.css

@@ -131,7 +131,7 @@
 
 .ctaSection {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    padding: 5rem 0;
+    padding: 4rem 0;
     text-align: center;
     color: white;
     margin-top: 4rem;

app/globals.css

@@ -27,11 +27,11 @@
   --background-secondary: #f8fafc;
   --bg-primary: #ffffff;
   --card-bg: #ffffff;
-  --foreground: #0072b1;
+  --foreground: #0f172a;
   --foreground-secondary: #475569;
 
   /* Text Colors */
-  --text-primary: #0072b1;
+  --text-primary: #0f172a;
   --text-secondary: #475569;
 
   /* Borders */
@@ -265,7 +265,7 @@ section:nth-child(even) {
 
 /* Ensure spacing consistency */
 .section {
-  padding: 5rem 0;
+  padding: 4rem 0;
   /* Default mobile padding */
 }
 
@@ -288,7 +288,7 @@ section:nth-child(even) {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
+  padding: 0.75rem 1rem;
   font-weight: 600;
   border-radius: var(--radius-lg);
   transition: all 0.3s ease;

app/pricing/pricing.module.css

@@ -64,7 +64,7 @@
 .faqContainer {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 3rem;
+    /* gap: 3rem; */
     align-items: start;
 }
 
@@ -78,7 +78,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 2rem 0;
+    /* padding: 2rem 0; */
 }
 
 .imageFrameWrapper {

app/resources/resources.module.css

@@ -210,12 +210,21 @@
 .detailImageWrapper {
     max-width: 1000px;
     height: 400px;
-    margin: 3rem auto;
+    margin: 4rem auto;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
 }
 
+@media (max-width: 768px) {
+    .detailImageWrapper {
+        height: auto;
+        aspect-ratio: 16/9;
+        margin: 2rem auto;
+        border-radius: 12px;
+    }
+}
+
 .detailImageWrapper img {
     width: 100%;
     height: 100%;

components/CTA.module.css

@@ -191,3 +191,84 @@
 .standaloneBtn:hover .arrow {
     transform: translateX(5px);
 }
+
+@media (max-width: 1024px) {
+    .floatIcon {
+        transform: scale(0.8);
+    }
+
+    .icon3 {
+        left: 10%;
+        top: 5%;
+    }
+
+    .icon4 {
+        right: 5%;
+        top: 8%;
+    }
+
+    .icon5 {
+        display: none;
+    }
+
+    .icon7 {
+        left: 5%;
+        bottom: 10%;
+    }
+
+    .icon8 {
+        right: 5%;
+        bottom: 10%;
+    }
+}
+
+@media (max-width: 768px) {
+    .floatIcon {
+        transform: scale(0.7);
+        opacity: 0.6;
+        /* Reduce visibility distraction */
+    }
+
+    .ctaSection {
+        padding: 4rem 1rem;
+    }
+
+    /* Push all to edges */
+    .icon1 {
+        left: 2%;
+        top: 10%;
+    }
+
+    .icon2 {
+        display: none;
+    }
+
+    .icon3 {
+        display: none;
+    }
+
+    /* Hide intrusive top ones */
+    .icon4 {
+        right: 2%;
+        top: 10%;
+    }
+
+    .icon5 {
+        display: none;
+    }
+
+    .icon6 {
+        right: 2%;
+        top: 40%;
+    }
+
+    .icon7 {
+        left: 2%;
+        bottom: 5%;
+    }
+
+    .icon8 {
+        right: 2%;
+        bottom: 5%;
+    }
+}

components/CoreServices.module.css

@@ -1,5 +1,5 @@
 .section {
-    padding: 5rem 0;
+    padding: 4rem 0;
     position: relative;
     background: var(--background);
     overflow: hidden;
@@ -340,6 +340,8 @@
 @media (max-width: 767px) {
     .gridContainer {
         grid-template-columns: 1fr;
+        padding-right: 0.5rem;
+        /* Ensure right space */
     }
 
     .columnCenter {
@@ -351,4 +353,11 @@
     .centralVisual {
         transform: scale(0.9);
     }
+
+    .serviceItem {
+        padding-right: 10px;
+        /* Force internal spacing */
+        max-width: 100%;
+        box-sizing: border-box;
+    }
 }

components/Footer.module.css

@@ -2,7 +2,7 @@
     background: linear-gradient(135deg, #a855f7, #ec4899);
     /* Purple/Pink gradient per user image */
     color: white;
-    padding: 6rem 0 3rem;
+    padding: 4rem 0 3rem;
     /* Increase top padding */
     position: relative;
     margin-top: 0;
@@ -79,6 +79,7 @@
     border-radius: var(--radius-lg);
     text-decoration: none;
     font-size: 1.25rem;
+    color: #fff;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
 }
@@ -147,6 +148,7 @@
 .copyright {
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.9rem;
+    text-align: center;
 }
 
 .badges {

components/Hero.module.css

@@ -102,7 +102,7 @@
 
 .badgeText {
     font-size: 0.9rem;
-    color: #0072b1;
+    color: #0f172a;
     font-weight: 500;
 }
 
@@ -110,7 +110,7 @@
     font-size: clamp(2.5rem, 5vw, 4rem);
     line-height: 1.1;
     font-weight: 800;
-    color: #0072b1;
+    color: #0f172a;
     /* Dark text */
     margin-bottom: 1.5rem;
 }
@@ -299,7 +299,7 @@
 
 .cardText strong {
     font-size: 0.9rem;
-    color: #0072b1;
+    color: #0f172a;
 }
 
 .cardText span {
@@ -335,7 +335,7 @@
 .userCount {
     font-size: 1.1rem;
     font-weight: 700;
-    color: #0072b1;
+    color: #0f172a;
     display: flex;
     flex-direction: column;
     margin-bottom: 0.5rem;
@@ -410,7 +410,7 @@
 
 .msgText p {
     font-size: 0.85rem;
-    color: #0072b1;
+    color: #0f172a;
     font-weight: 500;
     margin: 0;
 }

components/HowItWorks.module.css

@@ -272,3 +272,22 @@
         height: 20px;
     }
 }
+
+@media (max-width: 400px) {
+    .cardCapsule {
+        padding-right: 4rem;
+        /* Ensure text doesn't hit the absolute icon */
+    }
+
+    .iconCircle {
+        width: 32px;
+        height: 32px;
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .iconCircle svg {
+        width: 16px;
+        height: 16px;
+    }
+}

components/Navbar.module.css

@@ -15,6 +15,11 @@
     box-shadow: var(--shadow-md);
 }
 
+.navbar.mobileOpen {
+    background: #ffffff;
+    box-shadow: var(--shadow-md);
+}
+
 
 
 .navContent {
@@ -125,7 +130,7 @@
     padding: 0;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 992px) {
     .mobileMenuBtn {
         display: none;
     }
@@ -179,7 +184,7 @@
     animation: fadeIn 0.3s ease-out;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 992px) {
     .mobileMenu {
         display: none;
     }
@@ -205,6 +210,7 @@
     gap: 1rem;
     margin-top: 1rem;
 }
+
 .navItem {
     position: relative;
     height: 100%;

components/Navbar.tsx

@@ -34,7 +34,7 @@ export default function Navbar() {
             ]
         },
         {
-            href: '/channels',
+            href: '#',
             label: 'Channels',
             dropdown: [
                 { href: '/channels/facebook', label: 'Facebook' },
@@ -53,7 +53,7 @@ export default function Navbar() {
     ];
 
     return (
-        <nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''}`}>
+        <nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''} ${isMobileMenuOpen ? styles.mobileOpen : ''}`}>
             <div className="container">
                 <div className={styles.navContent}>
                     {/* Logo */}

components/SocialConnect.module.css

@@ -73,7 +73,7 @@
 /* Arc Container */
 .arcContainer {
     position: relative;
-    height: 500px;
+    height: 470px;
     margin-top: 2rem;
     width: 100%;
     max-width: 900px;
@@ -322,6 +322,10 @@
         left: auto;
         transform: none;
         margin: 2rem auto;
+        max-width: 100%;
+        /* Restrict width */
+        padding: 0 1rem;
+        /* Add internal breathing room */
     }
 
     .moreServicesBtn {

components/Testimonials.module.css

@@ -276,18 +276,59 @@
     .sliderContainer {
         padding: 0;
         mask-image: none;
-        overflow: visible;
+        overflow: hidden;
+        /* Restore hidden overflow for slider */
     }
 
     .sliderTrack {
-        /* On mobile, maybe snap scroll? */
-        overflow-x: auto;
         padding-bottom: 2rem;
-        transform: none !important;
+        /* Re-enable JS slider */
-        /* Disable JS slide on mobile if preferring native scroll */
+        /* overflow-x: auto; */
+        /* transform: none !important; */
     }
 
     .sliderCard {
         flex: 0 0 280px;
     }
 }
+
+@media (max-width: 480px) {
+    .layoutContainer {
+        padding: 0 1rem;
+        width: 100%;
+        overflow: hidden;
+        /* Prevent container burst */
+    }
+
+    .leftCard {
+        padding: 2.5rem 1.5rem;
+        width: 100%;
+        margin-right: 0;
+        border-radius: 20px;
+    }
+
+    .cardTitle {
+        font-size: 2rem;
+    }
+
+    .sliderTrack {
+        /* Ensure track aligns well */
+        gap: 1rem;
+    }
+
+    .sliderCard {
+        flex: 0 0 260px;
+        /* Slightly smaller card for small mobile */
+        padding: 1.5rem;
+    }
+
+    /* Stack stats one by one on mobile */
+    .miniStats {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .statBadge {
+        width: 100%;
+    }
+}

components/Testimonials.tsx

@@ -12,35 +12,35 @@ export default function Testimonials() {
         {
             name: 'Rahul Mehta',
             role: 'Growth Manager',
-            reviewTitle:'Highly Impressive Results!',
+            reviewTitle: 'Highly Impressive Results!',
             text: 'The performance insights are extremely clear. We can now adjust campaigns quickly and make confident marketing decisions.',
             image: '👩‍💼'
         },
         {
             name: 'Emily Carter',
             role: 'Content Strategist',
-            reviewTitle:'Smooth and Reliable Platform!',
+            reviewTitle: 'Smooth and Reliable Platform!',
             text: 'Managing posts feels effortless now. Planning content ahead of time has significantly improved our publishing consistency.',
             image: '👨‍💻'
         },
         {
             name: 'Arjun Nair',
             role: 'Digital Consultant',
-            reviewTitle:'Excellent Tool for Teams!',
+            reviewTitle: 'Excellent Tool for Teams!',
             text: 'Collaboration is seamless and approvals are faster. It has simplified how we handle multiple client accounts.',
             image: '👩‍🎨'
         },
         {
             name: 'Sophia Williams',
             role: 'Brand Manager',
-            reviewTitle:'Well Designed and Effective!',
+            reviewTitle: 'Well Designed and Effective!',
             text: 'The interface is clean and easy to navigate. Tracking engagement across platforms has never been this simple.',
             image: '👨‍💼'
         },
         {
             name: 'Daniel Rodrigues',
             role: ' Marketing Lead',
-            reviewTitle:'Strong Value for Growth!',
+            reviewTitle: 'Strong Value for Growth!',
             text: 'The reporting features save us hours every week. Insights are easy to understand and useful for strategy planning.',
             image: '👩‍🦰'
         },
@@ -63,8 +63,8 @@ export default function Testimonials() {
         if (isResetting) return;
 
         setActiveIndex((prev) => {
-            // If we are at the end of the original list (showing the first clone)
+            // If already at totalOriginal, wait for reset effect
-            // We animate TO the clone.
+            if (prev >= totalOriginal) return prev;
             return prev + 1;
         });
     };
@@ -94,6 +94,7 @@ export default function Testimonials() {
 
     const slideNext = () => {
         if (isResetting) return;
+        if (activeIndex >= totalOriginal) return; // Wait for reset
         setActiveIndex(prev => prev + 1);
     };
 

components/WhyChooseUs.module.css

@@ -1,5 +1,5 @@
 .section {
-    padding: 5rem 0;
+    padding: 4rem 0;
     position: relative;
     background: var(--background);
     overflow: hidden;