:root {
    --primary-clr: #4d88ff;
    --btn-hover-clr: #6ebef7;
    --lightclr-text: #8f96a3;
    --light-text-clr: #6b7280;
    /* --shadow-glow: 0 0 15px rgba(0, 212, 255, 0.3); */
    --card-bg: #1a1a1a;
    --bg: #0f0f0f;
    --input-bg-dark: #0b0e13;
    --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #0b0e13;
    color: #e0e0e0;
    font-family: "Inter", sans-serif;
}

a {
    text-decoration: none !important;
}

a:hover {
    color: inherit;
}

.header {
    background-color: #0f131a80;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.header .brand {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e0e0e0;
}

.header .brand .highlight {
    color: var(--primary-clr);
}

.section {
    padding: 5rem 0;
}

.section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #e0e0e0;
    margin-bottom: 3rem;
}

.section p {
    font-size: 1.125rem;
    color: #a0a0a0;
    margin-bottom: 3rem;
}

.section p a {
    color: var(--primary-clr);
    font-weight: 600;
    text-decoration: none;
}

.section p a:hover {
    color: var(--primary-clr);
}

.card {
    background-color: #0f131acc;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
    min-height: 215px;
    cursor: pointer;
}

/* .card:hover {
    background-color: rgba(42, 42, 42, 0.8);
} */

.card .icon-container {
    width: 80px;
    height: 80px;
    /* background-color: var(--primary-clr); */
    background-color: #03a5eb;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    transition: opacity 0.3s;
}
.help-section a{
    color: #03a5eb !important;
}

.services-contain {
    gap: 30px 0;
}

.card:hover .icon-container {
    opacity: 0.6;
}

.card .icon-container img {
    /* filter: brightness(0) invert(1); */
    max-width: 100%;
    max-height: 100%;
    /* object-fit: contain; */
}

.card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 0.5rem;
}

.card p {
    font-size: 0.875rem;
    color: #a0a0a0;
    line-height: 1.2;
    margin-bottom: 0;
}

.btn-custom {
    font-size: 1.125rem;
    font-weight: 500;
    padding: 1.5rem 2rem;
    padding: 1rem 1.5rem;
    border: 2px solid var(--primary-clr);
    border-radius: 999px;
    /* background-color: #1a1a1a; */
    color: var(--primary-clr);
    transition: all 0.3s;
}

.btn-custom:hover {
    background-color: var(--primary-clr);
    color: #fff;
}

.btn-custom svg {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

/*Battery Service Start*/
.towpilot-header {
    background-color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

.logo {
    height: 2rem;
}

.vehicle-settings h1 {
    font-size: 38px;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.vehicle-settings p {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.btn-new-primary {
    /* padding: 1.5rem 2rem; */
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    border-radius: 9999px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--primary-clr);
    border: none;
    transition: background-color 0.3s ease;
    color: white;
}

.btn-new-primary:hover {
    background-color: var(--primary-clr);
}

.btn-outline-primary {
    /* padding: 1.5rem 2rem; */
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    border-radius: 9999px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px solid #252b37;
    background-color: transparent;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #6ebef7;
    color: #111827;
    border: none;
}

.divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background-color: #252b37;
}

.divider-text {
    color: #8f96a3;
    font-weight: 500;
}

.btn svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
}

.field-label {
    font-size: 14px;
    font-weight: 500;
    color: #FAFAFA;
}

.form-control {
    font-size: 14px;
    padding: 1rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #252b37;
    background-color: transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: white !important;
}

.form-control:-webkit-autofill {
    background-color: #0f131a !important;
    -webkit-box-shadow: 0 0 0 1000px #0f131a inset !important;
    -webkit-text-fill-color: white !important;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-clr);
    background-color: transparent;
}

.form-control::placeholder {
    color: #6b7280 !important;
}

.btn-new-primary:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn-outline-circle {
    padding: 1.5rem 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid #252b37;
    background-color: transparent;
    color: #FAFAFA;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-circle:hover {
    background-color: var(--btn-hover-clr);
    color: #111827;
}

.location-area {
    display: flex;
}

.manual-area {
    display: flex;
}

#manual-address-area {
    display: none;
}

/*Battery Service End*/
/*Start Confirm Location Page*/
.map-container {
    height: 500px;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: linear-gradient(135deg, #d1fae5, #ecfdf5, #fef3c7);
    position: relative;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.heading-medium {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.large-heading {
    font-size: 38px;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.gray-text {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.small-heading {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

p {
    color: #6b7280;
}

.location-card {
    border-radius: 0.5rem;
    border: 1px solid #252b37;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background-color: transparent;
    /* max-width: 28rem; */
    margin: 0 auto;
}

.location-flex {
    gap: 10px;
}

.current-location p:first-child {
    color: white !important;
}

.current-location p {
    margin-bottom: 0;
}

.location-card svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary-clr);
}

.location-card p {
    font-size: 0.875rem;
}

.location-card p:first-child {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

/*End Confirm Location Page*/
/*Start Information Page*/
.header-title {
    color: white;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0;
}

.back-btn {
    padding: 0.3rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    background: transparent;
    border: none;
    line-height: 1;
    cursor: pointer;
}

/* .back-btn:hover {
    background-color: var(--btn-hover-clr);
} */

.back-btn:hover svg {
    background-color: var(--btn-hover-clr);
    border-radius: 10px;
}

.back-btn svg {
    width: 1.45rem;
    height: 1.3rem;
    color: #6b7280;
}

.progress-indicator {
    background-color: var(--primary-clr);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.progress-indicator svg {
    width: 1rem;
    height: 1rem;
}

.phone-input-container {
    position: relative;
}

.phone-prefix {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-right: 1px solid #e2e8f0;
    padding-right: 0.75rem;
    color: #6b7280;
}

.phone-input {
    padding-left: 5rem;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--primary-clr);
    border-color: #2563eb;
}

.custom-checkbox .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.custom-checkbox .custom-control-label::before {
    border-radius: 1rem;
    border: 1px solid var(--primary-clr);
}

.custom-control-label::before {
    background-color: inherit !important;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-color: var(--primary-clr);
    border-radius: 50%;
}

.custom-checkbox .custom-control-label::after {
    background-size: 0.6rem 0.6rem;
}

.sms-consent-text {
    font-size: 0.875rem;
    color: #8F96A3;
    line-height: 1.5;
    cursor: pointer;
}

.sms-consent-text a {
    color: var(--primary-clr);
    text-decoration: none;
}

.sms-consent-text a:hover {
    text-decoration: underline;
}

.sms-consent-text span {
    color: var(--primary-clr);
}

.not-rounded {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 0.75rem;
}

.white-btn {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 0.75rem;
    background-color: white;
    font-size: 1.125rem;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: none;
    transition: background-color 0.3s ease;
}

.bg-clr-input {
    background-color: #0f131a !important;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select {
    height: 3.5rem;
    font-size: 14px;
    border-radius: 0.75rem;
    border: 1px solid #2d3748;
    background-color: #0f131a;
    color: #e2e8f0;
    padding: 1rem 2rem 1rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    background-image: none;
}

.custom-select:focus {
    outline: none;
    border-color: var(--primary-clr);
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.3);
}

.custom-select-wrapper svg {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    color: #a0aec0;
    transition: transform 0.3s ease;
}

/* .custom-select-wrapper.open svg {
    transform: translateY(-50%) rotate(180deg);
} */

/* Custom dropdown styling using a pseudo-element (limited by browser support) */
.custom-select-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 0.5rem;
    background-color: #2d3748;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    animation: slideDown 2s ease-out;
}

.custom-select-wrapper.open::after {
    display: block;
}

/* Style the options (approximation since direct option styling is limited) */
.custom-select option {
    background-color: #0f131a;
    color: #e2e8f0;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #0f131a;
}

.custom-select option:hover,
.custom-select option:checked {
    background-color: var(--primary-clr);
    color: #ffffff;
}

.custom-select option:last-child {
    border-bottom: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.clr-with-border {
    color: var(--primary-clr);
    border-color: var(--primary-clr);
}

.vehicle-info {
    display: flex;
}

.question-label {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: transparent;
    border-color: var(--primary-clr);
}

.custom-radio .custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
    border: 1px solid var(--primary-clr);
    width: 1rem;
    height: 1rem;
    background-color: transparent;
}

.radio-gap {
    gap: 1.5rem;
}

.custom-radio .custom-control-label::after {
    background-size: 0.5rem 0.5rem;
    top: 7px;
    left: 0.1875rem;
    width: 0.625rem;
    height: 0.625rem;
    background-image: none !important;
    border-radius: 50%;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background: var(--primary-clr);
    /* box-shadow: inset 0 0 0 1.5px #fff; */
}

.custom-radio .custom-control-label {
    font-size: 0.875rem;
    color: white;
    cursor: pointer;
}

.notes-button {
    width: 100%;
    padding: 1rem;
    border: 1px solid #2d3748;
    border-radius: 0.75rem;
    background-color: #0f131a;
    font-weight: 500;
    color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.notes-button:hover {
    background-color: var(--btn-hover-clr) !important;
}

.notes-button svg {
    width: 1.25rem;
    height: 1.25rem;
}

.notes-content {
    display: none;
    margin-top: 0.5rem;
}

.notes-button[aria-expanded="true"]+.notes-content {
    display: block;
}

.notes-button:focus {
    border: 1px solid var(--primary-clr) !important;
    outline: none !important;
}

.battery-info {
    display: flex;
}

/* .disabled{
    opacity: 0.5;
    pointer-events: none;   
} */
.disabled-btn {
    opacity: 0.5;
    pointer-events: none;
}

.text-muted-foreground {
    color: #6b7280;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.edit-button {
    padding: 0.25rem;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    outline: none !important;
    line-height: 1;
}

.edit-button:hover {
    background-color: var(--btn-hover-clr);
}

.edit-button svg {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
}

.header-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--primary-clr);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.header-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.text-2xl {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.text-muted-foreground {
    color: #6b7280;
    font-size: 0.875rem;
}

.text-sm {
    font-size: 0.875rem;
}

.authorization-box {
    border: 2px dashed rgba(37, 99, 235, 0.4);
    border-radius: 1rem;
    padding: 0.8rem 1rem;
    background-color: rgba(37, 99, 235, 0.05);
    text-align: center;
}

.cost-text {
    color: var(--primary-clr);
}

.text-3xl {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--primary-clr);
}

.text-lg {
    font-size: 1.125rem;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.custom-input {
    width: 100%;
    height: 3rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    background-color: rgba(209, 213, 219, 0.3);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: #1f2937;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-input:focus {
    outline: none;
    border-color: var(--primary-clr);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.custom-input::placeholder {
    color: #6b7280;
}

.custom-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.payment-fields {
    color: var(--lightclr-text);
}

.custom-payment-box .custom-control-label::before {
    margin-top: 8px;
}

.custom-payment-box .custom-control-label::after {
    margin-top: 8px;
}

.custom-payment-box a {
    color: white;
}

.edit-section {
    display: none;
    margin-top: 0.5rem;
}

.edit-section.active {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-input {
    flex: 1;
    /* padding: 0.25rem; */
    /* border: 1px solid #d1d5db; */
    /* border-radius: 0.375rem; */
}

.edit-select {
    /* flex: 1;
    padding: 0.25rem;
    border: 1px solid #d1d5db; */
    /* border-radius: 0.375rem; */
}

.confirm-button,
.cancel-button {
    padding: 0.25rem;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.confirm-button:focus,
.cancel-button:focus {
    outline: none !important;

}

.confirm-button:hover {
    background-color: var(--btn-hover-clr);
}

.cancel-button:hover {
    background-color: var(--btn-hover-clr);
}

.confirm-button svg {
    color: #10b981;
    height: 16px;
    width: 16px;
}

.cancel-button svg {
    color: #ef4444;
    height: 16px;
    width: 16px;
}

.space-y-4>* {
    margin-bottom: 1rem;
}

.space-y-6>* {
    margin-bottom: 1.5rem;
}

.btn-secondary {
    color: #1f2937;
}

.btn-secondary:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}

.tire-card {
    border-radius: 1rem;
    border: 1px solid #252b37;
    padding: 1rem 2rem;
    background-color: #0f131a;
}

.affected-tire {
    font-size: 18px;
    color: white;
}

.car-diagram {
    position: relative;
    width: 16rem;
    height: 24rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-diagram svg {
    width: 100%;
    height: 100%;
}

.car-body {
    fill: #11161d;
    /* stroke: rgba(31, 41, 55, 0.3); */
    stroke: #3e4147;
    stroke-width: 3;
}

.car-window {
    fill: #0b0e13;
    stroke: #252b37;
    stroke-width: 2;
}

.car-detail {
    fill: rgba(37, 99, 235, 0.4);
}

.tire-button {
    position: absolute;
    width: 3rem;
    height: 4rem;
    border-radius: 0.75rem;
    border: 1px solid #252b37;
    background-color: #0f131a !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease;
    cursor: pointer;
}

/* .tire-button:focus {
    background-color: var(--primary-clr) !important;
    outline: 2px solid var(--primary-clr) !important;
}
.tire-button:focus .tire-indicator {
    background-color: var(--primary-clr) !important;
} */
.tire-button.selected {
    background-color: var(--primary-clr) !important;
    outline: 2px solid var(--primary-clr) !important;
}

.tire-button.selected .tire-indicator {
    background-color: var(--primary-clr) !important;
}

.tire-button:hover {
    border-color: #2563eb;
}

.tire-button .tire-indicator {
    width: 2rem;
    height: 3rem;
    background-color: #3e4147;
    /* opacity: 0.2; */
    border-radius: 0.25rem;
}

.tire-label {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
}

.driver-front {
    left: 0.5rem;
    top: 4rem;
}

.passenger-front {
    right: 0.5rem;
    top: 4rem;
}

.driver-rear {
    left: 0.5rem;
    bottom: 4rem;
}

.passenger-rear {
    right: 0.5rem;
    bottom: 4rem;
}

.driver-front-label {
    left: -4rem;
    top: 5rem;
}

.passenger-front-label {
    right: -5rem;
    top: 5rem;
}

.driver-rear-label {
    left: -4rem;
    bottom: 5rem;
}

.passenger-rear-label {
    right: -5rem;
    bottom: 5rem;
}

.drop-location-card {
    border-radius: 0.75rem;
    border: 1px solid #252b37;
    background-color: #0f131a !important;
    padding: 1rem;
    cursor: pointer;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.drop-location-card.active {
    border: 2px solid var(--primary-clr);
}

.drop-location-card.active .icon-circle {
    background-color: var(--primary-clr);
}

.drop-location-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #0f131a;
}

.icon-circle {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: var(--btn-hover-clr);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.location-flex {
    gap: 15px;
}

.location-name svg {
    height: 13px;
    width: 13px;
}

.circle-container {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--primary-clr);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.drop-location-card .circle-container {
    display: none;
}

.drop-location-card.active .circle-container {
    display: flex;
}

.inner-circle {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #ffffff;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
}

.dropoff-input {
    padding-left: 2.5rem;
}

/*End Information Page*/
/*Start Dispatch Funnel*/
.auto-btn {
    width: fit-content;
    margin: 0 auto 3rem auto;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.logo-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-clr);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: white;
}

.logo-text .highlight {
    color: var(--primary-clr);
}

.truck-icon {
    width: 20px;
    height: 20px;
    color: #fff;
}

.iti__country-list {
    background-color: #0b0e13 !important;
}

.dispatch-tire-card {
    border-radius: 1rem;
    border: 1px solid #2d3748;
    padding: 1.5rem 2rem;
    background-color: #0f131a;
}

.dispatch-tire-card .vehicle-diagram {
    position: relative;
    width: 11rem;
    height: 16rem;
    border: 4px solid rgba(37, 99, 235, 0.3);
    border-radius: 1.5rem;
    /* background-color: #ffffff; */
    margin: 0 auto;
}

.dispatch-tire-card .vehicle-inner {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    border: 2px solid rgba(37, 99, 235, 0.2);
    border-radius: 1rem;
    /* background-color: #ffffff; */
}

.dispatch-tire-card .vehicle-top,
.dispatch-tire-card .vehicle-bottom {
    position: absolute;
    left: 1rem;
    right: 1rem;
    border: 2px solid rgba(37, 99, 235, 0.15);
    border-radius: 0.5rem;
    background-color: rgba(37, 99, 235, 0.05);
}

.dispatch-tire-card .vehicle-top {
    top: 1rem;
    height: 3rem;
}

.dispatch-tire-card .vehicle-bottom {
    bottom: 1rem;
    height: 2rem;
}

.dispatch-tire-card .tire-button {
    position: absolute;
    width: 4rem;
    height: 5rem;
    border-radius: 0.5rem;
    border: 3px solid rgba(107, 114, 128, 0.3);
    background-color: rgba(209, 213, 219, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dispatch-tire-card .tire-button:hover {
    border-color: rgba(37, 99, 235, 0.5);
    background-color: rgba(37, 99, 235, 0.1);
}

.dispatch-tire-card .tire-circle {
    width: 3rem;
    height: 3rem;
    border: 2px solid rgba(107, 114, 128, 0.4);
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.dispatch-tire-card .tire-label {
    position: absolute;
    font-size: 0.625rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.dispatch-tire-card .driver-front {
    left: -1.5rem;
    top: 1.5rem;
}

.dispatch-tire-card .passenger-front {
    right: -2rem;
    top: 2rem;
}

.dispatch-tire-card .driver-rear {
    left: -2rem;
    bottom: 2rem;
}

.dispatch-tire-card .passenger-rear {
    right: -2rem;
    bottom: 2rem;
}

.dispatch-tire-card .driver-front-label {
    left: -5rem;
    top: 22%;
    transform: translateY(-50%);
}

.dispatch-tire-card .passenger-front-label {
    right: -6rem;
    top: 22%;
    transform: translateY(-50%);
}

.dispatch-tire-card .driver-rear-label {
    left: -5rem;
    top: 70%;
    transform: translateY(-50%);
}

.dispatch-tire-card .passenger-rear-label {
    right: -6rem;
    top: 70%;
    transform: translateY(-50%);
}

.back-btn-home {
    border: 1px solid var(--primary-clr);
    border-radius: 0.75rem;
    padding: 0.4rem 0.75rem;
}

.payment-icon {
    width: 4rem;
    height: 4rem;
    background-color: #4d88ff1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.payment-icon svg {
    color: var(--primary-clr);
}

.white-label {
    color: white;
}

.notice-container {
    display: flex;
    /* align-items: baseline; */
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(209, 213, 219, 0.5);
    border-radius: 0.75rem;
}

.notice-container p {
    margin: 0;
}

.icon svg {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
    flex-shrink: 0;
    margin-top: 3px;
}

.payment-card {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    padding: 1rem;
}

.bg-border {
    height: 1px;
    background-color: #334155;
}

/* .btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    height: 2.5rem;
    color: #94a3b8;
    background-color: transparent;
    border: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.btn-custom:hover {
    color: #f1f5f9;
    background-color: #334155;
}

.btn-custom:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6;
} */

.btn-custom:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.btn-custom svg {
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.hidden {
    display: none !important;
}

/*End Dispatch Funnel*/
/*New Steps Registration Start*/
.back-btn-steps {
    padding: 0.3rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
    background: transparent;
    border: none;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-apply {
    background-color: #0b0e13;
    color: gray;
    font-weight: 600;
    font-size: 14px;
    padding: 0.5rem 2rem;
    border-radius: 0.75rem;
    border: 1px solid #252b37;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.invalid-feedback {
    color: white !important;
}

.dark-password-group input {
    border-right: 0;
}

.dark-password-group button {
    border-radius: 0.75rem;
    border: 1px solid #252b37;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.back-btn-steps svg {
    width: 1.45rem;
    height: 1.3rem;
    color: #6b7280;
}

.back-btn-steps:hover {
    background-color: var(--btn-hover-clr);
    color: white;
}

.back-btn-steps:hover svg {
    color: white;
}

.text-gradient {
    background: linear-gradient(to right, #1085e5, #0f53b3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline;
}

.glass-card {
    /* background: var(--card-bg);
      border: 1px solid rgba(0, 212, 255, 0.2); */
    border-radius: 12px;
    box-shadow: 0 4px 20px -4px hsl(var(--primary-clr) / .1);
    border: 1px solid hsl(var(--primary-clr) / .3);
    /* backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px); */
}

/* Stepper Start*/
.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.step.active .step-circle {
    background: var(--primary-clr);
    color: white;
}

.step.completed .step-circle {
    background: var(--primary-clr);
    color: white;
}

.step.inactive .step-circle {
    background: #181d25;
    color: #aaa;
}

.step-line {
    width: 48px;
    height: 2px;
}

.step-line.active {
    background: var(--primary-clr);
}

.step-line.inactive {
    background: #444;
}

/* Stepper End*/
/* Service Toggle Buttons */
.service-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

.service-btn.we-offer {
    background: #0b0e13;
    border-radius: 10px;
    border: 1px solid #252b37;
    color: var(--text);
}

.service-btn.we-offer:hover {
    border-color: var(--primary-clr);
    background: rgba(0, 212, 255, 0.05);
}

.service-btn.dont-offer {
    background: #333;
    border: 1px solid var(--border);
    color: #aaa;
}

.service-card {
    transition: border 0.2s;
}

.service-card:hover {
    border-color: #555 !important;
}

/* Upload Box */
.upload-box {
    border: 2px dashed #444;
    border-radius: 8px;
    background: rgba(50, 50, 50, 0.3);
    padding: 1rem;
    gap: 10px;
}

.upload-box p {
    margin-bottom: 0;
    color: white;
}

.dispatch-submit {
    display: flex;
    justify-content: end;
}

.dispatch-submit button {
    width: max-content;
}

.glass-card-area {
    /* background: var(--card-bg);
      border: 1px solid rgba(0, 212, 255, 0.2); */
    border-radius: 12px;
    border: 1px solid #252b37;
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), var(--shadow-glow); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.text-primary {
    color: var(--primary-clr) !important;
}

.light-text {
    color: var(--lightclr-text) !important;
}

.btn-provider {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #0b0e13;
    border: 1px solid #1f242e;
    width: 100%;
    border-radius: 0.75rem;
    justify-content: center;
}

.btn-provider svg {
    color: white !important;
}

.dark-bg-input {
    background-color: var(--input-bg-dark);
    padding: 0.5rem !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Pulsing Mic Circle */
.mic-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
}

.mic-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(136, 136, 136, 0.2);
    filter: blur(12px);
    opacity: 0.7;
    transition: all 0.5s ease;
}

.mic-middle {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, rgba(136, 136, 136, 0.2), rgba(136, 136, 136, 0.05));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.mic-inner {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: 50%;
    /* background: linear-gradient(to bottom right, rgba(136, 136, 136, 0.2), rgba(136, 136, 136, 0.05)); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mic-icon {
    width: 56px;
    height: 56px;
    color: var(--muted);
    transition: transform 0.3s ease;
}

.mic-container:hover .mic-icon {
    transform: scale(1.1);
}

.agent-glass-card {
    background: #0f1319;
    /* border: 1px solid var(--primary-clr); */
    border-radius: 12px;
    /* box-shadow: var(--shadow-xl), var(--shadow-glow); */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.6s ease-out 0.3s both;
    border: 1px solid #4d88ff33;
}

.agent-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgb(17, 23, 34), transparent);
    pointer-events: none;
    z-index: 0;
}

.agent-card-body {
    position: relative;
    z-index: 1;
}

/* Icon Container */
.agent-icon-bg {
    padding: 0.5rem;
    border-radius: 12px;
    background: #4d88ff1a;
    line-height: 1;
}

button {
    cursor: pointer;
}

/* Payment Method Radio Buttons */
.payment-method {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    border: 1px solid #252b37;
}

.payment-method.active {
    border-color: var(--primary-clr);
    background: rgba(0, 212, 255, 0.05);
}

/* .payment-method input[type="radio"] {
      display: none;
    } */

.payment-method input[type="radio"]:checked+.payment-content {
    border-color: var(--primary-clr);
    background: rgba(0, 212, 255, 0.05);
}

.payment-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payment-icon {
    width: 20px;
    height: 20px;
    /* margin-right: 0.75rem; */
}

.payment-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary-clr);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    transition: all 0.3s ease;
}

.payment-radio.checked {
    background: var(--primary-clr);
}

.payment-radio.checked::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.payment-check {
    width: 20px;
    height: 20px;
    color: var(--primary-clr);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.payment-method.active .payment-check {
    opacity: 1;
}

/* Order Summary */
.order-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.order-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 1rem;
}

.strike-through {
    text-decoration: line-through;
}

.waived {
    color: #10b981 !important;
}

/* Terms Box */
.terms-box {
    background: #181d254d;
    border-radius: 8px;
    padding: 1rem;
}

/* Divider */
.divider {
    height: 1px;
    background: #252b37;
    margin: 1rem 0;
}

.card-flex {
    gap: 10px;
}

.terms-list li {
    font-size: 12px;
}

.charge-box {
    background-color: var(--input-bg-dark);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(37, 43, 55);
    border-radius: 0.75rem;
}

.info-check {
    color: white;
}

.register-body {
    background: #0f1319;
    /* border: 1px solid var(--primary-clr); */
    border-radius: 12px;
    /* box-shadow: var(--shadow-xl), var(--shadow-glow); */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.6s ease-out 0.3s both;
    border: 1px solid #4d88ff33;
}

/*New Steps Registration End*/
/*Dark Landing Page Start*/
.long-para {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 20px;
}

.grow-section,
.result-section,
.faq-section {
    background-color: #181d254d !important;
}

.feature-card li {
    font-size: 14px;
}

.icon-with-text {
    gap: 15px;
}

.box-list svg {
    width: 0.8rem;
    height: 0.8rem;
}

.box-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white !important;
}

.custom-card-height {
    height: inherit !important;
}

.gradient-section {
    background: #0f1319;
    border-radius: 1.5rem;
    padding: 2rem;
}

.process-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #121212;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    font-weight: 500;
    white-space: nowrap;
}

.process-step svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--primary-clr);
}

.process-step span {
    font-size: 0.875rem;
}

/* Mobile steps */
.process-step-mobile span {
    font-size: 0.875rem;
}

/* Desktop steps */
.process-step-desktop span {
    font-size: 0.75rem;
}

.step-container-desktop {
    gap: 0.5rem;
}

.step-container-mobile {
    gap: 0.75rem;
}

.line-mobile,
.line-desktop {
    flex-shrink: 0;
    background: #252b37;
}

.line-mobile {
    width: 1px;
    height: 1rem;
}

.line-desktop {
    height: 1px;
    width: 1rem;
}

.pricing-card h3,
.pricing-price {
    text-align: center;
    font-size: 16px;
    margin-bottom: 0 !important;
}

.pricing-price {
    text-align: center;
    font-size: 30px !important;
    margin-bottom: 0 !important;
}

.month-text {
    color: #8F96A3;
    font-size: 14px;
}

.pricing-card li {
    color: white !important;
    font-size: 14px;
}

.pricing-card li span {
    margin-right: 10px;
}

/* .hero-section{
        background-color: #0d1218 !important;
    } */
.demo-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.75rem;
}

.faq-question-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.bullet {
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--primary-clr);
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.feature-text {
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.automation-answers {
    padding: 0 2rem 1rem !important;
}

/*Dark Landing Page End*/
/*Congratulations Page Start*/
/* Header Text */
.phone-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-align: center;
}

/* Phone Number Display */
.phone-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.phone-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--primary-clr);
    letter-spacing: 0.05em;
}

.copy-btn {
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    border: 1px solid var(--border-clr);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-muted);
}

.copy-btn:hover {
    background-color: #6ebef7;
    color: black;
    transform: scale(1.05);
}

/* Action Buttons Row */
.action-buttons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.btn-outline-custom {
    background-color: #0b0e13;
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid #252b37;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    min-height: 3rem;
    flex: 1;
}

.btn-outline-custom:hover {
    background-color: #6ebef7;
    border-color: var(--primary-clr);
    color: black;
    transform: translateY(-2px);
}

.btn-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-secondary-custom {
    background-color: #1f242e;
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    min-height: 3rem;
    flex: 1;
}

.btn-secondary-custom:hover {
    background-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
}

.what-next-section {
    border: 1px solid #252b37;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
    background-color: #181d254d;
}

.next-steps-dark-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.next-steps-dark-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.next-steps-dark-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-dark);
}

.next-steps-dark-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.next-steps-dark-bullet {
    color: var(--primary-clr);
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.next-steps-dark-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #6b7280;
}

/* Subtle glow on hover */
.next-steps-dark-item:hover .next-steps-dark-text strong {
    text-shadow: 0 0 8px rgba(15, 83, 179, 0.4);
}

/* Accordion Container */
.forwarding-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* Accordion Item */
.forwarding-item {
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #252b37;
}

.forwarding-trigger:focus {
    outline: none;
}

.forwarding-trigger:focus {
    border-bottom: none;
    border-radius: 0;
}

/* .forwarding-item:hover {
      border-color: var(--primary-clr);
      box-shadow: 0 0 0 1px var(--primary-clr);
    } */

/* Trigger Button */
.forwarding-trigger {
    width: 100%;
    background: none;
    border: 1px solid #252b37;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-heading-dark);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* .forwarding-trigger:hover {
      color: var(--primary-clr);
    } */

.forwarding-trigger svg {
    width: 1rem;
    height: 1rem;
    color: var(--text-muted-dark);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.forwarding-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
    color: var(--primary-clr);
}

/* Content Panel */
.forwarding-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.25rem;
    /* background-color: rgba(0, 0, 0, 0.2); */
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.forwarding-content ol {
    padding-left: 1rem;
}

.forwarding-content ol li,
.forwarding-content p {
    color: #6b7280 !important;
}

.forwarding-content.open {
    max-height: 500px;
    /* Adjust as needed */
    padding: 1rem 1.25rem;
}

.forwarding-content p,
.forwarding-content ol,
.forwarding-content li {
    font-size: 0.875rem;
    color: var(--text-muted-dark);
    line-height: 1.6;
    margin: 0 0 0.5rem 0;
}

.forwarding-content strong {
    color: var(--text-dark);
}

.forwarding-content code {
    /* background-color: rgba(255, 255, 255, 0.1); */
    padding: 0.125rem 0.375rem;
    font-size: 1rem;
    color: var(--primary-clr);
    font-weight: 600;
}

.accordian-notes {
    background-color: #181d2580;
    border-radius: 0.75rem;
}

.accordian-help {
    border: 1px solid #4d88ff33;
    background: #0f1319;
    border-radius: 0.75rem;
    background-color: #4d88ff0d;
}

.accordian-help p {
    font-size: 16px;
    font-weight: normal;
}

.congratulations-header {
    max-width: 35rem;
    margin: auto;
}

.congratulations-header p {
    font-size: 20px;
}

.congratulations-header h1 {
    font-size: 48px;
}

/* Custom Modal Styling */
.referral-modal .modal-content {
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.referral-modal .modal-header {
    border-bottom: 1px solid var(--border-dark);
    padding: 1rem 1.5rem 0;
}

.referral-modal .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-heading-dark);
}

.referral-modal .modal-body {
    padding: 0.5rem 1.5rem 0;
    font-size: 0.875rem;
    color: var(--text-muted-dark);
    line-height: 1.6;
}

.referral-modal .modal-body strong {
    color: var(--text-heading-dark);
}

.referral-modal .modal-body .highlight {
    color: var(--primary-clr);
    font-weight: 600;
}

.referral-modal .modal-footer {
    border-top: 1px solid var(--border-dark);
    padding: 1rem 1.5rem;
    flex-direction: column;
}

.btn-no {
    background-color: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-dark);
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.5rem;
    margin-top: 0.5rem;
}

.btn-no:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--text-muted-dark);
}

.btn-yes {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-clr));
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 2.5rem;
    box-shadow: 0 2px 6px rgba(15, 83, 179, 0.3);
}

.btn-yes:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(15, 83, 179, 0.4);
}

.referral-modal .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
}

.dark-theme-modal .modal-content {
    border: 1px solid #252b37;
    background-color: #0b0e13;
}

.referral-modal .modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
}

.referral-modal .modal-body {
    font-weight: 400;
    font-size: 16px;
}

.modal-footer-btn {
    padding: 10px 20px;
    font-size: 14px;
    width: max-content;
    border-radius: 0.75rem !important;
    flex: none;
}

/*Congratulations Page End*/
/*Job Details Page Start*/
.wizard-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 25px;
}

.steps-bar {
    position: absolute;
    width: 85%;
    z-index: 7;
    transform: translate(-50%, 85%) !important;
    left: 50%;
    /* background-color: rgba(255, 255, 255, 0.4) !important; */
    /* background-color: #ffffff5c !important; */
    /* -webkit-backdrop-filter: blur(8px) !important; */
    /* backdrop-filter: blur(8px) !important; */
    border-radius: 20px;
}

.steps-bar-step.active1,
.steps-bar-step.active2,
.steps-bar-step.active3,
.steps-bar-step.active4 {
    color: rgba(143, 143, 143, 1);
}

/* .steps-bar-step.active1::after, .steps-bar-step.active2::after, .steps-bar-step.active3::after, .steps-bar-step.active4::after {
    background-color: transparent;
    border-bottom: 1px dashed rgba(143, 143, 143, 1) !important;
} */
.main {
    background: center;
    background-repeat: no-repeat;
    background-image: url('/assets/images/active-form.svg');
    position: relative;
    bottom: 0px;
    background-size: 45px;
}

.wizard-step {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.wizard-step.active1.main .dot,
.wizard-step.active3.main .dot,
.wizard-step.active4.main .dot,
.wizard-step.active2.main .dot {
    opacity: 0;
}

.steps-bar-step.active1 .dot,
.steps-bar-step.active3 .dot,
.steps-bar-step.active4 .dot,
.steps-bar-step.active2 .dot {
    background-color: rgba(143, 143, 143, 1);
    height: 15px;
    width: 15px;
    margin-top: 15px;
}

.dot {
    border-radius: 50%;
    display: inline-block;
    z-index: -1;
    position: relative;
    transition: all 0.5s ease;
}

.dot span {
    color: #807d7d;
    font-size: 19px;
    position: relative;
    top: 3px;
    font-weight: 700;
}

.wizard-step {
    text-align: center;
    cursor: pointer;
}

.steps-bar-step .wizard-dot2,
.steps-bar-step .wizard-dot3,
.steps-bar-step .wizard-dot4 {
    background-color: var(--primary-clr);
    height: 15px;
    width: 15px;
    margin-top: 11px;
}

.steps-bar-step:not(:first-child)::after {
    border-bottom: 1px dashed var(--primary-clr);
    background-color: transparent;
}

/* .active2::after {
    background-color: gray !important;
    border-bottom: 1px dashed rgba(143, 143, 143, 1) !important;
    height: 2.5px !important;
    top: 30px !important;
    z-index: 9999;
    border-bottom: none !important;
}

.active3::after {
    background-color: gray !important;
    border-bottom: 1px dashed rgba(143, 143, 143, 1) !important;
    height: 2.5px !important;
    top: 30px !important;
    z-index: 9999;
    border-bottom: none !important;
}

.active4::after {
    background-color: gray !important;
    border-bottom: 1px dashed rgba(143, 143, 143, 1) !important;
    height: 2.5px !important;
    top: 36px !important;
    z-index: 9999;
    border-bottom: none !important;
} */

.wizard-step:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 42%;
    height: 7px;
    width: 75%;
    z-index: -2;
    left: 12%;
}

.steps-bar-step.active1,
.steps-bar-step.active2,
.steps-bar-step.active3,
.steps-bar-step.active4 {
    color: rgba(143, 143, 143, 1);
}

.job-screen-box {
    transform: translate(-50%, -48.5vh) !important;
    padding: 0.5rem 1.5rem 0.2rem !important;
}

.second-screen-box {
    background-color: rgba(255, 255, 255, 0.4) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    left: 50% !important;
    /* transform: translate(-50%, -100%) !important; */
    position: absolute !important;
    /* width: 23.5% !important; */
    width: 21.5% !important;
    border-radius: 55px !important;
}

.map-box {
    /* background: linear-gradient(114.08deg, rgba(255, 255, 255, 0.5) -20.87%, rgba(235, 235, 235, 0.367354) 4.42%, rgba(224, 224, 224, 0.287504) 14.59%, rgba(212, 212, 212, 0.21131) 29.42%, rgba(207, 207, 207, 0.175584) 39.74%, rgba(202, 202, 202, 0.143432) 46.67%, rgba(200, 200, 200, 0.126299) 53.14%, rgba(196, 196, 196, 0.1) 63.31%); */
    background-color: #ffffff5c !important;
    margin: 3rem 1.5rem;
}

.second-screen-heading {
    text-align: center;
}

.dispatching-box h6,
.dispatching-box h3 {
    color: #000 !important;
}

.map-box-heading h6 {
    text-align: center;
    font-size: 18px;
}

.dispatching-box h3 {
    font-weight: 600 !important;
    font-size: 24px;
    margin-top: 3px;
}

.dispatching-box h6,
.dispatching-box h3 {
    color: #000 !important;
    margin-bottom: 0;
}

.job-box {
    margin: 0 auto !important;
    padding-top: 10px !important;
}

.map-bottom-btns {
    padding: 1rem 0 0.5rem;
}

.find-me {
    max-width: 500px;
}

.map-bottom-btns .btn-white {
    background-color: var(--primary-clr) !important;
    border: var(--primary-clr) !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 13px !important;
}

.job-box button {
    font-size: 14px !important;
}

.record-area {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    text-align: center;
    color: white;
}

.job-type,
.job_id,
.job_selection {
    position: relative;
}

.job-type {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
    text-align: center;
}

.job-type,
.job_id,
.job_selection {
    position: relative;
}

.job_id h6,
.job_selection h6,
.job_eta h6 {
    font-size: 16px;
}

.job_id h6,
.job_id h3,
.job_selection h6,
.job_selection h3,
.job_eta h6,
.job_eta h3 {
    color: #000 !important;
    margin-bottom: 0;
}

.job_id h3,
.job_selection h3,
.job_eta h3 {
    font-weight: 600 !important;
    font-size: 20px;
}

/* .lineadd::after {
    top: 25%;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 1px;
    background-color: gray;
    height: 59%;
    right: -23px;
} */
.lineadd {
    /* border-right: 1px solid rgba(155, 155, 155, 0.6); */
    border-right: 1px solid black;
    margin-bottom: 1rem;
    padding-right: 10px;
}

.job-type,
.job_id,
.job_selection {
    position: relative;
}

.dispatch-line::after {
    position: absolute;
    width: 100%;
    height: 1px;
    /* background-color: rgba(155, 155, 155, 0.6); */
    background-color: white;
    content: " ";
    /* top: 75px; */
    top: 52px;
}

.btn-outline {
    background-color: transparent !important;
    width: 100%;
    border-radius: 35px;
    padding: 7px 20px;
    border: 2px solid var(--primary-clr) !important;
    color: var(--primary-clr) !important;
    font-size: 18px;
}

.cancel-dispatching {
    display: flex;
    justify-content: center;
}

.btn-white {
    width: 100%;
    border-radius: 35px;
    color: white;
}

.dispatch-bar {
    background-color: var(--primary-clr);
    width: 100%;
    position: absolute;
    /* border-radius: 20px; */
    /* transform: translate(-50%, 0%) !important; */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transform: translate(-0%, 5%) !important; */
    transform: translate(-0%, 0%) !important;
    z-index: 1;
}

.dispatch-bar h4 {
    color: White;
    margin-bottom: 0;
}

.dispatching-link {
    position: absolute;
    z-index: 8;
    text-align: center;
    left: 50% !important;
    transform: translate(-50%, 320%) !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dispatch-linkcolor {
    background-color: rgba(139, 139, 139, 1);
    color: white;
    border-radius: 20px;
    padding: 10px 15px;
}

.dispatch-info-icon {
    background-color: rgba(139, 139, 139, 1);
    padding: 3px 12px;
    border-radius: 15px;
}

.dispatch-info-icon i {
    color: white;
}

.redesign-popup .modal-content {
    border-radius: 30px !important;
}

.custom-modal-header {
    background-color: var(--primary-clr);
    padding: 3rem 1rem;
    border: none;
}

.header-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-bottom: 15px;
}

.car-area {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 0.5rem 0.7rem;
}

.car-area svg {
    height: 40px;
    width: 40px;
}

.blinkcount {
    animation: zoomPulse 2.5s ease-in-out infinite;
    transition: transform 1.5s ease-in-out;
}

.user-area {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 0.5rem 0.7rem;
}

.dispatch-area {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.dispatch-area svg {
    color: yellow;
    height: 18px;
}

.dispatch-heading {
    font-size: 14px;
}

.trusted-location h5 {
    color: white;
    margin-bottom: 7px;
}

.text-muted.small {
    color: #3cb367 !important;
}

.gray-area {
    border-radius: .75rem !important;
}

.first-para {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 300;
    color: #6c757d;
}

.second-para {
    color: #6c757d;
    font-size: 14px;
    display: flex;
    justify-content: center;
}

.custom-modal-header .close {
    color: #121212 !important;
    text-shadow: none;
    font-weight: inherit;
    position: absolute;
}

.site-area {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 0.9rem 1.25rem;
}

.instruct-area {
    position: absolute;
    background-color: var(--primary-clr);
    border-radius: 50%;
    z-index: 2;
    right: 8px;
    top: 5px;
    width: 20px;
    height: 20px;
}

.instruct-area svg {
    color: white;
    height: 14px;
    width: 14px;
}

.instruct-container i {
    font-size: 24px;
}

.enroute-description {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.enroute-description h6 {
    font-size: 20px;
    font-weight: bold;
}

.blackmodal-header {
    background-color: #0b0e13;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.black-btn {
    background-color: #000 !important;
    padding: 10px 20px !important;
}

.black-outline-btn {
    border: 2px solid #000 !important;
    color: white !important;
}

.custom-cancel .close {
    color: #121212 !important;
    text-shadow: none;
    font-weight: inherit;
    position: absolute;
    color: white !important;
}

.map-box-heading a:hover {
    color: var(--primary-clr) !important;
    text-decoration: underline !important;
}

.command-animate {
    width: 90px;
    height: 90px;
}

.command-animate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-bg {
    width: 100px;
    height: 100px;
}

.pulse-bg {
    position: absolute;
    background-color: rgba(77, 136, 255, 0.4);
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-in-out;
    z-index: 0;
}

.voice-command {
    width: 90px;
    height: 90px;
}

.voice-command {
    background: var(--primary-clr);
    color: white;
    text-align: center;
    border-radius: 50px;
    border-color: rgba(59, 130, 246, 0.2);
    border: 2px solid;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999;
}

.voice-command i {
    margin-top: 24px;
    font-size: 40px;
    color: white;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.2;
    }

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

.dark-theme-modal .register-body {
    animation: none;
}

.custom-modal-header .close:focus {
    outline: none;
}

.steps-section {
    padding: 2rem 1rem;
}

.steps-wrapper {
    font-size: 16px;
}

.circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgb(228 242 253);
    color: var(--primary-clr);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-text {
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.arrow {
    font-size: 20px;
    color: gray;
}

.dark-input-group .input-group-text {
    background-color: var(--input-bg-dark);
    border: 1px solid #252b37;
    border-radius: 0.75rem;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dark-input-group input {
    border-left: none;
}

.business-hours-btn {
    gap: 10px;
    flex-wrap: wrap;
}

.business-hours-btn button {
    /* flex: 1; */
    min-width: 180px;
}

.service-btn.selected {
    background: var(--primary-clr);
    /* your primary color */
    border-color: var(--primary-clr);
    color: #fff;
    position: relative;
}

/* Checkmark */
.service-btn.selected::before {
    content: "✓ ";
    font-weight: bold;
    margin-right: 4px;
}

.commission-box {
    background-color: #4d88ff0d;
    border: 1px solid #4d88ff33;
    border-radius: 15px;
}

.custom-checkbox-box {
    width: 18px;
    height: 18px;
    border: 1px solid var(--primary-clr);
    display: inline-block;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

/* Checkmark (hidden initially) */
.custom-checkbox-box::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    top: 3px;
    left: 3px;
    transform: rotate(-45deg);
    opacity: 0;
}

/* When checked */
#afterHoursReferral:checked+.custom-checkbox-box {
    background: var(--primary-clr);
    border-color: var(--primary-clr);
}

#afterHoursReferral:checked+.custom-checkbox-box::after {
    opacity: 1;
}

.section h2 {
    margin-bottom: 0;
}
.logo-ml{
    margin-left: -35px;
}
/*Job Details Page End*/
@media (min-width: 576px) {
    .dispatch-tire-card {
        padding: 2rem;
    }

    .dispatch-tire-card .vehicle-diagram {
        width: 14rem;
        height: 18rem;
    }

    .dispatch-tire-card .tire-button {
        width: 3.5rem;
        height: 4.5rem;
    }

    .dispatch-tire-card .tire-circle {
        width: 2.5rem;
        height: 2.5rem;
    }

    .dispatch-tire-card .driver-front {
        left: -1.75rem;
        top: 1.75rem;
    }

    .dispatch-tire-card .passenger-front {
        right: -1.75rem;
        top: 1.75rem;
    }

    .dispatch-tire-card .driver-rear {
        left: -1.75rem;
        bottom: 1.75rem;
    }

    .dispatch-tire-card .passenger-rear {
        right: -1.75rem;
        bottom: 1.75rem;
    }

    .form-container {
        max-width: 600px;
    }
}

@media (max-width: 767px) {
    .card {
        min-height: 120px;
    }

    .card .icon-container {
        width: 64px;
        height: 64px;
    }

    .card h3 {
        font-size: 1rem;
    }

    .card p {
        font-size: 0.75rem;
    }

    .section h2 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .section {
        padding: 0;
    }
    .section p {
    margin-bottom: 0.5rem;
   }

    .section p {
        font-size: 0.75rem;
    }

    .large-heading {
        font-size: 30px;
    }

    .heading-medium {
        font-size: 20px;
    }

    .dispatch-tire-card {
        padding: 3rem;
    }

    .dispatch-tire-card .vehicle-diagram {
        width: 14rem;
        height: 20rem;
    }

    .dispatch-tire-card .tire-button {
        width: 4rem;
        height: 5rem;
    }

    .dispatch-tire-card .tire-circle {
        width: 3rem;
        height: 3rem;
    }

    .dispatch-tire-card .driver-front {
        left: -2rem;
        top: 2rem;
    }

    .dispatch-tire-card .passenger-front {
        right: -2rem;
        top: 2rem;
    }

    .dispatch-tire-card .driver-rear {
        left: -2rem;
        bottom: 2rem;
    }

    .dispatch-tire-card .passenger-rear {
        right: -2rem;
        bottom: 2rem;
    }

    .dispatch-tire-card .tire-label {
        font-size: 0.75rem;
    }

    .navbar-dark .navbar-toggler-icon {
        width: 1em;
        height: 1em;
    }

    .navbar-dark .navbar-toggler {
        border: none;
    }

    .long-para {
        font-size: 16px;
    }

    .congratulations-header h1 {
        font-size: 36px;
    }

    .action-buttons {
        flex-direction: column;
    }

    .dispatcher-contact,
    .setup-acordians,
    .what-next-section {
        padding: 15px !important;
    }

    .referral-modal .modal-footer {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .modal-footer-btn {
        flex: 1;
        width: 100%;
    }

    .second-screen-box {
        width: 100% !important;
        transform: inherit !important;
    }

    .job-screen-box {
        /* transform: translate(-50%, -54.5vh) !important; */
        transform: translate(-50%, -45.5vh) !important;
    }

    .map-box {
        margin: inherit !important;
    }

    .job-detail-container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .col-4 .card p {
        display: none;
    }

    .col .card p {
        display: none;
    }

    .col .card {
        padding: 0 !important;
        min-height: inherit;
        background-color: transparent;
        box-shadow: none;
    }

    .col-4 .card {
        padding: 0 !important;
        min-height: inherit;
        background-color: transparent;
        box-shadow: none;
    }

    .icon-container {
        margin: 0 auto 0.3rem !important;
    }

    .steps-section {
        padding: 1.5rem 0;
    }

    .steps-container {
        padding-left: 5px;
        padding-right: 5px;
    }

    .circle {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .step-text {
        font-size: 10px;
    }

    .step-text {
        margin-left: 3px !important;
    }

    .arrow {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }

    .arrow i {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .services-contain {
        /* gap: 20px 30px; */
        gap: 20px 0px;
    }

    .vehicle-settings h1 {
        font-size: 30px;
    }

    .vehicle-settings {
        text-align: center;
    }

    .vehicle-settings .location-area a,
    .vehicle-settings .location-area button {
        width: 300px;
        margin: auto;
    }

    .vehicle-settings .location-area .divider {
        margin: 1.5rem auto;
        width: 300px;
    }

    .map-container {
        height: 400px;
    }

    .payment-info {
        padding-top: 5px !important;
    }

    .payment-info .payment-fields {
        margin-bottom: 2px !important;
    }

    .payment-info .space-y-6>* {
        margin-bottom: 0.5rem;
    }

    .payment-info .space-y-4>* {
        margin-bottom: 0.1rem;
    }

    .payment-info .header-icon {
        margin: 0 auto 0.1rem;
    }

    .payment-info .space-y-2 label {
        margin-bottom: 0.1rem;
    }

    .payment-info .bg-clr-input {
        padding: 0.4rem 0.75rem;
    }

    .payment-info .custom-select {
        height: 2.5rem;
        padding: 0.5rem 2rem 0.5rem 1rem;
    }

    .payment-info .authorization-box {
        padding: 0.2rem 1rem;
    }

    .tire-card {
        padding: 1rem 0rem;
    }

    .tire-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .driver-front-label {
        left: -2.5rem;
    }

    .passenger-front-label {
        right: -3rem;
    }

    .tire-label {
        font-size: 0.6rem;
    }

    .driver-rear-label {
        left: -2.5rem;
    }

    .passenger-rear-label {
        right: -3rem;
    }
    .dispatch-bar h4 {
    font-size: 18px;
   }
   .logo {
    height: 1.5rem;
}
.help-section h2{
    padding-bottom: 4px;
}
.help-section p{
    padding-bottom: 5px;
}
.help-section{
    padding-top: 7px;;
}
}

@media (min-width: 992px) {
    h1 {
        font-size: 2.25rem;
    }

    .row-cols-lg-3>* {
        flex: 0 0 32%;
        max-width: 32%;
    }

    .gradient-section {
        padding: 2.5rem;
    }

    .step-container-desktop {
        gap: 1rem;
    }

    .line-desktop {
        width: 2rem;
    }

    .process-step-desktop {
        padding: 0.5rem 1rem;
    }

    .process-step-desktop span {
        font-size: 0.875rem;
    }

    .gradient-section {
        padding: 2rem;
    }

    .banner-img img {
        width: 500px !important;
        margin-top: -3px;
    }
    .services-contain{
        padding-top: 7px;
    }
}
@media (min-width: 576px) {
    #cancelService .modal-dialog {
        min-height: calc(100% - (1.75rem * 2));
    }
}
#cancelService .modal-content {
    border-radius: 30px !important;
    padding: 1rem;
}
#cancelService .modal-content {
    border: 1px solid #252b37;
    background-color: #0b0e13;
}
#cancelService .close {
    text-shadow: none;
    font-weight: inherit;
    position: absolute;
    color: white;
}
#cancelService .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    right: 15px;
    top: 15px;
}
#cancelService .modal-content .step-form-title h4{
  color: white;
}
/* #cancelService .service-dropdown{
  padding-left: 1rem;
  padding-right: 1rem;
} */
#cancelService .service-dropdown select{
    height: 3.5rem;
    font-size: 14px;
    border-radius: 0.75rem;
    border: 1px solid #2d3748;
    background-color: #0f131a;
    color: #e2e8f0;
    padding: 1rem 2rem 1rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    /* appearance: none; */
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    background-image: none;
}
#cancelService .other-reasons textarea{
    font-size: 14px;
    padding: 1rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #252b37;
    background-color: transparent;
    transition: border-color 0.3s 
ease, box-shadow 0.3s 
ease;
    color: white !important;
    line-height: 1.5;
    display: block;
    width: 100%;
    margin-top: 10px;
}
#cancelService .other-reasons button{
    font-size: 1.125rem;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-clr);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 9999px;
    gap: 0.75rem;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    transition: background-color 0.3s;
    margin-top: 10px;
}