/* ==========================================
                                                                                                                                                                           Slider Section Styling
                                                                                                                                                                           ========================================== */
  .home_slider-section {
      width: 100%;
  }

  .home_slider-container {
      position: relative;
      width: 100%;
      height: 700px;
      overflow: hidden;
  }

  .home_slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      /* স্লো এবং প্রফেশনাল ফেড ইফেক্টের জন্য ০.৮ সেকেন্ড লিনিয়ার-ইজ ট্রানজিশন */
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
      z-index: 1;
      padding: 80px 10px;
  }

  .home_slide.active {
      opacity: 1;
      visibility: visible;
      z-index: 2;
  }

  .image-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      border-radius: 10px;
  }

  .image-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.3) 100%);
      border-radius: 10px;
      z-index: 2;
  }

  .image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 10px;
  }

  .home_slider-content {
      position: absolute;
      top: 50%;
      left: 6%;
      transform: translateY(-50%);
      z-index: 3;
      width: 80%;
  }

  .home_slider-content h1 {
      color: #ffffff;
      font-size: 3rem;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.5px;
      margin-bottom: 25px;
      text-transform: uppercase;
  }

  .shop-btn {
      display: inline-block;
      background-color: #ffffff;
      color: #000000;
      text-decoration: none;
      font-weight: 800;
      font-size: 0.75rem;
      padding: 15px 36px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-style: italic;
      transition: background-color 0.2s ease, color 0.2s ease;
      transform: skewX(-12deg);
  }

  .shop-btn:hover {
      background-color: #000000;
      color: #ffffff;
  }

  /* ==========================================
                                                                                                                                                               Circular Progress Navigation (Fixed & Optimized)
                                                                                                                                                               ========================================== */
  .home_slider-pagination {
      position: absolute;
      bottom: 100px;
      right: 5%;
      display: flex;
      gap: 15px;
      z-index: 10;
  }

  .dot {
      position: relative;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
  }

  .dot-number {
      position: absolute;
      font-size: 0.85rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.5);
      z-index: 2;
      transition: color 0.3s ease;
  }

  .progress-ring {
      position: absolute;
      top: 0;
      left: 0;
      transform: rotate(-90deg);
      /* ঘড়ির ১২টার দিক থেকে শুরু করার জন্য */
      z-index: 1;
      pointer-events: none;
      /* ক্লিকের সুবিধার্থে */
  }

  /* প্রোগ্রেস বার এর নিখুঁত ম্যাথমেটিকাল ক্যালকুলেশন */
  .progress-ring__circle {
      /* 2 * PI * r = 2 * 3.14159 * 16 = 100.53 */
      stroke-dasharray: 100.5;
      stroke-dashoffset: 100.5;
      /* শুরুতে সম্পূর্ণ খালি থাকবে */
  }

  .dot:hover .dot-number {
      color: #ffffff;
  }

  /* একটিভ স্টেটে ৫ সেকেন্ডের লিনিয়ার অ্যানিমেশন */
  .dot.active .dot-number {
      color: #ffffff;
  }

  .dot.active .progress-ring__circle {
      animation: slideProgressLinear 5000ms linear forwards;
      /* ৫০০০ মিলি-সেকেন্ড বা ৫ সেকেন্ড */
  }

  /* মাউস স্লাইডারের উপর রাখলে প্রোগ্রেস বার পজ (Pause) হয়ে দাঁড়িয়ে থাকবে */
  .home_slider-container:hover .dot.active .progress-ring__circle {
      animation-play-state: paused;
  }

  @keyframes slideProgressLinear {
      from {
          stroke-dashoffset: 100.5;
          /* ০% থেকে শুরু */
      }

      to {
          stroke-dashoffset: 0;
          /* ১০০% এ শেষ */
      }
  }

  /* মোবাইল রেসপন্সিভ */
  @media (max-width: 768px) {
      .home_slider-pagination {
          100px
      }

      .home_slider-content h1 {
          font-size: 30px;
      }
  }

  @media (max-width: 480px) {
      .home_slider-pagination {
          100px gap: 10px;
      }
  }

  .car-adds-section {
      padding: 60px 0 80px 0;
  }

  .home-2-car-adds-items {
      background: #000000;
      border-radius: 16px;
      padding: 40px 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      border: 1px solid #f0f0f0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

  }

  .home-2-car-adds-items:hover {
      transform: translateY(-10px);
  }

  /* আইকন হোল্ডার ডিজাইন */
  .border-one {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 25px auto;
      position: relative;
      background: #f8f9fa;
      transition: all 0.3s ease;
  }

  .icon i {
      font-size: 40px;
      color: #0e548d;
      transition: transform 0.3s ease;
  }

  .home-2-car-adds-items:hover .icon i {
      transform: scale(1.15);
  }




  /* টাইটেল এবং টেক্সট বডি */
  .title-border .title {
      font-size: 1.35rem;
      font-weight: 800;
      color: #111111;
      margin-bottom: 15px;
  }

  .padding-around p {
      color: #666666;
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 25px;
  }

  /* প্রফেশনাল বাটন স্টাইল */
  .inquery_btn {
      display: inline-block;
      width: 100%;
      color: #ffffff;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 1px;
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 1px solid #ffffff;
      background-color: #000000 !important;
  }



  /* ==========================================
                                                                                                                               Responsive Control
                                                                                                                               ========================================== */
  @media (max-width: 768px) {
      .heading-02 {
          font-size: 1.85rem;
      }

      .home-2-car-adds-items {
          padding: 30px 20px;
      }
  }

  /* ==========================================
                                                       Brand Transformation Section Styling
                                                       ========================================== */
  .brand-transformation-section {
      position: relative;
      background-color: #f9f9f9;
      padding: 100px 0;
      overflow: hidden;
  }

  .transformation-content {
      position: relative;
      max-width: 850px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .bg-watermark {
      font-size: 15rem;
      font-weight: 900;
      color: #ebeaea;
      letter-spacing: -2px;
      line-height: 0.8;
      text-transform: uppercase;
      user-select: none;
      margin-bottom: 50px;
      position: relative;
      z-index: 1;
  }

  .inner-text-wrap {
      position: relative;
      z-index: 2;

  }

  .transformation-title {
      font-size: 2.1rem;
      font-weight: 900;
      color: #0b0c10;
      letter-spacing: -0.5px;
      line-height: 1.25;
      text-transform: uppercase;
      margin-bottom: 25px;
  }

  .transformation-desc {
      font-size: 0.95rem;
      font-weight: 400;
      color: #4a4a4a;
      line-height: 1.7;
      max-width: 720px;
      margin: 0 auto 40px auto;
  }

  /* ==========================================
                                                       Slanted/Skewed Button (বাঁকানো বাটন ডিজাইন)
                                                       ========================================== */
  .btn-skew-wrap {
      display: inline-block;
  }

  .btn-skew-accent {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #111111;
      color: #ffffff !important;
      text-decoration: none;
      font-weight: 800;
      font-size: 0.8rem;
      letter-spacing: 1px;
      padding: 18px 45px;
      position: relative;
      text-transform: uppercase;
      cursor: pointer !important;
      transform: skewX(-12deg);
      transition: background-color 0.3s ease, transform 0.3s ease;
  }

  /* টেক্সট যাতে বাঁকা না হয়ে সোজা থাকে */
  .btn-skew-accent span {
      transform: skewX(12deg);
      display: inline-block;
      color: #fff;
  }

  /* বাটন হোভার ইফেক্ট */
  .btn-skew-accent:hover {
      background-color: #2b2b2b;
      transform: skewX(-12deg) translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }


  /* ==========================================
                                                       Responsive Breakpoints
                                                       ========================================== */
  @media (max-width: 991px) {
      .bg-watermark {
          font-size: 11rem;
          margin-bottom: -25px;
      }

      .transformation-title {
          font-size: 1.75rem;
      }
  }

  @media (max-width: 768px) {
      .brand-transformation-section {
          padding: 80px 0;
      }

      .bg-watermark {
          font-size: 100px;
          margin-bottom: 8px;
      }

      .transformation-title {
          font-size: 1.45rem;
      }

      .transformation-desc {
          font-size: 0.9rem;
          line-height: 1.6;
      }

      .btn-skew-accent {
          padding: 10px 18px;
          font-size: 0.75rem;
      }
  }