Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 34251ec5 by sujata
Options

change in header

1 parent 0946a493
Inline Side-by-side
Showing 8 changed files with 1115 additions and 372 deletions
container/Home/Industries.js
......@@ -6,7 +6,6 @@ import { Col, Container, Row } from "react-bootstrap";
import Link from "next/link";
import { cleanImage } from "@/layout/imageHandling";
import Heading from "@/components/reuseables/Heading";
import SwiperNav from "@/components/reuseables/SwiperNav";
const industriesData = [
{
......
layout/Header.js
......@@ -104,347 +104,7 @@ const Header = () => {
return (
<>
<style jsx>{`
.navbar-area {
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 999;
}
.navbar-area.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.navbar-nav {
display: flex;
align-items: center;
gap: 0.1rem;
justify-content: flex-end;
}
.nav-link {
color: #4a5568;
font-weight: 500;
text-decoration: none;
padding: 0.5rem 0;
transition: color 0.2s ease;
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-link:hover {
color: #2d3748;
}
.nav-link.active {
color: #2d3748;
font-weight: 600;
}
.nav-link.dropdown-nav {
color: #1a202c;
font-weight: 700;
}
.nav-link.dropdown-nav:hover {
color: #000;
}
.dropdown-arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #1a202c;
margin-left: 0.25rem;
}
.book-consult-btn {
background: #f6d55c;
color: #2d3748;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}
.book-consult-btn:hover {
background: #f4d03f;
}
/* Knowledge Dropdown Styles */
.knowledge-dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
z-index: 1001;
padding: 0.5rem 0;
min-width: 200px;
list-style: none;
margin: 0;
}
.knowledge-dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu .nav-item {
margin: 0;
padding: 0;
}
.dropdown-menu .nav-link {
display: block;
padding: 0.7rem 1.5rem;
color: #222;
font-weight: 500;
font-size: 0.95rem;
text-decoration: none;
border-radius: 0.25rem;
background: none;
transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-menu .nav-link.active {
color: #f6a100;
font-weight: 600;
}
.dropdown-menu .nav-link:hover {
color: #f6a100;
font-weight: 600;
background: none;
}
.dropdown-menu ul {
list-style: none;
padding: 0;
margin: 0;
padding-left: 0;
}
.dropdown-menu ul .nav-link {
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
color: #4a5568;
}
.dropdown-menu ul .nav-link:hover {
color: #f6a100;
}
/* Mega Menu Styles */
.mega-menu-container {
position: relative;
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border-top: 1px solid #e2e8f0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.mega-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-menu-content {
max-width: 1400px;
margin: 0 auto;
padding: 2.5rem;
}
.mega-grid {
display: grid;
gap: 2.5rem;
}
.client-servicing-grid {
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
}
.mega-column {
min-height: 120px;
}
.service-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin-bottom: 1rem;
}
.mega-column-title {
font-size: 1.125rem;
font-weight: 700;
color: #2d3748;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f6d55c;
display: block;
text-decoration: none;
line-height: 1.3;
flex: 1;
margin-bottom: 0;
font-weight: bold;
font-family: inherit;
}
.mega-column-title:hover {
color: #1a202c;
}
.mega-column-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 1rem;
transition: all 0.3s ease;
}
.mega-column-list li {
margin-bottom: 0.75rem;
}
.mega-column-list a {
color: #4a5568;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
transition: color 0.2s ease;
display: block;
padding: 0.25rem 0;
}
.mega-column-list a:hover {
color: #2d3748;
font-weight: 600;
}
.mega-column-list a.active {
color: #2d3748;
font-weight: 600;
}
.mega-column:not(:last-child) {
border-right: 1px solid #e2e8f0;
padding-right: 2rem;
}
/* Overlay for closing menu */
.mega-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 999;
display: none;
}
.mega-overlay.show {
display: block;
}
@media (max-width: 1200px) {
.client-servicing-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.mega-menu-content {
padding: 2rem;
}
.mega-column:not(:last-child) {
border-right: none;
padding-right: 0;
}
.mega-column:nth-child(3n):not(:last-child) {
border-right: 1px solid #e2e8f0;
padding-right: 1.5rem;
}
}
@media (max-width: 768px) {
.client-servicing-grid {
grid-template-columns: 1fr;
gap: 0;
}
.mega-menu-content {
padding: 1.5rem;
}
.mega-column-title {
font-size: 1rem;
border-bottom: none;
padding-bottom: 0;
}
.mega-column-list a {
font-size: 0.875rem;
}
.mega-column:not(:last-child) {
border-right: none;
padding-right: 0;
}
.mega-column {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.mega-column:last-child {
border-bottom: none;
margin-bottom: 0;
}
.service-header {
margin-bottom: 0.5rem;
}
}
@media (max-width: 480px) {
.mega-menu-content {
padding: 1rem;
}
}
`}</style>
<div className="mega-menu-container">
<div id="navbar" className="navbar-area">
<div className="zixon-nav">
......
pages/client-servicing/virtual-finance-office/apc.js 0 → 100644
import PageBanner from "@/components/reuseables/PageBanner";
import MethodOne from "@/components/reuseables/services/MethodOne";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import Clientele from "@/components/reuseables/Clientele";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
// method one content
const clientserviceapc = ({ apcpage ,conversionData }) => {
// console.log(apcpage ,"apcpage")
const banners = [
{
imageSrc: cleanImage(apcpage?.Banner?.Image?.url),
pageTitle: apcpage?.Banner?.Heading,
homePageUrl: "/",
homePageText: "Home",
activePageText: apcpage?.Banner?.Heading,
},
];
const dynamicdata = apcpage?.APCDetails;
// console.log("dynamicdata", dynamicdata);
const clientlogo = apcpage?.Clientel;
// console.log("clientlogo", clientlogo);
const seo = apcpage?.seo;
// console.log(seo)
const code = conversionData?.conversion;
return (
<>
<Seo seo={seo} />
<ConversionCode code={code} />
<PageBanner banners={banners} />
<div className="cfo-services-area ptb-100">
<section className="cfo-page">
{dynamicdata &&
dynamicdata?.map((section, index) => {
// console.log("section", section);
switch (section.__component) {
case "dynamic-zone.about":
return (
<LeftSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.background":
return (
<RightSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.element-one":
return (
<MethodOne
heading={section?.Heading}
data={section?.ElementList}
/>
);
case "dynamic-zone.element-two":
return (
<MethodTwoSection
heading={section?.Heading}
data={section?.ElementList}
/>
);
default:
return null;
}
})}
</section>
</div>
<div className="ptb-100">
<Clientele partners={clientlogo} />
</div>
</>
);
};
export default clientserviceapc;
export async function getServerSideProps() {
try {
const query1 = {
populate: [
"Banner",
"Banner.Image",
"APCDetails",
"APCDetails.Image",
"APCDetails.Heading",
"APCDetails.ElementList.StepImg",
"Clientel.logos",
"seo",
"seo.metaImage",
"seo.schema",
],
};
const query2 = {
populate: ["conversion"],
};
const query1String = qs.stringify(query1, {
encodeValuesOnly: true,
});
const query12String = qs.stringify(query2, {
encodeValuesOnly: true,
});
const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/apc?${query1String}`;
const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
console.log(`Final url: ${endpoint1}`);
const [response1, response2] = await Promise.all([
axios.get(endpoint1),
axios.get(endpoint2),
]);
const apcpage = response1.data.data;
const conversionData = response2.data.data;
return {
props: { apcpage ,conversionData },
};
} catch (error) {
console.log("Error", error);
}
}
pages/client-servicing/virtual-finance-office/book-closures-audit.js 0 → 100644
import PageBanner from "@/components/reuseables/PageBanner";
import MethodOne from "@/components/reuseables/services/MethodOne";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import Clientele from "@/components/reuseables/Clientele";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
// method one content
const bookclosures = ({ bookclosurepage ,conversionData }) => {
// console.log(bookclosurepage ,"bookclosurepage")
const banners = [
{
imageSrc: cleanImage(bookclosurepage?.Banner?.Image?.url),
pageTitle: bookclosurepage?.Banner?.Heading,
homePageUrl: "/",
homePageText: "Home",
activePageText: bookclosurepage?.Banner?.Heading,
},
];
const dynamicdata = bookclosurepage?.FCDeatils;
// console.log("dynamicdata", dynamicdata);
const clientlogo = bookclosurepage?.Clientel;
// console.log("clientlogo", clientlogo);
const seo = bookclosurepage?.seo;
// console.log(seo)
const code = conversionData?.conversion;
return (
<>
<Seo seo={seo} />
<ConversionCode code={code} />
<PageBanner banners={banners} />
<div className="cfo-services-area ptb-100">
<section className="cfo-page">
{dynamicdata &&
dynamicdata?.map((section, index) => {
// console.log("section", section);
switch (section.__component) {
case "dynamic-zone.about":
return (
<LeftSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.background":
return (
<RightSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.element-one":
return (
<MethodOne
heading={section?.Heading}
data={section?.ElementList}
/>
);
case "dynamic-zone.element-two":
return (
<MethodTwoSection
heading={section?.Heading}
data={section?.ElementList}
/>
);
default:
return null;
}
})}
</section>
</div>
<div className="ptb-100">
<Clientele partners={clientlogo} />
</div>
</>
);
};
export default bookclosures;
export async function getServerSideProps() {
try {
const query1 = {
populate: [
"Banner",
"Banner.Image",
"BookClosureDetails",
"BookClosureDetails.Image",
"BookClosureDetails.Heading",
"BookClosureDetails.ElementList.StepImg",
"Clientel.logos",
"seo",
"seo.metaImage",
"seo.schema",
],
};
const query2 = {
populate: ["conversion"],
};
const query1String = qs.stringify(query1, {
encodeValuesOnly: true,
});
const query12String = qs.stringify(query2, {
encodeValuesOnly: true,
});
const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/book-closure-and-audit-page?${query1String}`;
const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
console.log(`Final url: ${endpoint1}`);
const [response1, response2] = await Promise.all([
axios.get(endpoint1),
axios.get(endpoint2),
]);
const bookclosurepage = response1.data.data;
const conversionData = response2.data.data;
return {
props: { bookclosurepage ,conversionData },
};
} catch (error) {
console.log("Error", error);
}
}
pages/client-servicing/virtual-finance-office/index.js 0 → 100644
import React from "react";
import PageBanner from "@/components/reuseables/PageBanner";
import Industries from "@/components/reuseables/Industries";
import CallBackRequest from "@/components/reuseables/CallBackRequest";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchServiceList } from "@/redux/slices/clientservice";
import { cleanImage } from "@/layout/imageHandling";
import qs from "qs";
import axios from "axios";
import { fetchIndustryList } from "@/redux/slices/industryslice";
import { fetchFunctionArea } from "@/redux/slices/functionareaslice";
import TechnicalExpertise from "@/container/ClientServicing/ TechnicalExpertise";
import ClientService from "@/container/Home/ClientService";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
import FunctionalAreas from "@/components/reuseables/FunctionalAreas";
const VirtualFinanceOfficePage = ({ ClientPage , conversionData }) => {
// console.log(ClientPage, "data1");
const banners = [
{
imageSrc: cleanImage(ClientPage?.Banner?.Image?.url),
pageTitle: ClientPage?.Banner?.Heading,
homePageUrl: "/",
homePageText: "Home",
activePageText: ClientPage?.Banner?.Heading,
},
// Add more banners as needed
];
const technicalexpertise = ClientPage?.Technicalexpertise;
// console.log(technicalexpertise,"technicalexpertise")
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchServiceList());
dispatch(fetchIndustryList());
dispatch(fetchFunctionArea());
}, []);
const serviceData = useSelector((state) => state.servicelist.data)
const IndustryData = useSelector((state) => state.industrylist.data)
const FunctionArea = useSelector((state) => state.functionarea.data)
// console.log(FunctionArea, "data")
const seo = ClientPage?.seo;
const code = conversionData?.conversion;
return (
<>
<PageBanner banners={banners} />
<ConversionCode code={code} />
<ClientService service={serviceData} />
{/* <OurService /> */}
<TechnicalExpertise technicalexpertise={technicalexpertise}/>
<FunctionalAreas functionarea={FunctionArea} />
<Industries industry={IndustryData} />
<CallBackRequest />
</>
);
};
export default VirtualFinanceOfficePage;
export async function getServerSideProps() {
try {
const query1 = {
populate: [
"Banner",
"Banner.Image",
// "Technicalexpertise",
// "Technicalexpertise.Technicallist"
],
};
const query2 = {
populate: ["conversion"],
};
const query1String = qs.stringify(query1, {
encodeValuesOnly: true,
});
const query12String = qs.stringify(query2, {
encodeValuesOnly: true,
});
const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/virtual-finance-office-page?${query1String}`;
const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
console.log(`Final url: ${endpoint1}`);
const [response1, response2] = await Promise.all([
axios.get(endpoint1),
axios.get(endpoint2),
]);
const ClientPage = response1.data.data;
const conversionData = response2.data.data;
return {
props: { ClientPage,conversionData },
};
} catch (error) {
console.log("Error", error);
}
}
pages/client-servicing/virtual-finance-office/virtual-cfo.js 0 → 100644
import PageBanner from "@/components/reuseables/PageBanner";
import MethodOne from "@/components/reuseables/services/MethodOne";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import Clientele from "@/components/reuseables/Clientele";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
// method one content
const clientservicecfo = ({ cfopage ,conversionData }) => {
// console.log(cfopage ,"cfopage")
const banners = [
{
imageSrc: cleanImage(cfopage?.Banner?.Image?.url),
pageTitle: cfopage?.Banner?.Heading,
homePageUrl: "/",
homePageText: "Home",
activePageText: cfopage?.Banner?.Heading,
},
];
const dynamicdata = cfopage?.CfoDeatils;
// console.log("dynamicdata", dynamicdata);
const clientlogo = cfopage?.Clientel;
// console.log("clientlogo", clientlogo);
const seo = cfopage?.seo;
// console.log(seo)
const code = conversionData?.conversion;
return (
<>
<Seo seo={seo} />
<ConversionCode code={code} />
<PageBanner banners={banners} />
<div className="cfo-services-area ptb-100">
<section className="cfo-page">
{dynamicdata &&
dynamicdata?.map((section, index) => {
// console.log("section", section);
switch (section.__component) {
case "dynamic-zone.about":
return (
<LeftSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.background":
return (
<RightSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.element-one":
return (
<MethodOne
heading={section?.Heading}
data={section?.ElementList}
/>
);
case "dynamic-zone.element-two":
return (
<MethodTwoSection
heading={section?.Heading}
data={section?.ElementList}
/>
);
default:
return null;
}
})}
</section>
</div>
<div className="ptb-100">
<Clientele partners={clientlogo} />
</div>
</>
);
};
export default clientservicecfo;
export async function getServerSideProps() {
try {
const query1 = {
populate: [
"Banner",
"Banner.Image",
"CfoDeatils",
"CfoDeatils.Image",
"CfoDeatils.Heading",
"CfoDeatils.ElementList.StepImg",
"Clientel.logos",
"seo",
"seo.metaImage",
"seo.schema",
],
};
const query2 = {
populate: ["conversion"],
};
const query1String = qs.stringify(query1, {
encodeValuesOnly: true,
});
const query12String = qs.stringify(query2, {
encodeValuesOnly: true,
});
const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/cfo-page?${query1String}`;
const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
console.log(`Final url: ${endpoint1}`);
const [response1, response2] = await Promise.all([
axios.get(endpoint1),
axios.get(endpoint2),
]);
const cfopage = response1.data.data;
const conversionData = response2.data.data;
return {
props: { cfopage ,conversionData },
};
} catch (error) {
console.log("Error", error);
}
}
pages/client-servicing/virtual-finance-office/virtual-fc.js 0 → 100644
import PageBanner from "@/components/reuseables/PageBanner";
import MethodOne from "@/components/reuseables/services/MethodOne";
import MethodTwoSection from "@/components/reuseables/services/MethodTwo";
import Clientele from "@/components/reuseables/Clientele";
import qs from "qs";
import axios from "axios";
import { cleanImage } from "@/layout/imageHandling";
import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage";
import Seo from "@/components/reuseables/Seo/Seo";
import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
// method one content
const clientservicefc = ({ fcpage ,conversionData }) => {
// console.log(fcpage ,"fcpage")
const banners = [
{
imageSrc: cleanImage(fcpage?.Banner?.Image?.url),
pageTitle: fcpage?.Banner?.Heading,
homePageUrl: "/",
homePageText: "Home",
activePageText: fcpage?.Banner?.Heading,
},
];
const dynamicdata = fcpage?.FCDeatils;
// console.log("dynamicdata", dynamicdata);
const clientlogo = fcpage?.Clientel;
// console.log("clientlogo", clientlogo);
const seo = fcpage?.seo;
// console.log(seo)
const code = conversionData?.conversion;
return (
<>
<Seo seo={seo} />
<ConversionCode code={code} />
<PageBanner banners={banners} />
<div className="cfo-services-area ptb-100">
<section className="cfo-page">
{dynamicdata &&
dynamicdata?.map((section, index) => {
// console.log("section", section);
switch (section.__component) {
case "dynamic-zone.about":
return (
<LeftSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.background":
return (
<RightSideImage
title={section?.Title}
subtitle={section?.Subtitle}
image={section?.Image}
content={section?.Content}
/>
);
case "dynamic-zone.element-one":
return (
<MethodOne
heading={section?.Heading}
data={section?.ElementList}
/>
);
case "dynamic-zone.element-two":
return (
<MethodTwoSection
heading={section?.Heading}
data={section?.ElementList}
/>
);
default:
return null;
}
})}
</section>
</div>
<div className="ptb-100">
<Clientele partners={clientlogo} />
</div>
</>
);
};
export default clientservicefc;
export async function getServerSideProps() {
try {
const query1 = {
populate: [
"Banner",
"Banner.Image",
"FCDeatils",
"FCDeatils.Image",
"FCDeatils.Heading",
"FCDeatils.ElementList.StepImg",
"Clientel.logos",
"seo",
"seo.metaImage",
"seo.schema",
],
};
const query2 = {
populate: ["conversion"],
};
const query1String = qs.stringify(query1, {
encodeValuesOnly: true,
});
const query12String = qs.stringify(query2, {
encodeValuesOnly: true,
});
const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/fc-page?${query1String}`;
const endpoint2 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/google-manger?${query12String}`;
console.log(`Final url: ${endpoint1}`);
const [response1, response2] = await Promise.all([
axios.get(endpoint1),
axios.get(endpoint2),
]);
const fcpage = response1.data.data;
const conversionData = response2.data.data;
return {
props: { fcpage ,conversionData },
};
} catch (error) {
console.log("Error", error);
}
}
styles/styles.css
......@@ -194,6 +194,7 @@ p:last-child {
padding-top: 70px;
padding-bottom: 70px;
}
.ptb-50 {
padding-top: 50px;
padding-bottom: 50px;
......@@ -2695,7 +2696,8 @@ Projects Details Area CSS
padding-bottom: 0;
border-bottom: none;
}
.projects-details-info h5{
.projects-details-info h5 {
font-weight: 400;
}
......@@ -2855,7 +2857,8 @@ Testimonial Area CSS
padding-bottom: 15px;
font-size: 40px;
}
.testimonial-content p{
.testimonial-content p {
text-align: left;
}
......@@ -3137,7 +3140,8 @@ Free Quote Area CSS
position: relative;
padding-bottom: 25px;
text-align: left;
z-index: 5; /* Adjust z-index if needed */
z-index: 5;
/* Adjust z-index if needed */
}
.free-quote-content .sub-title {
......@@ -3350,7 +3354,7 @@ Free Quote Area CSS
.free-quote-inner {
position: relative;
z-index: 1;
background-color:var(--blackColor);
background-color: var(--blackColor);
/* border-radius: 20px; */
padding-top: 100px;
padding-left: 50px;
......@@ -4874,6 +4878,7 @@ Partner Area CSS
.image.industry-logo {
width: 316px !important;
}
/*================================================
Blog Area CSS
=================================================*/
......@@ -7229,10 +7234,12 @@ Widget Area CSS
.widget-area .widget_service_categories ul li:last-child {
margin-bottom: 0;
}
.react-tabs__tab--selected{
color: var(--mainColor)!important;
border: none!important;
.react-tabs__tab--selected {
color: var(--mainColor) !important;
border: none !important;
}
/*================================================
404 Error Area CSS
=================================================*/
......@@ -8162,24 +8169,28 @@ h3.sub-title {
height: 50vh;
/* max-width: fit-content; */
}
.area_expertise{
padding: 12px 12px 12px 12px!important;
top: 50%!important;
width: 80%!important;
.area_expertise {
padding: 12px 12px 12px 12px !important;
top: 50% !important;
width: 80% !important;
}
.method-descr-mobile{
.method-descr-mobile {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height:1.6;
line-height: 1.6;
}
h6.method-title-moblie{
font-size: 15px!important;
h6.method-title-moblie {
font-size: 15px !important;
}
.bg-light{
background-color: var(--lightgrayColor)!important;
.bg-light {
background-color: var(--lightgrayColor) !important;
}
/* ---------------------------client servicing page------------------------------ */
......@@ -8193,7 +8204,8 @@ font-size: 15px!important;
transform: translateY(-55%);
box-shadow: 0 7px 30px -10px rgba(133, 153, 162, 0.3);
}
.services-slides .swiper-button-next{
.services-slides .swiper-button-next {
width: 40px;
height: 40px;
background-color: var(--whiteColor);
......@@ -8202,22 +8214,26 @@ font-size: 15px!important;
transform: translateY(-55%);
box-shadow: 0 7px 30px -10px rgba(133, 153, 162, 0.3);
}
.services-slides .swiper-button-prev::after, .services-slides .swiper-button-next::after {
.services-slides .swiper-button-prev::after,
.services-slides .swiper-button-next::after {
font-size: 20px;
}
/* ------------career-details-page ----------------- */
.career-details .location , .career-details .yearofExperience{
.career-details .location,
.career-details .yearofExperience {
color: var(--mainColor);
}
/* --------------custom slider--------------- */
.cust_nav, .overlayline {
.cust_nav,
.overlayline {
position: absolute;
left: 0;
width: 100%;
z-index: 10!;
z-index: 10 !;
}
......@@ -8258,7 +8274,7 @@ font-size: 15px!important;
}
/* ------------------blog ----------------- */
.blog-pointer{
.blog-pointer {
color: var(--mainColor);
}
......@@ -8273,7 +8289,8 @@ font-size: 15px!important;
border-top: 3px solid var(--mainColor);
border-bottom: 3px solid var(--mainColor);
}
.industry-box h5{
.industry-box h5 {
font-weight: 400 !important;
}
......@@ -8292,26 +8309,31 @@ font-size: 15px!important;
position: absolute;
transform: translateY(-50%);
}
.single-services-item h3 {
margin-bottom: 12px;
font-size: 22px;
}
span.error{
color: rgb(189, 17, 17);
span.error {
color: rgb(189, 17, 17);
}
.pagination {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
cursor: pointer;
}
.pagination .active a {
font-weight: bold;
color: #fff!important;
color: #fff !important;
}
ul.pagination.custom-pagination {
......@@ -8349,7 +8371,7 @@ ul.pagination.custom-pagination {
justify-content: center;
}
.custom-pagination li a:hover{
.custom-pagination li a:hover {
color: #fff;
background-color: var(--mainColor);
}
......@@ -8363,14 +8385,16 @@ ul.pagination.custom-pagination {
margin-bottom: 40px;
color: #fff;
}
.section-title-download .sub-title{
.section-title-download .sub-title {
color: var(--mainColor);
}
.section-title-download h2 {
color: #fff;
}
.section-title-download p{
.section-title-download p {
color: #fff;
}
......@@ -8430,4 +8454,347 @@ ul.pagination.custom-pagination {
.default-btn-three:hover::before {
border-color: var(--blackColor);
}
/* navigation mega menu*/
.navbar-area {
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 999;
}
.navbar-area.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.navbar-nav {
display: flex;
/* align-items: center; */
gap: 0.1rem;
justify-content: flex-end;
}
.nav-link {
color: var(--mainColor2);
font-weight: 500;
text-decoration: none;
padding: 0.5rem 0;
transition: color 0.2s ease;
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-link:hover {
color: var(--mainColor2);
}
.nav-link.active {
color: var(--mainColor2);
font-weight: 600;
}
.nav-link.dropdown-nav {
color: #1a202c;
font-weight: 700;
padding-top: 25px;
padding-bottom: 25px;
}
.nav-link.dropdown-nav:hover {
color: #000;
}
.dropdown-arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #1a202c;
margin-left: 0.25rem;
}
.book-consult-btn {
background: #f6d55c;
color: var(--mainColor2);
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}
.book-consult-btn:hover {
background: #f4d03f;
}
/* Knowledge Dropdown Styles */
.knowledge-dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
z-index: 1001;
padding: 0.5rem 0;
min-width: 200px;
list-style: none;
margin: 0;
}
.knowledge-dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu .nav-item {
margin: 0;
padding: 0;
}
.dropdown-menu .nav-link {
display: block;
padding: 0.7rem 1.5rem;
color: #222;
font-weight: 500;
font-size: 0.95rem;
text-decoration: none;
border-radius: 0.25rem;
background: none;
transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-menu .nav-link.active {
color: var(--mainColor);
font-weight: 600;
}
.dropdown-menu .nav-link:hover {
color: var(--mainColor);
font-weight: 600;
background: none;
}
.dropdown-menu ul {
list-style: none;
padding: 0;
margin: 0;
padding-left: 0;
}
.dropdown-menu ul .nav-link {
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
color: var(--mainColor2);
}
.dropdown-menu ul .nav-link:hover {
color: var(--mainColor);
}
/* Mega Menu Styles */
.mega-menu-container {
position: relative;
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border-top: 1px solid #e2e8f0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.mega-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-menu-content {
max-width: 1400px;
margin: 0 auto;
padding: 2.5rem;
}
.mega-grid {
display: grid;
gap: 2.5rem;
}
.client-servicing-grid {
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
}
.mega-column {
min-height: 120px;
}
.service-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin-bottom: 1rem;
}
.mega-column-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--mainColor2);
padding-bottom: 0.75rem;
border-bottom: 2px solid #f6d55c;
display: block;
text-decoration: none;
line-height: 1.3;
flex: 1;
margin-bottom: 0;
font-weight: bold;
font-family: inherit;
}
.mega-column-title:hover {
color: #1a202c;
}
.mega-column-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 1rem;
transition: all 0.3s ease;
}
.mega-column-list li {
margin-bottom: 0.75rem;
}
.mega-column-list a {
color: var(--mainColor2);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
transition: color 0.2s ease;
display: block;
padding: 0.25rem 0;
}
.mega-column-list a:hover {
color: var(--mainColor2);
font-weight: 600;
}
.mega-column-list a.active {
color: var(--mainColor2);
font-weight: 600;
}
.mega-column:not(:last-child) {
border-right: 1px solid #e2e8f0;
padding-right: 2rem;
}
/* Overlay for closing menu */
.mega-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 999;
display: none;
}
.mega-overlay.show {
display: block;
}
@media (max-width: 1200px) {
.client-servicing-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.mega-menu-content {
padding: 2rem;
}
.mega-column:not(:last-child) {
border-right: none;
padding-right: 0;
}
.mega-column:nth-child(3n):not(:last-child) {
border-right: 1px solid #e2e8f0;
padding-right: 1.5rem;
}
}
@media (max-width: 768px) {
.client-servicing-grid {
grid-template-columns: 1fr;
gap: 0;
}
.mega-menu-content {
padding: 1.5rem;
}
.mega-column-title {
font-size: 1rem;
border-bottom: none;
padding-bottom: 0;
}
.mega-column-list a {
font-size: 0.875rem;
}
.mega-column:not(:last-child) {
border-right: none;
padding-right: 0;
}
.mega-column {
border-bottom: 1px solid #e2e8f0;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.mega-column:last-child {
border-bottom: none;
margin-bottom: 0;
}
.service-header {
margin-bottom: 0.5rem;
}
}
@media (max-width: 480px) {
.mega-menu-content {
padding: 1rem;
}
}
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!