From 6c861517f2a6b248175c14cd53178262a6cf4171 Mon Sep 17 00:00:00 2001 From: akash Date: Fri, 20 Feb 2026 21:51:07 +0530 Subject: [PATCH] web services page new sections updated --- pages/website-development-service.js | 4 +- public/assets/css/responsive.css | 2 +- public/assets/css/style.css | 31 +- src/ConsenHead.js | 5 + src/components/Home/Banner1.js | 111 +- .../about-our-team.js | 2 +- .../key-feacture.js | 205 +- .../our-development.js | 92 +- .../testimonial.js | 186 +- .../Website-development-service/we-serve.js | 145 +- .../why-choose-us.js | 129 +- styles/globals.css | 2478 ++++++++++++++++- 12 files changed, 3029 insertions(+), 361 deletions(-) diff --git a/pages/website-development-service.js b/pages/website-development-service.js index 6ac9ac1..1a5ebb4 100644 --- a/pages/website-development-service.js +++ b/pages/website-development-service.js @@ -32,8 +32,10 @@ const Index5 = () => {
- +
+ + diff --git a/public/assets/css/responsive.css b/public/assets/css/responsive.css index 04ce661..590e829 100644 --- a/public/assets/css/responsive.css +++ b/public/assets/css/responsive.css @@ -6,7 +6,7 @@ } a.logo_img img { - width: 170px !important; + width: 200px !important; } .header-button a { diff --git a/public/assets/css/style.css b/public/assets/css/style.css index daf03ac..fdf0a3b 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -2821,7 +2821,7 @@ p.choose-text1 { margin-bottom: 9px; } -zz .why-choose-us-area .dreamit-icon-list ul li i { +.why-choose-us-area .dreamit-icon-list ul li i { width: inherit; height: inherit; line-height: inherit; @@ -9644,4 +9644,31 @@ ul.social-box li a:hover { } .blog-section.details .blog-content-text a { color: #3779b9; -} \ No newline at end of file +} +/* ===== Testimonial Section - Right Side Image Shape ===== */ +.benefit-image-layout { + position: relative; + display: inline-block; + width: 100%; +} + +.benefit-image-layout img { + width: 100%; + height: auto; + display: block; + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + object-fit: cover; + max-height: 520px; +} + +.benefit-image-layout::before { + content: ''; + position: absolute; + top: 15px; + right: -15px; + bottom: -15px; + left: 15px; + border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + background: #0d1b3e; + z-index: -1; +} diff --git a/src/ConsenHead.js b/src/ConsenHead.js index 95d686b..af46296 100644 --- a/src/ConsenHead.js +++ b/src/ConsenHead.js @@ -42,6 +42,11 @@ new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.cre sizes="56x56" href="/assets/images/fav-icon/icon.webp" /> + {/* Google Fonts */} + {/* bootstrap CSS */} { <> -
+

METATRONCUBE SOLUTIONS

- Build a Website + Build a Website
That Wins Customers & Grows Your Business!

@@ -60,33 +60,98 @@ const Banner1 = () => {
-
-
-
-
-

Custom Solutions

-

Built for your goals

+
+
+ {/* Left Column */} +
+
+
We Guarantee
+

Complete Digital Solutions

+

+ We create custom digital solutions tailored to your business goals, ensuring strategic design and seamless development from concept to launch. Every project is built for performance, scalability, and long-term growth. +

+
-
-
-

End-to-End Support

-

Design to launch

+ + {/* Center Column - Illustration */} +
+
+ {/* Floating Circular Items in an Arc */} +
+
+
+ Map +
+
+
Custom Solutions
+

Built for your goals

+
+
+ +
+
+ Support +
+
+
SEO Optimized
+

Better visibility

+
+
+ +
+
+ SEO +
+
+
End-to-End Support
+

Design to launch

+
+
+ +
+
+ Responsive +
+
+
Responsive Design
+

All devices perfect

+
+
+
+ + Delivery Illustration { + e.target.src = 'https://img.freepik.com/free-vector/delivery-service-with-mask-concept_23-2148497067.jpg'; + }} + />
-
-
-

SEO Optimized

-

Better visibility

-
-
-
-
-

Responsive Design

-

All devices perfect

+ + {/* Right Column */} +
+
+

Optimized, Responsive & Future-Ready +

+ +

+ Our websites are SEO-optimized for better online visibility and designed to work perfectly across all devices. With a strong technical foundation, we deliver fast, responsive, and user-friendly digital experiences. +

+
+
+ Scooter Icon { e.target.src = 'https://cdn-icons-png.flaticon.com/512/3132/3132688.png'; }} /> +
+
+ Call Us Free : +

+1-647-679-7651

+
+
diff --git a/src/components/Website-development-service/about-our-team.js b/src/components/Website-development-service/about-our-team.js index b88cdd5..b904b19 100644 --- a/src/components/Website-development-service/about-our-team.js +++ b/src/components/Website-development-service/about-our-team.js @@ -50,7 +50,7 @@ const AboutOurTeam = () => {
- { e.preventDefault(); diff --git a/src/components/Website-development-service/key-feacture.js b/src/components/Website-development-service/key-feacture.js index cbe2dc9..f6ba571 100644 --- a/src/components/Website-development-service/key-feacture.js +++ b/src/components/Website-development-service/key-feacture.js @@ -1,10 +1,11 @@ -import { useState } from "react"; +import { useState, useEffect, useCallback } from "react"; import ConsenHead from "@/src/ConsenHead"; import ContactPopup from "./ContactPopup"; const KeyFeatures = () => { const [showPopup, setShowPopup] = useState(false); - const [activeIndex, setActiveIndex] = useState(0); + const [currentIndex, setCurrentIndex] = useState(0); + const [visibleCols, setVisibleCols] = useState(2); const features = [ { @@ -41,6 +42,47 @@ const KeyFeatures = () => { }, ]; + // Group features into columns of 2 cards each + const columns = []; + for (let i = 0; i < features.length; i += 2) { + columns.push(features.slice(i, i + 2)); + } + + const totalCols = columns.length; // 4 columns + + // Responsive column count + useEffect(() => { + const handleResize = () => { + if (window.innerWidth <= 576) setVisibleCols(1); + else if (window.innerWidth <= 1200) setVisibleCols(2); + else setVisibleCols(2); + }; + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + const maxIndex = Math.max(0, totalCols - visibleCols); + + const handleNext = useCallback(() => { + setCurrentIndex((prev) => (prev < maxIndex ? prev + 1 : 0)); + }, [maxIndex]); + + const handlePrev = useCallback(() => { + setCurrentIndex((prev) => (prev > 0 ? prev - 1 : maxIndex)); + }, [maxIndex]); + + // Auto-slide every 5s + useEffect(() => { + const timer = setInterval(handleNext, 5000); + return () => clearInterval(timer); + }, [handleNext]); + + // Clamp index on resize + useEffect(() => { + if (currentIndex > maxIndex) setCurrentIndex(maxIndex); + }, [maxIndex, currentIndex]); + return ( <> { description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth." /> -
-
-
-
-
-

- Why Our Websites Stand Out -

-
-
-
- + {/* ===== Key Features Slider Section ===== */} +
+
+ {/* Left – Featured Image */} +
+
+ Key features of Metatroncube websites
- {/* Tabs */} -
-
-
-
-
    - {features.map((feature, index) => ( -
  • setActiveIndex(index)} - > - {feature.text} -
    • + {/* Right – Slider */} +
    +
    + Key Features +

    + Why Our Websites Stand Out +

    +
    + +
    +
    + {columns.map((column, colIdx) => ( +
    + {column.map((feature, idx) => ( +
    +
    + {feature.text} +
    +

    {feature.text}

    +
    ))} -
-
+ {column.length < 2 && ( +
+ )} +
+ ))}
+ + {/* Dots */} +
+ {Array.from({ length: maxIndex + 1 }).map((_, idx) => ( +
setCurrentIndex(idx)} + /> + ))} +
+ + {/* Prev / Next controls + Book Demo */} +
- {/* Active Card */} -
-
-
-
- {features[activeIndex].text} -

- {features[activeIndex].text} -

-
-
-
-
-
+
setShowPopup(false)} /> - - ); }; diff --git a/src/components/Website-development-service/our-development.js b/src/components/Website-development-service/our-development.js index 7574cd5..a6f1972 100644 --- a/src/components/Website-development-service/our-development.js +++ b/src/components/Website-development-service/our-development.js @@ -1,8 +1,11 @@ "use client"; import { Swiper, SwiperSlide } from "swiper/react"; -import { Autoplay } from "swiper"; +import { Autoplay, EffectCoverflow } from "swiper"; import "swiper/css"; +import "swiper/css/effect-coverflow"; +import "swiper/css/pagination"; +import "swiper/css/navigation"; import { useState } from "react"; import ContactPopup from "./ContactPopup"; import Link from "next/link"; @@ -16,6 +19,7 @@ const caseStudies = [ { id: 5, img: "/assets/images/Website-development-service/support.webp", category: " Support & Growth", title: " Continuous updates & maintenance", link: "/portfolio-details" }, ]; + export default function OurDevelopment() { const [showPopup, setShowPopup] = useState(false); @@ -26,63 +30,49 @@ export default function OurDevelopment() { description="Explore case studies showcasing how Metatroncube Software Solutions delivers innovative, user-centric digital products that drive growth." /> -
-
-
-
-
+
+
+
+
+

A Step-by-Step Process for Website Success

-
-
+
- {caseStudies.concat(caseStudies).map((item, idx) => ( - -
-
+ {caseStudies.map((item, idx) => ( + +
+
{item.title} -
-
-
{item.category}
-

{item.title}

-
-
- -
+
+ + {/* Bottom Blur Overlay */} +
+
+

{item.category}

+

{item.title}

@@ -90,10 +80,18 @@ export default function OurDevelopment() { ))}
+ +
setShowPopup(false)} /> ); -} \ No newline at end of file +} diff --git a/src/components/Website-development-service/testimonial.js b/src/components/Website-development-service/testimonial.js index 2651855..9834d8c 100644 --- a/src/components/Website-development-service/testimonial.js +++ b/src/components/Website-development-service/testimonial.js @@ -1,102 +1,172 @@ -// import {testimonial_list_slider} from "@/src/sliderProps"; +"use client"; import { Autoplay } from "swiper"; -import { Swiper, SwiperSlide } from "swiper/react" - +import { Swiper, SwiperSlide } from "swiper/react"; +import { useEffect, useState } from "react"; +import "swiper/css"; +import GoogleReviewsBranding from "../GoogleReviewsBranding"; +import Link from "next/link"; const testimonial_list_slider = { spaceBetween: 30, slidesPerView: 1, navigation: false, - pagination: { clickable: false }, + pagination: false, loop: true, autoplay: { delay: 3000, disableOnInteraction: false, }, + modules: [Autoplay], }; -const testimonials = [ - { - id: 1, - text: " Our new website completely transformed the way customers find and connect with us. The design is modern, fast, and user-friendly. Within just two months of launch, our inquiries more than doubled, giving us more qualified leads and helping our business grow faster than we expected. ", - author: "Startup Owner", - role: "Happy Customer", - }, - { - id: 2, - text: "Launching our online store with their team was the best decision we made. The site is beautifully designed, easy to manage, and customers love the seamless shopping experience. After going live, our sales jumped significantly, and we gained more repeat buyers than ever before.", - author: "E-commerce Brand Sales", - role: "Happy Customer", - }, - { - id: 3, - text: "The team was professional, responsive, and consistently went above and beyond to deliver what we needed. Every detail was handled with care, and they completed the project ahead of schedule. The final outcome was polished, effective, and helped us showcase our brand with confidence.", - author: "Corporate Client", - role: "Happy Customer", - } -]; - const TestimonialSection = () => { + const [reviews, setReviews] = useState([]); + const [loading, setLoading] = useState(true); + const [isClient, setIsClient] = useState(false); + + useEffect(() => { + setIsClient(true); + async function loadReviews() { + try { + const res = await fetch("/api/reviews"); + const data = await res.json(); + const cleaned = (data.reviews || []).filter(r => + (r.text || r.description || r.snippet || r.review_text || r.body || r.content) && + r.rating >= 4 + ); + setReviews(cleaned); + } catch (error) { + console.error("Failed to fetch reviews", error); + } finally { + setLoading(false); + } + } + loadReviews(); + }, []); + + const displayedReviews = reviews.length > 0 && reviews.length < 3 + ? [...reviews, ...reviews, ...reviews] + : reviews; + + function renderStars(rating) { + return [...Array(5)].map((_, i) => ( + + )); + } + + function getReviewText(r) { + return r.text || r.description || r.snippet || r.review_text || r.body || r.content || ""; + } + + function getProfileImage(r) { + const url = r.profile_photo_url || r.author_profile_photo_url || r.user?.thumbnail || r.user?.profile_photo_url || r.thumbnail || r.profile_picture || r.avatar; + if (!url) return null; + if (url.startsWith("http")) return url; + return `https://lh3.googleusercontent.com/${url}`; + } + + function getInitials(name) { + if (!name) return "U"; + return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase(); + } + return (
-
+
- {/*
OUR TESTIMONIALS
*/}

Hear from Businesses

{" "} We’ve Helped Grow

+
-
-
- -
-
- - - - - -
- - {testimonials.map((item, id) => ( - -
-
-

{item.text}

-
-
-

{item.author}

- {item.role} -
-
- - ))} - + {loading ? ( +
+

Loading reviews...

+
+ ) : isClient && ( + + {displayedReviews.map((r, index) => { + const fullText = getReviewText(r); + const profileImg = getProfileImage(r); + const name = r.user?.name || r.author_name || "Customer"; + return ( + +
+
+
+ {profileImg ? ( + {name} (e.target.style.display = 'none')} + style={{ width: '100%', height: '100%', objectFit: 'cover' }} + /> + ) : ( + {getInitials(name)} + )} +
+
+

+ {name} +

+
+ {renderStars(r.rating)} +
+
+
+
+
+

{fullText}

+
+
+
+ + ); + })} + + )} + +
-
Metatroncube FAQs: web-apps, SEO, & digital marketing
-
); - }; -export default TestimonialSection; \ No newline at end of file +export default TestimonialSection; diff --git a/src/components/Website-development-service/we-serve.js b/src/components/Website-development-service/we-serve.js index 53270ff..81c55e8 100644 --- a/src/components/Website-development-service/we-serve.js +++ b/src/components/Website-development-service/we-serve.js @@ -12,87 +12,86 @@ const WeServe = () => { <> -
+
+ {/* Background Image Overlay */} +
+
-
-
-
-

- Websites for Every Business Type -

+
+ {/* Left Side: Central Heading Circle */} + +
+
+
+
+
+ +

Websites for Every
Business Type

+
+
+
+
+
-
- A diverse team engaged in a strategic discussion. + {/* Right Side: Industry Items Arc */} +
+
+
+ {[ + { + num: "01", + img: "/assets/images/Website-development-service/corporates.webp", + text: "Enterprises & Corporates", + }, + { + num: "02", + img: "/assets/images/Website-development-service/retail.webp", + text: "Retail & E-commerce", + }, + { + num: "03", + img: "/assets/images/Website-development-service/healthcare.webp", + text: "Healthcare & Clinics", + }, + { + num: "04", + img: "/assets/images/Website-development-service/education.webp", + text: "Education & Training", + }, + { + num: "05", + img: "/assets/images/Website-development-service/travel.webp", + text: "Hospitality & Travel", + } + ].map((industry, index) => ( +
+
+
+
+ {industry.text} +
+
+
{industry.num}
+

{industry.text}

+
+
+ ))} +
- {/* Features Grid */} -
- {[ - { - img: "/assets/images/Website-development-service/corporates.webp", - text: " Corporates & Enterprises", - }, - { - img: "/assets/images/Website-development-service/retail.webp", - text: "Retail & E-commerce", - }, - { - img: "/assets/images/Website-development-service/healthcare.webp", - text: "Healthcare & Clinics", - }, - { - img: "/assets/images/Website-development-service/education.webp", - text: " Education & Training ", - }, - { - img: "/assets/images/Website-development-service/travel.webp", - text: "Hospitality & Travel", - }, - { - img: "/assets/images/Website-development-service/startups.webp", - text: "Startups & Entrepreneurs", - }, - { - img: "/assets/images/Website-development-service/media.webp", - text: "Media & Entertainment", - } - ].map((feature, index) => ( -
-
-
- {feature.text} -

{feature.text}

-
-
-
- ))} + -
setShowPopup(false)} /> diff --git a/src/components/Website-development-service/why-choose-us.js b/src/components/Website-development-service/why-choose-us.js index 6bbfa34..6dd0bef 100644 --- a/src/components/Website-development-service/why-choose-us.js +++ b/src/components/Website-development-service/why-choose-us.js @@ -14,85 +14,74 @@ const Whychooseus = () => { description="Metatroncube Software Solutions: Pioneering custom web & mobile apps since 2019. Based in Waterloo, we deliver innovative, user-centric digital products that power your growth." /> -
+
+
DEVELOP
-
-
- About Metatroncube Canada + {/* Left Column: Staggered Cards */} +
+
- {/*
- Decorative Shape 1 -
*/} + {/* Card 1: Custom Design (Column 1 - Shifted Up) */} +
+
+ Custom Design +
+
Custom Design
+

Tailored to your brand identity.

+
+ + {/* Card 2: Fast & Responsive (Column 2 - Shifted Down) */} +
+
+ Fast & Responsive +
+
Fast & Responsive
+

Websites that work on every device.

+
+ + {/* Card 3: E-commerce Ready (Column 1 - Shifted Up) */} +
+
+ E-commerce Ready +
+
E-commerce Ready
+

Online stores that boost sales.

+
+ + {/* Card 4: Secure & Scalable (Column 2 - Shifted Down) */} +
+
+ Secure & Scalable +
+
Secure & Scalable
+

Built to last and grow with you.

+
- {/*
- Decorative Shape 2 -
*/}
-
-
-
-

Why Partner With Our Web Development Team?

-
-
+ {/* Right Column: Text Content */} +
+
+

Why Partner With Our Web Development Team?

+

+ At Metatron Cube Solutions, we deliver innovative, custom-designed websites that reflect your brand identity and perform seamlessly across all devices. +

-
-
-
- Innovative technology strategy by Metatron Cube Solutions. -
-
Custom Design
-

Tailored to your brand identity.

-
-
-
- -
-
- Teamwork at Metatron Cube Solutions. -
-
Fast & Responsive
-

Websites that work on every device.

-
-
-
- -
-
- Future-ready innovation strategies by Metatron Cube Solutions. -
-
E-commerce Ready
-

Online stores that boost sales.

-
-
-
- -
-
- Future-ready digital innovation by Metatron Cube Solutions. -
-
Secure & Scalable
-

Built to last and grow with you.

-
-
-
- -
- diff --git a/styles/globals.css b/styles/globals.css index 1377a03..c3847d9 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -461,12 +461,12 @@ li.monthdate.current_date { .bottom-info-strip { position: relative; + padding: 90px 0px 90px; z-index: 1; top: -100px; background: #1a1f2b; border-radius: 12px; - padding: 25px 40px; - margin-top: 60px; + /* margin-top: 60px; */ flex-wrap: wrap; justify-content: center; align-items: stretch; @@ -569,7 +569,7 @@ li.monthdate.current_date { } @media screen and (max-width: 425px) { - .bottom-info-strip .info-card h4 { + .bottom-info-strip .info-card h4 { font-size: 11px; } } @@ -587,21 +587,2475 @@ li.monthdate.current_date { display: inline-block; font-size: 13px; line-height: 17px; -} + } - .bottom-info-strip .info-card p { - font-size: 11px !important; - } + .bottom-info-strip .info-card p { + font-size: 11px !important; + } - .bottom-info-strip .info-card:nth-child(3), - .bottom-info-strip .info-card:nth-child(4) { + .bottom-info-strip .info-card:nth-child(3), + .bottom-info-strip .info-card:nth-child(4) { border-bottom: none !important; } } @media (max-width: 991px) and (min-width: 769px) { - .info-card.info-none-new { - border-right: none; - } + .info-card.info-none-new { + border-right: none; + } } +/* Redesign for Website Development Service Strip */ +.website-service-strip .bottom-info-strip { + position: relative; + top: 0; + background: #ffffff; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); + z-index: 1; +} + +.website-service-strip .script-font { + font-family: 'Sacramento', cursive; + font-size: 32px; + color: #3779b9; + /* Dark green matching the reference */ + margin-bottom: 0px; + font-weight: 400; +} + +.website-service-strip .title-font { + font-size: 24px; + font-weight: 700; + color: #2c2c2c; + margin-bottom: 15px; +} + +.website-service-strip .desc-font { + font-size: 14px; + color: #777; + line-height: 1.6; + margin-bottom: 15px; +} + +.website-service-strip .subtitle-font { + font-size: 18px; + font-weight: 500; + color: #2c2c2c; + margin-bottom: 10px; +} + +.website-service-strip .phone-number { + font-size: 15px; + font-weight: 700; + color: #3779b9; + /* Matching the call color in refernce */ + margin: 0; +} + +.website-service-strip .call-icon-bg { + width: 50px; + height: 50px; + background: #fff; + display: flex; + align-items: center; + justify-content: center; +} + +.website-service-strip .scooter-mini-icon { + width: 40px; + height: auto; +} + +.website-service-strip .main-delivery-img { + max-width: 100%; + height: auto; + transition: transform 0.5s ease; +} + +.website-service-strip .central-illustration-wrap:hover .main-delivery-img { + transform: translateY(-10px); +} + +.website-service-strip .learn-more-btn { + background: #007944; + /* Dark green matching high-end CTA */ + color: #fff; + padding: 12px 30px; + border-radius: 50px; + font-weight: 600; + font-size: 14px; + display: inline-flex; + align-items: center; + gap: 15px; + text-decoration: none; + transition: all 0.3s ease; +} + +.website-service-strip .learn-more-btn:hover { + background: #005d34; + box-shadow: 0 5px 15px rgba(0, 121, 68, 0.3); +} + +.website-service-strip .arrow-icon { + background: #fff; + color: #007944; + width: 24px; + height: 24px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: bold; +} + +@media (max-width: 991px) { + .website-service-strip .bottom-info-strip { + padding: 30px 20px; + } + + .website-service-strip .script-font { + font-size: 28px; + } + + .website-service-strip .title-font { + font-size: 20px; + } +} + +@media (max-width: 767px) { + .website-service-strip .info-column-right { + text-align: center !important; + } + + .website-service-strip .learn-more-btn-wrap { + display: flex; + justify-content: center; + } + + .website-service-strip .bottom-info-strip { + margin-top: 0; + } +} + +/* Floating Segment Styling */ +.website-service-strip .central-illustration-wrap { + min-height: 450px; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding-bottom: 20px; + overflow: visible; +} + +.about-area.new-style-v2 { + padding: 80px 0 80px; + position: relative; + overflow: hidden; + background-image: url('/assets/images/Website-development-service/banner-bg.webp'); + background-attachment: fixed; + background-position: center; + background-size: cover; +} + +/* White Transparent Overlay for Readability */ +.about-area.new-style-v2::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + /* background: rgba(255, 255, 255, 0.94); */ + z-index: 1; +} + +/* Background Vertical Text */ +.about-area.new-style-v2 .bg-text { + position: absolute; + top: 50%; + left: -8%; + transform: translateY(-50%) rotate(-90deg); + font-size: 20vw; + font-weight: 900; + color: rgba(0, 0, 0, 0.015); + letter-spacing: 2.5rem; + pointer-events: none; + z-index: 1; + text-transform: uppercase; + font-family: 'DM Sans', sans-serif; + white-space: nowrap; +} + +.about-area.new-style-v2 .staggered-card { + width: 270px; + height: 270px; + background: #fff; + border-radius: 45px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04); + padding: 35px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); + cursor: pointer; + position: relative; + border: 1px solid rgba(0, 0, 0, 0.01); + z-index: 2; +} + +.about-area.new-style-v2 .staggered-card:hover { + background: #3779b9 !important; + color: #fff !important; + transform: translateY(-5px) scale(1.02); + box-shadow: 0 30px 70px rgba(55, 121, 185, 0.3); + border-color: transparent; +} + +.about-area.new-style-v2 .staggered-card:hover h5, +.about-area.new-style-v2 .staggered-card:hover p { + color: #fff !important; +} + +.about-area.new-style-v2 .staggered-card:hover .card-icon img { + filter: brightness(0) invert(1); + transform: scale(1.08); +} + +.about-area.new-style-v2 .staggered-card.highlighted { + background: #fff; + /* Reset to white by default as per request */ + color: #111; + border: none; + box-shadow: 0 25px 55px rgba(55, 121, 185, 0.25); +} + +.about-area.new-style-v2 .staggered-card.highlighted h5, +.about-area.new-style-v2 .staggered-card.highlighted p { + color: #fff; +} + +.about-area.new-style-v2 .card-icon { + width: 100px; + height: 100px; + margin-bottom: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.about-area.new-style-v2 .card-icon img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + transition: all 0.4s ease; +} + +.about-area.new-style-v2 .staggered-card:hover .card-icon img { + transform: scale(1.08); +} + +.about-area.new-style-v2 .staggered-card h5 { + font-size: 19px; + font-weight: 600; + margin-bottom: 10px; + color: #111; +} + +.about-area.new-style-v2 .staggered-card p { + font-size: 14px; + color: #777; + line-height: 1.5; + margin-top: 0; +} + +/* Positioning for desktop staggered effect - Interlocking Column Stagger */ +@media (min-width: 992px) { + .about-area.new-style-v2 .staggered-cards-container { + width: 100%; + max-width: 620px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 40px; + padding: 80px 0; + } + + /* Column 1 (Left): Shifted Up */ + .about-area.new-style-v2 .card-col-1 { + transform: translateY(-40px); + } + + /* Column 2 (Right): Shifted Down */ + .about-area.new-style-v2 .card-col-2 { + transform: translateY(40px); + } + + /* Hover overrides to maintain shift */ + .about-area.new-style-v2 .card-col-1:hover { + transform: translateY(-50px) scale(1.02); + } + + .about-area.new-style-v2 .card-col-2:hover { + transform: translateY(30px) scale(1.02); + } +} + +@media (max-width: 1024px) { + .about-area.new-style-v2 { + padding: 60px 0; + } + + .about-area.new-style-v2 .staggered-cards-container { + max-width: 500px; + gap: 30px; + } + + .about-area.new-style-v2 .staggered-card { + width: 240px; + height: 240px; + padding: 25px; + } + + .about-area.new-style-v2 .consen-section-title h2 { + font-size: 36px; + } +} + +@media (max-width: 991px) { + .about-area.new-style-v2 { + padding: 50px 0; + } + + .about-area.new-style-v2 .bg-text { + font-size: 6rem; + left: -50px; + } + + .about-area.new-style-v2 .staggered-cards-container { + gap: 20px; + padding: 30px 0; + max-width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + .about-area.new-style-v2 .staggered-card { + width: calc(50% - 15px); + height: auto; + min-height: 220px; + padding: 25px; + border-radius: 35px; + transform: none !important; + } + + .about-area.new-style-v2 .consen-section-title { + padding-left: 0 !important; + /* text-align: center; */ + margin-top: 40px; + } + + .about-area.new-style-v2 .consen-section-title h2 { + font-size: 32px; + } +} + +@media (max-width: 965px) { + .about-area.new-style-v2 .staggered-card { + width: calc(50% - 15px); + height: auto; + min-height: 200px; + padding: 20px; + border-radius: 30px; + } + + .about-area.new-style-v2 .card-icon { + width: 70px; + height: 70px; + margin-bottom: 15px; + } + + .about-area.new-style-v2 .staggered-card h5 { + font-size: 16px; + } +} + +@media (max-width: 768px) { + .about-area.new-style-v2 { + padding: 40px 0; + } + + .about-area.new-style-v2 .staggered-card { + width: calc(50% - 10px); + max-width: none; + margin: 0; + min-height: 180px; + padding: 15px; + } + + .about-area.new-style-v2 .card-icon { + width: 60px; + height: 60px; + } + + .about-area.new-style-v2 .staggered-card h5 { + font-size: 15px; + } + + .about-area.new-style-v2 .staggered-card p { + font-size: 11px; + line-height: 1.3; + } + + .about-area.new-style-v2 .consen-section-title h2 { + font-size: 28px; + } +} + +@media (max-width: 500px) { + .about-area.new-style-v2 .staggered-cards-container { + padding-left: 15px; + padding-right: 15px; + } + + .about-area.new-style-v2 .staggered-card { + /* width: 100%; */ + max-width: 350px; + margin: 0 auto; + padding: 20px; + } + + .about-area.new-style-v2 .consen-section-title h2 { + font-size: 24px; + } + + .about-area.new-style-v2 .section-desc { + font-size: 14px; + margin-top: 15px; + margin-bottom: 25px; + } +} + +@media (max-width: 475px) { + .about-area.new-style-v2 { + padding: 30px 0; + } + + .about-area.new-style-v2 .consen-section-title h2 { + font-size: 22px; + } +} + +@media (max-width: 425px) { + .about-area.new-style-v2 .consen-section-title h2 { + font-size: 21px; + } + + .about-area.new-style-v2 .staggered-card { + padding: 15px; + } +} + +@media (max-width: 320px) { + .about-area.new-style-v2 .consen-section-title h2 { + font-size: 25px !important; + } + + +.new-button a { + display: inline-block; + padding: 15px 35px; + background: #3779b9; + font-size: 9px !important; + color: #fff; + border-radius: 50px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + transition: all 0.3s ease; + box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3); + text-decoration: none; +} + .about-area.new-style-v2 .staggered-card { + padding: 12px; + } + + .about-area.new-style-v2 .staggered-card h5 { + font-size: 14px; + } + + .about-area.new-style-v2 .card-icon { + width: 50px; + height: 50px; + } +} + + +/* Industry Infographic Section - Tightened 100% Exact Match */ + +.benefit-image-layout { + position: relative; + overflow: hidden; + display: inline-block; +} + +.benefit-image-layout img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.8s ease; +} + +.benefit-image-layout:hover img { + transform: scale(1.05); +} + +.industry-infographic-area { + padding: 90px 0; + /* Exact 80px padding */ + position: relative; + /* Premium Parallax Background */ + background-image: url('/assets/images/Website-development-service/banner-bg.webp'); + background-size: cover; + background-position: center; + background-attachment: fixed; + /* Parallax effect */ + position: relative; + overflow: hidden; +} + +.infographic-bg-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(15, 20, 30, 0.7); + /* Deep dark overlay */ + backdrop-filter: blur(2px); + z-index: 1; +} + +.infographic-main-wrapper { + position: relative; + display: block; + height: 800px; + /* Reduced from 1250px to remove excessive space */ + max-width: 1400px; + margin: 0 auto; + z-index: 5; +} + +/* Left Section: Central Pivot */ +.infographic-left-side { + position: absolute; + left: 30px; + top: 50%; + transform: translateY(-50%); + width: 500px; + display: flex; + justify-content: center; + z-index: 30; +} + +.central-circle-container { + position: relative; + width: 440px; + height: 440px; + display: flex; + align-items: center; + justify-content: center; +} + +.central-circle-outer-ring { + width: 460px; + height: 460px; + border: 2px solid rgba(255, 255, 255, 0.15); + /* Sleek gray outer ring */ + border-radius: 50%; + padding: 36px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 5; +} + +.central-circle { + width: 380px; + height: 380px; + background: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 50px; + box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4); + position: relative; + z-index: 10; + border: 4px solid #f8fafd; +} + +.outer-glow-shade { + position: absolute; + width: 700px; + height: 700px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 55%, transparent 80%); + border-radius: 50%; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; +} + +.central-content i { + font-size: 3.2rem; + color: #3779b9; + margin-bottom: 25px; + display: block; +} + +.central-content h3 { + font-size: 22px; + font-weight: 700; + color: #3779b9; + line-height: 1.3; + margin-bottom: 15px; + text-transform: uppercase; +} + +.title-divider { + width: 140px; + height: 2px; + border-top: 2px dotted #ccc; + /* Exact dotted divider */ + margin: 0 auto 20px; +} + +.central-content p { + font-size: 13px; + color: #666; + max-width: 250px; + margin: 0 auto; + line-height: 1.5; +} + +/* Right Section: Pivot from the center of the left circle */ +.infographic-right-side { + position: absolute; + left: 280px; + /* Increased separation */ + top: 50%; + transform: translateY(-50%); + width: 1000px; + height: 600px; + /* Sync with .infographic-main-wrapper */ + /* Matched reduced wrapper height */ + z-index: 10; +} + +.semi-circle-path { + position: absolute; + left: 0; + top: 50%; + transform: translate(-50%, -50%); + width: 580px; + /* Adjusted size */ + height: 580px; + border: 2px solid rgba(255, 255, 255, 0.1); + border-right: 2px solid #fff; + border-radius: 50%; + z-index: 5; +} + +.industries-arc { + position: relative; + width: 100%; + height: 100%; +} + +.industry-arc-item { + position: absolute; + top: 44%; + left: 0; + width: 100%; + display: flex; + align-items: center; + transform-origin: left center; + z-index: 10; + transition: all 0.5s ease; +} + +.item-junction-dot { + width: 14px; + height: 14px; + background: #fff; + border: 4px solid #3779b9; + border-radius: 50%; + position: absolute; + left: 282px; + /* Centered on the 580px path line (radius 290) */ + z-index: 25; + box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); +} + +.item-connector-arm { + width: 125px; + /* Reaches exactly the center of the 110px icon (Path 290 + 125 = 415. Icon starts at 360 + 55 = 415) */ + height: 2px; + background: #fff; + position: absolute; + left: 290px; + z-index: 10; +} + +.item-icon-wrap { + width: 100px; + /* Reduced to 100px to match arrow height */ + height: 100px; + background: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 20; + /* Top Layer: Icon sits ON TOP of arrow */ + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + border: 4px solid #f8fafd; + margin-left: 360px; + /* IMPORTANT: Defines the Arc Radius */ + transition: all 0.4s ease; +} + +.item-icon-wrap img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.item-content-arrow { + background: rgba(26, 30, 40, 0.98); + height: 100px; + /* Exact match to icon circle */ + display: flex; + align-items: center; + padding: 0 60px 0 80px; + /* Adjusted horizontal padding only */ + margin-left: -50px; + min-width: 440px; + color: #fff; + position: relative; + z-index: 15; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); + clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); +} + +.item-content-arrow h4 { + font-size: 18px; + font-weight: 600; + text-transform: uppercase; + margin: 0; + color: #fff; + letter-spacing: 0.5px; +} + +.item-content-arrow p { + font-size: 13px; + color: #bbb; + margin-top: 8px; + line-height: 1.5; + margin-bottom: 0; +} + +.item-step-tag { + position: absolute; + top: 38px; + /* Exact top edge */ + right: 10%; + /* Precise slope position */ + transform: translate(50%, -50%); + width: 38px; + /* Refined size per reference */ + height: 38px; + background: #1a1e26; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + /* Refined font size */ + font-weight: 600; + border: 3px solid #fff; + color: #fff; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + z-index: 30; +} + +/* Restoring Splay Angles (Total spread @ 35deg - Tighter Arc) */ +.item-1 { + transform: rotate(-35deg); +} + +.item-2 { + transform: rotate(-18deg); +} + +.item-3 { + transform: rotate(0deg); +} + +.item-4 { + transform: rotate(18deg); +} + +.item-5 { + transform: rotate(35deg); +} + +.item-1 .item-icon-wrap, +.item-1 .item-content-arrow { + transform: rotate(35deg); +} + +.item-2 .item-icon-wrap, +.item-2 .item-content-arrow { + transform: rotate(18deg); +} + +.item-3 .item-icon-wrap, +.item-3 .item-content-arrow { + transform: rotate(0deg); +} + +.item-4 .item-icon-wrap, +.item-4 .item-content-arrow { + transform: rotate(-18deg); +} + +.item-5 .item-icon-wrap, +.item-5 .item-content-arrow { + transform: rotate(-35deg); +} + +/* Individual Manual Positioning Controls */ +.item-1 .item-content-arrow { + top: 138px; + left: -29px; +} + +.item-2 .item-content-arrow { + top: 74px; +} + +.item-3 .item-content-arrow { + top: 0px; +} + +.item-4 .item-content-arrow { + top: -70px; +} + +.item-5 .item-content-arrow { + top: -126px; + left: -22px; +} + +/* Responsive Perfection - Ultra Granular Alignment */ + +@media (max-width: 1600px) { + .infographic-right-side { + left: 200px; + width: 900px; + } + + /* Arc 560px -> Radius 280 */ + .semi-circle-path { + width: 560px; + height: 560px; + } + + .item-junction-dot { + left: 273px; + /* 280 - 7 */ + } + + .item-connector-arm { + left: 280px; + /* Keeps 125px length -> Reach 405. Icon Radius 55 -> Margin 350 */ + } + + .item-icon-wrap { + margin-left: 350px; + } +} + +@media (max-width: 1440px) { + .infographic-left-side { + width: 440px; + } + + .infographic-right-side { + left: 150px; + } + + /* Arc 520px -> Radius 260 */ + .semi-circle-path { + width: 520px; + height: 520px; + } + + .item-junction-dot { + left: 253px; + /* 260 - 7 */ + } + + .item-connector-arm { + left: 260px; + } + + .item-icon-wrap { + margin-left: 330px; + /* 260 + 125 = 385. 385 - 55 = 330 */ + } + + .item-content-arrow { + min-width: 320px; + /* Reduced width */ + padding-left: 70px; + } +} + +@media (max-width: 1200px) { + .industry-infographic-area { + padding: 60px 0; + } + + .infographic-main-wrapper { + display: flex; + flex-direction: row; + height: auto; + align-items: center; + gap: 40px; + } + + .infographic-left-side { + position: relative; + left: 0; + top: 0; + transform: none; + width: auto; + display: flex; + justify-content: center; + } + + .central-circle-container { + width: 280px; + height: 280px; + } + + .central-circle-outer-ring { + width: 300px; + height: 300px; + padding: 20px; + } + + .central-circle { + width: 240px; + height: 240px; + padding: 20px; + } + + .central-content i { + font-size: 2.2rem; + margin-bottom: 10px; + } + + .central-content h3 { + font-size: 20px; + } + + .central-content p { + font-size: 11px; + max-width: 160px; + margin: 0 auto; + line-height: 1.4; + } + + .infographic-right-side { + position: relative; + left: 0; + top: 0; + transform: none; + height: auto; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 30px; + padding: 0 20px; + } + + .semi-circle-path, + .item-junction-dot, + .item-connector-arm { + display: none; + } + + .industry-arc-item { + position: relative; + left: 0; + top: 0; + transform: none !important; + width: calc(70% - 20px); + display: flex; + justify-content: center; + margin-bottom: 10px; + } + + .item-icon-wrap, + .item-content-arrow { + transform: none !important; + top: 0 !important; + left: 0 !important; + } + + .item-icon-wrap { + margin-left: 0; + width: 80px; + height: 80px; + min-width: 80px; + } + + .item-content-arrow { + min-width: 200px; + width: 100%; + height: 80px; + padding: 0 15px 0 50px; + margin-left: -40px; + clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%); + } + + .item-content-arrow h4 { + font-size: 14px; + } + + .item-step-tag { + width: 30px; + height: 30px; + font-size: 11px; + } +} + +@media (max-width: 1024px) { + .infographic-right-side { + gap: 20px; + } + + .industry-arc-item { + width: calc(80% - 10px); + } +} + +@media (max-width: 992px) { + .industry-arc-item { + width: calc(80% - 10px); + } +} + +@media (max-width: 768px) { + .industry-arc-item { + width: calc(80% - 10px); + max-width: 450px; + margin-bottom: 15px; + } + + .item-content-arrow h4 { + font-size: 10px; + } + + .central-circle-container { + width: 200px; + height: 200px; + } + + .central-circle-outer-ring { + width: 210px; + height: 210px; + } + + .central-circle { + width: 160px; + height: 160px; + padding: 15px; + } + + .central-content h3 { + font-size: 16px; + } + + .central-content p { + display: none; + } +} + +@media (max-width: 500px) { + .infographic-main-wrapper { + display: flex; + flex-direction: column; + height: auto; + align-items: center; + gap: 40px; + } + + .industries-arc { + position: relative; + width: 100%; + height: 100%; + left: -44px; + } + + .item-content-arrow { + padding-left: 50px; + min-width: 150px; + } +} + +@media (max-width: 465px) { + .industry-infographic-area { + padding: 40px 0; + } +} + +@media (max-width: 425px) { + .item-icon-wrap { + width: 60px; + height: 60px; + min-width: 60px; + } + + .item-content-arrow { + height: 60px; + margin-left: -30px; + padding-left: 40px; + } + + .item-content-arrow h4 { + font-size: 12px; + } + + .item-step-tag { + width: 24px; + height: 24px; + font-size: 10px; + top: 30px; + } +} + +@media (max-width: 320px) { + .item-content-arrow h4 { + font-size: 11px; + } + + + .industries-arc { + position: relative; + width: 100%; + height: 100%; + left: -102px; + } + + .industry-arc-item { + width: calc(100%); + max-width: 450px; + margin-bottom: 15px; + } + +} + +.infographic-footer { + margin-top: 50px; + position: relative; + z-index: 20; +} + +.new-button a { + display: inline-block; + padding: 15px 35px; + background: #3779b9; + font-size: 12px; + color: #fff; + border-radius: 50px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + transition: all 0.3s ease; + box-shadow: 0 10px 25px rgba(55, 121, 185, 0.3); + text-decoration: none; +} + +.new-button a:hover { + background: #2a5d8f; + transform: translateY(-3px); + box-shadow: 0 15px 35px rgba(55, 121, 185, 0.4); +} + +/* Right Content Area Styles */ +.about-area.new-style-v2 .consen-section-title { + position: relative; + z-index: 2; +} + +.about-area.new-style-v2 .consen-section-title h2 { + font-size: 40px; + font-weight: 600; + line-height: 1.15; + color: #fff; + /* Improved contrast for parallax bg */ +} + +.about-area.new-style-v2 .consen-section-title h2 span { + color: #3779b9; +} + +.about-area.new-style-v2 .section-desc { + font-size: 17px; + color: #ddd; + /* Improved contrast for parallax bg */ + line-height: 1.9; + margin-top: 30px; + margin-bottom: 45px; + max-width: 500px; +} + +.website-service-strip .floating-items-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.website-service-strip .floating-item { + position: absolute; + width: 120px; + text-align: center; + animation: floatingLoop 4s ease-in-out infinite; + display: flex; + flex-direction: column; + align-items: center; +} + +.website-service-strip .floating-circle { + width: 65px; + height: 65px; + background: #fff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); + margin-bottom: 8px; + border: 1px solid rgba(0, 0, 0, 0.03); +} + +.website-service-strip .floating-circle img { + width: 35px; + height: 35px; + object-fit: contain; +} + +.website-service-strip .floating-content h6 { + font-size: 13px; + font-weight: 700; + color: #2c2c2c; + margin: 0; + white-space: nowrap; +} + +.website-service-strip .floating-content p { + font-size: 12px; + color: #777; + margin: 0; + white-space: nowrap; +} + +/* Curve Positioning (Desktop) */ +.website-service-strip .item-1 { + left: -20px; + top: 180px; + animation-delay: 0s; +} + +.website-service-strip .item-2 { + left: 15%; + top: 40px; + animation-delay: 1s; +} + +.website-service-strip .item-3 { + right: 15%; + top: 40px; + animation-delay: 2s; +} + +.website-service-strip .item-4 { + right: -20px; + top: 180px; + animation-delay: 3s; +} + +@keyframes floatingLoop { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(-15px); + } + + 100% { + transform: translateY(0); + } +} + +/* Responsive adjustments for 1920 to 320 */ +@media (max-width: 1440px) { + + .item-4 .item-content-arrow { + + top: -62px; + + } + + .item-3 .item-content-arrow { + top: 6px; + } + +} + + +@media (max-width: 1199px) { + .website-service-strip .central-illustration-wrap { + min-height: 400px; + } + + .website-service-strip .item-2 { + left: 10%; + top: 30px; + } + + .website-service-strip .item-3 { + right: 10%; + top: 30px; + } + + .website-service-strip .floating-circle { + width: 55px; + height: 55px; + } +} + +@media (max-width: 991px) { + .website-service-strip .central-illustration-wrap { + min-height: 450px; + margin-top: 40px; + } + + .website-service-strip .item-1 { + left: 0px; + top: 180px; + } + + .website-service-strip .item-2 { + left: 15%; + top: 40px; + } + + .website-service-strip .item-3 { + right: 15%; + top: 40px; + } + + .website-service-strip .item-4 { + right: 0px; + top: 180px; + } +} + +@media (max-width: 768px) { + .website-service-strip .central-illustration-wrap { + min-height: auto; + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 0; + margin: 30px 0; + } + + .website-service-strip .floating-items-container { + position: relative; + width: 100%; + height: auto; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 30px; + margin-bottom: 30px; + pointer-events: auto; + } + + .website-service-strip .floating-item { + position: relative !important; + left: auto !important; + top: auto !important; + right: auto !important; + width: calc(50% - 20px); + margin: 0; + transform: none !important; + animation: floatingLoop 4s ease-in-out infinite !important; + } + + .website-service-strip .floating-circle { + width: 65px; + height: 65px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + } + + .website-service-strip .floating-circle img { + width: 35px; + height: 35px; + } + + .website-service-strip .floating-content h6 { + font-size: 14px; + white-space: normal; + } + + .website-service-strip .floating-content p { + font-size: 12px; + white-space: normal; + } + + .website-service-strip .main-delivery-img { + margin-top: 0; + max-width: 90%; + } +} + +@media (max-width: 500px) { + .website-service-strip .floating-items-container { + gap: 20px; + } + + .website-service-strip .floating-item { + width: calc(50% - 15px); + } + + .website-service-strip .floating-circle { + width: 55px; + height: 55px; + } + + .website-service-strip .floating-circle img { + width: 30px; + height: 30px; + } + + .website-service-strip .floating-content h6 { + font-size: 12px; + } +} + +@media (max-width: 425px) { + .website-service-strip .main-delivery-img { + max-width: 100%; + } + + .website-service-strip .floating-circle { + width: 45px; + height: 45px; + } + + .website-service-strip .floating-content h6 { + font-size: 12px; + } +} + +/* ============================================================== */ +/* 3D Art Gallery Carousel - Absolute 100% Match */ +/* ============================================================== */ + +.gallery-museum-theme { + background: url('/assets/images/Website-development-service/banner-bg.webp'); + background-size: cover; + background-position: center; + background-attachment: scroll; + /* Force static, NO Parallax */ + padding: 90px 0 !important; + /* Strict 80px per request */ + position: relative; + overflow: hidden; + color: #fff; +} + +.gallery-carousel-wrapper { + position: relative; + max-width: 1400px; + margin: 0 auto; + padding: 0; + /* Removed excessive padding */ +} + +.gallery-swiper { + padding-bottom: 30px !important; + /* Pulled button up to remove excessive under space */ + perspective: 1500px; + overflow: visible !important; +} + +.gallery-slide { + width: 600px !important; + height: auto; + transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + filter: brightness(0.4); + /* Removed blur from default state for overall cleaner look */ + transform-style: preserve-3d; +} + +.gallery-slide.swiper-slide-active { + filter: none; + transform: scale(1.1) translateZ(100px); + z-index: 50; +} + +.gallery-card { + background: #252525; + border-radius: 40px; + overflow: hidden; + box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8); + position: relative; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Top Header Controls */ +.card-top-header { + position: absolute; + top: 25px; + left: 0; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 25px; + z-index: 10; +} + +.card-top-header .back-btn, +.card-top-header .more-btn { + width: 45px; + height: 45px; + background: rgba(255, 255, 255, 0.15); + /* backdrop-filter: blur(10px); */ + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 18px; + cursor: pointer; +} + +.card-top-header .expand-pill { + background: rgba(255, 255, 255, 0.15); + /* backdrop-filter: blur(10px); */ + padding: 8px 18px; + border-radius: 20px; + color: #fff; + font-size: 14px; + font-weight: 600; + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; +} + +/* Main Image */ +.card-main-image { + width: 100%; + height: 450px; + overflow: hidden; +} + +.card-main-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s ease; +} + +/* Bottom Blur Overlay */ +.card-bottom-info { + background: #1a1f2b; + padding: 30px 40px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; +} + +.card-bottom-info h3 { + font-size: 22px; + font-weight: 700; + margin-bottom: 6px; + color: #ffffff; + letter-spacing: -0.01em; +} + +.card-bottom-info .date { + font-size: 12px; + color: #fff; + text-transform: uppercase; + letter-spacing: 1px; +} + +.card-bottom-info p { + font-size: 15px; + color: #fff; + line-height: 1.6; + margin: 12px 0; +} + +.card-bottom-info .meta-details { + display: flex; + gap: 20px; + font-size: 12px; + color: #fff; + /* font-weight: 600; */ +} + +/* Bottom Profile Navigator */ +.gallery-bottom-navigator { + position: absolute; + bottom: 0px; + left: 50%; + transform: translateX(-50%); + z-index: 100; + width: 100%; + display: flex; + justify-content: center; +} + +.navigator-pill { + background: rgba(255, 255, 255, 0.1); + /* backdrop-filter: blur(20px); */ + padding: 10px 10px 10px 15px; + border-radius: 50px; + display: flex; + align-items: center; + gap: 15px; + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); +} + +.navigator-pill .nav-arrow { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.3); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + cursor: pointer; + transition: all 0.3s ease; +} + +.navigator-pill .nav-arrow:hover { + background: #fff; + color: #000; +} + +.navigator-pill .profile-section { + display: flex; + align-items: center; + gap: 12px; +} + +.navigator-pill .profile-img { + width: 45px; + height: 45px; + border-radius: 50%; + overflow: hidden; + border: 2px solid #fff; +} + +.navigator-pill .profile-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.navigator-pill .nav-controls { + display: flex; + align-items: center; + gap: 10px; +} + + +@media (max-width: 1600px) { + + .semi-circle-path { + + left: 75px; + + } + + .industry-arc-item { + + left: 88px + } + +} + +@media (max-width: 1440px) { + + .semi-circle-path { + + left: 100px; + + } + + .industry-arc-item { + + left: 100px + } + + .item-5 .item-content-arrow { + + top: -105px; + left: -22px; + } + +} + +/* Responsive Gallery */ +@media (max-width: 1200px) { + .gallery-slide { + width: 500px !important; + } +} + +@media (max-width: 991px) { + .gallery-slide { + width: 450px !important; + } + + .card-main-image { + height: 300px; + } +} + +@media (max-width: 767px) { + .gallery-slide { + width: 85% !important; + } + + .navigator-pill { + gap: 10px; + padding-left: 10px; + } + + .navigator-pill .profile-info { + display: none; + } +} + +/* Antalya Testimonial Image Styles */ +.testimonial-image-container-antalya { + position: relative; + padding: 20px; + display: inline-block; + width: 100%; + max-width: 550px; +} + +.antalya-image-outer-border { + border: 12px solid #c49c5c; + /* Gold Main Border */ + position: relative; + padding: 0; + border-radius: 4px; + /* Slight rounding like a frame */ +} + +.antalya-image-inner-border { + position: relative; + padding: 10px; + /* Space for inner border effect */ +} + +.antalya-image-inner-border::after { + content: ''; + position: absolute; + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + border: 3px solid rgba(196, 156, 92, 0.6); + /* Thinner inner gold line */ + pointer-events: none; + z-index: 5; +} + +.testimonial-img-100 { + width: 100% !important; + height: auto; + display: block; +} + +.benefit-image-layout-new img { + border-radius: 0 !important; + /* Remove blob shape to fill rectangular frame perfect */ +} + +@media (max-width: 991px) { + .testimonial-image-container-antalya { + max-width: 100%; + margin-bottom: 30px; + } +} + +/* ============================================================ + KEY FEATURES SLIDER SECTION (key-feacture.js) + Theme colors: primary #3779b9 | dark bg #1a1f2b + ============================================================ */ + +.kf-section { + padding: 90px 0; + position: relative; + background-color: #1a1f2b; + overflow: hidden; +} + +.kf-parallax-container { + position: absolute; + inset: 0; + z-index: 1; +} + +.kf-parallax-bg { + position: absolute; + inset: 0; + background-image: url('/assets/images/Website-development-service/banner-bg.webp'); + background-size: cover; + background-position: center; + background-attachment: fixed; + opacity: 0.12; + z-index: 1; +} + +.kf-overlay { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(26, 31, 43, 0.97) 0%, rgba(26, 31, 43, 0.82) 100%); + z-index: 2; +} + +.kf-container { + max-width: 1320px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + align-items: center; + gap: 3rem; + position: relative; + z-index: 3; +} + +.kf-slider-column { + + padding: 0px 40px 0px; + flex: 1; + min-width: 0; + overflow: hidden; +} + +.kf-header { + margin-bottom: 24px; +} + +.kf-subtitle { + display: block; + font-size: 15px; + font-weight: 600; + color: #3779b9; + text-transform: uppercase; + letter-spacing: 2px; + margin-bottom: 10px; +} + +.kf-title { + font-size: 36px; + font-weight: 700; + color: #ffffff; + line-height: 1.3; + margin-bottom: 0; +} + +.kf-highlight { + color: #3779b9; +} + +.kf-slider-window { + width: 100%; + overflow: hidden; + padding: 20px 4px; + margin: -20px -4px; +} + +.kf-slider-track { + display: flex; + gap: 1.5rem; + flex-wrap: nowrap; + align-items: stretch; + transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} + +.kf-column-wrapper { + display: flex; + flex-direction: column; + gap: 1.5rem; + flex-grow: 0; + flex-shrink: 0; +} + +.kf-card { + width: 100%; + flex: 1; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 24px 20px; + border-radius: 24px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); */ + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); + transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1); +} + +.kf-card:hover { + border-color: #3779b9; + transform: translateY(-8px) scale(1.02); + background: rgba(55, 121, 185, 0.1); + box-shadow: 0 24px 60px rgba(55, 121, 185, 0.2); +} + +.kf-icon-box { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 14px; + border-radius: 50%; + background: rgba(55, 121, 185, 0.12); + border: 1px solid rgba(55, 121, 185, 0.25); +} + +.kf-card-img { + width: 38px; + height: 38px; + object-fit: contain; +} + +.kf-card-name { + font-size: 17px; + font-weight: 600; + color: #ffffff; + line-height: 1.5; + margin: 0; + min-height: 3.2em; + display: flex; + align-items: center; + justify-content: center; +} + +.kf-card-placeholder { + flex: 1; + visibility: hidden; + pointer-events: none; +} + +.kf-dots { + display: flex; + gap: 10px; + margin-top: 28px; +} + +.kf-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + cursor: pointer; + transition: all 0.4s ease; +} + +.kf-dot-active { + background: #3779b9; + width: 30px; + border-radius: 10px; +} + +.kf-controls-row { + display: flex; + align-items: center; + gap: 1.5rem; + margin-top: 1.5rem; + flex-wrap: wrap; + padding-bottom: 10px; +} + +.kf-controls { + display: flex; + gap: 1rem; +} + +.kf-control-btn { + width: 58px; + height: 58px; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.35s ease; + font-size: 1.3rem; +} + +.kf-control-btn:hover { + background: #3779b9; + border-color: #3779b9; + transform: scale(1.1); + box-shadow: 0 8px 22px rgba(55, 121, 185, 0.35); +} + +.kf-demo-btn { + display: inline-block; + padding: 14px 28px; + background: #3779b9; + color: #fff; + border-radius: 50px; + font-weight: 600; + font-size: 14px; + text-decoration: none; + transition: all 0.35s ease; + white-space: nowrap; +} + +.kf-demo-btn:hover { + background: #2a5f96; + color: #fff; + box-shadow: 0 8px 24px rgba(55, 121, 185, 0.4); + transform: translateY(-2px); +} + +.kf-image-column { + flex: 0 0 clamp(28%, 33%, 38%); + position: relative; +} + +.kf-image-wrapper { + width: 100%; + height: 580px; + overflow: hidden; + border-radius: 160px 0 160px 0; + box-shadow: -24px 24px 70px rgba(0, 0, 0, 0.4); + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(55, 121, 185, 0.08); +} + +.kf-featured-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 2s cubic-bezier(0.2, 1, 0.3, 1); +} + +.kf-image-wrapper:hover .kf-featured-image { + transform: scale(1.12); +} + +@media (max-width: 1200px) { + .kf-container { + flex-direction: column; + align-items: stretch; + } + + .kf-image-column { + width: 100%; + max-width: 600px; + margin: 0 auto; + order: 2; + } + + .kf-slider-column { + order: 1; + } + + .kf-image-wrapper { + height: 420px; + } +} + +@media (max-width: 768px) { + .kf-section { + padding: 50px 0; + } + + .kf-title { + font-size: 26px; + } + + .kf-image-wrapper { + height: 320px; + } + + .kf-controls-row { + flex-direction: column; + align-items: flex-start; + } +} + +@media (max-width: 480px) { + .kf-control-btn { + width: 48px; + height: 48px; + font-size: 1rem; + } + + .kf-image-wrapper { + height: 260px; + border-radius: 70px 0 70px 0; + } + + .kf-title { + font-size: 22px; + } +} + +/* === Key Features: Light / White background variant === */ +.kf-section-light { + background-color: #ffffff !important; +} + +.kf-section-light .kf-parallax-bg, +.kf-section-light .kf-overlay { + display: none; +} + +.kf-section-light .kf-title { + color: #1a1f2b; +} + +.kf-section-light .kf-card { + background: #f5f8fc; + border: 1px solid #e3eaf4; + box-shadow: 0 8px 28px rgba(55, 121, 185, 0.08); +} + +.kf-section-light .kf-card:hover { + background: #eaf1fb; + border-color: #3779b9; + box-shadow: 0 18px 48px rgba(55, 121, 185, 0.18); +} + +.kf-section-light .kf-card-name { + color: #1a1f2b; +} + +.kf-section-light .kf-icon-box { + background: rgba(55, 121, 185, 0.08); + border-color: rgba(55, 121, 185, 0.2); +} + +.kf-section-light .kf-control-btn { + border-color: #3779b9; + background: #3779b9; + color: #fff; +} + +.kf-section-light .kf-control-btn:hover { + background: #3779b9; + border-color: #3779b9; + color: #fff; +} + +.kf-section-light .kf-dot { + background: #c8d8ea; +} + +.kf-section-light .kf-image-wrapper { + border: 2px solid #e3eaf4; + box-shadow: 24px 24px 60px rgba(55, 121, 185, 0.12); +} + +/* === KF Cards: Full blue hover + full responsive 1920px-320px === */ + +/* Full blue fill on card hover (light variant) */ +.kf-section-light .kf-card:hover { + background: #3779b9 !important; + border-color: #3779b9 !important; + box-shadow: 0 20px 50px rgba(55, 121, 185, 0.35) !important; + transform: translateY(-8px) scale(1.02); +} + +.kf-section-light .kf-card:hover .kf-card-name { + color: #ffffff !important; +} + +.kf-section-light .kf-card:hover .kf-icon-box { + background: rgba(255, 255, 255, 0.18) !important; + border-color: rgba(255, 255, 255, 0.35) !important; +} + +/* .kf-section-light .kf-card:hover .kf-card-img { + filter: brightness(0) invert(1); +} */ + +/* ---- Responsive: 1920px ---- */ +@media (min-width: 1920px) { + .kf-container { + max-width: 1600px; + gap: 4rem; + } + + .kf-title { + font-size: 42px; + } + + .kf-image-wrapper { + height: 680px; + } +} + +/* ---- 1440px ---- */ +@media (max-width: 1440px) { + .kf-container { + max-width: 1280px; + gap: 3rem; + } + + .kf-image-wrapper { + height: 580px; + } +} + +/* ---- 1280px ---- */ +@media (max-width: 1280px) { + .kf-container { + gap: 2.5rem; + padding: 0 1.5rem; + } + + .kf-title { + font-size: 32px; + } + + .kf-image-wrapper { + height: 520px; + } +} + +/* ---- 1200px: Stack vertically ---- */ +@media (max-width: 1200px) { + .kf-container { + flex-direction: column; + align-items: stretch; + gap: 2.5rem; + } + + .kf-image-column { + width: 100%; + max-width: 680px; + margin: 0 auto; + order: 1; + } + + .kf-slider-column { + order: 2; + } + + .kf-image-wrapper { + height: 420px; + border-radius: 120px 0 120px 0; + } +} + +/* ---- 1024px ---- */ +@media (max-width: 1024px) { + .kf-container { + padding: 0 1.5rem; + } + + .kf-title { + font-size: 28px; + } + + .kf-card-name { + font-size: 15px; + } +} + +/* ---- 768px: Mobile ---- */ +@media (max-width: 768px) { + .kf-section { + padding: 50px 0; + } + + .kf-container { + padding: 0 1rem; + gap: 2rem; + } + + .kf-title { + font-size: 24px; + line-height: 1.3; + } + + .kf-image-column { + max-width: 100%; + } + + .kf-image-wrapper { + height: 300px; + border-radius: 80px 0 80px 0; + } + + .kf-controls-row { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .kf-card { + padding: 20px 16px; + } + + .kf-card-name { + font-size: 14px; + min-height: 2.8em; + } +} + +/* ---- 576px ---- */ +@media (max-width: 576px) { + .kf-title { + font-size: 22px; + } + + .kf-subtitle { + font-size: 13px; + } + + .kf-image-wrapper { + height: 260px; + } + + .kf-control-btn { + width: 48px; + height: 48px; + font-size: 1rem; + } + + .kf-demo-btn { + padding: 12px 22px; + font-size: 13px; + } +} + +/* ---- 480px ---- */ +@media (max-width: 480px) { + .kf-image-wrapper { + height: 230px; + border-radius: 60px 0 60px 0; + } + + .kf-card { + padding: 18px 14px; + border-radius: 18px; + } + + .kf-icon-box { + width: 54px; + height: 54px; + } + + .kf-card-img { + width: 30px; + height: 30px; + } +} + +/* ---- 375px ---- */ +@media (max-width: 375px) { + .kf-section { + padding: 40px 0; + } + + .kf-container { + padding: 0 0.85rem; + } + + .kf-title { + font-size: 20px; + } + + .kf-image-wrapper { + height: 200px; + } + + .kf-demo-btn { + font-size: 12px; + padding: 11px 18px; + width: 100%; + text-align: center; + } +} + +/* ---- 320px ---- */ +@media (max-width: 320px) { + .kf-title { + font-size: 18px; + } + + .kf-image-wrapper { + height: 180px; + border-radius: 50px 0 50px 0; + } + + .kf-card-name { + font-size: 13px; + } + + .kf-control-btn { + width: 42px; + height: 42px; + font-size: 0.9rem; + } +} \ No newline at end of file