/*  core value section ends */


         /* General Font Import */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
    
         /* --- Base Body Styles --- */
         body {
             margin: 0;
             font-family: 'Inter', sans-serif;
             background-color: #000000;
             color: #ffffff;
             min-height: 100vh;
             overflow-x: hidden;
         }
 
         /* ========================================
         LOGO STYLES
         ======================================== */
         .fixed-logo-wrapper {
             position: fixed;
             top: 1rem;
             left: 2rem;
             z-index: 1000;
             cursor: pointer;
         }
 
         .logo-container {
             display: flex;
             align-items: center;
             gap: 0.75rem;
             background: linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.35));
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
             padding: 0.6rem 1.25rem 0.6rem 0.6rem;
             border-radius: 50px;
             border: 1.5px solid rgba(255, 255, 255, 0.45);
             box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12), 0 0 24px 4px rgba(255, 255, 255, 0.18);
             animation: glassy-pulse 2.5s infinite alternate;
             transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         @keyframes glassy-pulse {
             0% {
                 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12), 0 0 24px 4px rgba(255, 255, 255, 0.18);
             }
             100% {
                 box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.18), 0 0 40px 8px rgba(255, 255, 255, 0.28);
             }
         }
 
         .logo-mark {
             width: 45px;
             height: 45px;
             flex-shrink: 0;
             transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .logo-piece {
             fill: none;
             stroke: #f7f7f7;
             stroke-width: 6;
             stroke-linecap: round;
             stroke-linejoin: round;
             stroke-dasharray: 250;
             stroke-dashoffset: 250;
             animation: draw-in 1.5s ease-out 0.5s forwards;
             transition: stroke 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .logo-piece.piece-2 { animation-delay: 0.7s; }
         .logo-piece.piece-3 { animation-delay: 0.9s; }
 
         @keyframes draw-in {
             to { stroke-dashoffset: 0; }
         }
 
         .logo-text {
             color: #f7f7f7;
             font-size: 1.2rem;
             font-weight: 500;
             letter-spacing: 0.5px;
             white-space: nowrap;
             transition: color 0.4s ease;
             text-shadow: 0 2px 8px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.08);
         }
 
         .fixed-logo-wrapper:hover .logo-container {
             background: linear-gradient(135deg, rgba(25, 25, 25, 0.4), rgba(25, 25, 25, 0.2));
             border-color: rgba(255, 255, 255, 0.2);
             transform: scale(1.05) translateY(-2px);
             box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
         }
 
        
 
         /* ========================================
         HERO STYLES
         ======================================== */
         .hero-section {
             display: flex;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
             padding: 4rem 2rem;
             box-sizing: border-box;
         }
 
         .hero-container {
             display: grid;
             grid-template-columns: 1fr;
             gap: 4rem;
             width: 100%;
             max-width: 1100px;
             align-items: center;
         }
         
         @keyframes text-fade-in {
             from { opacity: 0; }
             to { opacity: 1; }
         }
 
         @keyframes panel-slide-up {
             from {
                 opacity: 0;
                 transform: translateY(50px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
 
         .hero-text-content {
             text-align: center;
             animation: text-fade-in 1s 0.2s ease-out forwards;
             opacity: 0;
         }
 
         .hero-title {
             font-size: 2.75rem;
             font-weight: 700;
             color: #ffffff;
             margin-bottom: 1rem;
             line-height: 1.2;
         }
 
         .hero-description {
             font-size: 1.125rem;
             color: #a0a0a0;
             line-height: 1.7;
             max-width: 450px;
             margin: 0 auto 2.5rem auto;
         }
 
         .cta-button {
             background: #ffffff;
             color: #000000;
             border: 2px solid #ffffff;
             padding: 0.8rem 2rem;
             border-radius: 4px;
             font-weight: 700;
             font-size: 0.875rem;
             cursor: pointer;
             transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
         }
 
         .cta-button:hover {
             background-color: #1a1a1a;
             color: #ffffff;
             border-color: #1a1a1a;
         }
 
         .services-panel {
             background-color: #0a0a0a;
             border: 1px solid #222;
             border-radius: 8px;
             padding: 2rem;
             opacity: 0;
             animation: panel-slide-up 0.8s 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
         }
 
         .services-title {
             font-size: 0.75rem;
             font-weight: 700;
             color: #777;
             text-transform: uppercase;
             letter-spacing: 1.2px;
             margin-bottom: 1.5rem;
         }
 
         .service-item {
             display: flex;
             align-items: center;
             padding: 1.25rem 0;
             border-bottom: 1px solid #222;
             text-decoration: none;
             color: #ffffff;
             transition: background-color 0.3s ease;
         }
 
         .services-list .service-item:last-of-type {
             border-bottom: none;
         }
 
         .service-item:hover {
             background-color: #111;
         }
 
         .icon-wrapper {
             width: 32px;
             height: 32px;
             margin-right: 1.5rem;
             color: #e0e0e0;
             flex-shrink: 0;
         }
         
         /* CORRECTED: This ensures the name and description stack vertically */
         .service-text {
             display: flex;
             flex-direction: column;
             flex-grow: 1;
         }
 
         .service-name {
             font-size: 1rem;
             font-weight: 500;
             color: #f5f5f5;
             margin-bottom: 0.25rem;
         }
 
         .service-description {
             font-size: 0.875rem;
             color: #888;
         }
 
         .chevron-wrapper {
             width: 20px;
             height: 20px;
             color: #555;
             transition: transform 0.3s ease, color 0.3s ease;
         }
         
         .service-item:hover .chevron-wrapper {
             color: #fff;
             transform: translateX(4px);
         }
 
         .explore-link {
             display: flex;
             align-items: center;
             justify-content: space-between;
             text-decoration: none;
             padding-top: 1.5rem;
             margin-top: 1rem;
             border-top: 1px solid #222;
             font-size: 0.875rem;
             font-weight: 700;
             color: #a0a0a0;
             transition: color 0.3s ease;
         }
 
         .explore-link:hover {
             color: #fff;
         }
 
         .explore-link:hover .chevron-wrapper {
             transform: translateX(4px);
         }
 
         /* ========================================
         NAVBAR STYLES
         ======================================== */
         @keyframes slide-up-fade-in {
             from {
                 bottom: -100px;
                 opacity: 0;
             }
             to {
                 bottom: 20px;
                 opacity: 1;
             }
         }
 
     
 
     
         
 
         /* .quote-btn:hover {
             transform: scale(1.05);
             box-shadow: 0 8px 24px rgba(6, 174, 158, 0.3), 0 4px 16px rgba(0,0,0,0.15);
             background-image: linear-gradient(135deg, rgba(6, 174, 158, 1) 0%, rgba(6, 174, 158, 0.85) 100%);
         }
 
         .quote-btn::after {
             content: '';
             position: absolute;
             top: -50%;
             left: -50%;
             width: 200%;
             height: 200%;
             background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
             transform: rotate(25deg);
             transition: all 0.5s ease;
             opacity: 0;
         }
 
         .quote-btn:hover::after {
             opacity: 1;
             animation: shimmer 1.5s infinite linear;
         }
 
         @keyframes shimmer {
             0% { transform: translateX(-100%) rotate(25deg); }
             100% { transform: translateX(100%) rotate(25deg); }
         } */
 
         /* --- Responsive Design Adjustments --- */
         @media (max-width: 900px) {
             .hero-container {
                 grid-template-columns: 1fr;
                 gap: 3rem;
                 text-align: center;
             }
             .hero-text-content {
                 text-align: center;
                 margin-top: 2rem;
             }
             .hero-description {
                 margin: 0 auto 2.5rem auto;
             }
             .hero-title { font-size: 2.25rem; }
         }
 
         @media (min-width: 901px) {
             .hero-container {
                 grid-template-columns: 1fr 1fr;
             }
             .hero-text-content {
                 text-align: left;
             }
             .hero-description {
                 margin: 0 0 2.5rem 0;
             }
         }
        
 
      
 
         @media (max-width: 480px) {
             .fixed-logo-wrapper {
                 top: 0.25rem;
                 left: 0.25rem;
                 padding: 0;
             }
             .logo-container {
                 padding: 0.4rem 0.9rem 0.4rem 0.4rem;
             }
             .logo-mark {
                 width: 36px;
                 height: 36px;
             }
             .logo-text {
                 font-size: 1rem;
             }
         }
 
 
         /* style for about us  */
           /* Custom styles for the ultimate black & white design */
         :root {
             /* Responsive Font Sizes */
             --font-h1-mobile: 1.75rem;
             --font-h3-mobile: 1.25rem;
             --font-p-mobile: 1rem;
 
             --font-h1-tablet: 2.25rem;
             --font-h3-tablet: 1.5rem;
             --font-p-tablet: 1.125rem;
 
             --font-h1-desktop: 2.75rem;
             --font-h3-desktop: 2rem;
             --font-p-desktop: 1.25rem;
         }
 
 
         .antialiased{
             font-family: 'TikTok Sans', sans-serif;
             background-color: #000000;
             color: whitesmoke;
             overflow-x: hidden;
         }
 
         /* Custom Cursor */
         .cursor {
             width: 20px;
             height: 20px;
             border: 2px solid #ffffff;
             border-radius: 50%;
             position: fixed;
             pointer-events: none;
             z-index: 9999;
             transition: all 0.1s ease;
             mix-blend-mode: difference;
         }
 
         .cursor-follower {
             width: 40px;
             height: 40px;
             background: rgba(255, 255, 255, 0.1);
             border-radius: 50%;
             position: fixed;
             pointer-events: none;
             z-index: 9998;
             transition: all 0.3s ease;
             backdrop-filter: blur(5px);
         }
 
         .cursor-expand {
             transform: scale(2);
             background: rgba(255, 255, 255, 0.2);
         }
 
         /* Animated Aurora Background with Mesh Gradient */
         .aurora-background {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             z-index: -10;
             background: 
                 radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
                 radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                 radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
                 #000000;
             animation: aurora-shift 30s infinite alternate;
         }
 
         /* Floating Particles */
         .particle {
             position: fixed;
             pointer-events: none;
             opacity: 0.5;
             z-index: -5;
         }
 
         .particle::before {
             content: '';
             position: absolute;
             width: 2px;
             height: 2px;
             background: rgba(255, 255, 255, 0.8);
             border-radius: 50%;
             animation: float-up 15s infinite linear;
         }
 
         @keyframes float-up {
             from {
                 transform: translateY(100vh) translateX(0);
                 opacity: 0;
             }
             10% {
                 opacity: 1;
             }
             90% {
                 opacity: 1;
             }
             to {
                 transform: translateY(-100vh) translateX(100px);
                 opacity: 0;
             }
         }
         
         @keyframes aurora-shift {
             0%, 100% { 
                 transform: rotate(0deg) scale(1);
                 filter: hue-rotate(0deg);
             }
             50% { 
                 transform: rotate(1deg) scale(1.1);
                 filter: hue-rotate(10deg);
             }
         }
 
         /* Glass Morphism Container */
         .glass-container {
             background: rgba(255, 255, 255, 0.02);
             backdrop-filter: blur(20px) saturate(180%);
             -webkit-backdrop-filter: blur(20px) saturate(180%);
             border: 1px solid rgba(255, 255, 255, 0.1);
             box-shadow: 
                 inset 0 0 40px rgba(255, 255, 255, 0.05),
                 0 20px 60px rgba(0, 0, 0, 0.5);
             border-radius: 30px;
             padding: 3rem;
             position: relative;
             overflow: hidden;
         }
 
         .glass-container::before {
             content: '';
             position: absolute;
             top: -50%;
             left: -50%;
             width: 200%;
             height: 200%;
             background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
             animation: glass-shine 8s infinite;
             pointer-events: none;
         }
 
         @keyframes glass-shine {
             0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
             50% { transform: translate(-30%, -30%) rotate(180deg); }
         }
 
         /* 3D Tilt Card Style */
         .card-container {
             perspective: 1500px;
         }
 
         .modern-card {
             background: rgba(255, 255, 255, 0.03);
             backdrop-filter: blur(20px) brightness(1.1);
             -webkit-backdrop-filter: blur(20px) brightness(1.1);
             border: 1px solid rgba(255, 255, 255, 0.15);
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             transform-style: preserve-3d;
             position: relative;
             overflow: hidden;
             box-shadow: 
                 inset 0 0 20px rgba(255, 255, 255, 0.05),
                 0 10px 40px rgba(0, 0, 0, 0.3);
         }
 
         .modern-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 100%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
             transition: left 0.6s;
         }
 
         .modern-card:hover::before {
             left: 100%;
         }
 
         .modern-card:hover {
             border-color: rgba(255, 255, 255, 0.3);
             box-shadow: 
                 inset 0 0 30px rgba(255, 255, 255, 0.1),
                 0 20px 60px rgba(0, 0, 0, 0.4),
                 0 0 50px rgba(255, 255, 255, 0.1);
             transform: translateY(-5px);
         }
 
         .modern-card:hover .card-icon {
             transform: rotateY(360deg) scale(1.2);
             filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
         }
 
         .card-icon {
             transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
             transform-style: preserve-3d;
         }
 
         /* NEW Professional Button Style */
         .glow-button {
             display: inline-block;
             background-color: #ffffff;
             color: #000000;
             font-weight: 600;
             padding: 0.875rem 2.5rem; /* 14px 40px */
             border-radius: 11px; /* As requested by user */
             border: 1px solid rgba(0, 0, 0, 0.05);
             text-align: center;
             text-decoration: none;
             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
             transform: translateY(0);
             position: relative;
             z-index: 1; 
         }
 
         .glow-button:hover {
             transform: translateY(-3px);
             box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 3px 8px rgba(0, 0, 0, 0.1);
             background-color: #f9f9f9;
         }
 
         .glow-button:active {
             transform: translateY(-1px);
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
         }
         
         .glow-button::before {
            display: none; /* Disabling old glow effect */
         }
 
 
         /* Title Animation with Glow */
         .animate-title span {
             display: inline-block;
             opacity: 0;
             transform: translateY(50px) rotateX(-90deg);
             animation: reveal-3d 0.8s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
             text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
         }
 
         @keyframes reveal-3d {
             to { 
                 opacity: 1; 
                 transform: translateY(0) rotateX(0);
             }
         }
 
         /* Enhanced Reveal Animation */
         .reveal {
             opacity: 0;
             transform: translateY(30px) scale(0.95);
             filter: blur(3px);
             transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); /* Made faster */
             will-change: opacity, transform, filter;
         }
 
         .reveal.visible {
             opacity: 1;
             transform: translateY(0) scale(1);
             filter: blur(0);
         }
 
         /* Glowing Text Effect */
         .glow-text {
             background: linear-gradient(45deg, #ffffff, #cccccc, #ffffff);
             background-size: 200% 200%;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             animation: glow-shift 3s ease infinite;
         }
 
         @keyframes glow-shift {
             0%, 100% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
         }
 
         /* Badge Animation */
         .badge {
             display: inline-block;
             padding: 0.5rem 1rem;
             background: rgba(255, 255, 255, 0.1);
             border: 1px solid rgba(255, 255, 255, 0.2);
             border-radius: 50px;
             backdrop-filter: blur(10px);
             position: relative;
             overflow: hidden;
         }
 
         .badge::after {
             content: '';
             position: absolute;
             top: -2px;
             left: -2px;
             right: -2px;
             bottom: -2px;
             background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.5), transparent);
             transform: translateX(-100%);
             animation: badge-shine 3s infinite;
         }
 
         @keyframes badge-shine {
             0% { transform: translateX(-100%); }
             100% { transform: translateX(100%); }
         }
 
         /* Responsive Font Styles */
         h1 { font-size: var(--font-h1-mobile); }
         h3 { font-size: var(--font-h3-mobile); }
         p, a { font-size: var(--font-p-mobile); }
         
         @media (min-width: 601px) {
             h1 { font-size: var(--font-h1-tablet); }
             h3 { font-size: var(--font-h3-tablet); }
             p, a { font-size: var(--font-p-tablet); }
         }
         
         @media (min-width: 1025px) {
             h1 { font-size: var(--font-h1-desktop); }
             h3 { font-size: var(--font-h3-desktop); }
             p, a { font-size: var(--font-p-desktop); }
         }
 
         /* Loading Animation */
         .loader {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: #000000;
             z-index: 10000;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: opacity 0.5s, visibility 0.5s;
         }
 
         .loader.hidden {
             opacity: 0;
             visibility: hidden;
         }
 
         .loader-spinner {
             width: 50px;
             height: 50px;
             border: 3px solid rgba(255, 255, 255, 0.1);
             border-top-color: #ffffff;
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
 
         @keyframes spin {
             to { transform: rotate(360deg); }
         }
 
 
 
 
         /* why choose us starts */
 
 
             /* Base styles */
             :root {
                 --font-h2-mobile: 1.5rem;
                 --font-h3-mobile: 1.125rem;
                 --font-p-mobile: 1rem;
     
                 --font-h2-tablet: 2rem;
                 --font-h3-tablet: 1.25rem;
                 --font-p-tablet: 1.125rem;
     
                 --font-h2-desktop: 2.5rem;
                 --font-h3-desktop: 1.5rem;
                 --font-p-desktop: 1.125rem;
                 
                 --glow-color: rgba(0, 190, 255, 0.7);
             }
     
             .antialiased {
                 font-family: 'TikTok Sans', sans-serif;
                 background-color: #000000;
                 color: whitesmoke;
                 overflow-x: hidden;
                 padding: 2rem; 
             }
     
             /* Animated Aurora Background */
             .aurora-background {
                 position: fixed;
                 top: 0; left: 0;
                 width: 100%; height: 100%;
                 z-index: -10;
                 background: #000;
                 transition: background 0.5s ease-out;
             }
     
             /* Main Glass Container */
             .glass-container {
                 background: rgba(10, 10, 10, 0.5);
                 backdrop-filter: blur(30px) saturate(180%);
                 -webkit-backdrop-filter: blur(30px) saturate(180%);
                 border: 1px solid rgba(255, 255, 255, 0.1);
                 box-shadow: 
                     inset 0 0 80px rgba(255, 255, 255, 0.05),
                     0 30px 80px rgba(0, 0, 0, 0.7);
                 border-radius: 30px;
                 padding: 2rem;
                 position: relative;
                 overflow: hidden;
             }
     
             @media (min-width: 640px) { .glass-container { padding: 3rem; } }
             @media (min-width: 1024px) { .glass-container { padding: 4rem; } }
     
             /* Feature Card: Upgraded Professional Look */
             .feature-card {
                 background: rgba(255, 255, 255, 0.02);
                 backdrop-filter: blur(25px) brightness(1.2);
                 border: 1px solid rgba(255, 255, 255, 0.1);
                 transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
                 position: relative;
                 overflow: hidden;
                 z-index: 1;
                 transform-style: preserve-3d; /* For 3D tilt */
             }
             
             .feature-card:hover {
                 transform: scale(1.05); /* Simplified hover transform */
                 box-shadow: 0 25px 50px rgba(0,0,0,0.6);
             }
     
             /* Animated Glowing Border */
             .feature-card::before, .feature-card::after {
                 content: '';
                 position: absolute;
                 left: -2px; top: -2px;
                 background: linear-gradient(45deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
                 background-size: 400%;
                 width: calc(100% + 4px);
                 height: calc(100% + 4px);
                 z-index: -1;
                 animation: glow-animate 20s linear infinite;
                 opacity: 0;
                 transition: opacity 0.4s ease-out;
                 border-radius: inherit; /* Inherit border-radius from card */
             }
     
             .feature-card:hover::before, .feature-card:hover::after {
                 opacity: 1;
             }
     
             @keyframes glow-animate {
                 0% { background-position: 0 0; }
                 50% { background-position: 400% 0; }
                 100% { background-position: 0 0; }
             }
     
             .feature-card .card-content {
                 background: #111; /* Dark inner background to make border pop */
                 border-radius: inherit;
                 padding: 1.5rem;
                 height: 100%;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 text-align: center;
             }
             
             @media (min-width: 640px) {
                 .feature-card .card-content {
                     align-items: flex-start;
                     text-align: left;
                 }
             }
     
             .feature-card .icon-container {
                 background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
                 border-radius: 0.75rem;
                 padding: 0.75rem;
                 display: inline-block;
                 transition: all 0.3s ease;
                 box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
             }
             
             .feature-card:hover .icon-container {
                 transform: scale(1.1) rotate(-10deg);
                 box-shadow: 0 10px 20px rgba(0,0,0,0.4);
             }
             
             /* Image Blending Effect */
             .image-blend-container {
                 position: relative;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 transition: transform 0.3s ease;
             }
             
             .image-blend-container:hover {
                 transform: scale(1.03);
             }
     
             .image-blend-container img {
                 width: 100%;
                 height: auto;
                 object-fit: cover;
                 -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, black 35%, transparent 70%);
                 mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, black 35%, transparent 70%);
             }
     
             /* Reveal on Scroll Animation - Consolidated */
             /* Note: This is now handled by the main .reveal class above */
     
             /* Responsive Font Styles */
             h2 { font-size: var(--font-h2-mobile); }
             h3 { font-size: var(--font-h3-mobile); }
             p, a { font-size: var(--font-p-mobile); }
             
             @media (min-width: 601px) {
                 h2 { font-size: var(--font-h2-tablet); }
                 h3 { font-size: var(--font-h3-tablet); }
                 p, a { font-size: var(--font-p-tablet); }
             }
             
             @media (min-width: 1025px) {
                 h2 { font-size: var(--font-h2-desktop); }
                 h3 { font-size: var(--font-h3-desktop); }
                 p, a { font-size: var(--font-p-desktop); }
             }
 
 
             /* why choose us section ends  */
 
 
 
             /* achievements secttions satrts  */
 
 
 /* quote section starts */
 
 #quote-section {
     background-color: #eef2f7; /* Lighter, cleaner background */
     color: #1a202c;
 }
 
 /* Flowing Aurora Background */
 .aurora-background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
 }
 
 .aurora-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(120px);
     opacity: 0.3;
     animation: aurora-flow 40s ease-in-out infinite;
 }
 
 .aurora-orb:nth-child(1) {
     width: 700px; height: 700px;
     background: #a78bfa;
     top: -30%; left: -20%;
     animation-duration: 45s;
 }
 .aurora-orb:nth-child(2) {
     width: 600px; height: 600px;
     background: #60a5fa;
     bottom: -40%; right: -20%;
     animation-duration: 40s;
     animation-delay: -10s;
 }
 .aurora-orb:nth-child(3) {
     width: 500px; height: 500px;
     background: #f472b6;
     top: 20%; right: 10%;
     animation-duration: 35s;
     animation-delay: -20s;
 }
 
 @keyframes aurora-flow {
     0%, 100% { transform: translate(0, 0) scale(1); }
     25% { transform: translate(10vw, -15vh) scale(1.1); }
     50% { transform: translate(-10vw, 10vh) scale(0.9); }
     75% { transform: translate(15vw, 15vh) scale(1.2); }
 }
 
 /* 3D Interactive Glass Card Style */
 .glass-card {
     background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(35px);
     -webkit-backdrop-filter: blur(35px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
     transition: all 0.3s ease;
     transform-style: preserve-3d;
     position: relative;
 }
 
 .glass-card-content {
     transform: translateZ(20px); /* Bring content forward */
 }
 
 /* Glow effect on hover */
 .glass-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
     border-radius: inherit;
     background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.5), transparent 40%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 
 .glass-card:hover::before {
     opacity: 1;
 }
 
 /* Premium input styling */
 .modern-input {
     background: rgba(255, 255, 255, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }
 
 .modern-input:focus {
     background: white;
     border-color: #3b82f6;
     box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
     outline: none;
 }
 
 /* Enhanced Appearance Animation */
 .fade-in {
     opacity: 0;
     transform: translateY(40px) scale(0.98); /* Start further down and slightly smaller */
     animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Made faster */
 }
 
 @keyframes fadeInUp {
     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }
 
 /* Staggered animation delays */
 .stagger-1 { animation-delay: 0.1s; }
 .stagger-2 { animation-delay: 0.2s; }
 .stagger-3 { animation-delay: 0.3s; }
 .stagger-4 { animation-delay: 0.4s; }
 .stagger-5 { animation-delay: 0.5s; }
 .stagger-6 { animation-delay: 0.6s; }
 
 /* Premium button with shine effect */
 .premium-btn {
     background: #111827;
     color: white;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     transform: translateZ(20px);
 }
 
 .premium-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -150%;
     width: 80%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
     transition: left 0.7s ease;
     transform: skewX(-25deg);
 }
 
 .premium-btn:hover::before {
     left: 150%;
 }
 
 .premium-btn:hover {
     transform: translateY(-3px) translateZ(20px);
     box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
 }
 
 /* Scrolling partners ticker animation */
 .partners-ticker {
     display: flex;
     white-space: nowrap;
     animation: scroll-partners 40s linear infinite;
 }
 
 .partners-container:hover .partners-ticker {
     animation-play-state: paused;
 }
 
 @keyframes scroll-partners {
     0% { transform: translateX(0%); }
     100% { transform: translateX(-50%); }
 }
 
 .ticker-mask {
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
     mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 }
 
 /* Accessibility: Respect user's preference for reduced motion */
 @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
 }
 
 
 /* quote section ends */
 
         /* ========================================
         PROFESSIONAL SPARKLE EFFECT
         ======================================== */
         
         .sparkle-container {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             z-index: 9999;
             pointer-events: none;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
         }
 
         .sparkle-container.active {
             opacity: 1;
         }
 
         .sparkle-overlay {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: linear-gradient(135deg, 
                 rgba(0, 0, 0, 0.95) 0%, 
                 rgba(0, 0, 0, 0.98) 50%, 
                 rgba(0, 0, 0, 0.95) 100%);
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
         }
 
         .sparkle-grid {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             overflow: hidden;
         }
 
         .sparkle {
             position: absolute;
             width: 4px;
             height: 4px;
             background: #ffffff;
             border-radius: 50%;
             box-shadow: 
                 0 0 6px rgba(255, 255, 255, 0.8),
                 0 0 12px rgba(255, 255, 255, 0.6),
                 0 0 18px rgba(255, 255, 255, 0.4);
             animation: sparkle-diagonal 2s ease-out forwards;
             opacity: 0;
         }
 
         .sparkle::before {
             content: '';
             position: absolute;
             top: 50%;
             left: 50%;
             width: 8px;
             height: 8px;
             background: rgba(255, 255, 255, 0.3);
             border-radius: 50%;
             transform: translate(-50%, -50%);
             animation: sparkle-pulse 2s ease-out forwards;
         }
 
         .sparkle::after {
             content: '';
             position: absolute;
             top: 50%;
             left: 50%;
             width: 2px;
             height: 2px;
             background: rgba(255, 255, 255, 0.9);
             border-radius: 50%;
             transform: translate(-50%, -50%);
         }
 
         @keyframes sparkle-diagonal {
             0% {
                 opacity: 0;
                 transform: translate(-100px, -100px) scale(0) rotate(0deg);
             }
             20% {
                 opacity: 1;
                 transform: translate(0, 0) scale(1) rotate(180deg);
             }
             80% {
                 opacity: 1;
                 transform: translate(100px, 100px) scale(1.2) rotate(360deg);
             }
             100% {
                 opacity: 0;
                 transform: translate(200px, 200px) scale(0) rotate(720deg);
             }
         }
 
         @keyframes sparkle-pulse {
             0% {
                 opacity: 0;
                 transform: translate(-50%, -50%) scale(0);
             }
             50% {
                 opacity: 1;
                 transform: translate(-50%, -50%) scale(1.5);
             }
             100% {
                 opacity: 0;
                 transform: translate(-50%, -50%) scale(2);
             }
         }
 
         /* Sparkle trail effect */
         .sparkle-trail {
             position: absolute;
             width: 2px;
             height: 2px;
             background: rgba(255, 255, 255, 0.6);
             border-radius: 50%;
             animation: sparkle-trail 1.5s ease-out forwards;
         }
 
         @keyframes sparkle-trail {
             0% {
                 opacity: 0.8;
                 transform: scale(1);
             }
             100% {
                 opacity: 0;
                 transform: scale(0);
             }
         }
 
         /* ========================================
         ABOUT US SECTION MOBILE IMPROVEMENTS
         ======================================== */
         
         /* Mobile-specific card improvements */
         @media (max-width: 640px) {
             .modern-card {
                 padding: 1rem !important;
                 margin-bottom: 0.75rem;
             }
             
             .modern-card .flex {
                 gap: 0.5rem;
             }
             
             .modern-card h3 {
                 font-size: 0.875rem;
                 line-height: 1.2;
                 margin-bottom: 0.25rem;
             }
             
             .modern-card p {
                 font-size: 0.75rem;
                 line-height: 1.3;
             }
             
             .modern-card svg {
                 width: 2rem !important;
                 height: 2rem !important;
             }
             
             /* Improve grid spacing on mobile */
             .grid.grid-cols-2 {
                 gap: 0.75rem !important;
             }
         }
 
 
         /* Footr Section starts */
        
         #footer-section {
             font-family: 'Inter', sans-serif;
             background-color: #000000;
             color: #e5e7eb;
             min-height: 100vh;
             margin: 0;
             display: flex;
             flex-direction: column;
         }
 
         .main-content {
             flex-grow: 1;
         }
 
         .font-mono {
             font-family: 'Space Mono', monospace;
         }
         
         /* --- Footer Container & Monochrome Spotlight Effect --- */
         #main-footer-dark-section {
             --spotlight-x: 50%;
             --spotlight-y: 50%;
             position: relative;
             overflow: hidden;
             background-color: #0a0a0a; /* Fallback background */
         }
         
         #main-footer-dark-section::before {
             content: '';
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
             pointer-events: none;
             z-index: 0;
             background: radial-gradient(
                 circle at var(--spotlight-x) var(--spotlight-y),
                 rgba(255, 255, 255, 0.06) 0%,
                 transparent 40%
             );
             transition: background 0.2s ease-out;
         }
 
         .content-layer {
             position: relative;
             z-index: 1;
         }
         
         /* --- Animated Grid Background --- */
         .animated-grid {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-image: 
                 linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
                 linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
             background-size: 40px 40px;
             animation: gridPulse 8s ease-in-out infinite;
             will-change: opacity, transform;
         }
 
         @keyframes gridPulse {
             0%, 100% { opacity: 0.1; transform: scale(1); }
             50% { opacity: 0.3; transform: scale(1.02); }
         }
 
         /* --- Magnetic CTA (Call to Action) Effect --- */
         .magnetic-cta {
             position: relative;
             transform-style: preserve-3d;
             transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
         }
         
         .magnetic-text-char {
             display: inline-block;
             transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
         }
         
         /* --- Gradient Text & Typewriter --- */
         .gradient-text {
             background: linear-gradient(135deg, #ffffff 40%, #9ca3af 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
 
         .typewriter {
             overflow: hidden;
             border-right: 3px solid #ffffff;
             white-space: nowrap;
             animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
         }
 
         @keyframes typing {
             from { width: 0 }
             to { width: 100% }
         }
 
         @keyframes blink-caret {
             from, to { border-color: transparent }
             50% { border-color: #ffffff }
         }
 
         /* --- Glassmorphism Card Effect --- */
         .glass-card1 {
             background: rgba(10, 10, 10, 0.5); /* Darker semi-transparent background */
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
             border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 1.25rem; /* 20px */
             transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
         }
 
         .glass-card1:hover {
             transform: translateY(-8px) scale(1.02);
             border-color: rgba(255, 255, 255, 0.3);
             box-shadow: 0 20px 40px rgba(0,0,0,0.2);
         }
 
         /* --- UPDATED: Amazing Link Hover Effects --- */
         .morph-link {
             position: relative;
             font-weight: 500;
             color: #d1d5db; /* Gray-300 */
             transition: color 0.4s cubic-bezier(0.23, 1, 0.320, 1);
             padding: 2px 4px;
             margin: -2px -4px;
         
             z-index: 1; /* Establishes a stacking context */
         }
         
         /* This pseudo-element creates the background highlight */
         .morph-link::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: #ffffff;
             transform: scaleY(0); /* Starts scaled to 0 */
             transform-origin: bottom; /* Animation starts from the bottom */
             transition: transform 0.4s cubic-bezier(0.23, 1, 0.320, 1);
             z-index: -1; /* Positioned behind the text */
         }
 
         .morph-link:hover {
             color: #000000; /* Text color inverts to black on hover */
         }
 
         .morph-link:hover::before {
             transform: scaleY(1); /* Scales up to full height on hover */
         }
 
         /* --- Light Theme Icon Hover Effects --- */
         .light-theme-icon {
             transition: all 0.3s ease;
             color: #4b5563; /* Gray-600 */
         }
         .light-theme-icon:hover {
             transform: scale(1.1);
             color: #000000;
         }
         
         /* --- Scroll Reveal Animation --- */
         .reveal-item {
             opacity: 0;
             transform: translateY(25px) scale(0.98);
             transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Made faster */
             will-change: opacity, transform;
         }
 
         .reveal-item.is-visible {
             opacity: 1;
             transform: translateY(0) scale(1);
         }
 
         .reveal-item:nth-child(1) { transition-delay: 0.05s; }
         .reveal-item:nth-child(2) { transition-delay: 0.1s; }
         .reveal-item:nth-child(3) { transition-delay: 0.15s; }
         .reveal-item:nth-child(4) { transition-delay: 0.2s; }
         .reveal-item:nth-child(5) { transition-delay: 0.25s; }
 
         /* --- Featured Project Card Styles --- */
         .project-image-placeholder {
             background-color: #1f2937; /* Gray-800 */
             aspect-ratio: 16 / 9;
             border-radius: 0.75rem; /* 12px */
             margin-bottom: 1rem;
             overflow: hidden;
             position: relative;
             background-image: linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%), linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.05) 75%);
             background-size: 20px 20px;
             background-position: 0 0, 10px 10px;
             transition: transform 0.4s ease;
         }
         .glass-card1:hover .project-image-placeholder {
             transform: scale(1.05);
         }
         
         /* Styling for the arrow on the case study link */
         .case-study-link .arrow {
             transition: transform 0.3s ease;
         }
         .case-study-link:hover .arrow {
             transform: translateX(4px);
         }
 
 
 
 
         /* Footer Section Ends */
 
 
         /* teck section starts */
 
         :root {
             /* Increased speed */
             --column-1-speed: 15s;
             --column-2-speed: 25s;
             --column-3-speed: 20s;
             --marquee-scroll-speed: 55s;      
         }
 
         #teck-section {
             margin: 0;
             font-family: 'JetBrains Mono', monospace;
             height: 50vh;
             background-color: #000; /* Solid black background */
             overflow: hidden;
             display: flex;
             align-items: center;
             justify-content: center;
         }
 
         .showcase-section {
             width: 100%;
             height: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
         }
 
         /* 🔹 Glass Container Styling 🔹 */
         .glass-container1 {
             position: relative;
             width: 90%;
             max-width: 1100px;
             height: 250px; /* Decreased height */
             border-radius: 20px;
             overflow: hidden;
             
             background: rgba(10, 10, 12, 0.4); 
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
             box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 
             /* Vertical mask for seamless blending */
             -webkit-mask-image: linear-gradient(to bottom, transparent, white 5%, white 95%, transparent);
             mask-image: linear-gradient(to bottom, transparent, white 5%, white 95%, transparent);
         }
 
         /* 🔹 Vertical Image Collage Styling 🔹 */
         .vertical-collage-container {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             display: flex;
             gap: 1rem;
             z-index: 1;
         }
 
         .image-column {
             flex: 1;
             display: flex;
             flex-direction: column;
             animation: scroll-vertical linear infinite;
         }
 
         .image-column img {
             width: 100%;
             height: auto;
             margin-bottom: 1rem;
             border-radius: 10px;
             opacity: 0.15;
             filter: grayscale(100%) blur(2px);
         }
 
         .image-column:nth-child(1) { animation-name: scroll-col-1; animation-duration: var(--column-1-speed); }
         .image-column:nth-child(2) { animation-name: scroll-col-2; animation-duration: var(--column-2-speed); }
         .image-column:nth-child(3) { animation-name: scroll-col-3; animation-duration: var(--column-3-speed); }
 
         @keyframes scroll-col-1 { 0% { transform: translateY(-50%); } 100% { transform: translateY(0%); } }
         @keyframes scroll-col-2 { 0% { transform: translateY(-50%); } 100% { transform: translateY(0%); } }
         @keyframes scroll-col-3 { 0% { transform: translateY(-50%); } 100% { transform: translateY(0%); } }
 
         /* 🔹 Tech Stack Marquee Styling 🔹 */
         .tech-marquee-container {
             width: 100%;
             height: 100%;
             display: flex;
             align-items: center;
             position: relative;
             z-index: 2; /* Sits on top of the internal background */
              -webkit-mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
             mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
         }
 
         .tech-marquee {
             display: flex;
             width: fit-content;
             animation: scroll-marquee var(--marquee-scroll-speed) linear infinite reverse;
         }
         
         .tech-marquee-container:hover .tech-marquee {
             animation-play-state: paused;
         }
 
         @keyframes scroll-marquee {
             0% { transform: translateX(0); }
             100% { transform: translateX(-50%); }
         }
 
         .tech-item {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             padding: 1rem 1.5rem;
             gap: 0.75rem;
             flex-shrink: 0;
             width: 100px;
         }
 
         .tech-item svg {
             width: 48px;
             height: 48px;
             transition: transform 0.3s ease;
         }
         
         .tech-item span {
             font-size: 0.75rem;
             color: #a0a0a0;
             transition: color 0.3s ease;
         }
         
         .tech-item:hover svg {
             transform: scale(1.1);
             stroke: #fff;
         }
         .tech-item:hover span {
             color: #fff;
         }
 
         /* 🔹 Responsiveness 🔹 */
         @media (max-width: 768px) {
             .glass-container1 {
                 width: 90%;
                 height: 80vh;
                  -webkit-mask-image: linear-gradient(to bottom, transparent, white 15%, white 85%, transparent);
                 mask-image: linear-gradient(to bottom, transparent, white 15%, white 85%, transparent);
             }
             
             .vertical-collage-container {
                 gap: 0.5rem;
             }
 
             .tech-marquee-container {
                 height: 100%;
                 padding: 0;
                  -webkit-mask-image: none;
                 mask-image: none;
             }
 
             .tech-marquee {
                 flex-direction: column;
                 width: 100%;
                 animation: scroll-marquee-vertical var(--marquee-scroll-speed) linear infinite reverse;
                 -webkit-mask-image: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent);
                 mask-image: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent);
             }
 
             @keyframes scroll-marquee-vertical {
                 0% { transform: translateY(0); }
                 100% { transform: translateY(-50%); }
             }
             
             .tech-item {
                 flex-direction: row;
                 width: 100%;
                 justify-content: flex-start;
                 padding: 1.5rem;
                 gap: 1.5rem;
                 box-sizing: border-box;
             }
         }
 
         /* techsection ends */
 
 
 
         /* core value starts */
 
   .cv-main-container {
             font-family: 'Inter', sans-serif;
             background-color: #000000;
         }
 
         /* Glassmorphism Effect - Enhanced for overlay */
         .cv-glass-effect {
             background: rgba(255, 255, 255, 0.08);
             -webkit-backdrop-filter: blur(25px);
             backdrop-filter: blur(25px);
             border-top: 1px solid rgba(255, 255, 255, 0.2);
             border-left: 1px solid rgba(255, 255, 255, 0.1);
             border-right: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         /* Animation Class */
         .cv-fade-in-up {
             opacity: 0;
             transform: translateY(30px);
             transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Made faster */
             will-change: opacity, transform;
         }
 
         .cv-fade-in-up.cv-is-visible {
             opacity: 1;
             transform: translateY(0);
         }
 
         /* Background image styling */
         .cv-hero-bg {
             background-image: url('/images/coreValue.png');
             background-size: cover;
             background-position: center;
             filter: grayscale(100%) contrast(1.1);
         }
 
         /* Hover effects */
         .cv-card-hover {
             transition: all 0.3s ease;
         }
 
         .cv-card-hover:hover {
             transform: translateY(-5px);
         }
 
         /* Button hover effect */
         .cv-btn-hover {
             transition: all 0.3s ease;
             background: linear-gradient(45deg, #ffffff, #e5e5e5);
         }
 
         .cv-btn-hover:hover {
             background: linear-gradient(45deg, #e5e5e5, #d1d1d1);
             transform: scale(1.05);
             box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
         }
 
         /* Icon styling */
         .cv-icon {
             height: 3rem;
             width: 3rem;
             color: white;
         }
 
         /* Title styling */
         .cv-main-title {
             font-size: 2.25rem;
             font-weight: 700;
             text-align: center;
             margin-bottom: 4rem;
             color: white;
         }
 
         /* Card title styling */
         .cv-card-title {
             font-size: 1.5rem;
             font-weight: 700;
             margin-bottom: 0.75rem;
             color: white;
         }
 
         /* Card description styling */
         .cv-card-description {
             color: #d1d5db;
             line-height: 1.625;
         }
 
         /* Grid container */
         .cv-cards-grid {
             display: grid;
             gap: 2rem;
             text-align: center;
         }
 
         /* Button container */
         .cv-button-container {
             margin-top: 4rem;
             text-align: center;
         }
 
         /* Button styling */
         .cv-cta-button {
             color: black;
             font-weight: 700;
             padding: 0.75rem 2rem;
             border-radius: 0.5rem;
             box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
 
         /* Responsive adjustments */
         @media (min-width: 768px) {
             .cv-main-title {
                 font-size: 3rem;
             }
             
             .cv-cards-grid {
                 grid-template-columns: repeat(3, 1fr);
                 gap: 3rem;
                 text-align: left;
             }
             
             .cv-icon-container {
                 justify-content: flex-start;
             }
         }
 
         .cv-icon-container {
             display: flex;
             justify-content: center;
             margin-bottom: 1rem;
         }
 
         /* Section styling */
         .cv-main-section {
             padding: 5rem 0;
             position: relative;
         }
 
         @media (min-width: 768px) {
             .cv-main-section {
                 padding: 8rem 0;
             }
         }
 
         /* Container styling */
         .cv-container {
             margin: 0 auto;
             padding: 0 1rem;
             position: relative;
             z-index: 10;
         }
 
         /* Glass container styling */
         .cv-glass-container {
             padding: 2rem;
             border-radius: 1rem;
             box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
 
         @media (min-width: 768px) {
             .cv-glass-container {
                 padding: 4rem;
             }
         }
 
         /* Overlay styling */
         .cv-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
         }
 
 
         /* core value section ends */


         /* In css/index.css */

.cv-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Faster: changed from 0.5s to 0.4s */
    will-change: opacity, transform;
}


/* In css/index.css */

.reveal-item {
    opacity: 0;
    transform: translateY(25px) scale(0.98);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Faster: changed from 0.5s to 0.4s */
    will-change: opacity, transform;
}



.submission-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .submission-overlay.visible {
    opacity: 1;
    visibility: visible;
  }
  .spinner-container, .success-modal {
    display: none; /* Hidden by default, controlled by JS */
  }
  .spinner-container.visible, .success-modal.visible {
    display: block;
  }

  .amazing-spinner {
    width: 80px;
    height: 80px;
    position: relative;
  }
  .amazing-spinner::before, .amazing-spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation-duration: 1.8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  .amazing-spinner::before {
    width: 100%;
    height: 100%;
    border: 4px solid rgba(255, 255, 255, 0.2);
    top: 0;
    left: 0;
  }
  .amazing-spinner::after {
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
    top: 0;
    left: 0;
    animation-name: spin-dual;
  }
  @keyframes spin-dual {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(0.8); }
    100% { transform: rotate(360deg) scale(1); }
  }

  .success-modal {
    text-align: center;
    padding: 2rem;
    max-width: 500px;
    margin: 1rem;
    transform: scale(0.95);
    opacity: 0;
    animation: success-fade-in 0.5s ease forwards;
  }
  @keyframes success-fade-in {
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  .success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
  }
  .success-icon .circle {
    stroke: #10b981;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: draw-circle 0.8s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  }
  .success-icon .tick {
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-tick 0.6s ease-out forwards 0.5s;
  }
  @keyframes draw-circle { to { stroke-dashoffset: 0; } }
  @keyframes draw-tick { to { stroke-dashoffset: 0; } }