/**

 * ZEUSCORP CLOUD LLC — BRAND STYLING & CONTRAST GOVERNANCE

 * Primary Brand Color: Dark Purple (#581c87 / #4c1d95)

 * Strict text contrast: Dark text on light cards, White text on purple elements.

 * WCAG AAA Compliant.

 */



:root {

  /* Dark Purple Brand Palette */

  --brand-primary: #581c87 !important;         /* Deep Rich Dark Purple */

  --brand-primary-dark: #3b0764 !important;    /* Midnight Purple */

  --brand-primary-hover: #4c1d95 !important;   /* Royal Purple */

  --brand-accent: #9333ea !important;          /* Vivid Purple */

  --brand-accent-light: #c084fc !important;    /* Soft Lavender */

  --brand-gradient: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #7e22ce 100%) !important;



  /* Overwrite Template Primary Variables */

  --color-primary: #581c87 !important;

  --swiper-pagination-color: #9333ea !important;

}



/* =========================================================================

   1. CASE STUDY CARDS (TURNING IDEAS INTO REAL-WORLD RESULTS)

   STRICTLY DARK / BLACK TEXT AT ALL TIMES (NEVER WHITE ON WHITE)

   ========================================================================= */



.group.bg-light.rounded-custom,

.group.bg-light.rounded-custom:hover,

.group.rounded-custom.bg-white,

.group.rounded-custom.bg-white:hover,

div:has(> .rounded-t-custom.img-reveal-hover) {

  background-color: #ffffff !important;

  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;

}



.group.bg-light.rounded-custom:hover {

  box-shadow: 0 16px 36px rgba(88, 28, 135, 0.12) !important;

  border-color: rgba(147, 51, 234, 0.4) !important;

}



/* Titles: Sharp Black at all times */

.group.bg-light.rounded-custom h3,

.group.bg-light.rounded-custom h3 a,

.group.bg-light.rounded-custom:hover h3,

.group.bg-light.rounded-custom:hover h3 a,

.group.bg-light.rounded-custom .text-underline-animation,

.group.bg-light.rounded-custom:hover .text-underline-animation {

  color: #1e1e1e !important;

  opacity: 1 !important;

}



/* Descriptions: Slate-600 dark text */

.group.bg-light.rounded-custom p,

.group.bg-light.rounded-custom:hover p {

  color: #4b5563 !important;

  opacity: 1 !important;

}



/* Metrics and numbers (27%, 03, 33%, 2.5, 21%, etc.) */

.group.bg-light.rounded-custom .has-animated-number,

.group.bg-light.rounded-custom .has-animated-number *,

.group.bg-light.rounded-custom:hover .has-animated-number,

.group.bg-light.rounded-custom:hover .has-animated-number * {

  color: #1e1e1e !important;

  opacity: 1 !important;

}



/* Metric labels ('Revenue Boost', 'Higher Engagement', 'Months Upgrade', etc.) */

.group.bg-light.rounded-custom .has-animated-number + div,

.group.bg-light.rounded-custom .has-animated-number ~ div,

.group.bg-light.rounded-custom .flex.items-center.gap-1 div.text-sm,

.group.bg-light.rounded-custom:hover .flex.items-center.gap-1 div.text-sm {

  color: #4b5563 !important;

  opacity: 1 !important;

}



/* Read More Button & Arrow: Dark text and dark stroke on hover */

.group.bg-light.rounded-custom a.btn,

.group.bg-light.rounded-custom a.btn span,

.group.bg-light.rounded-custom:hover a.btn,

.group.bg-light.rounded-custom:hover a.btn span {

  color: #1e1e1e !important;

  opacity: 1 !important;

}



.group.bg-light.rounded-custom a.btn svg,

.group.bg-light.rounded-custom:hover a.btn svg,

.group.bg-light.rounded-custom a.btn svg path,

.group.bg-light.rounded-custom:hover a.btn svg path {

  stroke: #1e1e1e !important;

  color: #1e1e1e !important;

}



/* Category badge on Case Study card images (e.g. 'Web App', 'SaaS') */

.group.bg-light.rounded-custom .bg-primary,

.group.bg-light.rounded-custom .bg-primary span,

.group.bg-light.rounded-custom .bg-primary * {

  background-color: #581c87 !important;

  color: #ffffff !important;

}



/* =========================================================================

   2. SERVICE CARDS (SERVICES & SOLUTIONS FOR MODERN WORLD)

   NORMALLY BLACK TEXT, WHEN HOVERED WHITE ON PURPLE FOLD

   ========================================================================= */



/* Default / Unhovered State: Clear black/dark text & dark purple icons */

.group.bg-light[class*="after:bg-primary"],

.group.bg-light[class*="after:bg-primary"] h3,

.group.bg-light[class*="after:bg-primary"] h3 a,

.group.bg-light[class*="after:bg-primary"] p,

.group.bg-light[class*="after:bg-primary"] a.btn,

.group.bg-light[class*="after:bg-primary"] a.btn span,

.group.bg-light[class*="after:bg-primary"] .text-underline-animation {

  color: #1e1e1e !important;

  transition: color 0.3s ease-in-out !important;

}



.group.bg-light[class*="after:bg-primary"] p {

  color: #374151 !important;

  opacity: 0.9 !important;

}



.group.bg-light[class*="after:bg-primary"] a.btn svg {

  stroke: #1e1e1e !important;

  color: #1e1e1e !important;

}



.group.bg-light[class*="after:bg-primary"] svg[data-icon="true"],

.group.bg-light[class*="after:bg-primary"] svg[data-icon="true"] path {

  stroke: #581c87 !important;

  color: #581c87 !important;

  transition: all 0.3s ease-in-out !important;

}



/* Corner fold in default unhovered state */

.group.bg-light[class*="after:bg-primary"]:after,

.after\:bg-primary\/60:after {

  background-color: rgba(126, 34, 206, 0.22) !important;

}



/* HOVERED State: Expanding purple fold turns background to solid brand purple */

.group.bg-light[class*="after:bg-primary"]:hover:after {

  background-color: #581c87 !important;

  opacity: 1 !important;

}



.group.bg-light[class*="after:bg-primary"]:hover,

.group.bg-light[class*="after:bg-primary"]:hover h3,

.group.bg-light[class*="after:bg-primary"]:hover h3 a,

.group.bg-light[class*="after:bg-primary"]:hover p,

.group.bg-light[class*="after:bg-primary"]:hover a.btn,

.group.bg-light[class*="after:bg-primary"]:hover a.btn span,

.group.bg-light[class*="after:bg-primary"]:hover .text-underline-animation {

  color: #ffffff !important;

  opacity: 1 !important;

}



.group.bg-light[class*="after:bg-primary"]:hover p {

  color: rgba(255, 255, 255, 0.92) !important;

}



.group.bg-light[class*="after:bg-primary"]:hover a.btn svg {

  stroke: #ffffff !important;

  color: #ffffff !important;

}



.group.bg-light[class*="after:bg-primary"]:hover svg[data-icon="true"],

.group.bg-light[class*="after:bg-primary"]:hover svg[data-icon="true"] path {

  stroke: #ffffff !important;

  color: #ffffff !important;

}



/* Service cards on services/index.html & home-two with hover:bg-primary/20 */

.hover\:bg-primary\/20:hover {

  background-color: #581c87 !important;

}



.hover\:bg-primary\/20:hover h3,

.hover\:bg-primary\/20:hover p,

.hover\:bg-primary\/20:hover svg,

.hover\:bg-primary\/20:hover path {

  color: #ffffff !important;

  stroke: #ffffff !important;

}



/* =========================================================================

   3. SECTION PILL BADGES (LIGHT VS DARK CONTEXT CONTRAST)

   ========================================================================= */



/* Default: Light Sections -> Rich Soft Lavender pill with Bold Midnight Purple text */

.border-border-primary,

div.border-border-primary,

span.border-border-primary {

  border: 1.5px solid #8b5cf6 !important;

  border-color: #8b5cf6 !important;

  background-color: #ede9fe !important;

  color: #3b0764 !important;

  font-weight: 700 !important;

  font-size: 0.875rem !important;

  letter-spacing: 0.025em !important;

  padding: 0.35rem 0.95rem !important;

  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15) !important;

  border-radius: 9999px !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 0.5rem !important;

}



.border-border-primary *,

div.border-border-primary *,

span.border-border-primary * {

  color: #3b0764 !important;

  font-weight: 700 !important;

}



/* Inside Dark Purple Sections: Pure white text, radiant lavender border, translucent purple pill */

[class*="from-gradient-blush"] .border-border-primary,

[class*="bg-gradient-blush"] .border-border-primary,

.footer-color-surface .border-border-primary,

[class*="bg-dark"] .border-border-primary,

div.from-gradient-blush .border-border-primary,

section:has(.from-gradient-blush) .border-border-primary {

  border: 1.5px solid #d8b4fe !important;

  border-color: #d8b4fe !important;

  background-color: rgba(147, 51, 234, 0.3) !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  font-size: 0.875rem !important;

  letter-spacing: 0.025em !important;

  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.3) !important;

}



[class*="from-gradient-blush"] .border-border-primary *,

[class*="bg-gradient-blush"] .border-border-primary *,

.footer-color-surface .border-border-primary *,

[class*="bg-dark"] .border-border-primary *,

div.from-gradient-blush .border-border-primary *,

section:has(.from-gradient-blush) .border-border-primary * {

  color: #ffffff !important;

  font-weight: 700 !important;

}



/* =========================================================================

   4. BLOG CARDS & BLOG POST TAG PILLS

   ========================================================================= */



/* Blog Post List Cards (White Background, Sharp Dark Text) */

article.group,

article.group.rounded-custom,

article.group.rounded-custom:hover,

.template-post-search {

  background-color: #ffffff !important;

}



article.group h2,

article.group h2 a,

article.group:hover h2,

article.group:hover h2 a,

article.group .text-underline-animation,

article.group:hover .text-underline-animation {

  color: #1e1e1e !important;

}



article.group p,

article.group:hover p {

  color: #4b5563 !important;

  opacity: 1 !important;

}



article.group .text-xs,

article.group .text-sm,

article.group:hover .text-xs,

article.group:hover .text-sm {

  color: #6b7280 !important;

}



/* Fix Blog Post Single Tags (formerly text-white on bg-white) */

a[href*="/blog/tag/"].bg-white,

a[href*="/blog/tag/"].text-white,

a[href*="/blog/tag/"] {

  background-color: #ffffff !important;

  color: #1e1e1e !important;

  border: 1px solid #e2e8f0 !important;

  transition: all 0.25s ease-in-out !important;

}



a[href*="/blog/tag/"].bg-white:hover,

a[href*="/blog/tag/"].text-white:hover,

a[href*="/blog/tag/"]:hover {

  background-color: #581c87 !important;

  color: #ffffff !important;

  border-color: #581c87 !important;

}



/* Blog Category Pills */

a[href*="/blog/category/"] {

  color: #1e1e1e !important;

}



a[href*="/blog/category/"]:hover {

  color: #581c87 !important;

}



/* Blog Pagination Buttons (Next, Prev) */

a[href*="/blog/"][class*="hover:bg-primary"] {

  color: #1e1e1e !important;

}



a[href*="/blog/"][class*="hover:bg-primary"]:hover {

  background-color: #581c87 !important;

  color: #ffffff !important;

}



/* =========================================================================

   5. TEAM MEMBER CARDS & SOCIAL ICONS

   ========================================================================= */



article.group[class*="max-w-xl"],

.team-member-card {

  background-color: #ffffff !important;

}



article.group[class*="max-w-xl"] h3,

article.group[class*="max-w-xl"] h3 a,

article.group[class*="max-w-xl"]:hover h3,

article.group[class*="max-w-xl"]:hover h3 a {

  color: #1e1e1e !important;

}



article.group[class*="max-w-xl"] p,

article.group[class*="max-w-xl"]:hover p {

  color: #4b5563 !important;

}



/* Team Social Links floating pill (was white text on bg-light) */

ul.bg-light[class*="rounded-b-full"] {

  background-color: #ffffff !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;

}



ul.bg-light a.border-border-dark,

ul.bg-light a.text-white,

ul.bg-light a {

  color: #1e1e1e !important;

  stroke: #1e1e1e !important;

  border-color: #e5e7eb !important;

  background-color: #f9fafb !important;

}



ul.bg-light a svg {

  color: #1e1e1e !important;

  stroke: #1e1e1e !important;

}



ul.bg-light a:hover {

  background-color: #581c87 !important;

  color: #ffffff !important;

  stroke: #ffffff !important;

  border-color: #581c87 !important;

}



ul.bg-light a:hover svg {

  color: #ffffff !important;

  stroke: #ffffff !important;

}



/* =========================================================================

   6. PROCESS CARDS (5-PHASE AGILE DELIVERY FRAMEWORK)

   ========================================================================= */



.process-card,

.process-card:hover {

  background-color: #ffffff !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;

}



.process-card h3,

.process-card:hover h3,

.process-card .text-h3,

.process-card .text-h4 {

  color: #1e1e1e !important;

}



.process-card p,

.process-card:hover p,

.process-card li,

.process-card:hover li {

  color: #374151 !important;

  opacity: 1 !important;

}



.process-card span.text-primary,

.process-card .process-number {

  color: #581c87 !important;

}



/* =========================================================================

   7. PORTFOLIO SECTION & CARDS

   ========================================================================= */



.portfolio-motion-item h3,

.portfolio-motion-item h3 a,

.portfolio-motion-item:hover h3,

.portfolio-motion-item:hover h3 a,

.single-portfolio2 h3,

.single-portfolio2:hover h3 {

  color: #1e1e1e !important;

}



.portfolio-motion-item p,

.single-portfolio2 p {

  color: #4b5563 !important;

}



.single-portfolio2,

.single-portfolio2:hover {

  background-color: #ffffff !important;

}



/* Portfolio Technology tags (Python, SaaS, AWS, AI, Flutter, etc.) */

.portfolio-motion-item span.rounded-full,

.portfolio-motion-item span.border,

.single-portfolio2 span.rounded-full,

.single-portfolio2 span.border {

  color: #374151 !important;

  background-color: #f3f4f6 !important;

  border-color: #e5e7eb !important;

}



/* Portfolio Filter Buttons (on Dark Section) */

.portfolio-filter-btn {

  color: #ffffff !important;

  border-color: rgba(168, 85, 247, 0.4) !important;

}



.portfolio-filter-btn:not(.active):hover,

.portfolio-filter-btn.active {

  background-color: #581c87 !important;

  color: #ffffff !important;

  border-color: #9333ea !important;

}



/* =========================================================================

   8. PRICING CARDS & TABLES

   ========================================================================= */



.pricing-cards-container .rounded-custom,

.pricing-cards-container .rounded-custom h3,

.pricing-cards-container .rounded-custom .monthly-price div,

.pricing-cards-container .rounded-custom .yearly-price div {

  color: #1e1e1e !important;

}



.pricing-cards-container .rounded-custom p,

.pricing-cards-container .rounded-custom ul li {

  color: #1f2937 !important;

}



/* =========================================================================

   9. INDUSTRY LIST ITEMS (LIGHT BACKGROUND)

   ========================================================================= */



#industry-list .industry-item,

.industry-item {

  color: #1e1e1e !important;

}



.industry-item .industry-title,

.industry-item h3.industry-title,

.industry-item h3.industry-title a,

.industry-item a {

  color: #1e1e1e !important;

  opacity: 1 !important;

  transition: color 0.25s ease-in-out;

}



.industry-item .industry-year,

.industry-item h3.industry-year {

  color: #6b7280 !important;

  opacity: 1 !important;

  transition: color 0.25s ease-in-out;

}



/* Hover & Active States */

.industry-item:hover,

.industry-item:hover .industry-title,

.industry-item:hover h3.industry-title,

.industry-item:hover h3.industry-title a,

.industry-item:hover a,

.industry-item.active,

.industry-item.active .industry-title,

.industry-item.active h3.industry-title,

.industry-item.active h3.industry-title a,

.industry-item[class*="active"] .industry-title,

.industry-item[class*="active"] h3.industry-title,

.industry-item[class*="active"] h3.industry-title a,

.industry-item[class*="active"] a,

.group.active .industry-title,

.group.active h3.industry-title,

.group.active h3.industry-title a,

.group.active a {

  color: #581c87 !important; /* Brand purple */

  font-weight: 600 !important;

  opacity: 1 !important;

}



.industry-item:hover .industry-year,

.industry-item.active .industry-year,

.industry-item[class*="active"] .industry-year,

.group.active .industry-year {

  color: #7e22ce !important;

  font-weight: 600 !important;

  opacity: 1 !important;

}



/* Paragraphs / Descriptions in Industry Items */

.industry-item p,

.industry-item .industry-desc-wrapper,

.industry-item .industry-desc-wrapper p,

.industry-item .industry-desc-wrapper div p {

  color: #4b5563 !important; /* Accessible high-contrast slate */

  opacity: 1 !important;

}



/* FAQ Accordions */

.hs-accordion-toggle,

.hs-accordion-toggle:hover,

.hs-accordion-toggle button,

.hs-accordion-content,

.hs-accordion-content p {

  color: #1e1e1e !important;

}



/* =========================================================================

   10. CONTACT FORM & CONSULTATION BOX

   ========================================================================= */



.bg-light.col-span-7,

.bg-light form,

.bg-light form label,

.bg-light form input,

.bg-light form textarea,

.bg-light form select {

  color: #1e1e1e !important;

}



.bg-light form input,

.bg-light form textarea,

.bg-light form select {

  background-color: #ffffff !important;

  border: 1px solid #d1d5db !important;

}



.bg-light form input::placeholder,

.bg-light form textarea::placeholder {

  color: #9ca3af !important;

}



/* =========================================================================

   11. NAVIGATION BAR & ANIMATIONS (PREMIUM FLOATING PILL & MICRO-INTERACTIONS)

   ========================================================================= */



/* Floating Glassmorphism Square Header with subtle rounded corners */

.header-one.header {

  padding-top: 0.65rem !important;

  padding-bottom: 0.65rem !important;

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.header-inner {

  background: rgba(255, 255, 255, 0.94) !important;

  backdrop-filter: blur(20px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  border: 1px solid rgba(139, 92, 246, 0.2) !important;

  box-shadow: 0 4px 20px -2px rgba(88, 28, 135, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;

  border-radius: 12px !important; /* Square with little rounded corners like buttons */

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

  padding: 0.25rem 0.85rem !important; /* Sleek, slim thickness */

  min-height: 52px !important;

}



/* On Scroll / Sticky Header state */

.header.has-sticky-behavior.border-on-scroll .header-inner,

.header.has-sticky-behavior.scroll-down .header-inner {

  background: rgba(255, 255, 255, 0.98) !important;

  box-shadow: 0 10px 30px -4px rgba(88, 28, 135, 0.14), 0 3px 8px -2px rgba(0, 0, 0, 0.05) !important;

  border-color: rgba(139, 92, 246, 0.35) !important;

  transform: translateY(-1px);

}



/* Brand Logo micro-animation */

.logo-wrapper {

  display: flex !important;

  align-items: center !important;

  gap: 0.6rem !important;

  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

  text-decoration: none !important;

}



.logo-wrapper:hover {

  transform: scale(1.03);

}



.logo-wrapper .logo,

.logo-wrapper img,

.logo-wrapper svg {

  height: 28px !important;

  width: auto !important;

  max-height: 28px !important;

  object-fit: contain !important;

  display: inline-block !important;

  vertical-align: middle !important;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.logo-wrapper:hover .logo,

.logo-wrapper:hover img,

.logo-wrapper:hover svg {

  transform: scale(1.08) !important;

}



.logo-wrapper .logo-text {

  font-weight: 700 !important;

  color: #1e1e1e !important;

  letter-spacing: -0.02em !important;

  font-size: 1.15rem !important;

  line-height: 1 !important;

}



/* CRITICAL RESET: Desktop Nav-Menu Container must NEVER have rectangular card/dropdown styles */

@media (min-width: 1024px) {

  #nav-menu,

  ul.navbar#nav-menu,

  ul.navbar.hs-dropdown-menu,

  .header-inner ul.navbar {

    background: transparent !important;

    background-color: transparent !important;

    border: none !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 0.25rem !important;

  }

}



@media (max-width: 1023.98px) {

  .header-inner:not(.hs-dropdown-open) #nav-menu,

  .header-inner:not(.hs-dropdown-open) ul.navbar {

    display: none !important;

  }

}



/* Top-level Nav Links & Dropdown Buttons Base Styling */

.navbar > .nav-item > .nav-link,

.navbar > .nav-item > .nav-toggle,

.navbar > li > a.nav-link,

.navbar > li > button.nav-toggle {

  color: #374151 !important;

  background: transparent !important;

  background-color: transparent !important;

  font-weight: 500 !important;

  font-size: 0.875rem !important;

  padding: 0.35rem 0.85rem !important;

  border-radius: 8px !important; /* Square with subtle rounded corners like buttons */

  border: 1px solid transparent !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 0.35rem !important;

  cursor: pointer !important;

  text-decoration: none !important;

  line-height: 1.4 !important;

  height: 36px !important;

}



/* Hover State for Top-level Nav Links (smooth lavender highlight with subtle lift) */

.navbar > .nav-item > .nav-link:hover:not(.nav-link-active),

.navbar > .nav-item > .nav-toggle:hover,

.navbar > li > a.nav-link:hover:not(.nav-link-active),

.navbar > li > button.nav-toggle:hover {

  background-color: #f3e8ff !important;

  color: #581c87 !important;

  border-color: rgba(147, 51, 234, 0.2) !important;

  border-radius: 8px !important;

  transform: translateY(-1.5px) !important;

  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12) !important;

}



.navbar > .nav-item > .nav-link:hover:not(.nav-link-active) *,

.navbar > .nav-item > .nav-toggle:hover *,

.navbar > li > a.nav-link:hover:not(.nav-link-active) *,

.navbar > li > button.nav-toggle:hover * {

  color: #581c87 !important;

  stroke: #581c87 !important;

}



/* ACTIVE Top-level Nav Link (e.g. Home on homepage): Rich Dark Purple Gradient */

.navbar > .nav-item > .nav-link.nav-link-active,

.navbar > li > a.nav-link.nav-link-active,

.navbar > .nav-item > .nav-link.active,

.navbar > li > a.nav-link.active {

  background: linear-gradient(135deg, #581c87 0%, #4c1d95 100%) !important;

  background-color: #581c87 !important;

  color: #ffffff !important;

  font-weight: 600 !important;

  border-radius: 8px !important; /* Square with subtle rounded corners */

  border-color: #581c87 !important;

  box-shadow: 0 3px 10px rgba(88, 28, 135, 0.3) !important;

  transform: translateY(-0.5px) !important;

  height: 36px !important;

}



.navbar > .nav-item > .nav-link.nav-link-active *,

.navbar > li > a.nav-link.nav-link-active *,

.navbar > .nav-item > .nav-link.active *,

.navbar > li > a.nav-link.active * {

  color: #ffffff !important;

  stroke: #ffffff !important;

}



.navbar > .nav-item > .nav-link.nav-link-active:hover,

.navbar > li > a.nav-link.nav-link-active:hover {

  background: linear-gradient(135deg, #4c1d95 0%, #6b21a8 100%) !important;

  box-shadow: 0 4px 14px rgba(126, 34, 206, 0.45) !important;

  transform: translateY(-1.5px) !important;

}



/* Dropdown Open Trigger State: Refined Lavender highlight with rotating chevron */

.navbar .hs-dropdown.open > .nav-toggle,

.navbar .hs-dropdown.open > .hs-dropdown-toggle {

  background-color: #ede9fe !important;

  color: #3b0764 !important;

  border-radius: 8px !important;

  border-color: #a855f7 !important;

  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;

}



.navbar .hs-dropdown.open > .nav-toggle *,

.navbar .hs-dropdown.open > .hs-dropdown-toggle * {

  color: #3b0764 !important;

  stroke: #3b0764 !important;

}



/* Chevron Icon Smooth Rotation Animation */

.nav-toggle-icon,

.navbar svg.nav-toggle-icon {

  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

}



.navbar .nav-toggle:hover .nav-toggle-icon,

.navbar .hs-dropdown.open > .nav-toggle .nav-toggle-icon,

.navbar .hs-dropdown.open > .hs-dropdown-toggle .nav-toggle-icon {

  transform: rotate(180deg) !important;

}



/* Dropdown Popups Container (ONLY for actual popups, never top navbar) */

.nav-dropdown-list,

.hs-dropdown-menu:not(#nav-menu):not(.navbar) {

  background: #ffffff !important;

  background-color: #ffffff !important;

  border: 1px solid rgba(168, 85, 247, 0.22) !important;

  box-shadow: 0 20px 48px -10px rgba(59, 7, 100, 0.18), 0 4px 14px rgba(0, 0, 0, 0.05) !important;

  border-radius: 16px !important;

  padding: 0.5rem !important;

  animation: navDropdownFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;

}



@keyframes navDropdownFadeIn {

  from {

    opacity: 0;

    transform: translateY(8px) scale(0.98);

  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



/* Dropdown Links */

.nav-dropdown-link,

.navbar .nav-dropdown-link {

  color: #1e1e1e !important;

  padding: 0.65rem 1rem !important;

  border-radius: 10px !important;

  font-weight: 500 !important;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



/* Dropdown Links Hover (Smooth Slide-Right Micro-interaction) */

.navbar .nav-dropdown-link:hover,

.navbar .nav-dropdown-link:focus,

.navbar .nav-dropdown-item:hover > .nav-dropdown-link {

  background-color: #f5f3ff !important;

  color: #581c87 !important;

  transform: translateX(4px) !important;

  font-weight: 600 !important;

}



.navbar .nav-dropdown-link:hover *,

.navbar .nav-dropdown-link:focus * {

  color: #581c87 !important;

  stroke: #581c87 !important;

}



/* Active Page inside Dropdown */

.navbar .nav-dropdown-link.active,

.navbar .nav-dropdown-link.nav-link-active,

.navbar .nav-dropdown-item.active > .nav-dropdown-link {

  background: linear-gradient(135deg, #581c87 0%, #4c1d95 100%) !important;

  color: #ffffff !important;

  border-radius: 10px !important;

}



.navbar .nav-dropdown-link.active *,

.navbar .nav-dropdown-link.nav-link-active * {

  color: #ffffff !important;

  stroke: #ffffff !important;

}



/* =========================================================================
   MEGA MENU CONTAINER & HOVER BRIDGES (PREVENT DISAPPEARING ON HOVER)
   ========================================================================= */

@keyframes megaMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  /* Parent Nav Item: Position relative for anchor */
  li.has-mega-menu {
    position: relative !important;
  }

  /* Make Services toggle button the anchor for strict downward bridge */
  li.has-mega-menu .hs-dropdown-toggle {
    position: relative !important;
  }

  /* Downward Hover Bridge: Confined strictly to Services button width (left: 0, right: 0) */
  li.has-mega-menu .hs-dropdown-toggle::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 38px !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 50 !important;
  }

  /* Only active when mega-menu is open */
  li.has-mega-menu.open .hs-dropdown-toggle::after {
    pointer-events: auto !important;
  }

  /* Kill all phantom wide pseudo-element bridges that intercept horizontal mouse movement */
  li.has-mega-menu::before,
  li.has-mega-menu::after,
  .hs-dropdown-menu.mega-menu::before,
  .hs-dropdown-menu.mega-menu::after {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
  }

  /* Mega Menu Container: Fixed, horizontally centered */
  .hs-dropdown-menu.mega-menu {
    position: fixed !important;
    left: 50% !important;
    translate: -50% 0 !important;
    transform: none !important;
    top: 68px !important;
    width: min(1320px, calc(100vw - 48px)) !important;
    max-width: 1320px !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px -12px rgba(59, 7, 100, 0.22), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    overflow: visible !important;
    margin-top: 0 !important;
    z-index: 55 !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
  }

  /* Mega Menu Inner Scroll Container: Enforce rounded corners */
  .hs-dropdown-menu.mega-menu .mega-menu-scroll {
    border-radius: 19px !important;
    overflow: hidden !important;
  }

  /* Hidden state */
  .hs-dropdown-menu.mega-menu.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Active / Open states controlled strictly via JS and parent .open */
  li.has-mega-menu.open > .mega-menu:not(.hidden),
  .hs-dropdown-menu.mega-menu.open:not(.hidden),
  .hs-dropdown-menu.mega-menu.is-hovered:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* Smooth fade-in without overriding translateX(-50%) */
  .hs-dropdown-menu.mega-menu.open,
  .hs-dropdown-menu.mega-menu:not(.hidden) {
    animation: megaMenuFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
}

/* Mega Menu Service Cards Micro-Interactions */

.mega-menu .group\/service {

  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;

  border-radius: 12px !important;

}



.mega-menu .group\/service:hover {

  background: linear-gradient(135deg, #581c87 0%, #4c1d95 100%) !important;

  color: #ffffff !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 8px 24px rgba(88, 28, 135, 0.25) !important;

  border-color: #7e22ce !important;

}



.mega-menu .group\/service:hover * {

  color: #ffffff !important;

}



/* Side Menu Grid Toggle Button (Playful 90deg Spin on Hover) */

button.sidemenu-action {

  border: 1.5px solid rgba(139, 92, 246, 0.25) !important;

  background: rgba(255, 255, 255, 0.85) !important;

  color: #374151 !important;

  border-radius: 8px !important; /* Square with subtle rounded corners like buttons */

  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

  width: 36px !important;

  height: 36px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



button.sidemenu-action:hover {

  background-color: #ede9fe !important;

  border-color: #8b5cf6 !important;

  color: #581c87 !important;

  transform: rotate(90deg) scale(1.08) !important;

  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25) !important;

}



button.sidemenu-action:hover svg,

button.sidemenu-action:hover svg path {

  fill: #581c87 !important;

}



/* "Get in Touch" Navbar CTA Button: Dark Purple Brand Gradient with Hover Elevation */

.header-inner .btn-dark,

.header .btn-dark {

  background: linear-gradient(135deg, #581c87 0%, #4c1d95 100%) !important;

  background-color: #581c87 !important;

  color: #ffffff !important;

  border: 1px solid rgba(168, 85, 247, 0.4) !important;

  box-shadow: 0 3px 12px rgba(88, 28, 135, 0.3) !important;

  border-radius: 8px !important; /* Square with subtle rounded corners like buttons */

  font-weight: 600 !important;

  font-size: 0.875rem !important;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  padding: 0.35rem 1.05rem !important;

  height: 36px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.header-inner .btn-dark *,

.header .btn-dark * {

  color: #ffffff !important;

  stroke: #ffffff !important;

}



.header-inner .btn-dark:hover,

.header .btn-dark:hover {

  background: linear-gradient(135deg, #4c1d95 0%, #7e22ce 100%) !important;

  box-shadow: 0 8px 24px rgba(126, 34, 206, 0.5) !important;

  transform: translateY(-2px) scale(1.02) !important;

  border-color: #a855f7 !important;

}



/* Arrow Slide on Hover for Get in Touch */

.header-inner .btn-dark svg,

.header .btn-dark svg {

  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.header-inner .btn-dark:hover svg,

.header .btn-dark:hover svg {

  transform: translate(3px, -3px) !important;

}



/* Mobile Navbar Drawer */

.navbar.navbar-mobile .nav-link.active,

.navbar.navbar-mobile .nav-link.active *,

.navbar.navbar-mobile .nav-toggle.active,

.navbar.navbar-mobile .nav-toggle.active *,

.navbar.navbar-mobile .nav-dropdown-link.active,

.navbar.navbar-mobile .nav-dropdown-link.active * {

  color: #ffffff !important;

  stroke: #ffffff !important;

}



/* =========================================================================

   12. PRIMARY BUTTONS & BADGES (White on Purple)

   ========================================================================= */



.btn-primary,

.bg-flip-hover-anim.btn-primary,

button.btn-primary,

a.btn-primary,

.icon-flip-hover-anim.btn-primary {

  background: var(--brand-primary) !important;

  background-color: #581c87 !important;

  color: #ffffff !important;

  border-color: #581c87 !important;

  box-shadow: 0 4px 14px rgba(88, 28, 135, 0.4) !important;

}



.btn-primary > span,

.bg-flip-hover-anim.btn-primary > span,

.bg-flip-hover-anim.btn-primary > span:first-child,

.bg-flip-hover-anim.btn-primary > span:nth-child(2),

.icon-flip-hover-anim.btn-primary .content {

  color: #ffffff !important;

  background-color: transparent !important;

}



.btn-primary svg,

.bg-flip-hover-anim.btn-primary svg {

  color: #ffffff !important;

  stroke: #ffffff !important;

}



.btn-primary:hover,

.bg-flip-hover-anim.btn-primary:hover,

button.btn-primary:hover,

a.btn-primary:hover {

  background: #4c1d95 !important;

  background-color: #4c1d95 !important;

  border-color: #7e22ce !important;

  box-shadow: 0 6px 22px rgba(126, 34, 206, 0.5) !important;

}



.bg-flip-hover-anim.btn-primary:after {

  background-color: #3b0764 !important;

}



.bg-flip-hover-anim.btn-dark:after {

  background-color: #581c87 !important;

}



.bg-flip-hover-anim.btn-dark:hover,

.bg-flip-hover-anim.btn-dark:hover > span {

  color: #ffffff !important;

}



/* Standalone Badges & Pills */

span.badge-primary,

span.bg-primary,

.badge-primary {

  background: #581c87 !important;

  background-color: #581c87 !important;

  color: #ffffff !important;

}



/* Interactive chips on hover (Normally dark, on hover purple with white text) */

.hover\:bg-primary:hover,

.hover\:bg-primary:hover * {

  background-color: #581c87 !important;

  color: #ffffff !important;

  stroke: #ffffff !important;

}



/* =========================================================================

   13. DARK PURPLE SECTION BACKGROUNDS (Services, Case Studies, CTA, Footer)

   ========================================================================= */



.from-gradient-blush {

  --tw-gradient-from: #1e0836 !important;

  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), #1e0836 var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;

  background-color: #1e0836 !important;

}



.to-gradient-warm {

  --tw-gradient-to: #0c0216 !important;

}



.from-gradient-blush.to-gradient-warm,

div[class*="from-gradient-blush"] {

  background: linear-gradient(180deg, #1e0836 0%, #160429 60%, #0c0216 100%) !important;

}



.bg-gradient-blush,

.bg-gradient-blush\!,

.bg-gradient-blush\/70 {

  background: #1e0836 !important;

  background-color: #1e0836 !important;

}



.footer-color-surface {

  background-color: #140525 !important;

  background-image: linear-gradient(#1e0836 0% 12%, #1a072f 25%, #17062a 37%, #140525 50%, #120420 62%, #0f031b 74% 87%, #0c0216 100%) !important;

}



/* =========================================================================

   14. SERVICES CARDS: EXACT EQUAL LENGTH & ALIGNMENT

   ========================================================================= */



[data-parallax-container] > div,

.grid > div:has(> .group.bg-light[class*="after:bg-primary"]) {

  height: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  transform: none !important;

}



.group.bg-light[class*="after:bg-primary"] {

  height: 100% !important;

  min-height: 480px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important;

}



.group.bg-light[class*="after:bg-primary"] > div.relative.z-1.flex.flex-1.flex-col {

  display: flex !important;

  flex-direction: column !important;

  flex: 1 1 auto !important;

  height: 100% !important;

  justify-content: space-between !important;

}



.group.bg-light[class*="after:bg-primary"] h3 {

  min-height: 4.5rem !important;

  display: flex !important;

  align-items: flex-start !important;

}



.group.bg-light[class*="after:bg-primary"] p {

  min-height: 5rem !important;

  display: flex !important;

  align-items: flex-start !important;

  flex-grow: 1 !important;

}



.group.bg-light[class*="after:bg-primary"] a.btn {

  margin-top: auto !important;

}



/* =========================================================================

   15. NATURAL IMAGES - NO TINTING

   ========================================================================= */



img,

picture,

video,

.content-image-mask,

.content-image-mask img,

[class*="vector"] img {

  filter: none !important;

  mix-blend-mode: normal !important;

}



.content-image-mask::after,

.content-image-mask::before {

  display: none !important;

  content: none !important;

}



/* Swiper Pagination */

.swiper-pagination-bullet-active {

  background-color: #9333ea !important;

}



/* Scrollbars */

::-webkit-scrollbar {

  width: 7px;

  height: 7px;

}



::-webkit-scrollbar-track {

  background: #090614;

}



::-webkit-scrollbar-thumb {

  background: #3b0764;

  border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

  background: #7e22ce;

}



/* Hide Irrelevant Elements Cleanly */

.language-switcher,

#action-buttons,

#buy-now-veltro,

#theme-details-veltro,

a[href*="getastrothemes.com"],

a[href*="/components/"],

a[href*="?example"],

a[href*="company-desk.pdf"],

a[href*="/fr/"] {

  display: none !important;

}



/* =========================================================================

   16. SLIM FLOATING NAVBAR WITH REFINED PADDING

   - More horizontal padding on sides (breathing room inside rounded pill)

   - Thinner vertical height (sleek, modern, and compact)

   ========================================================================= */



.header .header-inner,

.header-one .header-inner {

  padding-left: 2rem !important;        /* Generous side padding away from curved pill ends */

  padding-right: 2rem !important;       /* Generous side padding */

  padding-top: 0.35rem !important;      /* Thinner top padding */

  padding-bottom: 0.35rem !important;   /* Thinner bottom padding */

  min-height: 54px !important;          /* Sleek, thinner bar height */

  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08) !important;

  display: flex !important;

  align-items: center !important;

}



.header .header-inner > div.flex,

.header-one .header-inner > div.flex {

  width: 100% !important;

  align-items: center !important;

}



/* Make nav list items compact vertically instead of default 24px padding */

.header .navbar .nav-item,

.header-one .navbar .nav-item {

  padding-block: 0.35rem !important;

  display: flex !important;

  align-items: center !important;

}



/* Sleek nav links & active pill */

.header .navbar .nav-link,

.header-one .navbar .nav-link {

  padding-block: 0.38rem !important;

  padding-inline: 0.85rem !important;

  font-size: 0.925rem !important;

  line-height: 1.25 !important;

}



/* Active and hover pill */

.header .navbar .nav-link.nav-link-active,

.header .navbar .nav-link:hover,

.header-one .navbar .nav-link.nav-link-active,

.header-one .navbar .nav-link:hover {

  background-color: var(--brand-primary) !important;

  color: #ffffff !important;

}



/* Slim 'Get in Touch' button in header */

.header a.btn,

.header-one a.btn {

  padding-block: 0.45rem !important;

  padding-inline: 1.25rem !important;

  font-size: 0.875rem !important;

  line-height: 1.25 !important;

  min-height: 38px !important;

  max-height: 38px !important;

  display: inline-flex !important;

  align-items: center !important;

  border-radius: 9999px !important;

}



/* Sidemenu 4-dots grid icon button proportional to thinner navbar */

.header .sidemenu-action,

.header-one .sidemenu-action {

  height: 38px !important;

  width: 40px !important;

  min-height: 38px !important;

}



/* Logo proportional fit */

.header .logo-wrapper,

.header-one .logo-wrapper {

  display: flex !important;

  align-items: center !important;

  gap: 0.65rem !important;

}



.header .logo-wrapper .logo,

.header-one .logo-wrapper .logo {

  height: 26px !important;

  width: auto !important;

  max-height: 26px !important;

}



.header .logo-wrapper .logo-text,

.header-one .logo-wrapper .logo-text {

  font-size: 1.15rem !important;

  line-height: 1 !important;

  white-space: nowrap !important;

}



/* =========================================================================

   16. MOBILE & TABLET NAVIGATION OPTIMIZATIONS (< 1024px)

   ========================================================================= */



@media (max-width: 1023px) {

  /* Header Inner Container: Clean flex pill that stays within viewport */

  .header .header-inner,

  .header-one .header-inner {

    padding-left: 1rem !important;

    padding-right: 1rem !important;

    padding-top: 0.4rem !important;

    padding-bottom: 0.4rem !important;

    min-height: 52px !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;

  }



  /* Logo on Mobile: Single-line, never wrapping or overflowing */

  .header .logo-wrapper,

  .header-one .logo-wrapper {

    display: flex !important;

    align-items: center !important;

    gap: 0.5rem !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    flex-shrink: 1 !important;

    max-width: calc(100vw - 140px) !important;

  }



  .header .logo-text,

  .header-one .logo-text {

    font-size: 1.05rem !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

  }



  /* Hide duplicate 4-dot sidemenu action on mobile so header isn't cluttered */

  .sidemenu-action,

  .side-menu-icon-wrap {

    display: none !important;

  }



  /* Mobile Nav Toggler: Sleek, high-contrast, comfortable tap button */

  .header .nav-toggler,

  .header-one .nav-toggler {

    display: inline-flex !important;

    align-items: center !important;

    height: 40px !important;

    min-height: 40px !important;

    font-size: 0.8rem !important;

    font-weight: 700 !important;

    letter-spacing: 0.05em !important;

    padding-left: 0.9rem !important;

    padding-right: 0.25rem !important;

    border-radius: 9999px !important;

    border: 1px solid rgba(88, 28, 135, 0.3) !important;

    background-color: #ffffff !important;

    color: #581c87 !important;

    box-shadow: 0 2px 8px rgba(88, 28, 135, 0.08) !important;

    margin-left: auto !important;

    flex-shrink: 0 !important;

  }



  .header .nav-toggler:hover,

  .header .nav-toggler:focus {

    background-color: #581c87 !important;

    color: #ffffff !important;

  }



  .header .nav-toggler > div,

  .header-one .nav-toggler > div {

    width: 34px !important;

    height: 34px !important;

    background-color: rgba(88, 28, 135, 0.08) !important;

  }



  .header .nav-toggler:hover > div {

    background-color: rgba(255, 255, 255, 0.2) !important;

  }



  .header .nav-toggler svg {

    fill: currentColor !important;

    stroke: currentColor !important;

  }



  /* Offcanvas Drawer Dimensions on Mobile */

  #offcanvas-main {

    width: 88vw !important;

    max-width: 375px !important;

    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35) !important;

    z-index: 9999 !important;

  }



  /* Touch Target & Submenu Styling in Mobile Drawer */

  #mobile-nav-list li > a,

  #mobile-nav-list .mobile-dropdown-btn {

    min-height: 46px !important;

    display: flex !important;

    align-items: center !important;

    font-size: 0.925rem !important;

    font-weight: 600 !important;

    color: #1e1e1e !important;

  }



  #mobile-nav-list .mobile-dropdown-btn:focus,

  #mobile-nav-list li > a:focus,

  #mobile-nav-list li > a:active {

    background-color: rgba(88, 28, 135, 0.06) !important;

  }



  .mobile-submenu a {

    min-height: 40px !important;

    line-height: 1.35 !important;

  }



  /* Smooth Submenu Animation */

  .mobile-submenu:not(.hidden) {

    animation: mobileSubmenuFade 0.25s ease-out forwards;

  }



  @keyframes mobileSubmenuFade {

    from {

      opacity: 0;

      transform: translateY(-6px);

    }

    to {

      opacity: 1;

      transform: translateY(0);

    }

  }

}



@media (max-width: 480px) {

  .header .header-inner,

  .header-one .header-inner {

    padding-left: 0.75rem !important;

    padding-right: 0.75rem !important;

  }



  .header .logo-text,

  .header-one .logo-text {

    font-size: 0.95rem !important;

  }



  .header .nav-toggler,

  .header-one .nav-toggler {

    padding-left: 0.75rem !important;

    font-size: 0.75rem !important;

  }

}



/* =========================================================================

   17. HERO SECTION COUNTER CARDS (CUSTOMER SATISFACTION & PROJECTS COMPLETED)

   Rich Brand Purple Background with Pure White Text

   ========================================================================= */



.hero-counter-card,

.hero-counter-purple,

div:has(> img[alt="Customer Satisfaction"]),

div:has(> img[alt="Project Completed"]),

div:has(> img[src*="counter-area-bg"]) {

  background: #581c87 !important;

  background-color: #581c87 !important;

  background-image: linear-gradient(145deg, #4c1d95 0%, #581c87 50%, #3b0764 100%) !important;

  border: 1px solid rgba(192, 132, 252, 0.25) !important;

  box-shadow: 0 16px 36px -6px rgba(88, 28, 135, 0.4) !important;

  color: #ffffff !important;

}



/* Hide the old green/teal background image textures so purple displays cleanly */

.hero-counter-card > img,

.hero-counter-purple > img,

img[alt="Customer Satisfaction"],

img[alt="Project Completed"],

img[src*="counter-area-bg"] {

  display: none !important;

  opacity: 0 !important;

  visibility: hidden !important;

}



/* Force all text, labels, numbers, and % / K+ symbols to be crisp pure white */

.hero-counter-card *,

.hero-counter-purple *,

div:has(> img[alt="Customer Satisfaction"]) *,

div:has(> img[alt="Project Completed"]) *,

div:has(> img[src*="counter-area-bg"]) * {

  color: #ffffff !important;

  -webkit-text-fill-color: #ffffff !important;

  opacity: 1 !important;

}



.hero-counter-card .font-medium,

.hero-counter-purple .font-medium {

  color: #ffffff !important;

  font-weight: 500 !important;

}



.hero-counter-card .has-animated-number,

.hero-counter-purple .has-animated-number,

.hero-counter-card .animated-number-value,

.hero-counter-purple .animated-number-value,

.hero-counter-card .append,

.hero-counter-purple .append {

  color: #ffffff !important;

  font-weight: 700 !important;

}



/* =========================================================================

   18. FOOTER STYLING & HIGH-CONTRAST LOGO GOVERNANCE

   - Pure white logo text and legal links in the footer bottom bar

   - Refined pill container with generous padding and subtle purple border

   - High-contrast white typography across all footer sections

   ========================================================================= */



/* Footer Bottom Bar (Seamless, Clean - NO PILL DESIGN) */
footer div[class*="bg-gradient-blush/70"],
.footer-editorial div[class*="bg-gradient-blush/70"],
footer div:has(> .logo-wrapper):has(a[href*="terms-conditions"]),
.footer-legal-bar {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 1.75rem !important;
  padding-bottom: 0.5rem !important;
}

@media (max-width: 767px) {
  footer div[class*="bg-gradient-blush/70"],
  .footer-editorial div[class*="bg-gradient-blush/70"],
  footer div:has(> .logo-wrapper):has(a[href*="terms-conditions"]),
  .footer-legal-bar {
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* Footer Logo Text: Pure Crisp White (Fixes dark/invisible text) */

footer .logo-wrapper,

.footer-editorial .logo-wrapper,

footer .logo-wrapper .logo-text,

.footer-editorial .logo-wrapper .logo-text,

footer .logo-text,

.footer-editorial .logo-text {

  color: #ffffff !important;

  -webkit-text-fill-color: #ffffff !important;

  font-weight: 700 !important;

  display: flex !important;

  align-items: center !important;

}



footer .logo-wrapper .logo,

.footer-editorial .logo-wrapper .logo {

  height: 28px !important;

  width: auto !important;

}



/* Footer Legal Links (Terms & Conditions, Privacy Policy) */

footer a[href*="terms-conditions"],

footer a[href*="privacy-policy"],

.footer-editorial a[href*="terms-conditions"],

.footer-editorial a[href*="privacy-policy"] {

  color: rgba(255, 255, 255, 0.85) !important;

  opacity: 1 !important;

  font-weight: 500 !important;

  font-size: 0.95rem !important;

  transition: color 0.2s ease, opacity 0.2s ease !important;

}



footer a[href*="terms-conditions"]:hover,

footer a[href*="privacy-policy"]:hover,

.footer-editorial a[href*="terms-conditions"]:hover,

.footer-editorial a[href*="privacy-policy"]:hover {

  color: #ffffff !important;

  opacity: 1 !important;

  text-decoration: underline !important;

}



/* Copyright Bar */

footer .footer-copyright,

.footer-editorial .footer-copyright {

  color: rgba(255, 255, 255, 0.75) !important;

  opacity: 1 !important;

  font-size: 0.9rem !important;

}



/* Footer Social Buttons */

footer .footer-social a,

.footer-editorial .footer-social a {

  background-color: rgba(88, 28, 135, 0.45) !important;

  border: 1px solid rgba(168, 85, 247, 0.3) !important;

  color: #ffffff !important;

  transition: all 0.25s ease !important;

}



footer .footer-social a:hover,

.footer-editorial .footer-social a:hover {

  background-color: #9333ea !important;

  border-color: #c084fc !important;

  color: #ffffff !important;

  transform: translateY(-2px) !important;

}



footer .footer-social a svg,

.footer-editorial .footer-social a svg {

  stroke: #ffffff !important;

  color: #ffffff !important;

}



/* Footer Content & Links Typography Contrast */

footer h2,

footer h3,

.footer-editorial h2,

.footer-editorial h3 {

  color: #ffffff !important;

}



footer nav a,

.footer-editorial nav a,

footer nav a span,

.footer-editorial nav a span {

  color: rgba(255, 255, 255, 0.8) !important;

  opacity: 1 !important;

}



footer nav a:hover,

.footer-editorial nav a:hover,

footer nav a:hover span,

.footer-editorial nav a:hover span {

  color: #ffffff !important;

}



footer a[href^="tel:"],

footer a[href^="mailto:"],

.footer-editorial a[href^="tel:"],

.footer-editorial a[href^="mailto:"] {

  color: #ffffff !important;

}



footer a[href^="tel:"]:hover,

footer a[href^="mailto:"]:hover,

.footer-editorial a[href^="tel:"]:hover,

.footer-editorial a[href^="mailto:"]:hover {

  color: #c084fc !important;

}



/* Footer 'View Site Map' button */

footer a.btn.btn-primary,

.footer-editorial a.btn.btn-primary {

  background-color: #581c87 !important;

  border-color: #7e22ce !important;

  color: #ffffff !important;

}



footer a.btn.btn-primary span,

.footer-editorial a.btn.btn-primary span {

  color: #ffffff !important;

}





/* =========================================================================

   SERVICES PORTFOLIO & ENTERPRISE BPO FORM ENHANCEMENTS

   ========================================================================= */



/* Solution Cards in Services Page */

.solution-card {

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;

}



.solution-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 16px 32px rgba(88, 28, 135, 0.08) !important;

}



/* Pillar Filter Buttons */

.pillar-btn {

  cursor: pointer !important;

  user-select: none !important;

}



.pillar-btn.active {

  background-color: #581c87 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(88, 28, 135, 0.25) !important;

}



/* BPO Form Inputs & Selects */

form#contact-form select.form-input {

  appearance: auto !important;

  -webkit-appearance: auto !important;

  -moz-appearance: auto !important;

  background-color: #ffffff !important;

  color: #1e1e1e !important;

  font-weight: 500 !important;

  padding: 0.65rem 0.85rem !important;

  border-radius: 0.5rem !important;

  border: 1px solid rgba(0, 0, 0, 0.15) !important;

}



form#contact-form select.form-input:focus,

form#contact-form input.form-input:focus,

form#contact-form textarea.form-input:focus {

  border-color: #581c87 !important;

  outline: none !important;

  box-shadow: 0 0 0 3px rgba(88, 28, 135, 0.15) !important;

}



form#contact-form optgroup {

  font-weight: 700 !important;

  color: #581c87 !important;

  background-color: #f5f3ff !important;

  padding: 4px 0 !important;

}



form#contact-form option {

  color: #1e1e1e !important;

  font-weight: 400 !important;

  background-color: #ffffff !important;

  padding: 6px 10px !important;

}



form#contact-form textarea.form-input {

  color: #1e1e1e !important;

  padding: 0.75rem 0.85rem !important;

}



/* Services active navbar link */

.nav-link.nav-link-active {

  color: #581c87 !important;

  font-weight: 700 !important;

}







}





/* 5-Phase Agile Delivery Framework Layout & Connectors */

.process-cards-row-2 {

  gap: 1.25rem !important;

}

@media (min-width: 1024px) {

  .process-cards-row-2 {

    gap: 160px !important;

  }

  .process-motion-path-row2[data-astro-cid-6gareovf],

  .process-motion-path-row2 {

    display: block !important;

    position: absolute !important;

    z-index: 0 !important;

    pointer-events: none !important;

    top: 75px !important;

    left: calc(50% - 90px) !important;

  }

}

@media (min-width: 1280px) {

  .process-cards-row-2 {

    gap: 180px !important;

  }

}



/* =========================================================================

   10. ANIMATED MORPHING SHAPE & 3D POP-OUT TEAM AVATAR SYSTEM

   ========================================================================= */



@keyframes teamBlobMorphOne {

  0%, 100% {

    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

    transform: rotate(0deg);

  }

  33% {

    border-radius: 35% 65% 65% 35% / 45% 55% 45% 55%;

    transform: rotate(120deg) scale(1.03);

  }

  66% {

    border-radius: 50% 50% 35% 65% / 35% 65% 35% 65%;

    transform: rotate(240deg) scale(0.97);

  }

}



@keyframes teamBlobMorphTwo {

  0%, 100% {

    border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;

    transform: rotate(0deg);

  }

  33% {

    border-radius: 65% 35% 40% 60% / 55% 35% 65% 45%;

    transform: rotate(-120deg) scale(1.04);

  }

  66% {

    border-radius: 35% 65% 55% 45% / 60% 40% 60% 40%;

    transform: rotate(-240deg) scale(0.96);

  }

}



@keyframes teamGlowPulse {

  0%, 100% {

    opacity: 0.45;

    transform: scale(0.95);

  }

  50% {

    opacity: 0.8;

    transform: scale(1.08);

  }

}



@keyframes teamFloatSlow {

  0%, 100% {

    transform: translateY(0px);

  }

  50% {

    transform: translateY(-6px);

  }

}



.team-showcase-card {

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;

  will-change: transform, box-shadow;

}



.team-showcase-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 24px 48px -12px rgba(112, 43, 217, 0.18), 0 12px 24px -8px rgba(0, 0, 0, 0.08) !important;

  border-color: rgba(112, 43, 217, 0.35) !important;

}



.team-avatar-stage {

  position: relative;

  width: 100%;

  height: 400px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  overflow: visible;

  padding-top: 48px;

}



@media (max-width: 640px) {

  .team-avatar-stage {

    height: 350px;

    padding-top: 36px;

  }

}



/* Base Morphing Blob */

.team-avatar-blob {

  position: absolute;

  width: 270px;

  height: 270px;

  bottom: 24px;

  z-index: 1;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;

  will-change: border-radius, transform;

}



@media (max-width: 640px) {

  .team-avatar-blob {

    width: 230px;

    height: 230px;

    bottom: 16px;

  }

}



/* Nixon: Royal Purple & Violet gradient */

.team-blob-nixon {

  background: linear-gradient(135deg, #702bd9 0%, #4f46e5 50%, #9333ea 100%);

  animation: teamBlobMorphOne 12s ease-in-out infinite alternate;

  box-shadow: 0 12px 36px -6px rgba(112, 43, 217, 0.45);

}



/* Alwin: Electric Cobalt & Cyan Teal gradient */

.team-blob-alwin {

  background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 50%, #06b6d4 100%);

  animation: teamBlobMorphTwo 14s ease-in-out infinite alternate;

  box-shadow: 0 12px 36px -6px rgba(37, 99, 235, 0.45);

}



.team-showcase-card:hover .team-avatar-blob {

  transform: scale(1.06);

  filter: brightness(1.1);

}



/* Ambient Pulsing Glow */

.team-avatar-glow {

  position: absolute;

  width: 290px;

  height: 290px;

  bottom: 14px;

  border-radius: 50%;

  filter: blur(36px);

  z-index: 0;

  pointer-events: none;

  animation: teamGlowPulse 6s ease-in-out infinite;

  transition: opacity 0.5s ease;

}



.team-glow-nixon {

  background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(112, 43, 217, 0.3) 60%, transparent 80%);

}



.team-glow-alwin {

  background: radial-gradient(circle, rgba(56, 189, 248, 0.55) 0%, rgba(124, 58, 237, 0.3) 60%, transparent 80%);

}



.team-showcase-card:hover .team-avatar-glow {

  opacity: 0.95;

  filter: blur(42px);

}



/* Orbital Dotted / Border Rings */

.team-avatar-ring {

  position: absolute;

  width: 300px;

  height: 300px;

  bottom: 10px;

  border-radius: 50%;

  border: 1.5px dashed rgba(112, 43, 217, 0.22);

  z-index: 1;

  pointer-events: none;

  animation: teamFloatSlow 5s ease-in-out infinite;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;

}



.team-ring-alwin {

  border-color: rgba(37, 99, 235, 0.25);

}



.team-showcase-card:hover .team-avatar-ring {

  transform: scale(1.1) rotate(15deg);

  border-color: rgba(112, 43, 217, 0.45);

}



/* 3D Pop-out Portrait Image: Head extends over the top! */

.team-avatar-img {

  position: relative;

  z-index: 10;

  height: 315px;

  width: auto;

  max-width: 90%;

  object-fit: contain;

  object-position: bottom center;

  pointer-events: none;

  filter: drop-shadow(0 14px 20px rgba(15, 23, 42, 0.18));

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;

  will-change: transform;

}



@media (max-width: 640px) {

  .team-avatar-img {

    height: 285px;

  }

}



.team-showcase-card:hover .team-avatar-img {

  transform: translateY(-4px) scale(1.04);

  filter: drop-shadow(0 20px 28px rgba(15, 23, 42, 0.25)) brightness(1.02);

}



/* Role pill badge */

.team-role-pill {

  display: inline-flex;

  align-items: center;

  padding: 4px 14px;

  border-radius: 9999px;

  font-size: 0.8125rem;

  font-weight: 600;

  letter-spacing: 0.02em;

  background: rgba(112, 43, 217, 0.08);

  color: #702bd9;

  border: 1px solid rgba(112, 43, 217, 0.2);

  transition: all 0.3s ease;

}



.team-showcase-card:hover .team-role-pill {

  background: #702bd9;

  color: #ffffff;

  border-color: #702bd9;

  box-shadow: 0 4px 14px rgba(112, 43, 217, 0.35);

}



/* =========================================================================

   FREE-FORM TEAM MEMBER DETAIL PAGE (NO SQUARE BORDERS / NO CARD SYSTEM)

   ========================================================================= */



.team-avatar-stage-freeform {

  position: relative;

  width: 100%;

  height: 520px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  overflow: visible;

  padding-top: 60px;

}



@media (max-width: 768px) {

  .team-avatar-stage-freeform {

    height: 440px;

    padding-top: 40px;

  }

}



.team-avatar-img-freeform {

  position: relative;

  z-index: 10;

  height: 420px;

  width: auto;

  max-width: 95%;

  object-fit: contain;

  object-position: bottom center;

  filter: drop-shadow(0 20px 32px rgba(15, 23, 42, 0.20));

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;

  animation: teamFloatSlow 6s ease-in-out infinite;

  will-change: transform;

}



@media (max-width: 768px) {

  .team-avatar-img-freeform {

    height: 350px;

  }

}



.team-avatar-img-freeform:hover {

  transform: translateY(-8px) scale(1.02);

  filter: drop-shadow(0 26px 40px rgba(15, 23, 42, 0.26));

}



/* Skills Badges (Clean badges replacing obsolete progress bars) */

.team-skills-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 14px;

}



.team-skill-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 9px 18px;

  border-radius: 9999px;

  background: #ffffff;

  border: 1.5px solid rgba(88, 28, 135, 0.16);

  box-shadow: 0 3px 12px -2px rgba(88, 28, 135, 0.07);

  font-size: 0.9375rem;

  font-weight: 600;

  color: #1e1e1e;

  letter-spacing: -0.01em;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  cursor: default;

}



.team-skill-badge:hover {

  transform: translateY(-2px);

  border-color: #581c87;

  background: linear-gradient(135deg, rgba(88, 28, 135, 0.05) 0%, rgba(147, 51, 234, 0.08) 100%);

  box-shadow: 0 8px 20px -4px rgba(88, 28, 135, 0.16);

  color: #581c87;

}



.team-skill-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: linear-gradient(135deg, #702bd9 0%, #a855f7 100%);

  box-shadow: 0 0 8px rgba(112, 43, 217, 0.5);

  display: inline-block;

  flex-shrink: 0;

}



/* =========================================================================

   CASE STUDIES HERO STATS CARD CONTRAST FIX

   High-contrast brilliant white text & numbers on dark purple background

   ========================================================================= */



.banner-card-section .bg-accent,

.banner-card-section [class*="bg-accent"],

.pointer-events-auto.bg-accent {

  background-color: #1e0836 !important;

  color: #ffffff !important;

}



.banner-card-section .bg-accent *,

.banner-card-section [class*="bg-accent"] *,

.pointer-events-auto.bg-accent * {

  color: #ffffff !important;

}



.banner-card-section .bg-accent .text-sm,

.banner-card-section .bg-accent .w-26,

.pointer-events-auto.bg-accent .text-sm,

.pointer-events-auto.bg-accent .w-26 {

  color: rgba(255, 255, 255, 0.85) !important;

  font-weight: 500 !important;

}



.banner-card-section .bg-accent .has-animated-number,

.banner-card-section .bg-accent .animated-number-value,

.banner-card-section .bg-accent .append,

.pointer-events-auto.bg-accent .has-animated-number,

.pointer-events-auto.bg-accent .animated-number-value,

.pointer-events-auto.bg-accent .append {

  color: #ffffff !important;

  font-weight: 700 !important;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;

}



.banner-card-section .bg-accent::after,

.banner-card-section .bg-accent [class*="after:"]::after,

.pointer-events-auto.bg-accent [class*="after:"]::after {

  background-color: rgba(255, 255, 255, 0.25) !important;

}





/* =========================================================================

   SERVICES PAGE ENHANCEMENTS & REPAIR

   ========================================================================= */



/* Solution Card Container & Hover Effects */

.solution-card {

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

  background-color: #ffffff !important;

  border: 1px solid rgba(30, 8, 54, 0.1) !important;

  border-radius: 1rem !important;

  padding: 1.75rem !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

}



.solution-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 20px 25px -5px rgba(88, 28, 135, 0.1), 0 8px 10px -6px rgba(88, 28, 135, 0.1) !important;

  border-color: rgba(88, 28, 135, 0.35) !important;

}



/* Solution Card Icon Box - Fixes giant 400px icons */

.solution-card .size-13,

.solution-card [class*="size-13"],

.solution-icon-box {

  width: 52px !important;

  height: 52px !important;

  min-width: 52px !important;

  min-height: 52px !important;

  max-width: 52px !important;

  max-height: 52px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 0.75rem !important;

  margin-bottom: 1.25rem !important;

  transition: all 0.3s ease !important;

  flex-shrink: 0 !important;

}



/* Solution Card SVG Icon - Explicitly bound */

.solution-card svg,

.solution-card .size-6\.5,

.solution-card [class*="size-6.5"],

.solution-icon-box svg {

  width: 26px !important;

  height: 26px !important;

  min-width: 26px !important;

  min-height: 26px !important;

  max-width: 26px !important;

  max-height: 26px !important;

  display: block !important;

  flex-shrink: 0 !important;

}



/* Solution Card Mini Dots */

.solution-card .size-1\.5,

.solution-card [class*="size-1.5"] {

  width: 6px !important;

  height: 6px !important;

  min-width: 6px !important;

  min-height: 6px !important;

  border-radius: 9999px !important;

  display: inline-block !important;

}



/* Hero Status Dot */

.size-2 {

  width: 8px !important;

  height: 8px !important;

  min-width: 8px !important;

  min-height: 8px !important;

  border-radius: 9999px !important;

  display: inline-block !important;

}



/* 2xs badge text */

.text-2xs {

  font-size: 0.6875rem !important;

  line-height: 1rem !important;

}



/* Pill & Tag Styling */

.solution-card .bg-gray-100 {

  background-color: #f3f4f6 !important;

  color: #374151 !important;

  font-size: 0.6875rem !important;

  padding: 0.2rem 0.5rem !important;

  border-radius: 0.375rem !important;

}



/* Strategic Pillar Filter Tabs */

.pillar-btn {

  cursor: pointer !important;

  outline: none !important;

  font-weight: 600 !important;

  transition: all 0.2s ease !important;

}



.pillar-btn.active {

  background-color: #581c87 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(88, 28, 135, 0.25) !important;

}



.pillar-btn:not(.active):hover {

  background-color: rgba(88, 28, 135, 0.08) !important;

  color: #581c87 !important;

}



/* Solution card display transition when filtered */

.solution-card.filter-hidden {

  display: none !important;

}



/* Mid-Page CTA Banner Styling */

.services-cta-banner {

  background: linear-gradient(135deg, #1b0630 0%, #3b0764 45%, #23083e 100%) !important;

  border: 1px solid rgba(168, 85, 247, 0.25) !important;

  border-radius: 1.5rem !important;

  box-shadow: 0 25px 50px -12px rgba(27, 6, 48, 0.45) !important;

  position: relative !important;

  overflow: hidden !important;

  color: #ffffff !important;

  padding: 3rem 2rem !important;

}



@media (min-width: 1024px) {

  .services-cta-banner {

    padding: 4rem 3.5rem !important;

  }

}



.services-cta-banner h2 {

  color: #ffffff !important;

  font-family: var(--font-secondary, sans-serif) !important;

  font-weight: 700 !important;

}



.services-cta-banner p {

  color: rgba(255, 255, 255, 0.88) !important;

}



.services-cta-banner .btn-cta-primary {

  background-color: #ffffff !important;

  color: #1e0836 !important;

  font-weight: 700 !important;

  padding: 0.875rem 1.75rem !important;

  border-radius: 0.75rem !important;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 0.5rem !important;

  transition: all 0.2s ease !important;

  text-decoration: none !important;

}



.services-cta-banner .btn-cta-primary:hover {

  transform: translateY(-2px) !important;

  background-color: #f8fafc !important;

  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3) !important;

}



.services-cta-banner .btn-cta-secondary {

  border: 1px solid rgba(255, 255, 255, 0.35) !important;

  color: #ffffff !important;

  font-weight: 600 !important;

  padding: 0.875rem 1.75rem !important;

  border-radius: 0.75rem !important;

  background-color: rgba(255, 255, 255, 0.08) !important;

  backdrop-filter: blur(8px) !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 0.5rem !important;

  transition: all 0.2s ease !important;

  text-decoration: none !important;

}



.services-cta-banner .btn-cta-secondary:hover {

  background-color: rgba(255, 255, 255, 0.18) !important;

  border-color: rgba(255, 255, 255, 0.6) !important;

  transform: translateY(-2px) !important;

}



/* Section 6: Agile 5-Phase Grid Responsive Fix */

.agile-steps-grid {

  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 1.25rem !important;

}



@media (min-width: 640px) and (max-width: 1023px) {

  .agile-steps-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  }

}



@media (min-width: 1024px) {

  .agile-steps-grid {

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

    gap: 1.25rem !important;

  }

}



.agile-phase-card {

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important;

  border-radius: 1rem !important;

  border: 1px solid rgba(30, 8, 54, 0.1) !important;

  background-color: #ffffff !important;

  padding: 1.5rem !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

  transition: all 0.3s ease !important;

  position: relative !important;

}



.agile-phase-card:hover {

  transform: translateY(-3px) !important;

  box-shadow: 0 12px 20px -5px rgba(88, 28, 135, 0.12) !important;

  border-color: rgba(88, 28, 135, 0.3) !important;

}



/* Arrow connector on desktop for agile framework */

@media (min-width: 1024px) {

  .agile-phase-card:not(:last-child)::after {

    content: "→";

    position: absolute;

    right: -1rem;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.25rem;

    color: #a855f7;

    font-weight: 700;

    z-index: 10;

  }

}



/* Section 5: Industry Pods */

.domain-pod-card {

  background-color: #ffffff !important;

  border: 1px solid rgba(229, 231, 235, 1) !important;

  border-radius: 0.75rem !important;

  padding: 1.5rem !important;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;

  transition: all 0.3s ease !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important;

}



.domain-pod-card:hover {

  border-color: rgba(88, 28, 135, 0.35) !important;

  box-shadow: 0 10px 18px -4px rgba(88, 28, 135, 0.08) !important;

  transform: translateY(-2px) !important;

}





/* =========================================================================

   CONTACT FORM REDESIGN & MODERNIZATION (REFINED & COMPACT)

   ========================================================================= */



.contact-form-card {

  background: #ffffff !important;

  border: 1px solid rgba(88, 28, 135, 0.12) !important;

  border-radius: 1.25rem !important;

  box-shadow: 0 15px 35px -8px rgba(88, 28, 135, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important;

  padding: 2.25rem 2.5rem !important;

  max-width: 48rem !important;

  margin: 0 auto !important;

  position: relative !important;

}



@media (max-width: 640px) {

  .contact-form-card {

    padding: 1.5rem !important;

    border-radius: 1rem !important;

  }

}



.contact-form-grid {

  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 1.125rem !important;

  width: 100% !important;

}



@media (max-width: 640px) {

  .contact-form-grid {

    grid-template-columns: 1fr !important;

    gap: 0.875rem !important;

  }

}



.contact-col-full {

  grid-column: 1 / -1 !important;

}



.contact-form-group {

  display: flex !important;

  flex-direction: column !important;

  gap: 0.3rem !important;

}



.contact-label {

  font-size: 0.8125rem !important;

  font-weight: 600 !important;

  color: #1e1e1e !important;

  letter-spacing: -0.01em !important;

  display: flex !important;

  align-items: center !important;

  gap: 0.25rem !important;

  margin-bottom: 0 !important;

}



.contact-label .req {

  color: #dc2626 !important;

  font-weight: 700 !important;

}



.contact-input,

.contact-select,

.contact-textarea {

  width: 100% !important;

  background-color: #f8fafc !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 0.5rem !important;

  color: #0f172a !important;

  font-size: 0.875rem !important;

  font-family: inherit !important;

  padding: 0.55rem 0.85rem !important;

  height: 2.625rem !important;

  line-height: 1.4 !important;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

  outline: none !important;

  box-sizing: border-box !important;

}



.contact-textarea {

  height: auto !important;

  min-height: 5rem !important;

  resize: vertical !important;

  padding: 0.65rem 0.85rem !important;

}



.contact-select {

  appearance: none !important;

  -webkit-appearance: none !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;

  background-position: right 0.75rem center !important;

  background-size: 0.95rem 0.95rem !important;

  padding-right: 2.25rem !important;

  cursor: pointer !important;

}



.contact-input:focus,

.contact-select:focus,

.contact-textarea:focus {

  background-color: #ffffff !important;

  border-color: #581c87 !important;

  box-shadow: 0 0 0 3px rgba(88, 28, 135, 0.12) !important;

}



.contact-input:hover:not(:focus),

.contact-select:hover:not(:focus),

.contact-textarea:hover:not(:focus) {

  border-color: #94a3b8 !important;

  background-color: #f1f5f9 !important;

}



.contact-input::placeholder,

.contact-textarea::placeholder {

  color: #94a3b8 !important;

  font-size: 0.8125rem !important;

}



/* Compact, perfectly proportioned button */

.contact-submit-btn {

  background: linear-gradient(135deg, #581c87 0%, #3b0764 100%) !important;

  color: #ffffff !important;

  font-weight: 600 !important;

  font-size: 0.875rem !important;

  height: 42px !important;

  line-height: 42px !important;

  padding: 0 1.35rem !important;

  border-radius: 0.5rem !important;

  border: none !important;

  cursor: pointer !important;

  box-shadow: 0 4px 12px rgba(88, 28, 135, 0.28) !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 0.45rem !important;

  width: auto !important;

  max-width: fit-content !important;

  white-space: nowrap !important;

  transition: all 0.2s ease !important;

  text-decoration: none !important;

}



.contact-submit-btn:hover {

  transform: translateY(-1px) !important;

  box-shadow: 0 6px 18px rgba(88, 28, 135, 0.38) !important;

  background: linear-gradient(135deg, #6b21a8 0%, #4c1d95 100%) !important;

}



/* Strictly constrain button SVG */

.contact-submit-btn svg {

  width: 15px !important;

  height: 15px !important;

  min-width: 15px !important;

  min-height: 15px !important;

  max-width: 15px !important;

  max-height: 15px !important;

  flex-shrink: 0 !important;

  display: inline-block !important;

  vertical-align: middle !important;

}



/* Trust chip compact styling */

.contact-trust-chip {

  display: inline-flex !important;

  align-items: center !important;

  gap: 0.35rem !important;

  background-color: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 9999px !important;

  padding: 0.22rem 0.65rem !important;

  font-size: 0.72rem !important;

  font-weight: 600 !important;

  color: #475569 !important;

}



.contact-trust-chip svg {

  width: 13px !important;

  height: 13px !important;

  min-width: 13px !important;

  min-height: 13px !important;

  max-width: 13px !important;

  max-height: 13px !important;

  flex-shrink: 0 !important;

  display: inline-block !important;

}



/* ============================================================
   Lucide Icons Global System
   https://lucide.dev/icons/
   ============================================================ */

.lucide {
  display: inline-block !important;
  vertical-align: middle !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}

.mega-menu-icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(88, 28, 135, 0.08) !important;
  color: #581c87 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.mega-menu-icon-box svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #581c87 !important;
  transition: stroke 0.25s ease !important;
}

.group\/service:hover .mega-menu-icon-box {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: scale(1.06) !important;
}

.group\/service:hover .mega-menu-icon-box svg {
  stroke: #ffffff !important;
}

.group\/service:hover .mega-menu-icon-box i {
  color: #ffffff !important;
}

/* =========================================================================
   10. HIGH-PERFORMANCE 60+ FPS NATIVE SMOOTH SCROLLING & HARDWARE ACCELERATION
   ========================================================================= */
html {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

body {
  overflow-x: hidden !important;
}

/* Deactivate heavy custom cursor follower to free main thread during interactions */
#magic-cursor,
.cursor-follower {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Eliminate layout thrashing transitions during scroll */
.portfolio-motion-item,
[data-parallax-speed] {
  transition: none !important;
  will-change: transform !important;
}

/* =========================================================================
   11. STRICT BRAND CONTRAST & COLOR GOVERNANCE SYSTEM
   RULE 1: IF THERE IS A PURPLE BACKGROUND => THE ICON OR TEXT IS ALWAYS WHITE (#ffffff).
   RULE 2: IF THERE IS A WHITE BACKGROUND => THE TEXT CAN BE EITHER BLACK OR PURPLE.
           ALSO THE SAME GOES FOR ICONS. (NEVER WHITE ON WHITE).
   ========================================================================= */

/* -------------------------------------------------------------------------
   PART A: PURPLE BACKGROUNDS -> ALWAYS 100% WHITE TEXT & WHITE ICONS
   ------------------------------------------------------------------------- */

/* Direct solid purple elements */
.bg-primary:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-primary/"]),
.bg-accent:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-accent/"]),
.btn-primary:not(.bg-white):not([class*="bg-white"]),
.btn-dark:not(.bg-white):not([class*="bg-white"]),
footer.footer-editorial,
.footer-editorial,
.team-filter-btn.active,
.team-filter-btn:hover,
div.bg-primary.rounded-full,
span.bg-primary.rounded-full,
.badge.bg-primary,
span.badge-primary {
  color: #ffffff !important;
}

/* All text descendants inside solid purple elements */
.bg-primary:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-primary/"]) *,
.bg-accent:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-accent/"]) *,
.btn-primary:not(.bg-white):not([class*="bg-white"]) *,
.btn-dark:not(.bg-white):not([class*="bg-white"]) *,
footer.footer-editorial h1,
footer.footer-editorial h2,
footer.footer-editorial h3,
footer.footer-editorial h4,
footer.footer-editorial h5,
footer.footer-editorial h6,
footer.footer-editorial p,
footer.footer-editorial a,
footer.footer-editorial span:not(.lucide),
footer.footer-editorial li,
footer.footer-editorial div:not(.dot-pattern):not(.footer-globe):not(.footer-globe-stage),
.team-filter-btn.active *,
.team-filter-btn:hover * {
  color: #ffffff !important;
}

/* All icons (SVG, Lucide, i) inside solid purple elements MUST BE 100% WHITE */
.bg-primary:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-primary/"]) svg,
.bg-primary:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-primary/"]) i,
.bg-primary:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-primary/"]) [data-lucide],
.bg-primary:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-primary/"]) .lucide,
.bg-accent:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-accent/"]) svg,
.bg-accent:not([class*="after:"]):not([class*="hover:"]):not([class*="group-hover:"]):not([class*="bg-accent/"]) i,
.btn-primary:not(.bg-white):not([class*="bg-white"]) svg,
.btn-primary:not(.bg-white):not([class*="bg-white"]) i,
.btn-primary:not(.bg-white):not([class*="bg-white"]) [data-lucide],
.btn-dark:not(.bg-white):not([class*="bg-white"]) svg,
.btn-dark:not(.bg-white):not([class*="bg-white"]) i,
.btn-dark:not(.bg-white):not([class*="bg-white"]) [data-lucide],
footer.footer-editorial svg:not([data-astro-cid-7hk2feop]),
footer.footer-editorial i,
footer.footer-editorial [data-lucide],
.team-filter-btn.active svg,
.team-filter-btn.active i,
.team-filter-btn:hover svg,
.team-filter-btn:hover i,
div.bg-primary.rounded-full svg,
div.bg-primary.rounded-full i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Specific SVG sub-elements in purple backgrounds */
div.bg-primary.rounded-full svg path,
.btn-primary:not(.bg-white):not([class*="bg-white"]) svg path,
.btn-dark:not(.bg-white):not([class*="bg-white"]) svg path,
footer.footer-editorial svg:not([data-astro-cid-7hk2feop]) path,
footer.footer-editorial svg:not([data-astro-cid-7hk2feop]) circle {
  stroke: #ffffff !important;
}

/* Hover States that turn elements purple: Text & Icons become 100% White */
[class*="hover:bg-primary"]:hover,
[class*="hover:bg-accent"]:hover,
.team-filter-btn:hover,
a.hover\:text-white:hover {
  color: #ffffff !important;
}

[class*="hover:bg-primary"]:hover *,
[class*="hover:bg-accent"]:hover * {
  color: #ffffff !important;
}

[class*="hover:bg-primary"]:hover svg,
[class*="hover:bg-primary"]:hover i,
[class*="hover:bg-primary"]:hover [data-lucide],
[class*="hover:bg-accent"]:hover svg,
[class*="hover:bg-accent"]:hover i,
.team-filter-btn:hover svg,
.team-filter-btn:hover i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Service cards that turn purple on hover */
.group.bg-light[class*="after:bg-primary"]:hover h3,
.group.bg-light[class*="after:bg-primary"]:hover h3 a,
.group.bg-light[class*="after:bg-primary"]:hover p,
.group.bg-light[class*="after:bg-primary"]:hover span,
.group.bg-light[class*="after:bg-primary"]:hover div,
.group.bg-light[class*="after:bg-primary"]:hover .text-underline-animation,
.group.bg-light[class*="after:bg-primary"]:hover .btn {
  color: #ffffff !important;
}

.group.bg-light[class*="after:bg-primary"]:hover svg,
.group.bg-light[class*="after:bg-primary"]:hover i,
.group.bg-light[class*="after:bg-primary"]:hover [data-lucide],
.group.bg-light[class*="after:bg-primary"]:hover .lucide {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Mega-menu items that turn purple on hover */
.group\/service:hover {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
}
.group\/service:hover * {
  color: #ffffff !important;
}
.group\/service:hover .mega-menu-icon-box {
  background: rgba(255, 255, 255, 0.2) !important;
}
.group\/service:hover .mega-menu-icon-box svg,
.group\/service:hover .mega-menu-icon-box i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}


/* -------------------------------------------------------------------------
   PART B: WHITE/LIGHT BACKGROUNDS -> TEXT & ICONS CAN BE BLACK OR PURPLE
           (NEVER WHITE ON WHITE)
   ------------------------------------------------------------------------- */

/* Unhovered Service Cards on white/light background: Black or Purple */
.group.bg-light[class*="after:bg-primary"]:not(:hover) h3,
.group.bg-light[class*="after:bg-primary"]:not(:hover) h3 a,
.group.bg-light[class*="after:bg-primary"]:not(:hover) .text-underline-animation {
  color: #1e1e1e !important;
}

.group.bg-light[class*="after:bg-primary"]:not(:hover) p {
  color: #374151 !important;
}

.group.bg-light[class*="after:bg-primary"]:not(:hover) svg.lucide,
.group.bg-light[class*="after:bg-primary"]:not(:hover) [data-lucide] svg {
  stroke: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* White buttons (e.g. on Pricing page) */
a.btn.bg-white,
a.btn[class*="bg-white"],
button.btn.bg-white,
button.btn[class*="bg-white"] {
  background-color: #ffffff !important;
  color: var(--brand-primary) !important;
  border-color: rgba(88, 28, 135, 0.2) !important;
}

a.btn.bg-white *,
a.btn[class*="bg-white"] *,
button.btn.bg-white *,
button.btn[class*="bg-white"] * {
  color: var(--brand-primary) !important;
}

/* Team filter buttons unactive state on white/light background */
.team-filter-btn:not(.active):not(:hover) {
  background-color: #ffffff !important;
  color: #1e1e1e !important;
  border-color: rgba(88, 28, 135, 0.2) !important;
}

.team-filter-btn:not(.active):not(:hover) * {
  color: #1e1e1e !important;
}

/* Social icons on team cards unhovered: Black or Purple */
.team-showcase-card a:not(:hover) {
  color: #1e1e1e !important;
}

.team-showcase-card a:not(:hover) svg {
  stroke: #1e1e1e !important;
  color: #1e1e1e !important;
}

/* Side-menu burger icon button on header: Dark/Purple on white header */
.sidemenu-action:not(:hover) {
  color: #1e1e1e !important;
}

.sidemenu-action:not(:hover) svg {
  stroke: #1e1e1e !important;
  color: #1e1e1e !important;
}

/* Video play buttons on light/white backgrounds: Purple Icon */
button[data-hs-overlay*="video"]:not(:hover) svg,
a[data-hs-overlay*="video"]:not(:hover) svg,
.play-btn:not(:hover) svg {
  fill: var(--brand-primary) !important;
  stroke: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* Pagination buttons (Default on White/Light: Black or Purple; Active/Hover on Purple: White) */
nav[aria-label="Pagination"] a:not(:hover):not(.active),
nav[aria-label="Pagination"] button:not(:hover):not(.active),
.pagination a:not(:hover):not(.active),
.pagination button:not(:hover):not(.active) {
  color: #1e1e1e !important;
}

nav[aria-label="Pagination"] a:not(:hover):not(.active) svg,
nav[aria-label="Pagination"] button:not(:hover):not(.active) svg,
.pagination a:not(:hover):not(.active) svg,
.pagination button:not(:hover):not(.active) svg {
  color: #1e1e1e !important;
  stroke: #1e1e1e !important;
}

nav[aria-label="Pagination"] a:hover,
nav[aria-label="Pagination"] button:hover,
nav[aria-label="Pagination"] a.active,
nav[aria-label="Pagination"] button.active,
.pagination a:hover,
.pagination button:hover,
.pagination a.active,
.pagination button.active {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
}

nav[aria-label="Pagination"] a:hover svg,
nav[aria-label="Pagination"] button:hover svg,
nav[aria-label="Pagination"] a.active svg,
nav[aria-label="Pagination"] button.active svg,
.pagination a:hover svg,
.pagination button:hover svg,
.pagination a.active svg,
.pagination button.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Header logo and navbar spacing */
@media (min-width: 1024px) {
  .logo-wrapper {
    margin-right: 1.5rem !important;
    flex-shrink: 0 !important;
  }
  .header-inner .flex.items-center.justify-between {
    gap: 1.25rem !important;
  }
}

/* =========================================================================
   FOOTER MODERN REFINEMENT & CLEAN ALIGNMENT
   - Hides dated wireframe globe animation and dense dot-pattern
   - Elegant dark purple solid gradient background
   - Fully responsive, aligned 2-column contact cards with zero overlapping text
   ========================================================================= */

.footer-color-surface {
  background: #0f031b !important;
  background-image: linear-gradient(180deg, #18052e 0%, #120324 50%, #0a0115 100%) !important;
  opacity: 1 !important;
}

.footer-globe-stage,
.footer-globe,
.footer-editorial .dot-pattern {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}