@import url(fonts.css);

:root {
    --white: #fff;
    --primary: #4a36ec;
    --success: #0baa60;
    --warning: #fdba0f;
}

* {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

body {
    
    font-family: PlusJakartaSans;
    font-stretch: normal;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6, p{ margin:0;}

.call_action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    padding: 16px 30px;
    width: calc(100% - 40px);
    position: fixed;
    bottom: 0px;
    border-radius: 16px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: rgba(41, 41, 41, 0.6);
    
}

.call_action small {
    display: block;
    text-align: center;
    margin-top: 10px;
}

.call_action a {
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
}

.driverBx {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 0 0 rgba(31, 22, 95, 0.2), 0 2px 4px 0 rgba(31, 22, 95, 0.2), 0 7px 7px 0 rgba(31, 22, 95, 0.17), 0 16px 9px 0 rgba(31, 22, 95, 0.1), 0 28px 11px 0 rgba(31, 22, 95, 0.03), 0 44px 12px 0 rgba(31, 22, 95, 0);
    background-color: var(--primary);
    border: solid 1px #4a36ec;
    border-radius: 24px;
    border-bottom-left-radius: 0;
    margin: 20px;
}

.DetalBx{ display: flex; justify-content: start; align-items: start;}
.personDetalBx{ padding:10px 0 0 16px;}
.personDetalBx h2{ font-size: 21px; font-weight: 600; color: var(--white); margin: 10px 0; }
.personDetalBx h3{ font-size: 13px; font-weight: normal; color: var(--white); }

.personDetalBx .otp{ font-size: 13px; font-weight: 600; color: var(--white); background: var(--success); margin-top: 10px; }

.driver_badge{ background: #ebe7ff; color: var(--primary);}
.guard_badge{ background: var(--warning); color: var(--primary);}

/* .carousel-inner{ overflow-y: visible; overflow-x: hidden !important;} */
.carousel-indicators{ margin-bottom: 4px; border-radius: 8px;}
.carousel-indicators [data-bs-target]{ width: 8px; height: 8px; border: 0; border-radius: 8px;}

.logo_icon{ position: absolute; top: 18px; right: 18px;}
/* .imgBx{ position: relative;  }
.imgBx .reaching{ position: absolute; bottom: -52px; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; background: #1c1d20; width: 100%; height: 52px; padding-left: 18px; display: flex; align-items: center;}
.imgBx .reaching h4 { font-size: 13px; font-weight: bold; color: #fff;}
.imgBx .reaching h4 small{ font-size: 11px; font-weight: 500; color: #fff; display: block; margin-bottom: 6px;}*/


 .reaching{ position: absolute; bottom: -52px; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; width: 110px; height: 52px; padding-left: 18px; display: flex; align-items: center;}
 .reaching h4 { font-size: 13px; font-weight: bold; color: #fff;}
 .reaching h4 small{ font-size: 11px; font-weight: 500; color: #fff; display: block; margin-bottom: 6px;}

.chat{ background-color: var(--warning); border-top-left-radius: 22px; border-bottom-left-radius: 22px; position: absolute; bottom: 200px; right: 0; font-size: 13px; font-weight: 600; color: #1c1d20; padding:12px 14px;}

#googleMap{ position: absolute; width: 100%; height: 100vh; top: 0; left: 0; z-index: -1;}

.modal-backdrop.show{ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(28, 29, 32, 0.2); opacity: 1;}
.modal-content{ border-radius: 24px;}
.modal-body{ padding: 24px;}
.modal-body p { font-size: 16px; font-weight: 600; color: #545557;}
.modal-body h5{ font-size: 21px;  font-weight: 500; color: #1c1d20; margin-bottom: 18px;}
.modal-body h6{ font-size: 16px;  font-weight: 500; color: #545557;; margin-bottom: 36px; line-height: 26px;}


.list li{ font-size: 16px; font-weight: 500; color: #545557; padding: 10px 0;}

.btn-cst{ height: 58px; font-size: 14px; font-weight: 600; border-radius: 8px;}
.offWhite{ color: #f9f9f9;}
.buttons{ display: flex; justify-content: space-evenly;}

.bg-dark{ background: #1c1d20 !important;}
.bg-success{ background: var(--success) !important;}