@import url('../css/lusail.css');
/* Fonts */
:root {
    --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-primary: 'Cairo', sans-serif;
    --font-secondary: 'Cairo', sans-serif;
    --lusail-font: 'Cairo', sans-serif;
}
/* Colors */
:root {
    --color-default: #222222;
    --color-primary: #8A1538;
    --color-primary-hover: color-mix(in srgb, var(--accent-color), transparent 15%);
    --color-secondary: #A29475;
    --color-text: #313b40;
    --color-blue: #165a7b;
    --blue-color-translucent: rgba(22, 90, 123, 0.175);
    --blue-color-translucent1: rgb(225 240 247 / 34%);
    --color-white: #fff;
    --grey-color-translucent: rgb(183 183 183 / 34%);
    --color-grey: #f2f2f2;
    --color-grey1: #f5f4ef;
    --color-grey2: #aaa;
    --color-grey3: #767171;
    --color-grey4: #3b404c;
    --color-grey6: #f8f8f8;
    --color-black: #000
}

.progress-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
    position: relative;
    width: 100%;
    padding-top: 20px;
    overflow: hidden;
    overflow-x: scroll;
    max-width: 100%;
    margin-bottom: 20px;
}
  
  .progress-container::before {
    background-color: var(--line-border-empty);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: var(--progress-zIndex);
  }
  
  .progress {
    background-color: var(--line-border-fill);
    height: 4px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.4s ease;
    width: 0%;
    z-index: var(--progress-zIndex);
  }
  
  .circle {
    align-items: center;
    background-color: #fff;
    border: 3px solid #e0e0e0;
    border-radius: 50%;
    color: #999;
    display: flex;
    height: 30px;
    justify-content: center;
    transition: 0.4 ease;
    width: 30px;
  }
  
  .circle.active {
    border-color: var(--line-border-fill);
  }
  
  
  .btn:focus {
    outline: 0;
  }

.default-step {
    flex-basis: auto;
    padding-top: 15px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: center;
    position: relative;
    margin-bottom: 0;
    min-width: 180px;
    line-height: 1.3;
}
    .default-step:nth-child(1) {
        min-width: 100px;
    }
    .default-step.current {
        border-color: var(--accent-color);
    }
  .default-step::before {
      content: "";
      position: absolute;
      height: 2em;
      width: 2em;
      background: #dde0e2;
      top: -0.8em;
      left: 50%;
      margin-left: -1em;
      border-radius: 50%;
      z-index: 2;
  }
    .default-step.current::before {
        background: var(--bg-accent-color);
    }
  .default-step.current:hover::before {
    
    box-shadow: rgba(163, 2, 52, 0.4) 1px 1px 6px;
}
.default-step:hover {
  text-decoration: none;
  background: rgb(245, 245, 245);
}
  .default-step::after {
      content: "";
      position: absolute;
      height: 5px;
      width: 100%;
      background: #dde0e2;
      top: 0;
      right: 0;
      z-index: 1;
  }
  .default-step:first-child::after {
      width: 50%;
      right: 0;
  }
    .default-step.current::after {
        background: var(--bg-accent-color);
    }

.default-step:last-child::after {
  width: 50%;
  right: auto;
  left: 0;
}

    .default-step a {
        display: inline-block;
        padding: 20px 10px 10px 10px;
        color: var(--heading-color);
        font-family: var(--lusail-font);
    }
  .default-step a:hover{
    text-decoration: none;
  }
    .default-step .title {
        font-size: 1.1em;
        font-weight: 600;
    }
  hr.divider {
    border-top: 1px dashed #ccc;
    margin: 20px 0;
}