.main-card{
  background:#182844;
  border-radius:12px;
  padding:20px 20px 0 20px; /*  bottom padding remove */
  color:#fff;
  max-width:1000px;
  margin:auto;
  overflow:hidden; /*  important */
}

.main-card2{
  background:#182844;
  border-radius:12px;
  padding:20px 20px 0 20px; /*  bottom padding remove */
  color:#fff;
  max-width:1000px;
  margin:auto;
  overflow:hidden; /*  important */

  height: 700px;
}

/* Selected Item */
.active-item{
  background:#4da3ff;
  padding:10px;
  border-radius:6px;
}
.box{
  background:#000;
  border-radius:10px;
  padding:15px 15px 0 15px; /*  bottom padding remove */
  margin-bottom:15px;
  max-width:796px;

  display:flex;
  flex-direction:column;
  min-height:250px;
  overflow:hidden; /*  important */
}

.active-item{
  background:#4da3ff;
  padding:12px;
  border-radius:6px;
  margin-top:10px;
}

.bottom-bar{
  background:#eaeaea;
  padding:10px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-top:auto;

  /*  MAIN FIX */
  margin-left:-15px;
  margin-right:-15px;
  border-radius:0;
}

.edit{
  height:34px;
  border:none;
  color:#fff;
  background:#4DA3FF;
  border-radius:8px;
  padding:0 15px;
}

.btn-dark{
  width:32px;
  height:32px;
  padding:0;
  margin-left:5px;
  border-radius:6px;
}

/* Buttons */
.btn-small{
  padding:4px 10px;
  font-size:12px;
}

.done-btn{
  width:200px;
  margin:auto;
  display:block;
}

/* Responsive */
@media(max-width:576px){
  .bottom-bar{
    flex-direction:column;
    gap:10px;
  }
}

.Apptech{
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}
.driver{
font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #B5B5B5;
}

/* .edit{
    height: 34px;
border: none;    
    color: #FFFFFF;
    background-color: #4DA3FF;
    border-radius: 8px;
    
} */

.text{
    font-size: 14px;
    color: #B5B5B5;
    line-height: 22px;
    font-weight: 400;
    text-align: center;
}


.done-wrapper{
  background:#eaeaea;

  display:flex;
  justify-content:center;
  align-items:center;

  margin-top:20px;

  /* 👇 SAME trick like bottom bar */
  margin-left:-20px;
  margin-right:-20px;

  padding:12px 0;
  border-radius:0;
}

.done-wrapper2{
  background:#eaeaea;

  display:flex;
  justify-content:center;
  align-items:center;

  margin-top:333px;

  /* 👇 SAME trick like bottom bar */
  margin-left:-20px;
  margin-right:-20px;

  padding:12px 0;
  border-radius:0;
}


.done-btn{
  width:200px;
  border-radius:8px;
}

.done-btn{
    background-color: #4DA3FF;
    height: 46px;
    color: #FFFFFF;
}

.custom-modal{
  border-radius:12px;
  padding:10px;
}

/* Close icon */
.close-icon{
  cursor:pointer;
  font-size:18px;
  color:#a855f7;
}

/* Labels */
.label{
  font-size:14px;
  font-weight:500;
  margin-bottom:5px;
}

/* Inputs */
.custom-input{
  border-radius:8px;
  padding:10px;
}

.search-input{
  background:#eee;
  border:none;
  border-radius:8px;
  margin-bottom:10px;
}

/* Driver box */
.driver-box{
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
  max-height:180px;
  overflow-y:auto;
}

/* Driver item */
.driver-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
}

/* No dispatcher box */
.no-box{
  background:#ddd;
  padding:10px;
  border-radius:8px;
  text-align:center;
  color:#666;
}

/* Small text */
.small-text{
  font-size:13px;
  color:#777;
}


/* second popup */

.tp-content {
  border-radius: 14px;
  padding: 15px;
}

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

.tp-label {
  font-weight: 500;
  font-size: 14px;
}

.tp-input {
  border-radius: 8px;
}

.tp-box {
  background: #f3f3f3;
  padding: 10px;
  border-radius: 10px;
}

.tp-search {
  background: #e0e0e0;
  border: none;
  margin-bottom: 10px;
}

.tp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  border-bottom: 1px solid #ddd;
}

.tp-item:last-child {
  border-bottom: none;
}

.tp-title {
  font-weight: 500;
}

.tp-select {
  border-radius: 8px;
}

.tp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.tp-cancel {
  border: 1px solid red;
  color: red;
  border-radius: 8px;
}

.tp-create {
  background: #4da3ff;
  color: #fff;
  border-radius: 8px;
}
/* ---------------------------------------------------------------------------------------- */


.hub-content {
  border-radius: 14px;
  padding: 18px;
}

.hub-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.hub-title {
  margin: 0;
  font-weight: 600;
}

.hub-subtitle {
  font-size: 12px;
  color: #7a7a7a;
}

.hub-label {
  font-size: 14px;
  font-weight: 500;
}

.hub-input {
  border-radius: 8px;
  padding: 10px;
}

/* Team box */
.hub-team-box {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 10px;
}

.hub-team-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  border-bottom: 1px solid #ddd;
}

.hub-team-item:last-child {
  border-bottom: none;
}

.hub-team-title {
  font-weight: 500;
}

/* Footer */
.hub-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.hub-cancel {
  border: 1px solid red;
  color: red;
  border-radius: 8px;
}

.hub-create {
  background: #4da3ff;
  color: #fff;
  border-radius: 8px;
}

/* -----------------------------------------------------admin popup -------------------------------- */


.adm-content {
  border-radius: 14px;
  padding: 18px;
}

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

.adm-title {
  margin: 0;
  font-weight: 600;
}

.adm-icon {
  color: #a020f0;
  font-size: 14px;
}

.adm-label {
  font-size: 14px;
  font-weight: 500;
}

.adm-input {
  border-radius: 8px;
  padding: 10px;
}

/* Phone */
.adm-phone-box {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
}

.adm-code {
  margin-right: 10px;
  font-size: 14px;
  color: #333;
}

.adm-phone-input {
  border: none;
  outline: none;
  width: 100%;
  
}

/* Footer */
.adm-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.adm-cancel {
  border: 1px solid red;
  color: red;
  border-radius: 8px;
}

.adm-add {
  background: #4da3ff;
  color: #fff;
  border-radius: 8px;
}


/* ---------------------------------------------------------dispather page ------------------------------------------------ */

.dispatchimg{
    width: 85px;
    height: 85px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.No{
    text-align: center;
    font-size: 400;
    font-size: 18px;
    line-height: 22px;
}

.Dispatchers{
      text-align: center;
    font-size: 400;
    font-size: 14px;
    line-height: 20px;
    color: #B5B5B5;
}

.learnmore{

    color: #33B1F8;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;

}


.main-card3{
  background:#182844;
  border-radius:12px;
  padding:20px 20px 0 20px; /* 👈 bottom padding remove */
  color:#fff;
  max-width:1000px;
  margin:auto;
  overflow:hidden; /* 👈 important */

  height: 600px;
}

.box3{
  background:#000;
  border-radius:10px;
  padding:15px 15px 0 15px; /* 👈 bottom padding remove */
  margin-bottom:15px;
  max-width:796px;

  display:flex;
  flex-direction:column;
  min-height:400px;
  overflow:hidden; /* 👈 important */
}



.dsp-content {
  border-radius: 14px;
  padding: 18px;
}

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

.dsp-title {
  margin: 0;
  font-weight: 600;
}

.dsp-info {
  color: #a020f0;
  font-size: 14px;
}

.dsp-label {
  font-size: 14px;
  font-weight: 500;
}

.dsp-input {
  border-radius: 8px;
  padding: 10px;
}

/* Phone */
.dsp-phone {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
}

.dsp-code {
  margin-right: 10px;
  font-size: 14px;
}

.dsp-phone-input {
  border: none;
  outline: none;
  width: 100%;
}

/* Teams */
.dsp-team-box {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 10px;
}

.dsp-team-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  border-bottom: 1px solid #ddd;
}

.dsp-team-item:last-child {
  border-bottom: none;
}

.dsp-team-title {
  font-weight: 500;
}

/* Read only */
.dsp-readonly {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dsp-readonly label {
  font-weight: 500;
}

.dsp-readonly small {
  color: #777;
  font-size: 12px;
}

/* Footer */
.dsp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.dsp-cancel {
  border: 1px solid red;
  color: red;
  border-radius: 8px;
}

.dsp-add {
  background: #4da3ff;
  color: #fff;
  border-radius: 8px;
}



/* -------------------------------------------------------driver-page-html----------------------------- */

.card {
        background: #0f172a;
        color: #cbd5f1;
        max-width: 795px;
        padding: 20px 24px;
        border-radius: 8px;
        position: relative;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
    }

    .card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: #FFFFFF; /* blue border */
        border-radius: 8px 0 0 8px;
    }

    .card p {
        font-size: 14px;
        line-height: 1.6;
        margin: 10px 0;
    }

    .card strong {
        color: #ffffff;
    }

    .highlight {
        color: #60a5fa;
        font-weight: bold;
    }


    /* Wrapper */
.search-box {
    position: relative;
    max-width: 600px;
}

/* Input field */
.search-box input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border-radius: 6px;
    border: none;
    outline: none;
    background: #1e293b;
    color: #cbd5f1;
    font-size: 14px;
}

/* Placeholder color */
.search-box input::placeholder {
    color: #94a3b8;
}

/* Search icon */
.search-box i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
}




/* ----------------------------------------------------popup------------------------ */


/* Overlay */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal box */
.modal-content {
    width: 420px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
}

/* Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.modal-header i {
    cursor: pointer;
    color: #888;
}

/* Label */
label {
    font-size: 12px;
    display: block;
    margin-top: 12px;
    margin-bottom: 5px;
    color: #333;
}

/* Input */
input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 13px;
}

/* Small text */
.small-text {
    font-size: 11px;
    color: #888;
    margin-bottom: 5px;
}

/* Transport buttons */
.transport {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.transport button {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.transport button.active {
    background: #3b82f6;
    color: white;
    border: none;
}

/* Row */
.row {
    display: flex;
    gap: 10px;
}

/* Buttons */
.modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.cancel {
    background: #fee2e2;
    color: red;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
}

.submit {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
}


.open-btn {
  padding: 10px 20px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

/* Box */
.modal-box {
  width: 420px;
  background: #f8fafc;
  padding: 20px;
  border-radius: 10px;
}

/* Header */
.modal-header {
  display: flex;
  justify-content: space-between;
}

.modal-header h3 {
  margin: 0;
}

.modal-header p {
  font-size: 12px;
  color: #666;
}

.close {
  cursor: pointer;
  font-size: 20px;
}

/* Inputs */
label {
  font-size: 12px;
  margin-top: 10px;
  display: block;
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* Row */
.row {
  display: flex;
  gap: 10px;
}

/* Transport */
.transport {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.transport button {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: white;
}

.transport .active {
  background: #3b82f6;
  color: white;
}

/* Assign */
.assign-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #3b82f6;
  color: #3b82f6;
  background: white;
  border-radius: 6px;
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.cancel {
  background: #fee2e2;
  color: red;
  border: none;
  padding: 8px 15px;
  border-radius: 6px;
}

.submit {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 6px;
}



/* teams popup---------------------------------------------------------------------------- */

.open-btn{
    padding:12px 22px;
    background:#4a90e2;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* OVERLAY */
.popup-overlay{
    position:fixed;
    top:0px;
    left:0;
    width:100%;
    height:100%;
    /* background:rgba(0,0,0,0.25); */
    display:none;
    justify-content:center;
    align-items:flex-start;
    padding-top:80px;
    z-index:9999;
    

}

/* POPUP */
.team-popup{
    width:420px;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
  
}

/* HEADER */
.popup-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px;
    border-bottom:1px solid #eee;
    font-size:13px;
    font-weight:500;
}

.close-popup{
    color:#d400ff;
    cursor:pointer;
    font-size:12px;
}

/* BODY */
.popup-body{
    padding:10px;
    min-height:180px;
    background:#fafafa;
}

.team-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:16px;
}

.team-title{
    font-size:15px;
    color:#333;
    margin-bottom:2px;
}

.team-sub{
    font-size:12px;
    color:#999;
}

/* FOOTER */
.popup-footer{
    display:flex;
    justify-content:space-between;
    padding:10px;
    border-top:1px solid #eee;
    background:#fff;
}

.cancel-btn{
    padding:8px 18px;
    border:1px solid #ffb3b3;
    background:#fff;
    color:#ff5b5b;
    border-radius:5px;
    cursor:pointer;
}

.apply-btn{
    padding:8px 28px;
    border:none;
    background:#5da9ff;
    color:#fff;
    border-radius:5px;
    cursor:pointer;
}


/* ----------------------------------------------------driver-app-page-setting.html-------------------------------------------- */

/* MAIN AREA */
.main-wrapper{
    min-height:100vh;
    padding:25px 10px;
}

/* CARD */
.settings-card{
    background:#131f39;
    border-radius:8px 8px 0 0;
    padding:22px;
    color:#fff;
}

/* TOP TEXT */
.small-title{
    font-size:16px;
    color:#B5B5B5;
    margin-bottom:5px;
    font-weight: 400;
}

.main-title{
    font-size:18px;
    color:#FFFFFF;
    line-height: 22px;
    margin-bottom:20px;
}

.main-title a{
    color:#d8e5ff;
    text-decoration:underline;
}

/* CHECKBOX AREA */
.checkbox-area{
    margin-bottom:20px;
}

/* CUSTOM CHECKBOX */
.custom-checkbox{
    display:flex;
    align-items:center;
    position:relative;
    padding-left:28px;
    margin-bottom:12px;
    cursor:pointer;
    font-size:16px;
    color:#FFFFFF;
    user-select:none;
    line-height: 22px;
     font-weight: 400;

  }

/* HIDE DEFAULT */
.custom-checkbox input{
    position:absolute;
    opacity:0;
    cursor:pointer;
}

/* CUSTOM BOX */
.checkmark{
    position:absolute;
    left:0;
    top:1px;
    width:15px;
    height:15px;
    border:1px solid #8994ad;
    border-radius:3px;
    background:transparent;
}

/* CHECKED */
.custom-checkbox input:checked ~ .checkmark{
    background:#4aa3ff;
    border-color:#4aa3ff;
}

/* TICK */
.checkmark:after{
    content:"";
    position:absolute;
    display:none;
}

/* SHOW TICK */
.custom-checkbox input:checked ~ .checkmark:after{
    display:block;
}

/* TICK DESIGN */
.custom-checkbox .checkmark:after{
    left:4px;
    top:1px;
    width:4px;
    height:8px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

/* ALERT BOX */
.barcode-box{
    background:#000;
    border-radius:5px;
    padding:14px;
    margin-bottom:20px;
    font-size:18px;
    line-height:23px;
    font-weight: 400;

}

.barcode-box i{
    color:#4aa3ff;
    margin-right:7px;
}

/* TABLE BOX */
.task-box{
    background:#000;
    border-radius:6px;
    padding:16px;
}

/* HEADER */
.table-head{
    margin-bottom:12px;
    font-size: 18px;
    line-height: 23px;
    font-weight: 400;
}

.heading{
    color:#b7c2dc;
    font-size:11px;
}

/* TASK ROW */
.task-row{
    margin-bottom:14px;
}

/* LEFT LABEL */
.task-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:18px;
    color:#fff;
}

/* SELECT */
/* .custom-select{
    width:100%;
    height:32px;
    background:#626d86;
    border:none;
    border-radius:4px;
    color:#fff;
    padding:0 10px;
    font-size:16px;
    outline:none;
    cursor:pointer;
}

.custom-select option{
    background:#fff;
    color:#000;
} */

/* =========================
   CUSTOM SELECT
========================= */

/* =========================
   CUSTOM SELECT
========================= */

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

/* =========================
   SELECT STYLE
========================= */

.custom-popup-select{
    width:100%;
    height:42px;

    border:1px solid #D1D5DB;
    border-radius:8px;

    background:#fff;

    padding:0 14px;

    font-size:14px;
    font-weight:500;
    color:#111827;

    outline:none;
    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 12px center;
}

/* =========================
   DROPDOWN OPTIONS
========================= */

.custom-popup-select option{
    background:#fff;
    color:#111827;

    font-size:14px;
    font-weight:500;

    padding:12px;
}

/* ACTIVE SELECT */
.active-select{
    border:2px solid #2e9cff;
}

/* FOOTER */
.footer-text{
    margin-top:16px;
    font-size:18px;
    color:#c5cede;
}

/* BOTTOM BUTTON AREA */
.bottom-area{
    background:#ececec;
    padding:12px;
    border-radius:0 0 8px 8px;
    text-align:center;
}

/* BUTTON */
.done-btn{
    width:240px;
    max-width:100%;
    height:38px;
    border:none;
    border-radius:4px;
    background:#59aaff;
    color:#fff;
    font-size:13px;
}

/* MOBILE */
@media(max-width:768px){

    .settings-card{
        padding:15px;
    }

    .heading{
        display:none;
    }

    .task-label{
        margin-bottom:8px;
    }

    .custom-select{
        margin-bottom:10px;
    }

}

/* ------------------------------------communication.html------------------------------------------- */
.main-card {
  background: #132238;
  border-radius: 6px;
  padding: 18px;
  color: #fff;
}

/* Top Info Box */
.info-box {
  background: #000;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 3px;
  margin-bottom: 15px;
}

/* Labels */
.form-label {
  font-size: 12px;
  margin-bottom: 6px;
}

/* Inputs */
.custom-input {
  background: #1e2f4d;
  border: 1px solid #2c3e5d;
  color: #fff;
  font-size: 13px;
  height: 34px;
}

.custom-input:focus {
  background: #1e2f4d;
  color: #fff;
  border-color: #4da3ff;
  box-shadow: none;
}

/* Toggle Buttons */
.toggle-group {
  display: flex;
  border: 1px solid #2c3e5d;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.toggle-btn {
  flex: 1;
  font-size: 12px;
  padding: 6px 0;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: #4da3ff;
  border: none;
}

.toggle-btn.active {
  background: #4da3ff;
  color: #fff;
}

/* Small Buttons */
.small-btns {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.small-btns button {
  font-size: 11px;
  padding: 3px 10px;
}

/* Checkbox */
.form-check-label {
  font-size: 12px;
}

/* Done Button */
.done-btn {
  background: #4da3ff;
  border: none;
  height: 32px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .main-card {
    padding: 12px;
  }
}


/* -------------------------------------------communication------------------------------------------------- */


/* MAIN WRAPPER */
.dispatcher_wrapper{
    min-height:100vh;
    padding:10px 6px;
}

/* MAIN CARD */
.dispatcher_card{
    background:#12203b;
    border-radius:4px 4px 0 0;
    padding:14px;
    color:#fff;
}

/* TITLE */
.dispatcher_title{
    font-size:16px;
    color:#dbe5ff;
    margin-bottom:8px;
    line-height: 22px;
}

/* BLACK BOX */
.dispatcher_box{
    background:#000;
    border-radius:4px;
    min-height:145px;
    padding:20px 15px;
    text-align:center;
    position:relative;
    margin-bottom:0;
    width: 450px;
}

/* ICON CIRCLE */
.dispatcher_icon{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#fff;
    margin:0 auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#58aaff;
    font-size:14px;
    font-weight:bold;
   
}

/* HEADING */
.dispatcher_heading{
    font-size:18px;
    color:#FFFFFF;
    margin-bottom:8px;
    line-height: 22px;
}

/* TEXT */
.dispatcher_text{
    font-size:14px;
    color:#B5B5B5;
    line-height:20px;
    margin-bottom:10px;
    font-weight: 400;
}

/* LINK */
.dispatcher_link{
    font-size:18px;
    color:#49a4ff;
    text-decoration:none;
    font-weight: 400;
}

/* ACTION BAR */
.dispatcher_action_bar{
    background:#ececec;
    border-radius:0 0 4px 4px;
    padding:4px 6px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:4px;
    margin-bottom:12px;
    width: 450px;
}

/* EDIT BUTTON */
.dispatcher_edit_btn{
    background:#dcdcdc;
    border:none;
    border-radius:2px;
    height:16px;
    padding:0 12px;
    font-size:8px;
    color:#999;
}

/* PLUS BUTTON */
.dispatcher_small_btn{
    width:16px;
    height:16px;
    border:none;
    border-radius:2px;
    background:#1b2844;
    color:#fff;
    font-size:10px;
    line-height:16px;
    padding:0;
}

/* SECTION TITLE */
.dispatcher_permission_title{
    font-size:16px;
    color:#cbd7f0;
    margin-bottom:8px;
}

/* CHECKBOX */
.dispatcher_checkbox{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:#fff;
    margin-bottom:7px;
}

.dispatcher_checkbox input{
    width:10px;
    height:10px;
}

/* FOOTER */
.dispatcher_footer{
    background:#ececec;
    border-radius:0 0 4px 4px;
    padding:10px;
    text-align:center;
    border-top:2px solid #2f9cff;
}

/* DONE BUTTON */
.dispatcher_done_btn{
    width:170px;
    height:22px;
    border:none;
    border-radius:3px;
    background:#58aaff;
    color:#fff;
    font-size:9px;
}

/* RESPONSIVE */
@media(max-width:768px){

    .dispatcher_card{
        padding:12px;
    }

    .dispatcher_box{
        min-height:130px;
    }

}




/* Hide popup by default */
.conn-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none; /* IMPORTANT */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Show class */
.conn-overlay.active {
  display: flex;
}

/* Modal */
.conn-modal {
  width: 420px;
  background: #f5f6f8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Header */
.conn-header { padding: 16px 18px 10px; }

.conn-title {
  font-size: 16px;
  font-weight: 600;
}

.conn-subtitle {
  font-size: 12px;
  color: #6c757d;
}

.conn-info-icon {
  color: purple;
  cursor: pointer;
}

/* Body */
.conn-body { padding: 10px 18px 15px; }

.conn-label {
  font-size: 12px;
  display: block;
  margin-bottom: 5px;
}

.conn-input {
  width: 100%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 0 10px;
}

.conn-helper {
  font-size: 11px;
  color: #777;
  margin-top: 8px;
}

/* Footer */
.conn-footer {
  background: #e9ecef;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
}

/* Buttons */
.conn-btn-cancel {
  border: 1px solid red;
  color: red;
  background: transparent;
  padding: 5px 14px;
  border-radius: 6px;
}

.conn-btn-send {
  background: #4da3ff;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
}

/* Open Button */
.open-conn-btn {
  margin: 50px;
  padding: 8px 20px;
}

/* Mobile */
@media (max-width: 480px) {
  .conn-modal {
    width: 90%;
  }
}

/* ------------------------------------------trackingpage-setting.html------------------------------------- */
/* MAIN */
.exact_preview_wrapper{
    min-height:100vh;
    padding:6px;
    width: 100%;
}

/* CARD */
.exact_preview_card{
    background:#13203b;
    border-radius:5px 5px 0 0;
    padding:14px;
    width: 100%;
}

/* TITLE */
.exact_preview_title{
    font-size:8px;
    color:#dce4f8;
    margin-bottom:6px;
}

/* MAP */
.exact_preview_map{
    width:100%;
    height:323px;
    overflow:hidden;
    border-radius:4px 4px 0 0;
}

.exact_preview_map iframe{
    width:100%;
    height:100%;
    border:none;
}

/* BLACK DRIVER BOX */
.exact_driver_box{
    background:#000;
    border-radius:0 0 4px 4px;
    padding:10px;
}

/* TOP */
.exact_driver_top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:12px;
}

/* DRIVER INFO */
.exact_driver_label{
    font-size:18px;
    color:#fff;
    margin-bottom:2px;
}

.exact_driver_name{
    font-size:16px;
    color:#FFFFFF;
    margin-bottom:2px;
    line-height: 22px;
}

.exact_driver_time{
    font-size:16px;
    color:#33B1F8;
}

/* ARROW */
.exact_driver_arrow{
    color:#fff;
    font-size:9px;
    margin-top:2px;
}

/* INFO ROW */
.exact_info_row{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-bottom:14px;
}

/* ICON */
.exact_info_icon{
    width:46px;
    height:46px;
    border-radius:3px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    font-size:16px;
    flex-shrink:0;
}

/* TEXT */
.exact_info_title{
    color:#fff;
    font-size:18px;
    line-height:22px;
}

.exact_info_sub{
    color:#c6d0e6;
    font-size:16px;
    margin-top:2px;
    line-height: 22px;
}

/* BUTTON ROW */
.exact_btn_row{
    display:flex;
    gap:10px;
    margin-bottom:12px;
}

/* CALL BTN */
.exact_call_btn{
    flex:1;
    height:42px;
    border:none;
    border-radius:3px;
    background:#4ea5ff;
    color:#fff;
    font-size:18px;
}

/* MESSAGE BTN */
.exact_msg_btn{
    flex:1;
    height:42px;
    border:none;
    border-radius:3px;
    background:#fff;
    color:#000;
    font-size:18px;
}

/* CUSTOMIZE */
.exact_customize_btn{
    width:100%;
    height:42px;
    border:none;
    border-radius:3px;
    background:#4ea5ff;
    color:#fff;
    font-size:18px;
}

/* FOOTER */
.exact_footer{
    background:#ececec;
    padding:12px;
    border-radius:0 0 5px 5px;
    text-align:center;
}

/* DONE BUTTON */
.exact_done_btn{
    width:170px;
    height:46px;
    border:none;
    border-radius:3px;
    background:#58aaff;
    color:#fff;
    font-size:16px;
}

/* RESPONSIVE */
@media(max-width:768px){

    .exact_preview_card{
        padding:12px;
    }

    .exact_preview_map{
        height:120px;
    }

}



/* --------------------------plan-biling-page.html--------------------------------------------- */

/* MAIN */
.plan_wrapper{
    min-height:100vh;
    padding:8px;
}

/* CARD */
.plan_card{
    background:#13203b;
    border-radius:5px 5px 0 0;
    padding:16px;
}

/* TITLE */
.plan_title{
    font-size:16px;
    color:#B5B5B5;
    margin-bottom:10px;
    font-weight: 400;
}

/* BLACK BOX */
.plan_black_box{
    background:#000;
    border-radius:4px;
    padding:6px;
    margin-bottom:14px;
}

/* BLUE BORDER */
.plan_inner_box{
    /* border:2px solid #1da1ff; */
    border-radius:2px;
    padding:10px;
    background-color: #172135;
}

/* TOP */
.plan_top{
    display:flex;
    /* justify-content:space-between; */
    align-items:center;
    margin-bottom:8px;
}

/* PLAN TEXT */
.plan_text{
    color:#FFFFFF;
    font-size:16px;
    font-weight: 400;
    line-height: 22px;
}

/* LINE */
.plan_line{
    width:100%;
    height:1px;
    background:#4c5a73;
    margin:6px 0 10px;
}

/* USAGE */
.plan_usage_row{
    display:flex;
    /* justify-content:space-between; */
    align-items:center;
    margin-bottom:8px;
}

.plan_usage_left{
    color:#fff;
    font-size:16px;
    line-height: 22px;
    font-weight: 400;
}

.plan_usage_right{
    color:#fff;
    font-size:18px;
    line-height: 22px;
    font-weight: 400;
}

/* GREEN BAR */
.plan_progress{
    width:100%;
    height:4px;
    background:#2a2a2a;
    border-radius:10px;
    overflow:hidden;
    /* margin-bottom:16px; */
    margin-top: 10px;
}

.plan_progress_fill{
    width:100%;
    height:100%;
    background:#79d52f;
}

/* INFO BUTTONS */
.plan_info_row{
    display:flex;
    gap:6px;
    justify-content:center;
    margin-top: 30px;
}

.plan_info_btn{
    flex:1;
    height:42px;
    border:none;
    border-radius:2px;
    background:#fff;
    color:#000;
    font-size:16px;
}

/* PRICE CARDS */
.plan_price_row{
    display:flex;
    gap:6px;
    margin-top:12px;
}

/* CARD */
.price_card{
    flex:1;
    background:#fff;
    border-radius:10px;
    padding:12px;
    position:relative;
    min-height:112px;
}

/* CARD LABEL */
.price_badge{
    position:absolute;
    right:6px;
    top:6px;
    background:#ffc857;
    color:#fff;
    font-size:14px;
    padding:2px 6px;
    border-radius:40px;
    width: 61px;
    height: 28px;
    text-align: center;
}

.price_badge_blue{
    background:#7ec2ff;
}

.price_badge_dark{
    background:#4fa5ff;
}

/* STARTING */
.price_start{
    color:#1E1E1E;
    font-size:14px;
    margin-bottom:4px;
font-weight: 400;
    line-height:  22px;

}

/* PRICE */
.price_amount{
    color:#4DA3FF;
    font-size:31px;
    font-weight:bold;
    line-height:22px;
}

.price_month{
    font-size:16px;
    color:#1E1E1E;
}

/* VIEW DETAILS */
.view_details{
    color:#fff;
    font-size:16px;
    text-align:center;
    margin-top:6px;
}

/* BLUE CARD */
.price_card_blue{
    background:#58aaff;
}

.price_card_blue .price_amount,
.price_card_blue .price_month,
.price_card_blue .price_start{
    color:#fff;
}

/* MANAGE BUTTON */
.manage_btn{
    width:100%;
    height:42px;
    border:none;
    border-radius:3px;
    background:#58aaff;
    color:#fff;
    font-size:16px;
    margin-top:12px;
    font-weight: 400;
}

/* FOOTER */
.plan_footer{
    background:#ececec;
    border-radius:0 0 5px 5px;
    padding:12px;
    text-align:center;
}

/* DONE */
.done_btn{
    width:170px;
    height:42px;
    border:none;
    border-radius:3px;
    background:#58aaff;
    color:#fff;
    font-size:16px;
}

/* MOBILE */
@media(max-width:768px){

    .plan_price_row{
        flex-direction:column;
    }

    .price_card{
        width:100%;
    }

}


.payment_plan_open_btn{
    width:150px;
    height:38px;
    border:none;
    border-radius:4px;
    background:#58aaff;
    color:#fff;
    font-size:13px;
}

/* ================= OVERLAY ================= */

.payment_plan_popup_overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

/* ================= POPUP ================= */

.payment_plan_popup_box{
    width:350px;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    font-family:Arial, sans-serif;
}

/* ================= BODY ================= */

.payment_plan_popup_body{
    padding:12px;
}

/* ================= LABEL ================= */

.payment_plan_popup_label{
    font-size:18px;
    color:#000;
    font-weight:500;
    margin-bottom:5px;
}

/* ================= INPUT ================= */

.payment_plan_popup_input{
    width:100%;
    height:30px;
    border:1px solid #e2e2e2;
    border-radius:4px;
    padding:0 10px;
    font-size:14px;
    outline:none;
    margin-bottom:8px;
    color:#666;
}

/* ================= SMALL TEXT ================= */

.payment_plan_popup_small_text{
    font-size:14px;
    color:#8d96aa;
    margin-bottom:10px;
}

/* ================= FLEX ================= */

.payment_plan_popup_flex{
    display:flex;
    gap:6px;
}

/* ================= SELECT ================= */

.payment_plan_popup_select{
    width:100%;
    height:30px;
    border:1px solid #e2e2e2;
    border-radius:4px;
    padding:0 10px;
    font-size:10px;
    background:#fff;
    outline:none;
    margin-bottom:10px;
}

/* ================= CARD INPUT ================= */

.payment_plan_card_input{
    position:relative;
}

/* ================= CARD ICON ================= */

.payment_plan_card_icon{
    position:absolute;
    top:8px;
    left:10px;
    font-size:11px;
    color:#666;
}

/* ================= CARD INPUT PADDING ================= */

.payment_plan_card_input .payment_plan_popup_input{
    padding-left:28px;
}

/* ================= FOOTER ================= */

.payment_plan_popup_footer{
    background:#f2f2f2;
    padding:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ================= CANCEL BTN ================= */

.payment_plan_cancel_btn{
    width:58px;
    height:28px;
    border:1px solid #ff9a9a;
    border-radius:4px;
    background:#fff;
    color:red;
    font-size:10px;
}

/* ================= PURCHASE BTN ================= */

.payment_plan_purchase_btn{
    width:115px;
    height:30px;
    border:none;
    border-radius:4px;
    background:#58aaff;
    color:#fff;
    font-size:10px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){

    .payment_plan_popup_box{
        width:95%;
        max-width:250px;
    }

}


/* ---------------------------------------report page.html-------------------------------------------- */

/* MAIN */
.exact_digest_wrapper{
    min-height:100vh;
    padding:8px;
}

/* CARD */
.exact_digest_card{
    background:#13203b;
    border-radius:5px 5px 0 0;
    min-height:345px;
    padding:18px 20px;
}

/* TITLE */
.exact_digest_title{
    color:#B5B5B5;
    font-size:14px;
    margin-bottom:10px;
    font-weight:400;
}

/* CHECKBOX LABEL */
.exact_digest_checkbox{
    display:flex;
    align-items:center;
    gap:7px;
    color:#ffffff;
    font-size:18px;
    margin-bottom:8px;
    cursor:pointer;
    line-height:11px;
}

/* CHECKBOX */
.exact_digest_checkbox input{
    width:18px;
    height:18px;
    accent-color:#ffffff;
    margin:0;
}

/* FOOTER */
.exact_digest_footer{
    background:#ececec;
    border-radius:0 0 5px 5px;
    padding:12px;
    text-align:center;
}

/* BUTTON */
.exact_digest_done_btn{
    width:265px;
    max-width:100%;
    height:24px;
    border:none;
    border-radius:4px;
    background:#58aaff;
    color:#fff;
    font-size:10px;
    font-weight:400;
}

/* MOBILE */
@media(max-width:768px){

    .exact_digest_card{
        min-height:320px;
        padding:16px;
    }

    .exact_digest_done_btn{
        width:100%;
    }

}



/* --------------------------------------------login.html-------------------------------------------------- */
.gofleet_login_main{
    width:100%;
    height:100vh; /* FIX HEIGHT */
    padding:12px;
    background:#f3f3f3;
    font-family:'Poppins',sans-serif;
    overflow:hidden; /* NO SCROLL */
}

.gofleet_login_wrapper{
    width:100%;
    height:100%; /* FULL HEIGHT */
    max-width:1350px;
    margin:auto;
    background:#081028;
    border-radius:12px;
    padding:8px;
    display:flex;
    gap:12px;
    overflow:hidden; /* NO INNER SCROLL */
}

/* LEFT SIDE */

.gofleet_left{
    width:42%;
    background:#020B2D;
    border-radius:10px;
    padding:35px 30px;
    color:#fff;
    overflow:hidden;
}

.gofleet_logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:40px;
}

.gofleet_logo img{
    width:22px;
}

.gofleet_logo span{
    font-size:16px;
    font-weight:500;
}

.gofleet_left h2{
    font-size:34px;
    margin-bottom:30px;
    font-weight:600;
}

.gofleet_form_group{
    margin-bottom:18px;
}

.gofleet_form_group label{
    display:block;
    color:#95A0C5;
    font-size:12px;
    margin-bottom:8px;
}

.gofleet_form_group input{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.15);
    padding:10px 0;
    color:#fff;
    outline:none;
    font-size:13px;
}

.gofleet_form_group input::placeholder{
    color:#6f7ba1;
}

.gofleet_forgot{
    text-align:right;
    margin-bottom:20px;
}

.gofleet_forgot a{
    color:#3E9CFF;
    text-decoration:none;
    font-size:12px;
}

.gofleet_remember{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    color:#95A0C5;
    font-size:12px;
}

.gofleet_sign_btn{
    width:100%;
    height:42px;
    border:none;
    border-radius:5px;
    background:#2F80ED;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}

.gofleet_bottom_text{
    margin-top:18px;
    text-align:center;
    color:#95A0C5;
    font-size:12px;
}

.gofleet_bottom_text a{
    color:#3E9CFF;
    text-decoration:none;
}

/* RIGHT SIDE */

.gofleet_right{
    width:58%;
    border-radius:10px;
    overflow:hidden;
    position:relative;
   
}

/* IMAGE MAIN */

.gofleet_image_main{
    position:relative;
    width:100%;
    height:100%;
     padding: 15px;
}

/* IMAGE */

.gofleet_image_box{
    width:100%;
    height:100%;

}

.gofleet_laptop_img{
    width:95%;
    height:auto;
    object-fit:cover;
    border-radius:10px;
    display:block;
    
}

/* TEXT OVER IMAGE */

.gofleet_overlay_text{
    position:absolute;
    bottom:30px;
    left:30px;
    color:#fff;
    z-index:2;
    width:350px;
}

/* HEADING */

.gofleet_overlay_text h1{
    font-size:32px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:14px;
}

/* PARAGRAPH */

.gofleet_overlay_text p{
    font-size:13px;
    line-height:1.7;
    color:#f3f3f3;
}

/* RESPONSIVE */

@media(max-width:991px){

    .gofleet_login_main{
        height:auto;
        overflow:auto;
    }

    .gofleet_login_wrapper{
        flex-direction:column;
        height:auto;
    }

    .gofleet_left,
    .gofleet_right{
        width:100%;
    }

    .gofleet_right{
        height:500px;
    }

    .gofleet_overlay_text{
        width:90%;
        left:20px;
        bottom:20px;
    }

    .gofleet_overlay_text h1{
        font-size:26px;
    }

}

        /* ------------------------------------------dispather start  dispather-deshboard. html ----- */

   .open-popup-btn{
            margin:50px;
            padding:12px 24px;
            border:none;
            border-radius:8px;
            background:#4DA3FF;
            color:#fff;
            font-size:15px;
            font-weight:600;
        }

        /* =========================
           POPUP OVERLAY
        ========================= */

        .task-popup-overlay{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100vh;
            background:rgba(0,0,0,0.45);

            display:none;
            align-items:center;
            justify-content:center;

            padding:15px;
            z-index:999;
        }

        .task-popup-overlay.active{
            display:flex;
        }

        /* =========================
           POPUP BOX
        ========================= */

        .task-popup-box{
            width:100%;
            max-width:380px;
            height:95vh;

            background:#fff;
            border-radius:14px;

            overflow:hidden;

            display:flex;
            flex-direction:column;

            box-shadow:0 10px 40px rgba(0,0,0,0.15);
        }

        /* =========================
           SCROLL BODY
        ========================= */

        .task-popup-body{
            flex:1;
            overflow-y:auto;
            padding:18px;

            scrollbar-width:none;
            -ms-overflow-style:none;
        }

        .task-popup-body::-webkit-scrollbar{
            display:none;
        }

        /* =========================
           HEADER
        ========================= */

        .task-popup-header{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:20px;
        }

        .task-popup-title{
            font-size:16px;
            font-weight:700;
            color:#111827;
            margin-bottom:2px;
        }

        .task-popup-subtitle{
            font-size:13px;
            color:#8E96AF;
            font-weight:500;
            line-height:20px;
        }

        .task-close-btn{
            width:26px;
            height:26px;
            border:none;
            border-radius:50%;
            background:#f4e8ff;
            color:#b84cff;

            display:flex;
            align-items:center;
            justify-content:center;

            font-size:12px;
        }

        /* =========================
           SECTION
        ========================= */

        .task-section{
            margin-bottom:18px;
        }

        .task-label{
            font-size:14px;
            font-weight:600;
            color:#374151;
            line-height:22px;
        }

        .required-star{
            color:#ff3b30;
        }

        /* =========================
           INPUTS
        ========================= */

        .task-input,
        .task-textarea{
            width:100%;
            border:1px solid #E5E7EB;
            border-radius:8px;
            background:#fff;

            padding:12px 14px;

            outline:none;

            color:#111827;
            font-size:14px;

            margin-bottom:12px;
        }

        .task-input::placeholder,
        .task-textarea::placeholder{
            color:#9CA3AF;
            font-size:14px;
        }

        .task-textarea{
            resize:none;
            height:80px;
        }

        /* =========================
           CHECKBOX
        ========================= */

        .task-check{
            display:flex;
            align-items:center;
            gap:7px;

            font-size:14px;
            color:#343B4F;
            font-weight:500;
        }

        .task-check input{
            width:18px;
            height:18px;
        }

        /* =========================
           ADD LINK
        ========================= */

        .task-add-link{
            color:#4DA3FF;
            text-decoration:none;
            font-size:13px;
            font-weight:500;
        }

        /* =========================
           FOOTER
        ========================= */

        .task-popup-footer{
            width:100%;
            padding:16px 18px;
            border-top:1px solid #ECECEC;
            background:#fff;

            display:flex;
            gap:12px;
        }

        /* =========================
           BUTTONS
        ========================= */

        .task-cancel-btn{
            width:50%;
            height:48px;

            border:1px solid #FF5B5B;
            background:#fff;
            color:#FF5B5B;

            border-radius:10px;

            font-size:16px;
            font-weight:600;
        }

        .task-create-btn{
            width:50%;
            height:48px;

            border:none;
            background:#4DA3FF;
            color:#fff;

            border-radius:10px;

            font-size:16px;
            font-weight:600;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width:480px){

            .task-popup-box{
                max-width:100%;
                height:100vh;
                border-radius:0;
            }

        }

/* =========================
   SECTION TITLE
========================= */

.task-section-title{
    font-size:14px;
    font-weight:700;
    color:#111827;
    margin-bottom:3px;
}

/* =========================
   SECTION DESCRIPTION
========================= */

.task-section-desc{
    font-size:11px;
    color:#8E96AF;
    line-height:18px;
    margin-bottom:12px;
}

/* =========================
   INPUT ICON
========================= */

.task-input-icon{
    position:absolute;
    right:12px;
    top:14px;
    color:#9CA3AF;
    font-size:13px;
}

/* =========================
   CHECKBOX
========================= */

.task-check{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#343B4F;
    font-weight:500;
}

.task-check input{
    width:16px;
    height:16px;
}

/* =========================
   ASSIGN BUTTON
========================= */

.task-submit-btn{
    width:100%;
    height:42px;
    border:1px solid #4DA3FF;
    border-radius:8px;
    background:#fff;
    color:#4DA3FF;
    font-size:14px;
    font-weight:600;
}




/* ---------------------------------------------- assignpopup ------------------------------------------------------ */
   /* =========================
           OPEN BUTTON
        ========================= */

        .open-assign-popup-btn{
            margin:50px;
            padding:12px 22px;
            border:none;
            border-radius:8px;
            background:#4DA3FF;
            color:#fff;
            font-size:14px;
            font-weight:600;
        }

        /* =========================
           POPUP OVERLAY
        ========================= */

        .assign-popup-overlay{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100vh;

            background:rgba(0,0,0,0.45);

            display:none;
            align-items:center;
            justify-content:center;

            padding:15px;
            z-index:999;
        }

        .assign-popup-overlay.active{
            display:flex;
        }

        /* =========================
           POPUP BOX
        ========================= */

        .assign-popup-box{
            width:100%;
            max-width:390px;
            height:92vh;

            background:#fff;
            border-radius:14px;

            overflow:hidden;

            display:flex;
            flex-direction:column;
        }

        /* =========================
           BODY
        ========================= */

        .assign-popup-body{
            flex:1;
            overflow-y:auto;

            padding:18px;

            scrollbar-width:none;
            -ms-overflow-style:none;
        }

        .assign-popup-body::-webkit-scrollbar{
            display:none;
        }

        /* =========================
           HEADER
        ========================= */

        .assign-popup-header{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;

            margin-bottom:18px;
        }

        .assign-popup-title{
            font-size:16px;
            font-weight:700;
            color:#111827;
            margin-bottom:2px;
        }

        .assign-popup-subtitle{
            font-size:13px;
            color:#8E96AF;
            font-weight:500;
        }

        .assign-close-btn{
            width:22px;
            height:22px;

            border:none;
            border-radius:50%;

            background:#F5E9FF;
            color:#C026D3;

            display:flex;
            align-items:center;
            justify-content:center;

            font-size:11px;
        }

        /* =========================
           SEARCH
        ========================= */

        .assign-search{
            width:100%;
            height:42px;

            border:none;
            border-radius:8px;

            background:#F3F4F6;

            padding:0 14px;

            font-size:13px;
            color:#111827;

            outline:none;

            margin-bottom:20px;
        }

        .assign-search::placeholder{
            color:#9CA3AF;
        }

        /* =========================
           SECTION TITLE
        ========================= */

        .assign-section-title{
            font-size:13px;
            font-weight:600;
            color:#8E96AF;

            margin-bottom:14px;
        }

        /* =========================
           LIST
        ========================= */

        .assign-list-item{
            display:flex;
            align-items:center;
            justify-content:space-between;

            margin-bottom:14px;
        }

        .assign-list-name{
            font-size:15px;
            color:#111827;
            font-weight:500;
        }

        .assign-checkbox{
            width:16px;
            height:16px;
            accent-color:#111C4E;
        }

        /* =========================
           DIVIDER
        ========================= */

        .assign-divider{
            width:100%;
            height:1px;
            background:#E5E7EB;

            margin:18px 0;
        }

        /* =========================
           FOOTER
        ========================= */

        .assign-popup-footer{
            width:100%;

            padding:16px 18px;

            border-top:1px solid #ECECEC;

            background:#fff;

            display:flex;
            gap:12px;
        }

        /* =========================
           BUTTONS
        ========================= */

        .assign-cancel-btn{
            width:50%;
            height:42px;

            border:1px solid #FF5B5B;
            background:#fff;

            color:#FF5B5B;

            border-radius:8px;

            font-size:14px;
            font-weight:600;
        }

        .assign-submit-btn{
            width:50%;
            height:42px;

            border:none;
            background:#4DA3FF;

            color:#fff;

            border-radius:8px;

            font-size:14px;
            font-weight:600;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width:480px){

            .assign-popup-box{
                max-width:100%;
                height:100vh;
                border-radius:0;
            }

        }


        /*------------------------------------------------------- import popup-------------------------------- */

         .import-task-open-btn{
            margin:50px;
            padding:12px 22px;
            border:none;
            border-radius:8px;
            background:#4DA3FF;
            color:#fff;
            font-size:14px;
            font-weight:600;
        }

        /* =========================
           POPUP OVERLAY
        ========================= */

        .import-task-popup-overlay{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100vh;

            background:rgba(0,0,0,0.45);

            display:none;
            align-items:center;
            justify-content:center;

            padding:15px;
            z-index:999;
        }

        .import-task-popup-overlay.active{
            display:flex;
        }

        /* =========================
           POPUP BOX
        ========================= */

        .import-task-popup-box{
            width:100%;
            max-width:360px;
            height:92vh;

            background:#fff;
            border-radius:14px;

            overflow:hidden;

            display:flex;
            flex-direction:column;
        }

        /* =========================
           BODY
        ========================= */

        .import-task-popup-body{
            flex:1;
            overflow-y:auto;

            padding:18px;

            scrollbar-width:none;
            -ms-overflow-style:none;
        }

        .import-task-popup-body::-webkit-scrollbar{
            display:none;
        }

        /* =========================
           HEADER
        ========================= */

        .import-task-popup-header{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;

            margin-bottom:18px;
        }

        .import-task-popup-title{
            font-size:16px;
            font-weight:700;
            color:#111827;
            margin-bottom:2px;
        }

        .import-task-popup-subtitle{
            font-size:12px;
            color:#8E96AF;
            font-weight:500;
        }

        .import-task-popup-subtitle a{
            color:#4DA3FF;
            text-decoration:none;
        }

        .import-task-close-btn{
            width:22px;
            height:22px;

            border:none;
            border-radius:50%;

            background:#F5E9FF;
            color:#C026D3;

            display:flex;
            align-items:center;
            justify-content:center;

            font-size:11px;
        }

        /* =========================
           UPLOAD AREA
        ========================= */

        .import-task-upload-area{
            width:100%;
            height:420px;

            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;

            text-align:center;
        }

        /* =========================
           ICON
        ========================= */

        .import-task-upload-icon{
            width:72px;
            height:72px;

            border:2px dashed #111827;
            border-radius:50%;

            display:flex;
            align-items:center;
            justify-content:center;

            margin-bottom:18px;
        }

        .import-task-upload-icon i{
            font-size:24px;
            color:#111827;
        }

        /* =========================
           FILE BUTTON
        ========================= */

        .import-task-file-btn{
            width:160px;
            height:40px;

            border:none;
            border-radius:6px;

            background:#111827;
            color:#fff;

            font-size:13px;
            font-weight:500;

            margin-bottom:18px;
        }

        /* =========================
           TEXT
        ========================= */

        .import-task-upload-text{
            font-size:12px;
            color:#6B7280;
            line-height:20px;
        }

        /* =========================
           FOOTER
        ========================= */

        .import-task-popup-footer{
            width:100%;

            padding:16px 18px;

            border-top:1px solid #ECECEC;

            background:#fff;

            display:flex;
            justify-content:space-between;
            gap:12px;
        }

        /* =========================
           BUTTONS
        ========================= */

        .import-task-cancel-btn{
            width:120px;
            height:40px;

            border:1px solid #FF5B5B;
            background:#fff;

            color:#FF5B5B;

            border-radius:6px;

            font-size:13px;
            font-weight:500;
        }

        .import-task-submit-btn{
            width:180px;
            height:40px;

            border:none;
            background:#4DA3FF;

            color:#fff;

            border-radius:6px;

            font-size:13px;
            font-weight:500;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width:480px){

            .import-task-popup-box{
                max-width:100%;
                height:100vh;
                border-radius:0;
            }

        }
/* ------------------------------------------------------------export popup---------------------------------------------- */


 .export-task-open-btn{
            margin:50px;
            padding:12px 22px;

            border:none;
            border-radius:8px;

            background:#4DA3FF;
            color:#fff;

            font-size:14px;
            font-weight:600;
        }

        /* =========================
           POPUP OVERLAY
        ========================= */

        .export-task-popup-overlay{
            position:fixed;
            top:0;
            left:0;

            width:100%;
            height:100vh;

            background:rgba(0,0,0,0.45);

            display:none;
            align-items:center;
            justify-content:center;

            padding:15px;
            z-index:999;
        }

        .export-task-popup-overlay.active{
            display:flex;
        }

        /* =========================
           POPUP BOX
        ========================= */

        .export-task-popup-box{
            width:100%;
            max-width:360px;
            height:92vh;

            background:#fff;
            border-radius:14px;

            overflow:hidden;

            display:flex;
            flex-direction:column;
        }

        /* =========================
           BODY
        ========================= */

        .export-task-popup-body{
            flex:1;
            overflow-y:auto;

            padding:18px;

            scrollbar-width:none;
            -ms-overflow-style:none;
        }

        .export-task-popup-body::-webkit-scrollbar{
            display:none;
        }

        /* =========================
           HEADER
        ========================= */

        .export-task-popup-header{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;

            margin-bottom:18px;
        }

        .export-task-popup-title{
            font-size:16px;
            font-weight:700;
            color:#111827;
            margin-bottom:2px;
        }

        .export-task-popup-subtitle{
            font-size:12px;
            color:#8E96AF;
            line-height:18px;
            max-width:250px;
        }

        .export-task-close-btn{
            width:22px;
            height:22px;

            border:none;
            border-radius:50%;

            background:#F5E9FF;
            color:#C026D3;

            display:flex;
            align-items:center;
            justify-content:center;

            font-size:11px;
        }

        /* =========================
           SECTION
        ========================= */

        .export-task-section{
            margin-bottom:18px;
        }

        .export-task-label{
            font-size:13px;
            font-weight:600;
            color:#111827;

            margin-bottom:8px;
            display:block;
        }

        /* =========================
           SELECT
        ========================= */

        .export-task-select{
            width:100%;
            height:42px;

            border:1px solid #D1D5DB;
            border-radius:8px;

            background:#fff;

            padding:0 14px;

            font-size:13px;
            color:#111827;

            outline:none;
        }

        /* =========================
           CHECKBOX
        ========================= */

        .export-task-checkbox-wrap{
            display:flex;
            align-items:center;
            gap:8px;

            margin-top:8px;
        }

        .export-task-checkbox{
            width:16px;
            height:16px;
        }

        .export-task-checkbox-text{
            font-size:11px;
            color:#6B7280;
        }

        /* =========================
           ADVANCED
        ========================= */

        .export-task-advanced-title{
            font-size:13px;
            font-weight:600;
            color:#111827;

            margin-bottom:10px;
        }

        /* =========================
           FOOTER
        ========================= */

        .export-task-popup-footer{
            width:100%;

            padding:16px 18px;

            border-top:1px solid #ECECEC;

            background:#fff;

            display:flex;
            justify-content:space-between;
            gap:12px;
        }

        /* =========================
           BUTTONS
        ========================= */

        .export-task-cancel-btn{
            width:120px;
            height:40px;

            border:1px solid #FF5B5B;
            background:#fff;

            color:#FF5B5B;

            border-radius:6px;

            font-size:13px;
            font-weight:500;
        }

        .export-task-submit-btn{
            width:160px;
            height:40px;

            border:none;
            background:#4DA3FF;

            color:#fff;

            border-radius:6px;

            font-size:13px;
            font-weight:500;
        }

        /* =========================
           RESPONSIVE
        ========================= */

        @media(max-width:480px){

            .export-task-popup-box{
                max-width:100%;
                height:100vh;
                border-radius:0;
            }

        }



        /* ------------------------------------------------------------invoice popup------------------------------- */

   /* OPEN BUTTON */
.open-popup{
    margin:40px;
    padding:12px 22px;
    border:none;
    background:#3b82f6;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
}

/* OVERLAY */
.payment-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}

/* POPUP BOX */
.popup-box{
    width:430px;
    background:#fff;
    border-radius:12px;

    max-height:90vh;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    animation:popup .3s ease;
}

/* ANIMATION */
@keyframes popup{
    from{
        transform:scale(.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

/* SCROLL AREA */
.popup-body{
    overflow-y:auto;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

/* HIDE SCROLLBAR */
.popup-body::-webkit-scrollbar{
    display:none;
}

/* TOP */
.popup-top{
    padding:25px;
    text-align:center;
}

.check-icon{
    width:70px;
    height:70px;
    background:#f9d7f0;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
}

.check-icon i{
    width:42px;
    height:42px;
    background:#d91db7;
    border-radius:50%;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
}

.popup-top h3{
    margin:15px 0 5px;
    color:#777;
    font-size:20px;
    font-weight:500;
}

.amount{
    font-size:46px;
    font-weight:bold;
    color:#111;
}

/* DETAILS */
.popup-details{
    padding:0 25px 25px;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    margin:18px 0;
    font-size:15px;
    gap:15px;
}

.detail-row span:first-child{
    color:#777;
}

.detail-row span:last-child{
    font-weight:600;
    color:#111;
    text-align:right;
}

.line{
    border-top:1px dashed #ddd;
    margin:20px 0;
}

/* FIXED FOOTER */
.popup-footer{
    padding:20px 25px;
    border-top:1px solid #eee;
    display:flex;
    justify-content:space-between;
    background:#fff;

    position:sticky;
    bottom:0;
}

/* BUTTONS */
.cancel-btn{
    padding:10px 24px;
    border:1px solid #ff4d4d;
    background:#fff;
    color:#ff4d4d;
    border-radius:8px;
    cursor:pointer;
}

.download-btn{
    padding:10px 24px;
    border:none;
    background:#4a90ff;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
}

/* MOBILE */
@media(max-width:500px){

    .popup-box{
        width:95%;
    }

    .amount{
        font-size:38px;
    }

    .detail-row{
        font-size:13px;
    }

}


/* -------------------------------------------------taskid popup------------------------------------------------ */


.task_open_btn{
    padding:12px 20px;
    border:none;
    border-radius:8px;
    background:#4a90ff;
    color:#fff;
    cursor:pointer;
}

/* ===== OVERLAY ===== */

.task_popup_overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;
}

/* ===== POPUP ===== */

.task_popup_box{
    width:420px;
    background:#fff;
    border-radius:12px;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    max-height:90vh;
}

/* ===== HEADER ===== */

.task_popup_header{
    padding:18px;
    border-bottom:1px solid #eee;

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

.task_popup_title{
    font-size:16px;
    font-weight:600;
    color:#222;
}

.task_popup_close{
    color:#d91db7;
    font-size:18px;
    cursor:pointer;
}

/* ===== BODY ===== */

.task_popup_body{
    padding:15px;

    overflow-y:auto;

    scrollbar-width:none;
    -ms-overflow-style:none;
}

.task_popup_body::-webkit-scrollbar{
    display:none;
}

/* ===== CARD ===== */

.task_info_card{
    background:#f8f8fb;
    border:1px solid #ececf3;

    border-radius:10px;

    padding:12px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    margin-bottom:12px;
}

.task_card_left{
    display:flex;
    gap:10px;
}

.task_icon_box{
    width:28px;
    height:28px;

    border-radius:8px;

    background:#eef1f7;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#8d97ae;
    font-size:12px;
}

.task_card_content h4{
    font-size:13px;
    color:#222;
    margin-bottom:4px;
}

.task_card_content p{
    font-size:11px;
    color:#8b93a7;
    line-height:1.4;
}

.task_view_text{
    color:#d91db7;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

/* ===== TIMELINE ===== */

.task_timeline{
    margin-top:10px;
    color:#8b93a7;
    font-size:13px;
}

/* ===== FOOTER ===== */

.task_popup_footer{
    padding:14px;

    border-top:1px solid #eee;

    display:flex;
    justify-content:space-between;

    background:#fff;

    position:sticky;
    bottom:0;
}

.task_footer_left{
    display:flex;
    gap:10px;
}

/* ===== BUTTONS ===== */

.task_edit_btn,
.task_clone_btn{
    padding:10px 20px;

    border:1px solid #bbb;
    background:#fff;

    border-radius:6px;

    cursor:pointer;
}

.task_done_btn{
    padding:10px 24px;

    border:none;

    background:#4a90ff;
    color:#fff;

    border-radius:6px;

    cursor:pointer;
}

/* ===== MOBILE ===== */

@media(max-width:500px){

    .task_popup_box{
        width:95%;
    }

}


/* ---------------------------------------------trackingpopup---------------------------------------- */



.tracking_open_btn{
    margin:40px;
    padding:12px 22px;
    border:none;
    border-radius:8px;
    background:#4a90ff;
    color:#fff;
    cursor:pointer;
}

/* ===== POPUP OVERLAY ===== */

.tracking_popup_overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,0.6);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;
}

/* ===== POPUP BOX ===== */

.tracking_popup_box{
    width:900px;
    background:#fff;
    border-radius:10px;

    overflow:hidden;
}

/* ===== BODY ===== */

.tracking_popup_body{
    padding:18px;

    display:flex;
    gap:15px;
}

/* ===== MAP ===== */
.tracking_map{
    width:50%;
    height:300px;
    border-radius:8px;
    overflow:hidden;
}
.tracking_map img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ===== STATUS BOX ===== */

.tracking_status_box{
    width:50%;

    background:#f7f7f7;

    border:1px solid #eee;

    border-radius:8px;

    padding:18px;
}

.tracking_status_title{
    font-size:16px;
    font-weight:600;
    color:#222;

    margin-bottom:25px;
}

/* ===== TIMELINE ===== */

.tracking_timeline{
    position:relative;
}

.tracking_timeline::before{
    content:"";

    position:absolute;

    left:6px;
    top:5px;

    width:2px;
    height:85%;

    background:#d8d8d8;
}

/* ===== ITEM ===== */

.tracking_item{
    position:relative;

    padding-left:30px;

    margin-bottom:28px;
}

.tracking_item:last-child{
    margin-bottom:0;
}

.tracking_dot{
    position:absolute;

    left:0;
    top:3px;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#4a90ff;

    border:3px solid #dcebff;
}

.tracking_item.completed .tracking_dot{
    background:#bbb;
}

.tracking_item h4{
    font-size:13px;
    color:#222;

    margin-bottom:6px;
}

.tracking_item p{
    font-size:11px;
    color:#777;
}

.tracking_date{
    position:absolute;

    right:0;
    top:0;

    font-size:11px;
    color:#888;
}

/* ===== FOOTER ===== */

.tracking_popup_footer{
    padding:15px;

    border-top:1px solid #eee;

    display:flex;
    justify-content:center;
}

.tracking_done_btn{
    min-width:140px;

    padding:10px 20px;

    border:none;

    border-radius:6px;

    background:#4a90ff;
    color:#fff;

    cursor:pointer;
}

/* ===== MOBILE ===== */

@media(max-width:900px){

    .tracking_popup_box{
        width:95%;
    }

    .tracking_popup_body{
        flex-direction:column;
    }

    .tracking_map,
    .tracking_status_box{
        width:100%;
    }

}


/* ----------------------------------------service rate form.html------------------------------------- */


.service_rate_card{
    width:100%;
    max-width:900px;

    background:#111d35;

    border-radius:10px;

    padding:22px;

    border-left:3px solid #2f8cff;
}

/* =========================
   HEADER
========================= */

.service_rate_header{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:25px;
}

.service_rate_header i{
    color:#7aa8ff;
    font-size:14px;
}

.service_rate_header h3{
    color:#fff;
    font-size:14px;
    font-weight:500;
}

/* =========================
   TITLE
========================= */

.service_rate_title{
    color:#fff;
    font-size:18px;
    font-weight:600;

    margin-bottom:8px;
}

.service_rate_desc{
    color:#B5B5B5;
    font-size:16px;
    line-height:22px;
    font-weight: 400;

    max-width:700px;

    margin-bottom:20px;
}

/* =========================
   LABEL
========================= */

.service_rate_label{
    color:#B5B5B5;
    font-size:16px;
    margin-bottom:7px;
line-height: 22px;
    display:block;
}

/* =========================
   INPUTS
========================= */

.service_rate_input,
.service_rate_select{
    width:100%;

    height:38px;

    outline:none;

    background:#2a3550;

    border-radius:6px;

    color:#fff;

    padding:0 12px;

    font-size:12px;
}

/* =========================
   GRID
========================= */

.service_rate_grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;

    margin-top:15px;
}

/* =========================
   SMALL TEXT
========================= */

.service_rate_small_text{
    color:#B5B5B5;
    font-size:14px;
line-height: 15px;
    margin-top:6px;
    font-weight: 400;
}

/* =========================
   FLEX ROW
========================= */

.service_rate_row{
    display:flex;
    gap:10px;

    align-items:end;

    margin-top:20px;

    flex-wrap:wrap;
}

.service_rate_col{
    display:flex;
    flex-direction:column;
}

/* =========================
   SMALL INPUTS
========================= */

.service_rate_small_input{
    width:60px;
    height:38px;

    outline:none;

    background:#2a3550;

    border-radius:4px;

    color:#fff;

    text-align:center;
}

.service_rate_currency{
    width:80px;
}

.service_rate_per{
    width:90px;
}

/* =========================
   BUTTONS
========================= */

.service_rate_btns{
    display:flex;
    gap:10px;

    margin-top:35px;
}

.service_rate_save_btn{
    background:#4a90ff;
    color:#fff;

    border:none;

    padding:10px 22px;

    border-radius:4px;

    cursor:pointer;

    font-size:12px;
}

.service_rate_cancel_btn{
    background:#ff4d4d;
    color:#fff;

    border:none;

    padding:10px 22px;

    border-radius:4px;

    cursor:pointer;

    font-size:12px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .service_rate_grid{
        grid-template-columns:1fr;
    }

    .service_rate_row{
        flex-direction:column;
        align-items:stretch;
    }

    .service_rate_small_input,
    .service_rate_currency,
    .service_rate_per{
        width:100%;
    }

    .service_rate_btns{
        flex-direction:column;
    }

    .service_rate_save_btn,
    .service_rate_cancel_btn{
        width:100%;
    }

}

.servicerate{

    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 22px;
}


/* ------------------------------------------rate-table------------------------------------------------------- */

.price_table_card{
    width:100%;
    max-width:950px;

    background:#111d35;

    border-radius:10px;

    padding:20px;

    border-left:3px solid #2f8cff;
}

/* =========================
   HEADER
========================= */

.price_table_header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    flex-wrap:wrap;

    gap:15px;
}

/* =========================
   TITLE
========================= */

.price_table_title{
    color:#FFFFFF;
    font-size:18px;
    font-weight:600;

    margin-bottom:5px;
}

.price_table_desc{
    color:#B5B5B5;
    font-size:16px;

line-height: 22px;
font-weight: 500;

}

/* =========================
   BUTTON
========================= */

.price_table_btn{
    background:#4a90ff;
    color:#FFFFFF;
font-weight: 600;
    border:none;

    padding:10px 18px;

    border-radius:4px;

    font-size:16px;

    cursor:pointer;
}

/* =========================
   LINE
========================= */

.price_table_line{
    width:100%;
    height:1px;

    background:#2c3b5c;

    margin:20px 0;
}

/* =========================
   TABLE WRAPPER
========================= */

.price_table_wrapper{
    width:100%;

    overflow-x:auto;

    border-radius:10px;

    background:#000;

    min-height:260px;
}

/* HIDE SCROLLBAR */

.price_table_wrapper::-webkit-scrollbar{
    height:5px;
}

.price_table_wrapper::-webkit-scrollbar-thumb{
    background:#2f8cff;
    border-radius:10px;
}

/* =========================
   TABLE
========================= */

.price_table{
    width:100%;

    border-collapse:collapse;

    min-width:700px;
}

/* =========================
   TABLE HEAD
========================= */

.price_table thead{
    background:#fff;
}

.price_table thead th{
    color:#0B1220;

    font-size:16px;
    font-weight:600;
line-height: 22px;
    padding:14px 12px;

    text-align:left;

    border-right:1px solid #eee;
}

.price_table thead th:last-child{
    border-right:none;
}

/* =========================
   TABLE BODY
========================= */

.price_table tbody tr{
    border-bottom:1px solid #0d1b31;
}

.price_table tbody td{
    padding:16px 12px;

    color:#fff;

    font-size:16px;
}

/* =========================
   DELETE BUTTON
========================= */

.price_table_delete_btn{
    background:#ff4d4d;
    color:#fff;

    border:none;

    padding:8px 16px;

    border-radius:4px;

    font-size:11px;

    cursor:pointer;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    body{
        padding:15px;
    }

    .price_table_card{
        padding:15px;
    }

    .price_table_header{
        flex-direction:column;
        align-items:flex-start;
    }

    .price_table_btn{
        width:100%;
    }

}


/* ------------------------------------------------------Service -area.html-------------------- */

/* =========================
   MAIN BOX
========================= */

.sa_main_box{
    width:100%;
    min-height:100vh;

    padding:25px;

    background:#101c36;

    border-left:3px solid #2b8cff;
}

/* =========================
   HEADER
========================= */

.sa_header{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:35px;
}

.sa_header_icon{
    width:18px;
    height:18px;

    border:1px solid #d8d8d8;
    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;
    font-size:10px;
}

.sa_header_title{
    color:#fff;
    font-size:14px;
    font-weight:500;
}

/* =========================
   TITLE
========================= */

.sa_title{
    color:#fff;
    font-size:22px;
    font-weight:700;

    margin-bottom:10px;
}

.sa_desc{
    color:#9ca8c4;
    font-size:13px;

    margin-bottom:35px;
}

/* =========================
   LABEL
========================= */

.sa_label{
    display:block;

    color:#b7c0d6;
    font-size:13px;

    margin-bottom:8px;
}

/* =========================
   INPUT
========================= */

.sa_input,
.sa_select{
    width:100%;
    height:50px;

    border:1px solid #6b7388;
    outline:none;

    border-radius:8px;

    background:#4c556d;

    padding:0 16px;

    color:#fff;
    font-size:14px;
}

/* =========================
   GRID
========================= */

.sa_grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:20px;
}

/* =========================
   SELECT COLOR
========================= */

.sa_select option{
    background:#1c2742;
}

/* =========================
   BUTTONS
========================= */

.sa_btns{
    display:flex;
    gap:15px;

    margin-top:50px;
}

.sa_save_btn{
    min-width:95px;
    height:42px;

    border:none;

    border-radius:6px;

    background:#4a90ff;

    color:#fff;

    font-size:13px;

    cursor:pointer;
}

.sa_cancel_btn{
    min-width:95px;
    height:42px;

    border:none;

    border-radius:6px;

    background:#ff4d4d;

    color:#fff;

    font-size:13px;

    cursor:pointer;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .sa_main_box{
        padding:18px;
    }

    .sa_grid{
        grid-template-columns:1fr;
    }

    .sa_title{
        font-size:18px;
    }

    .sa_btns{
        flex-direction:column;
    }

    .sa_save_btn,
    .sa_cancel_btn{
        width:100%;
    }

}
/* ---------------------------------service-area-table------------------------------------- */
/* =========================
   MAIN CARD
========================= */

.sat_main_card{
    width:100%;

    background:#101c36;

    border-radius:12px;

    padding:22px;

    border-left:3px solid #2b8cff;
}

/* =========================
   HEADER
========================= */

.sat_header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:20px;

    flex-wrap:wrap;
}

/* =========================
   TITLE
========================= */

.sat_title{
    color:#fff;
    font-size:18px;
    font-weight:700;

    margin-bottom:6px;
}

.sat_desc{
    color:#9aa6c3;
    font-size:13px;
}

/* =========================
   BUTTON
========================= */

.sat_add_btn{
    height:42px;

    padding:0 18px;

    border:none;

    border-radius:6px;

    background:#4a90ff;

    color:#fff;

    font-size:13px;
    font-weight:500;

    cursor:pointer;
}

/* =========================
   LINE
========================= */

.sat_line{
    width:100%;
    height:1px;

    background:#49536c;

    margin:25px 0 18px;
}

/* =========================
   TABLE WRAPPER
========================= */

.sat_table_wrapper{
    width:100%;

    overflow-x:auto;

    border-radius:10px;

    background:#000;
}

/* =========================
   TABLE
========================= */

.sat_table{
    width:100%;

    min-width:850px;

    border-collapse:collapse;
}

/* =========================
   TABLE HEAD
========================= */

.sat_table thead{
    background:#fff;
}

.sat_table thead th{
    padding:14px 18px;

    text-align:left;

    color:#111827;

    font-size:13px;
    font-weight:600;
}

/* =========================
   TABLE BODY
========================= */

.sat_table tbody tr{
    border-bottom:1px solid #14233f;
}

.sat_table tbody td{
    padding:22px 18px;

    color:#fff;

    font-size:13px;
}

/* =========================
   BADGES
========================= */

.sat_badge{
    min-width:92px;
    height:34px;

    padding:0 16px;

    border-radius:6px;

    display:inline-flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    font-size:12px;
    font-weight:600;
}

.sat_purple{
    background:#c026ff;
}

.sat_green{
    background:#00d084;
}

.sat_cyan{
    background:#14d8c4;
}

/* =========================
   ACTION BUTTONS
========================= */

.sat_action_btn{
    min-width:72px;
    height:34px;

    border:none;

    border-radius:6px;

    color:#fff;

    font-size:12px;

    cursor:pointer;

    margin-right:8px;
}

.sat_edit_btn{
    background:#4a90ff;
}

.sat_delete_btn{
    background:#ff4d4d;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    body{
        padding:15px;
    }

    .sat_main_card{
        padding:15px;
    }

    .sat_header{
        flex-direction:column;
        align-items:flex-start;
    }

    .sat_add_btn{
        width:100%;
    }

}


/* --------------------------------------------------Setting-organization.html----------------------------- */
/* =========================
   MAIN SCREEN
========================= */

.ems_main{
    width:100%;
    min-height:100vh;

    background:#0f1d3a;

    padding:12px 10px 0;

    border-left:3px solid #2d8cff;
}

/* =========================
   CONTAINER
========================= */

.ems_container{
    width:100%;
    max-width:320px;
}

/* =========================
   HEADER
========================= */

.ems_header{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:18px;
}

.ems_back{
    width:18px;
    height:18px;

    border-radius:50%;

    border:1px solid #6d82b3;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#6d82b3;

    font-size:9px;
}

.ems_title{
    color:#fff;

    font-size:11px;
    font-weight:600;
}

/* =========================
   FIELD
========================= */

.ems_field{
    margin-bottom:12px;
}

.ems_label{
    display:block;

    color:#fff;

    font-size:8px;

    margin-bottom:4px;
}

.ems_small{
    color:#7584a6;

    font-size:7px;

    line-height:1.4;

    margin-bottom:4px;
}

/* =========================
   INPUT
========================= */

.ems_input,
.ems_select{
    width:100%;
    height:28px;

    border:none;
    outline:none;

    background:#4c5671;

    border-radius:2px;

    padding:0 10px;

    color:#fff;

    font-size:8px;
}

/* =========================
   CHECKBOX
========================= */

.ems_checkbox_group{
    margin-top:6px;
    margin-bottom:12px;
}

.ems_check{
    display:flex;
    align-items:flex-start;

    gap:6px;

    margin-bottom:5px;
}

.ems_check input{
    width:10px;
    height:10px;

    margin-top:1px;
}

.ems_check label{
    color:#fff;

    font-size:8px;

    line-height:1.4;
}

/* =========================
   UNIT SECTION
========================= */

.ems_unit_title{
    color:#fff;

    font-size:8px;

    margin-bottom:5px;
}

.ems_radio{
    display:flex;
    align-items:center;

    gap:6px;

    margin-bottom:4px;
}

.ems_radio input{
    width:10px;
    height:10px;
}

.ems_radio label{
    color:#fff;

    font-size:8px;
}

/* =========================
   MAP BUTTON
========================= */

.ems_map_btn{
    width:100%;
    height:22px;

    border:none;

    border-radius:2px;

    background:#4a90ff;

    color:#fff;

    font-size:7px;

    cursor:pointer;
}

/* =========================
   TOGGLE
========================= */

.ems_toggle{
    display:flex;
    align-items:center;

    gap:6px;

    margin-top:14px;
    margin-bottom:6px;
}

.ems_switch{
    width:24px;
    height:12px;

    border-radius:20px;

    background:#30d158;

    position:relative;
}

.ems_switch::before{
    content:"";

    position:absolute;

    top:1px;
    right:1px;

    width:10px;
    height:10px;

    background:#fff;

    border-radius:50%;
}

.ems_toggle_text{
    color:#fff;

    font-size:8px;
}

/* =========================
   TEXT
========================= */

.ems_text{
    color:#7c8cad;

    font-size:7px;

    line-height:1.5;

    margin-top:5px;
    margin-bottom:10px;
}

/* =========================
   FOOTER
========================= */

.ems_footer{
    width:100%;

    background:#fff;

    padding:8px;

    margin-top:18px;

    display:flex;
    justify-content:center;
}

.ems_done_btn{
    width:130px;
    height:22px;

    border:none;

    border-radius:2px;

    background:#4a90ff;

    color:#fff;

    font-size:8px;

    cursor:pointer;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:500px){

    .ems_container{
        max-width:100%;
    }

}

.MapOverlay{
    font-size: 16px;
    color: #FFFFFF;
}

/* ----------------------------------------setting-user.html------------------------------- */
.ep_main{
    width:100%;
    min-height:100vh;

    background:#101c36;

    border-left:3px solid #2c8cff;

    padding:12px 8px 0;
}

/* =========================
   CONTAINER
========================= */

.ep_container{
    width:100%;
    max-width:520px;
    background-color: #172135;
    border-radius: 5px;
    padding: 15px;
}

/* =========================
   FIELD
========================= */

.ep_field{
    margin-bottom:10px;
}

/* =========================
   LABEL
========================= */

.ep_label{
    display:block;
font-weight: 400;
    color:#B5B5B5;
line-height: 22px;
    font-size:16px;

    margin-bottom:4px;
}

/* =========================
   INPUT
========================= */

.ep_input{
    width:100%;
    height:42px;

    border:none;
    outline:none;

    border-radius:5px;

    background:#4c5670;

    padding:0 8px;

    color:#fff;

    font-size:16px;
}

/* =========================
   BUTTON WRAP
========================= */

.ep_btn_wrap{
    margin-top:10px;
    margin-bottom:16px;
}

/* =========================
   CHANGE PASSWORD BUTTON
========================= */

.ep_change_btn{
    width:100%;
    height:42px;

    border:none;

    border-radius:6px;

    background:#4a90ff;

    color:#FFFFFF;

    font-size:16px;

    cursor:pointer;
}

/* =========================
   SECTION TITLE
========================= */

.ep_section_title{
    color:#B5B5B5;

    font-size:16px;

    margin-bottom:8px;
}

/* =========================
   CHECKBOX GROUP
========================= */

.ep_checkbox_group{
    margin-bottom:20px;
}

/* =========================
   CHECKBOX
========================= */

.ep_check{
    display:flex;
    align-items:center;

    gap:6px;

    margin-bottom:5px;
}

.ep_check input{
    width:18px;
    height:18px;
    border-radius: 5px;
}

.ep_check label{
    color:#FFFFFF;
line-height: 22px;
    font-size:16px;
}

/* =========================
   FOOTER
========================= */

.ep_footer{
    width:100%;

    background:#ffffff;

    padding:8px;

    margin-top:10px;

    display:flex;
    justify-content:center;
}

/* =========================
   DONE BUTTON
========================= */

.ep_done_btn{
    /* width:110px; */
    height:46px;

    border:none;

    border-radius:6px;

    background:#4a90ff;

    color:#fff;

    font-size:16px;

    cursor:pointer;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:500px){

    .ep_container{
        max-width:100%;
    }

}


/* ------------------------------------------ settings organization ------------------------------- */

 .main-card4{
      width:100%;
      background:#111827;
      border-radius:10px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.05);
    }

    .card-body-custom{
      padding:16px 14px 20px;
    }

    /* TOP BUTTON */

    .top-btn{
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:#2d8cff;
      border:none;
      color:#fff;
      font-size:10px;
      font-weight:600;
      padding:6px 12px;
      border-radius:7px;
      margin-bottom:16px;
    }

    .top-btn .icon{
      width:14px;
      height:14px;
      border-radius:50%;
      background:#fff;
      color:#2d8cff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:9px;
      font-weight:700;
    }

    /* LABEL */

    .custom-label{
      color:#B5B5B5;
      font-size:16px;
      margin-bottom:5px;
      line-height:1.4;
      display:block;
      font-weight: 400;
    }

    /* INPUT */

    .custom-input,
    .custom-select{
      width:100%;
      height:42px;
      border:none;
      background:#465167;
      border-radius:6px;
      padding:0 10px;
      color:#fff;
      font-size:10px;
      outline:none;
      margin-bottom:12px;
    }

    .custom-input::placeholder{
      color:#d1d5db;
      font-size: 16px;
      line-height: 22px;
    }

    .custom-select::placeholder{
line-height: 22px;
        font-size: 16px;
    }
    .custom-input:focus,
    .custom-select:focus{
      background:#465166;
      color:#fff;
      box-shadow:none;
      font-size: 16px;
    }

    /* CHECKBOX */
.option-list{
    margin-top:12px;

}

.option-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
    font-size: 16px;
}

.option-item input{
    margin-top:13px;
    accent-color:#2d8cff;
    width:18px;
    height:18px;
    flex-shrink:0;
    font-size: 16px;
    border-radius: 15px;


}

.option-item label{
    color:#fff;
    font-size:16px;
    line-height:1.4;
}


/* RADIO */

.unit-title{
    color:#fff;
    font-size:16px;
    margin-top:15px;
    margin-bottom:10px;
}

.unit-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:15px;
}

.unit-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.unit-item input{
    width:15px;
    height:15px;
    accent-color:#2d8cff;
    font-size: 16px;
}

.unit-item label{
    color:#fff;
    font-size:11px;
}

    /* RADIO */

    .unit-title{
      color:#d1d5db;
      font-size:9px;
      margin-top:8px;
      margin-bottom:8px;
    }

    .radio-wrap{
      display:flex;
      /* flex-direction:column; */
      gap:6px;
      margin-bottom:10px;
    }

    .radio-item{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .radio-item input{
      accent-color:#2d8cff;
    }

    .radio-item label{
      color:#d1d5db;
      font-size:9px;
    }

    /* BLUE BUTTON */

    .blue-btn{
      width:100%;
      height:42px;
      background:#2d8cff;
      border:none;
      border-radius:6px;
      color:#fff;
      font-size:16px;
      font-weight:500;
      margin-bottom:12px;
      background-color: #4DA3FF;
    }

    /* TOGGLE */

    .toggle-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:10px;
    }

    .toggle-row span{
      color:#d1d5db;
      font-size:9px;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 28px;
      height: 15px;
    }

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #4b5563;
      transition: .3s;
      border-radius: 20px;
    }

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

    .switch input:checked + .slider {
      background-color: #22c55e;
    }

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

    /* PARAGRAPH */

    .small-para{
      color:#FFFFFF;
      font-size:16px;
      line-height:24px;
      margin-bottom:10px;

      font-weight: 400;
    }

    /* FOOTER */

    .footer-box{
      background:#f3f4f6;
      padding:12px;
      text-align:center;
    }

    .done-btn{
      width:140px;
      height:26px;
      border:none;
      border-radius:4px;
      background:#4da3ff;
      color:#fff;
      font-size:10px;
      font-weight:600;
    }

    /* RESPONSIVE */

    @media(max-width:400px){

      .main-card{
        max-width:100%;
      }

    }
.card-body-custom{
    padding:16px 14px 20px;
    flex:1;
    overflow-y:auto;
    /* footer overlap avoid */
    padding-bottom:90px;
}

.Vehicle{
color:#FFFFFF;
font-size: 16px;
line-height: 18px;
margin-top: 8px;
}

.SAML{
color: #FFFFFF;
font-size: 16px;
line-height: 22px;

}


.blue-btn2{
   width:100%;
      height:66px;
      background:#2d8cff;
      border-radius:6px;
      color:#fff;
      font-size:16px;
      font-weight:500;
      margin-bottom:12px;
      background-color: #465167;
      text-align: left;
      border-left-color: #FFFFFF;


}


.Single{

    font-size: 16px;
    font-weight: 400;
    color:#B5B5B5;
}



.Enforce{

    color: #FFFFFF;
font-weight: 500;
line-height: 22px



}
    /* --------------------------------- change password popup------------------------------------ */

     .open-popup-btn{
            border:none;
            background:#5da8ff;
            color:#fff;
            padding:14px 28px;
            border-radius:10px;
            font-size:16px;
            font-weight:500;
        }

        /* =========================
           CHANGE PASSWORD POPUP
        ========================== */

        .change-password-popup-overlay{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,0.45);
            display:none;
            align-items:center;
            justify-content:center;
            padding:15px;
            z-index:9999;
        }

        .change-password-popup-overlay.active{
            display:flex;
        }

        .change-password-popup-main{
            width:100%;
            max-width:420px;
            height:330px;
            background:#ffffff;
            border-radius:18px;
            overflow:hidden;
            position:relative;
            box-shadow:0 15px 40px rgba(0,0,0,0.25);
        }

        /* BODY */

    /* POPUP BODY */

.change-password-popup-body{
    padding:18px 18px 100px;
    overflow-y:auto;
    height:100%;

    /* Hide Scrollbar */
    scrollbar-width:none;          /* Firefox */
    -ms-overflow-style:none;       /* IE and Edge */
}

/* Hide Scrollbar Chrome/Safari */

.change-password-popup-body::-webkit-scrollbar{
    display:none;
}
        /* INPUT */

        .change-password-popup-input{
            width:100%;
            height:48px;
            border:1px solid #e5e7eb;
            border-radius:10px;
            background:#fafafa;
            padding:0 14px;
            font-size:14px;
            color:#111827;
            outline:none;
            margin-bottom:14px;
        }

        .change-password-popup-input::placeholder{
            color:#98a2b3;
        }

        .change-password-popup-input:focus{
            border-color:#60a5fa;
            background:#fff;
        }

        /* TEXT */

        .change-password-popup-text{
            font-size:14px;
            color:#2d3748;
            line-height:1.5;
            margin-bottom:14px;
            font-weight:500;
        }

        /* FOOTER */

        .change-password-popup-footer{
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            background:#f8f8f8;
            border-top:1px solid #ececec;
            padding:16px 18px;

            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }

        /* BUTTON */

        .change-password-popup-cancel-btn{
            min-width:110px;
            height:44px;
            border:1.5px solid #ff7b7b;
            background:#fff;
            color:#ff4d4d;
            border-radius:8px;
            font-size:15px;
            font-weight:500;
        }

        .change-password-popup-submit-btn{
            flex:1;
            height:44px;
            border:none;
            background:#5da8ff;
            color:#fff;
            border-radius:8px;
            font-size:15px;
            font-weight:500;
        }

        /* RESPONSIVE */

        @media(max-width:480px){

            .change-password-popup-main{
                max-width:100%;
                height:340px;
            }

            .change-password-popup-input{
                height:46px;
                font-size:13px;
            }

            .change-password-popup-text{
                font-size:13px;
            }

            .change-password-popup-cancel-btn{
                min-width:95px;
                height:42px;
                font-size:14px;
            }

            .change-password-popup-submit-btn{
                height:42px;
                font-size:14px;
            }

        }

.footer-box{
    background:#f3f4f6;
    padding:12px;
    text-align:center;

    position:sticky;
    bottom:0;

    width:100%;
    z-index:10;
}

/* BUTTON */

.done-btn{
    width:140px;
    height:26px;
    border:none;
    border-radius:4px;
    background:#4da3ff;
    color:#fff;
    font-size:10px;
    font-weight:600;
}

/* -------------------------------------- setting-teams.html----------------------------------------- */

 .team-hub-popup{
      width:100%;
      background:#101a30;
      border-radius:10px;
      overflow:hidden;
      position:relative;
      border:1px solid rgba(255,255,255,0.05);
    }

    /* BODY */

    .team-hub-popup-body{
      height:100%;
      overflow-y:auto;
      padding:18px 18px 100px;

      scrollbar-width:none;
      -ms-overflow-style:none;
    }

    .team-hub-popup-body::-webkit-scrollbar{
      display:none;
    }

    /* SECTION TITLE */

    .team-hub-title{
      color:#9ca3af;
      font-size:18px;
      margin-bottom:10px;
      font-weight:500;
    }

    /* BOX */

    .team-hub-box{
      background:#000;
      border-radius:4px;
      overflow:hidden;
      margin-bottom:14px;
    }

    .team-hub-item{
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,0.05);
    }

    .team-hub-item:last-child{
      border-bottom:none;
    }

    .team-hub-item.active{
      background:#5aa8ff;
    }

    .team-name{
      color:#fff;
      font-size:18px;
      font-weight:500;
      line-height:1.3;
    }

    .team-subtext{
      color:#cbd5e1;
      font-size:18px;
      margin-top:2px;
      line-height:1.4;
      font-weight: 500;
    }

    /* EMPTY HUB */

    .hub-empty{
      padding:28px 20px;
      text-align:center;
    }

    .hub-empty-title{
      color:#fff;
      font-size:16px;
      font-weight:500;
      margin-bottom:8px;
    }

    .hub-empty-text{
      color:#9ca3af;
      font-size:14px;
      line-height:1.6;
      max-width:250px;
      margin:auto;
      text-align: center;
    }

    .add-hub-link{
      color:#5aa8ff;
      font-size:16px;
      margin-top:12px;
      display:inline-block;
      text-decoration:underline;
    }

    /* ACTION BAR */

    .team-hub-actionbar{
      background:#f3f4f6;
      padding:8px 10px;
      border-radius:0 0 4px 4px;

      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:6px;
    }

    /* BUTTONS */

    .edit-btn{
      min-width:48px;
      height:20px;
      border:none;
      background:#5aa8ff;
      color:#fff;
      border-radius:3px;
      font-size:9px;
      font-weight:500;
    }

    .icon-btn{
      width:20px;
      height:20px;
      border:none;
      background:#111;
      color:#fff;
      border-radius:3px;
      font-size:13px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:500;
    }

    /* FOOTER */

    .team-hub-footer{
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      background:#f3f4f6;
      padding:14px;
      text-align:center;
    }

    .done-btn{
      width:220px;
      max-width:100%;
      height:32px;
      border:none;
      background:#5aa8ff;
      color:#fff;
      border-radius:4px;
      font-size:12px;
      font-weight:500;
    }

    /* RESPONSIVE */

    @media(max-width:480px){

      .team-hub-popup{
        height:95vh;
      }

      .team-hub-popup-body{
        padding:15px 15px 90px;
      }

      .team-name{
        font-size:11px;
      }

      .team-subtext{
        font-size:9px;
      }

      .hub-empty-text{
        font-size:9px;
      }

      .done-btn{
        height:30px;
        font-size:11px;
      }

    }


    /* ------------------------------ teams popup ----------------------------------- */

      /* OPEN BUTTON */

        .open-new-team-popup-btn{
            border:none;
            background:#5aa8ff;
            color:#fff;
            padding:12px 24px;
            border-radius:8px;
            font-size:14px;
            font-weight:500;
        }

        /* =========================
           NEW TEAM POPUP
        ========================== */

        .new-team-popup-overlay{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,0.45);
            display:none;
            align-items:center;
            justify-content:center;
            padding:15px;
            z-index:9999;
        }

        .new-team-popup-overlay.active{
            display:flex;
        }

        .new-team-popup-main{
            width:100%;
            max-width:360px;
            height:500px;
            background:#ffffff;
            border-radius:12px;
            overflow:hidden;
            position:relative;
            box-shadow:0 15px 40px rgba(0,0,0,0.25);
        }

        /* BODY */

        .new-team-popup-body{
            height:100%;
            overflow-y:auto;
            padding:14px 14px 90px;

            scrollbar-width:none;
            -ms-overflow-style:none;
        }

        .new-team-popup-body::-webkit-scrollbar{
            display:none;
        }

        /* HEADER */

        .new-team-popup-header{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:14px;
        }

        .new-team-popup-title{
            font-size:12px;
            color:#111827;
            font-weight:500;
        }

        .new-team-popup-close{
            width:18px;
            height:18px;
            border-radius:50%;
            border:1px solid #d946ef;
            color:#d946ef;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:10px;
            cursor:pointer;
        }

        /* LABEL */

        .new-team-popup-label{
            display:block;
            font-size:10px;
            color:#111827;
            margin-bottom:6px;
            font-weight:500;
        }

        /* INPUT */

        .new-team-popup-input{
            width:100%;
            height:34px;
            border:1px solid #ececec;
            border-radius:4px;
            padding:0 10px;
            outline:none;
            background:#fafafa;
            font-size:11px;
            color:#111827;
            margin-bottom:12px;
        }

        .new-team-popup-input::placeholder{
            color:#9ca3af;
        }

        /* DRIVER BOX */

        .new-team-popup-driver-box{
            border:1px solid #ececec;
            border-radius:4px;
            overflow:hidden;
            margin-bottom:14px;
        }

        .new-team-popup-search{
            width:100%;
            height:34px;
            border:none;
            border-bottom:1px solid #ececec;
            padding:0 10px;
            outline:none;
            background:#f5f5f5;
            font-size:11px;
        }

        .new-team-popup-driver-item{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:10px;
        }

        .new-team-popup-driver-left{
            line-height:1.4;
        }

        .new-team-popup-driver-name{
            font-size:12px;
            color:#111827;
        }

        .new-team-popup-driver-team{
            font-size:10px;
            color:#6b7280;
        }

        .new-team-popup-checkbox{
            width:12px;
            height:12px;
        }

        /* DISPATCHER */

        .new-team-popup-dispatcher{
            width:100%;
            height:34px;
            background:#dcdcdc;
            border-radius:4px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:11px;
            color:#6b7280;
            margin-bottom:16px;
        }

        /* HUB */

        .new-team-popup-hub-text{
            font-size:11px;
            color:#111827;
            margin-top:4px;
        }

        /* FOOTER */

        .new-team-popup-footer{
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            background:#f8f8f8;
            border-top:1px solid #ececec;
            padding:12px 14px;

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

        /* BUTTON */

        .new-team-popup-cancel-btn{
            min-width:70px;
            height:30px;
            border:1px solid #ff7b7b;
            background:#fff;
            color:#ff4d4d;
            border-radius:4px;
            font-size:11px;
            font-weight:500;
        }

        .new-team-popup-submit-btn{
            min-width:105px;
            height:30px;
            border:none;
            background:#5aa8ff;
            color:#fff;
            border-radius:4px;
            font-size:11px;
            font-weight:500;
        }

        /* RESPONSIVE */

        @media(max-width:480px){

            .new-team-popup-main{
                max-width:100%;
                height:95vh;
            }

        }


        /* ----------------------------------------------popup temas extra ------------------------------- */

         .open-new-hub-popup-btn{
            border:none;
            background:#5aa8ff;
            color:#fff;
            padding:12px 24px;
            border-radius:8px;
            font-size:14px;
            font-weight:500;
        }

        /* =========================
           NEW HUB POPUP
        ========================== */

        .new-hub-popup-overlay{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,0.45);
            display:none;
            align-items:center;
            justify-content:center;
            padding:15px;
            z-index:9999;
        }

        .new-hub-popup-overlay.active{
            display:flex;
        }

        .new-hub-popup-main{
            width:100%;
            max-width:360px;
            height:500px;
            background:#ffffff;
            border-radius:12px;
            overflow:hidden;
            position:relative;
            box-shadow:0 15px 40px rgba(0,0,0,0.25);
        }

        /* BODY */

        .new-hub-popup-body{
            height:100%;
            overflow-y:auto;
            padding:14px 14px 90px;

            scrollbar-width:none;
            -ms-overflow-style:none;
        }

        .new-hub-popup-body::-webkit-scrollbar{
            display:none;
        }

        /* HEADER */

        .new-hub-popup-title{
            font-size:13px;
            color:#111827;
            font-weight:600;
            margin-bottom:2px;
        }

        .new-hub-popup-subtitle{
            font-size:10px;
            color:#9ca3af;
            margin-bottom:14px;
        }

        /* LABEL */

        .new-hub-popup-label{
            display:block;
            font-size:10px;
            color:#111827;
            margin-bottom:6px;
            font-weight:500;
        }

        /* INPUT */

        .new-hub-popup-input{
            width:100%;
            height:34px;
            border:1px solid #ececec;
            border-radius:4px;
            padding:0 10px;
            outline:none;
            background:#fafafa;
            font-size:11px;
            color:#111827;
            margin-bottom:10px;
        }

        .new-hub-popup-input::placeholder{
            color:#9ca3af;
        }

        /* TEAM BOX */

        .new-hub-popup-team-box{
            border:1px solid #ececec;
            border-radius:4px;
            overflow:hidden;
            margin-top:4px;
        }

        .new-hub-popup-team-item{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:10px;
        }

        .new-hub-popup-team-left{
            line-height:1.4;
        }

        .new-hub-popup-team-name{
            font-size:12px;
            color:#111827;
        }

        .new-hub-popup-team-info{
            font-size:10px;
            color:#6b7280;
        }

        .new-hub-popup-checkbox{
            width:12px;
            height:12px;
        }

        /* FOOTER */

        .new-hub-popup-footer{
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            background:#f8f8f8;
            border-top:1px solid #ececec;
            padding:12px 14px;

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

        /* BUTTON */

        .new-hub-popup-cancel-btn{
            min-width:70px;
            height:30px;
            border:1px solid #ff7b7b;
            background:#fff;
            color:#ff4d4d;
            border-radius:4px;
            font-size:11px;
            font-weight:500;
        }

        .new-hub-popup-submit-btn{
            min-width:105px;
            height:30px;
            border:none;
            background:#5aa8ff;
            color:#fff;
            border-radius:4px;
            font-size:11px;
            font-weight:500;
        }

        /* RESPONSIVE */

        @media(max-width:480px){

            .new-hub-popup-main{
                max-width:100%;
                height:95vh;
            }

        }


        /* ------------------------------------------------dispatacher-list.html ------------------------------------ */


    .dispatchers-page{
      width:100%;
      min-height:100vh;
      background:#121f3a;
      position:relative;
      overflow:hidden;
    }

    /* BODY */

    .dispatchers-page-body{
      padding:18px 16px 90px;
    }

    /* TITLE */

    .dispatchers-title{
      color:#B5B5B5;
      font-size:16px;
      margin-bottom:8px;
      font-weight:500;
    }

    /* LIST */

    .dispatchers-list{
      width:100%;
      max-width:705px;
      background:#000;
      border-radius:4px 4px 0 0;
      overflow:hidden;
      height: 400px;
    }

    .dispatchers-item{
      padding:8px 10px;
    }

    .dispatchers-item.active{
      background:#58a8ff;
      border:1px solid #7dc0ff;
    }

    .dispatchers-name{
      
      font-size:16px;
      font-weight:500;
      line-height:1.2;
      color: #FFFFFF;
    }

    .dispatchers-team{
      color:#B5B5B5;
      font-size:16px;
      margin-top:2px;
      line-height:1.2;
    }

    /* EMPTY BLACK AREA */

    .dispatchers-empty{
      height:105px;
      background:#000;
    }

    /* ACTION BAR */

    .dispatchers-actionbar{
      width:100%;
      max-width:705px;
      background:#f4f4f4;
      padding:4px 6px;
      border-radius:0 0 4px 4px;

      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:4px;
    }

    /* BUTTONS */

    .dispatchers-edit-btn{
      min-width:46px;
      height:34px;
      border:none;
      background:#58a8ff;
      color:#fff;
      border-radius:2px;
      font-size:16px;
      font-weight:500;
      display:flex;
      align-items:center;
      justify-content:center;
      line-height: 22px;

    }

    .dispatchers-icon-btn{
      width:34px;
      height:34px;
      border:none;
      background:#1a1a1a;
      color:#fff;
      border-radius:2px;
      font-size:15px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:600;
      padding:0;
    }

    /* CHECKBOX */

    .dispatchers-checkbox{
      margin-top:12px;
      display:flex;
      align-items:center;
      gap:6px;
    }

    .dispatchers-checkbox input{
      width:18px;
      height:18px;
      accent-color:#58a8ff;
      border-radius: 10px;
    }

    .dispatchers-checkbox label{
      color:#B5B5B5;
      font-size:14px;
      margin:0;
    }

    /* FOOTER */

    .dispatchers-footer{
      position:fixed;
      bottom:0;
      left:0;
      width:100%;
      background:#f4f4f4;
      padding:12px;
      text-align:center;
    }

    .dispatchers-done-btn{
      width:320px;
      max-width:100%;
      height:42px;
      border:none;
      background:#58a8ff;
      color:#fff;
      border-radius:3px;
      font-size:16px;
      font-weight:500;
    }

    /* RESPONSIVE */

    @media(max-width:480px){

      .dispatchers-page-body{
        padding:14px 14px 85px;
      }

      .dispatchers-list,
      .dispatchers-actionbar{
        max-width:100%;
      }

    }


    /* ---------------------------------------------setting-organization-------------------------------- */
    .imggggg{
        width: 85px;
        height: 85px;
    }


    /* --------------------------------------------------landing-page---------------------------- */

/* Navbar */

.custom-navbar{
    background:#091223;
    padding:15px 0;
}

.logo-icon{
    width:18px;
    height:18px;
    border-radius:5px;
    background:linear-gradient(135deg,#7d5cff,#00d4ff);
    margin-right:8px;
}

.navbar-brand{
    color:#fff;
    font-size:18px;
    font-weight:600;
}

.nav-link{
    color:#fff !important;
    margin:0 12px;
    font-size:15px;
    font-weight: 500;
    font-family: 'poppins';
}

.login-btn{
    background:#4da3ff;
    color:#fff;
    padding:10px 22px;
    border-radius:8px;
    margin-left:15px;
}

.login-btn:hover{
    background:#2d89f5;
    color:#fff;
}

/* Hero */

.hero-section{
    position:relative;
    min-height:730px;
    background:url('https://apptechmobile.com/apptech/Onfleet/assets/images/landing-page.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);
}

.hero-content{
    position:relative;
    z-index:2;
    min-height:500px;
    font-family: 'poppins';
}

.hero-text h1{
    color:#fff;
    font-size:76px;
    line-height:0.95;
    font-weight:800;
    margin-bottom:25px;
        font-family: 'poppins';

}

.hero-text p{
    color:#fff;
    font-size:22px;
    font-weight:400;
 font-family: 'poppins';

}

/* Card */
.booking-card {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  margin-left: 50px;
}

.booking-card h5 {
  font-size: 32px;
  font-weight: 700;
  color: #152238;
  font-family: 'poppins';
}

.sub-text {
  color: #7b7b7b;
  margin-top: 10px;
  margin-bottom: 30px;
    font-family: 'poppins';

}

.location-wrapper {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.location-icons {
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pickup-icon {
  width: 20px;
  height: 20px;
  border: 3px solid #111827;
  border-radius: 50%;
  position: relative;
}

.pickup-icon::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #111827;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}

.line {
  width: 2px;
  height: 85px;
  background: #111827;
  border-style: dashed;
}

.drop-icon {
margin-top: 10px;
  object-fit: contain;
}

.location-inputs {
  flex: 1;
}

.location-inputs input {
  width: 100%;
  height: 48px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 0 15px;
  margin-bottom: 12px;
  outline: none;
    font-family: 'poppins';

}

.location-inputs input:focus {
  border-color: #4a97f0;
}

.book-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 8px;
  background: #4a97f0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
    font-family: 'poppins';

}

.tracking-text {
  text-align: center;
  margin-top: 18px;
  color: #444;
  font-size: 14px;
    font-family: 'poppins';

}

@media (max-width: 767px) {

  .booking-card {
    padding: 20px;
  }

  .booking-card h5 {
    font-size: 24px;
  }

  .location-wrapper {
    gap: 10px;
  }

  .line {
    height: 75px;
  }

  .book-btn {
    font-size: 18px;
  }
}
/* Tablet */

@media(max-width:991px){

    .hero-section{
        padding:80px 0;
    }

    .hero-text{
        text-align:center;
        margin-bottom:40px;
    }

    .hero-text h1{
        font-size:55px;
    }

    .booking-card{
        margin:auto;
    }

    .navbar-nav{
        text-align:center;
        margin-top:15px;
    }

    .login-btn{
        margin-left:0;
        margin-top:15px;
    }
}

/* Mobile */

@media(max-width:576px){

    .hero-text h1{
        font-size:42px;
        line-height:1;
    }

    .hero-text p{
        font-size:18px;
    }

    .booking-card{
        padding:20px;
    }

    .login-btn{
        width:100%;
    }
}

.Send{
    font-weight: 700;
    font-family: 'poppins';
    font-size: 40px;
    line-height: 60px;
    color: #FFFFFF;

}


.working-process-section{
    padding:80px 0;
    background:#ffffff;
}

.section-heading{
    margin-bottom:40px;
}

.section-heading h2{
    font-size:48px;
    font-weight:700;
    color:#101828;
    margin-bottom:10px;
    font-family:'Poppins',sans-serif;
}

.section-heading p{
    max-width:520px;
    color:#7C8BA0;

    font-size:18px;
    line-height:1.6;
    margin:0;

}

.process-card{
    background:#0B1220;
    border-radius:12px;
    padding:22px;
    min-height:310px;
    transition:0.3s ease;
}

.process-card:hover{
    transform:translateY(-5px);
}

.icon-box{
    width:79px;
    height:79px;
    background:#fff;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    border-radius: 10px;
}

.icon-box img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.process-card h4{
    color:#fff;
    font-size:22px;
    font-weight:600;
    margin-bottom:10px;
    line-height:1.4;
    font-family: 'poppins';
    margin-top: 95px;
}

.process-card p{
    color:#D0D5DD;
    font-size:18px;
    line-height:23px;
    margin:0;
    color: #FFFFFF;
    line-height: 23px;
}

/* Tablet */

@media(max-width:991px){

    .section-heading h2{
        font-size:38px;
    }

    .process-card{
        min-height:auto;
    }
}

/* Mobile */

@media(max-width:767px){

    .working-process-section{
        padding:60px 0;
    }

    .section-heading{
        text-align:center;
    }

    .section-heading h2{
        font-size:30px;
    }

    .section-heading p{
        margin:auto;
    }

    .process-card{
        text-align:left;
    }
}

.custom-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}


.OurWorking{
    font-weight: 600;
    font-size: 46px;
    font-family: 'poppins';
}


.who-we-are-section{
    position:relative;
    padding:60px 80px;
    overflow:hidden;

    /* Apni image yahan lagao */
    background:url('https://apptechmobile.com/apptech/Onfleet/assets/images/landing-background.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.custom-fluid{
    max-width:1400px;
}

/* Dark Overlay */

.who-we-are-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.custom-fluid{
    position:relative;
    z-index:2;
}

.who-content h2{
    color:#fff;
    font-size:48px;
    font-weight:700;
    margin-bottom:10px;
    font-family:'Poppins',sans-serif;
}

.who-content p{
    color:#ffffff;
    font-size:18px;
    line-height:1.7;
    max-width:420px;
    font-weight: 400;
    margin:0;
}

.stats-wrapper{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px 80px;
    justify-content:center;
}

.stat-box h3{
    color:#fff;
    font-size:60px;
    font-weight:700;
    line-height:1;
    margin-bottom:8px;
    font-family:'Poppins',sans-serif;
}

.stat-box span{
    color:#fff;
    font-size:18px;
    display:block;
    line-height: 22px;
    font-weight: 500;
}

/* Tablet */
.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

/* Large Tablet */
@media(max-width:991px){

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* Mobile */
@media(max-width:576px){

    .process-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:991px){

    .who-we-are-section{
        padding:50px 30px;
    }

    .who-content{
        text-align:center;
        margin-bottom:40px;
    }

    .who-content p{
        max-width:100%;
    }

    .stats-wrapper{
        gap:30px;
    }

    .stat-box{
        text-align:center;
    }
}

/* Mobile */

@media(max-width:576px){

    .stats-wrapper{
        grid-template-columns:1fr;
    }

    .who-content h2{
        font-size:34px;
    }

    .stat-box h3{
        font-size:42px;
    }

    .who-we-are-section{
        padding:40px 20px;
    }
}

.Whoweare{
    font-size: 46px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 75px;
}
.hundred{
    font-size: 75px;
    font-weight: 600;
    color: #FFFFFF;

}



.services-section{
    padding:80px 0;
    background:#fff;
}

.custom-container{
    max-width:1200px;
    margin:auto;
    padding:0 15px;
}

.services-grid{
    display:grid;
    grid-template-columns:240px repeat(3, 1fr);
    gap:18px;
}

.services-title h2{
    font-size:32px;
    font-weight:700;
    line-height:1.05;
    color:#111827;
    margin:0;
    font-family:'Poppins',sans-serif;
}

.service-card{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:10px;
    overflow:hidden;
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.service-card img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
    padding:6px;
    border-radius:15px;
}

.service-content{
    padding:10px;
    margin-bottom: 30px;
}

.service-content h4{
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
    color:#0B1220;
    line-height: 25px;
    font-family:'Poppins',sans-serif;
}

.service-content p{
    font-size:14px;
    line-height:18px;
    color:#0B1220;
    margin:0;
}

.service-content a{
    color:#3B82F6;
    text-decoration:none;
}

.empty-space{
    display:block;
}

/* Tablet */

@media(max-width:991px){

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .services-title{
        grid-column:1/-1;
    }

    .empty-space{
        display:none;
    }

    .services-title h2{
        font-size:40px;
    }
}

/* Mobile */

@media(max-width:576px){

    .services-grid{
        grid-template-columns:1fr;
    }

    .services-title h2{
        font-size:30px;
        line-height:1.1;
    }

    .service-card img{
        height:180px;
    }
}

.Services{
    color: #0B1220;
    font-size: 46px;
    line-height: 50px;
    font-weight: 600;

}



.latest-news-section{
    background:#071328;
    padding:80px 0;
}

.custom-container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.section-header{
    margin-bottom:35px;
}

.section-header .Read{
    color:#fff;
    font-size:42px;
    font-weight:600;
    margin-bottom:10px;
    font-family: 'poppins';
    line-height: 76px;
}

.section-header p{
    color:#c5ccda;
    font-size:18px;
    /* line-height:133px; */
}

/* Cards Row */

.news-wrapper{
    display:flex;
    gap:24px;
}

.news-card{
    flex:1;
}

.news-image{
    position:relative;
    overflow:hidden;
    border-radius:8px;
}

.news-image img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
    border-radius:8px;
}

.read-more-overlay{
    position:absolute;
    inset:10px;
    background:rgba(0,0,0,0.45);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:600;
}

.news-content{
    margin-top:12px;
}

.news-date{
    color:#c5ccda;
    font-size:12px;
    margin-bottom:10px;
}

.news-content h4{
    color:#fff;
    font-size:24px;
    font-weight:600;
    line-height:1.3;
    margin-bottom:10px;
}

.news-content p{
    color:#c5ccda;
    font-size:13px;
    line-height:1.6;
}

/* Tablet */

@media(max-width:991px){

    .news-wrapper{
        flex-wrap:wrap;
    }

    .news-card{
        width:calc(50% - 12px);
        flex:none;
    }

}

/* Mobile */

@media(max-width:576px){

    .section-header h2{
        font-size:34px;
    }

    .news-wrapper{
        flex-direction:column;
    }

    .news-card{
        width:100%;
    }

    .news-image img{
        height:220px;
    }

    .news-content h4{
        font-size:20px;
    }

}



.faq-section{
    padding:80px 0;
    background:#ffffff;
}

.custom-container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.faq-layout{
    display:flex;
    gap:80px;
}

/* Left Side */

.faq-left{
    width:320px;
    flex-shrink:0;
}

.faq-left h2{
    font-size:48px;
    line-height:1;
    font-weight:700;
    color:#071328;
    margin-bottom:15px;
}

.faq-left p{
    color:#98A2B3;
    font-size:13px;
}

/* Right Side */

.faq-right{
    flex:1;
}

.faq-item{
    border-bottom:1px solid #E4E7EC;
    padding:22px 0;
}

.faq-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    gap:20px;
}

.faq-header h4{
    margin:0;
    color:#0D100F;
    font-size:22px;
    font-weight:600;
    line-height:1.4;
    font-family: 'poppins';
}




.faq-content p{
    color:#667085;
    font-size:14px;
    line-height:1.8;
    margin:0;
}

/* Active FAQ */

.faq-btn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
}

.faq-arrow{
    width:34px;
    height:34px;
    object-fit:contain;
    display:block;
}

.faq-content{
    display:none;
}

.faq-item.active .faq-content{
    display:block;
}
/* Tablet */

@media(max-width:991px){

    .faq-layout{
        flex-direction:column;
        gap:40px;
    }

    .faq-left{
        width:100%;
    }

    .faq-left h2{
        font-size:38px;
    }
}

/* Mobile */

@media(max-width:576px){

    .faq-section{
        padding:60px 0;
    }

    .faq-left h2{
        font-size:30px;
    }

    .faq-header h4{
        font-size:16px;
    }

    .faq-btn{
        min-width:34px;
    }

    .faq-content p{
        font-size:13px;
    }
}




.Frequently{
    font-size: 46px;
    font-weight: 600;
    font-family: 'poppins';
    line-height: 55px;

}


.footer-section{
    background:#071328;
    padding:70px 0 25px;
    color:#fff;
}

.custom-container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.footer-top{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.3fr;
    gap:50px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

/* Logo */

.footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.footer-logo img{
    width:40px;
}

.footer-logo span{
    font-size:28px;
    font-weight:700;
}

.footer-about p{
    color:#B8C0D0;
    font-size:14px;
    line-height:1.8;
    max-width:250px;
    font-weight: 400;
    font-family: 'poppins';
}

/* Titles */

.footer-col h4{
    font-size:16px;
    font-weight:600;
    margin-bottom:20px;
    color:#fff;
    font-family: 'poppins';
}

/* Links */

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-col ul li{
    margin-bottom:12px;
}

.footer-col ul li a{
    color:#B8C0D0;
    text-decoration:none;
    font-size:14px;
    transition:.3s;
    font-weight: 400;
    font-family: 'poppins';
}

.footer-col ul li a:hover{
    color:#4DA3FF;
}

/* Newsletter */

.newsletter-form{
    display:flex;
    margin-bottom:20px;
}

.newsletter-form input{
    flex:1;
    height:48px;
    border:1px solid rgba(255,255,255,0.2);
    background:transparent;
    color:#fff;
    border-radius:6px 0 0 6px;
    padding:0 15px;
    outline:none;
}

.newsletter-form button{
    width:100px;
    border:none;
    background:#4DA3FF;
    color:#fff;
    border-radius:0 6px 6px 0;
    font-weight:600;
}

/* Social */

.social-icons{
    display:flex;
    gap:12px;
}

.social-icons a{
    width:auto;
    height:auto;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.social-icons a:hover{
    background:#4DA3FF;
    border-color:#4DA3FF;
}

/* Bottom */

.footer-bottom{
    text-align:center;
    padding-top:25px;
    color:#B8C0D0;
    font-size:13px;
}

.footer-bottom span{
    color:#4DA3FF;
}

/* Responsive */

@media(max-width:991px){

    .footer-top{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }
}

@media(max-width:576px){

    .footer-top{
        grid-template-columns:1fr;
    }

    .footer-logo span{
        font-size:24px;
    }

    .newsletter-form{
        flex-direction:column;
        gap:10px;
    }

    .newsletter-form input,
    .newsletter-form button{
        width:100%;
        border-radius:6px;
    }
}


/* -------------------------------------------------popup--------------------------- */

.otp-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.otp-modal.active{
    display:flex;
}
.otp-popup{
    width:100%;
    max-width:660px;
    background:#fff;
    border-radius:18px;
    padding:20px;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
}

.close-btn{
    position:absolute;
    right:18px;
    top:18px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #dcdcdc;
    background:#fff;
    cursor:pointer;
    font-size:16px;
}

.otp-popup h2{
    font-size:17px;
    font-weight:500;
    color:#0B1220;
    line-height: 26px;
    font-family: 'poppins';
}

.sub-title{
    color:#7C8BA0;
    font-size:14px;
    /* margin-bottom:20px; */
    font-weight: 400;
    line-height: 20px;
    font-family: 'poppins';
    margin-top: -5px;
    
}




.divider{
    height:1px;
    background:#E5E7EB;
    margin-bottom:20px;
}

.phone-group{
    display:flex;
    gap:12px;
    margin-bottom:20px;
}

.country-code{
    width:90px;
    height:46px;
    border:1px solid #E5E7EB;
    border-radius:8px;
    outline:none;
    padding:0 10px;
    font-size:15px;
}

.phone-input{
    flex:1;
    height:46px;
    border:1px solid #E5E7EB;
    border-radius:8px;
    padding:0 16px;
    outline:none;
    font-size:15px;
}
.privacy-check{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:20px 0 10px;
}

.privacy-check input[type="checkbox"]{
    margin-top:4px;
    width:18px;
    height:18px;
    flex-shrink:0;
}

.privacy-check label{
    font-size:15px;
    color:#667085;
    line-height:1.7;
    margin:0;
}

.privacy-check a{
    color:#4D9CFF;
    text-decoration:none;
}

.privacy-text{
    color:#7C8BA0;
    font-size:13px;
    line-height:16px;
    margin-bottom:20px;
}

.otp-btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:10px;
    background:#4D9CFF;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

/* Tablet */

@media(max-width:768px){

    .otp-popup{
        padding:25px;
    }

    .otp-popup h2{
        font-size:26px;
    }

    .sub-title{
        font-size:14px;
    }
}

/* Mobile */

@media(max-width:576px){

    .otp-popup{
        padding:20px;
        border-radius:14px;
    }

    .phone-group{
        flex-direction:column;
    }

    .country-code{
        width:100%;
    }

    .otp-popup h2{
        font-size:22px;
    }

    .privacy-check span,
    .privacy-text{
        font-size:13px;
    }

    .otp-btn{
        height:50px;
    }
}

/* -----------------------------popup verify------------------------------0*/

.verify-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:20px;
}

.verify-popup-overlay.active{
    display:flex;
}

.verify-popup-box{
    width:100%;
    max-width:620px;
    background:#fff;
    border-radius:16px;
    padding:20px;
    position:relative;
}

.verify-close-btn{
    position:absolute;
    right:15px;
    top:15px;
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
}

.verify-popup-box h2{
  font-size:17px;
    font-weight:500;
    color:#0B1220;
    line-height: 26px;
    font-family: 'poppins';
}

.verify-popup-box p{
    color:#7C8BA0;
    font-size:14px;
    /* margin-bottom:20px; */
    font-weight: 400;
    line-height: 20px;
    font-family: 'poppins';
    margin-top: -5px;
}

.verify-divider{
    height:1px;
    background:#E5E7EB;
    margin-bottom:20px;
}

.otp-input-wrapper{
    display:flex;
    gap:10px;
    margin-bottom:25px;
}

.otp-input{
    width:42px;
    height:42px;
    border:1px solid #E5E7EB;
    border-radius:8px;
    text-align:center;
    font-size:18px;
    font-weight:600;
    outline:none;
}

.otp-timer{
    color:#7C8BA0;
    font-size:14px;
    margin-bottom:30px;
    font-weight: 400;
}

.verify-btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:10px;
    background:#4D9CFF;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

@media(max-width:576px){

    .verify-popup-box{
        padding:15px;
    }

    .otp-input{
        width:38px;
        height:38px;
    }

    .otp-input-wrapper{
        justify-content:center;
    }
}


/* Address-book.html css popup */


.booking-step-section{
    padding:50px 15px;
    background:#fff;
}

.custom-container{
    max-width:900px;
    margin:auto;
}

/* Steps */

.booking-steps{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:35px;
}

.step{
    display:flex;
    align-items:center;
    gap:8px;
}

.step span{
    width:24px;
    height:24px;
    background:#0b1220;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:600;
}

.step p{
    margin:0;
    font-size:14px;
    color:#0b1220;
    font-weight: 500;
    font-family: 'poppins';
}

.step-line{
    width:70px;
    border-top:1px dashed #bdbdbd;
    margin:0 12px;
}

/* Card */

.booking-card{
    background:#fff;
    border-radius:14px;
    padding:15px;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    max-width:790px;
}

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

}

.card-top h4{
    margin:0;
    font-weight:500;
    font-size: 16px;
    color: #0B1220;
    line-height: 22px;
    font-family: 'poppins';


}

.card-top p{
    margin:0;
    color:#7C8BA0;
    font-size:14px;
    font-weight: 400;
    font-family: 'poppins';
}

.back-btn{
    background:#0b1220;
    color:#fff;
    border:none;
    padding:8px 18px;
    border-radius:6px;
    font-size:14px;
    font-family: 'poppins';
}

/* Address */

.pickup-label{
    display:block;
    margin:20px 0 10px;
    font-size:14px;
    font-weight:500;
        font-family: 'poppins';


}

.address-card{
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
            font-family: 'poppins';

}

.user-name{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
    margin-bottom:8px;
            font-family: 'poppins';

}

.address-left p{
    margin:0 0 8px;
    color:#6b7280;
    font-size:14px;
            font-family: 'poppins';

}

.address-left span{
    font-size:14px;
    color:#0b1220;
}

.remove-btn{
    border:none;
    background:none;
    font-size:22px;
    color:#8a8a8a;
}

/* Buttons */

.add-address-btn{
    width:100%;
    height:46px;
    margin-top:18px;
    border:1px solid #0b1220;
    border-radius:8px;
    background:#fff;
    font-size:14px;
    line-height: 22px;
    font-family: 'poppins';
    font-weight: 500;
        box-shadow: 0 4px 8px rgba(11, 18, 20, 0.12);

    transition: all 0.3s ease;


}

.next-btn{
    width:100%;
    height:46px;
    margin-top:30px;
    border:none;
    border-radius:8px;
    background:#0b1220;
    color:#fff;
    font-size:15px;
    font-weight:600;
}

/* -----------------------------------package.html ---------------------------- */

.package-section{
    padding:50px 15px;
    background:#fff;
}

.custom-container{
    max-width:1200px;
    margin:auto;
}

/* Steps */

.booking-steps{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:40px;
}

.step{
    display:flex;
    align-items:center;
    gap:8px;
}

.step span{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#0B1220;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.step.active span{
    background:#4DA3FF;
}

.step p{
    margin:0;
    font-size:13px;
}

.step-line{
    width:70px;
    border-top:1px dashed #cfcfcf;
    margin:0 12px;
}

/* Layout */

.package-layout{
    display:flex;
    gap:25px;
    align-items:flex-start;
}

/* Left Card */

.summary-card{
    width:320px;
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.summary-card h4{
    font-size:14px;
    margin-bottom:15px;
    color: #0B1220;
    line-height: 22px;
    font-weight: 500;
    font-family: 'poppins';
}

.summary-card h5{
    font-size:14px;
    margin:10px 0;
    color: #0B1220;
     font-weight: 500;
    font-family: 'poppins';
    line-height: 22px;
}

.address-item{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:15px;
       font-weight: 500;
    font-family: 'poppins';
    line-height: 22px  ;
}

.address-item strong{
    font-size:14px;
}

.address-item p{
    font-size:12px;
    color:#6b7280;
    margin-top:5px;
}

/* Right Card */

.package-card{
    flex:1;
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

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

.back-btn{
    background:#0B1220;
    color:#fff;
    border:none;
    padding:8px 20px;
    border-radius:6px;
}

.package-card label{
    display:block;
    font-size:14px;
    font-weight:500;
    margin-bottom:12px;
}

/* Weight */

.weight-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.weight-btn{
    height:46px;
    border:1px solid #E5E7EB;
    border-radius:6px;
    background:#fff;
    font-size: 14px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 500;
}

.weight-btn.active{
    background:#4DA3FF;
    color:#fff;
    border-color:#4DA3FF;
}

.custom-weight,
.quantity-input{
    width:100%;
    height:46px;
    border:1px solid #E5E7EB;
    border-radius:6px;
    padding:0 15px;
    margin-top:12px;
}

.next-btn{
    width:100%;
    height:50px;
    background:#0B1220;
    color:#fff;
    border:none;
    border-radius:8px;
    margin-top:25px;
}

.Package{
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
font-family: 'poppins';
    color: #0B1220;
}
.Choose{
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    font-family: 'poppins';

}

/* ------------------------------------------schedule.pick.html------------------------------- */


/* STEP */
.step-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:40px 0;
    flex-wrap:wrap;
    font-family: 'poppins';
}

.step{
    display:flex;
    align-items:center;
    font-size:14px;
    font-weight: 500;
    color:#7b7b7b;
        font-family: 'poppins';


}

.step-circle{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#5da5ff;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
    margin-right:8px;
        font-family: 'poppins';

}

.step.active .step-circle{
    background:#111827;
}

.step-line{
    width:80px;
    border-top:2px dashed #9ac5ff;
    margin:0 15px;
}

/* CARD */

.custom-card{

    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 18px rgba(0,0,0,.08);
    padding:15px;
        font-family: 'poppins';


}

/* Heading */

.card-title-ui{

font-size:17px;
font-weight:600;
margin-bottom:15px;
    font-family: 'poppins';


}

.border-line{

border-bottom:1px solid #ececec;
margin-bottom:20px;
    font-family: 'poppins';


}

/* Address */
.timeline{
    display:flex;
    align-items:flex-start;
    gap:12px;
        font-family: 'poppins';

}

.timeline-image{
    width:19px;      /* image width */
    height:102px;    /* image height */
    object-fit:contain;
    flex-shrink:0;
        font-family: 'poppins';

}

.timeline-content{
    flex:1;
}

.timeline-item{
    margin-bottom:25px;
}

.address-name{
    font-size:14px;
    font-weight:500;
        font-family: 'poppins';
        line-height: 22px;
        

}

.address-text{
    font-size:13px;
    color:#666;
    line-height:20px;
        font-family: 'poppins';

}

.address-name{

font-size:14px;
font-weight:600;
margin-bottom:2px;
    font-family: 'poppins';


}

.address-text{

font-size:13px;
color:#666;
line-height:20px;
    font-family: 'poppins';


}

.arrow{

float:right;
color:#111;
    font-family: 'poppins';


}

/* Package */

.package-box{

background:#AA81F3;
border-radius:5px;
height: 46px;
color:#fff;
font-size:13px;
margin-bottom:10px;
padding: 12px;
    font-family: 'poppins';


}

/* Right */

.back-btn{

background:#111827;
color:#fff;
font-size:12px;
padding:4px 18px;
border-radius:6px;
border:none;
    font-family: 'poppins';

}

.day-box{

width:55px;
height:78px;
border:1px solid #ddd;
border-radius:6px;
text-align:center;
padding-top:8px;
margin-right:10px;
cursor:pointer;
transition:.3s;
    font-family: 'poppins';

}

.day-box.active{

background:#5da5ff;
color:#fff;
border-color:#5da5ff;
    font-family: 'poppins';


}

.day{

font-size:12px;
margin-bottom:5px;
    font-family: 'poppins';


}

.date{

font-size:18px;
font-weight:600;
    font-family: 'poppins';


}

.month{

font-size:12px;

}

.day-area{

border:1px solid #ececec;
border-radius:8px;
padding:12px;
min-height:140px;
    font-family: 'poppins';


}

.next-btn{

width:100%;
background:#111827;
color:#fff;
border:none;
height:46px;
border-radius:6px;
font-weight:500;
    font-family: 'poppins';


}

/* Responsive */

@media(max-width:991px){

.left-card{
margin-bottom:20px;
}

.step-line{
width:40px;
}

}

@media(max-width:576px){

.step{
font-size:11px;
}

.step-line{
width:20px;
margin:0 8px;
}

.day-box{
width:50px;
}

}

/* ----------------------------------------pickup address popup ---------------------- */

/* Overlay */
.pickup-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

/* Show Popup */
.pickup-modal-overlay.active {
  display: flex;
}

/* Main Popup */
.pickup-modal-container {
  width: 560px;
  max-width: 95%;
  height: 550px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Header */
.pickup-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #e5e5e5;
}

.pickup-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2d2d2d;
}

/* Close Button */
.pickup-close-btn {
  width: 28px;
  height: 28px;
  border: 2px solid #333;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
}

/* Body */
.pickup-modal-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #fff;
}

/* Footer */
.pickup-modal-footer {
  padding: 18px 20px;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

/* Bottom Button */
.pickup-submit-btn {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 8px;
  background: #0B1220;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}

.pickup-submit-btn:hover {
  opacity: .9;
}

/* Demo Button */
.pickup-open-btn {
  padding: 12px 20px;
  border: none;
  background: #04122d;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 576px) {

  .pickup-modal-container {
    width: 95%;
    height: 85vh;
  }

  .pickup-modal-header h3 {
    font-size: 16px;
  }

  .pickup-submit-btn {
    font-size: 16px;
  }
}

.pickup{
    font-family: 'poppins';
    font-size: 14px;
    line-height: 22px;
    color: #0B1220;
    font-weight: 500;
    margin-top: -10px;

}
.form-control{
    font-family: 'Poppins', sans-serif;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.10);
    border: 1px solid #e5e5e5;
}
::placeholder{
    font-family: 'poppins';
    font-size: 14px;
}


.pickup-popup-content {
    flex: 1;
    overflow-y: auto;

    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE & Edge */
}

.pickup-popup-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}


/* ---------------------------- select address popup ----------------------------------------------- */
.address-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.address-popup-overlay.show{
    display:flex;
}

/* Popup */
.address-popup{
    width:95%;
    max-width:620px;
    background:#fff;
    border-radius:16px;
    padding:18px;
    max-height:90vh;
    overflow:auto;

    scrollbar-width:none;
}

.address-popup::-webkit-scrollbar{
    display:none;
}

/* Header */
.address-popup-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.address-popup-header h3{
    font-size:18px;
    font-weight:600;
    color:#111827;
}

.close-popup-btn{
    width:34px;
    height:34px;
    border:1px solid #d1d5db;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    font-size:18px;
}

hr{
    border:none;
    border-top:1px solid #e5e7eb;
    margin:18px 0;
}

/* Add Address */
.add-address-section{
    padding:8px 0;
}

.add-address-left{
    display:flex;
    align-items:center;
    gap:10px;
    color:#3b82f6;
    font-size:18px;
    font-weight:500;
    cursor:pointer;
}

/* Title */
.saved-address-title{
    font-size:18px;
    font-weight:600;
    margin-bottom:15px;
    color:#111827;
}

/* Address Item */
.saved-address-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.address-info{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.address-icon{
    width:36px;
    height:36px;
    border:1px solid #d1d5db;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:16px;
}

.address-info h5{
    margin:0;
    font-size:15px;
    font-weight:500;
    color:#111827;
    font-family: 'poppins';
}

.address-info p{
    margin-top:4px;
    color:#6b7280;
    font-size:14px;
        font-family: 'poppins';

}

.saved-address-item a{
    text-decoration:none;
    color:#3b82f6;
    font-weight:500;
        font-family: 'poppins';

}

/* Mobile */
@media(max-width:576px){

    .address-popup{
        width:95%;
        padding:15px;
    }

    .address-popup-header h3{
        font-size:16px;
    }

    .saved-address-title{
        font-size:16px;
    }

    .address-info h5{
        font-size:16px;
    }

    .saved-address-item{
        gap:10px;
    }

    .saved-address-item a{
        font-size:14px;
    }
}


.Add{
    font-family: 'poppins';
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #0B1220;
}