:root {
    --color-primary: #1b3d4c;
    --color-secondary: #1F1F25;
    --color-third: #f8f9fa ;
    --color-body: #7D7D7D;
    --color-heading-1: #30373E;
    --color-white:#fff;
    --color-success: #3EB75E;
    --color-danger: #FF0003;
    --color-warning: #FF8F3C;
    --color-info: #1BA2DB;
    --color-facebook: #3B5997;
    --color-twitter: #1BA1F2;
    --color-youtube: #ED4141;
    --color-linkedin: #0077B5;
    --color-pinterest: #E60022;
    --color-instagram: #C231A1;
    --color-vimeo: #00ADEF;
    --color-twitch: #6441A3;
    --color-discord: #7289da;
    --p-light: 300;
    --p-regular: 400;
    --p-medium: 500;
    --p-semi-bold: 600;
    --p-bold: 700;
    --p-extra-bold: 800;
    --p-black: 900;
    --s-light: 300;
    --s-regular: 400;
    --s-medium: 500;
    --s-semi-bold: 600;
    --s-bold: 700;
    --s-extra-bold: 800;
    --s-black: 900;
    --transition: 0.3s;
    --font-primary: "Overpass", sans-serif;
    --font-secondary: "Century Gothic", sans-serif;
    --font-title-8: "URW Imperial W01 Regular", sans-serif;
    --font-3: "fontawesome", sans-serif;
    --Arabic-font: "Zain", serif;
    --font-size-b1: 18px;
    --font-size-b2: 16px;
    --font-size-b3: 12px;
    --font-size-b4: 10px;
    --line-height-b1: 26px;
    --line-height-b2: 26px;
    --line-height-b3: 1.7;
    --h1: 60px;
    --h2: 38px;
    --h3: 30px;
    --h4: 26px;
    --h5: 24px;
    --h6: 18px;
  }
  .bg-track {
    height: 100vh;
    background: #8abbd1;
    background: linear-gradient(12deg, rgba(138, 187, 209, 0.69) 20%, rgba(255, 255, 255, 1) 100%);
}
  .tracking {
    background: #eefaff;
}
.tracking a img {
    max-width: 160px;
    height: auto;
}
.track-main {
    display: flex;
    align-items: center;
}
.track-main .search-input-area {
    background: transparent;
}
.track-input-area {
    position: relative;
    visibility: visible !important;
    transform: inherit !important;
    opacity: 1 !important;
    box-shadow: none;
}
.search-input-area {
    transition: all 500ms ease;
    visibility: visible;
    transform: translateY(-100%);
    opacity: 1;
    position: relative;

    width: 100%;
    padding: 57px 0;
    background: white;
    box-shadow:none;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;}

 .search-input-area .search-input-inner {
     display: flex;
     align-items: center;
     position: relative;
 }
 .track-main .search-input-area .search-input-inner .input-div {
    width: 100% !important;
 }
 .search-input-area .search-input-inner .input-div {
    width: 80%;
    display: flex;
    align-items: center;
    margin: auto;
}
.search-input-area .search-input-inner .input-div input {
    background: #F7F7F7;
    border-radius: 5px;
    height: 55px;
}
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], textarea {
    font-size: var(--font-size-b2);
    font-weight: 400;
    height: auto;
    line-height: 28px;
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0 15px;
    outline: none;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
}
input, button, select, textarea {
    background: transparent;
    border: 1px solid var(--color-border);
    transition: all 0.4s ease-out 0s;
    color: var(--color-body);
    width: 100%;
}
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}
.search-input-area .search-input-inner .input-div button {
    max-width: max-content;
    padding: 17.5px;
    background: var(--color-primary);
    font-family: var(--font-secondary);
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    display: block;
    margin-left: -9px;
    border-radius: 0 5px 5px 0;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
input, button, select, textarea {
    background: transparent;
    border: 1px solid var(--color-border);
    transition: all 0.4s ease-out 0s;
    color: var(--color-body);
    width: 100%;
}
button, input {
    line-height: normal;
}

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}