* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         background-color: #faf9f5;
         font-family: "Ubuntu", sans-serif;
     }

     /* =============================NAVBAR=============================== */
     nav {
         display: flex;
         justify-content: space-between;
         align-items: center;
         background: white;
         /* fully transparent at start */
         box-shadow: none;
         /* no shadow initially */
         border-bottom: none;
         /* prevent any thin line */
         position: sticky;
         top: 0;
         z-index: 1000;
         transition: background 0.4s ease, box-shadow 0.4s ease;
     }

     /* When scrolled */
     nav.scrolled {
         background: white;
         /* white background */
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
         /* soft shadow only after scroll */
     }



     /* Left section = logo + links */
     .nav-left {
         display: flex;
         align-items: center;
         gap: 30px;
         padding: 0px 5px;
     }

     .mainlogo img {
         height: 62px;
     }

     .nav-links {
         list-style: none;
         display: flex;
         gap: 20px;
     }

     .nav-links li a {
         text-decoration: none;
         color: #333;
         font-size: 16px;
         font-weight: 500;
         transition: all 0.3s ease;
         padding: 6px 12px;
         border-radius: 8px;
     }

     .nav-links li a:hover {
         color: #ff8300
     }

     /* Right section = CTA button + phone */
     .nav-right {
         position: relative;
         /* make it the container */
         padding: 7px;
         text-align: center;
         border-radius: 100% 0% 71% 29% / 0% 100% 0% 100%;
         background: rgba(255, 255, 255, 0);
         /* base white */
         color: #333;

         display: flex;
         align-items: center;
         gap: 10px;

         overflow: hidden;
         /* ⬅️ keeps animation INSIDE shape */
         transition: color 0.5s ease;
     }

     /* gradient overlay */
     .nav-right::before {
         content: "";
         position: absolute;
         top: 0;
         right: 0;
         /* start at right edge */
         width: 0%;
         /* hidden initially */
         height: 100%;
         background: #ff8300;
         border-radius: inherit;
         /* match nav-right shape */
         z-index: 0;
         transition: width 1s ease-in-out;
     }

     .nav-right:hover::before {
         width: 100%;
         /* expands fully from right → left */
     }

     .nav-right * {
         position: relative;
         /* keep text/icon above gradient */
         z-index: 1;
     }

     .nav-right .phone {
         color: #000000;
         transition: color 1.5s ease;
     }

     .nav-right:hover .phone {
         color: white;
     }

     .agent-icon img {
         display: block;
         height: 45px;
         margin-left: 35px;
         transition: filter 3s ease;
     }

     .nav-right:hover .agent-icon img {
         filter: brightness(0) invert(1);
         /* turns white */
     }




     /* Mobile toggle */
     .menu-toggle {
         display: none;
         font-size: 28px;
         color: #333;
         cursor: pointer;
     }

     @media (max-width: 900px) {
         .nav-left {
             flex: 1;
             justify-content: space-between;
         }

         .mainlogo img {
             height: 50px;
         }

         /* Mobile Nav - Slide in from right */
         .nav-links {
             display: flex;
             flex-direction: column;
             justify-content: center;
             gap: 20px;

             position: fixed;
             top: 0;
             right: -100%;
             /* hidden off-screen */
             height: 100vh;
             width: 70%;
             background: #fff;
             box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
             padding: 60px 30px;

             transition: right 0.4s ease-in-out, opacity 0.4s ease-in-out;
             opacity: 0;
             z-index: 1001;
             /* higher than overlay */
         }

         .nav-links.active {
             right: 0;
             opacity: 1;
         }

         /* Each nav item animation */
         .nav-links li {
             border: none;
             transform: translateX(30px);
             opacity: 0;
             transition: all 0.4s ease;
         }

         .nav-links.active li {
             transform: translateX(0);
             opacity: 1;
         }

         .nav-links.active li:nth-child(1) {
             transition-delay: 0.1s;
         }

         .nav-links.active li:nth-child(2) {
             transition-delay: 0.2s;
         }

         .nav-links.active li:nth-child(3) {
             transition-delay: 0.3s;
         }

         .nav-links li a {
             display: block;
             font-size: 20px;
             font-weight: 600;
             color: #333;
             padding: 12px 0;
             transition: color 0.3s ease;
         }

         .nav-links li a:hover {
             color: #ff8300;
         }

         /* Hamburger stays */
         .menu-toggle {
             display: block;
             font-size: 30px;
             cursor: pointer;
             color: #ff8300;
             z-index: 1002;
             /* above overlay */
         }

         /* Overlay behind menu */
         .nav-overlay {
             content: "";
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: rgba(0, 0, 0, 0.5);
             opacity: 0;
             pointer-events: none;
             transition: opacity 0.4s ease;
             z-index: 1000;
         }

         .nav-links.active~.nav-overlay {
             opacity: 1;
             pointer-events: auto;
             /* clickable */
         }

         /* Hide CTA on mobile */
         .nav-right {
             display: none;
         }
     }


     /* ==================================END NAVBAR=============================== */





     /* ================ About Heading ==================== */

     .section-aboutheading {
         position: relative;
         display: flex;
         align-items: center;
         justify-content: space-between;
         /* text on left, image on right */
         padding: 0px 10%;
         background: linear-gradient(-45deg, #f69153, #f9fafc, #fff4eb, #e99b4d);
         background-size: 150% 150%;
         animation: gradientMove 5s ease-in-out infinite;
         gap: 40px;
         /* spacing between text and image */
         flex-wrap: wrap;
         /* allows natural wrapping if space is tight */
     }

     /* Gradient animation */
     @keyframes gradientMove {
         0% {
             background-position: 0% 100%;
         }

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

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

     .text-content-aboutheading {
         max-width: 800px;
         flex: 1;
         text-align: left;
     }

     .text-content-aboutheading h1 {
         font-size: 2rem;
         /* fluid scaling */
         color: #0a1f44;
         margin-bottom: 10px;
     }

     .text-content-aboutheading h2 {
         font-size: 1.5rem;
         /* fluid scaling */
         color: #0a1f44;
         margin-bottom: 20px;
         font-weight: 500;
     }

     .text-content-aboutheading h1 span {
         color: #ff7b00;
         position: relative;
     }

     .text-content-aboutheading p {
         font-size: clamp(0.95rem, 1.2vw, 1.2rem);
         /* fluid scaling */
         color: #0d2b3e;
         margin-bottom: 30px;
         line-height: 1.6;
     }

     /* Button */
     .btn {
         display: inline-block;
         border: none;
         padding: 12px 26px;
         border-radius: 30px;
         color: #fff;
         cursor: pointer;
         font-weight: 600;
         font-size: clamp(0.9rem, 1vw, 1rem);
         /* fluid scaling */
         background: linear-gradient(135deg, #ff7b00, #ff9f40);
         position: relative;
         overflow: hidden;
         text-decoration: none;
         transition: transform 0.35s ease, box-shadow 0.35s ease;
     }

     .btn::after {
         content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: rgba(255, 255, 255, 0.3);
         transform: skewX(-25deg);
         transition: left 0.6s ease;
     }

     .btn:hover::after {
         left: 200%;
     }

     .btn:hover {
         transform: scale(1.07) translateY(-3px);
         box-shadow: 0 10px 22px rgba(255, 123, 0, 0.35);
     }

     /* Image wrapper with fluid scaling */
     .image-wrapper-aboutheading {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     /* ================= Responsive ================= */

     /* Tablets */
     @media (max-width: 1024px) {
         .section-aboutheading {
             flex-direction: column;
             align-items: center;
             justify-content: center;
             padding: 120px 8%;
             text-align: center;
         }

         .text-content-aboutheading {
             max-width: 100%;
             text-align: center;
         }

         .image-wrapper-aboutheading img {
             width: clamp(180px, 60vw, 400px);
             margin-top: 30px;
         }
     }

     /* Mobile */
     @media (max-width: 600px) {
         .section-aboutheading {
             padding: 100px 6%;
         }

         .image-wrapper-aboutheading {
             display: none;
             /* hide image only on small screens */
         }

         .text-content-aboutheading h1 {
             font-size: clamp(1.3rem, 5vw, 1.6rem);
         }

         .text-content-aboutheading p {
             font-size: clamp(0.85rem, 4vw, 0.95rem);
         }

         .btn {
             padding: 10px 22px;
             font-size: clamp(0.85rem, 4vw, 0.95rem);
         }
     }


     /* ============== About Heading /END ================= */







     /* ================ Toggle Section ==================== */
     .toggle-section {
         padding: 80px 10%;
         background: #ffffff;
         text-align: center;
     }

     .toggle-container {
         display: inline-flex;
         background: #f0f0f0;
         border-radius: 50px;
         padding: 8px;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         position: relative;
         margin-bottom: 60px;
     }

     .toggle-btn {
         padding: 14px 40px;
         border: none;
         background: transparent;
         color: #0d2b3e;
         font-size: 1rem;
         font-weight: 600;
         cursor: pointer;
         border-radius: 50px;
         transition: color 0.3s ease;
         position: relative;
         z-index: 2;
     }

     .toggle-btn.active {
         color: #fff;
     }

     .toggle-slider {
         position: absolute;
         top: 8px;
         left: 8px;
         width: calc(50% - 8px);
         height: calc(100% - 16px);
         background: linear-gradient(135deg, #ff7b00, #ff9f40);
         border-radius: 50px;
         transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
         box-shadow: 0 4px 12px rgba(255, 123, 0, 0.3);
     }

     .toggle-slider.products {
         transform: translateX(calc(100% + 8px));
     }

     /* Content Sections */
     .content-wrapper {
         position: relative;
         min-height: 400px;
     }

     .content-section {
         display: none;
         animation: fadeIn 0.5s ease;
     }

     .content-section.active {
         display: block;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

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

     /* Grid Layout */
     .cards-grid {
         display: grid;
         grid-template-columns: repeat(minmax(280px, 1fr));
         gap: 30px;
         max-width: 1000px;
         margin: 0 auto;
     }

     .card {
         background: #fff;
         border-radius: 16px;
         padding: 30px;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border: 2px solid transparent;
     }

     .card:hover {
         transform: translateY(-8px);
         box-shadow: 0 8px 30px rgba(255, 123, 0, 0.2);
         border-color: #ff9f40;
     }

     .card-icon {
         width: 60px;
         height: 60px;
         background: linear-gradient(135deg, #ff7b00, #ff9f40);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 20px;
         padding: 12px;
     }

     .card-icon svg {
         width: 100%;
         height: 100%;
     }

     .card h3 {
         color: #0a1f44;
         font-size: 1.4rem;
         margin-bottom: 12px;
     }

     .card p {
         color: #0d2b3e;
         line-height: 1.6;
         margin-bottom: 20px;
     }

     .card-link {
         display: inline-block;
         color: #ff7b00;
         font-weight: 600;
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .card-link:hover {
         color: #ff9f40;
     }

     .card-link::after {
         content: " →";
         transition: transform 0.3s ease;
         display: inline-block;
     }

     .card-link:hover::after {
         transform: translateX(5px);
     }

     /* Responsive */
     @media (max-width: 768px) {
         .toggle-section {
             padding: 60px 6%;
         }

         .toggle-btn {
             padding: 12px 30px;
             font-size: 0.9rem;
         }

         .cards-grid {
             grid-template-columns: 1fr;
             gap: 20px;
         }
     }

     /* ==========TOGGLE SECTION END ========== */













     /* ================== CHATBOT SECTION =================== */

     .chatbot-section-container {
         margin: 0 auto;
         background: #e67600;
         padding: 80px 200px;
     }

     .chatbot-hero-wrapper {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         align-items: center;
     }

     .chatbot-content-area {
         color: #fff;
     }

     .chatbot-main-title {
         font-size: 3rem;
         margin-bottom: 20px;
         line-height: 1.2;
     }

     .chatbot-description-text {
         font-size: 1.1rem;
         margin-bottom: 15px;
         line-height: 1.6;
     }

     .chatbot-features-list {
         list-style: none;
         margin: 20px 0;
     }

     .chatbot-feature-item {
         padding: 10px 0;
         padding-left: 30px;
         position: relative;
     }

     .chatbot-feature-item:before {
         content: "✓";
         position: absolute;
         left: 0;
         font-weight: bold;
         font-size: 1.2rem;
     }

     .chatbot-demo-container {
         background: #fff;
         border-radius: 20px;
         padding: 30px;
         box-shadow: 0 10px 40px rgba(10, 31, 68, 0.2);
         position: relative;
         height: 500px;
     }

     .chatbot-demo-header {
         background: #0a1f44;
         color: #fff;
         padding: 15px 20px;
         border-radius: 10px 10px 0 0;
         margin: -30px -30px 20px -30px;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .chatbot-avatar-icon {
         width: 40px;
         height: 40px;
         background: #ffffff;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
     }

     .chatbot-messages-area {
         height: 380px;
         overflow-y: auto;
         padding: 10px 0;
     }

     .chatbot-message-wrapper {
         margin-bottom: 15px;
         display: flex;
         gap: 10px;
         opacity: 0;
         animation: chatbotFadeIn 0.5s forwards;
     }

     .chatbot-message-bot {
         flex-direction: row;
     }

     .chatbot-message-user {
         flex-direction: row-reverse;
     }

     .chatbot-message-bubble {
         max-width: 70%;
         padding: 12px 18px;
         border-radius: 18px;
         font-size: 0.95rem;
     }

     .chatbot-message-bot .chatbot-message-bubble {
         background: #f0f0f0;
         color: #0a1f44;
     }

     .chatbot-message-user .chatbot-message-bubble {
         background: #0a1f44;
         color: #fff;
     }

     .chatbot-typing-indicator {
         display: flex;
         gap: 5px;
         padding: 12px 18px;
         background: #f0f0f0;
         border-radius: 18px;
         width: fit-content;
     }

     .chatbot-typing-dot {
         width: 8px;
         height: 8px;
         background: #999;
         border-radius: 50%;
         animation: chatbotTyping 1.4s infinite;
     }

     .chatbot-typing-dot:nth-child(2) {
         animation-delay: 0.2s;
     }

     .chatbot-typing-dot:nth-child(3) {
         animation-delay: 0.4s;
     }

     @keyframes chatbotFadeIn {
         to {
             opacity: 1;
         }
     }

     @keyframes chatbotTyping {

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

         30% {
             transform: translateY(-10px);
         }
     }


     @media (max-width: 968px) {
         .chatbot-hero-wrapper {
             grid-template-columns: 1fr;
         }

         .chatbot-main-title {
             font-size: 2rem;
         }

         .chatbot-section-container {
             padding: 60px 40px;
         }
     }

     /* ================== CHATBOT SECTION END =================== */





     /* =============CHATBOT PRICING================ */
     .chatbot-pricing-body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
         background: #ffffff;
         padding: 60px 150px;
         min-height: 100vh;
     }

     .chatbot-pricing-container {
         max-width: 1400px;
         margin: 0 auto;
     }

     .chatbot-pricing-header {
         text-align: center;
         margin-bottom: 60px;
     }

     .chatbot-pricing-title {
         color: #0a1f44;
         font-size: 3rem;
         font-weight: 700;
         margin-bottom: 16px;
     }

     .chatbot-pricing-subtitle {
         color: #666;
         font-size: 1.25rem;
         max-width: 600px;
         margin: 0 auto;
     }

     .chatbot-pricing-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 30px;
         margin-top: 40px;
     }

     .chatbot-pricing-card {
         background: #ffffff;
         border-radius: 16px;
         padding: 40px 32px;
         position: relative;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border: 2px solid #e8e8e8;
     }

     .chatbot-pricing-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 40px rgba(230, 118, 0, 0.2);
         border-color: #e67600;
     }

     .chatbot-pricing-card-featured {
         border: 2px solid #e67600;
         box-shadow: 0 12px 32px rgba(230, 118, 0, 0.15);
     }

     .chatbot-pricing-badge {
         position: absolute;
         top: -12px;
         right: 32px;
         background: #e67600;
         color: #ffffff;
         padding: 6px 16px;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }

     .chatbot-plan-name {
         color: #0a1f44;
         font-size: 1.75rem;
         font-weight: 700;
         margin-bottom: 8px;
     }

     .chatbot-plan-subtitle {
         color: #666;
         font-size: 1rem;
         margin-bottom: 24px;
         min-height: 48px;
     }

     .chatbot-price-wrapper {
         margin-bottom: 32px;
     }

     .chatbot-price-amount {
         color: #e67600;
         font-size: 2.5rem;
         font-weight: 700;
         line-height: 1;
     }

     .chatbot-price-period {
         color: #666;
         font-size: 1rem;
         margin-left: 4px;
     }

     .chatbot-price-range {
         color: #e67600;
         font-size: 2rem;
         font-weight: 700;
         line-height: 1;
     }

     .chatbot-price-custom {
         color: #0a1f44;
         font-size: 1.5rem;
         font-weight: 600;
     }

     .chatbot-pricing-features-list {
         list-style: none;
         margin-bottom: 32px;
     }

     .chatbot-pricing-feature-item {
         color: #0a1f44;
         padding: 12px 0;
         padding-left: 28px;
         position: relative;
         line-height: 1.5;
         height: 100%;
     }

     .chatbot-pricing-feature-item::before {
         content: "✓";
         position: absolute;
         left: 0;
         color: #e67600;
         font-weight: bold;
         font-size: 1.2rem;
     }

     .chatbot-cta-button {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 80%;
         padding: 16px 32px;
         background: #0a1f44;
         color: #ffffff;
         border: 2px solid #0a1f44;
         border-radius: 8px;
         font-size: 1rem;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin-bottom: 20px;
         margin-left: 40px;
         margin-top: 10px;
     }


     .chatbot-cta-button:hover {
         background: #e67600;
         border-color: #e67600;
         transform: scale(1.02);
     }

     .chatbot-cta-button-secondary {
         background: transparent;
         color: #0a1f44;
         border: 2px solid #0a1f44;
     }

     .chatbot-cta-button-secondary:hover {
         background: #0a1f44;
         color: #ffffff;
     }

     @media (max-width: 768px) {

         .chatbot-pricing-body {
             padding: 40px 20px;
         }

         .chatbot-pricing-title {
             font-size: 2rem;
         }

         .chatbot-pricing-grid {
             grid-template-columns: 1fr;
         }

         .chatbot-pricing-features-list {
             margin-bottom: 50px;
         }

         .chatbot-cta-button {
             position: static;
             width: 100%;
             margin: 0;
         }
     }

     /* =============CHATBOT PRICING END================ */




     /* =============ERP SECTION================ */

     .erp-section {
         background-color: #000000;
         color: #ffffff;
         overflow-x: hidden
     }

     .erp-container {
         display: flex;
         min-height: 100vh;
         align-items: center;
         padding: 40px;
         gap: 80px;
         max-width: 1400px;
         margin: 0 auto;
     }

     .erp-left-section {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
     }

     .erp-animation-wrapper {
         position: relative;
         width: 500px;
         height: 500px;
     }

     /* Dashboard Grid */
     .erp-dashboard {
         width: 100%;
         height: 100%;
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
         border-radius: 20px;
         border: 2px solid rgba(159, 93, 17, 0.3);
         padding: 20px;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: auto 1fr 1fr;
         gap: 15px;
         box-shadow: 0 10px 50px rgba(230, 118, 0, 0.2);
     }

     .erp-header-bar {
         grid-column: 1 / -1;
         border-radius: 10px;
         padding: 15px;
         display: flex;
         align-items: center;
         gap: 10px;
         animation: erp-glow 2s ease-in-out infinite;
     }

     .erp-logo-dot {
         width: 12px;
         height: 12px;
         background-color: #0a1f44;
         border-radius: 50%;
         animation: erp-pulse-dot 1.5s ease-in-out infinite;
     }

     .erp-header-line {
         flex: 1;
         height: 8px;
         background: linear-gradient(90deg, #ffffff, transparent);
         border-radius: 4px;
     }

     .erp-module {
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(230, 118, 0, 0.3);
         border-radius: 12px;
         padding: 15px;
         display: flex;
         flex-direction: column;
         gap: 8px;
         position: relative;
         overflow: hidden;
     }


     .erp-module-icon {
         width: 30px;
         height: 30px;
         fill: #e67600;
     }

     .erp-module-title {
         font-size: 11px;
         font-weight: 600;
         color: #ffffff;
     }

     .erp-module-bar {
         height: 4px;
         background: rgba(230, 118, 0, 0.3);
         border-radius: 2px;
         overflow: hidden;
     }

     .erp-module-progress {
         height: 100%;
         background: #ffffff;
         border-radius: 2px;
         animation: erp-progress 2s ease-in-out infinite;
     }

     .erp-module:nth-child(2) .erp-module-progress {
         animation-delay: 0.2s;
     }

     .erp-module:nth-child(3) .erp-module-progress {
         animation-delay: 0.4s;
     }

     .erp-module:nth-child(4) .erp-module-progress {
         animation-delay: 0.6s;
     }

     .erp-module:nth-child(5) .erp-module-progress {
         animation-delay: 0.8s;
     }

     .erp-module:nth-child(6) .erp-module-progress {
         animation-delay: 1s;
     }

     .erp-module:nth-child(7) .erp-module-progress {
         animation-delay: 1.2s;
     }

     .erp-data-flow {
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         pointer-events: none;
     }

     .erp-flow-line {
         position: absolute;
         background: #e67600;
         opacity: 0;
         animation: erp-data-pulse 3s ease-in-out infinite;
     }

     .erp-flow-h {
         height: 2px;
         width: 50px;
     }

     .erp-flow-v {
         width: 2px;
         height: 50px;
     }

     .erp-right-section {
         flex: 1;
         padding: 40px;
     }

     .erp-badge {
         display: inline-block;
         background-color: #e67600;
         color: #ffffff;
         padding: 8px 20px;
         border-radius: 20px;
         font-size: 14px;
         font-weight: 600;
         margin-bottom: 20px;
         animation: erp-slide-in 0.6s ease-out;
     }

     .erp-title {
         font-size: 56px;
         font-weight: 700;
         margin-bottom: 20px;
         line-height: 1.2;
         animation: erp-slide-in 0.8s ease-out;
     }

     .erp-subtitle {
         font-size: 24px;
         color: #e67600;
         margin-bottom: 30px;
         animation: erp-slide-in 1s ease-out;
     }

     .erp-description {
         font-size: 18px;
         line-height: 1.6;
         color: #b8c5d6;
         margin-bottom: 40px;
         animation: erp-slide-in 1.2s ease-out;
     }

     .erp-notify-btn {
         background-color: #e67600;
         color: #ffffff;
         border: none;
         padding: 16px 40px;
         font-size: 16px;
         font-weight: 600;
         border-radius: 8px;
         cursor: pointer;
         transition: all 0.3s ease;
         animation: erp-slide-in 1.6s ease-out;
     }

     .erp-notify-btn:hover {
         background-color: #ff8c1a;
         transform: translateY(-2px);
         box-shadow: 0 10px 30px rgba(230, 118, 0, 0.4);
     }



     @keyframes erp-pulse-dot {

         0%,
         100% {
             transform: scale(1);
             opacity: 1;
         }

         50% {
             transform: scale(1.3);
             opacity: 0.7;
         }
     }

     @keyframes erp-scan {
         0% {
             left: -100%;
         }

         100% {
             left: 100%;
         }
     }

     @keyframes erp-progress {

         0%,
         100% {
             width: 40%;
         }

         50% {
             width: 80%;
         }
     }

     @keyframes erp-module-fade-in {
         from {
             opacity: 0;
             transform: scale(0.8);
         }

         to {
             opacity: 1;
             transform: scale(1);
         }
     }

     @keyframes erp-data-pulse {

         0%,
         100% {
             opacity: 0;
         }

         50% {
             opacity: 0.6;
         }
     }

     @keyframes erp-slide-in {
         from {
             opacity: 0;
             transform: translateX(30px);
         }

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

     @media (max-width: 968px) {
         .erp-container {
             flex-direction: column;
             gap: 40px;
         }

         .erp-animation-wrapper {
             width: 100%;
             max-width: 400px;
             height: 400px;
         }

         .erp-title {
             font-size: 42px;
         }
     }

     /* =============ERP SECTION END================ */






     /* ==========Service Section============== */
     .web-service-container,
     .ai-service-container {
         max-width: 1000px;
         margin: 0 auto;
         padding: 80px 20px;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 60px;
         align-items: center;
     }

     .web-service-container,
     .ai-service-container {
         background: #f8f9fa;
     }

     .web-service-content,
     .ai-service-content {
         padding: 20px;
     }

     .web-service-title,
     .ai-service-title {
         font-size: 2.5rem;
         color: #0a1f44;
         margin-bottom: 20px;
         font-weight: 700;
     }

     .web-service-subtitle,
     .ai-service-subtitle {
         font-size: 1.2rem;
         color: #e67600;
         margin-bottom: 30px;
         font-weight: 500;
     }

     .web-service-list,
     .ai-service-list {
         list-style: none;
         margin-bottom: 40px;
     }

     .web-service-list li,
     .ai-service-list li {
         padding: 15px 0;
         padding-left: 30px;
         position: relative;
         font-size: 1.1rem;
         line-height: 1.6;
         color: #333;
     }

     .web-service-list li:before,
     .ai-service-list li:before {
         content: "♦";
         position: absolute;
         left: 0;
         color: #e67600;
         font-weight: bold;
         font-size: 1.3rem;
     }

     .web-service-btn,
     .ai-service-btn {
         background: #e67600;
         color: white;
         border: none;
         padding: 16px 40px;
         font-size: 1.1rem;
         font-weight: 600;
         border-radius: 50px;
         cursor: pointer;
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px rgba(230, 118, 0, 0.3);
     }

     .web-service-btn:hover,
     .ai-service-btn:hover {
         background: #0a1f44;
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(10, 31, 68, 0.4);
     }

     .web-service-animation,
     .ai-service-animation {
         position: relative;
         height: 500px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .web-animation-box {
         position: absolute;
         width: 300px;
         height: 300px;
         background: linear-gradient(135deg, #e67600, #ff8c1a);
         border-radius: 20px;
         animation: float-web 6s ease-in-out infinite;
         box-shadow: 0 10px 40px rgba(230, 118, 0, 0.3);
     }

     .web-browser-bar {
         position: absolute;
         top: 20px;
         left: 20px;
         right: 20px;
         height: 40px;
         background: white;
         border-radius: 10px;
         display: flex;
         align-items: center;
         padding: 0 15px;
     }

     .web-browser-dots {
         display: flex;
         gap: 8px;
     }

     .web-browser-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         animation: pulse 2s ease-in-out infinite;
     }

     .web-browser-dot:nth-child(1) {
         background: #ff5f56;
     }

     .web-browser-dot:nth-child(2) {
         background: #ffbd2e;
         animation-delay: 0.2s;
     }

     .web-browser-dot:nth-child(3) {
         background: #27c93f;
         animation-delay: 0.4s;
     }

     .web-code-lines {
         position: absolute;
         bottom: 40px;
         left: 40px;
         right: 40px;
     }

     .web-code-line {
         height: 8px;
         background: rgba(255, 255, 255, 0.5);
         margin: 10px 0;
         border-radius: 4px;
         animation: code-appear 3s ease-in-out infinite;
     }

     .web-code-line:nth-child(1) {
         width: 80%;
         animation-delay: 0s;
     }

     .web-code-line:nth-child(2) {
         width: 60%;
         animation-delay: 0.5s;
     }

     .web-code-line:nth-child(3) {
         width: 90%;
         animation-delay: 1s;
     }

     .web-code-line:nth-child(4) {
         width: 70%;
         animation-delay: 1.5s;
     }

     .ai-animation-box {
         position: absolute;
         width: 300px;
         height: 300px;
         background: linear-gradient(135deg, #0a1f44, #1a3a6e);
         border-radius: 20px;
         animation: float-ai 6s ease-in-out infinite;
         box-shadow: 0 10px 40px rgba(10, 31, 68, 0.3);
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .ai-brain-icon {
         width: 140px;
         height: 140px;
         position: relative;
     }

     .ai-circle {
         position: absolute;
         border: 3px solid #e67600;
         border-radius: 50%;
         animation: ai-pulse 3s ease-in-out infinite;
     }

     .ai-circle-1 {
         width: 80px;
         height: 80px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }

     .ai-circle-2 {
         width: 110px;
         height: 110px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         animation-delay: 0.5s;
         opacity: 0.7;
     }

     .ai-circle-3 {
         width: 140px;
         height: 140px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         animation-delay: 1s;
         opacity: 0.4;
     }

     .ai-center-dot {
         position: absolute;
         width: 20px;
         height: 20px;
         background: #e67600;
         border-radius: 50%;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         box-shadow: 0 0 20px rgba(230, 118, 0, 0.8);
         animation: ai-glow 2s ease-in-out infinite;
     }

     @keyframes float-web {

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

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

     @keyframes float-ai {

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

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

     @keyframes pulse {

         0%,
         100% {
             transform: scale(1);
             opacity: 1;
         }

         50% {
             transform: scale(1.2);
             opacity: 0.7;
         }
     }

     @keyframes code-appear {

         0%,
         100% {
             opacity: 0.3;
             transform: translateX(-10px);
         }

         50% {
             opacity: 1;
             transform: translateX(0);
         }
     }

     @keyframes ai-pulse {

         0%,
         100% {
             transform: translate(-50%, -50%) scale(1);
             opacity: 1;
         }

         50% {
             transform: translate(-50%, -50%) scale(1.1);
             opacity: 0.6;
         }
     }

     @keyframes ai-glow {

         0%,
         100% {
             box-shadow: 0 0 20px rgba(230, 118, 0, 0.8);
             transform: translate(-50%, -50%) scale(1);
         }

         50% {
             box-shadow: 0 0 40px rgba(230, 118, 0, 1);
             transform: translate(-50%, -50%) scale(1.2);
         }
     }

     @media (max-width: 968px) {

         .web-service-container,
         .ai-service-container {
             grid-template-columns: 1fr;
             gap: 40px;
             padding: 60px 20px;
         }

         .web-service-animation,
         .ai-service-animation {
             height: 400px;
         }

         .web-animation-box,
         .ai-animation-box {
             width: 250px;
             height: 250px;
         }

         .web-service-title,
         .ai-service-title {
             font-size: 2rem;
         }

         .web-service-subtitle,
         .ai-service-subtitle {
             font-size: 1rem;
         }

         .web-service-list li,
         .ai-service-list li {
             font-size: 1rem;
         }
     }

     @media (max-width: 480px) {

         .web-service-title,
         .ai-service-title {
             font-size: 1.75rem;
         }

         .web-animation-box,
         .ai-animation-box {
             width: 200px;
             height: 200px;
         }

         .web-service-animation,
         .ai-service-animation {
             height: 300px;
         }
     }

     /* ==========Service Section END============== */






     /* ==========Contact Section========== */
     .sfo-contact-section {
         background: #ffffff;
         padding: 80px 20px;
         font-family: Arial, Helvetica, sans-serif;
     }

     .sfo-contact-container {
         max-width: 700px;
         margin: auto;
     }

     .sfo-contact-container h2 {
         color: #0a1f44;
         font-size: 28px;
         margin-bottom: 30px;
         text-align: center;
     }

     .service-options {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 15px;
         margin-bottom: 30px;
     }

     .service-options label {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 14px 16px;
         border: 1px solid #ff7b00;
         border-radius: 22px;
         cursor: pointer;
         transition: 0.2s ease;
         background: #ff8c1a;
         color: #ffffff;
         font-size: 15px;
         font-weight: bold;
     }

     .service-options input {
         accent-color: #ff8c1a;
     }

     .service-options label:hover {
         border-color: #ff8c1a;
     }

     .form-fields {
         margin-bottom: 30px;
         border: 2px solid #ff8c1a;
         padding: 40px 80px;
         border-radius: 8px;
     }

     .form-fields input,
     .form-fields textarea {
         width: 100%;
         padding: 14px 16px;
         margin-bottom: 16px;
         border-radius: 8px;
         border: 1px solid #e0e0e0;
         font-size: 15px;
         color: #0a1f44;
     }

     .form-fields input:focus,
     .form-fields textarea:focus {
         outline: none;
         border-color: #ff8c1a;
     }

     button {
         width: 100%;
         padding: 16px;
         background: #ff8c1a;
         color: #ffffff;
         border: none;
         border-radius: 8px;
         font-size: 16px;
         font-weight: 600;
         cursor: pointer;
         transition: 0.3s ease;
     }

     button:hover {
         background: #e67812;
     }









     /* ==========================Footer Base================================== */
     .footer-section {
         background: #000;
         color: #fff;
         padding: 120px 8% 40px;
         position: relative;
         font-family: Arial, sans-serif;
         overflow: visible;
         text-align: left;
     }


     /* Floating Logo */
     .footer-logo-container {
         position: absolute;
         top: -70px;
         /* Push half outside */
         left: 50%;
         transform: translateX(-50%);
         z-index: 10;
     }

     .footer-logo-bg {
         background: #fff;
         /* White background */
         border-radius: 20px;
         padding: 15px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         display: flex;
         justify-content: center;
         align-items: center;
         width: 300px;
         height: 140px;
     }

     .footer-logo {
         max-width: 290px;
         height: auto;
     }


     /* Grid Layout */
     .footer-container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 40px;
         margin-top: 40px;
         margin-bottom: 40px;
     }

     /* Titles */
     .footer-column h3 {
         font-size: 1.2rem;
         margin-bottom: 20px;
         color: #ff8300;
     }

     /* Lists */
     .footer-column ul {
         list-style: none;
         padding: 0;
     }

     .footer-column ul li {
         margin-bottom: 12px;
     }

     .footer-column a {
         text-decoration: none;
         color: #ddd;
         transition: color 0.3s;
     }

     .footer-column a:hover {
         color: #ff8300;
     }

     /* Form */
     .footer-form input,
     .footer-form textarea {
         width: 100%;
         padding: 10px;
         margin-bottom: 12px;
         border-radius: 8px;
         border: none;
         outline: none;
     }

     .footer-form .form-row {
         display: flex;
         gap: 10px;
     }

     .footer-form button {
         background: #ff8300;
         border: none;
         padding: 12px;
         width: 100%;
         border-radius: 8px;
         font-weight: bold;
         cursor: pointer;
         color: white;
         transition: background 0.3s;
     }

     .footer-form button:hover {
         background: #ff7b00;
     }

     /* Socials */
     .footer-socials {
         margin-top: 15px;
     }

     .footer-socials a img {
         width: 35px;
         margin-right: 10px;

         transition: transform 0.3s;
     }

     .footer-socials a img:hover {
         transform: scale(1.1);
     }

     /* Bottom */
     .footer-bottom {
         text-align: center;
         border-top: 1px solid #333;
         padding-top: 20px;
         font-size: 0.85rem;
         margin-bottom: 50px;
         color: #aaa;
     }

     /* Scroll animation */
     .animate-rtl {
         opacity: 0;
         transform: translateX(-80px);
         transition: all 0.8s ease;
     }

     .animate-rtl.show {
         opacity: 1;
         transform: translateX(0);
     }

     /* Responsive */
     @media (max-width: 768px) {
         .footer-container {
             grid-template-columns: 1fr;
             text-align: center;
         }

         .footer-form .form-row {
             flex-direction: column;
         }

         .footer-logo {
             max-width: 200px;
         }
     }