.navbar {
      padding: 15px 0;
      background: #fff;
  }

  .navbar-nav {
      margin: 0 auto;
  }

  .nav-center {
      position: absolute;
      left: 35%;
      transform: translateX(-50%);
  }

  .nav-item {
      margin: 0 10px;
      position: relative;
  }

  .nav-item a {
      color: #0d1117 !important;
      font-size: 16px;
      font-weight: 500 !important;
  }

  .left-side {
      gap: 10px;
  }

  .left-side a {
      list-style: none;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
  }

  @media (max-width: 991.98px) {
      .nav-center {
          position: static;
          transform: none;
          margin-left: auto;
      }

      .navbar-nav {
          margin: 0;
      }

      .left-side {
          display: none !important;
          /* Completely hide on mobile */
      }
  }


  /* bannre  */

  .banner-home {
      /* background: url('https://www.shutterstock.com/image-photo/happy-young-african-male-technician-260nw-1678999795.jpg') no-repeat center center; */
      background-size: cover;
      min-height: 600px;
      display: flex;
      align-items: center;
      color: #fff;
      position: relative;
  }

  .banner-home .overlay {
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }

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

  .banner-home h1 {
      font-size: 2.3rem;
      font-weight: bold;
  }

  @media(max-width: 469px) {
      .banner-home h1 {
          font-size: 1.5rem;
          font-weight: bold;
          margin-top: 30px;
      }
  }

  .banner-home p {
      font-size: 1.1rem;
  }

  .banner-home .stats {
      margin-top: 30px;
  }

  .banner-home .stat-item {
      text-align: center;
  }

  .banner-home .stat-item h3 {
      font-size: 1.5rem;
      color: #007bff;
      margin-bottom: 0;
  }

  .banner-home .stat-item p {
      margin-bottom: 0;
      color: #000;
  }


  /* service   */



  .booking-form-homes {
      background: #e3f2fd;
  }

  .booking-form-home .booking-section {
      text-align: center;
      padding: 60px 20px;
      animation: fadeIn 1s ease-in-out;
  }

  .booking-form-home .tag {
      display: inline-block;
      background: #ffe5d4;
      color: #ff7a00;
      padding: 6px 20px;
      border-radius: 20px;
      font-weight: 500;
      margin-bottom: 20px;
      animation: slideInDown 1s ease forwards;
  }

  .booking-form-home .booking-section h1 {
      font-size: 2.5rem;
      font-weight: 700;
      /* animation: fadeInUp 1s ease forwards; */
  }

  .booking-form-home .booking-section h1 span {
      background: linear-gradient(90deg, #007bff, #6f42c1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: background 0.3s ease;
  }

  .booking-form-home .booking-section p {
      color: #555;
      max-width: 600px;
      margin: 20px auto 0;
      font-size: 1.1rem;
      /* animation: fadeInUp 1.2s ease forwards; */
  }

  .booking-form-home .booking-form {
      position: relative;
      margin-bottom: 40px;
      border-radius: 12px;
      padding: 30px;
      /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
      overflow: hidden;
      /* background: rgba(255, 255, 255, 0.7); */
      /* optional for a semi-transparent overlay */
  }

  /* 
  .booking-form-home .booking-form::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../assets/img/img-back.png');
      background-size: cover;
      background-position: center;
      filter: blur(8px);
      z-index: 0;
  } */

  .booking-form-home .booking-form * {
      position: relative;
      z-index: 1;
  }


  .booking-form-home .step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
  }

  .step-1 {
      background-color: #007bff;
  }

  .step-2 {
      background-color: #6f42c1;
  }

  .step-3 {
      background-color: #fd7e14;
  }

  /* Service Item Hover Animation */
  .booking-form-home .service-item {
      border: 1px solid #ddd;
      border-radius: 8px;
      text-align: center;
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
      cursor: pointer;
      background: #fff;
  }

  .booking-form-home .service-item:hover {
      border-color: #007bff;
      background: #f1faff;
      transform: scale(1.05);
      box-shadow: 0 6px 8px rgba(0, 123, 155, 0.3);
  }

  /* Service Icon Hover Animation */
  .booking-form-home .service-item i {
      font-size: 2rem;
      color: #17a2b8;
      margin-bottom: 10px;
      transition: transform 0.3s ease, color 0.3s ease;
  }

  .booking-form-home .service-item:hover i {
      transform: rotate(10deg) scale(1.2);
      color: #007bff;
  }

  /* Date and Time Items Hover Animation */
  .booking-form-home .date-item,
  .booking-form-home .time-item {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 12px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
      background: #fff;
  }

  .booking-form-home .date-item:hover,
  .booking-form-home .time-item:hover {
      border-color: #6f42c1;
      background: #f9f0ff;
      transform: translateY(-4px);
      box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
  }

  /* Book Now Button Hover Animation */
  .booking-form-home .btn-book {
      background-color: #007bff;
      color: #fff;
      border-radius: 8px;
      font-weight: 600;
      transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  }

  .booking-form-home .btn-book:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
      background-color: #0056b3;
  }

  .booking-form-home .ready-box {
      background: linear-gradient(90deg, #0f8be3b6, #f1f1f1);
      padding: 20px;
      border-radius: 8px;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

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

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

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

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

  @media (max-width: 768px) {
      .booking-form-home .booking-section h1 {
          font-size: 2rem;
      }

      .booking-form-home .booking-section p {
          font-size: 1rem;
      }
  }

  @media (max-width: 767px) {

      .booking-form-home .service-item,
      .booking-form-home .date-item,
      .booking-form-home .time-item {
          margin-bottom: 15px;
      }
  }







  .feature-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #fff;
      margin-bottom: 15px;
  }

  .feature-text h5 {
      font-weight: 600;
      margin-bottom: 8px;
  }

  .feature-text p {
      font-size: 0.95rem;
      color: #555;
  }


  /* Feature icons hover effect */
  .feature-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .feature-icon:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  /* Feature text hover effect */
  .feature-text h5 {
      transition: color 0.3s ease;
  }

  .feature-text:hover h5 {
      color: #007bff;
  }

  /* Emergency buttons hover effect */
  .btn-emergency-call,
  .btn-whatsapp {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .btn-emergency-call:hover,
  .btn-whatsapp:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }


  .emergency-section {
      background: linear-gradient(90deg, #ff4b2b, #ff6a00);
      color: #fff;
      /* border-radius: 12px; */
      padding: 30px;
      text-align: center;
      margin-top: 10px;
  }

  .emergency-section h4 {
      font-weight: bold;
      margin-bottom: 10px;
  }

  .emergency-section p {
      margin-bottom: 20px;
  }

  .btn-emergency-call {
      background-color: #fff;
      color: #ff4b2b;
      font-weight: 600;
      border: none;
      margin-right: 10px;
      margin-bottom: 10px;
  }

  .btn-emergency-call:hover {
      background-color: #f8f9fa;
      color: #ff4b2b;
  }

  .btn-whatsapp {
      border: 2px solid #fff;
      background: transparent;
      color: #fff;
      font-weight: 600;
  }

  .btn-whatsapp:hover {
      background-color: rgba(255, 255, 255, 0.1);
  }








  .services-section {
      text-align: center;
      padding: 60px 20px;
  }

  .services-section h2 {
      font-weight: 700;
      margin-bottom: 15px;
  }

  .services-section p {
      color: #555;
      max-width: 700px;
      margin: 0 auto 40px;
  }

  .service-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  .service-row {
      align-items: center;
      gap: 15px;
  }

  .service-icon {
      width: 60px;
      height: 60px;
      background-color: #e7f1ff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #007bff;
  }

  .service-title {
      font-weight: 600;
      margin-bottom: 4px;
  }

  .service-price {
      color: #ff6600;
      font-weight: 600;
  }

  .service-desc {
      font-size: 0.95rem;
      color: #555;
      margin-top: 12px;
  }

  .btn-book {
      background-color: #007bff;
      color: #fff;
      font-weight: 600;
      border-radius: 8px;
      transition: background-color 0.3s ease;
  }

  .btn-book a {
      text-decoration: none;
  }

  .btn-book:hover {
      background-color: #0056b3;
      color: #fff;
  }



  .pricing-section {
      padding: 60px 20px;
      background: #e3f2fd;
  }

  .plan-card {
      background: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease;
  }

  .plan-card:hover {
      transform: translateY(-5px);
  }

  .plan-card h5 {
      font-weight: 700;
  }

  .plan-price {
      font-size: 2rem;
      font-weight: bold;
      margin: 10px 0;
  }

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

  .plan-features {
      margin: 20px 0;
      padding-left: 0;
      list-style: none;
  }

  .plan-features li {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
  }

  .plan-features li::before {
      content: "✔️";
      margin-right: 10px;
  }

  .badge-popular {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: orange;
      color: #fff;
      font-size: 0.8rem;
      padding: 4px 12px;
      border-radius: 12px;
      font-weight: 600;
  }

  .btn-orange {
      background-color: #f37021;
      color: #fff;
  }

  .btn-orange:hover {
      background-color: #e05d10;
  }

  .btn-purple {
      background-color: #6f42c1;
      color: #fff;
  }

  .btn-purple:hover {
      background-color: #5a35a4;
  }


 /* .why-choose */


  .why-choose {
      background: linear-gradient(90deg, #2563eb, #7c3aed);
  }

  .why-choose .gradient-box {
/* background: red; */

      color: white;
      /* border-radius: 20px; */
      padding: 40px 30px;
      margin-top: 40px;
  }

  .why-choose .benefit-icon {
      font-size: 1.2rem;
      margin-right: 10px;
  }

  .why-choose .benefit-text {
      font-size: 1rem;
      margin-bottom: 15px;
      color: #fff;
  }

  .why-choose .special-box {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      padding: 30px;
      text-align: center;
  }

  .why-choose .special-box h5 {
      font-weight: bold;
      margin-bottom: 15px;
  }

  .why-choose .btn-offer {
      background-color: #f37021;
      color: white;
      font-weight: 600;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      margin-top: 10px;
  }

  .why-choose .btn-offer:hover {
      background-color: #e05d10;
  }





  .testimonial-section {
      padding: 60px 20px;
  }


  .testimonial-box {
      background: #fff;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .testimonial-box .stars {
      color: #facc15;
      /* Yellow */
      font-size: 1.1rem;
  }

  .testimonial-box p {
      font-style: italic;
      margin-top: 15px;
      font-size: 0.95rem;
      flex-grow: 1;
  }

  .testimonial-user {
      display: flex;
      align-items: center;
      margin-top: 20px;
  }

  .testimonial-user img {
      width: 50px !important;
      height: 50px !important;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
      border: 2px solid #f1f1f1;
  }

  .testimonial-user strong {
      display: block;
      font-weight: 600;
  }

  .testimonial-user small {
      font-size: 0.85rem;
      color: gray;
  }

  .testimonial-user a {
      font-size: 0.85rem;
      color: #3b82f6;
      text-decoration: none;
  }

  .owl-nav {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 35%;
      width: 100%;
      padding: 0 20px;
  }

  .owl-nav button {
      background: white !important;
      border: none;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      font-size: 20px !important;
      color: #111 !important;
  }

  .owl-dots {
      text-align: center;
      margin-top: 20px;
  }

  .stats-box {
      margin-top: 50px;
  }

  .stats-box .stat {
      text-align: center;
  }

  .stat h4 {
      font-size: 1.8rem;
      font-weight: bold;
      color: #2563eb;
  }

  .stat p {
      margin-top: 5px;
      font-size: 1rem;
      color: #000;
  }



  .footer {
      background-color: #0d1117;
      color: #fff;
      padding: 60px 0 30px;
      font-size: 15px;
  }

  .footer a {
      font-size: 16px;
      line-height: 30px;
      color: #d1d5db;
      text-decoration: none;
  }

  .footer a:hover {
      color: #fff;
  }

  .footer .logo {
      font-size: 1.5rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
  }

  .footer .logo i {
      background: #2563eb;
      color: white;
      font-size: 20px;
      border-radius: 8px;
      padding: 3px 6px;
      margin-right: 10px;
  }

  .footer .social-icons a {
      font-size: 18px;
      margin-right: 15px;
      color: white;
  }

  .footer .social-icons a:hover {
      opacity: 0.8;
  }

  .footer .whatsapp-btn {
      background: #22c55e;
      color: white;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: 6px;
      text-decoration: none;
      display: inline-block;
      margin-top: 10px;
  }

  .footer .bottom-border {
      border-top: 1px solid #1f2937;
      margin-top: 30px;
      padding-top: 20px;
  }

  .footer .payment-icons i {
      font-size: 20px;
      margin-right: 10px;
  }

  .footer .footer-links a {
      display: inline-block;
      margin-right: 15px;
      color: #9ca3af;
  }

  .footer .footer-links a:hover {
      color: white;
  }


  /* ======================== page titel ====================== */

  .page-title .banner {
      background-image: url('/assets/img/new.png');
      /* Replace with your image URL */
      background-size: cover;
      background-position: center;
      position: relative;
      color: white;
      padding: 80px 20px;
  }

  .page-title .banner::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 76, 204, 0.7);
      /* Blue overlay */
      z-index: 1;
  }

  .page-title .banner-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 800px;
      margin: 30px auto;
  }

  .page-title .banner-content h1 {
      font-size: 2.5rem;
      font-weight: bold;
  }

  .page-title .banner-content h1 span {
      color: orange;
  }

  .page-title .banner-content p {
      font-size: 1.1rem;
      margin-bottom: 20px;
  }

  .page-title .banner-form {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
  }

  .page-title .features {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;
  }

  .page-title .feature-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
  }

  .page-title .feature-item i {
      color: orange;
  }


  /* ================= how-it-works ========================= */

  .how-it-works {
      padding: 60px 20px;
      background-color: #f8f9fa;
      text-align: center;
  }

  .step-card {
      background: #fff;
      border-radius: 12px;
      padding: 30px 20px;
      position: relative;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .step-card:hover {
      transform: translateY(-5px);
  }

  .step-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 1.5rem;
      color: #fff;
  }

  .step-number {
      position: absolute;
      top: 1px;
      right: -5px;
      background-color: #000;
      color: #fff;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }


  /* ================= how-it-works ========================= */



  /* ================= choose-section ========================= */
  .choose-section {
      padding: 60px 20px;
      background-color: #f8f9fa;
      background: #e3f2fd;;
      /* text-align: center; */
  }

  .choose-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .choose-card:hover {
      transform: translateY(-5px);
  }

  .choose-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f1f1f1;
      font-size: 1.5rem;
      color: #007bff;
  }

  .stats {
      background: #e3f2fd;
      border-radius: 12px;
      padding: 20px;
      margin-top: 40px;
  }

  .stat-item h3 {
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 5px;
  }


  /* ================= choose-section ========================= */


  /* ================= about-page-section ========================= */


  .about-page-sec .our-story {
      padding: 60px 20px;
      background-color: #fff;
  }

  .about-page-sec .story-image {
      position: relative;
      height: 100%;
  }

  .about-page-sec .story-image img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 12px;
  }

  .about-page-sec .story-icon {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background-color: #ff8200;
      color: #fff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      font-size: 1.5rem;
  }

  .about-page-sec .stat-box {
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      margin-top: 20px;
  }

  .about-page-sec .stat-box h3 {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 5px;
  }


  /* ================= about-page-section ========================= */


  /* ================= mession-vission-section ========================= */

  .about-mession-sec{
    background: #e3f2fd;
    padding: 50px 0;
  }

  .about-mession-sec .about-mession-sec {
      padding: 60px 20px;
      background-color: #b1c7dd;
  }

  .about-mession-sec .mession-about h3 {
      font-weight: 700;
      margin-bottom: 15px;
      color: #0d6efd;
  }

  .about-mession-sec .mession-about p {
      color: #495057;
      font-size: 1.1rem;
  }

  .about-mession-sec .mission {
      background: blue;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .about-mession-sec .vision {
      background: green;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .about-mession-sec .mission:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }

  .about-mession-sec .mission i {
      font-size: 1.5rem;
      margin-bottom: 50px;
      padding: 10px 14px;
      border-radius: 50px;
      background-color: #0d6efd33;
      color: #f8f9fa;
      background: #313232;
  }

  .about-mession-sec .mission .vision i {
      background-color: #28a74533;
      color: #28a745;
  }

  .about-mession-sec .mission h4 {
      font-weight: 600;
      margin: 15px 0;
      color: #fff;
  }

  .about-mession-sec .mission p {
      color: #fff;
      font-size: 0.95rem;
  }

  /* ================= mession-vission-section ========================= */


  /* ================= Commitment-sec-section ========================= */

  .Commitment-sec {
      padding: 60px 20px;
      background: #e3f2fd;
  }

  .Commitment-heading h3 {
      font-weight: 700;
      margin-bottom: 15px;
      color: #0d6efd;
  }

  .Commitment-heading p {
      color: #6c757d;
      font-size: 1rem;
      max-width: 600px;
      margin: 0 auto 40px auto;
  }

  .commitment-card {
      background-color: #fff;
      border-radius: 12px;
      padding: 25px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .commitment-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .commitment-card i {
      font-size: 2.5rem;
      color: #0d6efd;
      margin-bottom: 15px;
  }

  .commitment-card h4 {
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
      font-size: 18px;
  }

  .commitment-card p {
      color: #000;
      font-size: 0.95rem;
  }



  /* ================= Commitment-sec-section ========================= */


  /* ================= team-section ========================= */

  .team-section {
      /* text-align: center; */
      padding: 60px 20px;
      background: #fff;
  }

  .team-section h2 {
      font-weight: 700;
      margin-bottom: 10px;
  }

  .team-card {
      border-radius: 16px;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      transition: transform 0.3s ease-in-out;
      background: white;
  }

  .team-card:hover {
      transform: translateY(-5px);
      box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
  }

  .team-img {
      width: 100%;
      height: 220px;
      object-fit: cover;
  }

  .team-body {
      padding: 20px;
  }

  .team-body h5 {
      font-weight: 600;
      margin-bottom: 5px;
  }

  .team-body .role {
      color: #0d6efd;
      font-weight: 500;
      text-decoration: none;
  }

  .experience {
      color: #ff5722;
      font-weight: 500;
      margin: 5px 0;
  }

  .specialization {
      font-size: 0.9rem;
      color: #6c757d;
      font-weight: 500;
      margin-top: 8px;
  }

  /* ================= team-section ========================= */


  /* ================= Journey-section ========================= */

  /* Timeline Container */
  .timeline {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
      padding: 50px 0;
  }

  /* Vertical Line */
  .timeline::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      background-color: #d0e2ff;
      transform: translateX(-50%);
  }

  /* Timeline Item */
  .timeline-item {
      position: relative;
      width: 50%;
      padding: 15px 40px;
  }

  .timeline-item.left {
      left: 0;
      text-align: right;
  }

  .timeline-item.right {
      left: 50%;
      text-align: left;
  }

  /* Card Design */
  .timeline-content {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
      padding: 25px 30px;
      display: inline-block;
      max-width: 90%;
  }

  /* Dots */
  .timeline-dot {
      position: absolute;
      top: 40px;
      width: 12px;
      height: 12px;
      background: #0d6efd;
      border-radius: 50%;
      box-shadow: 0px 0px 6px rgba(13, 110, 253, 0.4);
      z-index: 1;
  }

  .timeline-item.left .timeline-dot {
      right: -6px;
  }

  .timeline-item.right .timeline-dot {
      left: -6px;
  }

  /* Text Styling */
  .year {
      font-weight: bold;
      color: #0d6efd;
      font-size: 1.2rem;
      display: block;
  }

  .title {
      font-weight: 700;
      margin: 3px 0;
      font-size: 1rem;
  }

  .description {
      font-size: 0.95rem;
      color: #444;
      margin: 0;
  }

  /* Responsive */
  @media (max-width: 768px) {
      .timeline::before {
          left: 20px;
      }

      .timeline-item {
          width: 100%;
          text-align: left !important;
          padding-left: 60px;
          padding-right: 20px;
      }

      .timeline-item.right {
          left: 0;
      }

      .timeline-dot {
          left: 14px !important;
      }

      .timeline-content {
          max-width: 100%;
      }
  }

  /* ================= Journey-section ========================= */


  /* ================= Looking-section ========================= */

  .looking-ahead-section {
      background: linear-gradient(90deg, #2563eb, #7c3aed);
      /* border-radius: 20px; */
      padding: 50px 30px;
      color: white;
      margin: 40px auto;
      /* max-width: 1100px; */
  }

  .looking-ahead-section h3 {
      font-weight: 700;
      margin-bottom: 10px;
  }

  .looking-ahead-section p {
      font-size: 1rem;
      opacity: 0.9;
      margin-bottom: 30px;
  }

  .year-card {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      padding: 25px;
      text-align: center;
      transition: all 0.3s ease;
  }

  .year-card:hover {
      background: rgba(255, 255, 255, 0.25);
      transform: translateY(-5px);
  }

  .year-card h4 {
      font-weight: 700;
      margin-bottom: 5px;
  }

  .year-card p {
      margin: 0;
      font-size: 0.95rem;
  }


  /* ================= Looking-section ========================= */


  /* ================= benefits-section ========================= */

  .benefits-section {
      /* padding: 60px 20px; */
      text-align: center;
  }

  .benefit-card {
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease-in-out;
      background: white;
  }

  .benefit-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  }

  .benefit-img {
      height: 200px;
      object-fit: cover;
      width: 100%;
  }

  .benefit-content {
      padding: 20px;
      text-align: left;
  }

  .benefit-title {
      font-weight: 700;
      font-size: 1.25rem;
      margin-bottom: 8px;
  }

  .benefit-text {
      color: #6c757d;
      font-size: 1rem;
  }

  /* ================= benefits-section ========================= */


  /* ================= Price-table-section ========================= */

  .priceing-table{
    background: #e3f2fd;
  }

  .priceing-table .pricing-table {
      background: #fff;
      /* border-radius: 16px; */
      /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
      overflow: hidden;
  }

  .priceing-table th {
      background: #f1f3f5;
      text-align: center;
      font-weight: 600;
  }

  .priceing-table td,
  th {
      vertical-align: middle;
      padding: 1rem;
  }

  .priceing-table .plan-title {
      font-weight: 700;
      font-size: 1.1rem;
  }

  .priceing-table .most-popular {
      background: #d1f0d7;
      color: #2b8a3e;
      font-size: 0.8rem;
      padding: 2px 8px;
      border-radius: 12px;
      display: inline-block;
      margin-top: 5px;
  }

  .priceing-table .check {
      color: #28a745;
      font-size: 1.2rem;
  }

  .priceing-table .cross {
      color: #dc3545;
      font-size: 1.2rem;
  }

  .priceing-table .price {
      font-weight: bold;
      font-size: 1.2rem;
      color: #000;
  }


  /* ================= Price-table-section ========================= */


  /* ================= plan-Price-section ========================= */

  .plan-price .plan-card {
      border-radius: 16px;
      padding: 2rem;
      text-align: center;
      transition: all 0.3s ease-in-out;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  }

  .plan-price .plan-basic {
      background: #f0f8ff;
      border: 2px solid #d0e7ff;
  }

  .plan-price .plan-complete {
      background: #f1fff4;
      border: 2px solid #c6f0d0;
  }

  .plan-price .plan-premium {
      background: #faf5ff;
      border: 2px solid #e6d8ff;
  }

  .plan-price .plan-card h5 {
      font-weight: 700;
      margin-bottom: 10px;
  }

  .plan-price .plan-price {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1rem;
  }

  .plan-price .btn-select {
      border-radius: 12px;
      font-weight: 600;
      padding: 0.6rem 1.2rem;
      box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
  }

  .plan-price .most-popular {
      margin-top: 10px;
      font-size: 0.85rem;
      color: #28a745;
      font-weight: 500;
  }

  /* Hover Effect */
  .plan-price .plan-card:hover {
      transform: translateY(-5px);
      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  }

  /* ================= plan-Price-section ========================= */


  /* ================= add to cart-section ========================= */


  /* Right Floating Bar */
  .add-to-cart .side-bar {
      position: fixed;
      top: 80%;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      z-index: 999;
  }

  .add-to-cart .side-bar a {
      position: relative;
      background: #007bff;
      color: white;
      padding: 12px;
      margin: 5px 0;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 25px 0 0 25px;
      transition: all 0.3s ease;
      overflow: visible;
  }

  .add-to-cart .side-bar a i {
      font-size: 24px;
  }

  /* Badge for count */
  .add-to-cart .side-bar a .badge {
      position: absolute;
      top: 0px;
      right: 8px;
      background: red;
      color: white;
      font-size: 12px;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-weight: bold;
  }

  .add-to-cart .side-bar a:hover {
      background: #0056b3;
      transform: translateX(-5px);
  }

  /* ================= add to cart-section ========================= */


  /* ================= testimonalis-section ========================= */

  .testimonial-card {
      background: #fff;
      border: none;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      padding: 0 20px 20px 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      margin: auto;
  }

  .testimonial-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      width: 100%;
      background: linear-gradient(to right, #9f5de2, #6f51e2);
      z-index: 0;
  }

  .testimonial-header {
      position: relative;
      z-index: 1;
      padding: 15px 15px 0 15px;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .testimonial-img {
      width: 60px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
      background: linear-gradient(to right, #9f5de2, #6f51e2);
      padding: 3px;
  }

  .testimonial-content {
      margin-top: 20px;
      font-size: 16px;
      color: #333;
      min-height: 120px;
  }

  .testimonial-footer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 20px;
      z-index: 1;
      position: relative;
  }

  .testimonial-stars {
      color: #ffc107;
      margin-right: 10px;
  }

  .testimonial-rating {
      font-size: 14px;
      color: #555;
  }

  .testimonial-shape {
      position: absolute;
      top: 60px;
      left: 0;
      width: 0;
      height: 0;
      border-top: 40px solid transparent;
      border-left: 40px solid #fff;
      z-index: 1;
  }

  .owl-nav button {
      background: #6f51e2 !important;
      color: #fff !important;
      border-radius: 50% !important;
      width: 40px;
      height: 40px;
      margin: 10px;
      font-size: 20px !important;
  }

  .owl-dots .owl-dot span {
      background: #9f5de2 !important;
  }

  .testimonial-carousel .owl-stage-outer {
      padding: 20px 0;
  }

  .testimonial-quote {
      font-size: 60px;
      color: #f3f1f7;
      position: absolute;
      left: 20px;
      top: 80px;
      opacity: 0.2;
      z-index: 0;
  }

  .testimonial-carousel .owl-item img {
      display: block;
      width: 80px;
  }

  /* ================= testimonalis-section ========================= */