body {
    font-family: 'Inter', 'Inter Fallback', sans-serif;
}

      /* Root variables for easy color management */
      :root {
        --primary-red: #E2001A;
        --primary-red-dark: #B00016;
        --gray-light: #e9ecef;
        --gray-dark: #6c757d;
        --text-default: #495057;  
        --white: #ffffff;
        --primary-blue: #2e365e;
      }

      /* Remove number input arrows (spinners) */
      input[type="number"] {
        -moz-appearance: textfield;
        /* Firefox */
      }


      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        /* Chrome, Safari, Edge */
        margin: 0;
      }


      /* Wizard container */
      .wizard-container {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }

      

      .form-control::placeholder {
        color: #aaa;
        /* lighter grey */
        opacity: 1;
        /* ensure color shows properly */
      }

      select.form-select option[disabled] {
        color: #aaa;
        /* custom lighter grey */
      }

      .bg-white {
        background-color: #ffffff;
      }

      .bg-wizard {

        background-color: #F9FAFB;
        padding: 20px;
      }

      .step {
        display: none;
      }

      .step.active {
        display: block;
        animation: fadeIn 0.5s ease-in-out;
      }
      
      

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      
      /*Form Container*/
      .form-container{
        height: 100vh;
        min-height: 500px;     
        overflow-y: auto;     
      }

      /* Step indicators */
      .step-indicator .num-background {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: #E5E7EB;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }

      .step-indicator .num {
        color: var(--gray-dark);
        /* font-weight: 700; */
        font-size: 1.5rem;
        transition: all 0.3s ease;
        opacity: 1;
        transform: scale(1);
      }

      /* Active step (current) - red theme */
      .step-indicator.active .num-background {
        /*background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));*/
        background: var(--primary-blue);     
        box-shadow: 0 8px 25px rgba(226, 0, 26, 0.4);
      }

      .step-indicator.active .num {
        color: var(--white);
      }

      .step-indicator.active .title-container p {
        /*color: var(--primary-red);*/
        color: var(--primary-blue);
        transition: all 0.3s ease;
        /* font-weight: 600; */
      }

      /* Completed step - KEEP GREEN PARTS UNCHANGED */
      .step-indicator.completed .num-background {
        background: linear-gradient(135deg, #28a745, #20c997);
        /* green stays */
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
      }

      .step-indicator.completed .num {
        opacity: 0;
        transform: scale(0);
      }

      .step-indicator.completed .title-container p {
        color: #28a745;
        /* green stays */
        /* font-weight: 600; */
      }

      /* Tick icon */
      .step-indicator .tick-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        color: var(--white);
        font-size: 1.5rem;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 0.1s;
      }

      .step-indicator.completed .tick-icon {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      @keyframes completeStep {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.15);
        }

        100% {
          transform: scale(1);
        }
      }

      .step-indicator.completing .num-background {
        animation: completeStep 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Forms */
      .form-control,
      .form-select {
        border: 2px solid var(--gray-light);
        border-radius: 10px;
        /* padding: 12px 16px; */
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.9);
      }

      .form-control:focus,
      .form-select:focus {
        border-color: var(--primary-red);
        box-shadow: 0 0 0 0.2rem rgba(226, 0, 26, 0.25);
        background: var(--white);
      }

      .form-label {
        /* font-weight: 600; */
        color: var(--text-default);
        margin-bottom: 8px;
      }

      .select2-container{    
        width: 100% !important;
      } 

      /* Buttons */
      .btn-modern {
        padding: 12px 30px;       
        /* border-radius: 50px; */
        /* font-weight: 600; */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .btn-modern:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
      }

      .btn-modern:hover:before {
        left: 100%;
      }

      /* Primary buttons - red theme */
      .btn-primary-modern {
        background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
        color: var(--white);
        box-shadow: 0 4px 15px rgba(226, 0, 26, 0.4);
      }

      .btn-primary-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(226, 0, 26, 0.6);
        color: var(--white);
      }

      /* Secondary buttons remain unchanged */
      .btn-secondary-modern {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        color: var(--white);
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
      }

      .btn-secondary-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(108, 117, 125, 0.6);
        color: var(--white);
      }

      /* Success buttons - KEEP GREEN */
      .btn-success-modern {
        background: linear-gradient(135deg, #28a745, #20c997);
        /* green stays */
        color: var(--white);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
      }

      .btn-success-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.6);
        color: var(--white);
      }

      /* Step connector - KEEP GREEN for completed */
      .step-connector {
        height: 4px;
        background: #E5E7EB;
        border-radius: 2px;
        position: relative;
        overflow: hidden;
      }

      .step-connector.completed:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(135deg, #28a745, #20c997);
        /* green stays */
        animation: fillProgress 0.5s ease-in-out;
      }

      @keyframes fillProgress {
        from {
          width: 0%;
        }

        to {
          width: 100%;
        }
      }

      /* Responsive */
      @media (max-width: 768px) {
        .step-indicator .num-background {
          width: 50px;
          height: 50px;
        }

        .step-indicator .num {
          font-size: 1.2rem;
        }

        .step-indicator .tick-icon {
          font-size: 1.2rem;
        }

        .btn-modern {
          padding: 10px 20px;
          font-size: 0.875rem;
        }

        .wizard-container {
          margin: 10px;
          border-radius: 15px;
        }

        .step-indicator .title-container {
          margin-top: 10px;
        }

        .step-indicator .title-container p {
          font-size: 0.9rem;
        }

        .step-indicator .title-container small {
          font-size: 0.75rem;
        }
      }

      @media (max-width: 576px) {
        .step-indicator {
          margin-bottom: 20px;
        }

        .step-connector {
          display: none;
        }

        .d-flex.justify-content-between {
          flex-direction: column;
          gap: 10px;
        }

        .d-flex.justify-content-between .btn-modern {
          width: 100%;
        }

        .text-end {
          text-align: center !important;
        }
      }
      
      
    /*custom css  */
    
      .message{       
        background-color: #ebfbeb;
        border: 1px solid #02d302;
        border-radius: 10px;
        padding: 0.5rem;
        /*color: #00ab00;*/
        color: #166534;          
      }
    
    
    
    
    .select2-container--default .select2-selection--multiple 
    {
        border: 2px solid var(--gray-light);
        border-radius: 10px;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.9);
        padding: .375rem 2.25rem .375rem .75rem;
    }
    
    .select2-container--default .select2-selection--multiple .select2-selection__choice 
    {
        background-color: #ffc5c5;     
        border: 1px solid #ff0000;       
        border-radius: 10px;     
        margin-top: 0;
    }
    
    .select2-container--default.select2-container--focus .select2-selection--multiple
    {
        border-color: var(--primary-red);
        box-shadow: 0 0 0 0.2rem rgba(226, 0, 26, 0.25);        
        background: var(--white);
    }
    
    .select2-container .select2-search--inline .select2-search__field 
    {
        margin-top: 0;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove 
    {
        color: #f50000;   
        border-right: 0;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__display 
    {
        color: #f50000;
    }