.navbar {
     position: fixed;
     width: 100%;
     top: 0;
     z-index: +999;
     background-color: white;
 }

 .img-fluid-logo,
 .img-fluid2 {
     filter: brightness(150%) !important;
 }

 .navbar-nav li a {
     position: relative;


     font-weight: 500;
     transition: .5s;
     padding: 0px 20px !important;

     &:hover {
         background: linear-gradient(to right, #005ee2, #9100f1, #ce0aff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         /* for firefox */
         color: transparent;
         transform: scale(1.05);
     }
 }

 .navbar-nav li a::before {
     position: absolute;
     content: '';
     height: 2px;
     width: 0%;
     bottom: 0;
     left: 0;
     background-color: var(--color-accent-glow);
     transition: .5s linear;
     margin: 0px 0px -10px 0px;
     display: inline-block;
 }

 .navbar-nav li a:hover:before {
     width: 100%;
 }

 @media (max-width:768px) {
     .navbar-nav li a::before {
         position: absolute;
         content: '';
         height: 2px;
         width: 0%;
         bottom: 0;
         left: 0;
         background-color: var(--color-accent-glow);
         transition: .5s linear;
         margin: 0px 0px -1px 0px;
         display: inline-block;
     }

     .navbar-nav li a:hover:before {
         width: 30%;
     }
 }

 .dropdown-menu {
     border-radius: 0px !important;
     border: 2px solid rgba(134, 134, 245, 0.151) !important;
 }

 .dropdown-menu li {
     padding: 0px 0px 15px 0px;

 }

 .dropdown-menu li a {
     text-decoration: none;

     &:hover {
         background-color: rgba(245, 239, 255, 0.384);
     }
 }




 .nav-btn {
     border-radius: 5px;
     padding: 10px;
     background-color: #005ee2;
     border: none;
     outline: none;
     color: white;
 }

 .contact-btn {
     background-image: linear-gradient(to right, #005ee2, #9100f1, #ce0aff);
     border: none;
     outline: none;
     border-radius: 5px;
     padding: 10px;
     color: white;
 }

 @media (max-width:768px) {
     .nav-btn {
         margin-bottom: 20px;
     }

     .nav-item {
         margin: 10px 0px !important;

     }

 }


 @media (min-width: 992px) {
     .navbar .dropdown:hover .dropdown-menu {
         display: block;
         margin-top: 0;
     }

     .navbar .dropdown .dropdown-menu {
         display: none;
         transition: display 0.5s ease-in-out;
     }


     .navbar .dropdown:hover .dropdown-toggle::after {
         transform: rotate(-180deg);
         transition: transform 0.5s;
     }
 }




 .gradient-text-custom {
     /* Define the gradient background */
     background: linear-gradient(90deg, #6366f1, #a855f7);
     /* Example gradient matching an Indigo/Violet scheme */

     /* Clip the background to the text (Webkit/Firefox) */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent;
     /* Fallback for browsers that don't support clipping */
 }

 /* Button Customization for Indigo color and hover effect */
 .btn-primary {
     /* Indigo 600 color */
     background-color: #4f46e5 !important;
     border-color: #4f46e5 !important;
 }

 .btn-primary:hover {
     /* Indigo 700 color on hover */
     background-color: #4338ca !important;
     border-color: #4338ca !important;
 }

 /* Initial Hidden State */
 .animate-on-scroll {
     opacity: 0;
     transform: rotateY(40deg);
     transition: all 1s ease-out;
 }

 /* When visible in viewport */
 .animate-on-scroll.animate {
     opacity: 1;
     transform: translateY(0);
 }

 @media (max-width:768px) {
     .animate-on-scroll {
         margin-top: -50px;
     }
 }

 /* Gradient Text */
 .gradient-text-custom {
     background: linear-gradient(90deg, #6366f1, #a855f7);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* Button Indigo */
 .btn-primary {
     background-color: #4f46e5 !important;
     border-color: #4f46e5 !important;
 }

 .btn-primary:hover {
     background-color: #4338ca !important;
     border-color: #4338ca !important;
 }


















 .animate-on-scroll1 {
     opacity: 0;
     transform: rotatey(50deg);
     transition: all 1s ease-out;
 }

 .animate-on-scroll1.animate {
     opacity: 1;
     transform: translateY(0);
 }



 /* Indigo heading */
 .text-indigo-custom {
     color: #4338ca;
 }

 /* Extra rounded box */
 .rounded-4 {
     border-radius: 1rem !important;
 }


 @media (max-width:768px) {
     .animate-on-scroll1 p {
         font-size: 15px !important;
         padding: 10px;
         text-align: justify;
     }
 }











 .animate-on-scroll2 {
     opacity: 0;
     transform: rotatex(50deg);
     transition: all 1s ease-out;
 }

 .animate-on-scroll2.animate {
     opacity: 1;
     transform: translateY(0);
 }

 /* Add these styles to your existing <style> block or CSS file */

 /* Color for Feature Card Headings (text-indigo-600 equivalent) */
 .text-indigo-highlight {
     color: #4f46e5;
 }

 /* Feature Card Styling (rounded-xl and initial shadow-md) */
 /* Base Card Styles */
 .feature-card-custom {
     border-radius: 0.75rem;
     /* rounded-xl */
     transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
     /* Faster, smoother transition */
     position: relative;
     /* Shine इफ़ेक्ट के लिए ज़रूरी */
     overflow: hidden;
     /* Shine को कार्ड के अंदर रखने के लिए */
     z-index: 1;
 }

 /* Hover Effect (Elevation and Shadow) */
 .feature-card-custom:hover {
     box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.2), 0 8px 15px -4px rgba(0, 0, 0, 0.1);
     /* Deeper, more noticeable shadow */
     transform: translateY(-10px) scale(1.02);
     /* Slight lift and subtle enlargement */
 }

 /* --- ADVANCED SHINE EFFECT --- */

 .feature-card-custom::before {
     content: '';
     position: absolute;
     top: 0;
     left: -75%;
     /* Shine को कार्ड के बाहर से शुरू करने के लिए */
     width: 50%;
     height: 100%;
     background: rgba(107, 115, 158, 0.178);
     /* सफ़ेद या हल्के रंग की चमक */
     transform: skewX(-20deg);
     /* तिरछा (skewed) इफ़ेक्ट */
     z-index: 2;
     transition: transform 0.5s ease-in-out;
 }

 /* Shine Animation on Hover */
 .feature-card-custom:hover::before {
     /* होवर करने पर चमक को कार्ड के पार ले जाता है */
     transform: translate(200%, 0) skewX(-20deg);
 }








 .animate-on-scroll3 {
     opacity: 0;
     transform: rotatey(150deg);
     transition: all 1s ease-out;
 }

 .animate-on-scroll3.animate {
     opacity: 1;
     transform: translateY(0);
 }

 /* Custom CSS for Benefit Section */

 /* Color definitions for Green Icons (Tailwind equivalent) */
 .bg-green-light {
     background-color: #d1fae5;
     /* green-100 */
 }

 .text-green-dark {
     color: #059669;
     /* green-600 */
 }

 /* Benefit Card Styling (rounded-xl and hover effects) */
 /* Base Card Styles */
 .benefit-card-custom {
     border-radius: 0.75rem;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     background-color: #fff;
     z-index: 1;
 }

 /* Hover Effect (Elevation and Shadow) */
 .benefit-card-custom:hover {
     /* Slightly deeper shadow than before */
     box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 6px 10px -3px rgba(0, 0, 0, 0.08) !important;

     /* Stronger lift */
     transform: translateY(-0.9rem);
 }

 /* --- ADVANCED DYNAMIC BORDER REVEAL --- */

 /* The Animated Border Element (pseudo-element) */
 .benefit-card-custom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 0.75rem;
     pointer-events: none;
     z-index: 0;
     border: 3px solid transparent;
     border-image: linear-gradient(45deg, #a955f74b, #6365f15b, #06b5d444) 1;
     transform: scale(0.95);
     opacity: 0;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Reveal the Border on Hover */
 .benefit-card-custom:hover::before {
     transform: scale(1.0);
     opacity: 1;

 }








 .animate-on-scroll4 {
     opacity: 0;
     transform: rotatex(150deg);
     transition: all 1s ease-out;
 }

 .animate-on-scroll4.animate {
     opacity: 1;
     transform: translateY(0);
 }


 /* Custom CSS for Technology Tags */

 .tech-tag-custom {
     /* Base styling: text-sm md:text-base font-medium bg-gray-200 text-gray-800 px-4 py-2 rounded-full */
     display: inline-block;
     padding: 0.5rem 1rem;
     /* px-4 py-2 equivalent */
     font-size: 0.95rem;
     /* md:text-base equivalent */
     font-weight: 500;
     /* font-medium */
     background-color: #e5e7eb;
     /* bg-gray-200 */
     color: #374151;
     /* text-gray-800 */
     border-radius: 9999px;
     /* rounded-full */

     /* Transition and Hover: transition-all duration-300 hover:bg-gray-300 */
     transition: background-color 0.3s ease-in-out;
     cursor: default;
     /* Optional */
 }

 .tech-tag-custom:hover {
     background-color: #d1d5db;
     /* hover:bg-gray-300 */
 }







 .animate-on-scroll5 {
     opacity: 0;
     transform: rotateY(-100deg);
     transition: all 1s ease-out;
 }

 .animate-on-scroll5.animate {
     opacity: 1;
     transform: translateY(0);
 }

 /* Custom CSS for Pricing Section */

 /* Replicate rounded-2xl */
 /* Base Card Styles */
 .pricing-card-custom {
     border-radius: 1rem;
     /* Initial Border Setup (for fallback) */
     border: 2px solid #333;
     /* Darker, subtle initial border */

     /* Advanced Setup for Gradient Border */
     position: relative;
     z-index: 1;
     overflow: hidden;
     /* ज़रूरी ताकि केवल बॉर्डर ही दिखे */
     background: #1f2937;
     /* Card background (Dark theme के लिए अच्छा) */
     color: #f3f4f6;
     /* Text color */

     /* Hover Transition for subtle lift and shadow */
     transition: all 0.5s ease-in-out;
 }

 /* Hover Effect: Lift and Shadow (Prevents sudden jump) */
 .pricing-card-custom:hover {
     transform: translateY(-5px);
     /* Subtle lift */
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
     /* Border-color को यहाँ ओवरराइड करने की ज़रूरत नहीं है */
 }

 /* --- ADVANCED LIQUID BORDER EFFECT --- */

 /* 1. The Animated Border Layer (::before) */
 .pricing-card-custom::before {
     content: '';
     position: absolute;
     top: -5px;
     /* Border को कार्ड से थोड़ा बाहर निकालने के लिए */
     left: -5px;
     right: -5px;
     bottom: -5px;
     border-radius: 1.1rem;
     /* कार्ड से थोड़ा ज़्यादा */
     z-index: -1;
     /* कार्ड के पीछे रखें */

     /* Initial Gradient State (बहुत बड़ा ताकि केवल एक हिस्सा दिखे) */
     background: linear-gradient(45deg,
             #f6df5e5e,
             /* Yellow */
             #6365f162,
             /* Indigo */
             #ec489a77,
             /* Pink */
             #10b9815e
             /* Emerald */
         );

     /* Gradient size: Standard gradient से 400% बड़ा */
     background-size: 400% 400%;

     /* Initially Hidden */
     opacity: 0;
     transition: opacity 0.5s ease;
 }

 /* 2. Animation Keyframes (creates the "liquid" motion) */
 @keyframes gradient-move {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }


 /* 3. Activate on Hover */
 .pricing-card-custom:hover::before {
     opacity: 1;
     /* Make the gradient border visible */

     /* Start the Animation */
     animation: gradient-move 5s ease infinite;
     /* 5 सेकंड में स्मूथली चलता रहे */
 }

 /* Green Checkmark Color (text-green-500 equivalent) - used inline in HTML for quick conversion */
 /* #10b981 (green-500) */






 .animate-on-scroll6 {
     opacity: 0;
     transform: rotatex(-100deg);
     transition: all 1s ease-out;
 }

 .animate-on-scroll6.animate {
     opacity: 1;
     transform: translateY(0);
 }

 /* Custom CSS (Verify these are included in your main style block) */

 /* Color for Headings (text-indigo-700 equivalent) */
 .text-indigo-custom {
     color: #4338ca;
     font-size: 40px !important;
     font-weight: 700;
 }

 @media (max-width:768px) {
     .text-indigo-custom {
         font-size: 30px !important;
     }
 }

 /* Replicate rounded-2xl */
 .rounded-4 {
     border-radius: 1rem !important;
 }



 /* Custom CSS for Footer Section */

 /* Background Color (bg-indigo-800 equivalent) */
 .footer-custom-bg {
     background-color: #3730a3;
 }

 /* Light Text Color (text-indigo-200 equivalent) */
 .text-indigo-light {
     color: #c7d2fe;
 }

 /* Lighter Separator (text-indigo-300 equivalent) */
 .text-indigo-lighter {
     color: #a5b4fc;
 }

 /* Hover Effect (hover:text-indigo-200) */
 .hover-text-indigo {
     transition: color 0.3s ease-in-out;
 }

 .hover-text-indigo:hover {
     color: #c7d2fe !important;
     /* text-indigo-200 */
 }


 .whatsapp-btn {
     position: fixed;
     bottom: 70px;
     left: 20px;
     font-size: 30px;
     border-radius: 10px;
     z-index: +1;
     background-color: rgb(72, 60, 235);
     border: none;
 }

 .fa-whatsapp {
     color: white !important;
 }

 @media (max-width: 600px) {
     .topBtn {
         z-index: +1;
     }

     .whatsapp-btn {
         z-index: +1;
     }
 }