changes

container/ClientServicing/CFO/HowWeDoIt.js

+import Heading from '@/components/reuseables/Heading'
+import Image from 'next/image'
+import React from 'react'
+import { Col, Container, Row } from 'react-bootstrap'
+
+const HowWeDoIt = () => {
+
+    const data = [
+        {
+            subTitle: "Step 1",
+            title: "Step 1 Discovery",
+            desc: "Assess the business model, industry context, and internal processes",
+            image: "/images/client-service/cfo.webp",
+        },
+        {
+            subTitle: "Step 2",
+            title: "Step 1 Discovery",
+            desc: "Assess the business model, industry context, and internal processes",
+            image: "/images/client-service/Client_Servicing-CFO.webp",
+        },
+        {
+            subTitle: "Step 1",
+            title: "Step 1 Discovery",
+            desc: "Assess the business model, industry context, and internal processes",
+            image: "/images/client-service/cfo.webp",
+        },
+        {
+            subTitle: "Step 1",
+            title: "Step 1 Discovery",
+            desc: "Assess the business model, industry context, and internal processes",
+            image: "/images/client-service/cfo.webp",
+        },
+        {
+            subTitle: "Step 1",
+            title: "Step 1 Discovery",
+            desc: "Assess the business model, industry context, and internal processes",
+            image: "/images/client-service/cfo.webp",
+        },
+        {
+            subTitle: "Step 1",
+            title: "Step 1 Discovery",
+            desc: "Assess the business model, industry context, and internal processes Assess the business model, industry context, and internal processes Assess the business model, industry context, and internal processes",
+            image: "/images/client-service/cfo.webp",
+        },
+    ]
+
+    return (
+        <section className="HowWeDoIt-section ptb-100">
+            <Container>
+                <div className="section-title">
+                    <span className="sub-title">{""}</span>
+                    <Heading el="h2" heading={"How we do it?"} />
+                </div>
+                <p className=" text-center text-black mb-4 mb-lg-5">{"Here are some key activities we focus on in our CFO services."}</p>
+                <Row className='row-gap-4 h-auto justify-content-center'>
+                    {
+                        data && data.map((item, index) => (
+                            <Col className='' lg={4} md={6} key={index}>
+                                <div className='HowWeDoIt_card h-100'>
+                                    <h2>{item?.subTitle}</h2>
+                                    <Image
+                                        aria-hidden="true"
+                                        alt={"image"}
+                                        src={item?.image}
+                                        width={1000}
+                                        height={1000}
+                                        className="img-fluid"
+                                    />
+                                    <div className='HowWeDoIt_card_content'>
+                                        <h4>{item?.title}</h4>
+                                        <p>{item?.desc}</p>
+                                    </div>
+                                </div>
+                            </Col>
+                        ))
+                    }
+                </Row>
+            </Container>
+        </section>
+    )
+}
+
+export default HowWeDoIt
\ No newline at end of file

container/Home/FunctionalAreas.js

@@ -62,7 +62,7 @@ const services = [
   },
 ];
 
-const FunctionalAreas = ({functionarea}) => {
+const FunctionalAreas = ({ functionarea }) => {
   // console.log(functionarea ,"functionarea")
   return (
     <>
@@ -77,11 +77,11 @@ const FunctionalAreas = ({functionarea}) => {
             expertise to deliver exceptional value.
           </p>
 
-          <div className="row align-items-center">
+          <div className="row row-gap-4  h-auto">
             {functionarea &&
               functionarea.map((service) => (
-                <div className="col-lg-4 col-sm-6 col-md-6" key={service.id}>
-                  <div className="single-services-item fuctional-areas border align-items-left">
+                <div className="col-lg-4 col-sm-6 col-md-6 " key={service.id}>
+                  <div className="single-services-item fuctional-areas border align-items-left h-100">
                     <Image
                       src={cleanImage(service?.Icon?.url)}
                       alt={service.serviceTitle}

container/People/AdvisoryBoard.js

@@ -33,7 +33,7 @@ const AdvisoryBoard = ({ advisoryboard }) => {
       <div className="testimonial-area ptb-100">
         <Container>
           <div className="section-title">
-            <Heading el="h2" heading="Our Leadership Team" />
+            <Heading el="h2" heading="Our Founding Team" />
           </div>
           {advisoryboard.map((member, index) => (
             <Row key={index} className="row align-items-center">

container/People/TeamLead.js

@@ -62,7 +62,7 @@ const team = [
   },
 ];
 
-const TeamLead = ({teamlead, teamlist}) => {
+const TeamLead = ({ teamlead, teamlist }) => {
   return (
     <>
       <div className="team-area pt-100 pb-70 bg-fafafa">
@@ -71,15 +71,14 @@ const TeamLead = ({teamlead, teamlist}) => {
             <span className="sub-title">
               {teamlead.Subtitle}
             </span>
-            <Heading el="h2" heading= {teamlead.Title} />
+            <Heading el="h2" heading={teamlead.Title} />
           </div>
 
           <div className="row justify-content-center">
             {teamlist &&
               teamlist.map((member, index) => (
                 <div
-                  className={`col-lg-3 col-md-6 col-sm-6 col-xs-6 ${
-                    index % 2 === 1 ? "even-member" : ""
+                  className={`col-lg-3 col-md-6 col-sm-6 col-xs-6 ${index % 2 === 1 ? "even-member" : ""
                     }`}
                   key={member.id}
                 >

layout/Footer.js

@@ -8,12 +8,12 @@ const Footer = () => {
     <>
       <footer className="footer-area">
         <div className="container">
-          <div className="row justify-content-center">
+          <div className="row justify-content-between">
             <div className="col-lg-3 col-sm-6 col-md-6">
               <div className="single-footer-widget">
                 <Link href="/" className="logo">
                   <Image
-                    src="/images/logo.png"
+                    src="/images/Advithlogo.svg"
                     alt="image"
                     width={200}
                     height={100}
@@ -29,8 +29,8 @@ const Footer = () => {
               </div>
             </div>
 
-            <div className="col-lg-3 col-sm-6 col-md-6">
-              <div className="single-footer-widget pl-4">
+            <div className="col-lg-2 col-sm-6 col-md-6">
+              <div className="single-footer-widget pl-2">
                 <h3>Quick Links</h3>
                 <ul className="links-list">
                   <li>
@@ -52,8 +52,8 @@ const Footer = () => {
               </div>
             </div>
 
-            <div className="col-lg-3 col-sm-6 col-md-6">
-              <div className="single-footer-widget pl-2">
+            <div className="col-lg-2 col-sm-6 col-md-6">
+              <div className="single-footer-widget pl-0">
                 <h3>Knowledge</h3>
                 <ul className="links-list">
                   <li>
@@ -73,40 +73,60 @@ const Footer = () => {
             </div>
 
             <div className="col-lg-3 col-sm-6 col-md-6">
-              <div className="single-footer-widget">
+              <div className="single-footer-widget pe-3">
                 <div className="footer-contact-info">
                   <h3>Address</h3>
                   <ul>
                     <li>
                       <span>Reg office:</span> Nanda commercial complex and health center,
-                    court road, Udupi -576101 Phone No: 0820-4200985
+                      court road, Udupi -576101
                     </li>
+                    <li><span>Phone No:</span> <a href="tel: 820-4200985">0820-4200985</a> </li>
                     <li>
                       <span> Corporate office:</span> No.988,1st Floor,13th Cross, Banashankari II Stage, Bangalore -560070
-
                     </li>
                   </ul>
                 </div>
               </div>
-              <div className="single-footer-widget">
+              {/* <div className="single-footer-widget">
                 <div className="footer-contact-info">
                   <h5>Contact:</h5>
                   <ul>
                     <li>
-                      <span>Call : </span>
+                      <span>Call: </span>
                       <a href="tel:+91-08026719484">
                         080-26719484
-
                       </a>
                     </li>
                     <li>
-                      <span>Email : </span>
+                      <span>Email: </span>
                       <a href="mailto:info@advithconsulting.in">
                         support@advithitec.in
                       </a>
                     </li>
                   </ul>
                 </div>
+              </div> */}
+            </div>
+            <div className="col-lg-2 col-sm-6 col-md-6">
+
+              <div className="single-footer-widget">
+                <div className="footer-contact-info">
+                  <h3>Contact</h3>
+                  <ul>
+                    <li>
+                      <span>Call: </span>
+                      <a href="tel:+91-08026719484">
+                        080-26719484
+                      </a>
+                    </li>
+                    <li>
+                      <span>Email: </span> <a href="mailto:info@advithconsulting.in">
+                        support@advithitec.in
+                      </a>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>

pages/client-servicing/virtual-finance-office/virtual-cfo.js

@@ -10,6 +10,7 @@ import RightSideImage from "@/container/Corpedia/RightSideImage";
 import Seo from "@/components/reuseables/Seo/Seo";
 import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
 import Card from "@/components/reuseables/services/Card";
+import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt";
 
 // method one content
 
@@ -68,10 +69,14 @@ const clientservicecfo = ({ cfopage, conversionData }) => {
                   );
                 case "dynamic-zone.element-one":
                   return (
+                    <>
                       <MethodOne
                         heading={section?.Heading}
                         data={section?.ElementList}
                       />
+                      <HowWeDoIt heading={section?.Heading}
+                        data={section?.ElementList} />
+                    </>
                   );
                 case "dynamic-zone.element-two":
                   return (

styles/responsive.css

@@ -3978,7 +3978,7 @@
   }
 
   .fuctional-areas {
-    height: 69vh;
+    /* height: 69vh; */
     }
     .method-one-above-img {
       margin-top: 13vw;
@@ -4099,8 +4099,10 @@
     height: 83vh;
 }
 .fuctional-areas {
-height: 45vh;
+
+/* height: 45vh; */
 }
+
 /* cfo services */
 .method-one-above-img {
   margin-top: 9vw;
@@ -4118,7 +4120,7 @@ height: 45vh;
   /* Add your styles here */
 
   .fuctional-areas{
-    height: 65vh;
+    /* height: 65vh; */
   }  
   .single-services-box .content{
     /* height: 42vh; */

styles/styles.css

@@ -79,7 +79,7 @@ Default CSS
   --transition: .5s;
 }
 
-.primary-text{
+.primary-text {
   color: var(--mainColor);
 }
 
@@ -1992,9 +1992,6 @@ Services Area CSS
   transform: translateY(-50%);
 }
 
-
-
-
 .single-services-item .link-btn {
   display: inline-block;
   font-weight: 700;
@@ -2007,7 +2004,16 @@ Services Area CSS
 
 .single-services-item:hover {
   box-shadow: 0 7px 30px -10px rgba(133, 153, 162, 0.3);
-  background-color: var(--whiteColor);
+  background-color: var(--mainColor2);
+}
+
+
+.single-services-item:hover h3 {
+  color: #fff;
+}
+
+.single-services-item:hover p {
+  color: #fff;
 }
 
 .single-services-item:hover .icon {
@@ -3359,6 +3365,7 @@ Free Quote Area CSS
   padding: 50px;
   overflow: hidden;
 }
+
 /* 
 .free-quote-inner::before {
   content: "";
@@ -7477,7 +7484,7 @@ Footer Area CSS
 }
 
 .single-footer-widget .footer-contact-info {
-  margin-top: 20px;
+  /* margin-top: 20px; */
 }
 
 .single-footer-widget .footer-contact-info h5 {
@@ -8178,7 +8185,7 @@ h3.sub-title {
 }
 
 .fuctional-areas {
-  height: 50vh;
+  /* height: 50vh; */
   /* max-width: fit-content; */
 }
 
@@ -8768,6 +8775,10 @@ ul.pagination.custom-pagination {
   background-image: url(/images/banner/back-ground.webp);
 }
 
+.virtual-fiance-bg p {
+  font-size: 20px;
+}
+
 .section-title-overview {
   border-bottom: 1px solid var(--mainColor);
   margin-bottom: 10px;
@@ -8778,7 +8789,7 @@ ul.pagination.custom-pagination {
   color: var(--mainColor2)
 }
 
- .variant-box {
+.variant-box {
   border-bottom: 2px solid #f8971f;
   background-color: #feead2b8;
   border-radius: 10px;
@@ -8788,24 +8799,90 @@ ul.pagination.custom-pagination {
   height: 100%;
   transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
   transform: translateY(0);
-  color: inherit; /* Keeps base color until hover */
+  color: inherit;
+  /* Keeps base color until hover */
 }
 
 .variant-box:hover {
   background-color: var(--mainColor);
   transform: translateY(-8px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
-  color: #fff; /* Applies to body text by default */
+  color: #fff;
+  /* Applies to body text by default */
+}
+
+.variant-box:hover h5 {
+  color: #fff;
+}
+
+.variant-box:hover p {
+  color: #fff;
+}
+
+/*============ How to do it new section Start ============ */
+
+.HowWeDoIt_card {
+  position: relative;
+  /* width: 300px; */
+  height: 300px;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: box-shadow 0.3s ease;
 }
 
-.variant-box:hover h5
- {
+.HowWeDoIt_card:hover {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.HowWeDoIt_card:hover h2 {
+  opacity: 0;
+  transform: scale(0.7);
+}
+
+.HowWeDoIt_card:hover .HowWeDoIt_card_content {
+  top: 0;
+  height: 100%;
+}
+
+.HowWeDoIt_card h2 {
+  padding: 10px;
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  font-size: 20px;
+  color: #fff;
+  z-index: 2;
+  /* font-weight: 300; */
+  transition: transform 0.25s ease, opacity 0.25s ease;
+  background-color: #f8971f;
+  border-radius: 10px;
+  /* width: 400px; */
+}
+
+.HowWeDoIt_card_content {
+  position: absolute;
+  /* bottom: -120%; */
+  left: 0;
+  width: 100%;
+  padding: 30px;
+  background: var(--mainColor2);
+  color: #fff;
+  transition: bottom 0.3s ease;
+}
+
+.HowWeDoIt_card_content h4 {
   color: #fff;
+
 }
-.variant-box:hover p{
+
+.HowWeDoIt_card_content p {
   color: #fff;
 }
 
+/*============ How to do it new section END ============ */
 
 @media (max-width: 1200px) {
   .client-servicing-grid {
@@ -9362,7 +9439,8 @@ ul.pagination.custom-pagination {
   height: 100%;
   object-fit: cover;
   transition: opacity 0.4s ease, transform 0.4s ease;
-  opacity: 1; /* ✅ Fully visible by default */
+  opacity: 1;
+  /* ✅ Fully visible by default */
 }
 
 /* 🔦 Image dims only on hover */
@@ -9397,7 +9475,8 @@ ul.pagination.custom-pagination {
   transform: translate(-50%, -50%);
   text-align: center;
   color: #fff;
-  opacity: 0; /* 🙈 Hidden initially */
+  opacity: 0;
+  /* 🙈 Hidden initially */
   transition: opacity 0.4s ease, transform 0.4s ease;
   padding: 0 15px;
 }
@@ -9414,11 +9493,13 @@ ul.pagination.custom-pagination {
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   text-align: center;
 }
+
 .card-badge {
   position: absolute;
   top: 15px;
   left: 15px;
-  background: #f8971f; /* Orange or theme color */
+  background: #f8971f;
+  /* Orange or theme color */
   color: #fff;
   padding: 6px 12px;
   border-radius: 4px;
@@ -9433,4 +9514,3 @@ ul.pagination.custom-pagination {
   opacity: 0;
   transform: scale(0.9);
 }
\ No newline at end of file
-