/* --- Google Fonts & Reset --- */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }

 /* body {
            background-color: #1e3c72;
            min-height: 200vh;
        } */

 /* --- Fixed Navbar Styling --- */
 .header-navbar {
     /* border: 2px solid red; */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: #1a233d;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     z-index: 1000;
 }

 .nav-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 4px 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
 }

 .brand-logo {
     display: flex;
     align-items: center;
     padding: 0 !important;
 }

 .logo-img {
     height: 50px;
     width: auto;
     object-fit: contain;
     border-radius: 50%;
     transition: transform 0.3s ease;
 }

 .logo-img:hover {
     transform: scale(1.05);
 }

 /* --- Navigation Links --- */
 .nav-menu-wrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-grow: 1;
     margin-left: 30px;
 }

 .nav-links {
     margin: 8px 10px 0px 0px;
     list-style: none;
     display: flex;
     align-items: center;
     gap: 18px;
 }

 .nav-item {
     position: relative;
     padding: 10px 0;
     /* Extra hover area so dropdown doesn't close easily */
 }

 .nav-link {
     text-decoration: none;
     color: #d8e2fd;
     font-size: 14px;
     font-weight: 500;
     padding: 6px 0;
     transition: color 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }

 .nav-link:hover,
 .nav-link.active {
     color: #ff6b35 !important;

 }

 .arrow-icon {
     font-size: 10px;
     transition: transform 0.3s ease;
 }

 .has-dropdown:hover .arrow-icon {
     transform: rotate(180deg);
 }

 /* --- Contact Info Top Right --- */
 .nav-contact-info {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 2px;
 }

 .contact-item {
     color: #d8e2fd;
     text-decoration: none;
     font-size: 12px;
     opacity: 0.9;
     transition: color 0.3s;
 }

 .contact-item:hover {
     color: #ff6b35;
 }

 /* --- Submenu Hover Fix (Invisible Hover Bridge) --- */
 .mega-submenu {
     position: absolute;
     top: 100%;
     left: 0;
     background-color: #ffffff;
     border-radius: 8px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
     padding: 24px;
     visibility: hidden;
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
     z-index: 1100;
     pointer-events: none;
 }

 /* Bridge element jo menu aur dropdown ke beech ka gap fill karta hai */
 .has-dropdown::after {
     content: '';
     position: absolute;
     bottom: -15px;
     left: 0;
     width: 100%;
     height: 20px;
     display: block;
 }

 .has-dropdown:hover .mega-submenu {
     visibility: visible;
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 /* White Triangle Pointer Top */
 .mega-submenu-arrow {
     position: absolute;
     top: -8px;
     left: 20px;
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-bottom: 8px solid #ffffff;
 }

 .mega-grid {
     display: grid;
     grid-template-columns: 280px 300px;
     gap: 30px;
 }

 .simple-dropdown {
     width: 240px;
 }

 .column-title {
     font-size: 12px;
     font-weight: 700;
     color: #6b7280;
     letter-spacing: 0.5px;
     margin-bottom: 16px;
     text-transform: uppercase;
 }

 .submenu-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding-left: 0;
 }

 .submenu-list .nav-link {
     color: #4b5563;
     font-size: 13px;
     font-weight: 500;
     padding: 2px 0;
     /* justify-content: space-between; */
     width: 100%;
 }

 .submenu-list .nav-link:hover,
 .submenu-list .nav-link.active {
     color: #ff6b35 !important;
 }

 /* --- Custom Badges --- */
 .nav-badge {
     font-size: 10px;
     font-weight: 600;
     padding: 2px 7px;
     border-radius: 3px;
     color: #ffffff;
     display: inline-block;
     margin-left: 6px;
 }

 .nav-badge-green {
     background-color: #10b981;
 }

 .nav-badge-green-light {
     background-color: #16a34a;
 }

 .nav-badge-cyan {
     background-color: #06b6d4;
 }

 .nav-badge-blue {
     background-color: #2563eb;
 }

 .nav-badge-blue-bright {
     background-color: #0284c7;
 }

 .nav-badge-black {
     background-color: #111827;
 }

 .nav-badge-red {
     background-color: #ef4444;
 }

 .nav-badge-purple {
     background-color: #a855f7;
 }

 .nav-badge-purple-dark {
     background-color: #8b5cf6;
 }

 .nav-badge-teal {
     background-color: #14b8a6;
 }

 /* Mobile Hamburger Toggle Button */
 .mobile-toggle {
     display: none;
     background: none;
     border: none;
     color: #ffffff;
     font-size: 22px;
     cursor: pointer;
 }

 @media (min-width: 993px) and (max-width: 1222px) {
     .nav-container {
         flex-wrap: wrap;
         /* Elements ko next line me aane ki permission deta hai */
         padding: 10px 16px;
     }

     /* Logo & Main Nav Menu Area ko Top Line pe Rakhein */
     .brand-logo {
         flex-shrink: 0;
     }

     .nav-menu-wrapper {
         margin-left: 15px;
         flex-direction: column;
         /* Menu upar aur contact info niche lane ke liye */
         align-items: flex-end;
         gap: 8px;
     }

     /* Links ek line me clean dikhein aur wrap na hon */
     .nav-links {
         gap: 12px;
         /* Gap kam karke tight & clean spacing */
         flex-wrap: nowrap;
     }

     .nav-link {
         font-size: 13px;
         /* Text size thoda adjust */
         white-space: nowrap;
         /* Text ko 2 lines me tootne se rokega */
     }

     /* Top Right Contact Info ko Clean Bottom Right Row me Shift karna */
     .nav-contact-info {
         flex-direction: row;
         /* Phone aur Email ek line me aayein */
         align-items: center;
         gap: 15px;
         padding-top: 4px;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         /* Subtle top separator line */
         width: 100%;
         justify-content: flex-end;
     }

     .contact-item {
         font-size: 11px;
     }
 }

 /* Laptops & Tablets (Below 1100px) */
 @media (max-width: 1100px) {
     .nav-links {
         gap: 12px;
     }

     .nav-link {
         font-size: 13px;
     }
 }



 /* Mobile & Small Tablets (Below 992px) */
 @media (max-width: 992px) {
     .mobile-toggle {
         display: block;
     }

     .nav-menu-wrapper {
         position: fixed;
         top: 60px;
         left: -100%;
         width: 300px;
         height: calc(100vh - 60px);
         background-color: #1a233d;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
         padding: 20px;
         overflow-y: auto;
         transition: left 0.3s ease;
         box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
         margin-left: 0;
     }

     .nav-menu-wrapper.open {
         left: 0;
     }

     .nav-links {
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
         gap: 10px;
     }

     .nav-item {
         width: 100%;
         padding: 0;
     }

     .nav-link {
         width: 100%;
         padding: 10px 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         justify-content: space-between;
     }

     .has-dropdown::after {
         display: none;
     }

     .mega-submenu {
         position: static;
         visibility: visible;
         opacity: 1;
         transform: none;
         box-shadow: none;
         background-color: #242f4d;
         display: none;
         padding: 15px;
         margin-top: 5px;
         width: 100%;
     }

     .mega-submenu-arrow {
         display: none;
     }

     .has-dropdown.active-mobile .mega-submenu {
         display: block;
     }

     .mega-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .column-title {
         color: #9ca3af;
     }

     .submenu-list .nav-link {
         color: #e5e7eb;
     }

     .nav-contact-info {
         margin-top: 25px;
         align-items: flex-start;
         width: 100%;
         padding-top: 15px;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
     }
 }

 /* ==================hero section========================== */
 /* --- Hero Section Base Styles --- */
 .hero-section {
     background-image: url('/frontend/assets/image/hero_wave-bg.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     min-height: 100vh;
     padding: 60px 0 60px 0;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 .content-box {
     margin-top: 20px;
 }

 .subtitle {
     font-size: 1.2rem;
     letter-spacing: 1px;
     opacity: 0.9;
     margin-bottom: 8px;
 }

 .hero-main-title {
     font-size: 3.2rem;
     font-weight: 700;
     line-height: 1.2;
     margin: 10px 0 15px 0;
 }

 .description {
     font-size: 1.1rem;
     margin-bottom: 25px;
     opacity: 0.95;
 }

 /* Hero Buttons */
 .hero-buttons {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .btn-whatsapp {
     background-color: #8b5cf6;
     color: white;
     border: none;
     padding: 12px 28px;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.2s ease, background-color 0.2s ease;
 }

 .btn-whatsapp:hover {
     background-color: #7c3aed;
     transform: translateY(-2px);
 }

 .btn-contact {
     background-color: #f97316;
     color: white;
     border: none;
     padding: 12px 28px;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.2s ease, background-color 0.2s ease;
 }

 .btn-contact:hover {
     background-color: #ea580c;
     transform: translateY(-2px);
 }

 /* Hero Graphic Image */
 .hero-graphic {
     max-width: 100%;
     height: auto;
     max-height: 520px;
     object-fit: contain;
     display: block;
     margin: 0 auto;
 }

 /* Typing Effect */
 #typing-effect {
     color: #ff6b35;
     /* Primary accent theme color */
     font-weight: 700;
     border-right: 3px solid #ff6b35;
     padding-right: 5px;
     animation: blink 0.7s infinite;
 }

 @keyframes blink {
     50% {
         border-color: transparent;
     }
 }

 /* --- Responsive Media Queries --- */

 /* 1. Tablet View (768px to 992px) */
 @media (max-width: 992px) {
     .hero-section {
         padding: 100px 0 50px 0;
         min-height: auto;
     }

     .hero-main-title {
         font-size: 2.4rem;
     }

     .subtitle {
         font-size: 1rem;
     }

     .description {
         font-size: 1rem;
     }

     .hero-graphic,
     .col-lg-6.py-0 {
         display: none !important;
     }
 }

 @media (max-width: 767px) {

     .hero-section {
         background-image: url('/image/hero_wave-bg.png');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         width: 100%;
         min-height: 100vh;
         padding: 120px 0 60px 0;
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
     }


     .hero-section {
         padding: 90px 20px 40px 20px;
         min-height: auto;
     }

     .content-box {
         margin-top: 10px;
         text-align: center;
     }

     .subtitle {
         font-size: 0.95rem;
     }

     .hero-main-title {
         font-size: 1.8rem;
         line-height: 1.3;
     }

     .description {
         font-size: 0.95rem;
         margin-bottom: 25px;
     }

     /* --- Buttons Fix for Mobile --- */
     .hero-buttons {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 12px;
         /* Smooth gap between buttons */
         width: 100%;
         border: none !important;
         /* Red border remove */
     }

     .btn-whatsapp,
     .btn-contact {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         height: 44px;
         /* Exact Same Height */
         padding: 0 20px;
         /* Equal horizontal padding */
         font-size: 12px;
         font-weight: 700;
         letter-spacing: 0.5px;
         white-space: nowrap;
         /* Text 2 lines me nahi tootega */
         border-radius: 25px;
         /* Clean pill rounded style */
         border: none;
         cursor: pointer;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         margin: 0 !important;
     }

     /* Colors */
     .btn-whatsapp {
         background: linear-gradient(135deg, #8b5cf6, #7c3aed);
         color: #ffffff;
     }

     .btn-contact {
         background: linear-gradient(135deg, #f97316, #ea580c);
         color: #ffffff;
     }

     /* Hide Image on Mobile */
     .hero-graphic,
     .col-lg-6.py-0 {
         display: none !important;
     }
 }

 /* =================counter section=============== */
 .counter-section {
     background: #ffffff;
     padding: 3rem 0;
     /* Thoda padding adjust kiya */
 }

 .counter {
     color: #6366f1;
     font-size: 2.2rem;
     /* Mobile ke liye thoda chota size */
     font-weight: 800;
     margin-bottom: 0.2rem;
 }

 @media (min-width: 992px) {
     .counter {
         font-size: 3rem;
         /* Desktop par bada font */
     }
 }

 .counter-section p {
     color: #1e293b;
     margin-bottom: 0.2rem;
     font-size: 0.95rem;
 }

 .text-muted {
     font-weight: 700;
     font-size: 0.75rem;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #94a3b8 !important;
 }

 /* Card ke beech mein gap aur border ke liye */
 .counter-item {
     padding: 10px;
 }

 /* =======================service section============ */

 .service-modern {
     padding: 5px 0;
     background: #fff;
 }

 .service-modern h2 {
     font-size: 32px;
     font-weight: 800;
     color: #1f1f1f;
     margin-bottom: 10px;
 }

 .service-modern h3 {
     font-size: 20px;
     color: #666;
     margin-bottom: 40px;
 }

 /* CARD */
 .modern-card {
     background: #fff;
     border-radius: 25px;
     padding: 35px 25px;
     text-align: center;
     position: relative;
     transition: .35s;
     height: 100%;
 }

 .modern-card:hover {
     transform: translateY(-10px);
 }

 /* TOP COLOR LINE */
 .card-top-bar {
     width: 120px;
     height: 4px;
     background: linear-gradient(90deg, #6b4eff, #ff7a18);
     border-radius: 50px;
     margin: 0 auto 20px;
 }

 /* ICON */
 .card-icon {
     width: 200px;
     height: 200px;
     margin: 0 auto 20px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .card-icon img {
     max-width: 100%;
     max-height: 100%;
 }

 /* TITLE */
 .modern-card h4 {
     font-size: 22px;
     font-weight: 700;
     color: #1f2a5a;
     margin-bottom: 10px;
 }

 /* TEXT */
 .modern-card p {
     font-size: 18px;
     color: #666;
     line-height: 1.6;
     text-align: justify;
 }

 /* RESPONSIVE */
 @media(max-width:768px) {
     .service-modern h2 {
         font-size: 24px;
     }

     .service-modern h3 {
         font-size: 16px;
     }

     .modern-card {
         padding: 25px 20px;
     }
 }


 /* ====================services help======================== */
 .light-services-section {
     background-color: #e4e7eb;
     background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
     background-size: 24px 24px;
     position: relative;
     overflow: hidden;
 }

 .badge-tag {
     background: #ffffff;
     color: #2b4594;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1.5px;
     padding: 7px 16px;
     border-radius: 30px;
     display: inline-block;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     border: 1px solid #e2e8f0;
 }

 .section-heading {
     color: #1e293b;
     font-size: 34px;
     max-width: 600px;
     margin: 0 auto;
 }

 /* --- Service Card (Light & Attractive) --- */
 .light-service-card {
     background: #ffffff;
     border: 1px solid #edf2f7;
     border-radius: 18px;
     padding: 22px;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
     position: relative;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
 }

 .light-service-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 15px 35px rgba(43, 69, 148, 0.1);
     border-color: #2b4594;
 }

 /* Featured Card Style */
 .featured-light {
     border-top: 3px solid #f97316;
     background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
 }

 /* Icon Box Styles */
 .card-icon-box {
     width: 46px;
     height: 46px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-bottom: 16px;
     transition: transform 0.3s ease;
 }

 .light-service-card:hover .card-icon-box {
     transform: scale(1.1) rotate(5deg);
 }

 .icon-orange {
     background: #fff7ed;
     color: #f97316;
 }

 .icon-blue {
     background: #eff6ff;
     color: #2563eb;
 }

 .icon-purple {
     background: #faf5ff;
     color: #a855f7;
 }

 .icon-teal {
     background: #f0fdfa;
     color: #14b8a6;
 }

 .icon-green {
     background: #f0fdf4;
     color: #16a34a;
 }

 /* Card Typography */
 .service-title {
     color: #1e293b;
     font-size: 17px;
     font-weight: 700;
     margin-bottom: 0;
 }

 .service-text {
     color: #64748b;
     font-size: 13px;
     line-height: 1.6;
     margin-bottom: 0;
 }

 .card-num {
     font-size: 12px;
     font-weight: 800;
     color: #cbd5e1;
 }

 .card-badge {
     font-size: 10px;
     font-weight: 700;
     padding: 3px 9px;
     border-radius: 6px;
     background: rgba(249, 115, 22, 0.12);
     color: #ea580c;
 }

 .badge-green {
     background: rgba(22, 163, 74, 0.12);
     color: #15803d;
 }

 /* --- Illustration Container --- */
 .illustration-card-bg {
     position: relative;
     padding: 20px;
     display: inline-block;
 }

 .service-img {
     max-width: 100%;
     height: auto;
     /* transform: scaleX(-1); */
     filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.08));
     border-radius:5px ;
 }

 /* --- Responsive Layout Breakpoints --- */

 /* Tablet View (768px to 992px) */
 @media (max-width: 992px) {
     .section-heading {
         font-size: 26px;
     }

     .illustration-card-bg {
         margin-bottom: 30px;
         display: flex;
         justify-content: center;
         width: 100%;
     }

     .service-img {
         max-width: 360px;
         margin: 0 auto;
     }

     .light-service-card {
         padding: 18px;
     }
 }

 /* Mobile View (Below 767px) */
 @media (max-width: 767px) {
     .light-services-section {
         padding-top: 40px;
         padding-bottom: 50px;
     }

     .section-heading {
         font-size: 22px;
     }

     .illustration-card-bg {
         margin-bottom: 25px;
     }

     .service-img {
         max-width: 270px;
         margin: 0 auto;
         display: block;
     }

     .light-service-card {
         padding: 18px;
     }

     .service-title {
         font-size: 16px;
     }

     .service-text {
         font-size: 12.5px;
     }
 }

 /* ====================Branding section ======================== */
 .branding-section {
     background: #ffffff;
     padding: 30px 0;
     position: relative;
 }

 .shadow-box {
     padding: 50px;
     box-shadow: 0px 0px 10px gray;
     border-radius: 15px;
     /* background-color: #E4E2FD; */
 }

 .content-col h6 {
     color: #2b4594;
     font-weight: 800;
     font-size: 14px;
     margin-bottom: 20px;
 }

 .content-col h2 {
     color: #1a1a1a;
     font-weight: 800;
     font-size: 32px;
     margin-bottom: 30px;
 }

 .content-col h2 span {
     color: #2B4594;
 }

 .content-col p {
     color: #666;
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .index-feature-card {
     background: #ffffff;
     border: 1px solid #f0f0f0;
     border-radius: 15px;
     padding: 10px 12px;
     margin-bottom: 20px;
     transition: 0.3s;
     height: 100%;

 }

 .feature-card:hover {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 .feature-card i {
     font-size: 2rem;
     /* Icon ka size */
     margin-bottom: 15px;
     display: block;
 }

 .feature-card span {
     font-weight: 700;
     color: #1a1a1a;
     font-size: 14px;
 }

 .btn-contact {
     display: inline-block;
     background: linear-gradient(90deg, #2b4594, #ff8c00);
     color: white;
     margin-top: 25px;
     padding: 15px 30px;
     border-radius: 50px;
     font-weight: 700;
     text-decoration: none;
     transition: 0.3s;
 }

 .btn-contact:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }


 @media(max-width:768px) {
     .content-col h2 {
         color: #1a1a1a;
         font-weight: 800;
         font-size: 32px;
         margin-bottom: 30px;
     }

     .image-col {
         margin-top: 20px;
     }
 }



 /* ==========================process-section============================= */
 .branding-process {
     position: relative;
     padding: 15px 0;
     background: #fff;
     overflow: hidden;
     box-shadow: 0px 0px 4px grey;
 }

 .pre-title {
     color: #6366f1;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
 }

 .section-title {
     font-size: 40px;
     font-weight: 800;
     color: #1e293b;
 }

 .text-gradient {
     background: linear-gradient(90deg, #4f46e5, #ec4899);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .row.g-4 {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
 }

 .process-card {
     display: flex;
     flex-direction: column;
     height: 100%;
     /* Ye card ko parent row ki height lene ke liye force karega */
     background: #fff;
     padding: 30px 20px;
     border-radius: 20px;
     border: 1px solid #f1f1f1;
     transition: 0.3s;
 }

 .process-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .process-card p {
     flex-grow: 1;
     text-align: justify;
 }

 .step-num {
     width: 50px;
     height: 50px;
     color: #fff;
     font-weight: 800;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
 }

 .icon-box {
     font-size: 30px;
     margin-bottom: 15px;
     color: #4f46e5;
 }

 .btn-start-today {
     background: linear-gradient(90deg, #4f46e5, #ec4899);
     color: #fff;
     border: none;
     padding: 15px 50px;
     border-radius: 50px;
     font-weight: 700;
     transition: 0.3s;
 }

 .btn-start-today:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 /* Absolute Shapes */
 .shape-tl {
     position: absolute;
     top: -20px;
     left: -20px;
     z-index: 0;
 }

 .shape-tr {
     position: absolute;
     top: 50px;
     right: 50px;
     z-index: 0;
 }

 .shape-bl {
     position: absolute;
     bottom: 20px;
     left: 20px;
     z-index: 0;
 }


 /* ================clients section====================== */

 .clients-section {
     background: #fff;
     padding: 20px 0 120px;
     position: relative;
 }

 /* Heading */

 .section-tag {
     font-size: 14px;
     font-weight: 700;
     color: #6a55ff;
     position: relative;
     display: inline-block;
 }

 .section-tag::before,
 .section-tag::after {
     content: '';
     width: 50px;
     height: 2px;
     background: #6a55ff;
     position: absolute;
     top: 50%;
 }

 .section-tag::before {
     right: 100%;
     margin-right: 15px;
 }

 .section-tag::after {
     left: 100%;
     margin-left: 15px;
 }

 .section-title {
     font-size: 62px;
     line-height: 1.1;
     font-weight: 800;
     color: #161547;
     margin-top: 10px;
 }

 .section-title span {
     background: linear-gradient(90deg,
             #5f5cff,
             #ff5cb8);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .section-subtitle {
     color: #8686a0;
     font-size: 22px;
 }

 /* Grid */

 .logo-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 18px;
 }

 .logo-card {
     background: #fff;
     border-radius: 16px;
     padding: 28px;
     min-height: 120px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     box-shadow:
         0 10px 25px rgba(87, 76, 255, .08);
     transition: .4s;
 }

 .logo-card:hover {
     transform: translateY(-8px);
 }

 .logo-card img {
     max-width: 100%;
     max-height: 60px;
 }

 .card-line {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     border-radius: 20px;
     background: linear-gradient(90deg,
             #5d58ff,
             #ff56b8);
 }

 /* CTA */

 .start-btn {
     background: linear-gradient(90deg,
             #5b56ff,
             #ff56b6);
     color: #fff;
     text-decoration: none;
     padding: 15px 25px;
     border-radius: 60px;
     font-size: 20px;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     box-shadow: 0 15px 35px rgba(91, 86, 255, .35);
     transition: 0.3s;
 }

 .start-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .start-btn span {
     width: 34px;
     height: 34px;
     background: #fff;
     color: #ff56b6;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* SVG Shapes */

 .shape-left {
     position: absolute;
     width: 220px;
     height: 220px;
     border: 20px solid #dcd8ff;
     border-radius: 50%;
     top: -120px;
     left: -120px;
 }

 .shape-right {
     position: absolute;
     width: 240px;
     height: 240px;
     border: 18px solid #e3ddff;
     border-radius: 50%;
     right: -120px;
     bottom: -90px;
 }

 /* Dots */

 .dots-left,
 .dots-right {
     width: 90px;
     height: 90px;
     position: absolute;
     background-image:
         radial-gradient(#b7a9ff 2px, transparent 2px);
     background-size: 15px 15px;
 }

 .dots-left {
     top: 80px;
     left: 80px;
 }

 .dots-right {
     top: 60px;
     right: 100px;
 }

 /* Triangle */

 .triangle-right {
     position: absolute;
     right: 140px;
     top: 180px;
     width: 25px;
     height: 25px;
     border: 4px solid #6357ff;
     transform: rotate(45deg);
     background: transparent;
 }

 .triangle-bottom {
     position: absolute;
     left: 60px;
     bottom: 60px;
     width: 20px;
     height: 20px;
     border: 4px solid orange;
     transform: rotate(45deg);
 }

 .plus-left {
     position: absolute;
     left: 180px;
     bottom: 90px;
     color: #6357ff;
     font-size: 40px;
     font-weight: 700;
 }

 /* Bottom Wave */

 .bottom-wave {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 120px;
 }

 /* Responsive */

 @media(max-width:1200px) {

     .logo-grid {
         grid-template-columns: repeat(4, 1fr);
     }

     .section-title {
         font-size: 48px;
     }
 }

 @media(max-width:768px) {

     .logo-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .section-title {
         font-size: 34px;
     }

     .logo-card {
         min-height: 100px;
         padding: 20px;
     }
 }

 /* ==========section divider=============== */
 .section-divider {
     position: relative;
     height: 50px;
     background: #fff;
     overflow: hidden;
 }

 .section-divider svg {
     width: 100%;
     height: 100%;
     display: block;
 }

 /* =====================section testimonials================ */
 .testimonial-section {
     position: relative;
     padding: 10px 0;
     background: #fff;
     overflow: hidden;
 }

 .testimonial-title {
     font-size: 55px;
     font-weight: 800;
     color: #26235f;
 }

 .title-line {
     width: 120px;
     height: 5px;
     border-radius: 50px;
     margin: 15px auto;
     background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b);
 }

 .google-review-box {
     background: #fff;
     padding: 25px;
     border-radius: 25px;
     box-shadow: 0 10px 35px rgba(99, 102, 241, .08);
 }

 .google-company-img {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     margin-bottom: 20px;
 }

 .rating {
     color: #ff8c00;
     font-size: 22px;
     font-weight: 700;
 }

 .review-btn {
     display: inline-block;
     margin-top: 15px;
     background: linear-gradient(90deg, #4f46e5, #3b82f6);
     color: #fff;
     padding: 12px 25px;
     border-radius: 40px;
     text-decoration: none;
 }


 .testimonial-card {
     width: 100%;
     height: 100%;
     min-height: 260px;
     display: flex;
     flex-direction: column;
 }

 .review-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 15px;
 }

 .review-header img {
     width: 55px;
     height: 55px;
     border-radius: 50%;
     object-fit: cover;
 }

 .review-header h5 {
     margin: 0;
     color: #1e40af;
     font-weight: 700;
 }

 .review-header span {
     font-size: 14px;
     color: #777;
 }

 .review-header .fa-google {
     margin-left: auto;
     color: #4285F4;
     font-size: 22px;
 }

 .stars {
     color: #ff8c00;
     font-size: 22px;
     margin-bottom: 15px;
 }

 .testimonial-card p {
     font-size: 18px;
     line-height: 1.8;
 }

 .swiper-pagination {
     margin-top: 30px;
     position: relative !important;
 }

 /* SVG Shapes */

 .ts-circle-left {
     width: 220px;
     height: 220px;
     border: 18px solid #e4ddff;
     border-radius: 50%;
     position: absolute;
     top: -120px;
     left: -120px;
 }

 .ts-circle-right {
     width: 260px;
     height: 260px;
     border: 18px solid #e4ddff;
     border-radius: 50%;
     position: absolute;
     right: -130px;
     bottom: -120px;
 }

 .ts-dots-left,
 .ts-dots-right {
     width: 80px;
     height: 80px;
     position: absolute;
     background-image:
         radial-gradient(#c4b5fd 2px, transparent 2px);
     background-size: 15px 15px;
 }

 .ts-dots-left {
     left: 80px;
     top: 140px;
 }

 .ts-dots-right {
     right: 80px;
     top: 100px;
 }

 .ts-plus {
     position: absolute;
     left: 140px;
     bottom: 90px;
     font-size: 40px;
     color: #6366f1;
     font-weight: 700;
 }

 .ts-triangle {
     position: absolute;
     left: 50px;
     bottom: 70px;
     width: 20px;
     height: 20px;
     border: 3px solid orange;
     transform: rotate(45deg);
 }

 /* ====================contact section============= */
 .quote-section {
     position: relative;
     background: #fff;
     padding: 10px 0 30px;
     overflow: hidden;
 }

 .mini-title {
     color: #5f5cff;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
 }

 .main-title {
     margin-top: 10px;
     font-size: 50px;
     font-weight: 800;
     line-height: 1;
     margin: 15px 0 25px;
     color: #101540;
 }

 .main-title span {
     background: linear-gradient(90deg, #675cff, #ff4fa8);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .desc {
     font-size: 20px;
     line-height: 1.9;
     color: #666;
     max-width: 520px;
 }

 .quote-service-box {

     display: flex;
     padding: 10px;
     gap: 20px;
     margin-top: 25px;
     border-radius: 24px;
     align-items: center;
     transition: 0.3s ease;
     box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

 }

 .quote-service-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
 }

 .service-icon {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 22px;
 }

 .purple {
     background: #5d5cff;
 }

 .pink {
     background: #ff4fa8;
 }

 .orange {
     background: #ff9800;
 }

 .service-box h5 {
     margin: 0;
     font-weight: 700;
 }

 .service-box p {
     margin: 0;
     color: #666;
 }

 .laptop-wrapper {
     position: relative;
     width: 400px;
     height: 300px;
     /* margin-top:40px; */
     margin-left: 120px;
 }

 .laptop-circle {
     width: 260px;
     height: 260px;
     border-radius: 50%;
     background: rgba(110, 97, 255, .10);
     position: absolute;
     left: 70%;
     top: 5%;
     transform: translate(-50%, -50%);
 }

 .laptop-img {
     position: absolute;
     left: 70%;
     top: 5%;
     transform: translate(-50%, -50%);
     width: 340px;
     z-index: 2;
 }

 .quote-form-card {
     background: #fff;
     border-radius: 30px;
     padding: 30px;
     box-shadow: 0 20px 60px rgba(91, 94, 255);
 }

 .form-top-icon {
     width: 70px;
     height: 70px;
     margin: auto auto 25px;
     border-radius: 50%;
     background: #f4f1ff;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #6b5cff;
     font-size: 28px;
 }

 .input-group-box {
     position: relative;
 }

 .input-group-box i {
     position: absolute;
     left: 18px;
     top: 12px;
     color: #675cff;
 }


 .input-group-box input {
     /* height: 10px; */
     padding-left: 50px;
     border: 1px solid #ecebff;
     border-radius: 15px;
 }

 .textarea-box i {
     top: 20px;
 }

 .textarea-box textarea {
     height: 140px;
     padding-left: 50px;
     padding-top: 12px;
     border-radius: 15px;
     border: 1px solid #ecebff;
 }

 .send-btn {
     border: none;
     background: linear-gradient(90deg, #5146e5, #ff4fa8);
     color: #fff;
     height: 64px;
     width: 280px;
     border-radius: 50px;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     transition: 0.3s;
 }

 .send-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .send-btn span {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: #fff;
     color: #ff4fa8;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .shape-circle-left {
     position: absolute;
     width: 220px;
     height: 220px;
     border: 18px solid #e6e0ff;
     border-radius: 50%;
     top: -120px;
     left: -120px;
 }

 .shape-circle-right {
     position: absolute;
     width: 240px;
     height: 240px;
     border: 18px solid #e6e0ff;
     border-radius: 50%;
     right: -120px;
     bottom: 0;
 }

 .dots {
     position: absolute;
     width: 90px;
     height: 90px;
     background-image: radial-gradient(#c4b5fd 2px, transparent 2px);
     background-size: 15px 15px;
 }

 .dots-left {
     left: 30px;
     bottom: 170px;
 }

 .dots-right {
     right: 80px;
     top: 40px;
 }

 .plus {
     position: absolute;
     color: #675cff;
     font-size: 60px;
 }

 .plus-left {
     left: 35px;
     top: 250px;
 }

 .plus-bottom {
     left: 300px;
     bottom: 110px;
     color: #ff4fa8;
 }

 .triangle-shape {
     position: absolute;
     right: 190px;
     top: 90px;
     width: 25px;
     height: 25px;
     border: 4px solid orange;
     transform: rotate(45deg);
 }

 .pink-circle {
     position: absolute;
     left: 250px;
     top: 80px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 4px solid #ff4fa8;
 }

 .wave-wrap {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     line-height: 0;
     z-index: 1;
 }

 .wave-wrap svg {
     width: 100%;
     height: 260px;
     display: block;
 }

 /* --- UPDATE YAHAN KIYA HAI --- */
 @media(max-width:991px) {

     /* Mobile me saare floating icons text ke upar overlap ho rhe the, isliye hide kiya */
     .shape-circle-left,
     .shape-circle-right,
     .dots,
     .plus,
     .triangle-shape,
     .pink-circle {
         display: none !important;
     }

     .quote-section {
         padding-bottom: 120px;
     }

     .main-title {
         font-size: 52px;
     }

     .laptop-wrapper {
         margin-left: 0;
         text-align: center;
     }

     .quote-form-card {
         margin-top: 40px;
         position: relative;
         z-index: 5;
         padding: 30px 20px;
     }

     .wave-wrap svg {
         height: 120px;
     }
 }

 @media (max-width:768px) {
     .laptop-wrapper {
         display: none;
     }
 }

 @media (max-width:575px) {
     .main-title {
         font-size: 38px;
     }
 }

 /* ===================footer===================== */
 .dd-footer {
     position: relative;
     overflow: hidden;
     background:
         linear-gradient(135deg,
             #081b3b,
             #132c66,
             #1f3d8a);
     color: #fff;
     padding-top: 80px;
 }

 .footer-glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(100px);
 }

 .footer-glow-1 {
     width: 350px;
     height: 350px;
     background: #675cff;
     top: -150px;
     left: -100px;
     opacity: .25;
 }

 .footer-glow-2 {
     width: 300px;
     height: 300px;
     background: #ff4fa8;
     bottom: -150px;
     right: -100px;
     opacity: .20;
 }

 .footer-cta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 30px;
     margin-bottom: 70px;
     padding: 35px;
     border-radius: 25px;
     background: rgba(255, 255, 255, .08);
     backdrop-filter: blur(10px);
 }

 .footer-cta h2 {
     font-size: 26px;
     font-weight: 800;
     margin-bottom: 10px;
 }

 .footer-cta p {
     margin: 0;
     color: #d8d8d8;
 }

 .footer-btn {
     text-decoration: none;
     background:
         linear-gradient(90deg,
             #675cff,
             #ff4fa8);
     color: #fff;
     padding: 15px 35px;
     border-radius: 50px;
     font-weight: 700;
 }

 .footer-logo {
     max-width: 120px;
     margin-bottom: 20px;
 }

 .footer-about {
     color: #d9d9d9;
     line-height: 1.9;
 }

 .footer-social {
     display: flex;
     gap: 12px;
     margin-top: 25px;
 }

 .footer-social a {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     background: rgba(255, 255, 255, .1);
     color: #fff;
 }

 .dd-footer h5 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 25px;
 }

 .dd-footer ul {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 .dd-footer ul li {
     margin-bottom: 12px;
 }

 .dd-footer ul li a {
     text-decoration: none;
     color: #ddd;
 }

 .contact-box {
     margin-bottom: 15px;
     color: #ddd;
 }

 .contact-box i {
     width: 25px;
     color: #ff4fa8;
 }

 .newsletter {
     margin-top: 25px;
     display: flex;
 }

 .newsletter input {
     flex: 1;
     border: none;
     outline: none;
     padding: 15px;
     border-radius: 50px 0 0 50px;
 }

 .newsletter button {
     border: none;
     padding: 15px 25px;
     color: #fff;
     border-radius: 0 50px 50px 0;
     background:
         linear-gradient(90deg,
             #675cff,
             #ff4fa8);
 }

 .footer-line {
     border-color: rgba(255, 255, 255, .15);
     margin: 60px 0 25px;
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 25px;
 }

 .footer-bottom p {
     margin: 0;
 }

 .footer-links {
     display: flex;
     gap: 25px;
 }

 .footer-links a {
     color: #fff;
     text-decoration: none;
 }

 @media(max-width:991px) {

     .footer-cta {
         flex-direction: column;
         text-align: center;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 15px;
         text-align: center;
     }

 }

 @media(max-width:576px) {

     .footer-cta h2 {
         font-size: 28px;
     }

     .newsletter {
         flex-direction: column;
         gap: 10px;
     }

     .newsletter input,
     .newsletter button {
         border-radius: 50px;
         width: 100%;
     }

     .footer-links {
         flex-wrap: wrap;
         justify-content: center;
     }

 }

 /* ===============seo page================= */

 .hero-area {
     position: relative;
     padding: 90px 0 40px;
     background: #fff;
     overflow: hidden;
 }

 .hero-area::before {
     content: '';
     position: absolute;
     left: -150px;
     top: -150px;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     background: #f2ebff;
     z-index: 0;
 }

 .hero-area::after {
     content: '';
     position: absolute;
     right: -180px;
     bottom: -180px;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     background: #fff2e7;
     z-index: 0;
 }

 .hero-area .container {
     position: relative;
     z-index: 2;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 22px;
     border-radius: 50px;
     background: #efe9ff;
     color: #6a39ff;
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 25px;
 }

 .hero-badge i {
     color: #ff8a00;
 }

 .hero-content h1 {
     font-size: 68px;
     font-weight: 800;
     line-height: 1.08;
     color: #17183d;
     margin-bottom: 20px;
 }

 .hero-content h1 span {
     color: #0a66c2;
 }

 .line {
     width: 120px;
     height: 5px;
     border-radius: 20px;
     background: linear-gradient(90deg, #6b4dff, #00b7ff);
     margin: 30px 0;
 }

 .hero-content p {
     font-size: 18px;
     line-height: 32px;
     color: #6f7286;
     margin-bottom: 35px;
 }

 .hero-btn {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     padding: 17px 38px;
     border-radius: 60px;
     background-color: #0a66c2;
     color: #fff;
     font-weight: 700;
     text-decoration: none;
     transition: .4s;
     box-shadow: 0 15px 35px rgba(110, 74, 255, .25);
 }

 .hero-btn:hover {
     transform: translateY(-6px);
     color: #fff;
 }

 .hero-image {
     position: relative;
     text-align: center;
 }

 .hero-image img {
     max-width: 100%;
     animation: float 5s ease-in-out infinite;
 }

 @keyframes float {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

     100% {
         transform: translateY(0);
     }
 }

 .floating {
     position: absolute;
     width: 70px;
     height: 70px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     background: #fff;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
     animation: float2 4s ease-in-out infinite;
 }

 @keyframes float2 {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }

     100% {
         transform: translateY(0);
     }
 }

 .target {
     left: -10px;
     top: 90px;
     color: #ff8a00;
 }

 .graph {
     right: 0;
     top: 20px;
     color: #6d49ff;
 }

 .settings {
     left: 50px;
     bottom: 40px;
     color: #00b894;
 }

 .search {
     right: 40px;
     bottom: 60px;
     color: #ff5b83;
 }

 .right-info {
     display: flex;
     flex-direction: column;
     gap: 25px;
 }

 .info-box {
     background: #fff;
     border-radius: 26px;
     padding: 30px;
     display: flex;
     align-items: center;
     gap: 20px;
     box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
     transition: .35s;
 }

 .info-box:hover {
     transform: translateY(-8px);
 }

 .info-box .icon {
     width: 70px;
     height: 70px;
     border-radius: 18px;
     background: #6b4dff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     color: #fff;
 }

 .info-box .pink {
     background: #ff8a00;
 }

 .info-box h2 {
     font-size: 36px;
     font-weight: 800;
     margin: 0;
     color: #1b2141;
 }

 .info-box p {
     margin: 5px 0 0;
     color: #666;
     font-weight: 600;
 }

 /*==========================
SERVICE CARDS
==========================*/

 .service-wrapper {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 70px;
 }

 .service-card {
     background: #fff;
     border-radius: 28px;
     padding: 28px;
     display: flex;
     align-items: center;
     gap: 18px;
     box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
     transition: .35s;
     position: relative;
 }

 .service-card:hover {
     transform: translateY(-10px);
 }

 .service-icon {
     width: 72px;
     height: 72px;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     color: #fff;
     flex-shrink: 0;
 }

 .service-icon.purple {
     background: #6b4dff;
 }

 .service-icon.orange {
     background: #ff8a00;
 }

 .service-icon.green {
     background: #14b789;
 }

 .service-card h4 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 8px;
     color: #1b2141;
 }

 .service-card p {
     font-size: 15px;
     line-height: 26px;
     color: #666;
     margin: 0;
 }

 .service-card a {
     margin-left: auto;
     width: 55px;
     height: 55px;
     border-radius: 50%;
     background: #f5f5f5;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: #6b4dff;
     transition: .3s;
 }

 .service-card:hover a {
     background: #6b4dff;
     color: #fff;
 }

 /*=========================
SLIDER DOT
=========================*/






 /*=========================
SHAPES
=========================*/

 .hero-area .circle-one {
     position: absolute;
     width: 300px;
     height: 300px;
     border: 18px solid #ece6ff;
     border-radius: 50%;
     left: -120px;
     top: 80px;
     z-index: 0;
 }

 .hero-area .circle-two {
     position: absolute;
     width: 220px;
     height: 220px;
     border: 15px solid #fff0df;
     border-radius: 50%;
     right: -90px;
     bottom: 120px;
     z-index: 0;
 }

 .hero-area .plus {
     position: absolute;
     left: 120px;
     bottom: 120px;
     font-size: 55px;
     font-weight: 700;
     color: #6d49ff;
     z-index: 0;
 }

 .hero-area .triangle {
     position: absolute;
     right: 140px;
     top: 180px;
     width: 28px;
     height: 28px;
     border: 4px solid #ff8a00;
     transform: rotate(45deg);
 }

 .hero-area .dots {
     position: absolute;
     width: 120px;
     height: 120px;
     background-image: radial-gradient(#b5a4ff 2px, transparent 2px);
     background-size: 15px 15px;
     right: 60px;
     top: 80px;
     opacity: .7;
 }

 /*=========================
CARD EFFECT
=========================*/

 .service-card::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, #6d49ff, #ff8a00);
     transform: scaleX(0);
     transform-origin: left;
     transition: .4s;
     border-radius: 30px 30px 0 0;
 }

 .service-card:hover::before {
     transform: scaleX(1);
 }

 .service-card:hover {
     box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
 }

 .info-box:hover {
     box-shadow: 0 25px 60px rgba(107, 77, 255, .18);
 }

 /*=========================
BUTTON
=========================*/

 .hero-btn i {
     transition: .35s;
 }

 .hero-btn:hover i {
     transform: translateX(6px);
 }

 /*=========================
FLOAT ICONS
=========================*/

 .target {
     animation-delay: 0s;
 }

 .graph {
     animation-delay: 1s;
 }

 .settings {
     animation-delay: 2s;
 }

 .search {
     animation-delay: 3s;
 }

 /*=========================
IMAGE
=========================*/

 .hero-image {
     padding: 30px;
 }

 .hero-image::before {
     content: '';
     position: absolute;
     width: 520px;
     height: 520px;
     background: #f6f2ff;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: -1;
 }

 .hero-image img {
     position: relative;
     z-index: 2;
 }

 /*=========================
RESPONSIVE
=========================*/

 @media(max-width:1400px) {

     .hero-content h1 {
         font-size: 60px;
     }

     .hero-image img {
         max-width: 95%;
     }

 }

 @media(max-width:1200px) {

     .hero-content h1 {
         font-size: 52px;
     }

     .service-wrapper {
         grid-template-columns: repeat(2, 1fr);
     }

     .hero-image::before {
         width: 430px;
         height: 430px;
     }

 }

 @media(max-width:1050px) {}

 @media(max-width:991px) {

     .hero-area {
         padding: 70px 0;
         text-align: center;
     }

     .hero-content {
         margin-bottom: 40px;
     }

     .hero-content h1 {
         font-size: 48px;
     }

     .line {
         margin: auto;
         margin-top: 25px;
         margin-bottom: 25px;
     }

     .right-info {
         margin-top: 50px;
     }

     .info-box {
         justify-content: center;
     }

     .service-wrapper {
         grid-template-columns: 1fr;
         margin-top: 50px;
     }

     .hero-image {
         margin: 40px auto;
     }

     .hero-image::before {
         width: 360px;
         height: 360px;
     }

     .target {
         left: 20px;
     }

     .graph {
         right: 20px;
     }

     .settings {
         left: 30px;
         bottom: 20px;
     }

     .search {
         right: 20px;
         bottom: 20px;
     }

 }

 @media(max-width:768px) {

     .hero-content h1 {
         font-size: 40px;
     }

     .hero-content p {
         font-size: 16px;
         line-height: 30px;
     }

     .hero-btn {
         padding: 15px 30px;
     }

     .hero-image::before {
         width: 320px;
         height: 320px;
     }

     .floating {
         width: 55px;
         height: 55px;
         font-size: 20px;
         border-radius: 15px;
     }

     .info-box {
         padding: 22px;
     }

     .info-box h2 {
         font-size: 30px;
     }

     .service-card {
         flex-direction: column;
         text-align: center;
         padding: 30px 20px;
     }

     .service-card a {
         margin: auto;
         margin-top: 20px;
     }

 }

 @media(max-width:576px) {

     .hero-area {
         padding: 55px 0;
     }

     .hero-content h1 {
         font-size: 34px;
         line-height: 1.2;
     }

     .hero-badge {
         font-size: 12px;
         padding: 9px 18px;
     }

     .hero-image::before {
         width: 270px;
         height: 270px;
     }

     .hero-image img {
         width: 100%;
     }

     .target,
     .graph,
     .settings,
     .search {
         display: none;
     }

     .info-box {
         flex-direction: column;
         text-align: center;
     }

     .service-card h4 {
         font-size: 20px;
     }

     .service-card p {
         font-size: 14px;
         line-height: 24px;
     }
 }

 /* ======================seo page second section========================================= */

 .seo-hero {
     position: relative;
     padding: 100px 0 70px;
     background: #fff;
     overflow: hidden;
     font-family: 'Poppins', sans-serif;
 }

 .hero-shape {
     position: absolute;
     border-radius: 50%;
     z-index: 0;
 }

 .shape-1 {
     width: 320px;
     height: 320px;
     background: #f3edff;
     top: -120px;
     left: -120px;
 }

 .shape-2 {
     width: 250px;
     height: 250px;
     background: #fff2e6;
     right: -100px;
     bottom: 60px;
 }

 .hero-dots {
     position: absolute;
     width: 120px;
     height: 120px;
     right: 80px;
     top: 90px;
     background-image: radial-gradient(#d4c1ff 2px, transparent 2px);
     background-size: 14px 14px;
     opacity: .7;
 }

 .seo-hero .container {
     position: relative;
     z-index: 2;
 }

 /*==========================
LEFT CONTENT
==========================*/

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 12px 24px;
     border-radius: 40px;
     background: #f2ecff;
     color: #6b42ff;
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 25px;
 }

 .hero-badge i {
     color: #ff8a00;
 }

 .hero-title {
     font-size: 54px;
     font-weight: 800;
     line-height: 1.08;
     color: #17183c;
     margin-bottom: 25px;
 }

 .hero-title span {
     color: #0c5fbe;
 }

 .hero-text {
     font-size: 17px;
     line-height: 31px;
     color: #666;
     margin-bottom: 30px;
 }

 .hero-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
     margin-bottom: 35px;
 }

 .hero-item {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 16px;
     font-weight: 600;
     color: #333;
 }

 .hero-item i {
     color: #00c67a;
     font-size: 18px;
 }

 .hero-btn-group {
     display: flex;
     align-items: center;
     gap: 18px;
     flex-wrap: wrap;
 }

 .hero-btn {
     background: linear-gradient(90deg, #6b42ff, #8d63ff);
     color: #fff;
     padding: 16px 34px;
     border-radius: 50px;
     font-weight: 700;
     box-shadow: 0 18px 35px rgba(107, 66, 255, .25);
     transition: .35s;
 }

 .hero-btn:hover {
     transform: translateY(-5px);
     color: #fff;
 }

 .hero-btn-outline {
     padding: 15px 34px;
     border: 2px solid #6b42ff;
     border-radius: 50px;
     color: #6b42ff;
     font-weight: 700;
     transition: .35s;
 }

 .hero-btn-outline:hover {
     background: #6b42ff;
     color: #fff;
 }

 /*==========================
CENTER DASHBOARD
==========================*/

 .dashboard-wrapper {
     position: relative;

 }

 .dashboard-wrapper img {
     width: 100%;
     /* max-width: 600px; */
     animation: float 5s ease-in-out infinite;
 }

 @keyframes float {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

     100% {
         transform: translateY(0);
     }
 }

 .floating-card {
     position: absolute;
     background: #fff;
     padding: 18px;
     border-radius: 18px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, .10);
     text-align: center;
     min-width: 140px;
     transition: .35s;
 }

 .floating-card:hover {
     transform: translateY(-8px);
 }

 .floating-card i {
     width: 35px;
     height: 35px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     margin: auto;
     margin-bottom: 10px;
     font-size: 22px;
     color: #fff;
     background: #6b42ff;
 }

 .floating-card h6 {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .floating-card strong {
     font-size: 24px;
     color: #17183c;
 }

 .card-one {
     left: -20px;
     top: 40px;
 }

 .card-two {
     right: -15px;
     top: 120px;
 }

 .card-three {
     left: 60px;
     bottom: 20px;
 }

 /*==========================
RIGHT STATS
==========================*/

 .stats-card {
     background: #fff;
     padding: 26px;
     border-radius: 22px;
     display: flex;
     align-items: center;
     gap: 20px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
     transition: .35s;
 }

 .stats-card:hover {
     transform: translateY(-8px);
 }

 .stats-icon {
     width: 70px;
     height: 70px;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     color: #fff;
     flex-shrink: 0;
 }

 .stats-icon.purple {
     background: #6b42ff;
 }

 .stats-icon.orange {
     background: #ff8a00;
 }

 .stats-icon.green {
     background: #00c67a;
 }

 .stats-card h3 {
     font-size: 34px;
     font-weight: 800;
     margin: 0;
     color: #17183c;
 }

 .stats-card p {
     margin: 4px 0 0;
     color: #666;
     font-size: 15px;
 }

 /*==========================
SERVICE BOX
==========================*/
 .service-box {
     background: #fff;
     padding: 30px;
     border-radius: 24px;
     display: flex;
     gap: 22px;
     align-items: flex-start;
     box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
     transition: .35s;
     height: 100%;
     position: relative;
     overflow: hidden;
 }

 .service-box::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #6b42ff, #ff8a00);
     transform: scaleX(0);
     transform-origin: left;
     transition: .4s;
 }

 .service-box:hover::before {
     transform: scaleX(1);
 }

 .service-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
 }

 .service-icon {
     width: 75px;
     height: 75px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     color: #fff;
     flex-shrink: 0;
 }

 .service-icon.purple {
     background: #6b42ff;
 }

 .service-icon.orange {
     background: #ff8a00;
 }

 .service-icon.green {
     background: #00c67a;
 }

 .service-box h4 {
     font-size: 23px;
     font-weight: 700;
     margin-bottom: 10px;
     color: #18193d;
 }

 .service-box p {
     font-size: 15px;
     line-height: 28px;
     color: #666;
     margin-bottom: 18px;
 }

 .service-box a {
     text-decoration: none;
     font-weight: 700;
     color: #6b42ff;
     transition: .35s;
 }

 .service-box a:hover {
     color: #ff8a00;
 }

 .service-box a i {
     margin-left: 8px;
     transition: .35s;
 }

 .service-box:hover a i {
     transform: translateX(6px);
 }

 /*==========================
FLOATING ANIMATION
==========================*/

 .card-one {
     animation: floatOne 4s infinite ease-in-out;
 }

 .card-two {
     animation: floatTwo 5s infinite ease-in-out;
 }

 .card-three {
     animation: floatThree 6s infinite ease-in-out;
 }

 @keyframes floatOne {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 @keyframes floatTwo {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(12px);
     }
 }

 @keyframes floatThree {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 /*==========================
BUTTON EFFECT
==========================*/

 .hero-btn i {
     margin-left: 10px;
     transition: .35s;
 }

 .hero-btn:hover i {
     transform: translateX(6px);
 }

 .hero-btn-outline:hover {
     box-shadow: 0 15px 35px rgba(107, 66, 255, .20);
 }

 /*==========================
RESPONSIVE
==========================*/

 @media(max-width:1200px) {

     .hero-title {
         font-size: 52px;
     }

     .dashboard-img {
         max-width: 420px;
     }

 }

 @media(max-width:992px) {

     .seo-hero {
         padding: 80px 0;
         text-align: center;
     }

     .hero-title {
         font-size: 46px;
     }

     .hero-text {
         max-width: 650px;
         margin: auto;
         margin-bottom: 30px;
     }

     .hero-list {
         align-items: center;
     }

     .hero-btn-group {
         justify-content: center;
         margin-bottom: 50px;
     }

     .dashboard-wrapper {
         margin-bottom: 50px;
     }


     .stats-card {
         background: #fff;
         padding: 26px;
         border-radius: 22px;
         display: flex;
         align-items: center;
         gap: 20px;
         box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
         transition: .35s;
     }


     .dashboard-img {
         max-width: 100%;

     }

     .service-box {
         text-align: left;
     }

 }

 @media(max-width:768px) {

     .hero-title {
         font-size: 38px;
     }

     .hero-text {
         font-size: 16px;
         line-height: 28px;
     }

     .dashboard-img {
         max-width: 100%;
     }

     .floating-card {
         position: relative;
         left: auto;
         right: auto;
         top: auto;
         bottom: auto;
         margin: 15px auto;
         display: block;
     }

     .card-one,
     .card-two,
     .card-three {
         animation: none;
     }

     .service-box {
         flex-direction: column;
         align-items: center;
         text-align: center;
         padding: 25px;
     }

     .service-icon {
         margin-bottom: 10px;
     }

     .stats-card {
         flex-direction: column;
         text-align: center;
     }

     .hero-btn,
     .hero-btn-outline {
         width: 100%;
         justify-content: center;
     }

     .hero-btn-group {
         flex-direction: column;
     }

 }

 @media(max-width:576px) {

     .seo-hero {
         padding: 60px 0;
     }

     .hero-title {
         font-size: 32px;
         line-height: 1.2;
     }

     .hero-badge {
         font-size: 12px;
         padding: 10px 18px;
     }

     .hero-item {
         font-size: 15px;
     }

     .hero-btn,
     .hero-btn-outline {
         padding: 14px 24px;
         font-size: 15px;
     }

     .stats-card {
         padding: 22px;
     }

     .stats-card h3 {
         font-size: 28px;
     }

     .service-box h4 {
         font-size: 20px;
     }

     .service-box p {
         font-size: 14px;
         line-height: 24px;
     }

     .hero-dots,
     .shape-1,
     .shape-2 {
         display: none;
     }

 }

 /* =======================breadcrumb================== */


 .bread-modern {
     position: relative;
     padding: 110px 0;
     /* 👈 HEIGHT CONTROL (kam kiya) */
     background:
         linear-gradient(120deg, rgba(12, 36, 71, 0.92), rgba(7, 127, 203, 0.85)),
         var(--bg);
     background-size: cover;
     background-position: center;
     overflow: hidden;
 }

 /* soft overlay */
 .bread-modern::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
         radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 40%),
         radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05), transparent 40%);
 }

 .bread-content {
     position: relative;
     color: #fff;
     max-width: 650px;
 }

 /* chip */
 .bread-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     background: rgba(255, 255, 255, 0.12);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 30px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 /* title */
 .bread-modern h1 {
     font-size: 44px;
     font-weight: 800;
     margin-bottom: 12px;
 }

 /* text */
 .bread-modern p {
     font-size: 15px;
     line-height: 26px;
     opacity: 0.9;
     margin-bottom: 18px;
 }

 /* nav */
 .bread-nav {
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap;
     font-size: 14px;
 }

 .bread-nav a {
     color: #fff;
     text-decoration: none;
     opacity: 0.85;
 }

 .bread-nav a:hover {
     opacity: 1;
     color: #ffd36b;
 }

 .bread-nav strong {
     color: #ffd36b;
 }

 /* RESPONSIVE */
 @media(max-width:768px) {
     .bread-modern {
         padding: 55px 0;
         /* 👈 aur compact mobile */
         text-align: center;
     }

     .bread-content {
         margin: auto;
     }

     .bread-modern h1 {
         font-size: 30px;
     }
 }

 /* =====================ppc page =================== */
 /*==================================
PPC ABOUT SECTION
==================================*/

 .ppc-about {
     position: relative;
     padding: 20px 0;
     background: #fff;
     overflow: hidden;
 }

 .ppc-about::before {
     content: "";
     position: absolute;
     left: -150px;
     top: -150px;
     width: 350px;
     height: 350px;
     background: #f3ecff;
     border-radius: 50%;
     z-index: 0;
 }

 .ppc-about::after {
     content: "";
     position: absolute;
     right: -150px;
     bottom: -150px;
     width: 320px;
     height: 320px;
     background: #fff4e8;
     border-radius: 50%;
     z-index: 0;
 }

 .ppc-about .container {
     position: relative;
     z-index: 2;
 }

 /*=========================
SECTION TITLE
=========================*/

 .section-tag {
     display: inline-flex;
     align-items: center;
     padding: 10px 22px;
     background: #f4efff;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 700;
     color: #6b42ff;
     margin-bottom: 20px;
 }

 .section-title {
     font-size: 52px;
     font-weight: 800;
     line-height: 1.2;
     color: #16193f;
     margin-bottom: 20px;
 }

 .section-title span {
     color: #6b42ff;
 }

 .section-desc {
     font-size: 17px;
     line-height: 32px;
     color: #666;
     margin-bottom: 20px;
 }

 /*=========================
FEATURE LIST
=========================*/

 .ppc-feature {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 0;
     font-size: 17px;
     font-weight: 600;
     color: #333;
 }

 .ppc-feature i {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: #6b42ff;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     flex-shrink: 0;
 }

 /*=========================
BUTTON
=========================*/

 .ppc-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 36px;
     background: linear-gradient(90deg, #6b42ff, #8f6bff);
     border-radius: 50px;
     color: #fff;
     font-weight: 700;
     box-shadow: 0 18px 35px rgba(107, 66, 255, .25);
     transition: .4s;
 }

 .ppc-btn:hover {
     transform: translateY(-6px);
     color: #fff;
 }

 .ppc-btn i {
     transition: .35s;
 }

 .ppc-btn:hover i {
     transform: translateX(6px);
 }

 /*=========================
IMAGE
=========================*/

 .ppc-image {
     position: relative;
     text-align: center;
 }

 .ppc-image img {
     max-width: 100%;
     animation: ppcFloat 5s infinite ease-in-out;
 }

 @keyframes ppcFloat {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

     100% {
         transform: translateY(0);
     }
 }

 /*=========================
FLOATING CARDS
=========================*/

 .ppc-card {
     position: absolute;
     background: #fff;
     padding: 18px 22px;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
     text-align: center;
     transition: .35s;
     min-width: 170px;
 }

 .ppc-card:hover {
     transform: translateY(-8px);
 }

 .ppc-card h5 {
     font-size: 28px;
     font-weight: 800;
     color: #6b42ff;
     margin-bottom: 6px;
 }

 .ppc-card p {
     font-size: 14px;
     color: #666;
     margin: 0;
 }

 .card1 {
     left: -20px;
     top: 30px;
 }

 .card2 {
     right: -15px;
     top: 160px;
 }

 .card3 {
     left: 60px;
     bottom: 10px;
 }

 /*=========================
DECORATION
=========================*/

 .ppc-image::before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     background: #f5f0ff;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: -1;
 }

 .ppc-image::after {
     content: "";
     position: absolute;
     width: 120px;
     height: 120px;
     border: 2px dashed #d6c7ff;
     border-radius: 50%;
     right: 40px;
     top: 0;
     z-index: -1;
 }

 /*==================================
RESPONSIVE
==================================*/

 @media(max-width:1200px) {

     .section-title {
         font-size: 46px;
     }

     .ppc-image::before {
         width: 360px;
         height: 360px;
     }

     .card1 {
         left: 0;
     }

     .card2 {
         right: 0;
     }

     .card3 {
         left: 30px;
     }

 }

 @media(max-width:991px) {

     .ppc-about {
         padding: 80px 0;
         text-align: center;
     }

     .section-title {
         font-size: 40px;
     }

     .section-desc {
         max-width: 700px;
         margin: auto;
         margin-bottom: 30px;
     }

     .ppc-btn {
         margin-top: 20px;
     }

     .ppc-image {
         margin-top: 60px;
     }

     .ppc-feature {
         justify-content: center;
     }

     .ppc-card {
         position: relative;
         display: inline-block;
         margin: 12px;
         left: auto;
         right: auto;
         top: auto;
         bottom: auto;
         min-width: 180px;
     }

     .ppc-image::before {
         width: 320px;
         height: 320px;
     }

 }

 @media(max-width:768px) {

     .ppc-about {
         padding: 70px 0;
     }

     .section-tag {
         font-size: 13px;
         padding: 8px 18px;
     }

     .section-title {
         font-size: 34px;
         line-height: 1.3;
     }

     .section-desc {
         font-size: 15px;
         line-height: 28px;
     }

     .ppc-feature {
         justify-content: flex-start;
         font-size: 15px;
     }

     .ppc-btn {
         width: 100%;
         justify-content: center;
         padding: 15px 20px;
     }

     .ppc-image img {
         max-width: 100%;
     }

     .ppc-card {
         width: 100%;
         margin: 10px 0;
     }

     .ppc-image::before {
         display: none;
     }

     .ppc-image::after {
         display: none;
     }

     .card1 {
         left: -20px;
         top: 30px;
     }

     .card2 {
         right: -15px;
         top: 100px;
     }

     .card3 {
         left: 60px;
         bottom: 10px;
     }

     .ppc-card {
         display: none;
     }

 }

 @media(max-width:576px) {

     .section-title {
         font-size: 28px;
     }

     .section-desc {
         font-size: 14px;
         line-height: 25px;
     }

     .ppc-feature {
         font-size: 14px;
         padding: 8px 0;
     }

     .ppc-feature i {
         width: 28px;
         height: 28px;
         font-size: 12px;
     }

     .ppc-btn {
         font-size: 15px;
         padding: 14px;
     }

     .ppc-card {
         padding: 16px;
     }

     .ppc-card h5 {
         font-size: 24px;
     }

     .ppc-card p {
         font-size: 13px;
     }

     .ppc-about::before,
     .ppc-about::after {
         display: none;
     }

 }

 /*==================================
HOVER EFFECTS
==================================*/

 .ppc-card,
 .ppc-btn,
 .ppc-feature {
     transition: .35s;
 }

 .ppc-feature:hover {
     transform: translateX(8px);
     color: #6b42ff;
 }

 .ppc-feature:hover i {
     background: #ff8a00;
 }

 .ppc-image img {
     filter: drop-shadow(0 25px 40px rgba(107, 66, 255, .18));
 }

 .ppc-card:nth-child(2) {
     animation: cardOne 4s infinite ease-in-out;
 }

 .ppc-card:nth-child(3) {
     animation: cardTwo 5s infinite ease-in-out;
 }

 .ppc-card:nth-child(4) {
     animation: cardThree 6s infinite ease-in-out;
 }

 @keyframes cardOne {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 @keyframes cardTwo {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(10px);
     }
 }

 @keyframes cardThree {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }
 }

 /*==================================
AOS FIX
==================================*/

 [data-aos] {
     transition-duration: .9s !important;
 }

 html {
     scroll-behavior: smooth;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 a {
     text-decoration: none;
 }

 button:focus,
 a:focus {
     box-shadow: none;
     outline: none;
 }

 /* ============ppc second section===================== */

 /*====================================
PPC SERVICES
====================================*/

 .ppc-services-area {
     position: relative;
     padding: 20px 0;
     background: #fff;
     overflow: hidden;
 }

 .ppc-services-area::before {
     content: "";
     position: absolute;
     left: -180px;
     top: -180px;
     width: 420px;
     height: 420px;
     background: #f4edff;
     border-radius: 50%;
     z-index: 0;
 }

 .ppc-services-area::after {
     content: "";
     position: absolute;
     right: -180px;
     bottom: -180px;
     width: 380px;
     height: 380px;
     background: #fff4ea;
     border-radius: 50%;
     z-index: 0;
 }

 .ppc-services-area .container {
     position: relative;
     z-index: 2;
 }

 /*==========================
LEFT IMAGE
==========================*/

 .ppc-left {
     position: relative;
     text-align: center;
 }

 .ppc-left img {
     max-width: 100%;
     animation: floatImg 5s ease-in-out infinite;
     filter: drop-shadow(0 20px 45px rgba(107, 66, 255, .18));
 }

 @keyframes floatImg {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

     100% {
         transform: translateY(0);
     }
 }

 /*==========================
FLOATING BOX
==========================*/

 .floating-box {
     position: absolute;
     background: #fff;
     padding: 16px 22px;
     border-radius: 18px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
     text-align: center;
     min-width: 140px;
     transition: .35s;
 }

 .floating-box:hover {
     transform: translateY(-8px);
 }

 .floating-box h4 {
     font-size: 28px;
     font-weight: 800;
     color: #6b42ff;
     margin-bottom: 5px;
 }

 .floating-box span {
     font-size: 14px;
     font-weight: 600;
     color: #666;
 }

 .one {
     left: -15px;
     top: 40px;
 }

 .two {
     right: -10px;
     top: 180px;
 }

 .three {
     left: 60px;
     bottom: 0;
 }

 /*==========================
SECTION TITLE
==========================*/

 .section-tag {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 22px;
     border-radius: 50px;
     background: #f3edff;
     font-size: 14px;
     font-weight: 700;
     color: #6b42ff;
     margin-bottom: 18px;
 }

 .section-tag i {
     color: #ff8a00;
 }

 .section-title {
     font-size: 50px;
     font-weight: 800;
     line-height: 1.25;
     color: #18193f;
     margin-bottom: 20px;
 }

 .section-title span {
     color: #6b42ff;
 }

 .section-title strong {
     display: block;
     font-size: 32px;
     margin-top: 8px;
     color: #ff8a00;
 }

 .section-desc {
     font-size: 17px;
     line-height: 31px;
     color: #666;
     margin-bottom: 35px;
 }

 /*==========================
SERVICE ITEM
==========================*/

 .ppc-item {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     padding: 18px;
     border-radius: 18px;
     background: #fff;
     margin-bottom: 18px;
     box-shadow: 0 12px 35px rgba(0, 0, 0, .05);
     transition: .35s;
 }

 .ppc-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 22px 45px rgba(107, 66, 255, .12);
 }

 .ppc-item .icon {
     width: 62px;
     height: 62px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: #fff;
     flex-shrink: 0;
 }

 .icon.purple {
     background: #6b42ff;
 }

 .icon.orange {
     background: #ff8a00;
 }

 .icon.green {
     background: #26c281;
 }

 .icon.blue {
     background: #1877f2;
 }

 .icon.sky {
     background: #0a66c2;
 }

 .ppc-item h5 {
     font-size: 20px;
     font-weight: 700;
     color: #1a1c42;
     margin-bottom: 6px;
 }

 .ppc-item p {
     font-size: 15px;
     line-height: 26px;
     color: #666;
     margin: 0;
 }

 /*==========================
BUTTON
==========================*/

 .ppc-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 36px;
     border-radius: 50px;
     background: linear-gradient(90deg, #6b42ff, #8e68ff);
     color: #fff;
     font-weight: 700;
     transition: .35s;
     box-shadow: 0 15px 35px rgba(107, 66, 255, .25);
 }

 .ppc-btn:hover {
     transform: translateY(-5px);
     color: #fff;
 }

 .ppc-btn i {
     transition: .35s;
 }

 .ppc-btn:hover i {
     transform: translateX(6px);
 }

 /*==================================
RESPONSIVE
==================================*/

 @media(max-width:1200px) {

     .section-title {
         font-size: 42px;
     }

     .section-title strong {
         font-size: 28px;
     }

     .floating-box {
         min-width: 120px;
     }

 }

 @media(max-width:991px) {

     .ppc-services-area {
         padding: 10px 0;
         text-align: center;
     }

     .ppc-left {
         margin-bottom: 60px;
     }

     .section-title {
         font-size: 38px;
     }

     .section-desc {
         max-width: 700px;
         margin: auto auto 35px;
     }

     .ppc-item {
         text-align: left;
     }

     .floating-box {
         position: relative;
         display: inline-block;
         left: auto;
         right: auto;
         top: auto;
         bottom: auto;
         margin: 10px;
     }

     .ppc-btn {
         margin-top: 20px;
     }

 }

 @media(max-width:768px) {

     .ppc-services-area {
         padding: 70px 0;
     }

     .section-tag {
         font-size: 13px;
         padding: 8px 18px;
     }

     .section-title {
         font-size: 32px;
     }

     .section-title strong {
         font-size: 24px;
     }

     .section-desc {
         font-size: 15px;
         line-height: 28px;
     }

     .ppc-item {
         padding: 15px;
     }

     .ppc-item .icon {
         width: 55px;
         height: 55px;
         font-size: 22px;
     }

     .ppc-item h5 {
         font-size: 18px;
     }

     .ppc-item p {
         font-size: 14px;
         line-height: 24px;
     }

     .ppc-btn {
         width: 100%;
         justify-content: center;
     }

 }

 @media(max-width:576px) {

     .ppc-services-area {
         padding: 60px 0;
     }

     .section-title {
         font-size: 28px;
         line-height: 1.3;
     }

     .section-title strong {
         font-size: 20px;
     }

     .section-desc {
         font-size: 14px;
         line-height: 25px;
     }

     .ppc-item {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .ppc-item .icon {
         margin-bottom: 10px;
     }

     .floating-box {
         width: 100%;
         margin: 10px 0;
     }

     .ppc-btn {
         padding: 15px;
         font-size: 15px;
     }

     .ppc-services-area::before,
     .ppc-services-area::after {
         display: none;
     }

 }

 /*==================================
HOVER EFFECT
==================================*/

 .ppc-item {
     overflow: hidden;
     position: relative;
 }

 .ppc-item::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 4px;
     height: 100%;
     background: #6b42ff;
     transform: scaleY(0);
     transition: .35s;
 }

 .ppc-item:hover::before {
     transform: scaleY(1);
 }

 .ppc-item:hover .icon {
     transform: rotate(10deg) scale(1.08);
 }

 .ppc-item .icon {
     transition: .35s;
 }

 .ppc-item:hover h5 {
     color: #6b42ff;
 }

 /*==================================
FLOATING ANIMATION
==================================*/

 .one {
     animation: floatOne 4s infinite ease-in-out;
 }

 .two {
     animation: floatTwo 5s infinite ease-in-out;
 }

 .three {
     animation: floatThree 6s infinite ease-in-out;
 }

 @keyframes floatOne {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 @keyframes floatTwo {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(10px);
     }
 }

 @keyframes floatThree {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }
 }

 /*==================================
IMAGE EFFECT
==================================*/

 .ppc-left::before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     background: #f4efff;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: -1;
 }

 .ppc-left::after {
     content: "";
     position: absolute;
     width: 130px;
     height: 130px;
     border: 2px dashed #d7c8ff;
     border-radius: 50%;
     right: 10px;
     top: 20px;
     z-index: -1;
     animation: rotateBorder 18s linear infinite;
 }

 @keyframes rotateBorder {

     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }

 }

 /*==================================
BUTTON
==================================*/

 .ppc-btn {
     overflow: hidden;
     position: relative;
 }

 .ppc-btn::before {
     content: "";
     position: absolute;
     left: -120%;
     top: 0;
     width: 120%;
     height: 100%;
     background: rgba(255, 255, 255, .25);
     transform: skewX(-30deg);
     transition: .6s;
 }

 .ppc-btn:hover::before {
     left: 120%;
 }

 /*==================================
AOS FIX
==================================*/

 [data-aos] {
     transition-duration: .9s !important;
 }

 html {
     scroll-behavior: smooth;
 }

 img {
     max-width: 100%;
     display: block;
     height: auto;
 }

 a {
     text-decoration: none;
 }

 button:focus,
 a:focus {
     outline: none;
     box-shadow: none;
 }


 /* ===================leads pages=================== */

 /*=====================================
LEAD ABOUT
=====================================*/

 .lead-about {
     position: relative;
     padding: 100px 0;
     background: #fff;
     overflow: hidden;
 }

 .lead-about::before {
     content: "";
     position: absolute;
     left: -180px;
     top: -180px;
     width: 420px;
     height: 420px;
     background: #eef1ff;
     border-radius: 50%;
     z-index: 0;
 }

 .lead-about::after {
     content: "";
     position: absolute;
     right: -160px;
     bottom: -160px;
     width: 360px;
     height: 360px;
     background: #fff4e8;
     border-radius: 50%;
     z-index: 0;
 }

 .lead-about .container {
     position: relative;
     z-index: 2;
 }

 /*==========================
SECTION TITLE
==========================*/

 .section-tag {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 22px;
     background: #eef1ff;
     color: #6B42FF;
     font-size: 14px;
     font-weight: 700;
     border-radius: 50px;
     margin-bottom: 20px;
 }

 .section-tag i {
     color: #ff9800;
 }

 .section-title {
     font-size: 52px;
     font-weight: 800;
     line-height: 1.2;
     color: #162D6B;
     margin-bottom: 20px;
 }

 .section-title span {
     color: #6B42FF;
 }

 .section-desc {
     font-size: 17px;
     line-height: 32px;
     color: #666;
     margin-bottom: 30px;
 }

 /*==========================
LEAD LIST
==========================*/

 .lead-list {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
 }

 .lead-item {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 16px;
     font-weight: 600;
     color: #222;
     transition: .35s;
 }

 .lead-item i {
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #6B42FF;
     color: #fff;
     font-size: 14px;
     flex-shrink: 0;
 }

 .lead-item:hover {
     transform: translateX(8px);
     color: #6B42FF;
 }

 /*==========================
BUTTON
==========================*/

 .lead-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 16px 36px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     border-radius: 50px;
     color: #fff;
     font-weight: 700;
     box-shadow: 0 15px 35px rgba(107, 66, 255, .25);
     transition: .4s;
 }

 .lead-btn:hover {
     transform: translateY(-6px);
     color: #fff;
 }

 .lead-btn i {
     transition: .3s;
 }

 .lead-btn:hover i {
     transform: translateX(6px);
 }

 /*==========================
RIGHT IMAGE
==========================*/

 .lead-right {
     position: relative;
     text-align: center;
 }

 .lead-right img {
     max-width: 100%;
     animation: leadFloat 5s ease-in-out infinite;
     filter: drop-shadow(0 25px 45px rgba(107, 66, 255, .20));
 }

 @keyframes leadFloat {

     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

     100% {
         transform: translateY(0);
     }

 }

 /*==========================
FLOATING BOX
==========================*/

 .lead-box {
     position: absolute;
     background: #fff;
     padding: 18px 24px;
     border-radius: 18px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
     text-align: center;
     min-width: 170px;
     transition: .35s;
 }

 .lead-box:hover {
     transform: translateY(-8px);
 }

 .lead-box h4 {
     font-size: 30px;
     font-weight: 800;
     color: #6B42FF;
     margin-bottom: 6px;
 }

 .lead-box span {
     font-size: 14px;
     font-weight: 600;
     color: #666;
 }

 .lead-box.one {
     left: -15px;
     top: 40px;
 }

 .lead-box.two {
     right: -10px;
     top: 170px;
 }

 .lead-box.three {
     left: 60px;
     bottom: 10px;
 }

 .lead-right::before {
     content: "";
     position: absolute;
     width: 430px;
     height: 430px;
     background: #f3f0ff;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: -1;
 }

 .lead-right::after {
     content: "";
     position: absolute;
     width: 130px;
     height: 130px;
     border: 2px dashed #d9c9ff;
     border-radius: 50%;
     right: 20px;
     top: 10px;
     animation: rotateBorder 18s linear infinite;
     z-index: -1;
 }

 @keyframes rotateBorder {

     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }

 }

 /*=====================================
LEAD SERVICES
=====================================*/

 .lead-services {
     position: relative;
     padding: 100px 0;
     background: #f8f9ff;
     overflow: hidden;
 }

 .lead-services::before {
     content: "";
     position: absolute;
     left: -180px;
     bottom: -180px;
     width: 420px;
     height: 420px;
     background: #eef2ff;
     border-radius: 50%;
     z-index: 0;
 }

 .lead-services .container {
     position: relative;
     z-index: 2;
 }

 /*==========================
SERVICE CARD
==========================*/

 .lead-card {
     background: #fff;
     padding: 30px 25px;
     border-radius: 25px;
     text-align: center;
     height: 100%;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
 }

 .lead-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     transform: scaleX(0);
     transition: .35s;
     transform-origin: left;
 }

 .lead-card:hover::before {
     transform: scaleX(1);
 }

 .lead-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 25px 60px rgba(107, 66, 255, .15);
 }

 .lead-icon {
     height: 85px;
     margin: auto;
     margin-bottom: 22px;
     border-radius: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 34px;
     color: #fff;
 }

 .lead-icon.purple {
     background: #6B42FF;
 }

 .lead-icon.orange {
     background: #ff9800;
 }

 .lead-icon.green {
     background: #20bf6b;
 }

 .lead-icon.blue {
     background: #1d8cf8;
 }

 .lead-card h4 {
     font-size: 24px;
     font-weight: 700;
     color: #162D6B;
     margin-bottom: 15px;
 }

 .lead-card p {
     font-size: 15px;
     line-height: 28px;
     color: #666;
     margin: 0;
 }

 /* Tablet */
 @media(max-width:991px) {

     .lead-card {
         padding: 28px 20px;
     }

 }


 /* Mobile */
 @media(max-width:576px) {

     .lead-services .row {
         justify-content: center;
         gap: 15px;
     }


     .lead-services .col-12 {

         max-width: 350px;
         margin: auto;

     }


     .lead-card {

         padding: 35px 25px;
         border-radius: 22px;

     }

 }

 /*=====================================
PROCESS
=====================================*/

 .lead-process {
     padding: 100px 0;
     background: #fff;
     position: relative;
 }

 .process-list {
     margin-top: 35px;
 }

 .process-item {
     display: flex;
     gap: 20px;
     margin-bottom: 25px;
     padding-bottom: 25px;
     border-bottom: 1px solid #ececec;
     transition: .35s;
 }

 .process-item:last-child {
     margin-bottom: 0;
     border: none;
 }

 .process-item:hover {
     padding-left: 10px;
 }

 .process-item .number {
     width: 65px;
     height: 65px;
     background: linear-gradient(135deg, #6B42FF, #FF4D94);
     color: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     font-weight: 700;
     flex-shrink: 0;
 }

 .process-item h5 {
     font-size: 22px;
     font-weight: 700;
     color: #162D6B;
     margin-bottom: 8px;
 }

 .process-item p {
     margin: 0;
     font-size: 15px;
     line-height: 28px;
     color: #666;
 }

 /*=====================================
CTA
=====================================*/

 .lead-cta {
     padding: 90px 0;
     background: #fff;
 }

 .lead-cta-box {
     background: linear-gradient(135deg, #162D6B, #3149A5);
     padding: 60px;
     border-radius: 35px;
     position: relative;
     overflow: hidden;
 }

 .lead-cta-box::before {
     content: "";
     position: absolute;
     right: -80px;
     top: -80px;
     width: 250px;
     height: 250px;
     background: rgba(255, 255, 255, .06);
     border-radius: 50%;
 }

 .lead-cta-box::after {
     content: "";
     position: absolute;
     left: -60px;
     bottom: -60px;
     width: 180px;
     height: 180px;
     background: rgba(255, 255, 255, .05);
     border-radius: 50%;
 }

 .lead-cta-box h2 {
     font-size: 42px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 15px;
 }

 .lead-cta-box p {
     font-size: 17px;
     line-height: 30px;
     color: #e7e7e7;
     margin: 0;
 }

 .lead-cta .lead-btn {
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     padding: 18px 42px;
     font-size: 17px;
 }

 /*====================================
RESPONSIVE
====================================*/

 @media(max-width:1200px) {

     .section-title {
         font-size: 44px;
     }

     .lead-right::before {
         width: 360px;
         height: 360px;
     }

     .lead-box {
         min-width: 145px;
     }

     .lead-cta-box h2 {
         font-size: 36px;
     }

 }

 @media(max-width:991px) {

     .lead-about,
     .lead-services,
     .lead-process,
     .lead-cta {
         padding: 80px 0;
         text-align: center;
     }

     .section-title {
         font-size: 38px;
     }

     .section-desc {
         max-width: 700px;
         margin: auto auto 30px;
     }

     .lead-list {
         grid-template-columns: 1fr;
     }

     .lead-item {
         justify-content: center;
     }

     .lead-right {
         margin-top: 50px;
     }

     .lead-box {
         position: relative;
         display: inline-block;
         left: auto !important;
         right: auto !important;
         top: auto !important;
         bottom: auto !important;
         margin: 10px;
     }

     .process-item {
         text-align: left;
     }

     .lead-cta-box {
         padding: 45px;
         text-align: center;
     }

 }

 @media(max-width:768px) {

     .section-title {
         font-size: 32px;
         line-height: 1.3;
     }

     .section-desc {
         font-size: 15px;
         line-height: 28px;
     }

     .lead-card {
         padding: 28px 22px;
     }

     .lead-icon {
         width: 70px;
         height: 70px;
         font-size: 28px;
     }

     .lead-card h4 {
         font-size: 20px;
     }

     .lead-card p {
         font-size: 14px;
         line-height: 25px;
     }

     .process-item {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .process-item .number {
         margin-bottom: 12px;
     }

     .process-item h5 {
         font-size: 20px;
     }

     .process-item p {
         font-size: 14px;
         line-height: 25px;
     }

     .lead-cta-box h2 {
         font-size: 30px;
     }

     .lead-cta-box p {
         font-size: 15px;
     }

     .lead-btn {
         width: 100%;
         justify-content: center;
     }

     .lead-right::before,
     .lead-right::after {
         display: none;
     }

 }

 @media(max-width:576px) {

     .lead-about,
     .lead-services,
     .lead-process,
     .lead-cta {
         padding: 60px 0;
     }

     .section-tag {
         font-size: 12px;
         padding: 8px 18px;
     }

     .section-title {
         font-size: 28px;
     }

     .section-desc {
         font-size: 14px;
         line-height: 24px;
     }

     .lead-item {
         font-size: 14px;
         justify-content: flex-start;
     }

     .lead-item i {
         width: 28px;
         height: 28px;
         font-size: 12px;
     }

     .lead-box {
         width: 100%;
         margin: 10px 0;
     }

     .lead-box h4 {
         font-size: 24px;
     }

     .lead-box span {
         font-size: 13px;
     }

     .lead-card {
         padding: 24px 20px;
     }

     .lead-icon {
         width: 65px;
         height: 65px;
         font-size: 24px;
         border-radius: 18px;
     }

     .process-item .number {
         width: 55px;
         height: 55px;
         font-size: 18px;
     }

     .lead-cta-box {
         padding: 35px 25px;
         border-radius: 25px;
     }

     .lead-cta-box h2 {
         font-size: 24px;
     }

     .lead-cta-box p {
         font-size: 14px;
         line-height: 24px;
     }

     .lead-btn {
         padding: 14px 22px;
         font-size: 15px;
     }

 }

 /*====================================
HOVER EFFECTS
====================================*/

 .lead-card,
 .lead-box,
 .process-item,
 .lead-btn {
     transition: .35s;
 }

 .lead-card:hover .lead-icon {
     transform: rotate(8deg) scale(1.08);
 }

 .lead-icon {
     transition: .35s;
 }

 .process-item:hover .number {
     transform: scale(1.1);
     box-shadow: 0 12px 30px rgba(107, 66, 255, .25);
 }

 .process-item .number {
     transition: .35s;
 }

 .lead-btn {
     position: relative;
     overflow: hidden;
 }

 .lead-btn::before {
     content: "";
     position: absolute;
     left: -120%;
     top: 0;
     width: 120%;
     height: 100%;
     background: rgba(255, 255, 255, .25);
     transform: skewX(-30deg);
     transition: .7s;
 }

 .lead-btn:hover::before {
     left: 120%;
 }

 /*====================================
FLOATING ANIMATION
====================================*/

 .lead-box.one {
     animation: leadFloatOne 4s infinite ease-in-out;
 }

 .lead-box.two {
     animation: leadFloatTwo 5s infinite ease-in-out;
 }

 .lead-box.three {
     animation: leadFloatThree 6s infinite ease-in-out;
 }

 @keyframes leadFloatOne {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }

 }

 @keyframes leadFloatTwo {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(10px);
     }

 }

 @keyframes leadFloatThree {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

 }

 /*====================================
GLOBAL FIX
====================================*/

 img {
     max-width: 100%;
     display: block;
     height: auto;
 }

 html {
     scroll-behavior: smooth;
 }

 [data-aos] {
     transition-duration: .9s !important;
 }

 button:focus,
 a:focus {
     outline: none;
     box-shadow: none;
 }

 .lead-card,
 .process-item,
 .lead-box {
     will-change: transform;
 }

 /* ====================model form css================= */

 /*====================================
CONSULTATION MODAL
====================================*/

 .consult-modal {
     border: 0;
     border-radius: 28px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
     position: relative;
 }

 .consult-close {
     position: absolute;
     right: 18px;
     top: 18px;
     z-index: 99;
     background: #fff;
     border-radius: 50%;
     padding: 12px;
     opacity: 1;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
     transition: .35s;
 }

 .consult-close:hover {
     transform: rotate(90deg);
     background: #6B42FF;
     filter: invert(1);
 }

 /*==========================
LEFT PANEL
==========================*/

 .consult-left {
     height: 100%;
     padding: 50px 40px;
     background: linear-gradient(160deg, #162D6B, #3149A5, #6B42FF);
     position: relative;
     overflow: hidden;
     color: #fff;
 }

 .consult-left::before {
     content: "";
     position: absolute;
     width: 260px;
     height: 260px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .06);
     top: -120px;
     right: -120px;
 }

 .consult-left::after {
     content: "";
     position: absolute;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .05);
     bottom: -120px;
     left: -120px;
 }

 .offer-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 9px 18px;
     background: rgba(255, 255, 255, .12);
     border-radius: 40px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 25px;
     backdrop-filter: blur(12px);
 }

 .offer-badge i {
     color: #FFD34D;
 }

 .consult-left h2 {
     font-size: 48px;
     font-weight: 800;
     line-height: 1.15;
     margin-bottom: 20px;
     position: relative;
     z-index: 2;
 }

 .consult-left h2 span {
     display: block;
     background: linear-gradient(90deg, #ffffff, #ffb5d5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .consult-left p {
     font-size: 16px;
     line-height: 30px;
     color: #eef1ff;
     margin-bottom: 35px;
     position: relative;
     z-index: 2;
 }

 /*==========================
FEATURE
==========================*/

 .consult-feature {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 22px;
     position: relative;
     z-index: 2;
 }

 .feature-icon {
     width: 55px;
     height: 55px;
     border-radius: 16px;
     background: rgba(255, 255, 255, .10);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     color: #fff;
     backdrop-filter: blur(10px);
     flex-shrink: 0;
     transition: .35s;
 }

 .consult-feature:hover .feature-icon {
     background: #fff;
     color: #6B42FF;
     transform: translateY(-5px);
 }

 .consult-feature h5 {
     font-size: 19px;
     font-weight: 700;
     margin-bottom: 4px;
     color: #fff;
 }

 .consult-feature span {
     font-size: 14px;
     color: #dfe6ff;
 }

 /*==========================
COUNTER
==========================*/

 .consult-counter {
     margin-top: 40px;
     display: flex;
     justify-content: space-between;
     gap: 15px;
     background: #fff;
     border-radius: 22px;
     padding: 22px;
     position: relative;
     z-index: 2;
 }

 .consult-counter div {
     flex: 1;
     text-align: center;
 }

 .consult-counter h3 {
     font-size: 30px;
     font-weight: 800;
     color: #162D6B;
     margin-bottom: 5px;
 }

 .consult-counter p {
     margin: 0;
     font-size: 14px;
     color: #666;
     line-height: 20px;
 }

 /*====================================
RIGHT FORM
====================================*/

 .consult-right {
     padding: 45px;
     background: #fff;
     height: 100%;
 }

 .consult-right h3 {
     font-size: 34px;
     font-weight: 800;
     color: #162D6B;
     margin-bottom: 10px;
 }

 .consult-right>p {
     font-size: 15px;
     line-height: 28px;
     color: #666;
     margin-bottom: 30px;
 }

 /*==========================
LABEL
==========================*/

 .consult-right label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 8px;
     color: #162D6B;
 }

 /*==========================
INPUT
==========================*/

 .consult-right .form-control,
 .consult-right .form-select {
     height: 56px;
     border: 2px solid #edf0ff;
     border-radius: 14px;
     padding: 0 18px;
     font-size: 15px;
     box-shadow: none;
     transition: .35s;
 }

 .consult-right textarea.form-control {
     height: 130px;
     padding-top: 15px;
     resize: none;
 }

 .consult-right .form-control:focus,
 .consult-right .form-select:focus {
     border-color: #6B42FF;
     box-shadow: 0 0 0 4px rgba(107, 66, 255, .10);
 }

 /*==========================
INFO BOX
==========================*/

 .consult-info {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px;
     border-radius: 16px;
     background: #f8f9ff;
     transition: .35s;
     height: 100%;
 }

 .consult-info:hover {
     background: #eef1ff;
     transform: translateY(-5px);
 }

 .consult-info i {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #6B42FF, #FF4D94);
     color: #fff;
     font-size: 18px;
     flex-shrink: 0;
 }

 .consult-info h6 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 4px;
     color: #162D6B;
 }

 .consult-info p {
     margin: 0;
     font-size: 13px;
     color: #777;
 }

 /*==========================
SUBMIT BUTTON
==========================*/

 .consult-submit {
     width: 100%;
     height: 60px;
     border: none;
     border-radius: 50px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     color: #fff;
     font-size: 17px;
     font-weight: 700;
     transition: .35s;
     position: relative;
     overflow: hidden;
 }

 .consult-submit:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 35px rgba(107, 66, 255, .25);
 }

 .consult-submit i {
     margin-right: 10px;
 }

 .consult-submit::before {
     content: "";
     position: absolute;
     left: -120%;
     top: 0;
     width: 120%;
     height: 100%;
     background: rgba(255, 255, 255, .25);
     transform: skewX(-25deg);
     transition: .7s;
 }

 .consult-submit:hover::before {
     left: 120%;
 }

 /*==========================
NOTE
==========================*/

 .consult-note {
     margin: 0;
     font-size: 13px;
     color: #666;
     text-align: center;
 }

 .consult-note i {
     color: #20bf6b;
     margin-right: 5px;
 }

 /*==========================
MODAL BACKDROP
==========================*/

 .modal-backdrop.show {
     opacity: .75;
     backdrop-filter: blur(6px);
 }

 /*==========================
RESPONSIVE
==========================*/

 @media(max-width:991px) {

     .consult-left {
         padding: 35px;
         text-align: center;
     }

     .consult-counter {
         margin-top: 30px;
     }

     .consult-right {
         padding: 35px;
     }

     .consult-left h2 {
         font-size: 36px;
     }

 }

 @media(max-width:768px) {

     .consult-right {
         padding: 25px;
     }

     .consult-left {
         padding: 30px 25px;
     }

     .consult-left h2 {
         font-size: 30px;
     }

     .consult-counter {
         flex-direction: column;
         gap: 15px;
     }

     .consult-feature {
         text-align: left;
     }

     .consult-info {
         margin-bottom: 15px;
     }

 }

 @media(max-width:576px) {

     .consult-right h3 {
         font-size: 26px;
     }

     .consult-left h2 {
         font-size: 26px;
     }

     .consult-right .form-control,
     .consult-right .form-select {
         height: 52px;
         font-size: 14px;
     }

     .consult-submit {
         height: 55px;
         font-size: 15px;
     }

     .consult-counter h3 {
         font-size: 24px;
     }

 }

 /*==========================
AOS FIX
==========================*/

 [data-aos] {
     transition-duration: .9s !important;
 }

 html {
     scroll-behavior: smooth;
 }

 .consult-modal {
     animation: zoomModal .35s ease;
 }

 @keyframes zoomModal {

     0% {
         transform: scale(.85);
         opacity: 0;
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }

 }


 /* ======================social media ===================== */
 /*=====================================
SOCIAL HERO
=====================================*/
 /*=====================================
SOCIAL HERO
=====================================*/

 .social-breadcrumb {
     position: relative;
     padding: 120px 0 100px;
     overflow: hidden;
     background: #fff;
     background-image: var(--bg-img);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 .social-breadcrumb .container {
     position: relative;
     z-index: 5;
 }

 .social-breadcrumb .row {
     align-items: center;
     min-height: 650px;
 }

 /*=====================================
LEFT CONTENT
=====================================*/

 .social-tag {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 22px;
     background: #eef2ff;
     border-radius: 40px;
     color: #6B42FF;
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 20px;
 }

 .social-tag i {
     color: #ff9800;
 }

 .social-title {
     font-size: 64px;
     font-weight: 800;
     line-height: 1.15;
     color: #162D6B;
     margin-bottom: 25px;
 }

 .social-title span {
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .social-desc {
     font-size: 17px;
     line-height: 32px;
     color: #666;
     margin-bottom: 35px;
     max-width: 620px;
 }

 /*=====================================
BUTTONS
=====================================*/

 .social-btns {
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
 }

 .social-btn-one {
     padding: 16px 36px;
     border-radius: 50px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     color: #fff;
     font-weight: 700;
     transition: .35s;
     box-shadow: 0 18px 40px rgba(107, 66, 255, .18);
 }

 .social-btn-one:hover {
     color: #fff;
     transform: translateY(-6px);
 }

 .social-btn-two {
     padding: 16px 36px;
     border-radius: 50px;
     border: 2px solid #6B42FF;
     background: #fff;
     color: #6B42FF;
     font-weight: 700;
     transition: .35s;
 }

 .social-btn-two:hover {
     background: #6B42FF;
     color: #fff;
 }

 /*=====================================
RIGHT IMAGE
=====================================*/

 .hero-dashboard {
     position: relative;
     max-width: 560px;
     margin-left: auto;
 }

 .hero-dashboard img {
     width: 100%;
     display: block;
     animation: floatHero 5s infinite ease-in-out;
     filter: drop-shadow(0 25px 45px rgba(107, 66, 255, .18));
     border-radius: 25px;
 }

 @keyframes floatHero {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

 }

 /*=====================================
FLOATING CARDS
=====================================*/

 .floating-card {
     position: absolute;
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 16px 18px;
     background: #fff;
     border-radius: 18px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
     min-width: 210px;
     transition: .35s;
 }

 .floating-card:hover {
     transform: translateY(-8px);
 }

 .floating-card i {
     width: 55px;
     height: 55px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 15px;
     background: linear-gradient(135deg, #6B42FF, #FF4D94);
     color: #fff;
     font-size: 22px;
 }

 .floating-card h5 {
     font-size: 24px;
     font-weight: 800;
     margin-bottom: 2px;
     color: #162D6B;
 }

 .floating-card span {
     font-size: 13px;
     color: #777;
 }

 .card-one {
     top: 30px;
     left: -70px;
 }

 .card-two {
     top: 170px;
     right: -60px;
 }

 .card-three {
     bottom: 120px;
     left: -50px;
 }

 .card-four {
     bottom: 0;
     right: -40px;
 }

 /*=====================================
BACKGROUND SHAPES
=====================================*/

 .shape-one {
     position: absolute;
     width: 350px;
     height: 350px;
     background: #eef2ff;
     border-radius: 50%;
     left: -150px;
     top: -150px;
 }

 .shape-two {
     position: absolute;
     width: 260px;
     height: 260px;
     background: #fff2e8;
     border-radius: 50%;
     right: -120px;
     bottom: -120px;
 }

 .shape-three {
     position: absolute;
     top: 100px;
     right: 120px;
     width: 150px;
     height: 150px;
     background-image: radial-gradient(#cab4ff 2px, transparent 2px);
     background-size: 14px 14px;
     opacity: .7;
 }

 /*=====================================
RESPONSIVE
=====================================*/

 @media(max-width:991px) {

     .social-breadcrumb {
         padding: 80px 0;
         text-align: center;
     }

     .social-title {
         font-size: 46px;
     }

     .social-desc {
         margin: auto;
         margin-bottom: 30px;
     }

     .social-btns {
         justify-content: center;
     }

     .hero-dashboard {
         margin: 60px auto 0;
     }

     .floating-card {
         position: relative;
         left: auto !important;
         right: auto !important;
         top: auto !important;
         bottom: auto !important;
         margin: 15px auto;
         max-width: 260px;
     }

 }

 @media(max-width:768px) {

     .social-title {
         font-size: 36px;
     }

     .social-desc {
         font-size: 15px;
         line-height: 28px;
     }

     .social-btns {
         flex-direction: column;
     }

     .social-btn-one,
     .social-btn-two {
         width: 100%;
     }

 }

 @media(max-width:576px) {

     .social-title {
         font-size: 30px;
     }

     .social-tag {
         font-size: 12px;
         padding: 8px 18px;
     }

     .hero-dashboard {
         max-width: 100%;
     }

 }

 .social-hero {
     position: relative;
     padding: 100px 0;
     background: #fff;
     overflow: hidden;
 }

 .social-hero::before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     background: #eef2ff;
     border-radius: 50%;
     left: -180px;
     top: -180px;
 }

 .social-hero::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     background: #fff2e8;
     border-radius: 50%;
     right: -150px;
     bottom: -150px;
 }

 .social-hero .container {
     position: relative;
     z-index: 2;
 }

 /*=====================================
BUTTONS
=====================================*/

 .social-btns {
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
     margin-top: 35px;
 }

 .social-btn-one {
     padding: 16px 36px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     border-radius: 50px;
     color: #fff;
     font-weight: 700;
     transition: .35s;
     box-shadow: 0 18px 40px rgba(107, 66, 255, .20);
 }

 .social-btn-one:hover {
     transform: translateY(-6px);
     color: #fff;
 }

 .social-btn-two {
     padding: 16px 36px;
     border: 2px solid #6B42FF;
     border-radius: 50px;
     color: #6B42FF;
     font-weight: 700;
     background: #fff;
     transition: .35s;
 }

 .social-btn-two:hover {
     background: #6B42FF;
     color: #fff;
 }

 /*=====================================
SOCIAL DASHBOARD
=====================================*/

 .hero-dashboard {
     position: relative;
     text-align: center;
 }

 .hero-dashboard img {
     max-width: 100%;
     animation: floatHero 5s ease-in-out infinite;
     filter: drop-shadow(0 30px 45px rgba(107, 66, 255, .18));
 }

 @keyframes floatHero {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

 }

 /*=====================================
FLOATING CARDS
=====================================*/

 .floating-card {
     position: absolute;
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 15px 18px;
     background: #fff;
     border-radius: 18px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
     transition: .35s;
     min-width: 200px;
 }

 .floating-card:hover {
     transform: translateY(-8px);
 }

 .floating-card i {
     width: 55px;
     height: 55px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 16px;
     background: linear-gradient(135deg, #6B42FF, #FF4D94);
     color: #fff;
     font-size: 22px;
 }

 .floating-card h5 {
     font-size: 24px;
     font-weight: 800;
     color: #162D6B;
     margin-bottom: 3px;
 }

 .floating-card span {
     font-size: 13px;
     color: #777;
 }

 .card-one {
     top: 30px;
     left: -35px;
 }

 .card-two {
     top: 170px;
     right: -30px;
 }

 .card-three {
     left: -10px;
     bottom: 130px;
 }

 .card-four {
     right: 0;
     bottom: 10px;
 }

 /*=====================================
PLATFORMS
=====================================*/

 .social-platforms {
     padding: 25px 0;
     background: #f8f9ff;
 }

 .platform-box {
     background: #fff;
     padding: 40px 28px;
     border-radius: 24px;
     text-align: center;
     transition: .35s;
     height: 100%;
     box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
     position: relative;
     overflow: hidden;
 }

 .platform-box::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     transform: scaleX(0);
     transition: .35s;
     transform-origin: left;
 }

 .platform-box:hover::before {
     transform: scaleX(1);
 }

 .platform-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 55px rgba(107, 66, 255, .15);
 }

 .platform-icon {
     width: 90px;
     height: 90px;
     margin: auto;
     margin-bottom: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 38px;
     color: #fff;
 }

 .instagram .platform-icon {
     background: linear-gradient(135deg, #ff5f6d, #ffc371);
 }

 .facebook .platform-icon {
     background: #1877f2;
 }

 .linkedin .platform-icon {
     background: #0A66C2;
 }

 .youtube .platform-icon {
     background: #ff0000;
 }

 .twitter .platform-icon {
     background: #111827;
 }

 .pinterest .platform-icon {
     background: #E60023;
 }

 .platform-box h4 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 14px;
     color: #162D6B;
 }

 .platform-box p {
     font-size: 15px;
     line-height: 28px;
     color: #666;
     margin: 0;
 }


 /*=====================================
SOCIAL SERVICES
=====================================*/

 .social-services {
     padding: 100px 0;
     background: #fff;
     position: relative;
     overflow: hidden;
 }

 .social-services::before {
     content: "";
     position: absolute;
     width: 320px;
     height: 320px;
     background: #eef2ff;
     border-radius: 50%;
     left: -140px;
     bottom: -140px;
 }

 .social-services::after {
     content: "";
     position: absolute;
     width: 260px;
     height: 260px;
     background: #fff3e9;
     border-radius: 50%;
     right: -120px;
     top: -120px;
 }

 .social-services .container {
     position: relative;
     z-index: 2;
 }

 /*=====================================
SERVICE LIST
=====================================*/

 .service-list {
     margin-top: 35px;
 }

 .service-item {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     padding: 18px 22px;
     margin-bottom: 18px;
     background: #fff;
     border-radius: 18px;
     box-shadow: 0 12px 35px rgba(0, 0, 0, .05);
     transition: .35s;
 }

 .service-item:hover {
     transform: translateX(10px);
     box-shadow: 0 18px 45px rgba(107, 66, 255, .15);
 }

 .service-number {
     width: 58px;
     height: 58px;
     border-radius: 50%;
     background: linear-gradient(135deg, #6B42FF, #FF4D94);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 700;
     color: #fff;
     flex-shrink: 0;
 }

 .service-item h5 {
     font-size: 21px;
     font-weight: 700;
     color: #162D6B;
     margin-bottom: 6px;
 }

 .service-item p {
     margin: 0;
     font-size: 15px;
     line-height: 27px;
     color: #666;
 }

 /*=====================================
STATS GRID
=====================================*/

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 25px;
 }

 .stats-card {
     background: #fff;
     padding: 35px 25px;
     border-radius: 24px;
     text-align: center;
     box-shadow: 0 18px 40px rgba(0, 0, 0, .06);
     transition: .35s;
     position: relative;
     overflow: hidden;
 }

 .stats-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
 }

 .stats-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 55px rgba(107, 66, 255, .18);
 }

 .stats-card h3 {
     font-size: 42px;
     font-weight: 800;
     color: #6B42FF;
     margin-bottom: 10px;
 }

 .stats-card p {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     color: #555;
 }

 /*=====================================
MARKETING PROCESS
=====================================*/

 .marketing-process {
     padding: 100px 0;
     background: #f8f9ff;
 }

 .process-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
     margin-top: 60px;
 }

 .process-box {
     width: 210px;
     background: #fff;
     padding: 35px 25px;
     border-radius: 24px;
     text-align: center;
     box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
     transition: .35s;
 }

 .process-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 55px rgba(107, 66, 255, .15);
 }

 .process-icon {
     width: 80px;
     height: 80px;
     margin: auto;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: linear-gradient(135deg, #6B42FF, #FF4D94);
     color: #fff;
     font-size: 32px;
 }

 .process-box h4 {
     font-size: 22px;
     font-weight: 700;
     color: #162D6B;
     margin-bottom: 12px;
 }

 .process-box p {
     font-size: 15px;
     line-height: 27px;
     color: #666;
     margin: 0;
 }

 .process-arrow {
     font-size: 30px;
     color: #6B42FF;
 }

 /*=====================================
CTA
=====================================*/

 .social-cta {
     padding: 100px 0;
     background: #fff;
 }

 .cta-box {
     background: linear-gradient(135deg, #162D6B, #3149A5);
     padding: 60px;
     border-radius: 35px;
     position: relative;
     overflow: hidden;
 }

 .cta-box::before {
     content: "";
     position: absolute;
     width: 250px;
     height: 250px;
     background: rgba(255, 255, 255, .06);
     border-radius: 50%;
     right: -100px;
     top: -100px;
 }

 .cta-box::after {
     content: "";
     position: absolute;
     width: 180px;
     height: 180px;
     background: rgba(255, 255, 255, .05);
     border-radius: 50%;
     left: -80px;
     bottom: -80px;
 }

 .cta-box>* {
     position: relative;
     z-index: 2;
 }

 .cta-box h2 {
     font-size: 42px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 15px;
 }

 .cta-box p {
     font-size: 17px;
     line-height: 30px;
     color: #e9ecff;
     margin: 0;
 }

 .cta-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 18px 40px;
     border-radius: 50px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     color: #fff;
     font-weight: 700;
     transition: .35s;
     box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
 }

 .cta-btn:hover {
     transform: translateY(-6px);
     color: #fff;
 }

 /*=====================================
RESPONSIVE
=====================================*/

 @media(max-width:1200px) {

     .social-title {
         font-size: 52px;
     }

     .floating-card {
         min-width: 170px;
     }

     .cta-box h2 {
         font-size: 36px;
     }

     .process-box {
         width: 190px;
     }

 }

 @media(max-width:991px) {

     .social-hero,
     .social-platforms,
     .social-services,
     .marketing-process,
     .social-cta {
         padding: 80px 0;
     }

     .social-title {
         font-size: 42px;
         text-align: center;
     }

     .social-desc {
         text-align: center;
         margin: auto;
         margin-bottom: 30px;
     }

     .social-btns {
         justify-content: center;
     }

     .hero-dashboard {
         margin-top: 60px;
     }

     .floating-card {
         position: relative;
         left: auto !important;
         right: auto !important;
         top: auto !important;
         bottom: auto !important;
         margin: 12px auto;
         max-width: 280px;
     }

     .stats-grid {
         margin-top: 50px;
     }

     .process-wrapper {
         flex-direction: column;
     }

     .process-arrow {
         transform: rotate(90deg);
         font-size: 26px;
     }

     .cta-box {
         padding: 45px;
         text-align: center;
     }

     .cta-btn {
         margin-top: 25px;
     }

 }

 @media(max-width:768px) {

     .social-title {
         font-size: 34px;
     }

     .social-desc {
         font-size: 15px;
         line-height: 28px;
     }

     .social-btns {
         flex-direction: column;
     }

     .social-btn-one,
     .social-btn-two {
         width: 100%;
         text-align: center;
         justify-content: center;
     }

     .platform-box {
         padding: 30px 20px;
     }

     .platform-icon {
         width: 75px;
         height: 75px;
         font-size: 30px;
     }

     .platform-box h4 {
         font-size: 21px;
     }

     .platform-box p {
         font-size: 14px;
         line-height: 25px;
     }

     .service-item {
         padding: 16px;
     }

     .service-number {
         width: 50px;
         height: 50px;
         font-size: 18px;
     }

     .service-item h5 {
         font-size: 18px;
     }

     .service-item p {
         font-size: 14px;
         line-height: 24px;
     }

     .stats-grid {
         grid-template-columns: 1fr;
     }

     .process-box {
         width: 100%;
     }

     .cta-box h2 {
         font-size: 30px;
     }

     .cta-box p {
         font-size: 15px;
         line-height: 27px;
     }

 }

 @media(max-width:576px) {

     .social-hero,
     .social-platforms,
     .social-services,
     .marketing-process,
     .social-cta {
         padding: 60px 0;
     }

     .social-title {
         font-size: 28px;
         line-height: 1.3;
     }

     .social-btn-one,
     .social-btn-two {
         padding: 15px 20px;
         font-size: 15px;
     }

     .floating-card {
         padding: 12px;
         min-width: 100%;
     }

     .floating-card i {
         width: 45px;
         height: 45px;
         font-size: 18px;
     }

     .floating-card h5 {
         font-size: 18px;
     }

     .platform-icon {
         width: 65px;
         height: 65px;
         font-size: 26px;
     }

     .platform-box h4 {
         font-size: 19px;
     }

     .service-item {
         flex-direction: column;
         text-align: center;
     }

     .service-number {
         margin: auto;
     }

     .process-icon {
         width: 65px;
         height: 65px;
         font-size: 24px;
     }

     .process-box {
         padding: 28px 20px;
     }

     .process-box h4 {
         font-size: 20px;
     }

     .process-box p {
         font-size: 14px;
         line-height: 24px;
     }

     .cta-box {
         padding: 35px 25px;
         border-radius: 24px;
     }

     .cta-box h2 {
         font-size: 24px;
     }

     .cta-box p {
         font-size: 14px;
         line-height: 24px;
     }

     .cta-btn {
         width: 100%;
     }

 }

 /*=====================================
HOVER EFFECTS
=====================================*/

 .platform-icon,
 .service-number,
 .process-icon,
 .stats-card,
 .floating-card {
     transition: .35s;
 }

 .platform-box:hover .platform-icon {
     transform: rotate(10deg) scale(1.08);
 }

 .service-item:hover .service-number {
     transform: scale(1.08);
 }

 .process-box:hover .process-icon {
     transform: rotate(-10deg) scale(1.08);
 }

 .stats-card:hover h3 {
     color: #FF4D94;
 }

 .floating-card:hover i {
     transform: rotate(10deg);
 }

 /*=====================================
FLOATING ANIMATION
=====================================*/

 .card-one {
     animation: floatOne 4s infinite ease-in-out;
 }

 .card-two {
     animation: floatTwo 5s infinite ease-in-out;
 }

 .card-three {
     animation: floatThree 6s infinite ease-in-out;
 }

 .card-four {
     animation: floatFour 4.5s infinite ease-in-out;
 }

 @keyframes floatOne {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 @keyframes floatTwo {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(8px);
     }
 }

 @keyframes floatThree {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 @keyframes floatFour {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(10px);
     }
 }

 /*=====================================
GLOBAL FIX
=====================================*/

 [data-aos] {
     transition-duration: .9s !important;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 html {
     scroll-behavior: smooth;
 }

 button:focus,
 a:focus {
     outline: none;
     box-shadow: none;
 }

 .platform-box,
 .service-item,
 .stats-card,
 .process-box,
 .floating-card {
     will-change: transform;
 }

 /* =============performance marketing=============== */

 /*=====================================
PERFORMANCE HERO
=====================================*/

 .performance-hero {
     position: relative;
     padding: 120px 0 140px;
     background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
     overflow: hidden;
 }

 .performance-hero::before {
     content: "";
     position: absolute;
     left: -180px;
     top: -180px;
     width: 450px;
     height: 450px;
     border-radius: 50%;
     background: linear-gradient(135deg, #6B42FF, #8D74FF);
     opacity: .08;
 }

 .performance-hero::after {
     content: "";
     position: absolute;
     right: -120px;
     bottom: -120px;
     width: 320px;
     height: 320px;
     border-radius: 50%;
     background: #FFE9D6;
     opacity: .6;
 }

 .performance-hero .container {
     position: relative;
     z-index: 2;
 }

 /*=====================================
TAG
=====================================*/

 .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 22px;
     background: #EEF1FF;
     border-radius: 40px;
     font-size: 14px;
     font-weight: 700;
     color: #6B42FF;
     margin-bottom: 25px;
 }

 .hero-tag i {
     color: #FF8A00;
 }

 /*=====================================
TITLE
=====================================*/

 .hero-title {
     font-size: 50px;
     font-weight: 800;
     line-height: 1.1;
     color: #162D6B;
     margin-bottom: 25px;
 }

 .hero-title span {
     background-color: #0a66c2;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /*=====================================
DESC
=====================================*/

 .hero-desc {
     font-size: 17px;
     line-height: 32px;
     color: #666;
     margin-bottom: 40px;
     max-width: 600px;
 }

 /*=====================================
BUTTONS
=====================================*/

 .hero-btns {
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
 }

 /*=====================================
DASHBOARD
=====================================*/

 .hero-dashboard {
     position: relative;
     max-width: 680px;
     margin-left: auto;
 }

 .hero-dashboard img {
     width: 100%;
     display: block;
     filter: drop-shadow(0 30px 60px rgba(107, 66, 255, .18));
     animation: dashboardFloat 6s ease-in-out infinite;
 }

 @keyframes dashboardFloat {

     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }

     100% {
         transform: translateY(0);
     }

 }

 /*=====================================
FLOATING DASHBOARD CARDS
=====================================*/

 .dashboard-card {
     position: absolute;
     background: #fff;
     padding: 18px 22px;
     border-radius: 20px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
     transition: .35s;
 }

 .dashboard-card:hover {
     transform: translateY(-8px);
 }

 .dashboard-card h3,
 .dashboard-card h4 {
     margin: 0;
     font-weight: 800;
     color: #162D6B;
 }

 .dashboard-card h3 {
     font-size: 42px;
 }

 .dashboard-card h4 {
     font-size: 28px;
 }

 .dashboard-card p,
 .dashboard-card span {
     margin: 0;
     font-size: 14px;
     color: #666;
 }

 /*=====================================
ROI
=====================================*/

 .roi-card {
     left: -40px;
     top: 40px;
     border-left: 6px solid #6B42FF;
 }

 /*=====================================
BRANDS
=====================================*/

 .brands-card {
     right: -20px;
     top: 180px;
     border-left: 6px solid #FF8A00;
 }

 /*=====================================
LEADS
=====================================*/

 .lead-card {
     left: 40px;
     bottom: 10px;
     border-left: 6px solid #21C45D;
 }

 /*=====================================
BOTTOM WAVE
=====================================*/

 .hero-wave {
     position: absolute;
     left: 0;
     bottom: -2px;
     width: 100%;
     height: 120px;
     background: url("image/wave.svg") center bottom no-repeat;
     background-size: cover;
 }

 .platform-strip {
     padding: 30px 0px;
     margin-top: -70px;
     position: relative;
     z-index: 5;
 }

 .platform-item {
     background: #162D6B;
     border-radius: 24px;
     padding: 35px 28px;
     height: 100%;
     position: relative;
     overflow: hidden;
     transition: .35s;
 }

 .platform-item::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94, #FF8A00);
     transform: scaleX(0);
     transition: .4s;
     transform-origin: left;
 }

 .platform-item:hover::before {
     transform: scaleX(1);
 }

 .platform-item:hover {
     transform: translateY(-10px);
 }

 .platform-icon {
     width: 75px;
     height: 75px;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 34px;
     color: #fff;
     margin-bottom: 25px;
 }

 .google {
     background: #4285F4;
 }

 .meta {
     background: #1877F2;
 }



 .analytics {
     background: #6B42FF;
 }

 .platform-item h4 {
     color: #fff;
     font-size: 23px;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .platform-item p {
     color: #d6ddff;
     font-size: 15px;
     line-height: 28px;
     margin: 0;
 }

 /*=====================================
ROI SECTION
=====================================*/

 .roi-showcase {
     padding: 120px 0;
     background: #fff;
     position: relative;
     overflow: hidden;
 }

 .roi-showcase::before {
     content: "";
     position: absolute;
     left: -180px;
     bottom: -180px;
     width: 380px;
     height: 380px;
     background: #EEF1FF;
     border-radius: 50%;
 }

 .roi-showcase::after {
     content: "";
     position: absolute;
     right: -120px;
     top: -120px;
     width: 280px;
     height: 280px;
     background: #FFF3E7;
     border-radius: 50%;
 }

 .roi-showcase .container {
     position: relative;
     z-index: 2;
 }

 /*=====================================
ROI LIST
=====================================*/

 .roi-list {
     padding: 0;
     margin: 35px 0;
     list-style: none;
 }

 .roi-list li {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 18px;
     font-size: 16px;
     font-weight: 500;
     color: #444;
 }

 .roi-list i {
     font-size: 22px;
     color: #6B42FF;
 }

 /*=====================================
ROI BOARD
=====================================*/

 .roi-board {
     position: relative;
     height: 620px;
 }

 .roi-big-card {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 300px;
     height: 300px;
     border-radius: 35px;
     background: linear-gradient(135deg, #162D6B, #6B42FF);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     box-shadow: 0 35px 70px rgba(107, 66, 255, .25);
 }

 .roi-big-card h1 {
     font-size: 78px;
     font-weight: 800;
     color: #fff;
     margin: 0;
 }

 .roi-big-card p {
     font-size: 18px;
     color: #eef2ff;
     margin-top: 10px;
 }

 /*=====================================
MINI CARDS
=====================================*/

 .mini-card {
     position: absolute;
     background: #fff;
     padding: 22px;
     border-radius: 22px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
     min-width: 220px;
     transition: .35s;
 }

 .mini-card:hover {
     transform: translateY(-8px);
 }

 .mini-card h4 {
     font-size: 34px;
     font-weight: 800;
     color: #162D6B;
     margin-bottom: 4px;
 }

 .mini-card span {
     font-size: 14px;
     color: #666;
 }

 .top-card {
     left: 0;
     top: 40px;
     border-left: 6px solid #FF8A00;
 }

 .bottom-card {
     right: 0;
     bottom: 40px;
     border-left: 6px solid #21C45D;
 }

 /*=====================================
GRAPH CARD
=====================================*/

 .graph-card {
     position: absolute;
     right: 20px;
     top: 170px;
     width: 240px;
     padding: 25px;
     background: #fff;
     border-radius: 24px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
     text-align: center;
     transition: .35s;
 }

 .graph-card:hover {
     transform: translateY(-8px);
 }

 .graph-card i {
     font-size: 42px;
     margin-bottom: 15px;
     background: linear-gradient(135deg, #6B42FF, #FF4D94);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .graph-card h5 {
     font-size: 22px;
     font-weight: 700;
     color: #162D6B;
     margin-bottom: 8px;
 }

 .graph-card p {
     font-size: 14px;
     line-height: 24px;
     color: #666;
     margin: 0;
 }

 /*=====================================
PERFORMANCE JOURNEY
=====================================*/

 .journey-section {
     padding: 110px 0;
     background: #f8f9ff;
     position: relative;
     overflow: hidden;
 }

 .journey-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 18px;
     margin-top: 60px;
     flex-wrap: wrap;
 }

 .journey-step {
     width: 210px;
     background: #fff;
     padding: 35px 22px;
     border-radius: 24px;
     text-align: center;
     box-shadow: 0 18px 45px rgba(0, 0, 0, .06);
     transition: .35s;
     position: relative;
 }

 .journey-step:hover {
     transform: translateY(-12px);
     box-shadow: 0 30px 60px rgba(107, 66, 255, .16);
 }

 .step-icon {
     width: 78px;
     height: 78px;
     margin: auto;
     margin-bottom: 22px;
     border-radius: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #162D6B, #6B42FF);
     color: #fff;
     font-size: 30px;
     transition: .35s;
 }

 .journey-step:hover .step-icon {
     transform: rotate(-8deg) scale(1.08);
 }

 .journey-step h4 {
     font-size: 22px;
     font-weight: 700;
     color: #162D6B;
     margin-bottom: 10px;
 }

 .journey-step p {
     margin: 0;
     font-size: 15px;
     line-height: 26px;
     color: #666;
 }

 .journey-line {
     width: 70px;
     height: 5px;
     border-radius: 50px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
 }

 /*=====================================
METRICS
=====================================*/

 .metrics-section {
     padding: 110px 0;
     background: #fff;
 }

 .metric-box {
     padding: 45px 30px;
     border-radius: 28px;
     background: rgba(255, 255, 255, .85);
     backdrop-filter: blur(14px);
     border: 1px solid rgba(107, 66, 255, .12);
     box-shadow: 0 20px 50px rgba(0, 0, 0, .06);
     text-align: center;
     transition: .35s;
     height: 100%;
 }

 .metric-box:hover {
     transform: translateY(-10px);
     border-color: #6B42FF;
     box-shadow: 0 30px 65px rgba(107, 66, 255, .18);
 }

 .metric-box h2 {
     font-size: 52px;
     font-weight: 800;
     margin-bottom: 10px;
     background: linear-gradient(90deg, #6B42FF, #FF4D94);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .metric-box p {
     margin: 0;
     font-size: 16px;
     font-weight: 600;
     color: #666;
 }

 /*=====================================
HOVER EFFECTS
=====================================*/

 .platform-item,
 .dashboard-card,
 .mini-card,
 .graph-card,
 .metric-box,
 .journey-step {
     will-change: transform;
 }

 .platform-item:hover .platform-icon {
     transform: scale(1.1) rotate(8deg);
 }

 .dashboard-card:hover {
     transform: translateY(-10px);
 }

 .mini-card:hover {
     transform: translateY(-8px);
 }

 .graph-card:hover i {
     transform: scale(1.15);
     transition: .35s;
 }

 .metric-box:hover h2 {
     letter-spacing: 1px;
 }

 /*=====================================
RESPONSIVE
=====================================*/

 @media(max-width:1200px) {

     .hero-title {
         font-size: 56px;
     }

     .hero-dashboard {
         max-width: 580px;
     }

     .roi-board {
         height: 560px;
     }

     .roi-big-card {
         width: 260px;
         height: 260px;
     }

     .roi-big-card h1 {
         font-size: 66px;
     }

 }

 @media(max-width:991px) {

     .performance-hero,
     .roi-showcase,
     .journey-section,
     .metrics-section {
         padding: 80px 0;
     }

     .hero-title {
         font-size: 44px;
         text-align: center;
     }

     .hero-desc {
         text-align: center;
         margin: auto auto 35px;
     }

     .hero-btns {
         justify-content: center;
     }

     .hero-dashboard {
         margin: 60px auto 0;
     }

     .dashboard-card,
     .mini-card,
     .graph-card {
         position: relative;
         left: auto !important;
         right: auto !important;
         top: auto !important;
         bottom: auto !important;
         margin: 15px auto;
         width: 100%;
         max-width: 300px;
     }

     .roi-board {
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 20px;
     }

     .roi-big-card {
         position: relative;
         left: auto;
         top: auto;
         transform: none;
     }

     .process-wrapper,
     .journey-wrapper {
         flex-direction: column;
     }

     .journey-line {
         width: 4px;
         height: 55px;
     }

 }

 @media(max-width:768px) {

     .hero-title {
         font-size: 36px;
     }

     .hero-btns {
         flex-direction: column;
     }

     .hero-btns .theme-btn,
     .hero-btns .theme-btn-outline {
         width: 100%;
     }

     .platform-item {
         padding: 28px 20px;
     }

     .platform-icon {
         width: 65px;
         height: 65px;
         font-size: 28px;
     }

     .journey-step {
         width: 100%;
     }

     .metric-box h2 {
         font-size: 42px;
     }

 }

 @media(max-width:576px) {

     .performance-hero,
     .platform-strip,
     .roi-showcase,
     .journey-section,
     .metrics-section {
         padding: 60px 0;
     }

     .hero-title {
         font-size: 30px;
         line-height: 1.25;
     }

     .hero-desc {
         font-size: 15px;
         line-height: 28px;
     }

     .roi-big-card {
         width: 220px;
         height: 220px;
     }

     .roi-big-card h1 {
         font-size: 52px;
     }

     .metric-box {
         padding: 35px 20px;
     }

     .metric-box h2 {
         font-size: 36px;
     }

     .metric-box p {
         font-size: 14px;
     }

     .step-icon {
         width: 65px;
         height: 65px;
         font-size: 24px;
     }

     .journey-step h4 {
         font-size: 20px;
     }

     .journey-step p {
         font-size: 14px;
         line-height: 24px;
     }

 }

 /*=====================================
GLOBAL
=====================================*/

 [data-aos] {
     transition-duration: .8s !important;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 html {
     scroll-behavior: smooth;
 }