.horizantal-step, .vertical-step{

      display: none;
      
    }

      /* Show Design 1 on medium and larger screens */
        @media (min-width: 768px) {
          .horizantal-step {
            display: block;
          }
        }

        /* Show Design 2 on small screens */
        @media (max-width: 767px) {
          .vertical-step {
            display: block;
          }
        }

      /* horizontal stepper styles */

      body {
        font-family: "Roboto", sans-serif;
        background-color: #f8f9fa;
      }

      .steps-header {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 2rem;
      }

     
      .steps-header::before {
        content: "";
        position: absolute;
        top: 50%; 
        left: 10%;
        right: 10%;
        height: 2px;
        background-color: #ccc;
        z-index: 0;
      }

      .steps-header .step {
        display: flex;
        align-items: center;
        z-index: 1;
        background-color: #ffffff;
        text-align: center;
        
      }

      .steps-header .step span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: rgb(117, 117, 117);
        border-radius: 50%;
        color: white;
        font-weight: bold;
        margin-right: 10px;
      }

      .steps-header .active span {
        background-color: rgb(63, 81, 181);
        color: white;
      }

      .card {
        margin: auto;
        max-width: 580px;
        padding: 2rem;
        border: none;
      }

      button {
        font-weight: bold;
      }

      .steps-header .active {
        background-color:rgba(245,245,245,255); 
        border-radius: 5px; 
        padding: 20px; 
      }

      .steps-header .step:hover {
        background-color: rgba(245,245,245,255); 
        border-radius: 5px;
        cursor: 20px;
      }

      

      
/* 
      .form-check-input:checked {
          background-color: rgb(240, 95, 144); 
          border: none;   
      } */
    
      /* Input field base styling */
.form-floating > .form-control {
    background-color: #f1f1f1;
    /* border-bottom: 1px solid red; */
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
}

.form-floating label::after {
    background-color: transparent !important; /* Ensure no background color */
    content: ''; /* Optional: Override any content */
    display: block; /* Maintain the pseudo-element */
}

/* Placeholder visibility */
.form-control::placeholder {
    opacity: 1;
    color: rgb(104, 106, 104);
    transition: opacity 0.2s ease-out;
}

/* Show placeholder during focus */
.form-control:focus::placeholder {
    opacity: 1; /* Ensure placeholder is visible */
    color: rgb(104, 106, 104); /* Ensure consistent placeholder color */
}

/* Focus state: Bottom red border */
.form-control:focus {
    /* border-bottom: 2px solid red; */
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none !important;
    outline: none;
}

/* Floating label styling */
.form-floating > label {
    color: rgb(104, 106, 104); /* Initial label color */
    font-size: 0.9rem;
    transition: transform 0.2s ease-out, color 0.2s ease-out; /* Transition transform and color */
    pointer-events: none; /* Prevent interaction with the label */
    background-color: transparent !important; /* Ensure no background color */
    visibility: visible; /* Ensure label is visible */
}

/* Make the label float when input is focused or has value */
/* .form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
    transform: scale(0.85) translateY(-1.5rem); 
    visibility: visible;
    background-color: transparent !important; 

} */

/* Ensure placeholder and label do not overlap */
.form-control:placeholder-shown + label {
    transform: none; /* Reset label position when input is empty */
    color: rgb(104, 106, 104); /* Color when placeholder is shown */
}

/* Error message styling */
.input-error {
    color: red;
    font-size: 0.8rem;
    position: absolute;
    bottom: -1.5rem;
    left: 0.5rem;
}

    #learner_name,#certificate_no,#date_of_achievement {
            color: rgb(104, 106, 104); /* Change value text color to brown */
        }

        
        .disabled {
          pointer-events: none;
          cursor: not-allowed;
        }


      

      /* vertical stepper design */

      .vertical-stepper {
             display: flex;
             flex-direction: column;
             position: relative;
         }
 
         .vertical-stepper .step {
             display: flex;
             align-items: flex-start;
             position: relative;
             margin-bottom: 30px;
         }

 
         /* Step Circle */
         .vertical-stepper .step-circle {
             width: 35px;
             height: 35px;
             border-radius: 50%;
             background-color: #6c757d;
             color: #fff;
             text-align: center;
             line-height: 35px;
             font-weight: bold;
             position: relative;
             z-index: 2;
             flex-shrink: 0;
         }
 
         .vertical-stepper .step.active .step-circle {
             background-color: rgb(63, 81, 181);
         }
 
       


         /* Vertical Line BETWEEN Steps */
         .vertical-stepper .step:not(:last-child)::after {
             content: '';
             position: absolute;
             top: 35px; /* Starts below the step circle */
             left: 17px; /* Aligns with circle center */
             height: 100%; /* Extends down to the next step */
             background-color: #ccc;
             width: 1px;
             z-index: 1;
         }
 
         /* Step Content */
           .vertical-stepper .step-content {
             margin-left: 15px;
             display: none; /* Initially hide all content */
             width: 100%;
             margin-top: 40px;
         }
 
         .vertical-stepper .step.active .step-content {
             display: block; /* Show content for active step */
         }
 
         /* Navigation Buttons */
         .navigation-buttons {
             margin-top: 20px;
         }



         /* switch style */

         /* Container for the toggle switch */
    .custom-toggle {
      position: relative;
      display: inline-block;
      width: 80px; /* Toggle width */
      height: 18px; /* Toggle background height */
    }

    /* Hide the default checkbox */
    .custom-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The switch background */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc; /* Gray for unchecked state */
      transition: 0.4s;
      border-radius: 20px;
    }

    /* Circle (slider thumb) */
    .slider::before {
      content: "\2212"; /* Minus (-) icon for unchecked */
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 22px; /* Larger circle */
      width: 22px;
      left: 1.5px;
      bottom: -1px; /* Adjust alignment */
      background-color: rgb(33, 33, 33); /* Default circle color */
      color: white; /* Icon color */
      border-radius: 50%;
      transition: 0.4s;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    }

    /* Checked state: background color */
    .custom-toggle input:checked + .slider {
      background-color: rgb(240, 95, 144); /* Pink toggle background */
    }

    /* Checked state: circle color and tick icon */
    .custom-toggle input:checked + .slider::before {
      content: "\2713"; /* Checkmark icon */
      background-color: #e91e63; /* Pink circle */
      color: #fff; /* White tick */
      transform: translateX(24px); /* Slide circle */
    }

    /* Text styling */
    .form-check-label {
      font-size: 14px;
      font-weight: 400;
      color: #000;
    }


    @media (max-width: 767px) { /* Target screens smaller than 576px */
      .custom-toggle {
        width: 50px; /* Reduce the toggle width */
        height: 14px; /* Reduce the toggle background height */
      }
    
      .slider::before {
        height: 18px; /* Adjust the slider circle size */
        width: 18px;
        font-size: 12px; /* Decrease the icon size */
        left: 1px; /* Adjust position */
        bottom: -1px; /* Fine-tune alignment */
      }
    
      .custom-toggle input:checked + .slider::before {
        transform: translateX(18px); /* Adjust the slider movement */
      }
    
      .form-check-label {
        font-size: 12px; /* Decrease the text size for small screens */
        line-height: 1.2; /* Adjust line spacing */
      }
    }