@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');
.entry-title { display: none; }

/* ================================
   GLOBAL SMOOTH FOUNDATION
   ================================ */
.entry-title { display: none; }

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

:root{
    --fl-primary:#6C5CE7;
    --fl-primary-dark:#7C5CFF;
    --fl-primary-light:#7B8EE8;
    --fl-gradient-primary:linear-gradient(135deg,#7B8EE8 0%,#7C5CFF 100%);
    --fl-dark:#2D2645;
    --fl-dark-2:#3D3558;
    --fl-accent:#C9A84C;
    --fl-text:#2D2645;
    --fl-muted:#6A6478;
    --fl-light:#F8F7FC;
    --fl-surface:#FFFFFF;
    --fl-radius:16px;
    --fl-shadow:0 20px 60px rgba(20,15,45,.08);
    --fl-transition:.5s cubic-bezier(.22,1,.36,1);
    --header-offset:116px;
}
/* ================================
   SMOOTH TRANSITIONS (specific, not "all")
   Slower + custom easing = premium feel
   ================================ */
a,
button,
.elementor-button,
.wp-element-button,
.elementor-widget-container,
.elementor-column,
img,
.menu-item a {
    transition-property: color, background-color, border-color, transform, box-shadow, opacity;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ================================
   BUTTON HOVER — slow lift + glow
   ================================ */
.elementor-button,
.wp-element-button,
button {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
                box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1),
                background-color 0.5s ease;
}

.elementor-button:hover,
.wp-element-button:hover,
button:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(107, 78, 255, 0.25);
}

/* Ripple-ish shine sweep on hover */
.elementor-button::before,
.wp-element-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.75s ease;
}

.elementor-button:hover::before,
.wp-element-button:hover::before {
    left: 125%;
}

/* ================================
   CARD / SERVICE BLOCK HOVER
   (Legal Services, Sectors, etc.)
   ================================ */
.elementor-widget-container,
.elementor-column {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.6s ease;
    border-radius: 10px;
}

.elementor-widget-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
}

/* ================================
   IMAGE ZOOM — smoother & slower
   ================================ */
img {
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.8s ease;
}

img:hover {
    transform: scale(1.06);
    filter: brightness(1.03);
}

/* ================================
   MENU LINK UNDERLINE ANIMATION
   ================================ */
.menu-item a {
    position: relative;
    transition: color 0.4s ease;
}

.menu-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background-color: #6b4eff;
    transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-item a:hover {
    color: #6b4eff;
}

.menu-item a:hover::after {
    width: 100%;
}

/* ================================
   SECTION BACKGROUND COLORS
   Alternating for visual rhythm
   NOTE: Replace section-N selectors with
   actual Elementor section IDs from Inspect
   ================================ */

/* Hero section - keep light, subtle gradient */
.elementor-section:nth-of-type(1) {
    background: linear-gradient(135deg, #f7f6fb 0%, #eef0fa 100%);
}

/* Services section - soft off-white */
.elementor-section:nth-of-type(2) {
    background-color: #fbfbfd;
}

/* Alternate light lavender tint */
.elementor-section:nth-of-type(3) {
    background-color: #f4f2fb;
}

/* Approach section - already dark, enhance with gradient */
.elementor-section:nth-of-type(4) {
    background: linear-gradient(135deg, #0f1225 0%, #1a1e3a 100%) !important;
}

/* Sectors section - clean white */
.elementor-section:nth-of-type(5) {
    background-color: #ffffff;
}

/* About/Contact - warm light tint */
.elementor-section:nth-of-type(6) {
    background-color: #f8f7fc;
}

/* ================================
   INPUT FIELDS — smooth focus glow
   ================================ */
input,
textarea,
select {
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #6b4eff !important;
    box-shadow: 0 0 0 4px rgba(107, 78, 255, 0.12);
    outline: none;
}

/* ================================
   SCROLL REVEAL (needs tiny JS below)
   Elements start hidden, fade+slide up
   when they enter viewport
   ================================ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   HEADING UNDERLINE ACCENT ANIMATION
   ================================ */
h2 {
    position: relative;
}

/* ================================
   NUMBER BADGES (01, 02...) — subtle pulse on hover
   ================================ */
.elementor-widget-container:hover .elementor-heading-title:first-child {
    color: #6b4eff;
    transition: color 0.5s ease;
}

/* ================================
   HERO SECTION — Animated Gradient Background
   ================================ */
.hero {
    position: relative;
    overflow: hidden;
    background-color: #0f0d1f;
}

/* Layer 1: Animated flowing gradient mesh */
.hero-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(107, 78, 255, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(80, 200, 200, 0.28) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(147, 100, 255, 0.30) 0%, transparent 55%),
        linear-gradient(135deg, #f7f6fb 0%, #eef0fa 60%, #e8e6f7 100%);
    background-size: 200% 200%;
    animation: heroGradientFlow 18s ease-in-out infinite;
}

@keyframes heroGradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Layer 2: Subtle moving grid pattern */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(107, 78, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107, 78, 255, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: heroGridDrift 25s linear infinite;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}

@keyframes heroGridDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 48px 48px; }
}

/* Layer 3: Floating glow orbs for depth */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.hero::before {
    width: 380px;
    height: 380px;
    top: -100px;
    right: 10%;
    background: radial-gradient(circle, rgba(107, 78, 255, 0.4), transparent 70%);
    animation: floatOrb1 12s ease-in-out infinite;
}

.hero::after {
    width: 320px;
    height: 320px;
    bottom: -80px;
    left: 5%;
    background: radial-gradient(circle, rgba(80, 200, 200, 0.35), transparent 70%);
    animation: floatOrb2 15s ease-in-out infinite;
}

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 40px) scale(1.15); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.1); }
}

/* Make sure content sits above all background layers */
.hero-inner {
    position: relative;
    z-index: 2;
}

.hero-bg,
.hero-grid {
    z-index: 0;
}

/* ================================================
   SERVICES SECTION — soft layered gradient + rows
   ================================================ */
.services-section {
    position: relative;
    background: linear-gradient(180deg, #fbfbfd 0%, #f4f2fb 100%);
    overflow: hidden;
}

.services-section::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(107, 78, 255, 0.10), transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: driftSlow 20s ease-in-out infinite;
    pointer-events: none;
}

.service-row {
    position: relative;
    padding: 28px;
    border-radius: 12px;
    transition: background-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.service-row:hover {
    background-color: #ffffff;
    transform: translateX(6px);
    box-shadow: 0 12px 32px rgba(30, 20, 60, 0.08);
}

.service-num {
    display: inline-block;
    transition: color 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-row:hover .service-num {
    color: #6b4eff;
    transform: scale(1.15);
}

.service-row h3 a {
    position: relative;
    transition: color 0.4s ease;
}

.service-row h3 a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: #6b4eff;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.service-row h3 a:hover::after {
    width: 100%;
}

.service-capabilities span {
    display: inline-block;
    transition: color 0.4s ease, transform 0.4s ease;
}

.service-capabilities span:hover {
    color: #6b4eff;
    transform: translateY(-2px);
}

/* ================================================
   PRACTICE SECTION — subtle warm-tinted background
   ================================================ */
.practice-section {
    background: linear-gradient(160deg, #ffffff 0%, #f7f5fc 50%, #f0edf9 100%);
}

.practice-item {
    padding: 24px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: border-color 0.6s ease,
                background-color 0.6s ease,
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.practice-item:hover {
    border-color: rgba(107, 78, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(30, 20, 60, 0.08);
}

.practice-item h4 {
    transition: color 0.4s ease;
}

.practice-item:hover h4 {
    color: #6b4eff;
}

/* ================================================
   WHY-US SECTION (dark) — animated deep gradient
   ================================================ */
.why-section {
    position: relative;
    background: linear-gradient(135deg, #0f1225 0%, #1a1e3a 50%, #14172c 100%);
    background-size: 220% 220%;
    animation: darkGradientShift 22s ease-in-out infinite;
    overflow: hidden;
}

@keyframes darkGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.why-section::before {
    content: "";
    position: absolute;
    top: 10%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(107, 78, 255, 0.25), transparent 70%);
    filter: blur(70px);
    animation: floatOrb1 14s ease-in-out infinite;
    pointer-events: none;
}

.why-section::after {
    content: "";
    position: absolute;
    bottom: 5%;
    right: 0%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(80, 200, 200, 0.20), transparent 70%);
    filter: blur(70px);
    animation: floatOrb2 17s ease-in-out infinite;
    pointer-events: none;
}

.why-feature {
    position: relative;
    padding: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.6s ease,
                border-color 0.6s ease,
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-feature:hover {
    background: rgba(107, 78, 255, 0.08);
    border-color: rgba(107, 78, 255, 0.3);
    transform: translateY(-8px);
}

.why-feature-num {
    display: inline-block;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.why-feature:hover .why-feature-num {
    color: #8f7bff;
    text-shadow: 0 0 18px rgba(143, 123, 255, 0.6);
}

/* ================================================
   INDUSTRIES SECTION — clean with hover accents
   ================================================ */
.industries-section {
    background: #ffffff;
}

.industry-item {
    padding: 20px;
    border-radius: 8px;
    transition: background-color 0.5s ease,
                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                padding-left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.industry-item:hover {
    background-color: #f4f2fb;
    padding-left: 28px;
}

.industry-num {
    transition: color 0.4s ease;
}

.industry-item:hover .industry-num {
    color: #6b4eff;
}

.industry-item h4 {
    transition: color 0.4s ease;
}

.industry-item:hover h4 {
    color: #1a1330;
}

/* ================================================
   ABOUT SECTION — soft light with pillar hovers
   ================================================ */
.about-section{
    position:relative;
    padding:110px 24px;
    background:linear-gradient(180deg,var(--fl-light) 0%,#fff 100%);
    overflow:hidden;
}

.about-section::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-180px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(108,92,231,.08),transparent 70%);
    pointer-events:none;
}
.pillar-row {
    padding: 18px 0;
    transition: padding-left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                background-color 0.5s ease;
}

.pillar-row:hover {
    padding-left: 12px;
    background-color: rgba(107, 78, 255, 0.04);
}

.pillar-num {
    display: inline-block;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pillar-row:hover .pillar-num {
    color: #6b4eff;
    transform: scale(1.2);
}

/* ================================================
   CONTACT SECTION — gentle gradient + form focus
   ================================================ */
.contact-section {
    background: linear-gradient(135deg, #f7f6fb 0%, #eef0fa 100%);
}

.contact-form {
    background: #ffffff;
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(30, 20, 60, 0.06);
    transition: box-shadow 0.6s ease, transform 0.6s ease;
}

.contact-form:hover {
    box-shadow: 0 28px 60px rgba(30, 20, 60, 0.10);
}

.form-group input,
.form-group select,
.form-group textarea {
    transition: border-color 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #6b4eff !important;
    box-shadow: 0 0 0 4px rgba(107, 78, 255, 0.12);
    outline: none;
}


.contact-detail {
    transition: background-color 0.4s ease, padding-left 0.4s ease;
}

.contact-detail:hover {
    background-color: rgba(107, 78, 255, 0.04);
    padding-left: 8px;
}

.contact-value a {
    transition: color 0.4s ease;
}

.contact-value a:hover {
    color: #6b4eff;
}


/* ================================================
   SHARED KEYFRAMES (agar hero wali CSS already
   diya hai to ye duplicate mat karna — sirf ek
   copy rakho)
   ================================================ */
@keyframes driftSlow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-40px, 30px); }
}

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 40px) scale(1.15); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.1); }
}



/* ================================================
   GOOGLE FONT IMPORT (premium look ke liye)
   Add this at the very top of your CSS
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

/* ================================================
   BASE TYPOGRAPHY
   ================================================ */
body {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #2a2438;
    letter-spacing: 0.01em;
}

/* ================================================
   HERO SECTION TYPOGRAPHY
   ================================================ */
.hero-meta {
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6b4eff;
}

.hero h1{
    font-family:'Playfair Display',serif;
    font-size:clamp(44px,4.2vw,52px);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-0.5px;
    color:#1a1330;
    max-width:12ch;
}

.hero h1 em {
    font-style: italic;
    color: #6b4eff;
}

.hero-desc {
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 400;
    line-height: 1.75;
    color: #5a5468;
    max-width: 640px;
}



/* ================================================
   SECTION HEADINGS (used across services, practice,
   industries, about, contact)
   ================================================ */
.section-intro h2,
.why-intro h2,
.about-section h2,
.contact-grid h2{
    font-family:'Playfair Display',serif;
    font-size:clamp(32px,3vw,40px);
    font-weight:600;
    line-height:1.2;
    letter-spacing:-0.3px;
    color:var(--fl-dark);
    margin-bottom:24px;
}

.section-intro h2 em,
.why-intro h2 em,
.about-section h2 em,
.contact-grid h2 em{
    font-style:italic;
    color:var(--fl-primary-solid);
}

.why-intro h2.on-dark,
.eyebrow.on-dark {
    color: #ffffff;
}

.why-intro h2.on-dark em {
    color: #8f7bff;
}

.section-desc,
.why-intro-text,
.contact-lead {
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 400;
    line-height: 1.7;
    color: #6a6478;
}

.why-intro-text {
    color: #b8b4cc;
}

.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b4eff;
}

/* ================================================
   SERVICES SECTION
   ================================================ */
.service-num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    color: #c4bce8;
}

.service-row h3 {
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 600;
    
}

.service-row h3 a {
    color: #1a1330;
    text-decoration: none;
}

.service-row p {
    font-size: 15px;
    line-height: 1.7;
    color: #6a6478;
    margin: 10px 0 14px;
}

.service-capabilities span {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #8a84a0;
}

/* ================================================
   PRACTICE SECTION
   ================================================ */
.practice-item h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1330;
    margin-bottom: 8px;
}

.practice-item p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #6a6478;
}

/* ================================================
   WHY-US SECTION (dark)
   ================================================ */
.why-feature-num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 600;
    color: #4a4570;
}

.why-feature h4 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 10px 0 8px;
}

.why-feature p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #a8a3bd;
}

/* ================================================
   INDUSTRIES SECTION
   ================================================ */
.industry-num {
    font-size: 13px;
    font-weight: 600;
    color: #c4bce8;
    letter-spacing: 0.04em;
}

.industry-item h4 {
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 600;
    color: #3a3450;
    margin-top: 6px;
}

/* ================================================
   ABOUT SECTION
   ================================================ */
.about-text{
    max-width:680px;
    font-size:16px;
    font-weight:400;
    line-height:1.75;
    color:var(--fl-muted);
    margin:0 0 20px;
}

.pillars-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b4eff;
    margin-bottom: 4px;
}

.pillars-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 600;
    color: #1a1330;
    margin-bottom: 20px;
}

.pillar-num {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: #c4bce8;
}

.pillar-row h5 {
    font-size: 16.5px;
    font-weight: 600;
    color: #1a1330;
    margin-bottom: 4px;
}

.pillar-row p {
    font-size: 14px;
    line-height: 1.65;
    color: #6a6478;
}

/* ================================================
   CONTACT SECTION
   ================================================ */
.contact-form h3 {
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 600;
    color: #1a1330;
}

.contact-form-sub {
    font-size: 14px;
    color: #8a84a0;
    margin-bottom: 20px;
}

.contact-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b4eff;
}

.contact-value {
    font-size: 15px;
    line-height: 1.6;
    color: #3a3450;
}

.form-group label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a84a0;
}

.form-group input,
.form-group select,
.form-group textarea {
    font-size: 15px;
    font-family: 'Inter', sans-serif;
}
.submit-btn{
    position:relative;
    overflow:hidden;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
    transition:transform .35s ease,box-shadow .35s ease,background-color .35s ease;
}

.submit-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(108,92,231,.35);
}

.hero-actions .btn{
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
}

/* ================================================
   DROPDOWN TRIGGER
   ================================================ */
.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dropdown-trigger .chevron {
    display: inline-block;
    font-size: 10px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #8a84a0;
}

.dropdown.active .dropdown-trigger .chevron,
.dropdown:hover .dropdown-trigger .chevron {
    transform: rotate(180deg);
    color: #6b4eff;
}

/* ================================================
   MEGA DROPDOWN — floating card overlay
   ================================================ */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: 360px;
    max-width: min(360px, 92vw);
    max-height: 520px;
    overflow-x: hidden;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 0;

    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 24px 60px rgba(20, 15, 45, 0.16), 0 4px 16px rgba(20, 15, 45, 0.08);
    border: 1px solid rgba(107, 78, 255, 0.1);

    list-style: none;
    margin: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0.5s;
    z-index: 200;
}

/* Little arrow/notch pointing up to trigger */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid rgba(107, 78, 255, 0.08);
    border-top: 1px solid rgba(107, 78, 255, 0.08);
    border-radius: 3px 0 0 0;
}

/* Show on hover (desktop) */
.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ================================================
   DROPDOWN ITEMS — individual service links
   ================================================ */
.dropdown-menu li {
    list-style: none;
}

.dropdown-menu .service-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #3a3450;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.35s ease,
                color 0.35s ease,
                transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                padding-left 0.35s ease;
}

.dropdown-menu .service-link::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8d2f0;
    flex-shrink: 0;
    transition: background-color 0.35s ease, transform 0.35s ease;
}

.dropdown-menu .service-link:hover {
    background-color: #f4f2fb;
    color: #6b4eff;
    transform: translateX(4px);
}

.dropdown-menu .service-link:hover::before {
    background-color: #6b4eff;
    transform: scale(1.4);
}

/* Stagger fade-in for top-level dropdown items only */
.dropdown-menu > li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.dropdown:hover .dropdown-menu > li,
.dropdown.active .dropdown-menu > li {
    opacity: 1;
    transform: translateY(0);
}

/* Accordion sub-services — hidden until parent is opened */
.dropdown-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.45s ease,
                visibility 0.45s ease;
}

.dropdown-service-group.open > .dropdown-submenu {
    max-height: 360px;
    opacity: 1;
    visibility: visible;
}

.dropdown-submenu li {
    opacity: 1 !important;
    transform: none !important;
}

.dropdown-service-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #2d2645;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.dropdown-service-trigger.is-link {
    text-decoration: none;
}

.dropdown-service-group {
    list-style: none;
    margin: 0 10px;
    border-radius: 14px;
}

.dropdown-service-group.open {
    background: rgba(107, 78, 255, 0.05);
}

.dropdown-menu > li:nth-child(1) { transition-delay: 0.03s; }
.dropdown-menu > li:nth-child(2) { transition-delay: 0.06s; }
.dropdown-menu > li:nth-child(3) { transition-delay: 0.09s; }
.dropdown-menu > li:nth-child(4) { transition-delay: 0.12s; }
.dropdown-menu > li:nth-child(5) { transition-delay: 0.15s; }
.dropdown-menu > li:nth-child(6) { transition-delay: 0.18s; }
.dropdown-menu > li:nth-child(7) { transition-delay: 0.21s; }
.dropdown-menu > li:nth-child(8) { transition-delay: 0.24s; }
.dropdown-menu > li:nth-child(9) { transition-delay: 0.27s; }
.dropdown-menu > li:nth-child(10) { transition-delay: 0.30s; }
.dropdown-menu > li:nth-child(11) { transition-delay: 0.33s; }
.dropdown-menu > li:nth-child(12) { transition-delay: 0.36s; }

/* ================================================
   REGULAR NAV LINKS — underline hover
   ================================================ */
.nav-links>li>a:not(.nav-cta):not(.dropdown-trigger){
    position:relative;
    font-size:14.5px;
    font-weight:500;
    color:var(--fl-dark);
    text-decoration:none;
    transition:color .4s ease;
}

.nav-links>li>a:not(.nav-cta):not(.dropdown-trigger)::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--fl-primary);
    transition:width .4s cubic-bezier(.65,0,.35,1);
}

.nav-links>li>a:not(.nav-cta):not(.dropdown-trigger):hover{
    color:var(--fl-primary);
}

.nav-links>li>a:not(.nav-cta):not(.dropdown-trigger):hover::after{
    width:100%;
}

/* ================================================
   GET IN TOUCH BUTTON
   ================================================ */
.nav-cta{
    padding:11px 22px;
    border-radius:8px;
    background:var(--fl-gradient-primary);
    color:#fff!important;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;
    transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}

.nav-cta:hover{
    background:var(--fl-gradient-primary);
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(108,92,231,.35);
}


/* ================================================
   MOBILE MENU — overlay panel
   ================================================ */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    box-shadow: -10px 0 40px rgba(20, 15, 45, 0.15);
    z-index: 999;
    overflow-y: auto;
    padding: 24px 24px 40px;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-menu.active,
.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu > ul > li {
    border-bottom: 1px solid #f0edf9;
}

.mobile-menu > ul > li > a {
    display: block;
    padding: 16px 4px;
    font-size: 16px;
    font-weight: 500;
    color: #1a1330;
    text-decoration: none;
    transition: color 0.35s ease, padding-left 0.35s ease;
}

.mobile-menu > ul > li > a:hover,
.mobile-menu > ul > li > a:active {
    color: #6b4eff;
    padding-left: 10px;
}

/* ================================================
   MOBILE DROPDOWN TRIGGER (Services ▼)
   ================================================ */
.mobile-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 4px;
    font-size: 16px;
    font-weight: 500;
    color: #1a1330;
    cursor: pointer;
    user-select: none;
    transition: color 0.35s ease;
}

.mobile-dropdown-trigger:hover {
    color: #6b4eff;
}

.mobile-dropdown-trigger::after {
    content: "▼";
    display: inline-block;
    font-size: 10px;
    color: #8a84a0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.35s ease;
}

/* Hide the raw ▼ character typed in HTML, use the pseudo-element instead */
.mobile-dropdown-trigger {
    font-size: 16px;
}

.mobile-dropdown.active .mobile-dropdown-trigger::after,
.mobile-dropdown.open .mobile-dropdown-trigger::after {
    transform: rotate(180deg);
    color: #6b4eff;
}

/* ================================================
   MOBILE DROPDOWN MENU — accordion expand
   ================================================ */
.mobile-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: #faf9fd;
    border-radius: 10px;
    margin: 0 0 0 0;
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.4s ease,
                margin 0.5s ease;
}

.mobile-dropdown.active .mobile-dropdown-menu,
.mobile-dropdown.open .mobile-dropdown-menu {
    max-height: 600px;
    opacity: 1;
    margin: 6px 0 10px;
}

.mobile-dropdown-menu li {
    border-bottom: none !important;
}

.mobile-dropdown-menu .service-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #5a5468;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease, background-color 0.3s ease;
}

.mobile-dropdown-menu .service-link::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c4bce8;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.mobile-dropdown-menu .service-link:hover,
.mobile-dropdown-menu .service-link:active {
    color: #6b4eff;
    padding-left: 22px;
    background-color: #f4f2fb;
}

.mobile-dropdown-menu .service-link:hover::before {
    background: #6b4eff;
}

/* ================================================
   MOBILE MENU TOGGLE BUTTON (hamburger)
   ================================================ */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #1a1330;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                background-color 0.3s ease;
}

/* Hamburger to X animation when menu open */
.menu-toggle.active span:nth-child(1),
.menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2),
.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3),
.menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ================================================
   BACKDROP OVERLAY (jab mobile menu khula ho)
   ================================================ */
body.menu-open::before,
.mobile-menu-overlay {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 45, 0.45);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

body.menu-open::before {
    opacity: 1;
    pointer-events: auto;
}

/* ================================================
   RESPONSIVE: show hamburger, hide desktop nav below 900px
   ================================================ */
@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    .menu-toggle {
        display: flex;
    }
}

@media (min-width: 901px) {
    .mobile-menu {
        display: none;
    }
}

/* ================================================
   FIX: Remove gap, add invisible hover bridge
   ================================================ */
/* FIX: hover bridge — single column accordion menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: 360px;
    max-width: min(360px, 92vw);
    max-height: 520px;
    margin-top: 18px;

    display: flex;
    flex-direction: column;
    gap: 0;

    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 24px 60px rgba(20, 15, 45, 0.16), 0 4px 16px rgba(20, 15, 45, 0.08);
    border: 1px solid rgba(107, 78, 255, 0.1);

    list-style: none;
    margin-left: 0;
    overflow-x: hidden;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0.5s;
    z-index: 200;
}

.dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    max-width: min(360px, 92vw);
    height: 18px;
    background: transparent;
}

/* ================================================
   MOBILE HAMBURGER ICON — fix color to dark
   ================================================ */
.menu-toggle span {
    background-color: #1a1330 !important;
}

/* Agar menu open hone par icon "X" ban raha hai (cross icon),
   to uske transformed state ka color bhi fix rahega upar wale rule se.
   Lekin agar open state par alag class lagti hai (jaise .active ya .open),
   to explicitly handle karo: */
.menu-toggle.active span,
.menu-toggle.open span {
    background-color: #1a1330 !important;
}

/* Agar mobile menu background dark hai aur usment hamburger 
   white dikhna chahiye jab menu open ho (taaki visible rahe), 
   to ye alag rule use karo instead: */
.mobile-menu.active ~ .menu-toggle span,
#mobileMenu.active ~ .menu-toggle span {
    background-color: #ffffff !important;
}

.menu-toggle svg,
.menu-toggle path {
    stroke: #1a1330 !important;
    fill: #1a1330 !important;
}

/* ================================================
   MOBILE SERVICES DROPDOWN — collapsible submenu
   ================================================ */
.mobile-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.mobile-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    list-style: none;
    padding-left: 16px;
    margin: 0;
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.4s ease;
}

/* When JS adds "open" or "active" class to the menu itself */
.mobile-dropdown-menu.open,
.mobile-dropdown-menu.active,
.mobile-dropdown-menu.show {
    max-height: 600px;
    opacity: 1;
}

/* When JS adds "active"/"open" class to the parent <li class="mobile-dropdown"> instead */
.mobile-dropdown.active .mobile-dropdown-menu,
.mobile-dropdown.open .mobile-dropdown-menu {
    max-height: 600px;
    opacity: 1;
}

.mobile-dropdown-menu .service-link {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #6a6478;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.mobile-dropdown-menu .service-link:hover {
    color: #6b4eff;
    padding-left: 6px;
}

/* Chevron rotate when open */
.mobile-dropdown-trigger::after {
    content: "";
}

.mobile-dropdown.active .mobile-dropdown-trigger,
.mobile-dropdown.open .mobile-dropdown-trigger {
    color: #6b4eff;
}

@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
        background-color: black;
        color: white;
    }
}

/* ================================================
   HAMBURGER FIX — override theme conflicts
   ================================================ */
@media (max-width: 900px) {
    .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer;
        z-index: 1001;
    }
}

.menu-toggle {
    color: transparent !important;
}

.menu-toggle span {
    display: block !important;
    width: 26px;
    height: 3px;
    background-color: #1a1330 !important;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.3s ease;
}

/* Hamburger → X animation on open */
.menu-toggle.active span:nth-child(1),
.mobile-menu.active ~ .menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2),
.mobile-menu.active ~ .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3),
.mobile-menu.active ~ .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ================================================
   PRACTICE SECTION — Premium Card Redesign
   ================================================ */
.practice-section {
    position: relative;
    background: linear-gradient(160deg, #fdfcff 0%, #f3f1fb 60%, #ece8f9 100%);
    padding: 100px 0;
    overflow: hidden;
}

.practice-section::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(107, 78, 255, 0.08), transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.practice-section::after {
    content: "";
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.08), transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.practice-section .section-inner {
    position: relative;
    z-index: 1;
}

/* ================================================
   GRID — proper gap, no shared borders
   ================================================ */
.practice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
	background:none;
	border:none;
	
}

/* ================================================
   INDIVIDUAL CARDS — floating, shadowed
   ================================================ */
.practice-item {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    border: 1px solid rgba(107, 78, 255, 0.08);
    box-shadow: 0 2px 8px rgba(30, 20, 60, 0.04);
    overflow: hidden;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.55s ease;
}

/* Top accent bar that grows in on hover */
.practice-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6b4eff, #4ecdc4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Corner glow that fades in */
.practice-item::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -40%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(107, 78, 255, 0.10), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.practice-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(30, 20, 60, 0.12);
    border-color: rgba(107, 78, 255, 0.25);
}

.practice-item:hover::before {
    transform: scaleX(1);
}

.practice-item:hover::after {
    opacity: 1;
}

/* ================================================
   NUMBER BADGE — small icon-style index circle
   ================================================ */
.practice-item {
    counter-increment: practice-counter;
}

.practice-grid {
    counter-reset: practice-counter;
}

.practice-item::marker {
    content: none;
}

.practice-item h4 {
    position: relative;
    font-size: 18.5px;
    font-weight: 700;
    color: #1a1330;
    margin: 0 0 10px;
    padding-bottom: 14px;
    padding-left: 44px;
    transition: color 0.4s ease;
}

/* Circular numbered badge before heading */
.practice-item h4::before {
    content: counter(practice-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #6b4eff;
    background: linear-gradient(135deg, #f0edfc, #e8f7f5);
    border-radius: 50%;
    border: 1px solid rgba(107, 78, 255, 0.15);
    transition: background 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.practice-item:hover h4::before {
    background: linear-gradient(135deg, #6b4eff, #4ecdc4);
    color: #ffffff;
    transform: scale(1.1) rotate(-8deg);
}

.practice-item:hover h4 {
    color: #6b4eff;
}

.practice-item p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #6a6478;
    margin: 0;
    padding-left: 44px;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
    .practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .practice-section {
        padding: 64px 0;
    }
    .practice-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .practice-item {
        padding: 26px 22px;
    }
}

/* ================================================
   INDUSTRIES SECTION — Icon Tile Grid Redesign
   ================================================ */
.industries-section {
    position: relative;
    background: #ffffff;
    padding: 100px 0;
    overflow: hidden;
}

.industries-section::before {
    content: "";
    position: absolute;
    top: 20%;
    right: -8%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(107, 78, 255, 0.05), transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.industries-section .section-inner {
    position: relative;
    z-index: 1;
}

/* ================================================
   GRID — clean tile layout
   ================================================ */
.industries-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 48px;
	background:none;
	border:none;
}

.industry-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fbfaff;
    border: 1px solid rgba(107, 78, 255, 0.08);
    border-radius: 14px;
    padding: 22px 24px;
    overflow: hidden;
    transition: background 0.5s ease,
                border-color 0.5s ease,
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sliding gradient sheen on hover */
.industry-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(107, 78, 255, 0.06), transparent);
    transition: left 0.7s ease;
}

.industry-item:hover {
    background: #ffffff;
    border-color: rgba(107, 78, 255, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(30, 20, 60, 0.10);
}

.industry-item:hover::before {
    left: 100%;
}

/* ================================================
   NUMBER — circular badge, left side
   ================================================ */
.industry-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0edfc, #e8f7f5);
    border: 1px solid rgba(107, 78, 255, 0.15);
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 700;
    color: #6b4eff;
    transition: background 0.5s ease,
                color 0.5s ease,
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.industry-item:hover .industry-num {
    background: linear-gradient(135deg, #6b4eff, #4ecdc4);
    color: #ffffff;
    transform: scale(1.12) rotate(-10deg);
}

/* ================================================
   TITLE
   ================================================ */
.industry-item h4 {
    font-size: 15.5px;
    font-weight: 600;
    color: #2a2438;
    margin: 0;
    transition: color 0.4s ease;
}

.industry-item:hover h4 {
    color: #1a1330;
}

/* Small arrow indicator that appears on hover */
.industry-item::after {
    content: "→";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    color: #6b4eff;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.industry-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
    .industries-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .industries-section {
        padding: 64px 0;
    }
    .industries-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .industry-item {
        padding: 18px 20px;
    }
}

.why-features {
	gap:10px;
	background:none;
	border-bottom:none;
	border-top:none;
}

.nav-links {
	margin-bottom:0px;
}

.form-success {
    text-align: center;
    padding: 40px 20px;
}

.form-success h3 {
    font-size: 22px;
    font-weight: 600;
    color: #6b4eff;
    margin-bottom: 10px;
}

.form-success p {
    font-size: 15px;
    color: #6a6478;
    line-height: 1.6;
}

.form-group select {
	height:45px
}

#navbar {
    position: sticky;
    z-index: 100;
}

.logo-wordmark {
	line-height:2;
}

@media (max-width: 640px) {
    .practice-section {
        padding: 64px 24px;
    }
	.service-row {
		    padding: 48px 0px
					48px 0;
		gap:0px;
	}
}

@media (max-width: 600px) {
    .industries-section {
        padding: 64px 24px;
    }
}

.service-row p {
	text-align:justify;
}


.section-desc {
	text-align:justify;
}

.why-feature p {
	text-align:justify;
}



.mobile-menu {
	display:block;
}
.cnb-single.cnb-text span {
	display:none;
}

nav.scrolled .dropdown:hover .dropdown-menu {
    top: 100%
}