/* body {
    font-family: Arial, sans-serif;
    margin: 30px;
    background: #f8f8f8;
  } */

  .owl-carousel .item {
    padding: 40px 0;
    margin: 5px;

    color: #fff;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
  }

  /* Progress Bar Container */
  .progress-container {
     width: calc(100% - 120px);
    background-color: #ccc; /* Gray track */
    height: 5px;
    margin-top: 20px;
    border-radius: 2px;
    overflow: hidden; /* So the bar doesn't overflow corners */
    position: relative;
    float:left;
  }

  /* Progress Bar Fill */
  .progress-bar {
    width: 0;               /* Will be updated dynamically */
    height: 5px;
    background-color: red;  /* Red loader */
    transition: width 0.3s ease-in-out;
  }
  
   .arrow-container {
    /* display: flex;          */
    margin-left: 10px;      /* gap between bar and arrows */
     float:right;
     margin-right:10px;
     width: 100px;
  }

  /* Style the Owl nav buttons (once moved) */
  .arrow-container .owl-nav button.owl-prev,
  .arrow-container .owl-nav button.owl-next {
    background: #000;          /* black background */
    color: #fff;               /* white text */
    border: none;
    padding: 0 15px;           /* horizontal padding */
    height: 40px;              /* fixed height for arrows */
    display: flex;
    align-items: center;       /* center arrow text vertically */
    justify-content: center;   /* center arrow text horizontally */
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 0;            /* default to 0 on both buttons */
    margin-right: 6px;         /* small spacing between prev & next */
    float:left;
  }

  /* If you want the second arrow to have a margin-left of 6px instead, do this: */
  .arrow-container .owl-nav button.owl-next {
    margin-right: 0;          /* reset right margin */
    margin-left: 6px;         /* apply left margin to the next arrow */
  }