:root {
       --primary-font: 'Roboto', sans-serif;
       --secondary-font: 'Poppins', sans-serif;
       --secondary-color: #838694;
       --theme-color-1: #6c63ff;
       --thene-color-2: #14B8A6;
   }
   
   body {
       font-family: var(--primary-font);
       background-color: #FFFF !important;
       color: #1B1F2E;
   }
   /* Light theme or default */
   
   [data-bs-theme="light"] .btn-close,
   :root .btn-close {
       filter: var(--bs-btn-close-black-filter);
   }
   
   .secondary-font {
       font-family: var(--secondary-font) !important;
   }
   
   .secondary-color {
       color: var(--secondary-color) !important;
   }
   
   .fs-16 {
       font-size: 16px;
   }
   
   .fs-18 {
       font-size: 18px;
   }
   
   .fs-20 {
       font-size: 20px;
   }
   
   .fs-22 {
       font-size: 22px;
   }
   
   .fs-24 {
       font-size: 24px;
   }
   
   .fs-42 {
       font-size: 42px;
   }
   /* Navbar Styling */
   
   .navbar {
       background-color: #fff;
       padding: 1rem 0rem;
       height: 100px;
   }
   
   .navbar-nav .nav-link {
       font-weight: 600;
       margin: 0 10px;
       color: #000;
       font-size: 18px;
       text-transform: capitalize;
       line-height: 1.2;
   }
   
   .navbar-nav .nav-link.active {
       color: var(--theme-color-1) !important;
       /* purple highlight */
   }
   
   .btn-theme {
       background: #00ffae;
       color: #000;
       font-weight: 600;
       padding: 18px 30px;
       border-radius: 0px;
       font-size: 16px;
       line-height: 1.188;
   }
   
   .btn-theme:hover {
       background: var(--theme-color-1) !important;
       color: #fff !important;
   }
   
   .primary-color {
       color: var(--theme-color-1) !important;
   }
   
   .bg-form-btn {
       background: var(--theme-color-1) !important;
   }
   
   .bg-form-btn:hover {
       background: #00ffae !important;
       color: #0F1425 !important;
   }
   
   .theme-color-3 {
       color: #00ffae;
   }
   /* Hero Section */
   
   .hero {
       position: relative;
       background: #1b1f2b;
       color: #fff;
       padding: 50px 0;
       overflow: hidden;
   }
   
   .hero h1 {
       font-weight: 700;
       font-size: 65px;
       line-height: 1.1em;
   }
   
   .hero p {
       margin: 20px 0;
       font-size: 1.1rem;
   }
   
   .btn-about {
       background: #00ffae;
       color: #000;
       font-weight: 600;
       padding: 0.6rem 1.2rem;
       border-radius: 5px;
   }
   /* Decorative Background Lines */
   
   .hero::before {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background: url("assets/img/hero-line-shape.png") no-repeat left center;
       background-size: cover;
       opacity: 0.2;
       pointer-events: none;
       /* ✅ Fix: allows buttons/links to be clickable */
   }
   /* Right Image Shape */
   
   .hero-image {
       position: relative;
       z-index: 2;
   }
   
   .hero-image img {
       width: 80%;
       border-radius: 20px;
       object-fit: cover;
   }
   
   .hero-image::before {
       content: "";
       position: absolute;
       right: -50px;
       top: -40px;
       width: 110%;
       height: 120%;
       border-radius: 50% 0 0 50%;
       background: rgba(255, 255, 255, 0.05);
       z-index: -1;
   }
   /* Plus Icons */
   
   .plus-icon {
       position: absolute;
       font-size: 24px;
       font-weight: bold;
       color: #fff;
   }
   
   .plus1 {
       top: 20%;
       right: 30%;
       color: var(--theme-color-1) !important;
   }
   
   .plus2 {
       bottom: 25%;
       right: 20%;
       color: #ffae00;
   }
   
   [data-bs-theme=light] .navbar-toggler-icon,
   :root .navbar-toggler-icon {
       --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.65)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   }
   
   .py-100 {
       padding: 100px 0px;
   }
   
   .bg-light-blue {
       background-color: #EFEDF9;
   }
   
   .c-box {
       width: 50px;
       height: 50px;
   }
   
   .bg-footer {
       background-color: #1B1F2B;
   }
   
   .bg-footer-bottom {
       background-color: #0F1425;
   }
   
   .footer-list li a {
       color: #B6BACE;
       transition: color 0.3s;
       text-decoration: none;
   }
   
   .footer-list li a:hover {
       color: var(--theme-color-1) !important;
   }
   
   .about-section h2 {
       font-size: 41px;
       line-height: 1.15;
   }
   
   p {
       font-size: 16px;
       line-height: 30px;
   }
   
   .custom-card {
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(76, 35, 215, 0.08);
       /* soft glow */
       transition: all 0.3s ease-in-out;
       padding: 40px;
   }
   
   .custom-card-w2 {
       background: #fff;
       border-radius: 12px;
       transition: all 0.3s ease-in-out;
       padding: 40px;
   }
   
   .custom-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 45px rgba(76, 35, 215, 0.15);
   }
   
   .icon-box {
       font-size: 2rem;
       color: var(--theme-color-1) !important;
       /* purple */
       display: inline-block;
       position: relative;
   }
   
   .bg-image {
       height: 300px;
       object-fit: cover;
   }
   
   .overlay-card {
       background-color: #fff;
       padding: 2rem 2rem;
       position: relative;
       box-shadow: 0 15px 45px rgba(76, 35, 215, 0.10);
   }
   
   .card-hover-container:hover .overlay-card {
       background-color: var(--theme-color-1) !important;
       color: white !important;
       padding: 2rem 2rem;
       position: relative;
   }
   
   .card-hover-container:hover .overlay-card h5,
   .card-hover-container:hover .overlay-card p,
   .card-hover-container:hover .overlay-card a,
   .card-hover-container:hover .overlay-card .overlay-icon {
       color: #fff !important;
   }
   
   .card-hover-container:hover .overlay-card .overlay-icon i {
       color: #fff !important;
   }
   
   .card-hover-container:hover .overlay-card .service-number {
       color: rgba(255, 255, 255, 0.08);
   }
   
   .card-hover-container:hover .overlay-card .arrow {
       color: #fff !important;
   }
   
   .overlay-icon {
       font-size: 2rem;
       color: white;
       margin-bottom: 1rem;
   }
   
   .service-number {
       font-size: 8rem;
       font-weight: bold;
       color: #f5f5f5;
       position: absolute;
       top: 10px;
       right: 20px;
       z-index: 0;
   }
   
   .overlay-content {
       position: relative;
       z-index: 1;
   }
   
   .overlay-card a {
       color: white;
       text-decoration: underline;
       font-weight: 500;
   }
   
   .overlay-card a:hover {
       color: #e0e0e0;
   }
   /* Optional: Responsive tweak for smaller devices */
   
   @media (max-width: 576px) {
       .overlay-card {
           width: 90% !important;
       }
       .hero h1 {
           font-size: 34px;
           line-height: 1.2em;
       }
       .btn-theme {
           background: #00ffae;
           color: #000;
           font-weight: 600;
           padding: 10px 10px;
           border-radius: 0px;
           font-size: 16px;
           line-height: 1.188;
       }
       .navbar {
           height: 80px;
       }
       .about-section h2 {
           font-size: 26px;
           line-height: 1.15;
       }
       .fs-xs-26 {
           font-size: 26px !important;
       }
       .py-100 {
           padding: 50px 0px !important;
       }
   }
   
   .w-80 {
       width: 80%;
   }
   
   .bg-services {
       background-color: #1B1F2B;
   }
   
   .fs-display-5 {
       font-size: 2.5rem;
       font-weight: 300;
       line-height: 1.2;
   }
   /* Position arrows outside the content box */
   
   .custom-control {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background-color: var(--theme-color-1) !important;
       ;
       border: none;
       width: 45px;
       height: 45px;
       border-radius: 50%;
       z-index: 10;
       opacity: 1 !important;
   }
   
   .carousel-control-prev.custom-control {
       left: -25px;
   }
   
   .carousel-control-next.custom-control {
       right: -25px;
   }
   
   .custom-arrow {
       font-size: 20px;
       color: #fff;
       line-height: 50px;
   }
   
   .mt-150 {
       margin-top: -150px;
   }
   
   .pt-200 {
       padding-top: 200px;
   }
   
   .z-in {
       z-index: 5;
   }