:root {
  /* CarPay Brand Colors */
  --main-color: #152583;
  --second-color: #ca75a3;
  --third-color: #efd18d;

  --gray-light: #e5e7eb;
  --fourth-color: #9ca3af;
  --black-color: #000000;
  --white-color: #ffffff;

  --background-btn: linear-gradient(135deg, #ca75a3 0%, #efd18d 100%);
  --background: linear-gradient(-135deg, #ca75a3 0%, #efd18d 100%);
  --background-btn-hover: linear-gradient(-135deg, #ca75a3 0%, #efd18d 100%);

  --placeholder-color: #9ca3af;
  --padding: 20px;
  --radius: 50px;
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .header {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 1rem;
    transition: all 0.3s ease;
  }

  /* Hero Mobile Improvements */
  .hero-mobile {
    .hero-slider-mobile {
      height: 60vh;
      min-height: 400px;

      .hero-content {
        bottom: 35%;
        left: 3%;
        right: 3%;

        h1 {
          font-size: 24px;
          margin-bottom: 8px;
        }

        p {
          font-size: 13px;
        }
      }
    }

    .car-search-form-section {
      padding-top: 1.2rem !important;

      .car-search-form {
        padding: 1.2rem;
        border-radius: 0 !important;
        .form-label {
          font-size: 11px;
        }

        .form-control {
          padding: 0.6rem 0.9rem;
          font-size: 13px;
          height: 42px;
        }

        .btn-search {
          padding: 0.6rem 1rem;
          height: 42px;
          font-size: 14px;
        }
      }
    }
  }
  .stats-grid {
    flex-wrap: wrap;
  }
  .car-details-section {
    .car-specs .d-flex {
      padding: 10px;
      margin-bottom: 10px;
    }

    .finance-details {
      padding: 20px;
    }

    .card .card-body {
      padding: 20px;
    }

    h3.fw-bold.text-main {
      font-size: 24px;

      &::after {
        width: 60px;
      }
    }

    .accordion .accordion-item .accordion-header .accordion-button {
      padding: 15px 20px;
      font-size: 16px;

      i {
        font-size: 18px;
        margin-right: 10px;
      }
    }

    .accordion .accordion-item .accordion-collapse .accordion-body {
      padding: 30px 20px;
    }
  }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}