body {
     font-family: 'Hanken Grotesk', sans-serif;
     background-color: #020202;
     color: #fff;
     margin: 0;
     padding: 0;
 }

 @font-face {
     font-family: 'Hanken Grotesk';
     src: url('fonts/HKGrotesk-Regular.woff2') format('woff2'),
         url('fonts/HKGrotesk-Regular.woff') format('woff'),
         url('fonts/HKGrotesk-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

 .container {
     text-align: center;
     padding: 10px 30px;
     font-size: 20px;
     margin-top: -50px;
 }

 @media (max-width: 768px) {
     .container {
         padding: 20px;
         font-size: 18px;
         margin-top: -30px;
     }
 }

 @media (max-width: 468px) {
     .container {
         padding: 5px;
         font-size: 16px;
         margin-top: -20px;
     }
 }

 h1 {
     font-size: 3rem;
     margin-bottom: 100px;
     font-size: 70.5px;
     margin: 32.5px;
 }

 h2 {
     font-size: 3rem;
     margin-top: -10px;
     font-size: 35px;
     word-spacing: 1px;
     font-weight: 900;
 }

 p {
     font-size: 2.2rem;
     margin-top: 20px;
     padding: 10px;
 }

 @media (max-width: 468px) {
     h1 {
         font-size: 1rem;
         /* white-space: nowrap; */

     }
 }

 @media (max-width: 768px) {
     h2 {
         font-size: 2rem;
         word-spacing: 1px;
         font-weight: 900;
     }
 }

 @media (max-width: 468px) {
     h2 {
         font-size: 1.2rem;
         word-spacing: 1px;
         font-weight: 900;
     }
 }

 @media (max-width: 768px) {
     p {
         font-size: 1.8rem;
         margin-top: 15px;
         padding: 8px;
     }
 }

 @media (max-width: 468px) {
     p {
         font-size: 1.6rem;
         padding: 2px;
         text-align: justify;
         hyphens: auto;
     }
 }

 .title-large {
     font-size: 50px;
 }

 .title-pride {
     font-size: 55px;
     margin-bottom: 50px;
 }

 @media (max-width: 768px) {
     .title-large {
         font-size: 2rem;
     }

     .title-pride {
         font-size: 2.2rem;
     }
 }

 @media (max-width: 468px) {

     .title-large,
     .title-pride {
         font-size: 1.5rem;
         white-space: nowrap;
     }
 }

 @media (max-width: 768px) {
     .selecting-heading {
         font-size: 22px;
         margin-top: 50px;
     }
 }

 @media (max-width: 468px) {
     .selecting-heading {
         font-size: 18px;
         margin-top: -150px;
     }
 }

 /* Hide close button by default */
 .close-btn {
     display: none;
 }

 /* Show close button only in mobile view */
 @media (max-width: 768px) {
     .close-btn {
         display: block;
         position: absolute;
         top: 90px;
         /* Adjust as needed */
         right: 20px;
         /* Adjust as needed */
         z-index: 999;
         /* Ensure it's on top of other elements */
         font-size: 2rem;
         /* Increase font size */
         padding: 10px;
         /* Add padding for a larger clickable area */
         cursor: pointer;
         /* Show pointer cursor */
         color: white;
         /* Adjust color if needed */
     }
 }

 @media (max-width: 468px) {
     .close-btn {
         display: block;
         position: absolute;
         top: 45px;
         /* Adjust as needed */
         right: 20px;
         /* Adjust as needed */
         z-index: 999;
         font-size: 1.8rem;
         /* Further increase font size for smaller screens */
         padding: 10px;
         /* Increase padding for larger area */
     }
 }


 .help-section {
     text-align: center;
 }

 .help-section h1.help {
     font-weight: 1000;
     margin-bottom: 20px;
 }

 .search-bar {
     margin-bottom: 20px;
     width: 60%;
     /* Adjust the width to be smaller */

     padding: 5px;
     /* Optional: reduce padding if needed */
 }

 .search-input {
     width: 50%;
     padding: 10px;
     font-size: 16px;
     margin-left: auto;
     margin-right: auto;
     display: block;
     max-width: 600px;
 }

 .help-description {
     font-size: 18px;
     margin-top: 20px;
     margin-left: 350px;
     margin-right: 350px;
 }

 .search-tags {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 15px;
     margin-top: 20px;
 }

 .search-tags button {
     padding: 10px 20px;
     font-size: 14px;
     border: 2px solid #ddd;
     background-color: transparent;
     cursor: pointer;
 }

 /* Mobile View */
 @media (max-width: 768px) {
     .help-section {
         padding: 20px;
     }

     .search-input {
         width: 80%;
         margin-left: auto;
         margin-right: auto;
     }

     .help-description {
         font-size: 14px;
         margin-top: 20px;
         margin-left: 10px;
         margin-right: 10px;
     }

     .search-tags {
         flex-direction: column;
         align-items: center;
         gap: 10px;
     }

     .search-tags button {
         width: 100%;
         padding: 12px;
         font-size: 16px;
     }

     .help-section h1.help {
         font-size: 24px;
         margin: 0 0 15px 0;
     }
 }


 .saccoverve-container {
     position: relative;
     display: inline-block;
     text-align: center;
 }

 .saccoverve-container h3 {
     margin: 0;
     color: #111;
 }

 .saccoverve-icon {
     position: absolute;
     top: 14%;
     left: 55%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: auto;
 }

 .neoverve-container {
     position: relative;
     display: inline-block;
     text-align: center;
 }

 .neoverve-container h3 {
     margin: 0;
     color: #111;
 }

 .neoverve-icon {
     position: absolute;
     top: 14%;
     left: 52%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: auto;
 }

 .instantVerve-container {
     position: relative;
     display: inline-block;
     text-align: center;
 }

 .instantVerve-container h3 {
     margin: 0;
     color: #111;
 }

 .instantVerve-icon {
     position: absolute;
     top: 14%;
     left: 56%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: auto;
 }

 .zipverve-container {
     position: relative;
     display: inline-block;
     text-align: center;
 }

 .zipverve-container h3 {
     margin: 0;
     color: #111;
 }

 .zipverve-icon {
     position: absolute;
     top: 14%;
     left: 50.6%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: auto;
 }

 .communityverve-container {
     position: relative;
     display: inline-block;
     text-align: center;
 }

 .communityverve-container h3 {
     margin: 0;
     color: #111;
 }

 .communityverve-icon {
     position: absolute;
     top: 14%;
     left: 62.5%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: auto;
 }

 .omniverve-container {
     position: relative;
     display: inline-block;
     text-align: center;
 }

 .omniverve-container h3 {
     margin: 0;
     color: #111;
 }

 .omniverve-icon {
     position: absolute;
     top: 14%;
     left: 53.7%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: auto;
 }

 .top-heading {
     font-size: 14px;
     margin: 70px;
     position: absolute;
     right: 0;
     top: -60px;
     z-index: 1;
     padding: 14px 20px;
     font-weight: 300;
     border-radius: 25px;
     cursor: pointer;
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     border: 1px solid transparent;
     display: inline-block;
     transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;

 }

 .top-heading:hover {
     background: #03f703;
     color: rgb(0, 0, 0);
     transform: scale(1.05);
 }

 @media (max-width: 768px) {
     .top-heading {
         font-size: 12px;
         margin: 40px;
         top: -30px;
         right: 10px;
     }
 }

 .gradient-line {
     border: none;
     height: 2px;
     background: linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     position: relative;
     top: 60px;
     width: 90%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }

 @media (max-width: 768px) {
     .gradient-line {
         top: 50px;
         width: 100%;
         align-items: center;
     }
 }

 .login-button {
     background:
         linear-gradient(#fffefe 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #020202;
     padding: 14px 50px;
     border: 1px solid transparent;
     border-radius: 20px;
     position: relative;
     cursor: pointer;
     z-index: 1;
     margin: 0;
     transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
 }

 .login-button:hover {
     background: #03f703;
     color: rgb(0, 0, 0);
 }


 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 50px 50px;
     background-color: #020202;
     margin: 60px 10px;
     flex-wrap: nowrap;
 }

 header img {
     height: 50px;
     width: auto;
 }

 .logo {
     font-size: 1.5rem;
 }

 .tagline {
     font-size: 12px;
     font-weight: 500;
     white-space: nowrap;
     margin-right: 90px;
     word-spacing: -1px;
     letter-spacing: -0.5px;
     color: white;
     text-shadow: none;
 }

 .screenshot-container {
     position: relative;
     width: 200px;
     height: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 55px auto;
     z-index: 1;
 }

 .screenshot {
     position: absolute;
     width: 150%;
     height: 140%;
     border-radius: 10px;
     margin-bottom: 90px;
     cursor: pointer;
     transition: transform 0.5s ease, z-index 0.5s ease, transform-origin 0.5s;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     overflow: hidden;
 }

 .screenshot img {
     width: 100%;
     height: 100%;
     object-fit: fill;
 }

 .screenshot:nth-child(1) {
     background: linear-gradient(135deg, #f5b8c7 0%, #dce37e 50%, #98d08b 100%);
 }

 .screenshot:nth-child(2) {
     background: linear-gradient(135deg, #bd88ff 0%, #e8eb3c 50%, #cbffcb 100%);
 }

 .screenshot:nth-child(3) {
     background: linear-gradient(135deg, #b6e37a 0%, #d1c66e 50%, #6ea8a3 100%);
 }

 .screenshot:nth-child(4) {
     background: linear-gradient(135deg, #ffb5c6 0%, #e2ca91 50%, #b1e2a3 100%);
 }

 .screenshot:nth-child(5) {
     background: linear-gradient(135deg, #d1e97a 0%, #92e397 50%, #b49e6f 100%);
 }

 .focused {
     transform: translateY(0%) scale(1.3);
     z-index: 20;
     visibility: visible;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
 }

 .left {
     transform: translateX(-60%) scale(0.9);
     z-index: 0;
     opacity: 0.7;
 }

 .right {
     transform: translateX(60%) scale(0.9);
     z-index: 0;
     opacity: 0.7;
 }

 @media (max-width: 768px) {
     .screenshot-container {
         width: 100px;
         /* Reduce the width */
         height: 100px;
         /* Adjust height for better fit */
         margin: -10px auto 10px auto;
         /* Adjust margin to move it up */
     }

     .screenshot {
         width: 110%;
         /* Slightly reduce width */
         height: 110%;
         /* Slightly reduce height */
     }

     /* Active box effect for mobile */
     .focused {
         transform: translateY(0%) scale(1.2);
     }

     /* Left and Right box transformation for mobile */
     .left {
         transform: translateX(-50%) scale(0.85);
     }

     .right {
         transform: translateX(50%) scale(0.85);
     }
 }

 /* Max width: 468px (Mobile devices) */
 @media (max-width: 468px) {
     .screenshot-container {
         width: 150px;
         /* Further reduce width for small devices */
         height: 150px;
         /* Adjust height */
         margin: -10px auto 10px auto;
         /* Adjust margin to move it up */
     }

     .screenshot {
         width: 200%;
         /* Box should take up full container width */
         height: 120%;
         /* Box should take up full container height */
     }

     /* Active box effect for small screens */
     .focused {
         transform: translateY(0%) scale(1.1);
     }

     /* Left and Right box transformation for small screens */
     .left {
         transform: translateX(-40%) scale(0.8);
     }

     .right {
         transform: translateX(40%) scale(0.8);
     }
 }


 /* Nav bar styling */
 nav {
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
 }

 /* List styling for horizontal layout */
 nav ul {
     list-style: none;
     display: flex;
     gap: 15px;
     margin: 0;
     padding: 0;
 }

 /* Styling for the navigation links */
 nav ul li a {
     color: white;
     text-decoration: none;
     padding: 14px 10px;
     display: block;
     border-radius: 25px;
     transition: color 0.3s, transform 0.3s;
 }

 nav ul li a:hover {
     color: #e56836;
     transform: scale(1.05);
 }

 .hamburger {
     display: none;
     font-size: 30px;
     cursor: pointer;
     position: absolute;
     right: 20px;
     top: 20px;
     z-index: 10;
 }




 .dropdown-content {
     display: none;
     position: absolute;
     /* top: 28%; */
     left: 5%;
     width: 80%;
     box-sizing: border-box;
     background: linear-gradient(to right, #00c6ff, #f3cf04);
     color: #080808;
     padding: 5px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     z-index: 1;
     overflow-x: hidden;
     justify-content: center;
     transform: translateX(7%);
 }


 /* Hover to show dropdown */
 .dropdown:hover .dropdown-content {
     display: flex;
 }

 .hero-right.shift-down {
     transform: translateY(192px);
     transition: transform 0.3s ease;
 }

 .search-bar.shift-down {
     transform: translateY(192px);
     transition: transform 0.3s ease;
 }

 .container.shift-down {
     transform: translateY(200px);
     transition: transform 0.3s ease;
 }

 /* Products and Capabilities sections */
 .dropdown-section {
     flex: 1;
 }

 /* Products section styling */
 .products-section ul {
     list-style: none;
     padding: 50px auto;
     margin: 0;
     transform: translateX(80px);
 }

 /* Capabilities section styling */
 .capabilities-section {
     border: 1px solid #e0e0e0;
     border-radius: 12px;
     padding: 20px 40px;
     background-color: #f9f9f9;
     flex: 1;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     max-width: 200px;
     margin: 0 auto;
     justify-items: center;
     transform: translateX(-10px);
 }

 /* Header styles for both sections */
 .dropdown-section h4 {
     font-size: 16px;
     color: #0e0d0d;
     margin-bottom: 15px;
     font-weight: 600;
 }

 /* Specific styles for the PRODUCTS heading */
 .products-section h4 {
     margin-left: 165px;
 }

 /* Optional: Specific styles for the Customer Demo Portal heading */
 .capabilities-section h4 {
     margin-left: 0;
 }

 /* List item styling */
 .dropdown-section ul li {
     margin-bottom: 12px;
     display: flex;
     align-items: center;
 }

 .dropdown-section ul li a {
     color: #010101;
     font-size: 14px;
     text-decoration: none;
     transition: color 0.3s;
     white-space: nowrap;
 }

 /* Icon spacing */
 .dropdown-section ul li a i {
     font-size: 20px;
     margin-right: 15px;
     color: #070707;
 }

 /* Hoer effect */
 .dropdown-section ul li a:hover {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-brain {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-database {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-shield-alt {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-sync-alt {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-bell {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-cogs {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-user {
     color: #161616;
 }

 .dropdown-section ul li a:hover .fa-eye {
     color: #161616;
 }

 @media (max-width: 768px) {

     /* Hide dropdown-content by default in mobile view */
     .dropdown:hover .dropdown-content {
         display: none !important;
     }


 }

 @media (max-width: 468px) {

     /* Hide dropdown-content by default in mobile view */
     .dropdown:hover .dropdown-content {
         display: none !important;
     }
 }


 .submenu {
     display: none;
     /* Hide submenus by default */
 }

 .submenu.visible {
     display: block;
     /* Show submenu when 'visible' class is added */
 }


 /* Hide overlay by default */
 .overlay.hidden {
     display: none;
 }

 /* Show overlay when nav is active */
 .overlay {
     display: block;
 }


 @media (max-width: 768px) {

     /* Hamburger icon styles */
     .hamburger {
         display: block;
         font-size: 30px;
         cursor: pointer;
         position: absolute;
         right: 20px;
         top: 20px;
         z-index: 10;
         transition: transform 0.3s ease;
     }

     nav {
         position: fixed;
         top: 0;
         left: -170%;
         white-space: nowrap;
         height: 100vh;
         width: 50%;
         background-color: #020202;
         padding: 100px;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         transition: left 0.3s ease;
         z-index: 10;
     }

     /* When the nav is active, slide it in from the left */
     nav.active {
         left: 0;
         background: linear-gradient(to right, #00c6ff, #91e763) border-box;
     }

     /* Navigation links styling */
     nav ul {
         flex-direction: column;
         gap: 5px;
         width: 100%;
         padding: 0;
         margin: 0;
         list-style: none;
         align-items: stretch;
     }

     nav ul li {
         margin-bottom: 20px;
         border-bottom: 2px solid white;
         padding-bottom: 10px;
         width: 130%;
         cursor: pointer;
     }

     /* Submenu styles - Hidden by default */
     .submenu {
         display: none;
         /* Hide the submenu in mobile by default */
         list-style: none;
         padding-left: 20px;
         color: #ccc;
         font-size: 0.9rem;
         margin-top: 10px;
     }

     /* Show submenu on hover or click (in mobile view) */
     nav.active nav ul li:hover .submenu,
     nav ul li:focus-within .submenu {
         display: flex;
         background: transparent;
         /* Make submenu visible */
     }

     /* Navigation links */
     nav ul li a {
         display: block;
         padding: 15px 20px;
         color: white;
         font-size: 1rem;
         text-decoration: none;
         /* background-color: #000000; */
         background: transparent;
         border-radius: 8px;
         transition: background-color 0.2s ease;
     }

     /* Hover effect for navigation links */
     nav ul li a:hover {
         /* background: #d1cdcd; */
     }

     .active {
         transform: translateY(0%) scale(1.1);
         background: transparent;

     }

     nav ul li:last-child {
         border-bottom: none;
     }

     .hamburger.active {
         transform: rotate(90deg);
     }

     .hamburger.active::before {
         content: "✖";
         font-size: 30px;
         color: white;
     }

     .hamburger::before {
         content: "☰";
         font-size: 30px;
         color: white;
     }

     /* Overlay styles */
     .overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         z-index: 5;
         display: none;
     }

     nav.active~.overlay.box-container {
         display: block;
     }
 }

 /* For smaller screens (< 468px) */
 @media (max-width: 468px) {
     .hamburger {
         font-size: 26px;
         right: 15px;
         top: 80px;
     }

     nav {
         left: 220%;
         padding-left: 30px;
         overflow: hidden;

     }

     nav ul li a:hover {
         color: #000000;
         transform: scale(1.05);
     }

     nav ul li a:hover.submenu {
         left: 100%;
         padding-left: 30px;
         overflow: hidden;
     }

     nav:hover.submenu {
         display: flex;
         left: 50%;
         padding-left: 30px;
         overflow: hidden;
     }

     nav ul {
         flex-direction: column;
         width: 100%;
         margin: 0;
         list-style: none;
         align-items: flex-start;
         justify-content: flex-start;

     }

     nav ul li a {
         font-size: 0.9rem;
         text-align: left;
     }

     nav li.active.submenu {
         display: flex;
         flex-direction: row;
     }

     .submenu {
         display: none;
         /* Hide by default */
     }

     .submenu.visible {
         display: block;
         /* Show when 'visible' class is added */
         background: transparent;
         /* Optional background color */
     }

     .logo-container {
         margin-top: 20px;
         padding-right: 210px;
     }

     .schedule-call a {
         background: linear-gradient(#111 0 0) padding-box,
             linear-gradient(to right, #00c6ff, #f3cf04) border-box;
         color: #fff;
         padding: 10px 20px;
         border: 1px solid transparent;
         border-radius: 12px;
         position: relative;
         z-index: 1;
         margin: 15px;
     }
 }


 nav ul li .submenu {
     display: none;
     /* Hide the submenu by default in desktop view */
 }

 .submenu {
     display: none;
     list-style-type: none;
     padding: 0;
     margin: 0;
 }

 /* Show the submenu on mobile screens when the 'visible' class is added */
 @media (max-width: 768px) {
     .submenu.visible {
         display: block;
         background-color: #fffdfd;
     }

     /* Style for submenu items in mobile */
     .submenu li {
         margin: 5px 0;
         padding: 10px 20px;
         border-bottom: 1px solid #ddd;
         width: 100%;
     }

     .submenu li a {
         color: #f6f3f3;
         text-decoration: none;
         font-size: 12px;
         background: transparent;
     }
 }



 /* Hide the toggle icon by default */
 .toggle-icon {
     display: none;
 }

 /* Mobile-specific styles */
 @media (max-width: 768px) {

     /* Show the toggle icon in mobile view */
     .toggle-icon {
         display: inline-block;
         font-size: 1.5rem;
         /* Increase size */
         cursor: pointer;
         font-weight: bold;
         color: #333;
         position: absolute;
         /* Position it to the right */
         right: 20px;
         /* Adjust for spacing from the right */
     }

     /* Style the menu item to have relative positioning */
     .menu-item {
         position: relative;
         padding-right: 40px;
         /* Add padding to make space for the icon */
     }

     /* Hide submenu by default in mobile view */
     .submenu {
         display: none;
     }

     /* Show submenu when the 'visible' class is added */
     .submenu.visible {
         display: block;
         background: transparent;
     }
 }



 /* Base styles for both desktop and mobile */
 .instant-credit-title {
     font-size: 50px;
     margin-left: 10px;
     font-weight: bold;
     color: #fff;
     /* Dark color for better contrast */
     line-height: 1.3;
 }

 .instant-credit-description {
     font-size: 17px;
     color: #fff;
     line-height: 1.8;
     max-width: 800px;
     /* Limit the paragraph width for readability */
     margin: 20px 0;
 }

 /* Desktop view (default) */
 @media (min-width: 769px) {
     .instant-credit-title {
         font-size: 50px;
         /* Larger font size for desktop */
         margin-left: 10px;
         text-align: left;
     }

     .instant-credit-description {
         font-size: 18px;
         /* Slightly larger text for readability */
         line-height: 1.8;
         margin-top: 20px;
         text-align: left;
     }
 }

 /* Mobile view */
 @media (max-width: 768px) {
     .instant-credit-title {
         font-size: 28px;
         /* Reduce font size for mobile */
         text-align: center;
         /* Center the text on mobile */
         margin-left: 0;
         line-height: 1.4;
         font-weight: 900;
     }

     .instant-credit-description {
         font-size: 14px;
         /* Smaller font size for mobile */
         text-align: center;
         /* Center the paragraph text */
         padding: 0 15px;
         /* Add some padding for small screens */
     }
 }

 /* Smaller mobile screens (max-width: 468px) */
 @media (max-width: 468px) {
     .instant-credit-title {
         font-size: 24px;
         /* Further reduce font size for small mobile screens */
         text-align: center;
         /* Keep text centered */
     }

     .instant-credit-description {
         font-size: 12px;
         /* Smaller text for very small screens */
         line-height: 1.5;
     }
 }









 .saccovever {
     background: linear-gradient(135deg, #f5b8c7 0%, #dce37e 50%, #98d08b 100%);
 }

 .neoverve {
     background: linear-gradient(135deg, #bd88ff 0%, #e8eb3c 50%, #cbffcb 100%);
 }

 .agency {
     background: linear-gradient(135deg, #b6e37a 0%, #d1c66e 50%, #6ea8a3 100%);
 }

 .mkoba {
     background: linear-gradient(135deg, #ffb5c6 0%, #e2ca91 50%, #b1e2a3 100%);
 }

 .loan-management {
     background: linear-gradient(135deg, #d1e97a 0%, #92e397 50%, #b49e6f 100%);
 }


 .category-selection {
     margin-top: 50px;
     border-radius: 10px;
     text-align: center;
 }

 .category-selection button {
     background:
         linear-gradient(#000 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .category-selection button:hover {
     transform: scale(1.05);
     color: #54ec08;
 }

 .category-selection button:focus {
     outline: none;
 }


 .stats-section {
     text-align: center;
     background-color: #000;
     color: #fff;
     padding: 40px 0;
 }

 .stats-section h2 {
     font-size: 36px;
     margin-bottom: 30px;
 }

 .stats-container {
     display: flex;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
 }

 .stat-item {
     text-align: center;
     flex: 1;
 }

 .count {
     font-size: 32px;
     font-weight: bold;
 }

 .label {
     font-size: 18px;
 }

 .logo-box {
     width: 140px;
     height: 140px;
     display: flex;
     justify-content: center;
     align-items: center;
 }



 @media (max-width: 768px) {
     .count {
         font-size: 1.5rem;
     }

     .label {
         font-size: 1.2rem;
     }
 }

 .logo-box {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .logo-box img {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover;
     display: block;
 }

 .impact-section {
     text-align: center;
     margin: 10px 0;
 }

 .logos {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 0px;
     margin: 0 auto;
     padding: 20px 0;
 }

 /* .animate {
     opacity: 0;
     clip-path: inset(0 100% 0 0);
     transition: opacity 1.5s ease-out, clip-path 1.5s ease-out;
 }

 .animate.visible {
     opacity: 1;
     clip-path: inset(0 0 0 0);
 } */

 footer {
     background-color: #fff;
     padding: 50px;
     color: #111;
     width: 100vw;
     /* Ensures the footer spans the full viewport width */
     box-sizing: border-box;
     /* Includes padding within the width */
 }

 .footer-content {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 20px;
 }

 .footer-right {
     display: flex;
     gap: 20px;
     text-align: end;
 }

 .footer-section h3 {
     margin-bottom: 15px;
 }

 .footer-section ul {
     list-style: none;
     padding: 0;

 }

 .footer-section ul li {
     margin-bottom: 10px;
 }

 .footer-section ul li a {
     color: #111;
     text-decoration: none;
     cursor: pointer;
     /* Shows pointer cursor on hover */
     background: none;
     /* Ensures no background color */
 }

 /* Remove any hover styles, including background color */
 .footer-section ul li a:hover {
     color: #111;
     /* Keeps color the same on hover */
     text-decoration: none;
     /* Ensures no underline or style change */
     background: none;
     /* Removes any background color on hover */
 }


 .connect {
     display: flex;
     align-items: center;
     flex-direction: row;
 }

 .connect a {
     margin: 5px;
 }

 .footer-right {
     display: flex;
     gap: 20px;
     text-align: end;


 }

 .logo-caption {
     padding-top: 10px;
     font-size: 16px;
     color: #fff9f9;
     text-align: center;
 }


 .card-container {
     margin: 100px 0 0 50px;
     /* Adjusted margin to shift container to the right */
     align-items: end;
     display: grid;
     grid-template-columns: repeat(2, 2fr);
     /* Two columns */
     gap: 10px;
     /* Spacing between items */
     justify-content: start;
     /* Align grid items to the start (left) */
     justify-items: end;
     /* Align grid items to the right inside the grid cells */
     width: 100%;
     max-width: 1100px;
     /* Maximum width */
     margin-left: auto;
     /* Align container to the right */
     margin-right: 0;
     /* Remove any right margin */
 }

 .card {
     display: flex;
     align-items: flex-start;
     background: transparent;
     color: #080808;
     padding: 20px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     width: 100%;
     box-sizing: border-box;
 }

 .card img {
     width: 120px;
     height: 100px;
     border-radius: 50%;
     margin-right: 20px;
 }

 .card-content {
     display: flex;
     flex-direction: column;
     max-width: 1000px;

 }

 .card h3 {
     font-size: 20px;
     color: #00cc66;
     margin: 10px;
 }

 .card h4 {
     font-size: 16px;
     color: #007bff;
     margin: 10px;
 }

 .card p {
     font-size: 12px;
     line-height: 1.4;
     color: #ddd;
     margin: 0;
     width: 50%;
     overflow-wrap: break-word;
 }

 @media (max-width: 768px) {
     .card-container {
         padding: 10px 0px;
         margin-left: -50px;
         justify-content: start;
         display: -webkit-box;
         /* Add padding to the container */
     }

     .card {
         width: 80%;
         max-width: 300px;
         flex-direction: row;
         align-items: center;
     }

     .card img {
         width: 100px;
         height: 80px;
         /* Slightly smaller image */
         margin-bottom: 10px;
     }

     .card h3 {
         font-size: 18px;
     }

     .card h4 {
         font-size: 15px;
     }

     .card p {
         font-size: 13px;
         width: 100%;
         height: auto;
         -webkit-line-clamp: 10;
         -webkit-box-orient: vertical;
         /* Full width for text */
     }
 }

 /* Further adjustments for screens 468px and below */
 @media (max-width: 468px) {
     .card-container {
         margin: 50px auto 0;
         display: flex;
         flex-direction: column;
         /* Ensures cards stack vertically */
         align-items: center;
     }

     .card {
         width: 80%;
         max-width: 300px;
         margin-bottom: 20px;
         /* Adds space between stacked cards */
         display: flex;
         flex-direction: column;
         /* Ensures content inside each card is stacked */
         align-items: center;
     }

     .card-content {
         width: 80%;
         max-width: 300px;
         flex-direction: column;
         align-items: center;
     }

     .card img {
         width: 80px;
         height: 80px;
     }

     .card h3 {
         font-size: 16px;
     }

     .card h4 {
         font-size: 14px;
     }

     .card p {
         font-size: 12px;
         line-height: 1.3;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
     }
 }

 .build-capabilities {
     font-size: 50px;
     margin-top: 50px;
     text-align: center;
 }

 @media (max-width: 768px) {
     .build-capabilities {
         font-size: 32px;
         /* Adjusted font size for smaller screens */
         margin-top: 30px;
         /* Adjusted margin for smaller screens */
     }
 }

 @media (max-width: 468px) {
     .build-capabilities {
         font-size: 24px;
         /* Further reduced font size for very small screens */
         margin-top: 20px;
     }
 }

 .build-description {
     font-size: 20px;
     margin-top: 50px;
     text-align: center;
 }

 @media (max-width: 768px) {
     .build-description {
         font-size: 32px;
         margin-top: 30px;
     }

     .build-description {
         font-size: 16px;
         /* Adjusted font size for smaller screens */
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         margin-top: 20px;
         /* Ensure some space between the title and the paragraph */
         text-align: center;
         /* Center the paragraph on small screens */
     }
 }

 @media (max-width: 468px) {
     .build-capabilities {
         font-size: 24px;
         margin-top: 20px;
     }

     .build-description {
         font-size: 15.8px;
         display: -webkit-box;
         -webkit-line-clamp: 20;
         -webkit-box-orient: vertical;
         overflow: hidden;
         line-height: 1.2;
         margin-bottom: 1em;
         padding: 0 10px;
         /* Adds padding to keep text inside */
         max-width: 100%;
         /* Ensures the text container does not exceed the screen width */
         word-break: break-word;
         /* Prevents overflow from long words */
     }

 }

 /* General styles for desktop view */
 .vision-title {
     font-size: 50px;
     margin-top: 50px;
     text-align: center;
 }


 /* Mobile responsiveness for screens less than 768px */
 @media (max-width: 768px) {
     .vision-title {
         font-size: 32px;
         margin-top: 30px;
     }
 }

 /* For smaller screens less than 468px */
 @media (max-width: 468px) {
     .vision-title {
         font-size: 24px;
         margin-top: 20px;
     }
 }

 /* General styles for the vision description */
 .vision-description {
     font-size: 17.8px;
     line-height: 1.6;
     /* Adjusted line height for better spacing between lines */
     color: #ddd;
     text-align: center;
     margin-top: 20px;
     word-wrap: break-word;
     /* Ensure long words break and do not overflow */
     width: 100%;
     font-weight: 900;
     max-width: 100%;
     /* Ensure it fits in the container */
 }

 /* Mobile responsiveness for screens less than 768px */
 @media (max-width: 768px) {
     .vision-description {
         font-size: 16px;
         line-height: 1.5;
         text-align: center;
         margin-top: 20px;
     }
 }

 /* For smaller mobile screens less than 468px */
 @media (max-width: 468px) {
     .vision-description {
         font-size: 14px;
         margin-top: 15px;
         line-height: 1.4;
     }
 }




 .contact-form {
     background: linear-gradient(to right, #00c6ff, #f3cf04);
     padding: 30px 90px;
     border-radius: 20px;
     max-width: 650px;
     margin-left: 250px;
     width: 100%;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
 }

 /* Form row layout */
 .form-row {
     display: flex;
     justify-content: space-around;
     gap: 60px;
     width: 100%;
     margin-bottom: 20px;

 }

 .form-group {
     display: flex;
     flex-direction: column;
     flex: 1;

 }

 /* Input field styling */
 label {
     font-size: 15px;
     color: #111;
     margin-bottom: 5px;
     text-align: start;
 }

 input[type="text"],
 input[type="email"] {
     padding: 25px 25px;
     border: none;
     border-radius: 12px;
     background-color: rgba(255, 255, 255, 0.8);
     font-size: 16px;
     outline: none;
     color: #111;
 }

 /* Submit button styling */
 button[type="submit"] {
     margin-top: 20px;
     padding: 10px 30px;
     font-size: 16px;
     font-weight: bold;
     color: #111;
     background-color: #111;
     border: none;
     border-radius: 20px;
     cursor: pointer;
     transition: background-color 0.3s;
 }

 button[type="submit"]:hover {
     background-color: #333;
 }


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

 .contact-form input {
     width: 220px;
     padding: 10px;
     margin: 5px;
 }

 .contact-form button {
     background-color: #050505;
     color: #fff;
     padding: 10px 20px;
     border: none;
     cursor: pointer;
 }

 .our-presence {
     text-align: center;
     padding: 20px;
 }

 .world-map {
     width: 50%;
     margin: 0 auto;
 }

 .social-media {
     margin-top: 20px;
 }

 .social-media a {
     color: #fff;
     margin: 10px;
     font-size: 24px;
 }

 @media (max-width: 768px) {
     .contact-form {
         /* padding: 10px; */
         margin: 10px;
         max-width: 85%;
     }

     .form-row {
         flex-direction: column;
         gap: 20px;
     }

     .form-group {
         width: 100%;
     }

     input[type="text"],
     input[type="email"] {
         padding: 15px;
         font-size: 14px;
         width: 100%;
     }

     button[type="submit"] {
         padding: 10px 20px;
         font-size: 14px;
     }
 }


 .timeline-wrapper {
     position: relative;
     margin: 150px 100px;
     height: 150px;
     /* Adjusted height for more space */
     align-items: start;
 }

 .i_timeliner {
     position: absolute;
     width: 100%;
     height: 5px;
     top: 50%;
     transform: translateY(-50%);
 }

 .i_timeliner ul {
     width: inherit;
     margin: 0;
     padding: 0;
     list-style: none;
     height: auto;
     font-size: 0;
     position: relative;
 }

 .i_timeliner ul::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 2px;
     background-color: #b2df6a;
     z-index: 1;
 }

 .i_timeliner ul li {
     position: relative;
     display: inline-block;
     width: calc(100% / 6 - 2%);
     /* Flexible width for 6 items, adjust as needed */
     margin-right: 2%;
     text-align: center;
     font-size: 0.8rem;
 }

 .i_timeliner ul li::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 12px;
     height: 12px;
     background-color: #fff;
     border-radius: 50%;
     z-index: 2;
 }

 .i_timeliner ul li.above .i_timeliner_box {
     position: absolute;
     bottom: 20px;
     /* Increased spacing for readability */
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
 }

 .i_timeliner ul li.below .i_timeliner_box {
     position: absolute;
     top: 30px;
     /* Increased spacing for readability */
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
     display: flex;
     /* Using flexbox to align content */
     flex-direction: column;
     /* Aligning items vertically */
     align-items: center;
     /* Centers the items horizontally */
     justify-content: center;
     /* Centers the items vertically */
 }

 .i_timeliner ul li .year {
     font-size: 1rem;
     color: #0905f8;
     font-weight: bold;
     margin-bottom: 5px;
     /* Adds some spacing between the year and description */
 }

 .i_timeliner ul li .description {
     font-size: 15px;
     line-height: 1.4;
     color: #ddd;
     margin: 0;
     width: 150%;
     overflow-wrap: break-word;
     transform: translateX(-20%);
 }

 .i_timeliner ul li .description-below {
     font-size: 15px;
     line-height: 1.4;
     color: #ddd;
     margin: 0;
     width: 150%;
     overflow-wrap: break-word;
     transform: translateX(-1%);
 }


 @media (max-width: 768px) {
    .timeline-wrapper {
        margin: 0 150px;
        height: 900px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .i_timeliner {
        width: 2px;
        height: 80%;
        top: 0;
        left: 20px;
        transform: none;
        background-color: #b2df6a;
    }

    .i_timeliner ul {
        padding: 30px; /* Adjust padding for smaller screens */
        align-items: center; /* Center-align items for better mobile display */
    }

    .i_timeliner ul::after {
        display: none;
       
    }

    .i_timeliner ul li {
        width: 90%;
        /* margin: 20px 0; */
        /* padding-left: 30px; */
        text-align:  center;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .i_timeliner ul li::before {
        /* top: 30px; */
        left: -30px;
    }

    .i_timeliner ul li.above .i_timeliner_box {
        position: relative; /* Make sure it is positioned correctly */
        top: 50px; /* Adjust top as needed */
        left: 0; /* Align to the left side */
        right: -150px;
        transform: none; /* Remove any transformation */
        text-align: left; /* Align the text inside the box to the left */
        width: auto; /* Set width as per content */
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    /* When the timeline item has the "below" class */
    .i_timeliner ul li.below .i_timeliner_box {
        position: relative; /* Keep absolute positioning */
        top: 5px; /* Adjust the vertical position below the previous item */
        left: -110px; /* Align to the left side */
        text-align: left; /* Align the text inside the box to the left */
        width: auto; /* Set width as per content */
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .i_timeliner ul li .year {
        font-size: 1rem;
        color: #0905f8;
        font-weight: bold;
        margin-bottom: 5px;
        
    }

    .i_timeliner ul li .description,
    .i_timeliner ul li .description-below {
        font-size: 12px;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* Extra Small Screens */
@media (max-width: 468px) {
    .timeline-wrapper {
        margin: 0 150px;
        /* height: 1200px; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .i_timeliner ul li {
        padding-bottom: 15px;
        
    }


    .i_timeliner ul li .description-below {
        font-size: 12px;
         line-height: 1.3;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         height: 100%; 
         left: -30px;

    }

    .i_timeliner ul li .description {
        font-size: 12px;
        line-height: 1.2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 100%; 
        width: -10%;
        margin-top: -50px;
    }
}









 .obession-heading {
     font-size: 50px;
     text-align: center;
     line-height: 1.2;
 }

 /* Adjust for tablet screens (768px) */
 @media (max-width: 768px) {
     .obession-heading {
         font-size: 36px;
     }
 }

 /* Adjust for mobile screens (468px and smaller) */
 @media (max-width: 468px) {
     .obession-heading {
         font-size: 24px;
         padding: 0 10px;
         /* Add some padding for better readability on smaller screens */
     }
 }


 .responsive-text {
     font-size: 15.8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 1.2;
     margin-bottom: 1em;
     padding: 0 10px;
     /* Adds padding to keep text inside */
     max-width: 100%;
     /* Ensures the text container does not exceed the screen width */
     word-break: break-word;
     /* Prevents overflow from long words */
 }

 /* Adjustments for screen widths 768px and below */
 @media (max-width: 768px) {
     .responsive-text {
         font-size: 16px;
         -webkit-line-clamp: 20;
         /* More text lines allowed on smaller screens */
         /* padding: 10px 10px; */
         margin: 10px
             /* Slightly reduce padding for better fit */
     }
 }

 /* Adjustments for screen widths 468px and below */
 @media (max-width: 468px) {
     .responsive-text {
         font-size: 14px;
         line-height: 1.4;
         -webkit-line-clamp: 20;
         /* Show more lines on the smallest screens */
         /* padding: 10px 20px; */
         margin: 10px;
         /* Minimize padding to fit smaller screens */
     }
 }

 .world-map {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     width: 100vw;
     overflow: hidden;
     position: relative;
     background-color: black;
 }

 .world-map img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     margin: auto;
 }



 .popup-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     justify-content: center;
     align-items: center;
     z-index: 9999;
 }

 /* Popup form content */
 .popup-content {
     background: linear-gradient(to right, #00c6ff, #f3cf04);
     ;
     padding: 20px;
     border-radius: 18px;
     width: 90%;
     max-width: 400px;
     text-align: center;
     position: relative;
 }

 /* Close button */
 .cl-btn {
     position: absolute;
     top: 2px;
     right: 10px;
     font-size: 30px;
     cursor: pointer;

     color: #fff;
     /* White text color for the '×' symbol */
     border-radius: 5%;
     /* Optional: to make the background a circle */
     padding: 10px 10px;
     /* Optional: adds some space around the button */
 }

 .popup-content h2 {
     margin-top: 0;
     color: #f7f8f9;
     font-size: 30px;
 }

 /* Form inputs */
 .popup-content form input,
 .popup-content form textarea {
     width: 100%;
     padding: 5px;
     margin: 5px 0;
     border: 1px solid #ccc;
     border-radius: 4px;
 }

 /* Submit button */
 .popup-content form button {
     background-color: #070707;
     color: #fff;
     padding: 10px 20px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 .popup-content form button:hover {
     background-color: #0c0c0c;
 }


 .thanks-container {
     display: flex;
     /* Use flexbox to arrange items side by side */
     justify-content: space-between;
     /* Adjust space between content and image */
     align-items: center;
     /* Vertically center the content */
     gap: 10px;
     /* Optional: add some space between content and image */
 }

 .thanks-content {
     background: linear-gradient(to right, #00c6ff, #f3cf04);
     padding: 20px;
     border-radius: 18px;
     width: 80%;
     /* Reduced the width to 80% */
     max-width: 300px;
     /* Set a max-width to control the maximum width */
     text-align: center;
     position: relative;
     height: auto;
     /* Allow the height to adjust based on content */
     max-height: 400px;
     /* Set a max height */
     overflow-y: hidden;
     /* Add scrolling if content exceeds max height */
 }

 .qr-code-image {
     max-width: 80%;
     /* Limits the image width to 80% of its container */
     max-height: 150px;
     /* Limits the image height to 150px */
     height: auto;
     /* Maintains aspect ratio */
     width: auto;
     /* Maintains aspect ratio */
     margin-top: 20px;
     /* Adds margin from the top */
 }


 .box-container {
     position: relative;
     width: 300px;
     height: 200px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 55px auto;

 }

 .box {
     position: absolute;
     width: 120%;
     height: 120%;
     border-radius: 10px;
     cursor: pointer;
     transition: transform 0.5s ease, z-index 0.5s ease, transform-origin 0.5s;
     /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); */
 }

 .box:nth-child(1) {
     background: linear-gradient(144deg, #f5b8c7 0%, #dce37e 50%, #98d08b 100%);
 }

 .box:nth-child(2) {
     background: linear-gradient(125deg, #bd88ff 0%, #e8eb3c 50%, #cbffcb 100%);
 }

 .box:nth-child(3) {
     background: linear-gradient(115deg, #bd88ff 0%, #e8eb3c 50%, #cbffcb 100%);
 }

 .box:nth-child(4) {
     background: linear-gradient(165deg, #f5b8c7 0%, #dce37e 50%, #98d08b 100%);
 }

 .box:nth-child(5) {
     background: linear-gradient(145deg, #bd88ff 0%, #e8eb3c 50%, #cbffcb 100%);
 }

 .box:nth-child(6) {
     background: linear-gradient(165deg, #f5b8c7 0%, #dce37e 50%, #98d08b 100%);
 }

 .focused {
     transform: translateY(0%) scale(1.3);
     z-index: 20;
     visibility: visible;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
 }

 .left {
     transform: translateX(-60%) scale(0.9);
     z-index: 0;
     opacity: 0.7;
 }

 .right {
     transform: translateX(60%) scale(0.9);
     z-index: 0;
     opacity: 0.7;
 }

 .owl-carousel .owl-stage {
     display: flex;
     gap: 10px;
     cursor: pointer;
 }

 .owl-carousel .owl-stage-outer {
     overflow: hidden;
 }

 .owl-carousel .owl-stage {
     animation: scroll-left 25s linear infinite;
 }

 .owl-carousel .owl-stage.paused {
     animation-play-state: paused;
 }

 @keyframes scroll-left {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 .support {
     margin-right: -10px;
 }

 .terms {
     margin-right: -10px;
 }

 .pol {
     margin-right: 10px;
 }


 @media (max-width: 480px) {
     .box-container {
         width: 100%;
         margin: 10px auto;
     }

     .box {
         border-radius: 5px;
     }

 }

 .about {
     margin-right: -10px;
 }

 .press {
     margin-right: -10px;
 }

 .careers {
     margin-right: -10px;
 }


 @media (max-width: 768px) {
     .logo-box {
         width: 150px;
         height: 150px;
     }

     .logos {
         gap: 10px;
     }
 }

 /* Hero Section */
 .hero {
     text-align: center;
     margin: 30px 0;
 }

 .hero h1 {
     font-size: 50px;

 }

 /* .h1 {
     margin-top: -70px;
     word-spacing: normal;
 } */

 .search-bar input {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     padding: 15px 400px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
     font-size: 1.2rem;
     font-style: italic;
     outline: none;

 }

 .search-bar :hover {
     transform: scale(1.05);
 }

 .search-bar input::placeholder {
     color: white;
     font-size: 1.2rem;
     opacity: 1.2;
 }

 .search-tags button {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     padding: 12.7px 60px;
     border: 1px solid transparent;
     border-radius: 35px;
     position: relative;
     z-index: 1;
     margin: 15px;
     font-size: medium;
     overflow: hidden;
     transition: opacity 1.5s ease-out, transform 0.3s ease;
 }


 .search-tags button.visible {
     opacity: 1;
     clip-path: inset(0 0 0 0);
 }

 .search-tags button:hover {
     color: #e56836;
     transform: scale(1.05);
 }

 /* Products Section */
 .products {
     text-align: center;
 }

 /* Gradient Colors for each card */
 .saccovever {
     background: linear-gradient(115deg, #f293d2 5%, #c2c42d 40%, #65ff9b 100%);
 }

 .neoverve {
     background: linear-gradient(15deg, #c89bff 0%, #e8eb3c 100%);
 }

 .agency {
     background: linear-gradient(135deg, #007a33 0%, #d4ffb8 100%);
 }

 .mkoba {
     background: linear-gradient(115deg, #f293d2 5%, #c2c42d 40%, #65ff9b 100%);
 }

 .loan-management {
     background: linear-gradient(135deg, #007a33 0%, #d4ffb8 100%);
 }

 /* Statistics Section */
 .statistics {
     text-align: center;
     margin: 50px 0;
 }

 /* STATS */
 .stats-section {
     text-align: center;
     padding: 50px 0;
 }

 .stats-section h2 {
     margin-bottom: 20px;
 }

 .stats {
     display: flex;
     justify-content: space-around;
     padding: 50px;
     font-size: 2rem;
 }


 /* .animate {
     opacity: 0;
     clip-path: inset(0 100% 0 0);
     transition: opacity 1.5s ease-out, clip-path 1.5s ease-out;
 }

 .animate.visible {
     opacity: 1;
     clip-path: inset(0 0 0 0);
 } */

 .logo-container {
     margin-bottom: 10px;
 }

 .tagline {
     font-size: 12px;
     font-weight: 500;
     white-space: nowrap;
     margin-right: 90px;
     word-spacing: -1px;
     letter-spacing: -0.5px;
     color: white;
     text-shadow: none;
 }

 .ourproducts {
     text-align: center;
     font-size: 50px;
     margin-top: 150px;
 }

 .stats-section {
     text-align: center;
     background-color: #000;
     color: #fff;
     padding: 40px 0;
 }

 .stats-section h2 {
     font-size: 36px;
     margin-bottom: 30px;
 }

 .stats-container {
     display: flex;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
 }

 .stat-item {
     text-align: center;
     flex: 1;
 }

 .count {
     font-size: 32px;
     font-weight: bold;
 }

 .label {
     font-size: 18px;
 }

 .techverve {
     font-size: 50px;
     text-align: center;

 }


 .support {
     margin-right: -10px;
 }

 .terms {
     margin-right: -10px;
 }

 .pol {
     margin-right: 10px;
 }

 .about {
     margin-right: -10px;
 }

 .press {
     margin-right: -10px;
 }

 .careers {
     margin-right: -10px;
 }

 .succo {
     height: 150px;
     width: 200px;
     margin-left: -20px;
 }

 .indus {
     height: 150px;
     width: 200px;
     margin-left: -20px;
 }

 .vai {
     height: 150px;
     width: 200px;
     margin-left: -20px;
 }

 .acs {
     height: 150px;
     width: 200px;
     margin-left: -50px;
     margin-top: -20px;
     gap: 0px
 }

 .cdv {
     height: 150px;
     width: 150px;
     margin-left: 20px;
 }

 @media(max-width: 768px) {

     /* Body adjustments for mobile */
     /* body {
         font-size: 16px;
         margin: 0;
         padding: 0;
         overflow-x: hidden;
     } */

     /* Header */
     header {
         flex-direction: column;
         align-items: center;
         padding: 20px;
         text-align: center;
     }

     header .logo {
         font-size: 1.5rem;
         margin-bottom: 15px;
     }

     /* nav ul {
         flex-direction: column;
         align-items: center;
         gap: 15px;
     }

     nav ul li a {
         font-size: 18px;
         padding: 10px;
     }

     .schedule-call a {
         font-size: 16px;
         padding: 10px 20px;
         margin-top: 10px;
     } */

     /* Hero Section */
     /* .hero h1 {
         font-size: 32px;
         margin: 20px 0;
         line-height: 1.2;
     } */

     .search-bar input {
         width: 100%;
         padding: 20px;
         /* margin: 10px auto; */
     }

     .search-tags button {
         padding: 12px 50px;
         font-size: 14px;
         width: 90%;
         margin: 10px auto;
     }

     /* Products Section */
     /* .cards {
         flex-direction: column;
         gap: 20px;
         align-items: center;
     }

     .card {
         width: 90%;
         height: auto;
         padding: 20px;
         font-size: 16px;
     } */

     /* Statistics Section */
     .stats-section {
         padding: 30px 15px;
     }

     .stats {
         flex-direction: column;
         gap: 30px;
     }

     .stat-item {
         flex: 1;
         text-align: center;
     }

     .count {
         font-size: 28px;
     }

     .label {
         font-size: 16px;
     }


     /* Box Containers for Mobile */
     @media (max-width: 768px) {
         .box-container {
             width: 100px;
             /* Reduce the width */
             height: 100px;
             /* Adjust height for better fit */
             margin: -10px auto 10px auto;
             /* Adjust margin to move it up */
         }

         .box {
             width: 110%;
             /* Slightly reduce width */
             height: 110%;
             /* Slightly reduce height */
         }

         /* Active box effect for mobile */
         .focused {
             transform: translateY(0%) scale(1.2);
         }

         /* Left and Right box transformation for mobile */
         .left {
             transform: translateX(-50%) scale(0.85);
         }

         .right {
             transform: translateX(50%) scale(0.85);
         }
     }

     /* Max width: 468px (Mobile devices) */
     @media (max-width: 468px) {
         .box-container {
             width: 100px;
             /* Further reduce width for small devices */
             height: 150px;
             /* Adjust height */
             margin: -10px auto 10px auto;
             /* Adjust margin to move it up */
         }

         .box {
             width: 100%;
             /* Box should take up full container width */
             height: 100%;
             /* Box should take up full container height */
         }

         /* Active box effect for small screens */
         .focused {
             transform: translateY(0%) scale(1.1);
         }

         /* Left and Right box transformation for small screens */
         .left {
             transform: translateX(-40%) scale(0.8);
         }

         .right {
             transform: translateX(40%) scale(0.8);
         }
     }

     /* Adjust carousel for mobile */
     /* .owl-carousel .owl-stage {
         display: block;
         gap: 10px;
     } */

     /* General product section adjustments */
     .ourproducts {
         font-size: 36px;
         margin-top: 100px;
     }

     .succo,
     .indus,
     .vai,
     .acs {
         height: 120px;
         width: 150px;
         margin: 10px;
     }
 }

 @media (max-width: 768px) {
     .logo-box {
         width: 150px;
         height: 150px;
     }

     .logos {
         gap: 10px;
     }
 }

 header .logo {
     font-size: 1.5rem;
 }

 header h2 {
     font-family: 'Helvetica', sans-serif;
 }

 .schedule-call a {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     padding: 14px 20px;
     border: 1px solid transparent;
     border-radius: 25px;
     position: relative;
     z-index: 1;
     margin: 0px;
 }

 .schedule-call a:hover {

     background: #03f703;
     color: rgb(0, 0, 0);
 }

 /* li a:not(.schedule-call a) {
     background: none;
     padding: 18px 15px;
     border-radius: 5px;
 } */

 /* li a:not(.schedule-call a):hover {
     background: #020202;
 } */

 .cta-button {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     padding: 12px 60px;
     border: 1px solid transparent;
     border-radius: 25px;
     position: relative;
     z-index: 1;
     margin: 0px;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 /* Hover effect */
 .cta-button:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #000 !important;
 }

 .Traditional {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .Traditional:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #000 !important;
 }

 .Lender {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .Lender:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #000 !important;
 }

 .mobile {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .mobile:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #000 !important;
 }

 .neo {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .neo:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .sacco {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .sacco:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .govt {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .govt:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .digi {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .digi:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .micro {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .micro:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .others {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .others:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .service {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .service:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .scall {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .scall:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 .wallet {
     background:
         linear-gradient(#020202 0 0) padding-box,
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     color: #fff;
     font-size: medium;
     padding: 12.7px 42px;
     border: 1px solid transparent;
     border-radius: 30px;
     position: relative;
     z-index: 1;
     margin: 15px;
 }

 .wallet:hover {
     background:
         linear-gradient(#03f703 0 0) padding-box,
         /* Green background */
         linear-gradient(to right, #00c6ff, #f3cf04) border-box;
     /* Gradient border */
     color: #000 !important;
     /* White text with higher priority */
 }

 /* Hero Section */
 .hero {
     margin-top: 50px;
     padding: 50px 0;
     text-align: left;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
 }

 .hero h1 {
     font-size: 3em;
     max-width: 600px;
 }

 .hero p {
     font-size: 20px;
     max-width: 600px;
     margin-top: -40px;
     font-weight: 200;
 }


 /* .hero-content {
     text-align: center;
     padding: 20px;
     margin: 0 auto;
 } */

 /* Responsive styles for tablets */
 @media (max-width: 768px) {
     .hero-content h1 {
         font-size: 1.8em;
         margin-left: 0;
     }

     .hero-content .search-bar .search-input {
         width: 80%;
         margin-left: 0;
         font-size: 16px;
     }

     .hero-content p {
         font-size: 16px;
         text-align: center;
         margin: 10px 0;
     }

     /* .hero-content .search-tags {
         margin: 0 auto;
     }

     .hero-content .search-tags button {
         font-size: 14px;
         padding: 8px 12px;
     } */
 }

 /* Responsive styles for mobile */
 @media (max-width: 468px) {
     .hero-content h1 {
         font-size: 1.5em;
         margin-left: 0;
     }

     .hero-content .search-bar .search-input {
         width: 90%;
     }

     .hero-content p {
         font-size: 14px;
         text-align: center;
         margin: 10px 0;
     }

     /* .hero-content .search-tags button {
         font-size: 12px;
         padding: 6px 8px;
     } */
 }




 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .hero {
         flex-direction: column;
         align-items: flex-start;
     }

     .hero-right {
         width: 100%;
         margin-left: 0;
         margin-top: 20px;
     }
 }


 /* Gradient backgrounds for each box */
 .box1 {
     background: linear-gradient(115deg, #f293d2 5%, #c2c42d 40%, #65ff9b 100%);
 }

 .box2 {
     background: linear-gradient(15deg, #c89bff 0%, #e8eb3c 100%);
 }

 .box3 {
     background: linear-gradient(135deg, #007a33 0%, #d4ffb8 100%);
 }

 .stat h2 {
     font-size: 2.5em;
     font-weight: bold;
 }

 .stat p {
     font-size: 1.2em;
     font-weight: normal;
 }

 .stats {
     margin-top: 50px;
 }

 .stats div {
     display: inline-block;
     margin: 20px;
     font-size: 2rem;
 }


 /* Responsive Styles */
 @media (max-width: 768px) {
     h1 {
         font-size: 1.9rem;
     }

     /* .cards {
         flex-direction: column;
         align-items: center;
     }

     .card {
         width: 80%;
         max-width: 300px;
         flex-direction: row;
         align-items: center;
     } */

     .stats div {
         font-size: 1.5rem;
     }

     .footer-content {
         flex-direction: column;
         align-items: center;
     }

     .footer-right {
         gap: 30px;
     }
 }

 /* Media Queries */
 @media screen and (max-width: 768px) {

     .features,
     .stats,
     .logos {
         flex-direction: column;
     }

     .feature-box,
     .stat,
     .logos img {
         width: 100%;
         margin-bottom: 20px;
     }

     .hero-right {
         display: flex;
     }
 }


 .tagline {
     font-size: 12px;
     font-weight: 500;
     white-space: nowrap;
     margin-right: 90px;
     word-spacing: -1px;
     letter-spacing: -0.5px;
     color: white;
     text-shadow: none;
 }

 .hero-left {
     font-weight: bold;
     position: relative;
     top: -200px;
     /* Moves the element up by 200px */
     left: -50px;
     /* Adjust horizontal alignment if needed */
     padding: 60px;
 }

 @media (max-width: 768px) {
     .hero-left {
         top: -100px;
         /* Adjusts upward shift for smaller screens */
         left: 25px;
         padding: 40px;
     }
 }

 /* Mobile Responsive (max-width: 468px) */
 @media (max-width: 468px) {
     .hero-left {
         top: -20px;
         /* Further reduces upward shift on smaller screens */
         left: 0;
         /* Centers horizontally */
         padding: 20px;
         text-align: center;
         /* Centers text content for better readability */
     }
 }


 .box img {
     max-width: 100px;
     height: auto;
     margin-bottom: 10px;
     margin-top: 20px;
 }

 .box p {
     font-size: 22px;
     color: #111;
     margin-top: 0;
     text-align: center;
 }

 /* STATS */
 .stats-section {
     text-align: center;
     background-color: #000;
     color: #fff;
     padding: 40px 0;
 }

 .stats-section h2 {
     font-size: 36px;
     margin-bottom: 30px;
 }

 .stats-container {
     display: flex;
     justify-content: space-between;
     max-width: 1200px;
     margin: 0 auto;
 }

 .stat-item {
     text-align: center;
     flex: 1;
 }

 .count {
     font-size: 32px;
     font-weight: bold;
 }

 .label {
     font-size: 18px;
 }

 .techverve {
     font-size: 50px;
     text-align: center;

 }

 .support {
     margin-right: -10px;
 }

 .terms {
     margin-right: -10px;
 }

 .pol {
     margin-right: 10px;
 }

 .about {
     margin-right: -10px;
 }

 .press {
     margin-right: -10px;
 }

 .careers {
     margin-right: -10px;
 }


 @media (max-width: 768px) {
     .count {
         font-size: 1.5rem;
     }

     .label {
         font-size: 1.2rem;
     }
 }

 @media (max-width: 768px) {
     header {
         flex-direction: column;
         align-items: center;
         text-align: center;
         margin: 0;
         padding: 0;
     }

     header img {
         margin-bottom: 10px;
     }

     .tagline {
         margin-bottom: 20px;
         font-size: 12px;
         white-space: nowrap;
         text-align: center;
         margin: 0;
         padding: 0;
     }


     /* nav {
         width: 90%;
         height: 0%;
         margin: 0;
         padding: 0;
         background: #000;
     }

     nav ul {
         flex-direction: column;
         width: 50%;
         align-items: center;
         white-space: nowrap;
         margin: 0;
         padding: 0;
     }

     nav ul li {
         width: 90%;
         margin: 0;
         padding: 0;
     }

     nav ul li a {
         text-align: center;
         background-color: #000;
         width: auto;
         margin: 0;
         padding: 0;
     }
     
     nav.active {
        height: 100%; 
    }

     .schedule-call a {
         background:
             linear-gradient(#111 0 0) padding-box,
             linear-gradient(to right, #00c6ff, #f3cf04) border-box;
         color: #fff;
         padding: 10px 20px;
         border: 1px solid transparent;
         border-radius: 12px;
         position: relative;
         z-index: 1;
         margin: 15px;
     } */



     .cards {
         flex-direction: column;
         align-items: center;
     }

     .logo-box {
         flex: 0 0 12.5%;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .logo-box img {
         max-width: 100%;
         max-height: 100%;
         object-fit: cover;
         display: block;
     }

     .stats-section {
         text-align: center;
         background-color: #000;
         color: #fff;
         padding: 20px 0;
     }

     .stats-section h2 {
         font-size: 28px;
         margin-bottom: 20px;
     }

     .stats-container {
         flex-direction: column;
         align-items: center;
     }

     .stat-item {
         text-align: center;
         margin-bottom: 15px;
     }

     .count {
         font-size: 24px;
         font-weight: bold;
     }

     .label {
         font-size: 16px;
     }


     .footer-content {
         flex-direction: column;
         align-items: center;
     }

     .footer-section {
         flex-basis: 100%;
         text-align: center;
     }

     .connect {
         margin-bottom: 20px;
     }

     .footer-right {
         flex-direction: column;
         gap: 10px;
     }


     .box {
         border-radius: 8px;
     }
 }

 @media (max-width: 480px) {

     header img {
         height: 30px;
     }

     /* .card {
         width: 80%;
         max-width: 100px;
     } */

     .category-selection button {
         width: 90%;
         margin: 10px 0;
         gap: 10px;
     }

     .logo-box {
         width: 60px;
         height: 60px;
         font-size: 0.9rem;
     }

     .logos {
         gap: 10px;
     }

 }



 @media (max-width: 768px) {
     .logo-box {
         width: 150px;
         height: 150px;
     }

     .logos {
         gap: 10px;
     }
 }

 /* END NEWSCREEN-4 */

 /* newscreen-5 */


 @media (max-width: 768px) {
     header {
         flex-direction: column;
         align-items: center;
         text-align: center;
         margin: 0;
         padding: 0;
     }

     header img {
         margin-bottom: 10px;
     }

     .tagline {
         margin-bottom: 20px;
         font-size: 12px;
         white-space: nowrap;
         text-align: center;
         margin: 0;
         padding: 0;
     }

     /* nav {
         width: 90%;
         margin: 0;
         padding: 0;
     }

     nav ul {
         flex-direction: column;
         width: 90%;
         align-items: center;
         margin: 0;
         padding: 0;
     }

     nav ul li {
         width: 90%;
         margin: 0;
         padding: 0;
     }

     nav ul li a {
         text-align: center;
         background-color: #333;
         width: auto;
         margin: 0;
         padding: 0;
     } */

     /* .schedule-call a {
         background:
             linear-gradient(#111 0 0) padding-box,
             linear-gradient(to right, #00c6ff, #f3cf04) border-box;
         color: #fff;
         padding: 10px 20px;
         border: 1px solid transparent;
         border-radius: 12px;
         position: relative;
         z-index: 1;
         margin: 15px;
     } */

     /* h1 {
         font-size: 5rem;
     } */

     .cards {
         flex-direction: column;
         align-items: center;
     }

     .logo-box {
         width: 80px;
         height: 80px;
         font-size: 1rem;
     }

     .logos {
         gap: 15px;
     }

     .stats-section {
         text-align: center;
         background-color: #000;
         color: #fff;
         padding: 20px 0;
     }

     .stats-section h2 {
         font-size: 28px;
         margin-bottom: 20px;
     }

     .stats-container {
         flex-direction: column;
         align-items: center;
     }

     .stat-item {
         text-align: center;
         margin-bottom: 15px;
     }

     .count {
         font-size: 24px;
         font-weight: bold;
     }

     .label {
         font-size: 16px;
     }



     /* .box-container {
         width: 90%;
         margin: 40px auto;
     } */

     .box {
         border-radius: 8px;
     }
 }



 @media (max-width: 480px) {

     header img {
         height: 30px;
     }

     /* .card {
         width: 80%;
         max-width: 100px;
     } */

     .category-selection button {
         width: 90%;
         margin: 10px 0;
         gap: 10px;
     }

     .logo-box {
         width: 60px;
         height: 60px;
         font-size: 0.9rem;
     }

     .logos {
         gap: 10px;
     }

 }


 .support {
     margin-right: -10px;
 }

 .terms {
     margin-right: -10px;
 }

 .pol {
     margin-right: 10px;
 }


 /* @media (max-width: 480px) {
     .box-container {
         width: 95%;
         margin: 30px auto;
     }

     .box {
         border-radius: 5px;
     }
 } */

 .about {
     margin-right: -10px;
 }

 .press {
     margin-right: -10px;
 }

 .careers {
     margin-right: -10px;
 }


 /* Hero Section */
 /* .hero {
     margin-top: 50px;
     padding: 50px 0;
     text-align: left;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
 } */

 .hero h1 {
     font-size: 3em;
     max-width: 600px;
 }

 .hero p {
     font-size: 20px;
     max-width: 600px;
     margin-top: -40px;
     font-weight: 200;
 }

 .hero-right {
     background-color: transparent;
     width: 300px;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: bold;
     margin-top: -60px;
     margin-left: -10px;
     /* border: 1px solid white; */
     /* padding: 40px; */
     padding-right: 100px;
     /* overflow: hidden; */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }


 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .hero {
         flex-direction: column;
         align-items: flex-start;
     }

     .hero-right {
         width: 100%;
         margin-left: 0;
         margin-top: 20px;
         padding: 0;
         margin: 0;
     }
 }


 /* Gradient backgrounds for each box */
 .box1 {
     background: linear-gradient(115deg, #f293d2 5%, #c2c42d 40%, #65ff9b 100%);
 }

 .box2 {
     background: linear-gradient(15deg, #c89bff 0%, #e8eb3c 100%);
 }

 .box3 {
     background: linear-gradient(135deg, #007a33 0%, #d4ffb8 100%);
 }

 /* Media Queries */
 @media screen and (max-width: 768px) {

     .features,
     .stats,
     .logos {
         flex-direction: column;
     }

     .feature-box,
     .stat,
     .logos img {
         width: 100%;
         margin-bottom: 20px;
     }

     /* .hero-right {
         display: none;
     } */
 }

 @media (max-width: 768px) {
     body {
         font-size: 16px;
         padding: 0;
         margin: 0;
         overflow-x: hidden;
     }

     header {
         flex-direction: column;
         text-align: center;
         padding: 30px 100px;
         justify-content: space-around;
     }

     /* nav ul {
         flex-direction: column;
         gap: 10px;
     } */

     .hero {
         flex-direction: column;
         text-align: start;
         margin-top: 10px;
         padding: 0;
         margin: 0;
     }

     .hero h1 {
         font-size: 2.5rem;
     }

     .hero p {
         font-size: 18px;
         margin-top: 15px;
     }

     .cta-button {
         padding: 12px 50px;
         font-size: 16px;
     }

     .stats {
         margin-top: 30px;
     }

     .stats div {
         margin: 15px;
         font-size: 1.5rem;
     }

     .box-container {
         width: 90%;
         margin: 120px auto;
         padding-top: 50px;
     }

     /* .footer-content {
         flex-direction: column;
         text-align: center;
     } */

     .logo-box {
         width: 120px;
         height: 120px;
     }

     .logos {
         gap: 15px;
     }

     .logos img {
         width: 160px;
         height: auto;
     }
 }

 @media (max-width: 768px) {
     .logo-box {
         width: 150px;
         height: 150px;
     }

     .logos {
         gap: 10px;
     }
 }

 @media (max-width: 480px) {
     .techverve {
         font-size: 1.8rem;
         margin-bottom: 20px;
     }

     .stats-container {
         flex-direction: column;
         gap: 15px;
         padding: 0 10px;
     }

     .stat-item {
         flex-basis: 100%;
         padding: 10px;
     }

     .stat-item .count {
         font-size: 2rem;
     }

     .stat-item .label {
         font-size: 1rem;
     }
 }

 /* END NEWSCREEN-6 */