:root {
    --fs: 1rem;
    --Marine-blue: hsl(213, 96%, 18%);
    --Purplish-blue: hsl(243, 100%, 62%);
    --Pastel-blue: hsl(228, 100%, 84%);
    --Light-blue: hsl(206, 94%, 87%);
    --Strawberry-red: hsl(354, 84%, 57%);
  
    --Cool-gray: hsl(231, 11%, 63%);
    --Light-gray: hsl(229, 24%, 87%);
    --Magnolia: hsl(217, 100%, 97%);
    --Alabaster: hsl(231, 100%, 99%);
    --White: hsl(0, 0%, 100%);
  }
  
  * {
    font-family: "Ubuntu", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 100%;
  }
  img {
    display: block;
    max-width: 100%;
  }
  
  body {
    background-color: var(--Magnolia);
  }
  
  .form-card {
    background-color: var(--White);
    -webkit-box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
  }
  
  /* SIDEBAR */
  
  .sidebar {
    background-image: url("../assets/images/form/bg-sidebar-desktop.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0.8rem;
    font-size: 0.8rem;
  }
  
  .sidebar ul li:nth-child(2) {
    color: var(--Cool-gray);
  }
  
  .sidebar ul li:first-child {
    color: var(--White);
  }
  
  .sidebar ul li:first-child.active-step {
    background-color: var(--Light-blue);
    color: var(--Marine-blue);
  }
  
  .sidebar ul li div {
    color: var(--White);
  }
  
  /* FORM  STEP - 1*/
  
  .content {
    background-color: var(--White);
  }
  
  h1 {
    color: var(--Marine-blue);
  }
  
  .form-container p {
    color: var(--Cool-gray);
  }
  
  form label {
    color: var(--Marine-blue);
  }
  
  .form-text {
    color: var(--Strawberry-red);
    font-size: 0.8rem;
  }
  
  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  input[type="tel"]::placeholder {
    color: var(--Cool-gray);
  }
  
  input.invalid {
    border-color: var(--Strawberry-red);
  }
  
  .form-footer {
    background-color: var(--White);
  }
  
  /* BUTTONS */
  
  .btn {
    background-color: #E13833;
    color: var(--White);
  }
  
  .btn:hover {
    background-color: var(--Purplish-blue);
    color: var(--White);
  }
  
  .go-back-btn {
    color: var(--Cool-gray);
  }
  
  .go-back-btn:hover {
    color: var(--Marine-blue);
  }
  
  /* STEP - 2 */
  
  .card {
    cursor: pointer;
  }
  
  .card:hover {
    border-color: var(--Purplish-blue);
  }
  
  .card.active {
    background-color: var(--Alabaster);
    border-color: var(--Purplish-blue);
  }
  
  .card-text h3 {
    color: var(--Marine-blue);
    font-size: 1rem;
  }
  
  .card-text span {
    color: var(--Cool-gray);
    font-size: 0.9rem;
  }
  
  .card-text p {
    color: var(--Marine-blue);
    font-size: 0.9rem;
  }
  
  /* TOGGLE BETWEEN MONTHLY AND YEARLY */
  
  .toggle {
    background-color: var(--Alabaster);
  }
  
  .toggle span {
    color: var(--Cool-gray);
  }
  
  .toggle span.active {
    color: var(--Marine-blue);
    font-weight: 700;
  }
  
  .yearly-price {
    display: none;
  }
  
  .yearly-price.yearly-plan {
    display: block;
  }
  
  .card p {
    display: none;
  }
  
  .card p.yearly-plan {
    display: block;
    font-weight: 700;
  }
  
  #switch {
    height: 0;
    width: 0;
    visibility: hidden;
  }
  
  .switch-label {
    cursor: pointer;
    text-indent: -9999px;
    width: 50px;
    height: 20px;
    background: var(--Marine-blue);
    display: block;
    border-radius: 100px;
    position: relative;
  }
  
  .switch-label:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
  }
  
  input:checked + .switch-label {
    background: var(--Marine-blue);
  }
  
  input:checked + .switch-label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
  }
  
  .error {
    font-size: 0.8rem;
    color: var(--Strawberry-red);
    bottom: -1rem;
    right: 1rem;
    display: none;
  }
  
  .error.visible {
    display: block;
  }
  
  /* STEP - 3 */
  
  .input-field {
    border: 1px solid var(--Light-gray);
    cursor: pointer;
  }
  
  .input-field:hover {
    border-color: var(--Purplish-blue);
  }
  
  .input-field:hover label,
  .input-field input[type="checkbox"]:hover {
    cursor: pointer;
  }
  
  .input-field span {
    color: var(--Purplish-blue);
  }
  
  .input-field.active {
    background-color: var(--Alabaster);
    border-color: var(--Purplish-blue);
  }
  
  /* TABLE STEP - 4 */
  
  .table {
    background-color: var(--Alabaster);
  }
  
  .table-header {
    border-bottom: 1px solid var(--Light-gray);
  }
  
  .table th {
    color: var(--Marine-blue);
  }
  
  .table th a {
    color: var(--Cool-gray);
  }
  
  .table th a:hover {
    color: var(--Purplish-blue);
  }
  
  tbody td:first-child {
    color: var(--Cool-gray);
  }
  
  .total-row {
    background: var(--White);
  }
  
  .price {
    color: var(--Marine-blue);
  }
  
  .total {
    color: var(--Purplish-blue);
  }
  
  /* STEP - 5 */
  
  .confirm {
    background-color: var(--Purplish-blue);
  }
  
  .confirm:hover {
    background-color: var(--Pastel-blue);
  }
  
  footer {
    font-size: 0.7rem;
  }
  
  @media (max-width: 575px) {
    .container {
      background-color: transparent;
      box-shadow: none;
    }
  
    .sidebar {
      background-image: url("../assets/images/form/bg-sidebar-mobile.svg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 0%;
    }
  
    .content {
      position: absolute;
      width: 90%;
      top: 63px;
      right: 5%;
      -webkit-box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 10px 13px 0px rgba(0, 0, 0, 0.1);
    }
  
    .form-footer {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
    }
  }
  
  @media (max-width: 992px) {
    .card-text h3 {
      font-size: 0.8rem;
    }
  
    .card-text span {
      font-size: 0.6rem;
    }
  
    .card-text p {
      font-size: 0.6rem;
    }
  }
  
  @media (max-width: 768px) {
    .card-text h3 {
      font-size: 1rem;
    }
  
    .card-text span {
      font-size: 0.9rem;
    }
  
    .card-text p {
      font-size: 0.9rem;
    }
  }
  .step-container {
    position: relative;
    text-align: center;
    transform: translateY(-43%);
  }
  
  .step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #007bff;
    line-height: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer; /* Added cursor pointer */
  }
  
  .step-line {
    position: absolute;
    top: 16px;
    left: 50px;
    width: calc(100% - 100px);
    height: 2px;
    background-color: #007bff;
    z-index: -1;
  }
  
  #multi-step-form{
    overflow-x: hidden;
  }