updated quote style

src/assets/css/main.css

@@ -142,6 +142,7 @@ p {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  border: 1px solid #4687ba;
   padding: 0 30px;
   font-size: 15px;
   line-height: 45px;
@@ -154,18 +155,12 @@ p {
   -ms-transition: all 0.4s ease-out 0s;
   -o-transition: all 0.4s ease-out 0s;
   transition: all 0.4s ease-out 0s;
-  /* background-color: #4687ba; */
-  /* border: 1px solid #4687ba; */
-  border: 1px solid #89216b;
-  background-image: linear-gradient(90deg, #89216b 0%, #da4453 100%);
+  background-color: #4687ba;
 }
 .main-btn:hover {
-  /* background-color: #fff;
+  background-color: #fff;
   color: #2b70fa;
-  border-color: #2b70fa; */
-  background-image: linear-gradient(90deg, #000 0%, #000 100%);
-  color: #fff;
-  border-color: #000;
+  border-color: #2b70fa;
 }
 .main-btn.main-btn-2 {
   background-color: #fff;
@@ -246,17 +241,17 @@ p {
     font-size: 15px;
   }
 }
-/* .appie-section-title .main-btn {
+.appie-section-title .main-btn {
   border-radius: 30px;
   border: 2px solid #e7eaef;
   background: #fff;
   color: #0e1133;
-} */
-/* .appie-section-title .main-btn:hover {
+}
+.appie-section-title .main-btn:hover {
   background: #ff3e66;
   color: #fff;
   border-color: #ff3e66;
-} */
+}
 .appie-section-title.appie-section-title-2 .appie-title {
   color: #fff;
 }
@@ -892,15 +887,15 @@ p {
   right: 0;
   z-index: 999;
 }
-/* .appie-header-area.appie-header-2-area .appie-btn-box .main-btn {
+.appie-header-area.appie-header-2-area .appie-btn-box .main-btn {
   background: #ff3e66;
   border-radius: 30px;
   border-color: #ff3e66;
-} */
-/* .appie-header-area.appie-header-2-area .appie-btn-box .main-btn:hover {
+}
+.appie-header-area.appie-header-2-area .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #ff3e66;
-} */
+}
 .appie-header-area.appie-header-3-area.appie-sticky.sticky {
   background: #0e1133;
 }
@@ -980,30 +975,30 @@ p {
 .header-nav-box.header-nav-box-3 .appie-btn-box .login-btn {
   color: #fff;
 }
-/* .header-nav-box.header-nav-box-3 .appie-btn-box .main-btn {
+.header-nav-box.header-nav-box-3 .appie-btn-box .main-btn {
   background: #ff6b58;
   border-color: #ff6b58;
-} */
-/* .header-nav-box.header-nav-box-3 .appie-btn-box .main-btn:hover {
+}
+.header-nav-box.header-nav-box-3 .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #ff6b58;
-} */
+}
 .header-nav-box.header-nav-box-3 .toggle-btn {
   color: #fff;
   font-size: 20px;
 }
-/* .header-nav-box.header-nav-box-3.header-nav-box-inner-page
+.header-nav-box.header-nav-box-3.header-nav-box-inner-page
   .appie-btn-box
   .main-btn {
   border-color: #fff;
   background: transparent;
-} */
-/* .header-nav-box.header-nav-box-3.header-nav-box-inner-page
+}
+.header-nav-box.header-nav-box-3.header-nav-box-inner-page
   .appie-btn-box
   .main-btn:hover {
   background: #fff;
   color: #2b70fa;
-} */
+}
 .header-nav-box.header-nav-box-5 .appie-header-main-menu ul > li > a {
   color: #fff;
 }
@@ -1019,14 +1014,14 @@ p {
 .header-nav-box.header-nav-box-5 .appie-btn-box .login-btn {
   color: #fff;
 }
-/* .header-nav-box.header-nav-box-5 .appie-btn-box .main-btn {
+.header-nav-box.header-nav-box-5 .appie-btn-box .main-btn {
   background: #f84a6e;
   border-color: #f84a6e;
-} */
-/* .header-nav-box.header-nav-box-5 .appie-btn-box .main-btn:hover {
+}
+.header-nav-box.header-nav-box-5 .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #f84a6e;
-} */
+}
 .header-nav-box.header-nav-box-5 .toggle-btn {
   color: #fff;
   font-size: 20px;
@@ -1034,14 +1029,14 @@ p {
 .header-nav-box.header-nav-4-box .appie-header-main-menu ul > li > a:hover {
   color: #801f82;
 }
-/* .header-nav-box.header-nav-4-box .appie-btn-box .main-btn {
+.header-nav-box.header-nav-4-box .appie-btn-box .main-btn {
   background: #801f82;
   border-color: #801f82;
-} */
-/* .header-nav-box.header-nav-4-box .appie-btn-box .main-btn:hover {
+}
+.header-nav-box.header-nav-4-box .appie-btn-box .main-btn:hover {
   background: transparent;
   color: #801f82;
-} */
+}
 @media (max-width: 767px) {
   .header-nav-box.header-nav-4-box .appie-btn-box ul {
     margin-right: 10px;
@@ -1072,14 +1067,14 @@ p {
   background: #801f82;
   border-radius: 50%;
 }
-/* .header-nav-box.header-nav-box-6 .main-btn {
+.header-nav-box.header-nav-box-6 .main-btn {
   background: #9b2cfa;
   border-color: #9b2cfa;
-} */
-/* .header-nav-box.header-nav-box-6 .main-btn:hover {
+}
+.header-nav-box.header-nav-box-6 .main-btn:hover {
   background: transparent;
   color: #9b2cfa;
-} */
+}
 .header-nav-box.header-nav-box-6 .appie-header-main-menu ul > li > a:hover {
   color: #9b2cfa;
 }
@@ -1425,14 +1420,14 @@ p {
     top: 0;
   }
 }
-/* .appie-header-8-area .header-nav-box .appie-btn-box .main-btn {
+.appie-header-8-area .header-nav-box .appie-btn-box .main-btn {
   background: #db0f30;
   border-color: #db0f30;
-} */
-/* .appie-header-8-area .header-nav-box .appie-btn-box .main-btn:hover {
+}
+.appie-header-8-area .header-nav-box .appie-btn-box .main-btn:hover {
   background: #fff;
   color: #db0f30;
-} */
+}
 .appie-header-8-area .header-nav-box .appie-header-main-menu ul > li a:hover {
   color: #db0f30;
 }
@@ -1650,20 +1645,20 @@ p {
   i {
   border-color: rgba(255, 255, 255, 0.2);
 }
-/* .appie-hero-area.appie-hero-3-area.appie-hero-5-area
+.appie-hero-area.appie-hero-3-area.appie-hero-5-area
   .appie-hero-content
   .hero-btns
   .main-btn {
   border-color: rgba(255, 255, 255, 0.2);
   color: #fff;
-} */
-/* .appie-hero-area.appie-hero-3-area.appie-hero-5-area
+}
+.appie-hero-area.appie-hero-3-area.appie-hero-5-area
   .appie-hero-content
   .hero-btns
   .main-btn:hover {
   background: #f84a6e;
   color: #fff;
-} */
+}
 .appie-hero-area .hero-shape-1 {
   position: absolute;
   left: 0;
@@ -1915,7 +1910,7 @@ p {
     line-height: 50px;
   }
 }
-/* .appie-hero-content.appie-hero-content-4 a.main-btn {
+.appie-hero-content.appie-hero-content-4 a.main-btn {
   border: 2px solid #801f82;
   color: #801f82;
   background: #fff;
@@ -1923,11 +1918,11 @@ p {
   padding: 0 40px;
   font-size: 16px;
   margin-top: 40px;
-} */
-/* .appie-hero-content.appie-hero-content-4 a.main-btn:hover {
+}
+.appie-hero-content.appie-hero-content-4 a.main-btn:hover {
   background: #801f82;
   color: #fff;
-} */
+}
 .appie-hero-content.appie-hero-content-6 > span {
   color: #9b2cfa;
 }
@@ -2384,7 +2379,7 @@ p {
     4.APPIE SERVOCE css 
 ===========================*/
 .appie-service-area {
-  background: #fdfaf4;
+  background: #fbf4fe;
   position: relative;
   background-position: 92% 100%;
   background-repeat: no-repeat;
@@ -2674,10 +2669,10 @@ p {
   border-radius: 21% 79% 58% 42% / 50% 46% 54% 50%;
 }
 
-/* .appie-services-6-area .appie-section-title .main-btn:hover {
+.appie-services-6-area .appie-section-title .main-btn:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
-} */
+}
 .appie-services-6-area .appie-single-service-2 a:hover {
   color: #9b2cfa;
 }
@@ -3149,7 +3144,7 @@ p {
 
 .appie-traffic-title {
   padding-right: 220px;
-  margin-bottom: 20px;
+  margin-bottom: 43px;
 }
 @media (max-width: 767px) {
   .appie-traffic-title {
@@ -3195,12 +3190,29 @@ p {
 }
 .appie-traffic-service {
   padding-left: 40px;
-  /* padding-right: 70px; */
+  padding-right: 70px;
 }
 .appie-traffic-service-two {
   padding-left: 40px;
 }
 
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+  .appie-traffic-service, .appie-traffic-service-two {
+    padding-right: 0;
+  }
+}
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .appie-traffic-service {
+    margin-bottom: 30px;
+    padding-right: 50px;
+  }
+}
+@media (max-width: 767px) {
+  .appie-traffic-service {
+    margin-bottom: 30px;
+    padding-right: 0px;
+  }
+}
 .appie-traffic-service .icon, .appie-traffic-service-two .icon {
   position: absolute;
   left: 0;
@@ -3218,13 +3230,13 @@ p {
   box-shadow: 0px 6px 10px 0px rgba(16, 73, 189, 0.3);
 }
 .appie-traffic-service .title, .appie-traffic-service-two title {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 700;
   padding-bottom: 7px;
   text-shadow: 3px 4px 10px rgba(0,0,0,0.3);
 }
 .appie-traffic-service p, .appie-traffic-service-two p {
-  font-size: 16px;
+  font-size: 17px;
   margin-top: 10px;
   /*margin-bottom: 2px;*/
 }
@@ -3318,10 +3330,10 @@ p {
 .traffic-btn a.main-btn i {
   padding-left: 6px;
 }
-/* .traffic-btn a.main-btn:hover {
+.traffic-btn a.main-btn:hover {
   background: #2b70fa;
   color: #fff;
-} */
+}
 
 /*===========================
     6.APPIE TRAFFICE css 
@@ -7242,17 +7254,17 @@ blockquote cite {
   font-weight: 700;
   margin-bottom: 8px;
 }
-/* .appie-download-3-box .content a.main-btn {
+.appie-download-3-box .content a.main-btn {
   background: #fff;
   color: #0e1133;
   border-color: #fff;
   margin-top: 33px;
-} */
-/* .appie-download-3-box .content a.main-btn:hover {
+}
+.appie-download-3-box .content a.main-btn:hover {
   background: #ff6b58;
   border-color: #ff6b58;
   color: #fff;
-} */
+}
 .appie-download-3-box .content a.main-btn i {
   padding-right: 6px;
 }
@@ -7266,18 +7278,18 @@ blockquote cite {
   color: #0e1133;
   border-color: #fff;
 }
-/* .appie-download-3-box.appie-download-6-box a.main-btn:hover {
+.appie-download-3-box.appie-download-6-box a.main-btn:hover {
   background: #9b2cfa;
   border-color: #9b2cfa;
-} */
+}
 .appie-download-3-box.appie-download-6-box a.main-btn.main-btn-2 {
   background: #9b2cfa;
   border-color: #9b2cfa;
 }
-/* .appie-download-3-box.appie-download-5-box a.main-btn:hover {
+.appie-download-3-box.appie-download-5-box a.main-btn:hover {
   background: #801f82;
   border-color: #801f82;
-} */
+}
 .appie-download-3-box.appie-download-5-box a.main-btn.main-btn-2 {
   background: #801f82;
   border-color: #801f82;

src/components/lnd/LndParts/Design/Main.js

@@ -34,15 +34,9 @@ const Main = ({gredient}) => {
                                 Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
                                 </p>
                             </div>
-                            <div className="appie-traffic-title section_title mb-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
-                                <h3 className='title text-center text-lg-left'>Assign Faster with</h3>
-                                <h3 className='w-100 title text-center d-flex justify-content-center justify-content-lg-end flex-nowrap'>
-                                    <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
-                                </h3>
-                            </div>
                             <div className="row">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
-                                <div className="col-12 col-md-6 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
                                         className={`appie-traffic-service features appie-modern-design`}
                                     >
@@ -50,14 +44,14 @@ const Main = ({gredient}) => {
                                         <i className={icon} />
                                         </div>
                                         <h5 className="title">{header}</h5>
-                                        {/* <p>{paragraph}</p> */}
+                                        <p>{paragraph}</p>
                                     </div>
                                 </div>
                             ))}
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-6 mt-4 mt-lg-0">
+                    <div className="col-lg-6">
                         <Right />
                     </div>
                 </div>

src/components/lnd/LndParts/Design/Right.js

@@ -3,19 +3,19 @@ import BGImage from "../../../../assets/images/sec-background.jpg";
 
 export default function Right() {
   return (
-    <div className="p-1 w-100">
-        {/* <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
+    <div className="w-100">
+        <div className="appie-traffic-title section_title mb-0" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
             <h3 className='title text-center'>Assign Faster with</h3>
             <h3 className='title text-center d-flex justify-content-center flex-nowrap'>
-                <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
+                <div className='color-blue italic'>Wrench</div><div className='color-purple'>Agent</div>
             </h3>
-        </div> */}
-        {/* <div className='px-2 w-100 mb-2'>  */}
-        <div className='color-purple text-center mb-2'>
-            <h3 className='color-purple font-25 mb-10'>Ask our <span>&#x275B;&#x275B;<span className='color-blue italic'>wrench</span>Agent&#x275C;&#x275C;</span> Generative AI to assist</h3>
-            <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
         </div>
-        {/* </div> */}
+        <div className='p-2 w-100 my-2'> 
+            <div className='color-purple text-center'>
+                <h3 className='color-purple font-25 mb-10'>Ask our &#x275B;&#x275B;<span className='color-blue italic'>Wrench</span><span className='color-purple'>Agent</span>&#x275C;&#x275C; Generative AI to assist</h3>
+                <h3 className='font_black font-20 mb-10'>&#x275B;&#x275B;Recommend  4 summer chores for a 12 years old&#x275C;&#x275C;</h3>
+            </div>
+        </div>
         {/* withFadeEdge-light-purple border-skyblue border-thin*/}
         <div className="p-2 pt-3 bg-white custom-w-90 mx-auto border-r-10 overflow-hidden"
             style={{ backgroundImage: `url(${BGImage})`, backgroundPosition: 'left center', backgroundRepeat: 'no-repeat' }}