/* Minification failed. Returning unminified contents.
(358,17): run-time error CSS1039: Token not allowed after unary operator: '-Dark-Gray---2'
(378,28): run-time error CSS1039: Token not allowed after unary operator: '-Blue'
(381,17): run-time error CSS1039: Token not allowed after unary operator: '-White'
(641,28): run-time error CSS1039: Token not allowed after unary operator: '-Bluez'
(642,22): run-time error CSS1039: Token not allowed after unary operator: '-Color-Primary-White'
(658,22): run-time error CSS1039: Token not allowed after unary operator: '-Bluez'
(766,17): run-time error CSS1039: Token not allowed after unary operator: '-Dark-Gray---2'
(800,28): run-time error CSS1039: Token not allowed after unary operator: '-Grey-400'
(801,22): run-time error CSS1039: Token not allowed after unary operator: '-White'
(808,21): run-time error CSS1039: Token not allowed after unary operator: '-Light-Gray'
(851,17): run-time error CSS1039: Token not allowed after unary operator: '-White'
(865,17): run-time error CSS1039: Token not allowed after unary operator: '-Grey-600'
(916,17): run-time error CSS1039: Token not allowed after unary operator: '-Grey-900'
(929,22): run-time error CSS1039: Token not allowed after unary operator: '-White'
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: 'Montserrat', Montserrat;
    background-color: #F4F8FA !important; /* Set background color */
}

html, body {
    overflow-x: hidden !important;
    margin: 0;
    height: 100%;
}

.container-fluid {
    height: 130vh !important;
    /*padding-left: 0 !important;
    padding-right: 0 !important;*/
    padding: 0 !important;
}

#Main {
    position: relative; /* Make Main a positioning context for absolute children */
}

@media screen and (max-width : 550px) {
    p {
        font-size: 11px;
    }
}

/* Revamp css */

.right-card-column {
    padding-left: 6px !important;
}

.left-card-column {
    padding-right: 6px !important;
}

.card-title {
    font-size: 13px;
    margin-top: 20px;
}

.card-icon {
    max-width: 80px;
    max-height: 80px;
    margin: 0 auto;
}

.swal2-icon.swal2-warning {
    border-color: #2C6BA4 !important;
    color: #2C6BA4 !important;
}

.swal2-styled.swal2-confirm {
    background-color: #2C6BA4 !important;
}

.swal2-title {
    font-size: 20px !important;
}

.banner-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Ensures no overflow from the image */
}

.image {
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove bottom space under image */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 102, 156, 0.9);
    pointer-events: none; /* Allows clicks to pass through the overlay */
    height: 220px;
}


.car-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(102deg, #00669C 1.37%, rgba(0, 102, 156, 0.63) 98.63%);
    pointer-events: none; /* Allows clicks to pass through the overlay */
}

.logo {
    position: absolute;
    top: 20px; /* 20px padding from the top */
    left: 50%;
    transform: translateX(-50%); /* Center the logo */
    z-index: 1; /* Ensure the logo is above the overlay */
    margin-bottom: 20px;
}

    .logo img {
        max-width: 100%; /* Make logo responsive */
        height: auto; /* Maintain aspect ratio */
    }

.connect-now {
    position: absolute; /* Position relative to the #Main */
    bottom: -25px; /* Adjust this value based on the height of the image */
    left: 50%;
    transform: translateX(-50%); /* Center the image */
    z-index: 1; /* Ensure it overlaps above the banner */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically if needed */
}

    .connect-now img {
        max-width: 110%; /* Make sure the image is responsive */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Ensure no space below the image */
    }

.language-link {
    position: absolute; /* Position relative to the banner container */
    top: 20px; /* Adjust this as necessary */
    right: 20px; /* Adjust this as necessary */
    z-index: 1; /* Ensure it is above the overlay */
    text-decoration: none; /* Remove default underline */
    color: white !important; /* Change to your desired text color */
    font-weight: bold; /* Make text bold */
}

    .language-link::after {
        content: ''; /* Create a pseudo-element for the underline */
        display: block;
        width: 100%; /* Full width underline */
        height: 1px; /* Adjust thickness of the underline (thinner) */
        background: white; /* Underline color */
        margin-top: 1px; /* Space between text and underline (closer) */
    }

/* New styles for the text */
.text-container {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact centering */
    color: white; /* Text color */
    text-align: center; /* Center text */
    z-index: 1; /* Ensure it is above the overlay */
    padding-top: 50px; /* Optional: add padding for better spacing */
    width: 70%; /* Set the width to 80% of the parent container */
    max-width: 600px; /* Optional: set a maximum width */
}

    .text-container h7 {
        font-size: 1em; /* Smaller font for Good morning! */
        margin: 0; /* Remove default margin */
        font-weight: 300; /* Light weight */
        color: white; /* Ensure the text color is white */
    }

    .text-container h4 {
        font-size: 1.4em; /* Adjusted size for Muhammad Nouman */
        margin: 0; /* Remove default margin */
        white-space: nowrap; /* Prevent line break */
        font-weight: 700; /* Bold weight for emphasis */
        color: white; /* Ensure the text color is white */
    }

    .text-container p {
        font-size: 0.9em; /* Size for additional text */
        margin-top: 10px; /* Space between name and additional text */
        color: white; /* Text color */
        font-weight: 200; /* Extra light weight */
    }

.card {
    background-color: white;
    border-radius: 12px;
    margin: 18px;
    margin-bottom: 12px !important;
    padding: 15px;
    text-align: center;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.05);
    border: none;
}

.queue-card {
    background-color: white; /* Background color of the card */
    border-radius: 12px; /* Make edges rounder */
    margin: 0px 0px; /* Reduced vertical margin */
    padding-top: 25px; /* Increased padding for height */
    padding-bottom: 20px; /* Increased padding for height */
    text-align: center; /* Center-align text inside the card */
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
}

.card-body {
    padding: 0.2rem;
}

.check-icon {
    margin-right: 10px;
    padding-bottom: 3px;
}

.second-card {
    margin-top: 0 !important;
}

.card-body {
    font-size: 0.9em;
    color: #333;
    display: flex;
    align-items: center;
}

#cant-decide {
    padding: 20px;
}

    #cant-decide h7 {
        font-size: 0.95em; /* Slightly decrease the font size of h7 */
        font-weight: 600; /* Make h7 more bold */
        color: #333; /* Optional: adjust color if needed */
    }

    #cant-decide p {
        font-size: 0.8em; /* Increase the font size of the paragraph */
        color: #333; /* Optional: adjust color if needed */
    }

.connect-button {
    width: 100%; /* Full width */
    padding: 12px; /* Padding for the button */
    background-color: #2C6BA4; /* Button color */
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    font-size: 0.85em; /* Slightly smaller font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    margin-top: 0;
    font-weight: 600;
}

    .connect-button:hover {
        background-color: #1f4f7b; /* Darker shade on hover */
    }

.top-rectangle {
    position: absolute; /* Position it absolutely within #Main */
    top: 0; /* Align with the top of the banner */
    left: 0; /* Align with the left edge */
    width: 100%; /* Full width */
    height: 40px; /* Set height */
    background-color: #39A83B; /* Rectangle color */
    z-index: 10; /* Ensure it is above other elements */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    padding-left: 10px; /* Space from the left */
}

.check-icon {
    width: 20px; /* Set width for the check icon */
    height: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between the icon and text */
}

.feedback-text {
    font-size: 13px; /* Set font size */
    color: white; /* Text color */
}

.pill-button {
    width: 193px; /* Width of the inner rectangle from SVG */
    height: 50px; /* Height of the inner rectangle from SVG */
    background-color: #2C6BA4; /* Background color from SVG */
    border: none; /* No border */
    border-radius: 25px; /* Fully rounded corners for pill shape */
    color: white; /* Text color */
    font-size: 16px; /* Adjust font size as needed */
    position: relative; /* Set position to relative for absolute positioning of the image */
    cursor: pointer; /* Pointer cursor on hover */
    outline: none; /* Remove outline */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); /* Shadow effect */
    transition: transform 0.1s; /* Smooth scaling on hover */
    display: flex; /* Use flex to align items */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    padding-right: 60px; /* Adjust padding to accommodate larger image */
    padding-left: 6px;
    padding-top: 1px;
    padding-bottom: 1px;
    white-space: nowrap; /* Prevent text from breaking into a new line */
}

    .pill-button:hover {
        transform: scale(1.02); /* Slightly enlarge on hover */
    }

.button-text {
    position: relative; /* For positioning the text */
    z-index: 1; /* Ensure text is above the background */
    font-weight: 600;
    font-size: 15px;
}

.button-icon {
    position: absolute; /* Position the image absolutely */
    right: -30px; /* Allow overlap on the right */
    bottom: -15px; /* Align the bottom of the image with the bottom of the button */
    transform: translateY(0); /* No vertical translation needed */
    width: 100px; /* Set width larger than the button */
    height: auto; /* Maintain aspect ratio */
    padding-right: 14px;
    padding-bottom: 14px;
}

/* Optional: Add styles for focus state */
.pill-button:focus {
    box-shadow: 0 0 0 3px rgba(44, 107, 164, 0.5); /* Focus outline */
}

/* Weeak Connection Page Styles */

.centered-container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    text-align: center; /* Center text */
    margin-top: 100px;
}

#weak-connection-title {
    margin-top: 20px;
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#weak-connection-subtitle {
    margin-bottom: 15px;
    padding-top: 16px;
    width: 350px !important;
    color: var(--Dark-Gray---2, #424242);
    text-align: center;
    /* Body/15 Regular */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

.try-again-btn {
    width: 156px;
    display: inline-flex;
    padding: 16px 15px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 15px;
    flex-wrap: wrap;
    border-radius: 6px;
    border: 1px solid var(--Blue, #2C6BA4);
    background: #00669C;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
    color: var(--White, #FFF);
    /* Body/15 Semi-bold */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}

.btn-primary {
    background-color: #00669C; /* Set button background color */
    color: white; /* Change text color to white for better contrast */
    padding: 15px 30px; /* Increase padding for a bigger button */
    font-size: 16px; /* Adjust font size */
    border: none; /* Remove default border */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Call Page Styles */

.call-loading-container {
    position: relative; /* Positioning context for absolute children */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
}

.loading-image {
    width: 100%; /* Make image responsive */
    height: 100%; /* Make image fill the full height */
    object-fit: cover; /* Cover the entire area without distortion */
    object-position: 45% center; /* Focus on the right center of the image */
    display: block; /* Remove space below the image */
}

.overlay-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(45, 108, 164, 0.8), rgba(138, 189, 242, 0.8)); /* Linear gradient */
    pointer-events: none; /* Allow clicks to pass through */
}

.logo {
    position: absolute;
    top: 20px; /* Adjust as necessary */
    left: 50%;
    transform: translateX(-50%); /* Center the logo */
    z-index: 1; /* Ensure the logo is above the overlay */
}

#please-wait {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    z-index: 1;
}

.row-container {
    display: flex;
    flex-direction: column;
}

.language-link {
    position: absolute;
    bottom: 20px; /* Adjust as necessary */
    right: 20px; /* Adjust as necessary */
    z-index: 1; /* Ensure it is above the overlay */
    text-decoration: none; /* Remove default underline */
    color: white; /* Change to your desired text color */
    font-weight: bold; /* Make text bold */
}

.cancel-button-container {
    position: absolute; /* Positioning relative to the parent */
    bottom: 100px; /* Space from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for centering */
    z-index: 2; /* Ensure it is above other elements */
}

.countdown-container {
    position: absolute; /* Positioning relative to the parent */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for centering */
    color: #2C6BA4; /* Color for the text */
    font-size: 2em; /* Adjust font size as needed */
    text-align: center; /* Center the text */
    width: 220px; /* Set the width */
}

#recaptcha-container {
    position: absolute; /* Positioning relative to the parent */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%);
}

#verify-recaptcha {
    padding: 8px !important; /* Keep your existing padding */
    width: 100%; /* Set the width to 100% */
    box-sizing: border-box; /* Include padding in the element's total width */
}

.captcha-prompt {
    font-size: 1em; /* Adjust font size as needed */
    color: white;
}

.thanks-container {
    position: absolute; /* Positioning relative to the parent */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for centering */
    color: #2C6BA4; /* Color for the text */
    font-size: 3em; /* Adjust font size as needed */
    font-weight: 600;
    text-align: center; /* Center the text */
    width: 220px; /* Set the width */
}

.countdown-text {
    color: white; /* Text color */
    font-size: 0.6em; /* Smaller font size */
    text-align: center; /* Center the text */
    margin-bottom: 10px; /* Space between the text and circles */
    display: block; /* Ensure it takes up its own line */
}

.countdown-components {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically centered */
    justify-content: center; /* Center the items */
    direction: ltr; /* show the countdown in the Min: Sec format, regardless of the language the user has selected */
}

.circle-container {
    display: flex; /* Use flexbox for vertical stacking */
    flex-direction: column; /* Stack circle and label vertically */
    align-items: center; /* Center horizontally */
    margin: 0 10px; /* Space between circles and colon */
}

.circle {
    display: inline-block; /* Make circles inline */
    width: 75px; /* Increased width of the circle */
    height: 75px; /* Increased height of the circle */
    border-radius: 50%; /* Make it a circle */
    background-color: white; /* Circle color */
    color: #2C6BA4; /* Text color inside the circle */
    font-weight: 600; /* Make digits bold */
    line-height: 75px; /* Center text vertically */
    text-align: center; /* Center text horizontally */
    font-size: 1.3em; /* Increase font size for countdown digits */
}

.colon {
    color: white; /* Change colon color to white */
    font-weight: 600; /* Make the colon bold */
    font-size: 1.3em; /* Adjust colon size if needed */
    padding-bottom: 35px;
}

.label {
    color: white; /* Text color */
    font-weight: 500; /* Make text bold */
    font-size: 0.6em; /* Adjust font size as needed */
    margin-top: 5px; /* Space between circle and label */
}

.modal {
    position: fixed; /* Fixed positioning */
    height: auto !important; /* Ensure the height is auto */
    top: auto !important; /* Override Bootstrap's top position */
    bottom: -200px; /* Hide it below the viewport */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    background-color: #F4F8FA; /* Set the background color */
    transition: bottom 0.3s ease; /* Smooth transition */
    z-index: 1000; /* Ensure it appears above other elements */
    border-top-left-radius: 20px; /* Round the top left corner */
    border-top-right-radius: 20px; /* Round the top right corner */
}

.modal-content {
    padding: 20px; /* Padding inside the modal */
    text-align: left; /* Align text to the left */
    display: flex; /* Use flexbox for positioning */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align items to the start */
    max-height: 80vh; /* Maximum height */
    overflow-y: auto; /* Allow scrolling if content exceeds max-height */
}

    .modal-content p {
        font-size: 0.9em; /* Slightly increase the font size */
    }

.small-text {
    margin-left: 0 !important;
    margin: 15px !important;
    margin-bottom: 10px !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

.rating {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: center; /* Center the stars horizontally */
    gap: 20px; /* Space between stars */
    margin-top: 10px; /* Space above rating icons */
    margin-bottom: 10px;
}

.submit-button {
    margin-top: 20px; /* Space above the button */
    padding: 10px 20px; /* Padding for the button */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    background-color: #2C6BA4; /* Active color */
    color: white; /* Text color */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor for button */
}

    .submit-button:disabled {
        background-color: #757575; /* Disabled color */
        cursor: not-allowed; /* Not allowed cursor */
    }

button {
    margin-top: 15px; /* Space above the button */
    padding: 10px 20px; /* Padding for the button */
    background-color: #2C6BA4; /* Button color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
}

    button:hover {
        background-color: #245a8e; /* Darker on hover */
    }

.yes-button {
    margin-top: 10px; /* Space above the Yes button */
    padding: 10px 20px; /* Padding for the Yes button */
    color: #2C6BA4; /* Text color */
    cursor: pointer; /* Pointer cursor */
    border-radius: 6px;
    border: 1px solid var(--Bluez, #2C6BA4);
    background: var(--Color-Primary-White, #FFF);
    /* Field */
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}

    .yes-button:hover {
        background-color: #e6f4fb; /* Light background on hover */
    }

#close-modal {
    border-radius: 6px;
    background: var(--Bluez, #2C6BA4);
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}

.spinner-grow {
    color: white; /* Change the spinner color to white */
}

.x-svg-button {
    width: 50px; /* Width of the button */
    height: 50px; /* Height of the button */
    background-color: black; /* Circle background color */
    border: none; /* No border */
    border-radius: 50%; /* Make it circular */
    position: relative; /* For positioning child elements */
    cursor: pointer; /* Pointer cursor on hover */
    outline: none; /* Remove outline */
    opacity: 0.5; /* Set opacity to 50% */
    display: flex; /* Center the icon */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Drop shadow effect */
    padding: 15px !important;
}

.cross-icon {
    color: white; /* Color for the icon */
}

/* Timeframe Page Styles */

.tf-card-body {
    display: flex;
    justify-content: space-between; /* Distribute space between elements */
    align-items: center; /* Center items vertically */
}

.timing-group {
    display: flex;
    align-items: center; /* Center the green dot and timing text vertically */
}

.green-dot {
    margin-right: 5px; /* Space between the green dot and the timing text */
}

.days, .timing {
    margin: 0; /* Remove default margin */
}

.timing {
    font-weight: bold; /* Make the timing text bold */
    color: #666666; /* Set color to dark grey */
    margin: 0; /* Remove default margin */
}

.wifi-error {
    width: 30%;
}

#select-to-rate {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
    margin-left: 0px !important;
}

.black-overlay {
    position: fixed; /* Position it fixed to cover the viewport */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.9); /* Black with 90% opacity */
    z-index: 999; /* Ensure it sits above other content */
    display: none; /* Initially hidden */
}

#sure-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

#sure-subtitle {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.3px;
}

.drive-thru-image {
    width: 393px;
    height: 162px;
    flex-shrink: 0;
}

#car-prompt {
    color: var(--Dark-Gray---2, #424242);
    /* Body/15 Paragraph */
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 160% */
    letter-spacing: -0.3px;
    width: 291px;
    margin-top: 35px !important;
}

.car-image {
    width: 51px;
    height: 51px;
    margin-left: 25px;
    margin-top: 33px;
}

.center-container {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    height: 100%; /* Full height of the parent */
}

.form-container {
    text-align: center; /* Center text inside the form */
}

.form-control {
    width: 361px; /* Set the width */
    height: 52px; /* Set the height */
    flex-shrink: 0; /* Prevent shrinking */
    border-radius: 6px; /* Round the corners */
    border: 1px solid var(--Grey-400, #BDBDBD); /* Default border color (gray) */
    background: var(--White, #FFF); /* Set the background color */
    padding: 10px;
    box-sizing: border-box; /* Ensure padding and border are included in width/height */
}

    /* Placeholder styles */
    .form-control::placeholder {
        color: var(--Light-Gray, #BDBDBD); /* Placeholder text color */
        font-family: Montserrat; /* Font family for placeholder text */
        font-size: 15px; /* Font size for placeholder text */
        font-style: normal; /* Font style for placeholder text */
        font-weight: 400; /* Font weight for placeholder text */
        line-height: normal; /* Line height for placeholder text */
        letter-spacing: -0.3px; /* Letter spacing for placeholder text */
        /* leading-trim and text-edge properties are not standard CSS */
    }

    /* Change border color on focus */
    .form-control:focus {
        border: 1px solid #2C6BA4; /* Border color when focused */
        outline: none; /* Remove default outline */
    }

/* Optional: Style for the form-group to adjust layout */
.form-group {
    position: relative; /* Allow positioning of the label */
    margin-bottom: 15px; /* Space between form groups */
}

.prompt-row {
    margin-bottom: 17px;
}

.prompt-row.d-block {
    display: flex !important;
}

.btn-call {
    width: 100%; /* Make the button full width */
    display: flex;
    width: 361px;
    padding: 16px 15px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 15px;
    flex-wrap: wrap;
    border-radius: 6px;
    background: #00669C;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
    color: var(--White, #FFF);
    /* Body/15 Semi-bold */
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.3px;
}

.input-label {
    position: absolute; /* Position label above the input */
    top: 10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    color: var(--Grey-600, #757575); /* Label color */
    font-family: Montserrat; /* Font family */
    font-size: 11px; /* Font size */
    font-style: normal; /* Font style */
    font-weight: 400; /* Font weight */
    line-height: normal; /* Line height */
    letter-spacing: -0.3px; /* Letter spacing */
    pointer-events: none; /* Prevent label from interfering with input */
    transition: 0.2s; /* Smooth transition for label */
}

/*.iti__flag {
    width: 20px;*/ /* Set the width */
    /*height: 20px;*/ /* Set the height */
    /*flex-shrink: 0;*/ /* Prevent shrinking */
    /*border-radius: 50% !important;*/ /* Make the icon circular */
    /*overflow: hidden;*/ /* Ensure any overflow is hidden */
    /*display: flex;*/ /* Align items center */
    /*align-items: center;*/ /* Center the flag */
    /*justify-content: center;*/ /* Center the flag */
/*}*/


/* Hide the default arrow */
.iti__arrow {
    display: none; /* Hides the default arrow */
}

/* Style the selected flag container */
.iti__selected-flag {
    position: relative; /* Necessary for absolute positioning of the pseudo-element */
    padding-right: 40px; /* Add padding to the right for the custom arrow */
    width: 113px; /* Set the width of the selected flag section */
}

    /* Add the custom SVG arrow using a pseudo-element */
    .iti__selected-flag::after {
        content: ''; /* Empty content for the pseudo-element */
        display: inline-block; /* Allows width/height to take effect */
        width: 13px; /* Width of your SVG */
        height: 7px; /* Height of your SVG */
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="7" viewBox="0 0 13 7" fill="none"><path d="M6.46152 7C6.32375 7 6.18586 6.94727 6.08094 6.84223L0.157896 0.919308C-0.052632 0.708811 -0.052632 0.368424 0.157896 0.157896C0.368393 -0.052601 0.70878 -0.052601 0.919308 0.157896L6.46149 5.70023L12.0039 0.157896C12.2144 -0.052632 12.5546 -0.052632 12.7651 0.157896C12.9758 0.368393 12.9758 0.70878 12.7651 0.919308L6.84223 6.84223C6.73727 6.94727 6.59938 7 6.46152 7Z" fill="black"/></svg>') no-repeat center; /* Insert your SVG */
        position: absolute; /* Position it absolutely */
        right: 10px; /* Position it to the right */
        top: 50%; /* Center vertically */
        transform: translateY(-50%); /* Adjust for vertical centering */
        pointer-events: none; /* Prevent mouse events on the pseudo-element */
        padding-right: 40px;
    }

.iti__selected-dial-code {
    color: var(--Grey-900, #212121); /* Text color */
    leading-trim: both; /* Leading trim (if supported) */
    text-edge: cap; /* Text edge (if supported) */
    font-family: 'Montserrat', sans-serif; /* Font family */
    font-size: 15px; /* Font size */
    font-style: normal; /* Font style */
    font-weight: 500; /* Font weight */
    line-height: normal; /* Line height */
    letter-spacing: -0.3px; /* Letter spacing */
    margin-left: 8px !important;
}

.iti__selected-flag {
    background: var(--White, #FFF) !important;
}

#name {
    padding: 25px 10px 10px !important;
}

.car-location {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.prompt {
    margin-top: 40px !important;
}

.unavailable-image {
    width: 40%;
}

.unavailable-title {
    width: 70%;
}

.bi-volume-mute {
    margin-top: 100px;
}

.bi-volume-down {
    margin-top: 100px;
}

.video-player {
    width: 100vw !important;
}