html {
    scroll-behavior: smooth;
  }
  /* Style for invalid input fields */
  .form.invalid {
      border-color: red;
  }

  /* Style for the error message text */
  .error-message {
      color: red;
      font-size: 12px;
      margin-top: 5px;
      display: block; /* Ensures the message is on a new line */
  }
  .ltn__car-dealer-form-box input[type="text"] {
      font-weight: 700;
      
  }

  .inputColor {
      background-color: cornsilk !important;
  }

  .testName {
      color: var(--ltn__heading-color);
      clear: both;
      font-family: var(--ltn__heading-font);
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 0px;
  }

  .hero-wrapper-four {
      padding: 60px 0 30px;
  }

  .hero-wrapper-four .shape {
      position: absolute;
      top: 0;
      left: 0;
  }

  .hero-wrapper-four .shape > img {
      max-width: 100%;
  }

  .hero-wrapper-four .hero-image {
      margin-right: -80px;
      height: 140%;
      visibility: visible;
      animation-delay: 0.8s;
      animation-name: fadeInRight;
  }

  .hero-wrapper-four .hero-image img {
      width: 100%;
      height: 100%;
      border-radius: 220.5px 220.5px 0px 0px;
      -o-object-fit: cover;
      object-fit: cover;
  }

  .hero-content .sub-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 19px;
      padding: 10px 20px;
      background: #00000017;
      border-radius: 7px;
      color: #c2000b;
  }

  .hero-wrapper-four .hero-content .sub-title
  {   
      margin-bottom: 30px;
  }

  .hero-content h1 {
      line-height: 1.1;
      text-transform: capitalize;
      font-family: var(--ltn__heading-font);
      font-size:3.5rem;
  }

  .hero-wrapper-four .hero-content p {
      font-size: 18px;
      line-height: 28px;
      padding-left: 25px;
      border-left: 3px solid #c2000b;
      margin-bottom: 35px;
      font-family: var(--ltn__body-font);
      color: var(--ltn__paragraph-color);
  }

  .hero-wrapper-four .hero-content h1 {
      margin-bottom: 35px;
      margin-top: 30px;
  }

  .mt-0 {
      margin-top:0;
  }


  .ltn__list-item-half li i {
    font-size: 20px;
    color: var(--ltn__secondary-color);
    margin-right: 15px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    background-color: var(--ltn__color-6);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45px;
    flex: 0 0 45px;
    border-radius: 100%;
  }

  i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
    font-family: flaticon !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .ltn__product-item {
    /* If your items are arranged in a row (e.g., in a grid/flex container)
       this ensures all product cards match the height of the tallest card. 
       Note: If this is a slider (Slick), the slider itself might control the block height. */
    height: 100%; 
    display: flex;
    flex-direction: column; /* Stacks image and info vertically */
}

/* 2. Make the product-info section take up remaining space and use flex to manage its inner elements */
.ltn__product-item .product-info {
    flex-grow: 1; /* Allows the product-info section to fill all vertical space 
                     remaining in the product-item after the image. */
    display: flex;
    flex-direction: column;
    /* Optional: Add padding/margins as needed for aesthetics */
    padding: 20px; 
}

/* 3. Isolate the potentially multi-line title and give it a minimum height 
   OR let it grow and push the description/features down.
   The second option is better for dynamic title heights. */

/* Isolate the title and price wrapper, and let it take up space */
.ltn__product-item .product-info .product-price {
    /* Position the price at the top of the info block */
    order: 1; 
}

.ltn__product-item .product-info .product-title {
    /* Position the title after the price */
    order: 2; 
    /* Important for variable line heights: Set a fixed min-height 
       for the title to accommodate the max expected number of lines. 
       Adjust this value based on your font size/line-height. 
       Example: 2 lines of text (30px line-height) = min-height: 60px; */
    min-height: 60px; /* Adjust this value */
    /* If you prefer it to expand and push the rest down, remove the min-height
       and just rely on the other elements to stick to the bottom. 
       For this specific problem (titles causing misalignment), min-height is a common fix. */
}

/* 4. Push the bottom elements to the bottom of the content area */
.ltn__product-item .product-info .product-description {
    order: 3;
}

.ltn__product-item .product-info .ltn__list-item-2 {
    /* Push the feature list (last element) to the bottom of the info block */
    margin-top: auto; 
    order: 4;
}