body {
	background-color: #eceaf1;
}
.blue-card p{
margin-top: 0;
margin-bottom: 0;
}

.form-section {
padding: 10px 0;
}
.form-header h2 {
font-size: 2.5rem;
color: #352754;
}
#letsBeginText h2{
font-size: calc(1.325rem + .9vw);
}
.form-header p {
color: #352754;
font-size: 1rem;
margin-top: 10px;
}
.form-group label {
color: #352754;
}
.tooltip-text {
font-size: 0.875rem;
color: #ffffff;
background-color: #352754;
padding: 2px 8px;
border-radius: 4px;
display: inline-block;
}

.form-box {
max-width: 100%;
}
.additional-text p {
font-size: 1rem;
color: #352754;
margin: 8px 0;
}
.additional-text a {
text-decoration: none;
color: #352754;
font-weight: bold;
}
.additional-text a:hover {
text-decoration: underline;
color: #2a9d8f;
}
.hidden-content {
display: none;
}

.form-box {
max-width: 500px;
margin: 0 auto;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}

.form-label {
font-weight: bold;
color: #495057;
font-size: 1rem;
margin-bottom: 5px;
}
.form-control {
border-radius: 8px;
padding: 10px;
font-size: 1rem;
}
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.btn-primary {
background-color: #007bff;
border: none;
padding: 12px;
font-size: 1rem;
font-weight: bold;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.nextbtn {
background-color: #352754;
color: white;
}
.nextbtn:hover {
background-color: #191325;
color: white;
}
.prevbtn {
background-color: #352754;
color: white;
}
.prevbtn:hover {
background-color: #191325;
color: white;
}
.error-message {
color: red;
font-size: 0.875rem;
margin-top: 5px;
display: none; /* Initially hidden */
}



.dropdown-menu {
max-height: 200px;
overflow-y: auto;
}

#addressDiv {
display: none;
margin-top: 10px;
font-weight: bold;
color: #352754;
}

.sendbutton {
background-color: #352754;
color: white;
}
.sendbutton:hover {
background-color: #191325;
color: white;
}
.option-card {
border: 2px solid #352754;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
background-color: #f8f9fa;
padding: 15px;
}
.option-card p {
font-size: 1rem;
font-weight: bold;
margin: 0;
}

/* Selected State */
.option-card.selected {
background-color: #352754;
color: #ffffff;
}
.geb{
padding-top: 40px;
}
.modal-dialog-centered {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh; /* Aligns it in the center vertically */
}
.drop-area {
border: 2px dashed #007bff;
border-radius: 5px;
padding: 20px;
text-align: center;
color: #007bff;
cursor: pointer;
transition: background-color 0.3s ease;
}

.drop-area.dragover {
background-color: #e9f7ff;
}

.file-list {
margin-top: 15px;
font-size: 0.9rem;
}

.file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
}

.file-item span {
flex: 1;
}

.file-item button {
border: none;
background: transparent;
color: #dc3545;
cursor: pointer;
}
.containerr {
max-width: 900px;
margin: 0 auto;
color: #31264B;
padding: 20px;
}

.instructions h2 {
font-size: 1.5rem;
margin-bottom: 10px;
}

.instructions ul {
list-style-type: none;
margin-left: 20px;
margin-bottom: 20px;
}

.process h3 {
font-size: 2rem;
margin-bottom: 10px;
}

.process .step {
color: #25aa6a;
font-weight: bold;
font-size: 1.8rem;
}
.details {
font-size: 1.1rem; 
font-weight: bold; 
}
.process-container {
display: flex;
align-items: flex-start; /* Aligns items at the top */
gap: 80px; /* Adds space between the text and image */
justify-content: space-between;
}
.process-image img {
max-width: 90%; /* Ensures the image scales within its container */
height: auto;
border-radius: 8px; /* Optional: rounds the image corners */
}


/* Paragraph styling */
.description-container .description {
margin-bottom: 15px;
color: #4a4a4a; /* Slightly lighter color for description */
}

/* Disclaimer text styling */
.description-container .disclaimer {
font-size: 0.85rem;
color: #666;
margin-top: 15px;
}

.description-container .disclaimer a {
color: #57c2d8; /* Link color */
text-decoration: none;
}

.description-container .disclaimer a:hover {
text-decoration: underline;
}
.cta {
margin-top: 20px;
}
.cta {
text-align: center; /* Center the button within this container */
margin-top: 20px;
}
.cta button {
background-color: #129171; /* Green color for button */
color: white;
border: none;
padding: 10px 30px;
font-size: 1rem;
cursor: pointer;
border-radius: 25px; /* Rounded button */
transition: background-color 0.3s ease;
}

.cta button:hover {
background-color: #45a8bb; /* Darker shade on hover */
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed #007bff;
width: 450px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.card_body {
background-color: white;
}

.file-upload {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}

.header img {
width: 50px;
position: absolute;
right: 20px;
}

.header h2 {
font-size: 24px;
margin: 0;
margin-top: 20px;
text-align: center;
}

.header p {
font-size: 16px;
color: #666;
display: flex;
justify-content: center;
}

.upload-instructions p {
margin: 5px 0;
font-size: 18px;
font-weight: bold;
}

.upload-area {
margin-top: 10px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
transition: background-color 0.3s, border-color 0.3s;
}

.upload-area.dragging {
background-color: #e0e0e0;
border-color: #0056b3;
}

.file-input {
display: none;
}

.upload-button {
display: flex;
justify-content: center;
align-items: center;
background-color: #47494b;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-transform: uppercase;
}

.upload-button img {
width: 15px;
margin-right: 10px;
}

.file-name {
margin-top: 10px;
font-size: 14px;
color: #666;
margin-bottom: 0.5rem;
text-align: center;

}

.file-upload:hover {
background-color: #dbedff;
}

.icondrag img {
width: 90px;
}

.maindrag {
display: flex;
gap: 2;
align-items: center;
justify-content: center;
}

.text-muted {
padding-top: 30px;
}

.text-muted span {
font-weight: 700;
color: black;
}

.pro-tip {
font-weight: 700;
font-size: 10px;
text-align: center;
}

.icon {
width: 250px;
}
.modal-content {
color: black; 
}
.uploaded-files-container {
margin-top: 10px;
font-size: 0.9rem;
color: #333;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 5px;
margin: 20px 20px;
}
.remove-file-button {
background: none;
border: none;
color: #ff0000;
font-size: 1.2rem;
cursor: pointer;
}
.custom-section {
width: 100vm;
overflow: hidden; 
padding: 0; 
margin: 0;
}

.custom-section img.section-image {
width: 99.9%; 
height: auto; 
display: block; 
}

/* footer */

.footer {
background-color: #31264B;
color: #FFFFFF;
padding: 40px 0;
}

.footer a {
color: #FFFFFF;
text-decoration: none;
}

.footer a:hover {
color: #69CCA2;
}

.footer-title {
font-weight: bold;
margin-bottom: 15px;
}

.footer-bottom {
border-top: 1px solid #4A3A6B;
padding-top: 20px;
margin-top: 20px;
font-size: 0.9rem;
color: #B0AEB8;
}

.trustpilot-logo, .social-icons {
display: flex;
align-items: center;
gap: 10px;
}

.social-icons a {
color: #FFFFFF;
font-size: 1.2rem;
}

/* Floating Chat Button */
.chat-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #31264B;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
z-index: 1000;
}

.chat-button:hover {
background-color: #554a6e;
}

/* Chat Box */
.chat-box {
position: fixed;
bottom: 90px;
right: 20px;
width: 300px;
max-height: 400px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
display: none;
flex-direction: column;
z-index: 1000;
}

.chat-box-header {
background-color: #31264B;
color: #fff;
padding: 10px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}

.chat-box-body {
padding: 10px;
flex-grow: 1;
overflow-y: auto;
font-size: 0.9rem;
color: #31264B;
}

.chat-box-footer {
padding: 10px;
background-color: #f0f0f0;
display: flex;
align-items: center;
}

.chat-input {
flex-grow: 1;
border: none;
padding: 8px;
border-radius: 5px;
font-size: 0.9rem;
outline: none;
}
#upload{
color: #5d4a8a;
border: 2px solid #5d4a8a;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
border-radius: 2px;
margin-right: 30px;
}
#upload:hover{
background-color:#150835 ;
color: white;
}
#noBill{
/* background-color: #5d4a8a; */
color: #5d4a8a; /* Pink color */
border: 2px solid #5d4a8a;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
border-radius: 2px;
}
#noBill:hover{
background-color: #150835;
color: white;
}
.button-container{
margin-top: 50px;

}
.password-rule {
font-size: 0.9rem;
color: #dc3545; /* Red for unsatisfied rules */
}

.password-rule.valid {
color: #28a745; /* Green for satisfied rules */
}
/* Updated styles for buttons-container */
.buttons-container {
    position: sticky; /* Makes the element sticky */
    bottom: 0; /* Keeps it at the bottom of the viewport */
    z-index: 100; /* Ensures it's above other content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #eceaf1; /* Background color to make it visible */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
}
.buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buttons-container #nextButton {
    margin-left: auto; /* Keep the Next button aligned to the right */
}


.buttons-container.hidden {
    transform: translateY(100%); /* Slide down when hidden */
    opacity: 0; /* Fade out when hidden */
}


/* Buttons styling */
.buttons-container button {
    margin: 0 10px;
    padding: 10px 30px;
    font-size: 1rem;
    border-radius: 15px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#backButton {
    background-color: #f8f9fa;
    border: 2px solid #007bff;
    color: #007bff;
}

#backButton:hover {
    background-color: #007bff;
    color: #ffffff;
}

#nextButton {
    background-color: #007bff;
    border: none;
    color: #ffffff;
}

#nextButton:hover {
    background-color: #0056b3;
    color: #ffffff;
}
/* Style for blue cards */
/* Blue card styles */
.blue-card {
background-color:#5a4e86;
color: #FFFFFF;
padding: 20px;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
text-align: center;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
word-wrap: break-word;
border: 2px solid transparent; /* Border for visual feedback */
}

.blue-card i {
margin-bottom: 8px;
}

.blue-card:hover {
transform: scale(1.05);
background-color: #5a4e86;
}

/* Selected state styles */
.blue-card.selected {
    background-color: #31264B;
    border: 6px solid #69CCA2; /* Highlight the selected card */
}

/* Responsive fixes for smaller screens */
@media (max-width: 768px) {
.blue-card p {
font-size: 0.9rem;
margin: 0;
word-wrap: break-word;
}

.blue-card {
padding: 15px;
}
}

@media (max-width: 576px) {
.blue-card {
font-size: 0.85rem;
}

.blue-card i {
font-size: 1.2rem;
}
}

.upload-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.upload-box {
border: 2px dashed #555;
border-radius: 12px;
padding: 40px;
background-color: #e6e5f5;
width: 850px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}

.upload-box:hover {
background-color: #d1cffe;
border-color: #333;
}

.upload-content p {
margin: 5px 0;
font-size: 16px;
color: #333;
}

.upload-icon {
width: 50px;
height: 50px;
margin-top: 10px;
display:inline;
}

.upload-box.dragover {
background-color: #c0bfff;
border-color: #007bff;
}
.uploaded-files-container {
margin-top: 15px;
font-size: 0.9rem;
color: #333;
max-width: 100%;
}

.file-list {
margin-top: 10px;
list-style: none;
padding: 0;
max-width: 100%;
}

.file-list .file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 5px;
font-size: 0.9rem;
}

.file-list .file-item button {
background: none;
border: none;
color: #dc3545;
font-size: 1rem;
cursor: pointer;
font-weight: bold;
}
.no-bill-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px; /* Adjust spacing as needed */
}

.no-bill-button {
background-color: transparent; /* Transparent background */
border: 2px solid black; /* Black border */
border-radius: 8px; /* Rounded corners */
font-size: 1rem; /* Adjust font size */
font-weight: 400; /* Normal font weight */
color: black; /* Text color */
padding: 10px 20px; /* Adjust padding */
cursor: pointer; /* Change cursor on hover */
transition: all 0.3s ease; /* Smooth hover transition */
}

.no-bill-button:hover {
background-color: #f0f0f0; /* Light gray background on hover */
color: black; /* Keep text color black */
}
.terms a{
color:#31264B
}



@media (max-width: 768px) {
.features-container {flex-direction: column;}
.features {flex: 1 1 100%; margin-top: 20px;}
.container1 {width: 450px;}
}
@media (max-width: 500px) {

.container1 {width: 430px;}
}
@media (max-width: 488px) {

.container1 {width: 410px;}
}
@media (max-width: 467px) {

.container1 {width: 380px;}
}
@media (max-width: 440px) {
#upload{
padding-top: 10px;
padding-bottom: 10px;
}
.container1 {width: 350px;}
}
@media (max-width: 407px) {

.container1 {width: 320px;}
}
@media (max-width: 377px) {

.container1 {width: 300px;}
}
@media (max-width: 347px) {

.container1 {width: 280px;}
}