:root {
     --orange-primary: #ff6b35;
     --orange-light: #ff8c61;
     --orange-dark: #e55a2b;
     --purple-primary: #7b2cbf;
     --purple-light: #9d4edd;
     --purple-dark: #5a189a;

     --orange-secondary: #ff8c42;
     --purple-secondary: #764ba2;
 }

 body {

     padding-top: 76px;
     /* Account for fixed navbar */
 }

 /* Custom Gradients */
 .bg-orange-gradient {
     background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary)) !important;
 }

 .bg-purple-gradient {
     background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary)) !important;
 }

 .text-orange-gradient {
     background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .text-purple-gradient {
     background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }


 /* Main Navbar */
 .navbar-checkinq {
     background: linear-gradient(135deg, var(--orange-primary) 0%, var(--purple-primary) 100%);
     box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
     padding: 0.75rem 0;
     transition: all 0.3s ease;
 }

 .navbar-checkinq.scrolled {
     padding: 0.5rem 0;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

 /* Brand Logo */
 .navbar-brand {
     font-size: 1.5rem;
     font-weight: 700;
     color: white !important;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     transition: transform 0.2s;
 }

 .navbar-brand:hover {
     transform: scale(1.05);
 }

 .navbar-brand i {
     font-size: 1.75rem;
 }

 .navbar-brand img {
     max-width: 48px;
     max-height: 48px
 }

 /* Nav Links */
 .navbar-nav .nav-link {
     color: rgba(255, 255, 255, 0.9) !important;
     font-weight: 500;
     padding: 0.5rem 1rem !important;
     margin: 0 0.25rem;
     border-radius: 8px;
     transition: all 0.3s ease;
     position: relative;
 }

 .navbar-nav .nav-link:hover {
     color: white !important;
     background-color: rgba(255, 255, 255, 0.15);
     transform: translateY(-2px);
 }

 .navbar-nav .nav-link.active {
     color: white !important;
     background-color: rgba(255, 255, 255, 0.2);
     font-weight: 600;
 }

 .navbar-nav .nav-link i {
     margin-right: 0.5rem;
     font-size: 1.1rem;
 }

 /* Dropdown Menu */
 .dropdown-menu {
     border: none;
     border-radius: 12px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
     padding: 0.5rem;
     margin-top: 0.5rem;
     animation: fadeInDown 0.3s ease;
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .dropdown-item {
     padding: 0.75rem 1rem;
     border-radius: 8px;
     color: #495057;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }

 .dropdown-item i {
     color: var(--purple-primary);
     font-size: 1.1rem;
     width: 20px;
 }

 .dropdown-item:hover {
     background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(123, 44, 191, 0.1) 100%);
     color: var(--purple-primary);
     transform: translateX(5px);
 }

 .dropdown-item.active {
     background: linear-gradient(135deg, var(--orange-primary) 0%, var(--purple-primary) 100%);
     color: white;
 }

 .dropdown-item.active i {
     color: white;
 }

 .dropdown-divider {
     margin: 0.5rem 0;
     border-top: 1px solid rgba(123, 44, 191, 0.1);
 }

 /* CTA Button */
 .btn-cta {
     background: white;
     color: var(--purple-primary);
     border: 2px solid white;
     padding: 0.5rem 1.5rem;
     border-radius: 25px;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .btn-cta:hover {
     background: transparent;
     color: white;
     border-color: white;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .btn-cta i {
     margin-right: 0.5rem;
 }

 /* Mobile Toggle */
 .navbar-toggler {
     border: 2px solid white;
     padding: 0.5rem 0.75rem;
     border-radius: 8px;
 }

 .navbar-toggler:focus {
     box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
 }

 .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }


 /* Notification Badge */
 .notification-badge {
     position: relative;
 }

 .notification-badge .badge {
     position: absolute;
     top: -5px;
     right: -5px;
     background: var(--orange-primary);
     color: white;
     border: 2px solid;
     border-radius: 50%;
     padding: 0.25rem 0.4rem;
     font-size: 0.65rem;
     font-weight: 700;
 }

 /* User Profile Dropdown */
 .user-profile {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.25rem 0.75rem;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 25px;
     transition: all 0.2s;
 }

 .user-profile:hover {
     background: rgba(255, 255, 255, 0.25);
 }

 .user-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: white;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--purple-primary);
     font-weight: 600;
 }

 /* Demo Content */
 .hero-section {
     background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(123, 44, 191, 0.1) 100%);
     padding: 4rem 0;
     margin-top: 2rem;
     border-radius: 12px;
 }

 .feature-card {
     background: white;
     border-radius: 12px;
     padding: 2rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     transition: all 0.3s;
     height: 100%;
 }

 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
 }

 .feature-icon {
     width: 60px;
     height: 60px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.75rem;
     margin-bottom: 1rem;
 }

 .feature-icon.orange {
     background: linear-gradient(135deg, var(--orange-light), var(--orange-primary));
     color: white;
 }

 .feature-icon.purple {
     background: linear-gradient(135deg, var(--purple-light), var(--purple-primary));
     color: white;
 }

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

     .navbar-nav {
         padding: 1rem 0;
     }

     .navbar-nav .nav-link {
         margin: 0.25rem 0;
     }
 }

 .content-wrapper {
     flex: 1;
 }

 /* Main Footer */
 .footer-main {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     color: white;
     padding: 4rem 0 2rem 0;
     
 }

 .footer-brand {
     margin-bottom: 1.5rem;
 }

 .footer-brand h3 {
     font-size: 2rem;
     font-weight: 700;
     /*
     background: linear-gradient(135deg, var(--orange-primary) 0%, var(--purple-primary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     */
     color: #fff;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
 }



 .footer-brand i {
     background: linear-gradient(135deg, var(--orange-primary) 0%, var(--purple-primary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 2rem;
 }

 .footer-description {
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.8;
     margin-bottom: 1.5rem;
 }

 .footer-heading {
     font-size: 1.125rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: white;
     position: relative;
     padding-bottom: 0.75rem;
 }

 .footer-heading::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 50px;
     height: 3px;
     background: linear-gradient(135deg, var(--orange-primary) 0%, var(--purple-primary) 100%);
     border-radius: 2px;
 }

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

 .footer-links li {
     margin-bottom: 0.75rem;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
 }

 .footer-links a i {
     font-size: 0.875rem;
     opacity: 0;
     transform: translateX(-10px);
     transition: all 0.3s ease;
 }

 .footer-links a:hover {
     color: var(--orange-primary);
     transform: translateX(5px);
 }

 .footer-links a:hover i {
     opacity: 1;
     transform: translateX(0);
 }

 /* Social Media Icons */
 .social-links {
     display: flex;
     gap: 1rem;
     margin-top: 1.5rem;
 }

 .social-link {
     width: 45px;
     height: 45px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.1);
     color: white;
     text-decoration: none;
     transition: all 0.3s ease;
     font-size: 1.25rem;
 }

 .social-link:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 }

 .social-link.facebook:hover {
     background: #1877f2;
     color: white;
 }

 .social-link.twitter:hover {
     background: #1da1f2;
     color: white;
 }

 .social-link.linkedin:hover {
     background: #0a66c2;
     color: white;
 }

 .social-link.instagram:hover {
     background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
     color: white;
 }

 .social-link.youtube:hover {
     background: #ff0000;
     color: white;
 }

 .social-link.github:hover {
     background: #333;
     color: white;
 }

 /* Newsletter Subscription */
 .newsletter-form {
     position: relative;
     max-width: 400px;
 }

 .newsletter-input {
     width: 100%;
     padding: 0.875rem 1.25rem;
     padding-right: 120px;
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 50px;
     background: rgba(255, 255, 255, 0.05);
     color: white;
     transition: all 0.3s ease;
 }

 .newsletter-input::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }

 .newsletter-input:focus {
     outline: none;
     border-color: var(--orange-primary);
     background: rgba(255, 255, 255, 0.1);
 }

 .newsletter-btn {
     position: absolute;
     right: 5px;
     top: 5px;
     background: linear-gradient(135deg, var(--orange-primary) 0%, var(--purple-primary) 100%);
     color: white;
     border: none;
     padding: 0.675rem 1.5rem;
     border-radius: 50px;
     font-weight: 600;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .newsletter-btn:hover {
     transform: scale(1.05);
     box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
 }

 /* Contact Info */
 .contact-info {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .contact-info li {
     margin-bottom: 1rem;
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     color: rgba(255, 255, 255, 0.7);
 }

 .contact-info i {
     color: var(--orange-primary);
     font-size: 1.25rem;
     margin-top: 0.25rem;
 }

 .contact-info a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .contact-info a:hover {
     color: var(--orange-primary);
 }

 /* App Download Buttons */
 .app-download {
     display: flex;
     gap: 1rem;
     margin-top: 1.5rem;
     flex-wrap: wrap;
 }

 .app-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 1.5rem;
     background: rgba(255, 255, 255, 0.1);
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     color: white;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .app-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: var(--orange-primary);
     color: white;
     transform: translateY(-3px);
 }

 .app-btn i {
     font-size: 2rem;
 }

 .app-btn-text {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 .app-btn-text small {
     font-size: 0.75rem;
     opacity: 0.8;
 }

 .app-btn-text span {
     font-weight: 600;
     font-size: 1rem;
 }

 /* Bottom Footer */
 .footer-bottom {
     background: rgba(0, 0, 0, 0.3);
     padding: 1.5rem 1rem;
     margin-top: 3rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .footer-bottom-links {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
     justify-content: center;
 }

 .footer-bottom-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer-bottom-links a:hover {
     color: var(--orange-primary);
 }

 .copyright {
     color: rgba(255, 255, 255, 0.6);
     margin: 0;
 }

 /* Trust Badges */
 .trust-badges {
     display: flex;
     gap: 2rem;
     align-items: center;
     margin-top: 1.5rem;
     flex-wrap: wrap;
 }

 .trust-badge {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.875rem;
 }

 .trust-badge i {
     color: var(--orange-primary);
     font-size: 1.25rem;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .footer-main {
         padding: 3rem 0 2rem 0;
     }

     .footer-heading::after {
         width: 40px;
     }

     .newsletter-form {
         max-width: 100%;
     }

     .newsletter-input {
         padding-right: 100px;
     }

     .newsletter-btn {
         padding: 0.675rem 1rem;
         font-size: 0.875rem;
     }

     .footer-bottom-links {
         gap: 1rem;
         font-size: 0.875rem;
     }
 }

 /* Demo Content Styling */
 .demo-content {
     padding: 4rem 0;
     text-align: center;
 }

 .demo-content h1 {
     background: linear-gradient(135deg, var(--orange-primary) 0%, var(--purple-primary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 1rem;
 }

 /* Hero Section */
 .hero {
     background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
     opacity: 0.5;
 }

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

 .hero h1 {
     font-size: 3.5rem;
     font-weight: 700;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
     animation: fadeInUp 1s ease;
 }

 .hero p {
     font-size: 1.3rem;
     opacity: 0.95;
     animation: fadeInUp 1s ease 0.2s both;
 }

 .cta-buttons {
     animation: fadeInUp 1s ease 0.4s both;
 }

 /* Custom Buttons */
 .btn-orange {
     background: linear-gradient(135deg, var(--orange-primary), var(--orange-secondary));
     border: none;
     color: white;
     padding: 15px 30px;
     border-radius: 50px;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
 }

 .btn-orange:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
     color: white;
 }

 .btn-purple {
     background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
     border: none;
     color: white;
     padding: 15px 30px;
     border-radius: 50px;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }

 .btn-purple:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
     color: white;
 }

 .btn-glass {
     background: rgba(255, 255, 255, 0.2);
     border: 2px solid rgba(255, 255, 255, 0.3);
     color: white;
     padding: 15px 30px;
     border-radius: 50px;
     font-weight: 600;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
 }

 .btn-glass:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: translateY(-3px);
     color: white;
 }

 /* Feature Cards */
 .feature-card {
     background: white;
     border-radius: 20px;
     padding: 2rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border: 1px solid rgba(102, 126, 234, 0.1);
     height: 100%;
 }

 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .feature-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
     font-size: 24px;
     color: white;
 }

 /* Phone Mockup */
 .phone-mockup {
     width: 280px;
     height: 560px;
     background: #333;
     border-radius: 30px;
     padding: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     position: relative;
     margin: 0 auto;
 }

 .phone-screen {
     width: 100%;
     height: 100%;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     color: white;
     padding: 2rem;
     text-align: center;
 }

 .floating {
     animation: float 3s ease-in-out infinite;
 }

 @keyframes float {

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

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

 /* Step Cards */
 .step-card {
     text-align: center;
     padding: 2rem;
 }

 .step-number {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     font-weight: bold;
     margin: 0 auto 1.5rem;
     box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
 }

 /* Pricing Cards */
 .pricing-card {
     background: white;
     border: 2px solid #f0f0f0;
     border-radius: 20px;
     padding: 2.5rem 2rem;
     transition: all 0.3s ease;
     position: relative;
     height: 100%;
 }

 .pricing-card.featured {
     border-color: var(--orange-primary);
     transform: scale(1.05);
     box-shadow: 0 15px 30px rgba(255, 107, 53, 0.2);
 }

 .pricing-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .pricing-card .featured-badge {
     position: absolute;
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--orange-primary);
     color: white;
     padding: 8px 20px;
     border-radius: 20px;
     font-size: 0.9rem;
     font-weight: 600;
 }

 .price {
     font-size: 3rem;
     font-weight: bold;
     color: #333;
     margin: 1rem 0;
 }

 .price span {
     font-size: 1.2rem;
     color: #666;
 }

 /* Testimonials */
 .testimonial-card {
     background: white;
     border-radius: 20px;
     padding: 2.5rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border-left: 5px solid var(--orange-primary);
     height: 100%;
     position: relative;
 }

 .testimonial-quote {
     font-size: 1.1rem;
     font-style: italic;
     color: #555;
     margin-bottom: 1.5rem;
     line-height: 1.7;
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .testimonial-avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--purple-primary), var(--purple-secondary));
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     font-weight: bold;
 }

 .testimonial-info h6 {
     margin-bottom: 0.25rem;
     font-weight: 600;
 }

 .testimonial-info small {
     color: #666;
 }

 /* Contact Form */
 .contact-form {
     background: white;
     border-radius: 20px;
     padding: 3rem;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 107, 53, 0.1);
 }

 section .form-control {
     border-radius: 15px;
     border: 2px solid #f0f0f0;
     padding: 15px 20px;
     transition: all 0.3s ease;
 }

 .form-control:focus {
     border-color: var(--orange-primary);
     box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
 }

 /* Animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .animate-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.6s ease;
 }

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

 /* Custom spacing */
 .section-padding {
     padding: 80px 0;
 }

 /* Background colors */
 .bg-light-purple {
     background: linear-gradient(to bottom, #f8f9ff, #ffffff) !important;
 }

 .bg-light-orange {
     background: linear-gradient(to bottom, #fff8f5, #ffffff) !important;
 }