From 2d4fe15c1c46f7cbc4a9892eeae0d04714e007f7 Mon Sep 17 00:00:00 2001
From: Tanav Poswal <tanavposwal939@gmail.com>
Date: Fri, 25 Sep 2026 20:14:43 +0530
Subject: [PATCH 1/7] fix the resposiveness of quote block

Signed-off-by: Tanav Poswal <tanavposwal939@gmail.com>
---
 src/components/Inline-quotes/index.js | 47 +++++++++++++++++----------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index 18b1a0928d0494..4771e78441e34b 100644
--- a/src/components/Inline-quotes/index.js
+++ b/src/components/Inline-quotes/index.js
@@ -14,14 +14,14 @@ const QuotesWrapper = styled.div`
     gap: 1.5rem;
     border: 2px solid transparent;
     border-image: linear-gradient(
-      to right bottom, 
-      #00b39f, 
-      ${props => props.theme.DarkTheme ? "#121212" : "#fff"} 80%
+      to right bottom,
+      #00b39f,
+      ${(props) => (props.theme.DarkTheme ? "#121212" : "#fff")} 80%
     );
     border-image-slice: 1 0 1 1;
     transition: border-image 0.6s ease-in-out;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex-direction: column;
       padding: 1.5rem 1rem;
       gap: 1rem;
@@ -34,24 +34,24 @@ const QuotesWrapper = styled.div`
 
   .border {
     border-image: linear-gradient(
-      to left top, 
-      #00b39f, 
-      ${props => props.theme.DarkTheme ? "#121212" : "#fff"} 80%
+      to left top,
+      #00b39f,
+      ${(props) => (props.theme.DarkTheme ? "#121212" : "#fff")} 80%
     );
     border-image-slice: 1 1 1 0;
   }
 
   h4 {
-    flex: ${props => props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%"};
+    flex: ${(props) => (props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%")};
     margin: 0;
-    color: ${props => props.theme.primaryColor};
+    color: ${(props) => props.theme.primaryColor};
     font-size: clamp(1rem, 2.5vw, 1.25rem);
     font-weight: 100;
     font-style: italic;
     line-height: 1.6;
-    text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
+    text-align: ${(props) => (props.$onlyQuoteIsPresent ? "center" : "right")};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex: 0 0 100%;
       text-align: center;
       line-height: 1.5;
@@ -71,26 +71,30 @@ const QuotesWrapper = styled.div`
     flex: 2 1 0;
     flex-direction: column;
     justify-content: center;
+    min-width: 0;
     padding: 0 1rem;
     text-align: left;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
+      width: 100%;
       padding: 0;
       text-align: center;
     }
-   
+
     h5 {
       margin: 0 0 0.5rem 0;
       padding: 0.1rem;
       font-size: clamp(0.875rem, 2vw, 1rem);
       font-weight: bold;
       text-transform: uppercase;
+      overflow-wrap: anywhere;
     }
 
     p {
       margin: 0;
       font-size: clamp(0.8rem, 1.8vw, 0.9rem);
       line-height: 1.4;
+      overflow-wrap: anywhere;
 
       @media (max-width: 500px) {
         line-height: 1.3;
@@ -103,14 +107,16 @@ const QuotesWrapper = styled.div`
     height: 5rem;
     margin: 0;
     border: none;
-    border-left: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
+    border-left: 1px solid
+      ${(props) => (props.theme.DarkTheme ? "#444" : "#ddd")};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       width: clamp(150px, 60%, 200px);
       height: 0;
       margin: 0.5rem auto;
       border-left: none;
-      border-top: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
+      border-top: 1px solid
+        ${(props) => (props.theme.DarkTheme ? "#444" : "#ddd")};
     }
   }
 
@@ -119,7 +125,9 @@ const QuotesWrapper = styled.div`
     align-items: center;
     gap: 1rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
+      width: 100%;
+      min-width: 0;
       flex-direction: column;
       gap: 0.75rem;
     }
@@ -138,7 +146,10 @@ const InlineQuotes = ({ person, title, quote, image }) => {
 
   return (
     <QuotesWrapper $onlyQuoteIsPresent={!showAuthorSection}>
-      <div className={quoteInView ? "quote-box border" : "quote-box"} ref={quoteRef}>
+      <div
+        className={quoteInView ? "quote-box border" : "quote-box"}
+        ref={quoteRef}
+      >
         <h4>❝ {quote} ❞</h4>
         {showAuthorSection && (
           <>

From 34e001562537839756b849e02e893b4594cb96f0 Mon Sep 17 00:00:00 2001
From: Tanav Poswal <tanavposwal939@gmail.com>
Date: Fri, 25 Sep 2026 20:23:05 +0530
Subject: [PATCH 2/7] fixing the resposiveness of featuer carousel

Signed-off-by: Tanav Poswal <tanavposwal939@gmail.com>
---
 .../FeaturesCarousel.style.js                 | 359 +++++++++---------
 1 file changed, 180 insertions(+), 179 deletions(-)

diff --git a/src/components/Features-carousel/FeaturesCarousel.style.js b/src/components/Features-carousel/FeaturesCarousel.style.js
index fba8bb303d04cb..304ba1673ef6df 100644
--- a/src/components/Features-carousel/FeaturesCarousel.style.js
+++ b/src/components/Features-carousel/FeaturesCarousel.style.js
@@ -1,223 +1,224 @@
 import styled from "styled-components";
 
 export const FeaturesWrapper = styled.div`
-    .features-carousel {
-      width: 100%;
+  .features-carousel {
+    width: 100%;
+    display: block;
+    min-height: 400px;
+    height: auto;
+    padding-bottom: 2rem;
+    visibility: visible;
+    opacity: 1;
+    overflow: visible;
+
+    @media (min-width: 768px) {
+      display: none;
+    }
+
+    .slick-slider,
+    .slick-list,
+    .slick-track,
+    .slick-slide {
       display: block;
-      min-height: 400px;
+      min-height: 200px;
       height: auto;
-      padding-bottom: 2rem;
       visibility: visible;
-      opacity: 1;
-      overflow: visible;
+    }
+    .slick-slide > div {
+      height: 100%; /* Ensure inner div takes height */
+      min-height: 200px;
+    }
 
-      @media (min-width: 768px) {
-       display:none;
-      }
+    img {
+      object-fit: contain;
+      margin-left: auto;
+      margin-right: auto;
+    }
 
-      .slick-slider, .slick-list, .slick-track, .slick-slide {
-        display: block;
-        min-height: 200px;
-        height: auto;
-        visibility: visible;
-      }
-      .slick-slide > div {
-          height: 100%; /* Ensure inner div takes height */
-          min-height: 200px;
-      }
+    .main-heading {
+      margin-bottom: 2rem;
+      text-align: center;
+    }
 
-      img{
-        object-fit:contain;
-        margin-left:auto;
-        margin-right:auto;
-      }
-     
-      .main-heading{
-        margin-bottom: 2rem;
-        text-align: center;
+    .feature {
+      border-left: none;
+      padding-left: 0;
+      margin: 40px 0 17px;
+
+      & p {
+        margin: 8px 0 0;
       }
+    }
 
-      .feature {
-        border-left: none;
-        padding-left: 0;
-        margin: 40px 0 17px;
+    & .body {
+      opacity: 1;
+      max-height: unset;
+    }
 
-        & p {
-          margin: 8px 0 0;
-        }
+    /* nuka-carousel overrides */
+    & :global {
+      & .slider-frame,
+      & .slider-slide:focus:not(:focus-visible) {
+        outline: none !important;
       }
+    }
 
-      & .body {
-        opacity: 1;
-        max-height: unset;
+    .slick-slider {
+      .slick-dots li button:before {
+        font-size: 0.6rem;
+        color: ${(props) => props.theme.secondaryColor};
       }
 
-      /* nuka-carousel overrides */
-      & :global {
-        & .slider-frame,
-        & .slider-slide:focus:not(:focus-visible) {
-          outline: none !important;
-        }
+      .slick-dots li.slick-active button:before {
+        opacity: 1;
+        color: ${(props) => props.theme.secondaryColor};
       }
+    }
+  }
 
-      .slick-slider{
-        .slick-dots li button:before {
-          font-size: 0.6rem;
-          color: ${props => props.theme.secondaryColor};
-        }
+  .features {
+    display: none;
 
-        .slick-dots li.slick-active button:before {
-          opacity: 1;
-          color: ${props => props.theme.secondaryColor};
-        }
-      }
+    @media (min-width: 768px) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      grid-column-gap: 40px;
+      min-height: auto;
+      overflow-anchor: none;
+      align-items: center;
+    }
+  }
+
+  .feature {
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    border-left: 2px solid;
+    border-color: ${(props) => props.theme.bodyRevert};
+    padding-left: 44px;
+    margin: 28px 0;
+    min-height: auto;
+
+    & p {
+      margin: 0 0 8px;
+      font-size: 1rem;
+    }
+  }
+
+  .active-feature {
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    border-color: ${(props) => props.theme.grey212121ToBlack};
+    padding-top: 0;
+    @media (min-width: 768px) {
+      border-color: ${(props) => props.theme.grey212121ToBlack};
+      background-color: ${(props) => props.theme.grey212121ToBlack};
+      border-radius: 20px;
+      padding: 3rem 2.75rem 2rem 2.75rem;
     }
 
-    .features {
-      display: none;
+    & .body {
+      opacity: 1;
+      font-size: 1rem;
+      max-height: none;
 
       @media (min-width: 768px) {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-column-gap: 40px;
-        min-height: auto;
-        overflow-anchor: none;
-        align-items: center;
+        color: ${(props) => props.theme.white};
       }
     }
 
-    .feature {
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      border-left: 2px solid;
-      border-color: ${props => props.theme.bodyRevert};
-      padding-left: 44px;
-      margin: 28px 0;
-      min-height: auto;
-
-      & p {
-        margin: 0 0 8px;
-        font-size: 1rem;
+    & .heading {
+      pointer-events: none;
+      @media (min-width: 768px) {
+        color: ${(props) => props.theme.white};
       }
     }
+  }
+
+  .body {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    font-size: 15px;
+    transition:
+      opacity 0.3s,
+      max-height 0.3s;
+  }
+
+  .options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .heading {
+    text-align: left;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: 20px;
+    font-weight: 600;
+    box-shadow: none;
+    color: ${(props) => props.theme.text};
+    cursor: pointer;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    :hover {
+      color: #00b39f;
+      transition: all 0.2s ease-in-out;
+    }
+  }
 
-    .active-feature {
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      border-color: ${props => props.theme.grey212121ToBlack};
-      padding-top: 0;
-      @media (min-width: 768px){
-        border-color: ${props => props.theme.grey212121ToBlack};
-        background-color: ${props => props.theme.grey212121ToBlack};
-        border-radius: 20px;
-        padding: 3rem 2.75rem 2rem 2.75rem;
-      }
-
-      & .body {
-        opacity: 1;
-        font-size: 1rem;
-        max-height: 200px;
-
-        @media (min-width: 768px){
-            color: ${props => props.theme.white};
-        }
-      }
-
-      & .heading {
-        pointer-events: none;
-        @media (min-width: 768px){
-            color: ${props => props.theme.white};
-        }
+  .terminal-wrapper {
+    & > div {
+      max-width: 100%;
+      @media (max-width: 768px) {
+        maxheight: 380px;
+        height: 380px;
+        overflow-y: scroll;
       }
     }
 
-    .body {
-      opacity: 0;
-      max-height: 0;
-      overflow: hidden;
-      font-size: 15px;
-      transition: opacity 0.3s, max-height 0.3s;
-    }
-
-    .options {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    .heading {
-      text-align: left;
-      background: none;
-      border: none;
-      padding: 0;
-      font-size: 20px;
-      font-weight: 600;
-      box-shadow: none;
-      color: ${props => props.theme.text};
-      cursor: pointer;
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      :hover {
-        color: #00b39f;
-        transition: all 0.2s ease-in-out;
-      }
+    & > img {
+      width: 100%;
+      height: auto;
+      object-fit: contain;
     }
 
-    .terminal-wrapper {
-      & > div {
-        max-width: 100%;
-        @media (max-width: 768px) {
-            maxHeight: 380px;
-            height: 380px;
-            overflow-y:scroll;
-        }
-      }
+    @media (min-width: 768px) {
+      width: 100%;
+      min-width: 0;
 
-      & > img {
-        width: 100%;
+      & > div {
         height: auto;
-        object-fit:contain;
       }
+    }
+  }
 
-      @media (min-width: 768px) {
-        width: 400px;
-
-        & > div {
-          height: auto;
-        }
-      }
+  .learn-more-link {
+    display: none;
+    text-align: left;
+    transition: all 0.3s linear;
+    color: ${(props) => props.theme.white};
 
-      @media (min-width: 900px) {
-        width: 600px;
-      }
+    svg {
+      margin-left: 0;
+      font-size: 27px;
+      transition: all 0.3s linear;
     }
 
-    .learn-more-link {
-      display: none;
-      text-align: left;
-      transition: all 0.3s linear;
-      color: ${props => props.theme.white};
-
-      svg{
-           margin-left: 0;
-           font-size: 27px;
-           transition: all 0.3s linear;
-       }
-
-      &:hover{
-        color: ${props => props.theme.secondaryColor};
-        svg{
-            margin-left: 3px;
-            transform: scale(1.2);
-        }
-      }
-      @media (min-width: 768px) {
-        display: flex;
-        align-items: center;
+    &:hover {
+      color: ${(props) => props.theme.secondaryColor};
+      svg {
+        margin-left: 3px;
+        transform: scale(1.2);
       }
     }
-   .feature-expose img{
-     display:flex;
-     justify-content:center;
-     align-items:center;
-     height:100%;
-   }
-
+    @media (min-width: 768px) {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .feature-expose img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
 `;

From aa0f5be9d484fda9d4b3a08520f227bf97a72124 Mon Sep 17 00:00:00 2001
From: tanav29 <tanavposwal939@gmail.com>
Date: Mon, 9 Nov 2026 19:20:14 +0530
Subject: [PATCH 3/7] fix: correct features carousel responsive layout

Signed-off-by: tanav29 <tanavposwal939@gmail.com>
---
 .../FeaturesCarousel.style.js                 |  9 ---
 src/components/Features-carousel/index.js     | 66 +++++++++++--------
 src/components/Inline-quotes/index.js         | 16 ++---
 3 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/src/components/Features-carousel/FeaturesCarousel.style.js b/src/components/Features-carousel/FeaturesCarousel.style.js
index 304ba1673ef6df..aaaf25bba65aab 100644
--- a/src/components/Features-carousel/FeaturesCarousel.style.js
+++ b/src/components/Features-carousel/FeaturesCarousel.style.js
@@ -90,7 +90,6 @@ export const FeaturesWrapper = styled.div`
   }
 
   .feature {
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     border-left: 2px solid;
     border-color: ${(props) => props.theme.bodyRevert};
     padding-left: 44px;
@@ -104,7 +103,6 @@ export const FeaturesWrapper = styled.div`
   }
 
   .active-feature {
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     border-color: ${(props) => props.theme.grey212121ToBlack};
     padding-top: 0;
     @media (min-width: 768px) {
@@ -137,9 +135,6 @@ export const FeaturesWrapper = styled.div`
     max-height: 0;
     overflow: hidden;
     font-size: 15px;
-    transition:
-      opacity 0.3s,
-      max-height 0.3s;
   }
 
   .options {
@@ -158,10 +153,8 @@ export const FeaturesWrapper = styled.div`
     box-shadow: none;
     color: ${(props) => props.theme.text};
     cursor: pointer;
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     :hover {
       color: #00b39f;
-      transition: all 0.2s ease-in-out;
     }
   }
 
@@ -194,13 +187,11 @@ export const FeaturesWrapper = styled.div`
   .learn-more-link {
     display: none;
     text-align: left;
-    transition: all 0.3s linear;
     color: ${(props) => props.theme.white};
 
     svg {
       margin-left: 0;
       font-size: 27px;
-      transition: all 0.3s linear;
     }
 
     &:hover {
diff --git a/src/components/Features-carousel/index.js b/src/components/Features-carousel/index.js
index 9cad5b40c59b3b..3fce6e310d8ac4 100644
--- a/src/components/Features-carousel/index.js
+++ b/src/components/Features-carousel/index.js
@@ -5,7 +5,6 @@ import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoun
 import { FeaturesWrapper } from "./FeaturesCarousel.style";
 import Slider from "react-slick";
 
-
 const Features = ({ features, heading }) => (
   <>
     {/* carousel rendered at smaller breakpoints */}
@@ -14,7 +13,6 @@ const Features = ({ features, heading }) => (
   </>
 );
 
-
 const FeaturesList = ({ features }) => {
   const [activeFeature, setActiveFeature] = useState(0);
   return (
@@ -36,9 +34,7 @@ const FeaturesList = ({ features }) => {
         </ul>
         <div className="terminal-wrapper">
           <SimpleReactLightbox>
-            <SRLWrapper>
-              {features[activeFeature].content}
-            </SRLWrapper>
+            <SRLWrapper>{features[activeFeature].content}</SRLWrapper>
           </SimpleReactLightbox>
         </div>
       </div>
@@ -52,18 +48,23 @@ const FeaturesCarousel = ({ features, heading }) => {
       <div className="features-carousel">
         <h2 className="main-heading">{heading ? heading : "Features"}</h2>
         <Slider
-          autoplay={true}
+          autoplay={false}
           autoplaySpeed={3500}
           arrows={false}
           dots={true}
-          infinite= {true}
-          speed="500"
+          infinite={true}
+          speed={0}
           slidesToShow={1}
           slidesToScroll={1}
         >
           {features.map((feature, stableIdx) => (
             <div key={stableIdx}>
-              <Feature Element="div" id={feature.id} title={feature.title} active>
+              <Feature
+                Element="div"
+                id={feature.id}
+                title={feature.title}
+                active
+              >
                 {feature.description}
               </Feature>
               <div className="terminal-wrapper">
@@ -77,7 +78,15 @@ const FeaturesCarousel = ({ features, heading }) => {
   );
 };
 
-const Feature = ({ children, title, active, onClick, learnMoreLink, id, Element = "li" }) => {
+const Feature = ({
+  children,
+  title,
+  active,
+  onClick,
+  learnMoreLink,
+  id,
+  Element = "li",
+}) => {
   return (
     <Element className={active ? "feature active-feature" : "feature"}>
       {onClick ? (
@@ -92,26 +101,25 @@ const Feature = ({ children, title, active, onClick, learnMoreLink, id, Element
       ) : (
         <span className="heading">{title}</span>
       )}
-      <div className="body" id={`feature-${id}`} >
+      <div className="body" id={`feature-${id}`}>
         <p>{children}</p>
-        {learnMoreLink
-          ? learnMoreLink.startsWith("/")
-            ? (
-              <Link className="learn-more-link" to={learnMoreLink}>
-          Explore <IoIosArrowRoundForward />
-              </Link>
-            )
-            : (
-              <a
-                href={learnMoreLink}
-                className="learn-more-link"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-          Explore <IoIosArrowRoundForward />
-              </a>
-            )
-          : null}    {/* No link rendered if learnMoreLink is empty */}
+        {learnMoreLink ? (
+          learnMoreLink.startsWith("/") ? (
+            <Link className="learn-more-link" to={learnMoreLink}>
+              Explore <IoIosArrowRoundForward />
+            </Link>
+          ) : (
+            <a
+              href={learnMoreLink}
+              className="learn-more-link"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Explore <IoIosArrowRoundForward />
+            </a>
+          )
+        ) : null}{" "}
+        {/* No link rendered if learnMoreLink is empty */}
       </div>
     </Element>
   );
diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index 4771e78441e34b..ac501a41762764 100644
--- a/src/components/Inline-quotes/index.js
+++ b/src/components/Inline-quotes/index.js
@@ -21,7 +21,7 @@ const QuotesWrapper = styled.div`
     border-image-slice: 1 0 1 1;
     transition: border-image 0.6s ease-in-out;
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       flex-direction: column;
       padding: 1.5rem 1rem;
       gap: 1rem;
@@ -51,7 +51,7 @@ const QuotesWrapper = styled.div`
     line-height: 1.6;
     text-align: ${(props) => (props.$onlyQuoteIsPresent ? "center" : "right")};
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       flex: 0 0 100%;
       text-align: center;
       line-height: 1.5;
@@ -71,12 +71,10 @@ const QuotesWrapper = styled.div`
     flex: 2 1 0;
     flex-direction: column;
     justify-content: center;
-    min-width: 0;
     padding: 0 1rem;
     text-align: left;
 
-    @media (max-width: 1199px) {
-      width: 100%;
+    @media (max-width: 768px) {
       padding: 0;
       text-align: center;
     }
@@ -87,14 +85,12 @@ const QuotesWrapper = styled.div`
       font-size: clamp(0.875rem, 2vw, 1rem);
       font-weight: bold;
       text-transform: uppercase;
-      overflow-wrap: anywhere;
     }
 
     p {
       margin: 0;
       font-size: clamp(0.8rem, 1.8vw, 0.9rem);
       line-height: 1.4;
-      overflow-wrap: anywhere;
 
       @media (max-width: 500px) {
         line-height: 1.3;
@@ -110,7 +106,7 @@ const QuotesWrapper = styled.div`
     border-left: 1px solid
       ${(props) => (props.theme.DarkTheme ? "#444" : "#ddd")};
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       width: clamp(150px, 60%, 200px);
       height: 0;
       margin: 0.5rem auto;
@@ -125,9 +121,7 @@ const QuotesWrapper = styled.div`
     align-items: center;
     gap: 1rem;
 
-    @media (max-width: 1199px) {
-      width: 100%;
-      min-width: 0;
+    @media (max-width: 768px) {
       flex-direction: column;
       gap: 0.75rem;
     }

From 68398bb78e0411dd11c2fb09c289e8f9e308f237 Mon Sep 17 00:00:00 2001
From: tanav29 <tanavposwal939@gmail.com>
Date: Mon, 9 Nov 2026 19:31:28 +0530
Subject: [PATCH 4/7] fix: assign unique feature panel IDs

Signed-off-by: tanav29 <tanavposwal939@gmail.com>
---
 src/components/Features-carousel/index.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/Features-carousel/index.js b/src/components/Features-carousel/index.js
index 3fce6e310d8ac4..82057e7fb70288 100644
--- a/src/components/Features-carousel/index.js
+++ b/src/components/Features-carousel/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useId } from "react";
 import SimpleReactLightbox, { SRLWrapper } from "simple-react-lightbox";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
@@ -59,12 +59,7 @@ const FeaturesCarousel = ({ features, heading }) => {
         >
           {features.map((feature, stableIdx) => (
             <div key={stableIdx}>
-              <Feature
-                Element="div"
-                id={feature.id}
-                title={feature.title}
-                active
-              >
+              <Feature Element="div" title={feature.title} active>
                 {feature.description}
               </Feature>
               <div className="terminal-wrapper">
@@ -87,6 +82,7 @@ const Feature = ({
   id,
   Element = "li",
 }) => {
+  const panelId = `feature-${useId()}`;
   return (
     <Element className={active ? "feature active-feature" : "feature"}>
       {onClick ? (
@@ -94,14 +90,14 @@ const Feature = ({
           className="heading"
           onClick={() => onClick(id)}
           aria-expanded={active}
-          aria-controls={`feature-${id}`}
+          aria-controls={panelId}
         >
           {title}
         </button>
       ) : (
         <span className="heading">{title}</span>
       )}
-      <div className="body" id={`feature-${id}`}>
+      <div className="body" id={panelId}>
         <p>{children}</p>
         {learnMoreLink ? (
           learnMoreLink.startsWith("/") ? (

From 2a4703bd01bc0d2c3d4e3a664fd6fba5448e75e8 Mon Sep 17 00:00:00 2001
From: tanav29 <tanavposwal939@gmail.com>
Date: Mon, 9 Nov 2026 19:36:42 +0530
Subject: [PATCH 5/7] fix: stack quote details at wider widths

Signed-off-by: tanav29 <tanavposwal939@gmail.com>
---
 src/components/Inline-quotes/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index ac501a41762764..f21d3efa67587c 100644
--- a/src/components/Inline-quotes/index.js
+++ b/src/components/Inline-quotes/index.js
@@ -21,7 +21,7 @@ const QuotesWrapper = styled.div`
     border-image-slice: 1 0 1 1;
     transition: border-image 0.6s ease-in-out;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex-direction: column;
       padding: 1.5rem 1rem;
       gap: 1rem;
@@ -51,7 +51,7 @@ const QuotesWrapper = styled.div`
     line-height: 1.6;
     text-align: ${(props) => (props.$onlyQuoteIsPresent ? "center" : "right")};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex: 0 0 100%;
       text-align: center;
       line-height: 1.5;
@@ -74,7 +74,7 @@ const QuotesWrapper = styled.div`
     padding: 0 1rem;
     text-align: left;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       padding: 0;
       text-align: center;
     }
@@ -106,7 +106,7 @@ const QuotesWrapper = styled.div`
     border-left: 1px solid
       ${(props) => (props.theme.DarkTheme ? "#444" : "#ddd")};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       width: clamp(150px, 60%, 200px);
       height: 0;
       margin: 0.5rem auto;
@@ -121,7 +121,7 @@ const QuotesWrapper = styled.div`
     align-items: center;
     gap: 1rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex-direction: column;
       gap: 0.75rem;
     }

From cc36435e9372e87cdb9f72fa3a05ab24589183d4 Mon Sep 17 00:00:00 2001
From: tanav29 <tanavposwal939@gmail.com>
Date: Mon, 9 Nov 2026 21:32:45 +0530
Subject: [PATCH 6/7] fix: scope carousel changes to responsive layout

Signed-off-by: tanav29 <tanavposwal939@gmail.com>
---
 .../FeaturesCarousel.style.js                 | 348 +++++++++---------
 src/components/Features-carousel/index.js     |  66 ++--
 src/components/Inline-quotes/index.js         |  41 +--
 3 files changed, 226 insertions(+), 229 deletions(-)

diff --git a/src/components/Features-carousel/FeaturesCarousel.style.js b/src/components/Features-carousel/FeaturesCarousel.style.js
index aaaf25bba65aab..163392397340b8 100644
--- a/src/components/Features-carousel/FeaturesCarousel.style.js
+++ b/src/components/Features-carousel/FeaturesCarousel.style.js
@@ -1,215 +1,221 @@
 import styled from "styled-components";
 
 export const FeaturesWrapper = styled.div`
-  .features-carousel {
-    width: 100%;
-    display: block;
-    min-height: 400px;
-    height: auto;
-    padding-bottom: 2rem;
-    visibility: visible;
-    opacity: 1;
-    overflow: visible;
-
-    @media (min-width: 768px) {
-      display: none;
-    }
-
-    .slick-slider,
-    .slick-list,
-    .slick-track,
-    .slick-slide {
+    .features-carousel {
+      width: 100%;
       display: block;
-      min-height: 200px;
+      min-height: 400px;
       height: auto;
+      padding-bottom: 2rem;
       visibility: visible;
-    }
-    .slick-slide > div {
-      height: 100%; /* Ensure inner div takes height */
-      min-height: 200px;
-    }
-
-    img {
-      object-fit: contain;
-      margin-left: auto;
-      margin-right: auto;
-    }
+      opacity: 1;
+      overflow: visible;
 
-    .main-heading {
-      margin-bottom: 2rem;
-      text-align: center;
-    }
+      @media (min-width: 768px) {
+       display:none;
+      }
 
-    .feature {
-      border-left: none;
-      padding-left: 0;
-      margin: 40px 0 17px;
+      .slick-slider, .slick-list, .slick-track, .slick-slide {
+        display: block;
+        min-height: 200px;
+        height: auto;
+        visibility: visible;
+      }
+      .slick-slide > div {
+          height: 100%; /* Ensure inner div takes height */
+          min-height: 200px;
+      }
 
-      & p {
-        margin: 8px 0 0;
+      img{
+        object-fit:contain;
+        margin-left:auto;
+        margin-right:auto;
+      }
+     
+      .main-heading{
+        margin-bottom: 2rem;
+        text-align: center;
       }
-    }
 
-    & .body {
-      opacity: 1;
-      max-height: unset;
-    }
+      .feature {
+        border-left: none;
+        padding-left: 0;
+        margin: 40px 0 17px;
 
-    /* nuka-carousel overrides */
-    & :global {
-      & .slider-frame,
-      & .slider-slide:focus:not(:focus-visible) {
-        outline: none !important;
+        & p {
+          margin: 8px 0 0;
+        }
       }
-    }
 
-    .slick-slider {
-      .slick-dots li button:before {
-        font-size: 0.6rem;
-        color: ${(props) => props.theme.secondaryColor};
+      & .body {
+        opacity: 1;
+        max-height: unset;
       }
 
-      .slick-dots li.slick-active button:before {
-        opacity: 1;
-        color: ${(props) => props.theme.secondaryColor};
+      /* nuka-carousel overrides */
+      & :global {
+        & .slider-frame,
+        & .slider-slide:focus:not(:focus-visible) {
+          outline: none !important;
+        }
       }
-    }
-  }
 
-  .features {
-    display: none;
+      .slick-slider{
+        .slick-dots li button:before {
+          font-size: 0.6rem;
+          color: ${props => props.theme.secondaryColor};
+        }
 
-    @media (min-width: 768px) {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      grid-column-gap: 40px;
-      min-height: auto;
-      overflow-anchor: none;
-      align-items: center;
-    }
-  }
-
-  .feature {
-    border-left: 2px solid;
-    border-color: ${(props) => props.theme.bodyRevert};
-    padding-left: 44px;
-    margin: 28px 0;
-    min-height: auto;
-
-    & p {
-      margin: 0 0 8px;
-      font-size: 1rem;
-    }
-  }
-
-  .active-feature {
-    border-color: ${(props) => props.theme.grey212121ToBlack};
-    padding-top: 0;
-    @media (min-width: 768px) {
-      border-color: ${(props) => props.theme.grey212121ToBlack};
-      background-color: ${(props) => props.theme.grey212121ToBlack};
-      border-radius: 20px;
-      padding: 3rem 2.75rem 2rem 2.75rem;
+        .slick-dots li.slick-active button:before {
+          opacity: 1;
+          color: ${props => props.theme.secondaryColor};
+        }
+      }
     }
 
-    & .body {
-      opacity: 1;
-      font-size: 1rem;
-      max-height: none;
+    .features {
+      display: none;
 
       @media (min-width: 768px) {
-        color: ${(props) => props.theme.white};
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        grid-column-gap: 40px;
+        min-height: auto;
+        overflow-anchor: none;
+        align-items: center;
       }
     }
 
-    & .heading {
-      pointer-events: none;
-      @media (min-width: 768px) {
-        color: ${(props) => props.theme.white};
+    .feature {
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      border-left: 2px solid;
+      border-color: ${props => props.theme.bodyRevert};
+      padding-left: 44px;
+      margin: 28px 0;
+      min-height: auto;
+
+      & p {
+        margin: 0 0 8px;
+        font-size: 1rem;
       }
     }
-  }
-
-  .body {
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden;
-    font-size: 15px;
-  }
-
-  .options {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .heading {
-    text-align: left;
-    background: none;
-    border: none;
-    padding: 0;
-    font-size: 20px;
-    font-weight: 600;
-    box-shadow: none;
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    :hover {
-      color: #00b39f;
-    }
-  }
 
-  .terminal-wrapper {
-    & > div {
-      max-width: 100%;
-      @media (max-width: 768px) {
-        maxheight: 380px;
-        height: 380px;
-        overflow-y: scroll;
+    .active-feature {
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      border-color: ${props => props.theme.grey212121ToBlack};
+      padding-top: 0;
+      @media (min-width: 768px){
+        border-color: ${props => props.theme.grey212121ToBlack};
+        background-color: ${props => props.theme.grey212121ToBlack};
+        border-radius: 20px;
+        padding: 3rem 2.75rem 2rem 2.75rem;
       }
-    }
 
-    & > img {
-      width: 100%;
-      height: auto;
-      object-fit: contain;
+      & .body {
+        opacity: 1;
+        font-size: 1rem;
+        max-height: none;
+
+        @media (min-width: 768px){
+            color: ${props => props.theme.white};
+        }
+      }
+
+      & .heading {
+        pointer-events: none;
+        @media (min-width: 768px){
+            color: ${props => props.theme.white};
+        }
+      }
     }
 
-    @media (min-width: 768px) {
-      width: 100%;
-      min-width: 0;
+    .body {
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+      font-size: 15px;
+      transition: opacity 0.3s, max-height 0.3s;
+    }
+
+    .options {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .heading {
+      text-align: left;
+      background: none;
+      border: none;
+      padding: 0;
+      font-size: 20px;
+      font-weight: 600;
+      box-shadow: none;
+      color: ${props => props.theme.text};
+      cursor: pointer;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      :hover {
+        color: #00b39f;
+        transition: all 0.2s ease-in-out;
+      }
+    }
 
+    .terminal-wrapper {
       & > div {
+        max-width: 100%;
+        @media (max-width: 768px) {
+            max-height: 380px;
+            height: 380px;
+            overflow-y:scroll;
+        }
+      }
+
+      & > img {
+        width: 100%;
         height: auto;
+        object-fit:contain;
       }
-    }
-  }
 
-  .learn-more-link {
-    display: none;
-    text-align: left;
-    color: ${(props) => props.theme.white};
+      @media (min-width: 768px) {
+        width: 100%;
+        min-width: 0;
+
+        & > div {
+          height: auto;
+        }
+      }
 
-    svg {
-      margin-left: 0;
-      font-size: 27px;
     }
 
-    &:hover {
-      color: ${(props) => props.theme.secondaryColor};
-      svg {
-        margin-left: 3px;
-        transform: scale(1.2);
+    .learn-more-link {
+      display: none;
+      text-align: left;
+      transition: all 0.3s linear;
+      color: ${props => props.theme.white};
+
+      svg{
+           margin-left: 0;
+           font-size: 27px;
+           transition: all 0.3s linear;
+       }
+
+      &:hover{
+        color: ${props => props.theme.secondaryColor};
+        svg{
+            margin-left: 3px;
+            transform: scale(1.2);
+        }
+      }
+      @media (min-width: 768px) {
+        display: flex;
+        align-items: center;
       }
     }
-    @media (min-width: 768px) {
-      display: flex;
-      align-items: center;
-    }
-  }
-  .feature-expose img {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-  }
+   .feature-expose img{
+     display:flex;
+     justify-content:center;
+     align-items:center;
+     height:100%;
+   }
+
 `;
diff --git a/src/components/Features-carousel/index.js b/src/components/Features-carousel/index.js
index 82057e7fb70288..9cad5b40c59b3b 100644
--- a/src/components/Features-carousel/index.js
+++ b/src/components/Features-carousel/index.js
@@ -1,10 +1,11 @@
-import React, { useState, useId } from "react";
+import React, { useState } from "react";
 import SimpleReactLightbox, { SRLWrapper } from "simple-react-lightbox";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
 import { FeaturesWrapper } from "./FeaturesCarousel.style";
 import Slider from "react-slick";
 
+
 const Features = ({ features, heading }) => (
   <>
     {/* carousel rendered at smaller breakpoints */}
@@ -13,6 +14,7 @@ const Features = ({ features, heading }) => (
   </>
 );
 
+
 const FeaturesList = ({ features }) => {
   const [activeFeature, setActiveFeature] = useState(0);
   return (
@@ -34,7 +36,9 @@ const FeaturesList = ({ features }) => {
         </ul>
         <div className="terminal-wrapper">
           <SimpleReactLightbox>
-            <SRLWrapper>{features[activeFeature].content}</SRLWrapper>
+            <SRLWrapper>
+              {features[activeFeature].content}
+            </SRLWrapper>
           </SimpleReactLightbox>
         </div>
       </div>
@@ -48,18 +52,18 @@ const FeaturesCarousel = ({ features, heading }) => {
       <div className="features-carousel">
         <h2 className="main-heading">{heading ? heading : "Features"}</h2>
         <Slider
-          autoplay={false}
+          autoplay={true}
           autoplaySpeed={3500}
           arrows={false}
           dots={true}
-          infinite={true}
-          speed={0}
+          infinite= {true}
+          speed="500"
           slidesToShow={1}
           slidesToScroll={1}
         >
           {features.map((feature, stableIdx) => (
             <div key={stableIdx}>
-              <Feature Element="div" title={feature.title} active>
+              <Feature Element="div" id={feature.id} title={feature.title} active>
                 {feature.description}
               </Feature>
               <div className="terminal-wrapper">
@@ -73,16 +77,7 @@ const FeaturesCarousel = ({ features, heading }) => {
   );
 };
 
-const Feature = ({
-  children,
-  title,
-  active,
-  onClick,
-  learnMoreLink,
-  id,
-  Element = "li",
-}) => {
-  const panelId = `feature-${useId()}`;
+const Feature = ({ children, title, active, onClick, learnMoreLink, id, Element = "li" }) => {
   return (
     <Element className={active ? "feature active-feature" : "feature"}>
       {onClick ? (
@@ -90,32 +85,33 @@ const Feature = ({
           className="heading"
           onClick={() => onClick(id)}
           aria-expanded={active}
-          aria-controls={panelId}
+          aria-controls={`feature-${id}`}
         >
           {title}
         </button>
       ) : (
         <span className="heading">{title}</span>
       )}
-      <div className="body" id={panelId}>
+      <div className="body" id={`feature-${id}`} >
         <p>{children}</p>
-        {learnMoreLink ? (
-          learnMoreLink.startsWith("/") ? (
-            <Link className="learn-more-link" to={learnMoreLink}>
-              Explore <IoIosArrowRoundForward />
-            </Link>
-          ) : (
-            <a
-              href={learnMoreLink}
-              className="learn-more-link"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Explore <IoIosArrowRoundForward />
-            </a>
-          )
-        ) : null}{" "}
-        {/* No link rendered if learnMoreLink is empty */}
+        {learnMoreLink
+          ? learnMoreLink.startsWith("/")
+            ? (
+              <Link className="learn-more-link" to={learnMoreLink}>
+          Explore <IoIosArrowRoundForward />
+              </Link>
+            )
+            : (
+              <a
+                href={learnMoreLink}
+                className="learn-more-link"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+          Explore <IoIosArrowRoundForward />
+              </a>
+            )
+          : null}    {/* No link rendered if learnMoreLink is empty */}
       </div>
     </Element>
   );
diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index f21d3efa67587c..18b1a0928d0494 100644
--- a/src/components/Inline-quotes/index.js
+++ b/src/components/Inline-quotes/index.js
@@ -14,14 +14,14 @@ const QuotesWrapper = styled.div`
     gap: 1.5rem;
     border: 2px solid transparent;
     border-image: linear-gradient(
-      to right bottom,
-      #00b39f,
-      ${(props) => (props.theme.DarkTheme ? "#121212" : "#fff")} 80%
+      to right bottom, 
+      #00b39f, 
+      ${props => props.theme.DarkTheme ? "#121212" : "#fff"} 80%
     );
     border-image-slice: 1 0 1 1;
     transition: border-image 0.6s ease-in-out;
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       flex-direction: column;
       padding: 1.5rem 1rem;
       gap: 1rem;
@@ -34,24 +34,24 @@ const QuotesWrapper = styled.div`
 
   .border {
     border-image: linear-gradient(
-      to left top,
-      #00b39f,
-      ${(props) => (props.theme.DarkTheme ? "#121212" : "#fff")} 80%
+      to left top, 
+      #00b39f, 
+      ${props => props.theme.DarkTheme ? "#121212" : "#fff"} 80%
     );
     border-image-slice: 1 1 1 0;
   }
 
   h4 {
-    flex: ${(props) => (props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%")};
+    flex: ${props => props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%"};
     margin: 0;
-    color: ${(props) => props.theme.primaryColor};
+    color: ${props => props.theme.primaryColor};
     font-size: clamp(1rem, 2.5vw, 1.25rem);
     font-weight: 100;
     font-style: italic;
     line-height: 1.6;
-    text-align: ${(props) => (props.$onlyQuoteIsPresent ? "center" : "right")};
+    text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       flex: 0 0 100%;
       text-align: center;
       line-height: 1.5;
@@ -74,11 +74,11 @@ const QuotesWrapper = styled.div`
     padding: 0 1rem;
     text-align: left;
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       padding: 0;
       text-align: center;
     }
-
+   
     h5 {
       margin: 0 0 0.5rem 0;
       padding: 0.1rem;
@@ -103,16 +103,14 @@ const QuotesWrapper = styled.div`
     height: 5rem;
     margin: 0;
     border: none;
-    border-left: 1px solid
-      ${(props) => (props.theme.DarkTheme ? "#444" : "#ddd")};
+    border-left: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       width: clamp(150px, 60%, 200px);
       height: 0;
       margin: 0.5rem auto;
       border-left: none;
-      border-top: 1px solid
-        ${(props) => (props.theme.DarkTheme ? "#444" : "#ddd")};
+      border-top: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
     }
   }
 
@@ -121,7 +119,7 @@ const QuotesWrapper = styled.div`
     align-items: center;
     gap: 1rem;
 
-    @media (max-width: 1199px) {
+    @media (max-width: 768px) {
       flex-direction: column;
       gap: 0.75rem;
     }
@@ -140,10 +138,7 @@ const InlineQuotes = ({ person, title, quote, image }) => {
 
   return (
     <QuotesWrapper $onlyQuoteIsPresent={!showAuthorSection}>
-      <div
-        className={quoteInView ? "quote-box border" : "quote-box"}
-        ref={quoteRef}
-      >
+      <div className={quoteInView ? "quote-box border" : "quote-box"} ref={quoteRef}>
         <h4>❝ {quote} ❞</h4>
         {showAuthorSection && (
           <>

From 21be7f4991a07bb982f9345d5a9236bfd3f528f2 Mon Sep 17 00:00:00 2001
From: tanav29 <tanavposwal939@gmail.com>
Date: Mon, 9 Nov 2026 21:45:38 +0530
Subject: [PATCH 7/7] fix: stack quote author details sooner

Signed-off-by: tanav29 <tanavposwal939@gmail.com>
---
 src/components/Inline-quotes/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index 18b1a0928d0494..8ef8a49c5360fb 100644
--- a/src/components/Inline-quotes/index.js
+++ b/src/components/Inline-quotes/index.js
@@ -21,7 +21,7 @@ const QuotesWrapper = styled.div`
     border-image-slice: 1 0 1 1;
     transition: border-image 0.6s ease-in-out;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex-direction: column;
       padding: 1.5rem 1rem;
       gap: 1rem;
@@ -51,7 +51,7 @@ const QuotesWrapper = styled.div`
     line-height: 1.6;
     text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex: 0 0 100%;
       text-align: center;
       line-height: 1.5;
@@ -74,7 +74,7 @@ const QuotesWrapper = styled.div`
     padding: 0 1rem;
     text-align: left;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       padding: 0;
       text-align: center;
     }
@@ -105,7 +105,7 @@ const QuotesWrapper = styled.div`
     border: none;
     border-left: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       width: clamp(150px, 60%, 200px);
       height: 0;
       margin: 0.5rem auto;
@@ -119,7 +119,7 @@ const QuotesWrapper = styled.div`
     align-items: center;
     gap: 1rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: 1199px) {
       flex-direction: column;
       gap: 0.75rem;
     }