/* ==== Font Family declaration ==== */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200..1000&display=swap");

.almarai-light {
    font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.almarai-regular {
    font-family: "Almarai", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.almarai-bold {
    font-family: "Almarai", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.almarai-extrabold {
    font-family: "Almarai", sans-serif;
    font-weight: 800;
    font-style: normal;
}

/* ==== Common Reset rule css ==== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Almarai", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--color-gray);
}

:root {
    --color-blue: #1F345E;
    --color-gray-300: #d1d1d1;
    --color-gray-400: #747681;
    --color-gray-500: #7b7b7b;
    --dark-gray: #1a1a1a;
    --color-gray-600: #1d1d1f;
    --color-gray-500: #00000033;
    --color-white: #ffffff;
    --color-black: #000000;
    --bg-gray-200: #f6f6f6;
    --bg-gray-250: #e7e7e7;
    --bg-gray-300: #fafafb;
    --bg-gray-400: #efeff1;
    --bg-gray-600: #1d1d1d;
    --info-color: #214977;
    --info-bg: #21497726;
    --transmit-color: #65aee0;
    --transmit-bg: #65aee026;
    --delivery-color: #f5a551;
    --delivery-bg: #f5a55126;
    --pickup-color: #ef7414;
    --pickup-bg: #ef741426;
    --failed-color: #b789c7;
    --failed-bg: #b789c726;
    --color-orange: #cc4924;
}

/* ===== text color declaration ==== */
.text-blue {
    color: var(--color-blue);
}

.text-gray-400 {
    color: var(--color-gray-400);
}

.text-gray-500 {
    color: var(--color-gray-500);
}

.text-gray-600 {
    color: var(--color-gray-600);
}

.text-dark-gray {
    color: var(--dark-gray);
}

.text-white {
    color: var(--color-white);
}

.text-black {
    color: var(--color-black);
}

.text-info-status {
    color: var(--info-color);
}

.text-transmit-status {
    color: var(--transmit-color);
}

.text-delivery-status {
    color: var(--delivery-color);
}

.text-pickup-status {
    color: var(--pickup-color);
}

.text-failed-status {
    color: var(--failed-color);
}

/* ==== background color declaration ==== */
.bg-gray-200 {
    background-color: var(--bg-gray-200);
}

.bg-gray-250 {
    background-color: var(--bg-gray-250);
}

.bg-gray-300 {
    background-color: var(--bg-gray-300);
}

.bg-gray-400 {
    background-color: var(--bg-gray-400);
}

.bg-gray-600 {
    background-color: var(--bg-gray-600);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-red {
    background-color: var(--color-blue);
}

.bg-red-300 {
    background-color: var(--color-orange);
}

.border-gray-200 {
    border-color: var(--bg-gray-200);
}

.border-gray-250 {
    border-color: var(--bg-gray-250);
}

.border-gray-300 {
    border-color: var(--color-gray-300);
}

.border-gray-600 {
    border-color: var(--color-gray-600);
}

.border-gray-500 {
    border-color: var(--color-gray-500);
}

.border-secondary-400 {
    border-color: var(--bg-gray-250);
}

.bg-info-status {
    background-color: var(--info-bg);
}

.bg-transmit-status {
    background-color: var(--transmit-bg);
}

.bg-delivery-status {
    background-color: var(--delivery-bg);
}

.bg-pickup-status {
    background-color: var(--pickup-bg);
}

.bg-failed-status {
    background-color: var(--failed-bg);
}

/* ==== font-size declaration ==== */
h1 {
    font: normal normal 700 4rem/4.3rem "Almarai", sans-serif;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

h2 {
    font: normal normal 700 3rem/3.3rem "Almarai", sans-serif;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

h3 {
    font: normal normal 700 2.25rem/2.7rem "Almarai", sans-serif;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

h4 {
    font: normal normal 700 2rem/2.2rem "Almarai", sans-serif;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

h5 {
    font: normal normal 700 1.87rem/2.2rem "Almarai", sans-serif;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

h6 {
    font: normal normal 700 1.5rem/1.9rem "Almarai", sans-serif;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

p,
a {
    font: normal normal 400 1.25rem/1.7rem "Almarai", sans-serif;
    margin-bottom: 15px;
    letter-spacing: 0px;
    color: var(--color-gray-600);
}

a {
    color: var(--color-blue);
    text-decoration: none;
}

.font-48 {
    font-size: 3rem;
    line-height: normal;
}

.font-36 {
    font-size: 2.25rem;
    line-height: 2.7rem;
}

.font-24 {
    font-size: 1.5rem;
    line-height: 1.9;
}

.font-20 {
    font-size: 1.25rem;
    line-height: 1.7rem;
}

.font-18 {
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.font-16 {
    font-size: 1rem;
    line-height: normal;
}

.font-14 {
    font-size: 0.87rem;
    line-height: 1rem;
}

.font-12 {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-10 {
    font-size: 0.62rem;
    line-height: 0.9rem;
}

/* ==== other utility classes ==== */
.container {
    max-width: min(1320px, 90%);
    margin: 0 auto;
    padding: 0px 20px;
}

a {
    text-decoration: none;
    color: var(--color-blue);
    cursor: pointer;
}

button,
header .shipment-button {
    border: none;
    background-color: transparent;
    color: inherit;
    padding: 0.9rem 2rem;
}

.flex-1 {
    flex: 1;
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}

.min-h-0 {
    min-height: 0;
}

.center-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lh-1 {
    line-height: 1;
}

.lh-normal {
    line-height: normal;
}

.white-space-nowrap {
    white-space: nowrap;
}

.text-wrap-balance {
    overflow-wrap: break-word;
    text-wrap: wrap;
    text-wrap: balance;
}

.transition-400 {
    transition: 400ms ease;
}

.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.clamp-3 {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.clamp-4 {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.cursor-pointer {
    cursor: pointer;
}

.aspect-ratio-1 {
    aspect-ratio: 1;
}

.border-blue-1 {
    border: 1px solid var(--blue-100);
}

.rounded-4 {
    border-radius: 4px !important;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-12 {
    border-radius: 12px;
}

.rounded-16 {
    border-radius: 16px;
}

.shadow-400 {
    box-shadow: 0px 0px 4px 0px #80808029;
}

.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

input:focus,
.btn-close:focus,
.form-control:focus,
.nav-link:focus-visible,
.form-select:focus {
    outline: none;
    box-shadow: none;
}

/* ==== Header section Styling ==== */
header+.app-content {
    padding-top: 96px;
}

header {
    box-shadow: 0px 4px 8px 0px #8080801f;
    background-color: var(--color-white);
    /* z-index: 99; */
}

.menu-button,
.profile-sidebar-button {
    display: none;
}

.menu-button img {
    filter: invert(1) brightness(0);
    transform: scaleX(-1);
}

header .lang-dropdown .ulTxt::after {
    background: transparent url(../images/icons/down-arrow.svg) no-repeat center;
    border: none;
    width: 12px;
    height: 6px;
    margin-left: 10px;
    content: "";
    position: absolute;
    right: 0px;
}

header .dropdown-menu {
    transform: translate(0px, 33px) !important;
    box-shadow: 0px 3px 19px 0px #efeff1;
}

header .dropdown-menu li button:hover,
header .lang-dropdown .dropdown-item span:hover,
.footer-menu a:hover,
header .nav ul li a:hover {
    color: var(--color-blue) !important;
}

header .shipment-button:hover {
    background-color: var(--color-blue) !important;
}

header .nav-wrap {
    gap: 5.18rem;
}

header .lang-dropdown .dropdown-item.active,
header .lang-dropdown .dropdown-item:hover {
    color: var(--color-blue);
}

header .lang-dropdown .dropdown-toggle img,
header .lang-dropdown .dropdown-menu img {
    width: 1.25rem;
    height: 1.25rem;
    transition: all ease 0.5s;
    --webkit-transition: all ease 0.5s;
}

header .lang-dropdown .dropdown-menu {
    box-shadow: 0px 4px 40px 0px #8080801f;
    min-width: 200px;
    margin: 0px 0px 0px auto !important;
    border: 1px solid #00000026;
    inset: 0px 0px auto auto !important;
}

header .lang-dropdown .dropdown-item {
    padding: 8px 20px;
    cursor: pointer;
}

header .lang-dropdown .ulList {
    gap: 0.5rem;
    cursor: pointer;
}

header .lang-dropdown .dropdown-toggle::after {
    background: transparent url(../images/icons/down-arrow.svg) no-repeat center;
    border: none;
    width: 12px;
    height: 6px;
    margin-left: 0px;
    content: "";
    position: absolute;
    right: 0px;
    background-size: contain;
}

.nav-menu {
    z-index: 20;
    position: relative;
}

header .mobile-show {
    display: none;
}

header .mobile-hide {
    display: flex;
}

header .nav ul li a:after {
    content: "";
    position: absolute;
    width: 0px;
    left: 0px;
    right: 0px;
    bottom: -6px;
    height: 2px;
    background-color: var(--color-blue);
    transition: all ease 0.4s;
    margin: 0px auto;
}

header .nav ul li a:hover:after {
    width: 100%;
}

/* ==== Hero section Styling ==== */
.hero-section,
.offer-section,
.testinomial-section,
.feature-section,
.solution-section,
.shipping-section,
.faq-section,
.empty-screen,
.branch-sec {
    padding: 100px 0px 100px 0px;
}

.dashboard-section,
.error-main {
    padding: 48px 0px 48px 0px;
}

.faq-section {
    padding-bottom: 70px;
}

.contant ul {
    max-width: 470px;
    list-style-type: none;
}

.hero-section .box-sec {
    border: 1px solid #00000026;
    padding: 2rem 2.5rem;
    box-shadow: 0px 4px 40px 0px #8080801f;
    max-width: 470px;
    margin-left: auto;
}

.hero-section .nav-tabs {
    margin-bottom: 40px;
}

.hero-section .nav-tabs li {
    width: 50%;
}

.hero-section .box-sec,
.custom-modal .box-sec {
    border: 1px solid #00000026;
    padding: 2rem 2.5rem;
    box-shadow: 0px 4px 40px 0px #8080801f;
    max-width: 470px;
}

.hero-section .nav-tabs li button:hover,
.dashboard-section .shipment-tab .nav-link:hover {
    color: var(--color-gray-600);
}

.hero-section .nav-tabs li button[aria-selected="true"] {
    color: var(--color-gray-600);
    border-bottom: 2px solid !important;
}

.shipment-tab li button[aria-selected="true"] {
    color: var(--color-blue);
    border-bottom: 2px solid !important;
}

.dashboard-section .shipment-tab .nav-link.active {
    color: var(--color-gray-600);
    background-color: transparent;
    border-radius: 0px;
    border-bottom: 2px solid var(--color-blue) !important;
}

.hero-section .nav-tabs .nav-tabs {
    border: 1px solid #0000001a;
}

.hero-section .inner-tab li {
    width: 50%;
    margin-bottom: 0px;
}

.hero-section .inner-tab {
    border: 1px solid #0000001a;
    margin-bottom: 24px;
}

.hero-section .inner-tab li button[aria-selected="true"] {
    background-color: var(--bg-gray-400);
    color: var(--color-black);
    border: 0 !important;
}

.hero-section form fieldset input {
    border: 1px solid #dfdfdf;
    padding: 15px 44px 15px 44px !important;
    color: var(--color-gray-600);
}

form fieldset input {
    padding: 11px 15px 11px 15px;
    border: 1px solid #dfdfdf;
}

.hero-section form fieldset input:focus+.addon {
    filter: invert(1) brightness(0);
}

.hero-section form button {
    padding: 15px 20px 15px 20px;
}

.hero-section form button:hover,
button.view-all:hover,
.map-slider .slide-cnt button:hover,
.shipping-section button:hover,
.modal button:hover,
.profile-tab button:hover,
.empty-screen .btn:hover,
.filter-sidebar form .btn-group button:hover,
.package-details .btn-group button:hover {
    background-color: var(--color-black) !important;
    color: var(--color-white);
}

button.view-all:hover img,
.package-details .location:hover img,
.nearest-collection-btn:hover img,
.home-delivery-btn:hover img {
    filter: brightness(0) invert(1);
}

.hero-section form fieldset .addon {
    left: 1rem;
    width: 20px;
    height: 20px;
    top: 28px;
    transform: translateY(-50%);
}

.hero-section .tab-pane form p img,
.track-order form p img {
    margin-right: 10px;
}

/* ==== Map section Styling ==== */
.map-section .slide-cnt {
    padding: 86px 0px;
}

.map-section h2 {
    font-size: 4rem;
    line-height: 4.3rem;
}

.map-section p {
    max-width: 470px;
}

.map-section figure {
    min-height: 381px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    width: auto;
    display: flex;
    justify-content: flex-end;
    margin: auto 0px;
}

.map-slider .slide-cnt {
    width: 60%;
}

.map-slider .slide-img {
    width: 40%;
}

.map-slider .slick-dots li {
    width: 8px;
    height: 8px;
    padding: 0px;
    margin: 0 2px;
    -webkit-transition: opacity 0.6s, background-color 0.5s, width 0.5s;
    -o-transition: opacity 0.6s, background-color 0.5s, width 0.5s;
    transition: opacity 0.6s, background-color 0.5s, width 0.5s;
    -webkit-transition-delay: 0.5s, 0.5s, 0s;
    -o-transition-delay: 0.5s, 0.5s, 0s;
    transition-delay: 0.5s, 0.5s, 0s;
}

.map-slider .slick-dots li.slick-active button:before {
    background-color: var(--color-white);
}

.map-slider .slick-dots li button:before {
    font-size: 0px;
    line-height: 8px;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: rgb(255 255 255 / 60%);
    border-radius: 50px;
}

.map-slider .slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0px;
}

.map-slider .slick-dots li.slick-active {
    width: 56px;
    opacity: 1;
}

.map-slider .slick-dots {
    bottom: 30px;
}

.marquee {
    white-space: nowrap;
    padding-right: 100vw;
    margin-right: -100vw;
}

.marquee-inner {
    gap: 120px;
    width: max-content;
}

.marquee h6 {
    font-size: 1.4rem;
    line-height: 1.6rem;
}

/* ==== Feature section Styling ==== */
.feature-section .desc,
.solution-section .desc {
    max-width: 492px;
    margin-left: auto;
}

.four-box p {
    padding-right: 30px;
}

.map-slider .slide-cnt h2 {
    max-width: 90%;
}

/* ==== Offer section Styling ==== */
.offer-section .box figure {
    height: 465px;
    box-shadow: 0px 0px 5px 0px #00000040;
}

.offer-section .box figure img,
.testinomial-section figure img {
    filter: grayscale(1);
}

.offer-section .box figure:hover img {
    transform: scale(1.08);
}

.offer-section .box figure .badge {
    background: transparent url(../images/Offers.svg) no-repeat left;
    width: 215px;
    left: -1px;
    background-size: contain;
}

.offer-section .box figure .badge h4 {
    transform: rotate(-44deg);
    top: 45px;
    position: relative;
    left: -30px;
}

.offer-section .box a.arrow-btn:hover img,
button.view-all:hover img {
    transform: translateX(10px);
}

.offer-section .row .col {
    padding: 0px 15px;
}

.offer-section .box h6 {
    min-height: 68px;
}

/* ==== Testinomial section Styling ==== */
.testinomial-slider .slide-item {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testinomial-slider .slide-img figure {
    height: 370px;
    width: 370px;
}

.testinomial-slider .slick-arrow {
    position: absolute;
    right: 0px;
    bottom: 24px;
    left: unset;
    border: 1px solid #00000033;
    border-radius: 8px;
    width: 48px;
    height: 48px;
    font-size: 0px;
    padding: 10px;
    z-index: 9;
    cursor: pointer;
    transition: all ease 0.4s;
}

.testinomial-slider .slick-arrow:before {
    display: none;
}

.testinomial-slider .slick-arrow.slick-next {
    background: #ffffff url(../images/icons/arrow.svg) no-repeat center;
}

.testinomial-slider .slick-arrow.slick-prev {
    right: 64px;
    background: #ffffff url(../images/icons/arrow.svg) no-repeat center;
    transform: scaleX(-1);
}

.testinomial-slider .slick-arrow:hover {
    background: var(--color-black) url(../images/icons/white-arrow.svg) no-repeat center;
}

/* ==== Solution section Styling ==== */
.solution-section figure {
    height: 365px;
    max-width: 470px;
    margin: 0px 0px 0px auto;
}

.solution-section h3 {
    max-width: 71%;
}

/* ==== Shipping section Styling ==== */
.shipping-section .row {
    box-shadow: 0px -8px 36px 0px #8080801f;
}

.shipping-section .figure {
    border-radius: 16px 0px 0px 16px;
    height: 424px;
}

.shipping-section h3,
.hero-section h2 {
    max-width: 80%;
}

.shipping-section {
    position: relative;
    z-index: 9;
    background: linear-gradient(to top, var(--bg-gray-600) 0%, var(--bg-gray-600) 40%, #f7f7f7 40%, #fff 100%);
}

.shipping-section .contant p {
    max-width: 82%;
}

/* ==== Footer section Styling ==== */
.social-icon,
.footer-menu {
    list-style-type: none;
}

.copyright:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 12px;
    width: calc(100% - 24px);
    border-top: 1px solid rgb(255 255 255 / 10%);
    margin: 0px auto;
}

.social-icon li a img:hover {
    transform: scale(1.08);
}

footer {
    padding-top: 50px;
}

/* ==== Tracking banner Styling ==== */
.hero-section ul.list-item {
    padding: 0px 30% 0px 0px;
}

.hero-section ul.list-item li {
    padding-left: 29px;
}

.hero-section ul.list-item li::before {
    content: "";
    position: absolute;
    inset: 0;
    top: 4px;
    background: transparent url("../images/icons/list-arrow.svg") no-repeat left;
    width: 17px;
    height: 17px;
}

form label {
    transition: 400ms cubic-bezier(0.75, 0, 0.175, 1);
    top: 50%;
    transform: scale(0) translateY(-50%);
    transform-origin: center left;
    left: 13px;
    z-index: -1;
}

.input-container:focus-within .input-box_label,
.input-container:focus .input-box_label,
.input-box_label.input-focused,
.input-container:has(> .v-select.input-box .vs__selected) .input-box_label {
    opacity: 1;
    top: 0;
    transform: scale(1) translateY(-50%);
    z-index: 10;
}

form fieldset label span {
    position: relative;
    top: 3px;
}

/* fieldset.clearable:focus-within input + .addon{display:none;} */
.hero-section form fieldset.clearable:focus-within input {
    padding: 15px 44px 15px 16px;
}

.clearable-clear {
    display: none;
    user-select: none;
    cursor: pointer;
}

.clearable input::-ms-clear {
    display: none;
}

form fieldset .close-icon {
    right: 20px;
    top: 17px;
}

.custom-modal {
    background: rgb(0 0 0 / 0%);
}

#otp input {
    padding: 15px 10px;
}

.custom-modal .modal-header .btn-close {
    background: transparent !important;
    right: 40px !important;
    top: 27px !important;
    width: 24px;
    height: 24px;
    margin: 0px !important;
}

.custom-modal p {
    max-width: 95%;
}

.modal .form-control:focus:focus {
    border: 1px solid var(--color-gray-600);
}

/* ==== Faq Styling ==== */
.faq-section h6 {
    max-width: 65%;
}

.accordion-item .accordion-button {
    color: var(--color-gray-600);
    align-items: baseline;
}

.accordion {
    max-width: 770px;
    margin: 0px auto;
}

.accordion .accordion-item:not(:last-child),
.profile-tab .title,
.profile-form,
.shipment-tab .title {
    border-bottom: 1px solid rgb(29 29 31 / 15%) !important;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("../images/icons/down-black-arrow.svg") !important;
    background-position: center 2px;
    background-size: 17px;
}

.accordion-button::after {
    background-position: center 10px;
}

.hero-section form fieldset input::-webkit-input-placeholder {
    height: 20px;
}

/* ==== Dashboard Styling ==== */
.dashboard-section .nav-pills,
.user-div {
    top: 50px;
}

.dashboard-section .side-nav_menu .nav-pills .nav-link.active,
.dashboard-section .side-nav_menu .nav-pills .show>.nav-link,
.dashboard-section .side-nav_menu .nav-pills .nav-link:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.dashboard-section .side-nav_menu .nav-pills .nav-link {
    color: var(--color-gray-600);
}

.dashboard-section .nav-pills .nav-link.active img,
.dashboard-section .nav-pills .show>.nav-link img,
.dashboard-section .nav-pills .nav-link:hover img {
    filter: brightness(0) invert(1);
}

.dashboard-section .side-nav_menu .nav-item:not(:first-child) {
    border-top: 1px solid #0000001a;
}

.dashboard-section .side-nav_menu .nav-item:nth-last-child(2) {
    padding-bottom: 100px;
}

.user-div img {
    min-width: 64px;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
    object-fit: cover;
}

.user-div .cnt {
    width: calc(100% - 64px);
}

.user-div .progress {
    height: 8px;
}

.shipment-row .img {
    width: 3rem;
    height: 3rem;
}

.shipment-row>div:after {
    content: "";
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: transparent url("../images/shadow-effect.svg") no-repeat left;
    width: 100px;
    background-size: cover;
}

.table>:not(caption)>*>* {
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
    color: var(--color-gray-600);
    vertical-align: middle;
    padding-block: 11px;
}

.table {
    border: 1px solid #e7e7e7;
}

.table thead th {
    color: var(--color-gray-400);
}

.status-label {
    padding-block: 2px;
    white-space: nowrap;
}

.table .view.open .caretdown {
    transform: rotate(180deg);
}

table .btn:first-child:active {
    border-color: transparent;
}

.time-line_box::before {
    content: "";
    position: absolute;
    background-color: rgb(29 29 31 / 10%);
    height: 8px;
    left: 0;
    width: 100%;
    top: 0px;
    border-radius: 100px;
}

.time-line_box .time-line {
    position: relative;
}

.time-line_box .time-line::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 100vw;
    background-color: #cccccc;
    left: 0%;
    top: 0px;
    transform: translateY(0%);
    z-index: 20;
}

.time-line_box .time-line[data-timeline="completed"]::before,
.time-line_box .time-line[data-timeline="active"]::before {
    background-color: rgb(255 255 255 / 50%);
}

.time-line_box .time-line:not(:last-child)::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 8px;
    background-color: var(--color-blue);
    border-radius: 100px;
    left: 0;
    right: 0;
    top: 0px;
    z-index: 10;
    width: 0%;
}

@keyframes scale-line {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.time-line_box .time-line[data-timeline="completed"]::after {
    --initial-delay: 200ms;
    --animation-time: 500ms;
    animation: scale-line var(--animation-time) linear forwards;
}

.time-line_box .time-line[data-timeline="completed"] {
    width: 100%;
    animation: scale-line var(--animation-time) linear forwards;
}

.time-line_box .time-line[data-timeline="completed"]:nth-child(1)::after {
    animation-delay: var(--initial-delay);
}

.time-line_box .time-line[data-timeline="completed"]:nth-child(2)::after {
    animation-delay: calc(var(--animation-time) + var(--initial-delay));
}

.time-line_box .time-line[data-timeline="completed"]:nth-child(3)::after {
    animation-delay: calc((var(--animation-time) * 2) + var(--initial-delay));
}

.time-line_box .time-line[data-timeline="completed"]:nth-child(4)::after {
    animation-delay: calc((var(--animation-time) * 3) + var(--initial-delay));
}

.time-line_box .time-line:last-child::before {
    right: 0px;
    left: unset;
}

.time-line_box .time-line:last-child h4 {
    text-align: right;
    position: absolute;
    right: 0px;
    padding-right: 0;
}

/* .time-line_box .time-line:last-child{flex:unset;} */
table ul.order-list::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0px;
    background-color: rgb(116 118 129 / 20%);
    height: calc(100% - 35px);
    width: 1px;
}

table ul.order-list li p {
    width: calc(100% - 30px);
}

table ul.order-list li:last-child p {
    margin-bottom: 10px;
}

.switch_animation {
    animation: switch-section 400ms ease-in forwards;
}

@keyframes switch-section {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.profile-sidebar-button {
    position: absolute;
    left: -10px;
    z-index: 1;
    width: fit-content;
}

.profile-sidebar-button a {
    background-color: #1F345E0d;
}

.share-btn,
.caretdown {
    width: 15px;
}

.profile-img {
    background-color: #fdf2f3;
    aspect-ratio: 1;
    width: 140px;
}

.profile-wrap .badge {
    width: 36px;
    height: 36px;
    aspect-ratio: 1;
    right: 10px !important;
    padding: 9px;
}

.file-upload {
    display: none;
}

.profile-pic {
    width: 100%;
    height: 100%;
}

.form-select:focus {
    border: 1px solid #dfdfdf;
}

.profile-tab form fieldset,
.sender-details fieldset,
.consignee-details fieldset {
    width: calc(50% - 8px) !important;
}

.selection,
.select2 {
    width: 100% !important;
}

.select2 .select2-selection__arrow {
    display: none;
}

.select2 .select2-selection__rendered {
    line-height: 47px !important;
    padding: 0px 16px !important;
    color: var(--color-gray-400) !important;
}

.select2.select2-container--focus .select2-selection__rendered {
    color: var(--dark-gray) !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #dfdfdf;
    border-radius: 8px;
}

.form-select,
.select2-selection {
    background: url("../images/icons/select-arrow.svg") no-repeat right 16px bottom 18px;
    min-height: 48px;
    color: #757575;
}

.profile-form input::placeholder {
    height: 20px;
}

input::-webkit-input-placeholder {
    height: 20px;
}

form.profile-form fieldset input,
.franchise form.profile-form fieldset input {
    padding: 11px 15px 11px 15px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.profile-tab button {
    max-width: 171px;
    padding: 0.7rem 1.5rem;
}

form.profile-form fieldset input::placeholder,
.search-form input::placeholder {
    color: var(--color-gray-400);
}

.mobile-number .input-focused+input+.input-addon {
    color: var(--color-gray-600);
}

/* ==== Datepicker Styling ==== */
.ui-datepicker .ui-datepicker-year,
.ui-datepicker .ui-datepicker-month {
    width: auto !important;
    background-color: transparent;
    color: var(--color-white);
    font-family: "Almarai", sans-serif;
    border: none;
    padding: 0px 2px;
}

.ui-datepicker .ui-datepicker-month option {
    margin-right: 10px;
}

.ui-datepicker .ui-datepicker-year option,
.ui-datepicker .ui-datepicker-month option {
    background-color: var(--bg-gray-600);
    color: var(--color-white);
    font-family: "Almarai", sans-serif;
}

.ui-datepicker {
    background: #fdf2f3;
    text-align: center;
    border-radius: 16px;
    width: auto;
    margin: 10px 0px 0px auto;
    border: none !important;
    padding: 0;
}

.ui-datepicker .ui-datepicker-header {
    margin-bottom: 16px;
    padding: 1.87rem 1.1rem 0rem 1.1rem;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ui-datepicker-calendar {
    padding: 0rem 1.1rem 1.25rem 1.1rem;
    display: block;
}

.ui-datepicker .ui-datepicker-title {
    font: normal normal 400 0.87rem/1.07rem "Almarai", sans-serif;
    display: inline-block;
    padding: 5px 14px;
    background: var(--bg-gray-600);
    border-radius: 9999px;
    color: var(--color-white);
    max-width: fit-content;
    width: 100%;
}

.ui-datepicker .ui-datepicker-calendar thead th {
    font: normal normal 300 0.75rem/0.87rem "Almarai", sans-serif;
    color: var(--bg-gray-600);
    padding: 0px 5px 8px 4px;
}

.ui-datepicker .ui-datepicker-calendar tr td {
    padding: 0px 5px 0px 4px;
}

.ui-datepicker .ui-datepicker-calendar tr td a,
.ui-state-default,
.ui-widget-content .ui-state-default {
    color: var(--bg-gray-600) !important;
    text-decoration: none;
    text-align: center;
    padding: 9px;
    border-radius: 50%;
    width: 100%;
    font: normal normal 300 0.75rem / 0.89rem "Almarai", sans-serif;
    margin: 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background-color: transparent;
    min-width: 34px;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight {
    border: 1px solid var(--color-blue);
    background-color: transparent;
    color: var(--bg-gray-600);
}

.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    background-color: var(--color-blue);
    color: var(--color-white) !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    font-size: 0rem;
    background: transparent url(../images/icons/caretright.svg) no-repeat center !important;
    background-size: 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    left: 15px !important;
    top: unset !important;
    background-color: transparent !important;
    border: none !important;
    margin: 0px;
    transform: scaleX(-1);
}

.ui-datepicker-next {
    left: unset !important;
    right: 15px !important;
    transform: scaleX(1);
}

/* ==== Filter Styling ==== */
.filter-sidebar+.offcanvas-backdrop {
    background-color: rgb(0 0 0 / 25%);
    opacity: 1;
}

.filter-sidebar {
    border-radius: 12px 0px 0px 12px;
    border: none !important;
    --bs-offcanvas-width: 586px;
}

.filter-sidebar .btn-close {
    --bs-btn-close-color: var(--color-gray-600);
    opacity: 1;
}

.filter-sidebar form .btn-group button {
    background-color: #cc4924;
}

.sticky-top {
    z-index: 2;
}

.filter-btn button.active .badge {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex !important;
    top: 0;
}

.filter-btn button.active {
    background: #1F345E0d;
    border: 1px solid var(--color-blue) !important;
    color: var(--color-blue);
}

.filter-btn button.active path {
    fill: var(--color-blue);
}

.filter-btn button:not(.btn-check)+.btn:active {
    border-color: transparent;
}

.empty-screen {
    max-width: 500px;
}

.empty-screen .btn {
    max-width: 308px;
    padding: 13px 30px;
}

.empty-screen .img {
    width: 150px;
    height: 150px;
}

.filter-sidebar form .row {
    overflow: auto;
    padding-right: 3px;
}

.filter-sidebar form .row::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--bg-white);
    box-shadow: inset 0 0 5px F2F2F2;
    border-radius: 0px;
    margin-block: 15px;
}

.filter-sidebar form .row::-webkit-scrollbar,
.shipping-wrapper::-webkit-scrollbar {
    width: 4px;
    background-color: var(--bg-white);
}

.filter-sidebar form .row::-webkit-scrollbar-thumb,
.shipping-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--color-gray-300);
}

.shipping-wrapper::-webkit-scrollbar {
    width: 6px;
    background-color: var(--bg-gray-250);
    border-radius: 5px;
}

.shipping-wrapper::-webkit-scrollbar-thumb {
    background-color: #d1d1d1;
}

.shipping-wrapper::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--bg-white);
    box-shadow: inset 0 0 5px F2F2F2;
}

.input-box_label.input-focused+select.input-box {
    color: var(--dark-gray);
}

.branch-sec .left-part>div,
.branch-sec .map {
    box-shadow: 0px 0px 4px 0px #80808029;
}

.search-form button {
    top: 49%;
    transform: translateY(-50%);
    margin-left: 16px !important;
}

.branch-sec .search-form input {
    padding: 15px 40px 13px 40px !important;
    line-height: 18px;
}

.branch-sec .map {
    height: 850px;
}

.branch-sec .left-part {
    max-width: 494px;
}

.branch-sec .right-part {
    max-width: calc(100% - 502px);
}

.branch-sec .info-box .dropdown-toggle {
    padding-block: 9px;
    margin: 0px 4px;
    width: calc(33.33% - 8px);
    padding-right: 30px !important;
}

.branch-sec .info-box .dropdown-toggle.btn.active {
    border-color: var(--bg-gray-250);
}

.branch-sec .info-box .dropdown-toggle .selectbox-value::after {
    content: "";
    background-image: url(../images/icons/select-arrow.svg);
    background-repeat: no-repeat;
    appearance: none;
    border: none;
    width: 13px;
    height: 7px;
    display: inline-block;
    position: absolute;
    background-size: contain;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.branch-sec .search-form input:focus,
.branch-sec .info-box .dropdown-toggle:hover {
    border-color: var(--bg-gray-250);
}

.branch-sec .dropdown-menu {
    min-width: 100%;
}

.branch-sec .dropdown-menu .dropdown-item {
    border-bottom: 1px solid var(--bg-gray-200);
    padding: 11px 16px;
}

.branch-sec .dropdown-menu .dropdown-item:hover {
    background-color: var(--bg-gray-200);
}

.branch-sec .dropdown-menu {
    box-shadow: 0px 0px 4px 0px #8080803d;
}

.info-box .dropdown-item.active {
    color: var(--color-gray-600);
    text-decoration: none;
    background-color: var(--bg-gray-200);
}

.selectbox {
    cursor: pointer;
}

.selectbox-value {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    height: 20px;
}

.selectbox .dropdown-menu {
    transition: all 0.5s ease-in-out;
    opacity: 0;
    display: block;
    top: 102%;
    max-height: 250px;
    z-index: -1;
    overflow-y: auto;
    transform: translateY(-15%);
    visibility: hidden;
    left: 0px;
    padding: 0;
    box-shadow: 0px 0px 4px 0px #8080803d;
}

.selectbox:last-child .dropdown-menu {
    right: 0;
    left: unset;
}

.selectbox.show .dropdown-menu {
    transition: all 0.3s ease-in-out;
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0);
}

.shipping-location p {
    line-height: 1.4rem;
}

.shipping-location .label-div div {
    color: #6d6d6d;
}

.shipping-wrapper {
    height: calc(850px - 170px);
    overflow: auto;
    padding-right: 8px !important;
    padding-bottom: 1px;
}

.shipping-location .box:last-child {
    margin-bottom: 0 !important;
}

.shipping-wrapper .box>div {
    padding: 12px;
    gap: 5px;
}

.shipping-location {
/*     display: none; */
    box-shadow: 0px 0px 4px 0px #80808029;
    padding-right: 8px !important;
    border-radius: 0px 0px 12px 12px;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.info-box form fieldset .close-icon {
    right: 14px;
    top: 15px;
}

.selectbox-value.active {
    color: var(--color-gray-600);
}

.branch-sec .info-box .dropdown-toggle .selectbox-value.active::after {
    filter: brightness(0);
}

.branch-sec .info-box .dropdown-toggle::after {
    display: none;
}

.branch-sec h1 {
    max-width: 60%;
}

.hero-section.franchise .box-sec {
    max-width: 536px;
    padding: 2rem 2rem;
    border: 1px solid var(--bg-gray-250);
}

.custom-checkbox [type="radio"]:checked,
.custom-checkbox [type="radio"]:not(:checked) {
    opacity: 0;
    width: 20px;
    height: 20px;
}

.custom-checkbox [type="radio"]:checked+label,
.custom-checkbox [type="radio"]:not(:checked)+label {
    padding-left: 30px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: var(--dark-gray);
    transform: none;
    transform-origin: unset;
    z-index: 9;
    position: relative;
    left: -23px;
    top: -5px;
}

.custom-checkbox [type="radio"]:checked+label:before,
.custom-checkbox [type="radio"]:not(:checked)+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-blue);
    border-radius: 100%;
    background: transparent;
}

.custom-checkbox [type="radio"]:checked+label:after,
.custom-checkbox [type="radio"]:not(:checked)+label:after {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--color-blue);
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.custom-checkbox [type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.custom-checkbox [type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.franchise .profile-form {
    border-bottom: 0px !important;
}

/* Loader */
.loading-div {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 99999;
}

.loading-div .loading-loader {
    position: fixed;
    top: 50% !important;
    left: 43% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    margin-left: 10px;
}

.loading-div .loading-loader .loader {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: var(--color-blue) var(--color-blue) transparent transparent;
    animation: rotation 1s linear infinite;
}

.loading-div .loading-loader .loader:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent var(--color-black) var(--color-black);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    animation: rotationBack 0.4s linear infinite;
    transform-origin: center center;
}

.loading-div .loading-loader .loader:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent var(--color-blue) var(--color-blue);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    animation: rotation 0.7s linear infinite;
    transform-origin: center center;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* User Alerts */
.user-alerts {
    position: fixed;
    z-index: 999;
    top: 2%;
    right: 30px;
}

.user-alerts .alert {
    display: none;
}

.select-pin-div {
    width: 100%;
    height: 400px;
}

/****create-shipment******/
.product-timeline {
    box-shadow: 0px 4px 8px 0px #8080801f;
}

.product-timeline .container {
    max-width: min(1020px, 90%);
}

.product-timeline .time-line_box .time-line span {
    width: 60px;
    height: 20px;
    top: -10px;
    left: -20px;
}

.product-timeline .time-line_box .time-line:last-child span {
    right: -20px;
    left: unset;
}

.product-timeline .time-line_box .time-line::before {
    width: 14px;
    height: 14px;
    min-width: 14px;
    background: transparent;
    top: -6px;
    left: 3px;
}

.product-timeline .time-line_box .time-line:last-child:before {
    right: 3px;
    left: unset;
}

.product-timeline .time-line_box .time-line:after {
    height: 20px;
    width: 20px;
    background-color: var(--bg-gray-250);
    border: 1px solid transparent;
    top: -9px;
}

.product-timeline .time-line_box .time-line[data-timeline="completed"]::after {
    animation: none;
    background: var(--color-blue) url("../images/icons/right.svg") center no-repeat;
    animation: none;
    background-size: 11px;
    z-index: 30;
}

.product-timeline .time-line_box .time-line[data-timeline="completed"]::before,
.product-timeline .time-line_box .time-line[data-timeline="active"]::before {
    background-color: var(--color-blue);
}

.product-timeline .time-line_box .time-line[data-timeline="active"]::after {
    border: 1px solid var(--color-blue);
}

.product-timeline .time-line_box::before {
    background-color: var(--bg-gray-250);
    height: 3px;
    border-radius: 0;
}

.product-timeline .time-line_box .time-line:last-child {
    padding: 0;
    flex: unset;
}

.product-timeline .time-line_box .time-line:last-child:after {
    content: "";
    position: absolute;
    display: block;
    border-radius: 100px;
    z-index: 10;
    background-color: var(--bg-gray-250);
    border: 1px solid transparent;
    right: 0px;
}

.product-timeline .time-line_box .time-line:last-child p,
.product-timeline .time-line_box .time-line:last-child h4 {
    position: relative;
    left: 24px;
}

.product-timeline .time-line_box .time-line:last-child h4 {
    text-align: left;
    position: absolute;
    right: unset;
    white-space: nowrap;
}

.package-details {
    padding: 64px 0px;
}

.package-details .container {
    max-width: min(812px, 90%);
}

.package-details .title {
    border-width: 2px;
}

.package-details .btn-group .next img {
    width: 15px;
}

.sending-box figure .img {
    min-height: 180px;
    border: 1.5px solid transparent;
}

.sending-box .col.active .img {
    box-shadow: 0px 0px 0px 1.5px #1F345E;
}

.shipment-box .col.active .img {
    box-shadow: 0px 0px 0px 1.5px #1F345E;
}

.sending-box .row {
    margin: 0px -9px;
}

.sending-box .row .col {
    padding: 0px 9px;
}

.shipment-box figure .img img {
    height: 64px;
}

.shipment-box .col {
    padding: 0px 8px !important;
}

.shipment-box .row {
    margin: 0px -8px !important;
}

.package-details .btn-group button {
    padding: 0.7rem 2rem;
}

.shipping-options .btn-group button {
    padding: 0.82rem 2rem;
}

.tooltip-img .tooltip {
    opacity: 1;
    min-width: 350px;
    border: 1px solid #00000026;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    -webkit-box-shadow: 0px 4px 40px 0px #8080801f;
    -moz-box-shadow: 0px 4px 40px 0px #8080801f;
    -ms-box-shadow: 0px 4px 40px 0px #8080801f;
    -o-box-shadow: 0px 4px 40px 0px #8080801f;
    box-shadow: 0px 4px 40px 0px #8080801f;
}

.tooltip-img .tooltip-wrapper {
    opacity: 1;
    pointer-events: auto;
    z-index: 9;
    display: none;
}

/* .tooltip-img .tooltip-wrapper{display:none;}
.tooltip-img:hover .tooltip-wrapper{display:block;} */
.tooltip-img .close-icon img,
.tooltip-img img {
    cursor: pointer;
}

.mobile-number .input-addon {
    top: 10px;
    left: 22px;
}

.mobile-number input {
    padding-left: 57px;
}

.form-control:focus {
    border-color: var(--color-gray-600);
}

.seperator:after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    height: 1px;
    width: 100%;
    background-color: var(--bg-gray-250);
}

.package-details .profile-form {
    border: none !important;
}

.profile-tab form fieldset.full_width,
.sender-details fieldset.full_width,
.consignee-details fieldset.full_width {
    width: 100% !important;
}

.input-box_label.input-focused+select {
    background-image: url("../images/icons/dark-select-arrow.svg");
}

.sender-row .col:nth-child(2),
.consignee-row .col:nth-child(2) {
    width: 20%;
    flex: unset;
}

.sender-row .col:nth-child(3),
.consignee-row .col:nth-child(3) {
    width: 60%;
    flex: unset;
}

.package-details .custom-checkbox [type="radio"]:checked+label,
.package-details .custom-checkbox [type="radio"]:not(:checked)+label {
    top: 0px;
    line-height: 30px;
}

.package-details .custom-checkbox [type="radio"]:not(:checked)+label:before {
    border-color: var(--color-gray-300);
}

.package-details .custom-checkbox [type="radio"]:checked+label:after,
.package-details .custom-checkbox [type="radio"]:not(:checked)+label:after {
    top: 8px;
}

.package-details .custom-checkbox [type="radio"]:checked+label:before,
.package-details .custom-checkbox [type="radio"]:not(:checked)+label:before {
    top: 4px;
}

.payment-success p {
    max-width: 43%;
}

.payment-method {
    border-left: 1px solid var(--bg-gray-250);
    padding-left: 24px !important;
}

.package-details ul li::marker {
    font-size: 0.8rem;
}

.qr-modal .img img {
    width: 224px;
}

.qr-btn {
    width: max-content;
}

.time-line_box .time-line h4 {
    padding-right: 15px;
}

.ds-none {
    display: none;
}

.home-delivery-btn.active {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.nearest-collection-btn.active {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.nearest-collection-btn.active img,
.home-delivery-btn.active img {
    filter: brightness(0) invert(1);
}

#createShipmentForm #step-5 label {
    transform: unset;
}

.error.invalid-feedback {
    transform: unset;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.suggestion-item {
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.3s;
}

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

/* ✅ Hover & Active State */
.suggestion-item:hover,
.suggestion-item.active {
    background: #f8f9fa;
}

/* ✅ No Matches Found Style */
.no-result {
    padding: 12px;
    font-size: 14px;
    color: #777;
    text-align: center;
}

/* ✅ Add City Icon to Suggestion */
.suggestion-item img {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}