fixed alignment of duration and currency switcher

Signed-off-by: Radha Sharma <radhasharma2786@gmail.com>

Author: Radha2786

src/sections/Pricing/index.js

@@ -66,7 +66,7 @@ const Pricing = () => {
       <div className="headers">
         <h1 className="header-heading">Plans For Every Team Size</h1>
 
-        <div style={{ display: "flex", "gap": "1rem", alignItems: "center", "justifyContent": "flex-end", width: "85%" }} >
+        <div className="header-controls" style={{ display: "flex", "gap": "1rem", alignItems: "center", "justifyContent": "flex-end", width: "85%" }} >
           <CurrencySelect currency={currency} setCurrency={setCurrency} />
 
           <SubscriptionToggle isYearly={isYearly} setIsYearly={setIsYearly} />

src/sections/Pricing/pricing.style.js

@@ -20,10 +20,12 @@ const PricingWrapper = styled.section`
   @media (min-width: 2048px) {
     height: 30rem;
   }
+
   h1{
     margin-top: -2rem;
   }
 
+
  .header-svg {
     position: absolute;
     bottom: 0;
@@ -35,7 +37,21 @@ const PricingWrapper = styled.section`
     color: white;
     text-align: center;
   }
-}
+
+  @media (max-width: 383px){
+  height:27rem;
+
+  .header-controls{
+  flex-direction: column;
+  gap: 0rem;
+  } 
+
+  h1 {
+    margin-bottom: 1rem;
+  }
+ }
+
+} 
 
 .toggle-container {
   display: flex;
@@ -45,6 +61,11 @@ const PricingWrapper = styled.section`
   font-size: .9rem;
   gap: 10px;
   width: auto;
+
+  @media (max-width: 383px){
+  margin-top: 0rem;
+  }
+
 }
 
 .toggle {