.spinner {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: transparent;
border-radius: 5px;
padding: 20px;
}

.spinner img {
display: block;
margin: 0 auto;
}

.loading-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
.tp-bg-darkblue{
background-color: #025081;
}


.btn-touch {
background-color: #025081;
/* Touch color */
border-color: #025081;
color: #fff; /* Ensure text is white for visibility */
font-weight: bold; /* Make the font bold */
/* font-size: 1.1rem;  */
transition: background-color 0.3s ease, border-color 0.3s ease;
border-radius: 10px;
padding: 10px 20px;
}

.btn-touch:hover {
background-color: #9eb902;
border-color: #9eb902;
color: #fff;
}

.btn-pay {
background-color: #9eb902;
/* Pay color */
border-color: #9eb902;
color: #fff; /* Ensure text is white for visibility */
font-weight: bold;
/* font-size: 1.1rem; */
transition: background-color 0.3s ease, border-color 0.3s ease;
border-radius: 10px;
padding: 10px 20px;
}

.btn-pay:hover {
background-color: #025081;
border-color: #025081;
color: #fff;
}
.text-touch {
color: #025081;
font-weight: bold;
}
.text-pay {
color: #9eb902;
font-weight: bold;
}

.dont-have-account-link {
    font-size: 1.15rem;
    color: #025081; /* Brand color for Touch */
    font-weight: bold;
    padding: 8px 12px; /* Adds some clickable padding */
    border: 2px solid transparent; /* Border for hover effect */
    border-radius: 5px; /* Smooth edges */
    transition: all 0.3s ease-in-out; /* Smooth transition */
    text-decoration: none; /* Removes underline */
}

.dont-have-account-link:hover {
    background-color: #9eb902; /* Brand color for Pay */
    color: white; /* White text on hover */
    border-color: #9eb902; /* Border changes to brand color */
    text-decoration: none; /* No underline */
}



 /* Floating Contact Button */
 .floating-contact {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.contact-btn {
    background-color: #9eb902;
    color: white;
    padding: 15px 20px;
    font-size: 16px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.contact-btn i {
    margin-right: 10px;
    color: #fff;
}

.contact-btn:hover {
    background-color: #025081;
}

/* Contact Us Modal */
/* Modal Styles */
.contact-modal {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Modal overlay */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.modal-contact {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 70%;
    max-width: 900px;
    max-height: 90%; /* Limit modal height to 90% of the viewport */
    overflow-y: auto; /* Add vertical scroll if content exceeds modal height */
    display: flex;
    flex-direction: column;
}

.close-btn {
    font-size: 24px;
    cursor: pointer;
    align-self: flex-end;
}

.modal-contact-body {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

/* Contact Information (Left Side) */
.contact-info {
    flex: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.contact-info p {
    margin-bottom: 10px;
}

.contact-info strong {
    color: #025081;
}

/* Contact Form (Right Side) */
.contact-form {
    flex: 1;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form .form-control {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Modal Responsiveness */
@media (max-width: 768px) {
    .modal-contact-body {
        flex-direction: column;
    }
}

.contact-info {
    margin-bottom: 20px;
    text-align: left;
}

.contact-info p {
    margin: 5px 0;
    font-size: 14px;
}

.contact-info strong {
    color: #025081; /* Adjust this to your brand's color */
}


    /* toggle wados active disable css */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px !important;;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(20px);
}




/* // color touch and pay  */
.bg-touch {
    background-color: #025081 !important;
}
.bg-pay {
    background-color: #9eb902 !important;
}

.