/* Font choice */
     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    
     body {
         font-family: 'Roboto', sans-serif;
     }
 
     body, h1, h2, h3, p, img {
     margin: 0;
     padding: 0;
 }
 
     /* Additional styles to better match the description */
     .container {
        width: 80%;  /* Adjust this value based on your requirements */
        max-width: 1000px !important;  
     }
 
     .logo {
         width: 100px;
         height: 100px;
         margin: 0 auto 20px auto; /* Added bottom margin for better spacing */
         display: block;
     }
 
     h2, h3 {
         font-weight: 700; /* Making headings bolder */
         margin-bottom: 20px; /* Added bottom margin for better spacing */
     }
 
     p {
         margin-bottom: 20px; /* Added bottom margin for better spacing */
     }
 
    
 
 
 
     .form-control {
         padding: 15px 12px; /* Increased padding for input fields */
         margin-bottom: 20px; /* Added bottom margin for better spacing */
     }
 
     .input-group-text {
         border-top-right-radius: .25rem;
         border-bottom-right-radius: .25rem;
     }
 
     .progress-bar {
     height: 4px;
     background-color: #E0E0E0;  /* Light gray color */
     position: relative;
     margin: 10px;
     margin: 10px 0;
 }
 .date-label {
    display: block;
    cursor: pointer;
}

.date-label input[type="date"] {
    width: 100%;
    cursor: pointer;
}
 .back-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: black;
    background: none;
    border: none;
    font-size: 24px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    outline: none; /* to remove the focus border */
}

select.form-control {
    appearance: none; /* Removes default browser styling */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center; /* Position the arrow on the right with a little padding */
    background-size: 16px; /* Size of the arrow */
    padding-right: 2rem; /* Adds some padding on the right to not overlap text with the arrow */
}

.back-btn:hover,
.back-btn:focus {
    color: #555;
    text-decoration: none;
}
 
 /* Foreground progress bar */
 .progress-fill {
     height: 4px;
     background-color: #ff8134;  /* Bootstrap's primary blue color */
     width: 0%; /* Starts with no progress */
     position: absolute;
     top: 0;
     left: 0;
     transition: width 0.3s ease; /* Smooth transition for width changes */
 }
 
     /* Align the toggle button with the input */
     .input-group .btn-outline-secondary {
     height: 58px; /* Adjust for the top and bottom borders */
     padding: 15px 12px;/* Match the default padding of the input */
     border-color: #ced4da; /* Match the default border color of the input */
     border-left: 0; /* Remove the left border of the button */
 }
 
    
 
     
 
     .continue-btn {
         margin-top: 20px; /* Added top margin for better spacing */
         background-color: #ff8134;
         border-color: #ff8134;
         --bs-btn-hover-bg: #cf8b60;
         --bs-btn-hover-border-color: #cf8b60;
         --bs-btn-bg: #ff8134;
        --bs-btn-border-color: #ff8134;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #ff8134;
        --bs-btn-hover-border-color: #ff8134;
        --bs-btn-focus-shadow-rgb: 49,132,253;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #ff8134;
        --bs-btn-active-border-color: #ff8134;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: #ff8134;
        --bs-btn-disabled-border-color: #ff8134;
     }
     .container {
     max-width: 600px;
     max-height: 700px;
     padding-left: 1.5rem !important;
     padding-right: 1.5rem !important;
     padding-top: 0px !important;
     padding-bottom: 1.5rem !important;
     
     overflow-y: auto;  /* Adds vertical scrolling when needed */
     padding: 0px;    /* Optional: Adds some padding inside the container */
     box-sizing: border-box; /* Ensures that padding and border are included in the total width and height */
     position: relative;
    }  

  
    
 
 .password-input{
  border-right: none;
 }

 .show-password-btn{

    --bs-btn-hover-bg:#ffffff !important;
    --bs-btn-hover-color:#1111 !important;
 }
 
 .container::before,
 .container::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     height: 20px;
     z-index: -2; /* Puts the gradient above the content */
     pointer-events: none;
     
     
     /* Ensures it doesn't interfere with scrolling or clicks */
 }
 
 
 .sticky-header {
     padding: 10px 0;  /* Added some padding for visual appeal */
     
     position: sticky;
     top: 0;
     margin-top: 0; 
     background-color: white;  /* Ensure the background is solid */
     z-index: 10;  /* Keep it above other content */
 }
 
 
 .container::before {
     top: 0;
     background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
 }
 
 .container::after {
     bottom: 0;
     background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
 }

 .logo {
             width: 50px;
             height: 50px;
             margin-top: 20px !important; 
             margin-bottom: 10px;
             margin-left: calc(50% - 40px);
             margin: 0 auto;
             display: block;
         }
.input-group-text {
             border-top-right-radius: .25rem;
             border-bottom-right-radius: .25rem;
         }
         /* Additional styles for the multi-step form */
 .step {
             display: none; /* Hide all steps initially */
         }
.step.active {
             display: block; /* Only show the active step */
         }

         /* Error styles */
.input-error {
    border-color: red;
}

.error-message {
    display: block;
    color: red;
    font-size: 12px;
    margin-top: -20px;
    z-index: 4;
    position: relative;
}

/* Styles for the success animation */
.success-animation {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    display: block;
}

.success-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #ff8134;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}


.success-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    width: 100px;
    height: 100px;
    stroke-width: 2;
    stroke: #ff8134;
    stroke-miterlimit: 10;
    fill: none;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* General Modal Styling */

.modal-dialog {
    display: flex;
    align-items: center;  /* Vertical center alignment */
    min-height: calc(100% - (1.75rem * 2)); /* Adjust according to your needs */
}

.modal-content {
    background-color: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Header Styling */
.modal-header {
    background-color: #ff8134; /* Your brand's primary color */
    color: white; /* Contrasting text color */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.modal-title {
    font-weight: bold;
}

/* Body Styling */
.modal-body {
    font-size: 16px;
    line-height: 1.5;
}

/* Footer Styling */

.custom-select {
    position: relative;
  }

  .modal-dialog.modal-lg {
    max-width: 800px; /* Larger modal */
  }

  .modal-header {
    border-bottom: none; /* Cleaner header without solid color */
    padding-bottom: 0;
  }
  
  .modal-title {
    font-weight: bold;
    font-size: 2rem; /* Larger and bolder title */
    margin: 0 auto; /* Center the title */
  }

  .modal-body {
    font-family: 'Open Sans', sans-serif; /* Modern font */
    padding: 2rem;
  }

  .pricing-option {
    text-align: center;
    max-width: 300px;
  }

  .pricing-icon {
    font-size: 3rem; /* Adjust the font size for larger icons */
    margin-bottom: 1rem;
    color: #007bff; /* Bootstrap primary color, or choose your own */
  }

  .modal-body .pricing-option p {
    margin-top: 0.5rem; /* Reduce top margin */
    margin-bottom: 0.5rem; /* Reduce bottom margin */
    line-height: 1.2; /* Adjust line height to tighten up text */
  }
  
  
  .vertical-divider {
    self-align: stretch;
    width: 2px;
    background: #dee2e6; /* Subtle divider color */
    margin: 0 20px;
  }

  h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  p {
    font-size: 1.1rem;
  }
  
  .close {
    font-size: 1.5rem; /* Larger close button */
  }

  .modal-footer {
    border-top: none; /* Cleaner footer */
  }

  .btn-close-custom span {
    color: #fff; /* Adjust the color to match your design */
  }

  .btn-close-custom:hover,
  .btn-close-custom:focus {
    color: #000; /* Color when hovered or focused */
    transform: rotate(90deg); /* Rotates the close icon for a dynamic effect */
  }

  .dropdown-container {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  .dropdown-info-icon {
    position: absolute;
    right: 39px;
    top: 48%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 16px;
    cursor: pointer;
  }
  
  /* Adjust the padding inside the select to make room for the icon */
  #pricingOptions {
    padding-right: 50px; /* Adjust the value based on the size of your icon */
  }