/*============================== 
	- Template Name: Dermatology HTML Template
	- Author: Qtec Solution Limited
	- Version: 1.0
	- Website: https://www.qtecsolution.com
================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
/**=====================================================**
                ANIMATION-STYLES
=======================================================**/
.ourservices table tbody td .servicelink, .authlist .desktopdropdown-menu, .ordertable tbody tr td .action-dropdown {
  animation-duration: 350ms;
  animation-fill-mode: both;
}

@keyframes slideDownIn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
  0% {
    transform: translateY(-100%);
  }
}
@keyframes slideDownInMobile {
  0% {
    transform: translateY(-1.25rem);
  }
  100% {
    transform: translateY(0.625rem);
  }
  0% {
    transform: translateY(-1.25rem);
  }
}
@keyframes slideUpIn {
  0% {
    transform: translateY(-1.25rem);
  }
  100% {
    transform: translateY(0);
  }
  0% {
    transform: translateY(1.25rem);
  }
}
.authlist .desktopdropdown-menu, .ordertable tbody tr td .action-dropdown {
  animation-name: slideUpIn;
}

@keyframes slideUpInMobile {
  0% {
    transform: translateY(2.5rem);
  }
  100% {
    transform: translateY(1.5625rem);
  }
  0% {
    transform: translateY(2.5rem);
  }
}
@keyframes slideLeftIn {
  0% {
    transform: translateX(6.25rem);
  }
  100% {
    transform: translateX(0);
  }
  0% {
    transform: translateX(-6.25rem);
  }
}
@keyframes slideRightIn {
  0% {
    transform: translateX(6.25rem);
  }
  100% {
    transform: translateX(0);
  }
  0% {
    transform: translateX(6.25rem);
  }
}
.ourservices table tbody td .servicelink {
  animation-name: floating;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(1%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/**=====================================================**
                BREAKPOINT-VARIABLES
=======================================================**/
/**=====================================================**
                BREAKPOINT-FUNCTIONS
=======================================================**/
/**=====================================================**
                    BREAKPOINT-MIXIN
=======================================================**/
/**=====================================================**
                    BREAKPOINT-USAGE
=======================================================**/
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 12s linear infinite;
}

.updown {
  animation: updown 1s cubic-bezier(0.36, 0.07, 0.57, 0.99) infinite;
}

@keyframes updown {
  0% {
    transform: translateY(0.25rem);
  }
  50% {
    transform: translateY(0.75rem);
  }
  100% {
    transform: translateY(0.25rem);
  }
}
html {
  box-sizing: border-box;
  font-size: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html:focus-within {
  scroll-behavior: inherit;
}

* {
  box-sizing: inherit;
}
*::before, *::after {
  box-sizing: inherit;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
button,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
html,
i,
input,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
main,
nav,
object,
ol,
output,
option,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
select,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  font: inherit;
}
a::-moz-selection, abbr::-moz-selection, acronym::-moz-selection, address::-moz-selection, applet::-moz-selection, article::-moz-selection, aside::-moz-selection, audio::-moz-selection, b::-moz-selection, big::-moz-selection, blockquote::-moz-selection, button::-moz-selection, body::-moz-selection, canvas::-moz-selection, caption::-moz-selection, center::-moz-selection, cite::-moz-selection, code::-moz-selection, dd::-moz-selection, del::-moz-selection, details::-moz-selection, dfn::-moz-selection, div::-moz-selection, dl::-moz-selection, dt::-moz-selection, em::-moz-selection, embed::-moz-selection, fieldset::-moz-selection, figcaption::-moz-selection, figure::-moz-selection, footer::-moz-selection, form::-moz-selection, header::-moz-selection, hgroup::-moz-selection, html::-moz-selection, i::-moz-selection, input::-moz-selection, iframe::-moz-selection, img::-moz-selection, ins::-moz-selection, kbd::-moz-selection, label::-moz-selection, legend::-moz-selection, li::-moz-selection, mark::-moz-selection, menu::-moz-selection, main::-moz-selection, nav::-moz-selection, object::-moz-selection, ol::-moz-selection, output::-moz-selection, option::-moz-selection, p::-moz-selection, pre::-moz-selection, q::-moz-selection, ruby::-moz-selection, s::-moz-selection, samp::-moz-selection, section::-moz-selection, small::-moz-selection, span::-moz-selection, strike::-moz-selection, strong::-moz-selection, sub::-moz-selection, summary::-moz-selection, select::-moz-selection, sup::-moz-selection, table::-moz-selection, tbody::-moz-selection, td::-moz-selection, tfoot::-moz-selection, th::-moz-selection, thead::-moz-selection, time::-moz-selection, tr::-moz-selection, tt::-moz-selection, u::-moz-selection, ul::-moz-selection, var::-moz-selection, video::-moz-selection {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
}
a::selection,
abbr::selection,
acronym::selection,
address::selection,
applet::selection,
article::selection,
aside::selection,
audio::selection,
b::selection,
big::selection,
blockquote::selection,
button::selection,
body::selection,
canvas::selection,
caption::selection,
center::selection,
cite::selection,
code::selection,
dd::selection,
del::selection,
details::selection,
dfn::selection,
div::selection,
dl::selection,
dt::selection,
em::selection,
embed::selection,
fieldset::selection,
figcaption::selection,
figure::selection,
footer::selection,
form::selection,
header::selection,
hgroup::selection,
html::selection,
i::selection,
input::selection,
iframe::selection,
img::selection,
ins::selection,
kbd::selection,
label::selection,
legend::selection,
li::selection,
mark::selection,
menu::selection,
main::selection,
nav::selection,
object::selection,
ol::selection,
output::selection,
option::selection,
p::selection,
pre::selection,
q::selection,
ruby::selection,
s::selection,
samp::selection,
section::selection,
small::selection,
span::selection,
strike::selection,
strong::selection,
sub::selection,
summary::selection,
select::selection,
sup::selection,
table::selection,
tbody::selection,
td::selection,
tfoot::selection,
th::selection,
thead::selection,
time::selection,
tr::selection,
tt::selection,
u::selection,
ul::selection,
var::selection,
video::selection {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
}

body {
  background: url(../images/bodybg.webp) no-repeat center center/cover;
  color: hsl(0, 0%, 19%);
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  margin: 4rem 0 0;
}
@media screen and (min-width: 87.5rem) {
  body {
    font-size: 1rem;
  }
}
@media screen and (min-width: 62rem) {
  body {
    margin: 6.25rem 0 0;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: "Clash Display", sans-serif;
}
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, h5::-moz-selection, h6::-moz-selection {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
}

img {
  max-width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

svg,
picture {
  width: 100%;
  height: 100%;
}

a,
a:visited,
a:active,
a:hover {
  text-decoration: none;
}

strong {
  font-weight: 700;
}

iframe {
  width: 100%;
}

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-4,
.display-5,
.display-6 {
  font-family: "Clash Display", sans-serif;
}

button,
[type=button],
[type=reset],
[type=submit] {
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 1;
  margin: 0;
  padding: 0;
  transition: all 350ms ease-in-out;
}
button:focus,
[type=button]:focus,
[type=reset]:focus,
[type=submit]:focus {
  box-shadow: none;
  outline: none;
}

.btn-hamburger {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 19%);
  border: solid 0.0625rem hsl(210, 35%, 93%);
  border-radius: 0.25rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.btn-hamburger i {
  color: inherit;
  font-size: 1.5rem;
}
.btn-hamburger:not([disabled]):hover {
  background: hsl(0, 0%, 100%);
  color: hsl(217, 100%, 56%);
  border-color: hsl(217, 100%, 56%);
}

.btn-login {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem 1rem;
  height: 2.375rem;
  transition: all 350ms ease-in-out;
}
@media screen and (min-width: 48rem) {
  .btn-login {
    padding: 0.84375rem 2.5rem;
    height: 3rem;
  }
}
.btn-login:not([disabled]):hover {
  background: hsl(217, 100%, 47%);
  color: hsl(0, 0%, 100%);
}

.btn-submit {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.84375rem 1.5rem;
  height: 3rem;
  text-align: center;
  transition: all 350ms ease-in-out;
}
.btn-submit:not([disabled]):hover {
  background: hsl(217, 100%, 47%);
  color: hsl(0, 0%, 100%);
}

.btn-border {
  background: hsl(213, 100%, 98%);
  color: hsl(0, 0%, 11%);
  border: solid 0.0625rem hsl(0, 0%, 11%);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem 1rem;
  height: 2.375rem;
  transition: all 350ms ease-in-out;
}
@media screen and (min-width: 48rem) {
  .btn-border {
    padding: 0.78125rem 2.5rem;
    height: 3rem;
  }
}
.btn-border:not([disabled]):hover {
  background: hsl(0, 0%, 11%);
  color: hsl(213, 100%, 98%);
}

.btn-import {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem 1rem;
  transition: all 350ms ease-in-out;
}
@media screen and (min-width: 48rem) {
  .btn-import {
    padding: 0.84375rem 2.5rem;
  }
}
.btn-import:not([disabled]):hover {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
}

.btn-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-add .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.1875rem;
}
.btn-add .text {
  font: inherit;
  color: hsl(217, 100%, 56%);
  font-weight: 500;
}
.btn-add:not([disabled]):hover .icon svg path {
  stroke: hsl(217, 100%, 47%);
}
.btn-add:not([disabled]):hover .text {
  color: hsl(217, 100%, 47%);
}

.btn-delete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-delete .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.375rem;
}
.btn-delete .text {
  font: inherit;
  color: hsl(354, 70%, 54%);
  font-weight: 500;
}
.btn-delete:not([disabled]):hover .icon svg path {
  stroke: #bf2231;
}
.btn-delete:not([disabled]):hover .text {
  color: #bf2231;
}

.btn-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-success .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.375rem;
}
.btn-success .text {
  font: inherit;
  color: hsl(152, 69%, 31%);
  font-weight: 500;
}
.btn-success:not([disabled]):hover .icon svg path {
  stroke: #115a38;
}
.btn-success:not([disabled]):hover .text {
  color: #115a38;
}

.btn-remove {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-remove:not([disabled]):hover svg path {
  stroke: #bf2231;
}

.btn-text {
  background: hsl(0, 0%, 100%);
  color: hsl(217, 100%, 56%);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  transition: color 350ms ease-in-out;
}
.btn-text:not([disabled]):hover {
  color: hsl(217, 100%, 47%);
}

.cardservice {
  border: solid 0.0625rem hsl(210, 35%, 93%);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 100rem) {
  .cardservice {
    padding: 2.625rem 3rem;
    gap: 3rem;
  }
}
.cardservice-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.cardservice-header .serviceicon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cardservice-header .servicetitle {
  color: hsl(0, 0%, 11%);
  font-size: 1.5rem;
}
@media screen and (min-width: 100rem) {
  .cardservice-header .servicetitle {
    font-size: 2rem;
  }
}
.cardservice-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 62rem) {
  .cardservice-body {
    gap: 3rem;
  }
}
.cardservice-body .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 350ms ease-in-out;
}
.cardservice-body .servicetext {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}

.service-1:not([disabled]):hover {
  background: hsl(217, 100%, 56%);
}
.service-1:not([disabled]):hover .cardservice-header .serviceicon svg path {
  fill: hsl(0, 0%, 100%);
}
.service-1:not([disabled]):hover .cardservice-header .servicetitle {
  color: hsl(0, 0%, 100%);
}
.service-1:not([disabled]):hover .cardservice-body .servicetext {
  color: hsl(0, 0%, 100%);
}
.service-1:not([disabled]):hover .cardservice-body .icon {
  transform: translateX(0.625rem);
}
.service-1:not([disabled]):hover .cardservice-body .icon svg path {
  stroke: hsl(0, 0%, 100%);
}

.service-2:not([disabled]):hover,
.service-3:not([disabled]):hover,
.service-4:not([disabled]):hover {
  background: hsl(217, 100%, 56%);
}
.service-2:not([disabled]):hover .cardservice-header .serviceicon svg path,
.service-3:not([disabled]):hover .cardservice-header .serviceicon svg path,
.service-4:not([disabled]):hover .cardservice-header .serviceicon svg path {
  stroke: hsl(0, 0%, 100%);
}
.service-2:not([disabled]):hover .cardservice-header .servicetitle,
.service-3:not([disabled]):hover .cardservice-header .servicetitle,
.service-4:not([disabled]):hover .cardservice-header .servicetitle {
  color: hsl(0, 0%, 100%);
}
.service-2:not([disabled]):hover .cardservice-body .servicetext,
.service-3:not([disabled]):hover .cardservice-body .servicetext,
.service-4:not([disabled]):hover .cardservice-body .servicetext {
  color: hsl(0, 0%, 100%);
}
.service-2:not([disabled]):hover .cardservice-body .icon,
.service-3:not([disabled]):hover .cardservice-body .icon,
.service-4:not([disabled]):hover .cardservice-body .icon {
  transform: translateX(0.625rem);
}
.service-2:not([disabled]):hover .cardservice-body .icon svg path,
.service-3:not([disabled]):hover .cardservice-body .icon svg path,
.service-4:not([disabled]):hover .cardservice-body .icon svg path {
  stroke: hsl(0, 0%, 100%);
}

.card-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
.card-counter-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-counter-header .countnumber,
.card-counter-header .icon {
  font-weight: 600;
}
.card-counter-body .countertitle {
  color: hsl(0, 0%, 19%);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 300;
}

.cardvalue {
  border: solid 0.0625rem hsl(210, 35%, 93%);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}
@media screen and (min-width: 62rem) {
  .cardvalue {
    gap: 2.5rem;
    padding: 3rem;
  }
}
.cardvalue .valueicon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cardvalue .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}

.cardchoose {
  background: hsl(0, 0%, 100%);
  border: solid 0.0625rem hsl(210, 35%, 93%);
  border-radius: 0.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.875rem 1.5rem 3rem;
  width: 100%;
  height: 100%;
  transition: all 350ms ease-in-out;
}
.cardchoose .chooseicon {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem;
}
.cardchoose .icon-1 {
  background: hsl(44, 100%, 93%);
}
.cardchoose .icon-2 {
  background: hsl(0, 100%, 96%);
}
.cardchoose .icon-3 {
  background: hsl(18, 100%, 95%);
}
.cardchoose .icon-4 {
  background: hsl(219, 100%, 95%);
}
.cardchoose .icon-5 {
  background: hsl(120, 100%, 97%);
}
.cardchoose .icon-6 {
  background: hsl(0, 0%, 95%);
}
.cardchoose h5 {
  max-height: 3rem;
  display: flex;
  align-items: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
.cardchoose p {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 300;
}

.cardchoose-1:not([disabled]):hover {
  background: hsl(36, 100%, 70%);
  border-color: #ff9900;
}

.cardchoose-2:not([disabled]):hover {
  background: hsl(0, 95%, 84%);
  border-color: hsl(0, 44%, 58%);
}

.cardchoose-3:not([disabled]):hover {
  background: hsl(18, 100%, 65%);
  border-color: hsl(18, 100%, 50%);
}

.cardchoose-4:not([disabled]):hover {
  background: hsl(219, 100%, 91%);
  border-color: hsl(214, 100%, 77%);
}

.cardchoose-5:not([disabled]):hover {
  background: hsl(120, 100%, 92%);
  border-color: hsl(119, 100%, 79%);
}

.cardchoose-6:not([disabled]):hover {
  background: hsl(0, 0%, 86%);
  border-color: hsl(0, 0%, 72%);
}

.cardpackage {
  background: hsl(0, 0%, 100%);
  border: solid 0.0625rem hsl(210, 35%, 93%);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1.875rem 1.875rem;
  width: 100%;
  height: 100%;
}
.cardpackage-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cardpackage-header .icon {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem;
}
.cardpackage-header .title {
  color: hsl(0, 0%, 11%);
  font-weight: 600;
}
.cardpackage-body p {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 300;
}
@media screen and (min-width: 87.5rem) {
  .cardpackage-body p {
    font-size: 0.875rem;
  }
}
.cardpackage.package-1 .cardpackage-header .icon {
  background: hsl(219, 100%, 95%);
}
.cardpackage.package-2 .cardpackage-header .icon {
  background: hsl(0, 100%, 95%);
}
.cardpackage.package-3 .cardpackage-header .icon {
  background: hsl(151, 100%, 94%);
}

.cardreview {
  background: hsl(0, 0%, 100%);
  border: solid 0.0625rem hsl(210, 35%, 93%);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1.875rem 1.875rem;
  width: 100%;
  height: 100%;
}
.cardreview-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cardreview-header h5 {
  color: hsl(0, 0%, 11%);
  font-size: 1.25rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
.cardreview-header p {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 300;
}
@media screen and (min-width: 87.5rem) {
  .cardreview-header p {
    font-size: 1rem;
  }
}
.cardreview-body {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cardreview-body .review-thumbnail {
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cardreview-body .review-thumbnail img {
  width: 100%;
  height: 100%;
}
.cardreview-body .reviewer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cardreview-body .reviewer h5 {
  color: hsl(0, 0%, 11%);
  font-size: 1rem;
  font-weight: 500;
}
.cardreview-body .reviewer p {
  color: hsl(210, 17%, 36%);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 300;
}

.header {
  background: hsl(0, 0%, 100%);
  border-bottom: solid 0.0625rem hsl(210, 35%, 93%);
  width: 100%;
  height: 4rem;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 62rem) {
  .header {
    height: 6.25rem;
  }
}
.header .logo {
  width: 8.75rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 48rem) {
  .header .logo {
    width: 12.875rem;
  }
}
@media screen and (min-width: 62rem) {
  .header .logo {
    width: 12.9375rem;
    height: 1.375rem;
  }
}
.header .logo img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(1.25rem);
  backdrop-filter: blur(1.25rem);
  box-shadow: 0 0.125rem 0.25rem rgba(7, 37, 68, 0.06);
}

input,
select,
textarea {
  border: none;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

input[type=date]::before {
  content: attr(data-placeholder);
  width: 100%;
}

input[type=date]:focus::before,
input[type=date]:valid::before {
  display: none;
}

textarea {
  resize: none;
}

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

/* Firefox */
input[type=number] {
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}

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;
}
input[type=search]::-webkit-search-decoration:focus,
input[type=search]::-webkit-search-cancel-button:focus,
input[type=search]::-webkit-search-results-button:focus,
input[type=search]::-webkit-search-results-decoration:focus {
  outline: none;
}

.form-control {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
  border-color: hsl(210, 16%, 82%);
  border-radius: 0.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.78125rem 1rem;
  transition: all 350ms ease-in-out;
}
@media screen and (min-width: 87.5rem) {
  .form-control {
    font-size: 1rem;
  }
}
.form-control::-moz-placeholder {
  color: hsl(208, 9%, 59%);
  font-weight: 400;
}
.form-control::placeholder {
  color: hsl(208, 9%, 59%);
  font-weight: 400;
}

.form-select {
  border-color: hsl(210, 16%, 82%);
  border-radius: 0.125rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.78125rem 1rem;
  transition: all 350ms ease-in-out;
}
@media screen and (min-width: 87.5rem) {
  .form-select {
    font-size: 1rem;
  }
}

.form-control:focus,
.form-select:focus {
  box-shadow: none;
  outline: none;
  border-color: hsl(217, 100%, 56%);
}

.form-control.is-invalid, .was-validated .form-control:invalid {
  box-shadow: none;
}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
  box-shadow: none;
  outline: none;
}

.was-validated .form-control:valid:focus {
  box-shadow: none;
  outline: none;
}

.form-control.is-valid, .was-validated .form-control:valid,
.form-select.is-valid, .was-validated .form-select:valid {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_619_816)'%3E%3Cpath d='M9.9974 18.3332C14.5998 18.3332 18.3307 14.6022 18.3307 9.99984C18.3307 5.39746 14.5998 1.6665 9.9974 1.6665C5.39502 1.6665 1.66406 5.39746 1.66406 9.99984C1.66406 14.6022 5.39502 18.3332 9.9974 18.3332Z' stroke='%2302B290' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 8L8.875 12L7 10.1818' stroke='%2302B290' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_619_816'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.form-select.is-invalid:focus, .was-validated .form-select:invalid:focus {
  box-shadow: none;
  outline: none;
  border-color: hsl(217, 100%, 56%);
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10L12 16L18 10H6Z' fill='%231B1B1B'/%3E%3C/svg%3E%0A");
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10L12 16L18 10H6Z' fill='%231B1B1B'/%3E%3C/svg%3E%0A");
}

.output {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  border: solid 0.0625rem hsl(210, 16%, 82%);
  border-radius: 0.125rem;
  padding: 0.78125rem 0.625rem 0.78125rem 1rem;
}
.output .text {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 400;
}
.output .uploadlabel {
  cursor: pointer;
  background: hsl(0, 0%, 11%);
  color: hsl(0, 0%, 100%);
  border-radius: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 350ms ease-in-out;
}
.output .uploadlabel:not([disabled]):hover {
  background: hsl(0, 0%, 19%);
  color: hsl(0, 0%, 100%);
}

.form-control.is-valid ~ .output, .was-validated .form-control:valid ~ .output {
  border-color: hsl(152, 69%, 31%);
  box-shadow: none;
  outline: none;
}

.form-control.is-invalid ~ .output, .was-validated .form-control:invalid ~ .output {
  border-color: hsl(354, 70%, 54%);
}

.input-group-text {
  background: hsl(207, 23%, 92%);
  font-size: 0.9375rem;
  border-radius: 0rem;
}

.form-check {
  padding-left: 0rem;
  margin-bottom: 0rem;
}
.form-check-input:checked ~ .form-check-label::before {
  opacity: 1;
  visibility: visible;
}
.form-check-input:checked ~ .form-check-label::after {
  border-color: hsl(217, 100%, 56%);
}
.form-check-label {
  color: hsl(0, 0%, 19%);
  cursor: pointer;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 300;
  position: relative;
  padding-left: 1.75rem;
}
@media screen and (min-width: 87.5rem) {
  .form-check-label {
    font-size: 1rem;
  }
}
.form-check-label::before, .form-check-label::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 100%;
  transform: translateY(-50%);
  left: 0;
  transition: all 350ms ease-in-out;
}
.form-check-label::before {
  width: 0.625rem;
  height: 0.625rem;
  left: 0.25rem;
  background: hsl(217, 100%, 56%);
  opacity: 0;
  visibility: hidden;
}
.form-check-label::after {
  width: 1.125rem;
  height: 1.125rem;
  border: solid 0.0625rem hsl(208, 9%, 59%);
}

.form-check-input.is-invalid ~ .form-check-label::after, .was-validated .form-check-input:invalid ~ .form-check-label::after {
  border-color: hsl(354, 70%, 54%);
}

.form-check-input.is-valid ~ .form-check-label::after, .was-validated .form-check-input:valid ~ .form-check-label::after {
  border-color: hsl(152, 69%, 31%);
}

.radiobox input[type=radio]:checked ~ .radiolabel {
  color: hsl(217, 100%, 56%);
}
.radiobox .radiolabel {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
  border-radius: 0.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  height: 2.5rem;
}
@media screen and (min-width: 87.5rem) {
  .radiobox .radiolabel {
    font-size: 1rem;
  }
}

.form-control.is-invalid ~ .uploadbox, .was-validated .form-control:invalid ~ .uploadbox {
  border-color: hsl(354, 70%, 54%);
}

.uploadbox {
  border: solid 0.0625rem hsl(207, 23%, 92%);
  border-radius: 0.125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
}
.uploadbox .uploadedfile {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 400;
}
.uploadbox .upload-file {
  background: hsl(0, 0%, 11%);
  color: hsl(0, 0%, 100%);
  border: solid 0.0625rem hsl(0, 0%, 11%);
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: all 350ms ease-in-out;
}
.uploadbox .upload-file:not([disabled]):hover {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
}

.paytext {
  margin: 0.75rem 0rem 1.25rem;
  color: hsl(208, 9%, 59%);
  font-size: 0.75rem;
  font-weight: 400;
}

.offcanvas {
  background: hsl(213, 100%, 98%);
}
.offcanvas.offcanvas-top {
  border-bottom: 0;
}
.offcanvas.offcanvas-bottom {
  border-top: 0;
}
.offcanvas.offcanvas-start {
  border-right: 0;
  width: 17.5rem;
}
.offcanvas.offcanvas-end {
  border-left: 0;
}
.offcanvas-header .btn-close {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0rem;
  transition: all 350ms ease-in-out;
}
.offcanvas-header .btn-close i {
  font-size: 1.5rem;
}
.offcanvas-header .btn-close:not([disabled]):hover {
  opacity: 1;
  transform: rotate(180deg);
}
.offcanvas-header .btn-close:not([disabled]):hover i {
  color: hsl(354, 70%, 54%);
}
.offcanvas-body::-webkit-scrollbar {
  background: transparent;
  width: 0.5rem;
}
.offcanvas-body::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
}

.modal-content {
  border-radius: 0.25rem;
}
.modal-header {
  border-bottom: 0;
}
.modal-header .btn-close {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
}
.modal-header .btn-close svg {
  width: 100%;
  height: 100%;
  transition: transform 350ms ease-in-out;
}
.modal-header .btn-close:not([disabled]):hover svg {
  transform: rotate(90deg);
}
.modal-header .btn-close:not([disabled]):hover svg path {
  fill: hsl(354, 70%, 54%);
}

.mypayment {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}
.mypayment-header {
  border-bottom: solid 0.0625rem hsl(207, 23%, 92%);
  padding-bottom: 1rem;
}
.mypayment-header h5 {
  color: hsl(0, 0%, 19%);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
}
.mypayment-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mypayment-body .info {
  max-width: 16.625rem;
  margin: 0 auto 0.5rem;
}
.mypayment-body .info p {
  color: hsl(208, 9%, 59%);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
}
@media screen and (min-width: 87.5rem) {
  .mypayment-body .info p {
    font-size: 0.875rem;
  }
}
.mypayment-body .paythumb {
  width: 8.375rem;
  height: 8.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-inline: auto;
}

.tooltip-inner {
  background: hsl(0, 0%, 11%);
  font-size: 0.75rem;
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: hsl(0, 0%, 11%);
}
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: hsl(0, 0%, 11%);
}
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: hsl(0, 0%, 11%);
}
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: hsl(0, 0%, 11%);
}

.footer {
  padding-top: 4rem;
}
.footer-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .footer-content {
    text-align: left;
  }
}
.footer .footerinfo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 62rem) {
  .footer .footerinfo {
    gap: 2rem;
  }
}
.footer .footerinfo .logo {
  width: 12.875rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-inline: auto;
}
@media screen and (min-width: 62rem) {
  .footer .footerinfo .logo {
    margin: 0;
  }
}
.footer .footerinfo .logo img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.footer .footerinfo .infotext {
  max-width: 65%;
  margin-inline: auto;
}
@media screen and (min-width: 62rem) {
  .footer .footerinfo .infotext {
    max-width: 100%;
    margin: 0;
  }
}
.footer .footerinfo .infotext .text {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.footer .footerdetail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 62rem) {
  .footer .footerdetail {
    gap: 2rem;
  }
}
.footer .footerdetail-header .footertitle {
  color: hsl(0, 0%, 11%);
}
.footer .footerdetail-body .addressinfo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.footer .footerdetail-body .addressinfo p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.footer .footerdetail-body .wearhouse p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.footer .copyright {
  border-top: solid 0.0625rem hsl(210, 35%, 93%);
  width: 100%;
  padding: 1.5rem 0rem;
}
.footer .copyright-text {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
  letter-spacing: 0.01rem;
  text-align: center;
}

.preloader {
  background: hsl(213, 100%, 98%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0rem;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  z-index: 9999;
}
.preloader .loader {
  width: 15.625rem;
  height: 15.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 48rem) {
  .preloader .loader {
    width: 18.75rem;
    height: 18.75rem;
  }
}
@media screen and (min-width: 62rem) {
  .preloader .loader {
    width: 21.875rem;
    height: 21.875rem;
  }
}

table tr {
  vertical-align: middle;
}
table tr th, table tr td {
  vertical-align: middle;
}

.ordertable thead {
  background: hsl(207, 23%, 92%);
}
.ordertable thead tr th {
  color: hsl(0, 0%, 11%);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
}
@media screen and (min-width: 100rem) {
  .ordertable thead tr th {
    font-size: 0.875rem;
  }
}
.ordertable tbody tr {
  border-bottom: solid 0.0625rem hsl(207, 23%, 92%);
}
.ordertable tbody tr th .tableinfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 9.375rem;
}
.ordertable tbody tr th p {
  color: hsl(0, 0%, 19%);
  font-size: 0.75rem;
  font-weight: 300;
}
@media screen and (min-width: 100rem) {
  .ordertable tbody tr th p {
    font-size: 0.875rem;
  }
}
.ordertable tbody tr th p span {
  font-weight: 500;
}
.ordertable tbody tr th .importid span {
  color: hsl(217, 100%, 56%);
}
.ordertable tbody tr th .orderid span {
  color: hsl(0, 0%, 11%);
}
.ordertable tbody tr td .tableinfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 9.375rem;
}
.ordertable tbody tr td p {
  color: hsl(0, 0%, 19%);
  font-size: 0.75rem;
  font-weight: 300;
}
@media screen and (min-width: 100rem) {
  .ordertable tbody tr td p {
    font-size: 0.875rem;
  }
}
.ordertable tbody tr td p span {
  font-weight: 500;
}
.ordertable tbody tr td .address,
.ordertable tbody tr td .totalcost {
  font-weight: 500;
}
.ordertable tbody tr td .flag {
  width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ordertable tbody tr td .status .paid {
  color: hsl(168, 98%, 35%);
}
.ordertable tbody tr td .status .calculating {
  color: hsl(0, 0%, 0%);
}
.ordertable tbody tr td .status .topay {
  color: hsl(217, 100%, 56%);
}
.ordertable tbody tr td .status .waiting {
  color: #ff9900;
}
.ordertable tbody tr td .status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.ordertable tbody tr td .status .icon {
  width: 0.5625rem;
  height: 0.5625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ordertable tbody tr td .status.orderplaced .icon svg circle {
  fill: hsl(224, 15%, 66%);
}
.ordertable tbody tr td .status.approved .icon svg circle {
  fill: hsl(209, 80%, 58%);
}
.ordertable tbody tr td .status.inwearhouse .icon svg circle {
  fill: hsl(79, 85%, 59%);
}
.ordertable tbody tr td .status.shippingprocess .icon svg circle {
  fill: hsl(105, 34%, 50%);
}
.ordertable tbody tr td .status.bdcustoms .icon svg circle {
  fill: hsl(335, 100%, 72%);
}
.ordertable tbody tr td .status.pickedup .icon svg circle {
  fill: #ff9900;
}
.ordertable tbody tr td .action {
  position: relative;
  cursor: pointer;
}
.ordertable tbody tr td .action .dropdownicon {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ordertable tbody tr td .action-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  border-radius: 0.25rem;
  background: hsl(0, 0%, 100%);
  box-shadow: 0.1875rem 0.125rem 0.875rem 0.1875rem hsl(207, 23%, 92%);
  min-width: 8rem;
  display: none;
}
.ordertable tbody tr td .action-dropdown .dropdownlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background: hsl(0, 0%, 100%);
}
.ordertable tbody tr td .action-dropdown .dropdownlist-item:last-of-type .dropdownlist-link {
  border-bottom: 0;
}
.ordertable tbody tr td .action-dropdown .dropdownlist-link {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  width: 100%;
  padding: 0.75rem 1rem;
  border-bottom: solid 0.0625rem hsl(210, 35%, 93%);
  transition: color 350ms ease-in-out;
}
@media screen and (min-width: 100rem) {
  .ordertable tbody tr td .action-dropdown .dropdownlist-link {
    font-size: 0.875rem;
  }
}
.ordertable tbody tr td .action-dropdown .dropdownlist-link:not([disabled]):hover {
  color: hsl(217, 100%, 56%);
}
.ordertable tbody tr td .action:not([disabled]):hover .action-dropdown {
  display: block;
}

.importform {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}
@media screen and (min-width: 48rem) {
  .importform {
    flex-direction: row;
    align-items: flex-start;
  }
}
.importform .inputbox {
  width: 100%;
}
@media screen and (min-width: 48rem) {
  .importform .inputbox {
    width: calc(100% - 14.75rem);
  }
}
.importform .inputbox input {
  border: solid 0.0625rem hsl(208, 19%, 87%);
  border-radius: 0.125rem;
  font-weight: 400;
  height: 3rem;
  padding-inline: 1.25rem;
  width: 100%;
}
.importform .inputbox input::-moz-placeholder {
  color: hsl(208, 9%, 59%);
}
.importform .inputbox input::placeholder {
  color: hsl(208, 9%, 59%);
}
.importform .submitbox {
  width: 13.5rem;
  margin-inline: auto;
}
@media screen and (min-width: 48rem) {
  .importform .submitbox {
    margin: 0;
  }
}

.searchform {
  display: flex;
  align-items: center;
  border: solid 0.0625rem hsl(207, 23%, 92%);
  border-radius: 0.25rem;
  height: 3rem;
  padding: 0.875rem 1rem;
  gap: 1rem;
}

.desktoplist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.desktoplist-item {
  padding-inline: 0.75rem;
}
@media screen and (min-width: 87.5rem) {
  .desktoplist-item {
    padding-inline: 1.125rem;
  }
}
.desktoplist-link {
  color: hsl(0, 0%, 11%);
  font-weight: 600;
  transition: color 350ms ease-in-out;
}
.desktoplist-link:hover:not(.active) {
  color: hsl(217, 100%, 56%);
}
.desktoplist-link.active {
  color: hsl(217, 100%, 56%);
}

.authlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.authlist-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
}
@media screen and (min-width: 62rem) {
  .authlist-item {
    padding-inline: 0.75rem;
    height: 6.25rem;
  }
}
.authlist-item:not([disabled]):hover .authlist-link .text {
  color: hsl(217, 100%, 56%);
}
.authlist-item:not([disabled]):hover .authlist-link .icon svg {
  transform: rotateX(180deg);
}
.authlist-item:not([disabled]):hover .authlist-link .icon svg path {
  fill: hsl(217, 100%, 56%);
}
.authlist-item:not([disabled]):hover .authlist-linkcircle {
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
  border-color: hsl(217, 100%, 56%);
}
.authlist .desktopdropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.authlist .desktopdropdown-menu {
  background: hsl(0, 0%, 100%);
  box-shadow: 0rem 3rem 6.25rem 0rem rgba(30, 30, 30, 0.05);
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 8.75rem;
  max-width: 12.5rem;
  display: none;
}
.authlist .desktopdropdown:not([disabled]):hover .desktopdropdown-menu {
  display: block;
}
.authlist-link {
  display: flex;
  align-items: center;
  transition: all 350ms ease-in-out;
}
.authlist-link .text {
  color: hsl(0, 0%, 11%);
  font-weight: 600;
}
.authlist-link .icon {
  width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.authlist-link .icon svg {
  transition: transform 350ms ease-in-out;
}
.authlist-linkcircle {
  background: hsl(0, 0%, 100%);
  color: hsl(240, 30%, 8%);
  border: solid 0.0625rem hsl(207, 23%, 92%);
  border-radius: 100%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Clash Display", sans-serif;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.0625rem;
  transition: all 350ms ease-in-out;
}

.mobilelist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-bottom: solid 0.0625rem hsl(210, 35%, 93%);
}
.mobilelist-item:last-of-type .mobilelist-link {
  border-bottom: 0;
}
.mobilelist-link {
  background: transparent;
  color: hsl(0, 0%, 11%);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  width: 100%;
  padding: 0.75rem 1rem;
  border-bottom: solid 0.0625rem hsl(210, 35%, 93%);
  transition: color 350ms ease-in-out;
}
.mobilelist-link:hover:not(.active) {
  color: hsl(217, 100%, 56%);
}
.mobilelist-link.active {
  color: hsl(217, 100%, 56%);
}

.sociallist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}
@media screen and (min-width: 62rem) {
  .sociallist {
    justify-content: flex-start;
  }
}
.sociallist-link {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sociallist-link:not([disabled]):hover svg path {
  stroke: hsl(217, 100%, 56%);
}

.footerlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footerlist-link {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
  letter-spacing: 0.01rem;
  transition: color 350ms ease-in-out;
}
.footerlist-link:not([disabled]):hover {
  color: hsl(217, 100%, 56%);
}

.contactlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.contactlist-link {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
  transition: color 350ms ease-in-out;
}
.contactlist-link:not([disabled]):hover {
  color: hsl(217, 100%, 56%);
}

.tracklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18.75rem;
  margin-inline: auto;
  gap: 3rem;
}
@media screen and (min-width: 62rem) {
  .tracklist {
    flex-direction: row;
    margin: 0;
    width: 100%;
  }
}
.tracklist-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
@media screen and (min-width: 62rem) {
  .tracklist-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
.tracklist-item .trackicon {
  background: hsl(0, 0%, 94%);
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}
.tracklist-item .trackicon .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tracklist-item .trackicon::before {
  content: "";
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.125rem;
  height: 82%;
  border: dashed 0.0625rem hsl(0, 0%, 83%);
  z-index: 1;
}
@media screen and (min-width: 62rem) {
  .tracklist-item .trackicon::before {
    height: 0.125rem;
    top: 50%;
    transform: translateY(-50%);
    right: auto;
    width: 100%;
    left: -100%;
  }
}
@media screen and (min-width: 64rem) {
  .tracklist-item .trackicon::before {
    width: 120%;
    left: -120%;
  }
}
@media screen and (min-width: 68.75rem) {
  .tracklist-item .trackicon::before {
    width: 140%;
    left: -140%;
  }
}
@media screen and (min-width: 75rem) {
  .tracklist-item .trackicon::before {
    width: 170%;
    left: -170%;
  }
}
@media screen and (min-width: 100rem) {
  .tracklist-item .trackicon::before {
    width: 260%;
    left: -260%;
  }
}
@media screen and (min-width: 112.5rem) {
  .tracklist-item .trackicon::before {
    width: 280%;
    left: -280%;
  }
}
.tracklist-item .tracktitle {
  width: calc(100% - 4.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 62rem) {
  .tracklist-item .tracktitle {
    width: 100%;
    min-height: 2.25rem;
  }
}
.tracklist-item .tracktitle .title {
  font-size: 0.75rem;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
@media screen and (min-width: 100rem) {
  .tracklist-item .tracktitle .title {
    font-size: 1rem;
  }
}
.tracklist-item.active .trackicon {
  background: hsl(217, 100%, 56%);
}
.tracklist-item.active .trackicon .icon path {
  stroke: hsl(0, 0%, 100%);
}
.tracklist-item.active .trackicon::before {
  border-color: hsl(217, 100%, 56%);
}
.tracklist-item:first-child .trackicon::before {
  top: 0rem;
  width: 0rem;
  height: 0;
  display: none;
}

.pagination {
  border-radius: 0rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.pagination .page-item:hover:not(.active) .page-link {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
}
.pagination .page-item.active .page-link {
  background: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 11%);
}
.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link {
  border-radius: 0rem;
}
.pagination .page-item:first-child {
  margin-right: 1rem;
}
.pagination .page-item:last-child {
  margin-left: 1rem;
}
.pagination .page-link {
  border: none;
  background: hsl(0, 0%, 100%);
  color: hsl(224, 15%, 66%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0rem;
}
.pagination .page-link:focus {
  box-shadow: none;
  outline: none;
}

.homebanner {
  background: hsl(213, 100%, 98%);
  padding-bottom: 3rem;
}
.homebanner .details {
  padding: 3rem 0rem 0rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 75rem) {
  .homebanner .details {
    gap: 3rem;
  }
}
.homebanner .details .icon {
  width: 4.25rem;
  height: 2.5625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.homepackages {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .homepackages {
    padding: 5rem 0rem;
  }
}
.homepackages .packgedetail {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 87.5rem) {
  .homepackages .packgedetail {
    gap: 5rem;
  }
}

.deliveries {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .deliveries {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 100rem) {
  .deliveries {
    padding: 7.75rem 0rem;
  }
}
.deliveries .deliveries-detail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .deliveries .deliveries-detail {
    margin-bottom: 0rem;
  }
}
@media screen and (min-width: 75rem) {
  .deliveries .deliveries-detail {
    gap: 3rem;
  }
}
.deliveries .deliveries-detail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.deliveries .deliveries-detail ul li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.deliveries .deliveries-detail ul li .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.deliveries-thumbnail {
  width: 100%;
  min-height: 13.375rem;
  max-height: 33.4375rem;
  position: relative;
}
@media screen and (min-width: 48rem) {
  .deliveries-thumbnail {
    min-height: 21.875rem;
  }
}
@media screen and (min-width: 62rem) {
  .deliveries-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 100rem) {
  .deliveries-thumbnail {
    min-height: 33.4375rem;
  }
}
.deliveries-thumbnail img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
}
.deliveries-thumbnail .deliveriesicon {
  display: none;
  position: absolute;
  left: -18.3125rem;
  bottom: 0rem;
  width: 39.8125rem;
  height: 24rem;
}
@media screen and (min-width: 62rem) {
  .deliveries-thumbnail .deliveriesicon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 75rem) {
  .deliveries-thumbnail .deliveriesicon {
    bottom: -2.25rem;
  }
}
@media screen and (min-width: 100rem) {
  .deliveries-thumbnail .deliveriesicon {
    bottom: 0rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .deliveries-thumbnail .deliveriesicon {
    bottom: -2.25rem;
  }
}

.trackpackage {
  background: hsl(213, 100%, 98%);
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .trackpackage {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 100rem) {
  .trackpackage {
    padding: 7.75rem 0rem;
  }
}
.trackpackage-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .trackpackage-detail {
    gap: 3rem;
  }
}
@media screen and (min-width: 100rem) {
  .trackpackage-detail {
    gap: 5rem;
  }
}
.trackpackage-detail .mytrack {
  max-width: 13.5rem;
}

.managedelivery {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .managedelivery {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 100rem) {
  .managedelivery {
    padding: 7.75rem 0rem;
  }
}
.managedelivery .deliverydetails {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .managedelivery .deliverydetails {
    margin-bottom: 0rem;
  }
}
@media screen and (min-width: 75rem) {
  .managedelivery .deliverydetails {
    gap: 3rem;
  }
}
.managedelivery-thumbnail {
  width: 100%;
  min-height: 13.375rem;
  max-height: 33.4375rem;
  position: relative;
}
@media screen and (min-width: 48rem) {
  .managedelivery-thumbnail {
    min-height: 21.875rem;
  }
}
@media screen and (min-width: 62rem) {
  .managedelivery-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 100rem) {
  .managedelivery-thumbnail {
    min-height: 33.4375rem;
  }
}
.managedelivery-thumbnail img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
}
.managedelivery-thumbnail .deliveriesicon {
  display: none;
  position: absolute;
  left: -18.3125rem;
  bottom: 0rem;
  width: 39.8125rem;
  height: 24rem;
}
@media screen and (min-width: 62rem) {
  .managedelivery-thumbnail .deliveriesicon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 75rem) {
  .managedelivery-thumbnail .deliveriesicon {
    bottom: -2.25rem;
  }
}
@media screen and (min-width: 100rem) {
  .managedelivery-thumbnail .deliveriesicon {
    bottom: 0rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .managedelivery-thumbnail .deliveriesicon {
    bottom: -2.25rem;
  }
}

.pricesection {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .pricesection {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 100rem) {
  .pricesection {
    padding: 7.75rem 0rem;
  }
}
.pricesection-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .pricesection-detail {
    gap: 3rem;
  }
}
.pricesection-detail .cost {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.pricesection-detail .cost-header .title {
  color: hsl(0, 0%, 77%);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
@media screen and (min-width: 87.5rem) {
  .pricesection-detail .cost-header .title {
    font-size: 2rem;
  }
}
.pricesection-detail .cost-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pricesection-detail .cost-body .costinfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pricesection-detail .cost-body .costinfo .title {
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
}
.pricesection-detail .cost-body .costinfo h5 {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
}
.pricesection-detail .cost-body .costinfo .icon {
  width: 1.8125rem;
  height: 1.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pricesection .shippingcost {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pricesection .shippingcost-header .title {
  color: hsl(0, 0%, 11%);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}
.pricesection .shippingcost-body .costform {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .pricesection .shippingcost-body .costform {
    gap: 3rem;
  }
}
.pricesection .shippingcost-body .costform .shipmethod {
  border: solid 0.0625rem hsl(207, 23%, 92%);
  border-radius: 0.25rem;
  padding: 0.625rem;
}
.pricesection .shippingcost-body .costform .submitbox {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.pricesection .shippingcost-body .costform .submitbox .submitbutton {
  width: 100%;
}
.pricesection .shippingcost-body .costform .submitbox .submitbutton button {
  width: 100%;
}
@media screen and (min-width: 48rem) {
  .pricesection .shippingcost-body .costform .submitbox .submitbutton {
    width: 12.5rem;
  }
}
.pricesection .shippingcost-body .costform .submitbox .estematecost {
  width: 100%;
}
@media screen and (min-width: 48rem) {
  .pricesection .shippingcost-body .costform .submitbox .estematecost {
    width: calc(100% - 13.75rem);
  }
}
.pricesection .shippingcost-body .costform .submitbox .estematecost h5 {
  font-size: 1rem;
}
@media screen and (min-width: 100rem) {
  .pricesection .shippingcost-body .costform .submitbox .estematecost h5 {
    font-size: 1.5rem;
  }
}

.achievements {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .achievements {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 100rem) {
  .achievements {
    padding: 7.75rem 0rem;
  }
}
.achievements-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 75rem) {
  .achievements-content {
    gap: 5rem;
  }
}
.achievements-content .leftinfo,
.achievements-content .rightinfo {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.achievements-content .leftinfo .divider,
.achievements-content .rightinfo .divider {
  background: hsl(210, 35%, 93%);
  width: 100%;
  height: 0.125rem;
}

.pricing {
  background: hsl(240, 30%, 8%);
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .pricing {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 100rem) {
  .pricing {
    padding: 7.75rem 0rem;
  }
}
.pricing-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .pricing-details {
    gap: 3rem;
  }
}
@media screen and (min-width: 100rem) {
  .pricing-details {
    gap: 5rem;
  }
}
.pricing-details h2 {
  color: hsl(0, 0%, 100%);
}
.pricing-details .pricinglist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
@media screen and (min-width: 62rem) {
  .pricing-details .pricinglist {
    gap: 2rem;
  }
}
@media screen and (min-width: 100rem) {
  .pricing-details .pricinglist {
    gap: 3rem;
  }
}
.pricing-details .pricinglist-item {
  display: flex;
  gap: 0.625rem;
}
.pricing-details .pricinglist-item .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pricing-details .pricinglist-item .text {
  color: hsl(210, 35%, 93%);
  width: calc(100% - 2.125rem);
}

.reviews {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .reviews {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 75rem) {
  .reviews {
    padding: 6rem 0rem;
  }
}
@media screen and (min-width: 100rem) {
  .reviews {
    padding: 7.75rem 0rem;
  }
}
.reviews-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .reviews-content {
    gap: 3rem;
  }
}
@media screen and (min-width: 100rem) {
  .reviews-content {
    gap: 5rem;
  }
}
.reviews .info {
  max-width: 32.8125rem;
  margin-inline: auto;
}

.uppersection {
  background: hsl(240, 30%, 8%);
  min-height: 20.5rem;
  display: flex;
  align-items: center;
}
.uppersection .upperthumbnail {
  width: 100%;
}

.upperinfo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 5rem;
}
@media screen and (min-width: 48rem) {
  .upperinfo {
    padding-bottom: 0rem;
  }
}
@media screen and (min-width: 75rem) {
  .upperinfo {
    gap: 3rem;
    max-width: 34.625rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .upperinfo {
    gap: 4.125rem;
  }
}
.upperinfo .display-6 {
  color: hsl(0, 0%, 100%);
  font-weight: 600;
  letter-spacing: 0.0275rem;
  text-align: center;
}
@media screen and (min-width: 48rem) {
  .upperinfo .display-6 {
    text-align: left;
  }
}

.uppersec {
  background: hsl(240, 30%, 8%);
  min-height: 20rem;
  display: flex;
  align-items: center;
}
.uppersec .leftinfo {
  width: 100%;
  padding: 2.5rem 1.25rem 0rem;
}
@media screen and (min-width: 62rem) {
  .uppersec .leftinfo {
    width: 70%;
    padding: 0rem 1.25rem;
    margin-inline: auto;
  }
}
@media screen and (min-width: 62rem) {
  .uppersec .leftinfo {
    padding-left: 5rem;
    padding-right: 0rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .uppersec .leftinfo {
    padding-left: 9.375rem;
  }
}
.uppersec .leftinfo .upperinfo {
  max-width: 80%;
  margin-inline: auto;
}
@media screen and (min-width: 62rem) {
  .uppersec .leftinfo .upperinfo {
    max-width: 44rem;
    margin: 0;
  }
}
.uppersec .rightinfo {
  width: 100%;
}
@media screen and (min-width: 62rem) {
  .uppersec .rightinfo {
    width: 30%;
  }
}
.uppersec .rightinfo-thumbnail {
  width: 100%;
  height: 13.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media screen and (min-width: 48rem) {
  .uppersec .rightinfo-thumbnail {
    height: 21.875rem;
  }
}
@media screen and (min-width: 62rem) {
  .uppersec .rightinfo-thumbnail {
    height: auto;
  }
}
.uppersec .rightinfo-thumbnail img {
  width: 100%;
  height: 100%;
}

.aboutbanner {
  padding: 2rem 0rem 4rem;
}
@media screen and (min-width: 62rem) {
  .aboutbanner {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .aboutbanner {
    padding-bottom: 7.5rem;
  }
}
.aboutbanner .bannerdetails {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .aboutbanner .bannerdetails {
    margin-bottom: 0rem;
    text-align: left;
  }
}
@media screen and (min-width: 75rem) {
  .aboutbanner .bannerdetails {
    gap: 3rem;
  }
}
.aboutbanner .bannerdetails .info {
  max-width: 41.5rem;
  margin-inline: auto;
}
@media screen and (min-width: 62rem) {
  .aboutbanner .bannerdetails .info {
    margin: 0rem;
  }
}
.aboutbanner .bannerdetails .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}

.autoincrement {
  padding-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .autoincrement {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .autoincrement {
    padding-bottom: 7.5rem;
  }
}
.autoincrement-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .autoincrement-content {
    gap: 4rem;
  }
}

.aboutshipment {
  padding-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .aboutshipment {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .aboutshipment {
    padding-bottom: 7.5rem;
  }
}
.aboutshipment .shipment-detail {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 100rem) {
  .aboutshipment .shipment-detail {
    gap: 5rem;
  }
}
.aboutshipment .shipment-detail .info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 100rem) {
  .aboutshipment .shipment-detail .info {
    gap: 3rem;
  }
}
.aboutshipment .shipment-detail .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.aboutshipment .shipment-thumbnail {
  width: 100%;
  min-height: 13.375rem;
  max-height: 33.4375rem;
  position: relative;
}
@media screen and (min-width: 48rem) {
  .aboutshipment .shipment-thumbnail {
    min-height: 21.875rem;
  }
}
@media screen and (min-width: 62rem) {
  .aboutshipment .shipment-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 100rem) {
  .aboutshipment .shipment-thumbnail {
    min-height: 33.4375rem;
  }
}
.aboutshipment .shipment-thumbnail img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
}
.aboutshipment .shipment-thumbnail .arrowicon {
  display: none;
  position: absolute;
  left: -18.3125rem;
  bottom: 0rem;
  width: 39.8125rem;
  height: 24rem;
}
@media screen and (min-width: 62rem) {
  .aboutshipment .shipment-thumbnail .arrowicon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 75rem) {
  .aboutshipment .shipment-thumbnail .arrowicon {
    bottom: -2.25rem;
  }
}
@media screen and (min-width: 100rem) {
  .aboutshipment .shipment-thumbnail .arrowicon {
    bottom: 0rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .aboutshipment .shipment-thumbnail .arrowicon {
    bottom: -2.25rem;
  }
}

.valuesarea {
  padding-top: 6.25rem;
  padding-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .valuesarea {
    padding-top: 8.75rem;
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .valuesarea {
    padding-bottom: 7.5rem;
  }
}
.valuesarea-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 62rem) {
  .valuesarea-content {
    gap: 6rem;
  }
}
@media screen and (min-width: 100rem) {
  .valuesarea-content {
    gap: 8.75rem;
  }
}

.whychooseus {
  padding-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .whychooseus {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .whychooseus {
    padding-bottom: 7.5rem;
  }
}
.whychooseus .leftinfo {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 75rem) {
  .whychooseus .leftinfo {
    gap: 4rem;
  }
}
.whychooseus .leftinfo .info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 75rem) {
  .whychooseus .leftinfo .info {
    gap: 3rem;
  }
}
.whychooseus .leftinfo .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}

.clientsatisfaction {
  padding-top: 3rem;
}
@media screen and (min-width: 62rem) {
  .clientsatisfaction {
    padding-top: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .clientsatisfaction {
    padding-top: 7.5rem;
  }
}

.videosection {
  padding-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .videosection {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .videosection {
    padding-bottom: 7.5rem;
  }
}
.videosection-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 62rem) {
  .videosection-content {
    gap: 5rem;
  }
}
.videosection .videobox {
  position: relative;
}
.videosection .videobox-detail {
  position: absolute;
  bottom: calc(100% - 4rem);
  right: 4rem;
  width: 10.125rem;
  height: 10.125rem;
  border: solid 0.0625rem hsl(0, 0%, 11%);
  padding: 0.875rem;
  display: none;
}
@media screen and (min-width: 62rem) {
  .videosection .videobox-detail {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.videosection .videobox-detail .videoinfo {
  width: 8.4375rem;
  height: 8.4375rem;
  background: hsl(217, 100%, 56%);
  color: hsl(0, 0%, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.625rem;
  text-align: center;
  padding: 0.875rem;
}
.videosection .videobox-detail .videoinfo h4 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.024625rem;
}
.videosection .videobox-detail .videoinfo p {
  font-size: 0.625rem;
  font-weight: 500;
}
.videosection .videobox .myvideo {
  overflow: hidden;
}
.videosection .videobox .myvideo iframe {
  width: 100%;
  max-height: 43.75rem;
  min-height: 18.75rem;
}
@media screen and (min-width: 62rem) {
  .videosection .videobox .myvideo iframe {
    min-height: 25rem;
  }
}
@media screen and (min-width: 75rem) {
  .videosection .videobox .myvideo iframe {
    min-height: 31.25rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .videosection .videobox .myvideo iframe {
    min-height: 37.5rem;
  }
}
@media screen and (min-width: 100rem) {
  .videosection .videobox .myvideo iframe {
    min-height: 43.75rem;
  }
}

.authenticmain {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}
@media screen and (min-width: 62rem) {
  .authenticmain {
    padding-top: 0rem;
    padding-bottom: 10rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .authenticmain {
    padding-bottom: 20rem;
  }
}

.authenticinfo {
  background: hsl(0, 0%, 100%);
  border: solid 0.0625rem hsl(207, 23%, 92%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2.5rem;
  padding: 1.25rem;
  text-align: center;
}
@media screen and (min-width: 48rem) {
  .authenticinfo {
    padding: 3rem;
    max-width: 33.125rem;
    margin-inline: auto;
  }
}
@media screen and (min-width: 62rem) {
  .authenticinfo {
    padding: 4rem;
    margin: 0;
  }
}
.authenticinfo .invalid-feedback {
  text-align: left;
}
.authenticinfo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
}
.authenticinfo-header p {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 400;
}
.authenticinfo .formtext {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 400;
}
.authenticinfo-body .btn-login {
  padding: 0.84375rem 2.5rem;
}
.authenticinfo-footer p {
  color: hsl(0, 0%, 19%);
  font-size: 0.875rem;
  font-weight: 400;
}
.authenticinfo-footer p .authlink {
  color: hsl(217, 100%, 56%);
  font: inherit;
  transition: all 350ms ease-in-out;
}
.authenticinfo-footer p .authlink:not([disabled]):hover {
  color: hsl(217, 100%, 47%);
  text-decoration: underline;
}
.authenticinfo-footer .authbuttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 400;
  text-align: center;
}
.authenticinfo-footer .authbuttons button {
  font: inherit;
}
.authenticinfo-footer .authbuttons .btn-reset {
  background: transparent;
  color: hsl(0, 0%, 19%);
}
.authenticinfo-footer .authbuttons .btn-reset:not([disabled]):hover {
  background: transparent;
  color: hsl(240, 30%, 8%);
}
.authenticinfo-footer .authbuttons .btn-resend {
  background: transparent;
  color: hsl(217, 100%, 56%);
}
.authenticinfo-footer .authbuttons .btn-resend:not([disabled]):hover {
  background: transparent;
  color: hsl(217, 100%, 47%);
}

.contactus {
  padding: 5rem 0rem 3rem;
}
@media screen and (min-width: 87.5rem) {
  .contactus {
    padding: 7.75rem 0rem 5rem;
  }
}
.contactus-details {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.contactus-details .infotext {
  max-width: 41.5rem;
}

.faqsection {
  padding: 5rem 0rem;
}
@media screen and (min-width: 87.5rem) {
  .faqsection {
    padding: 7.75rem 0rem;
  }
}
.faqsection-content {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
@media screen and (min-width: 87.5rem) {
  .faqsection-content {
    gap: 7.75rem;
  }
}
.faqsection-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.faqsection-header .titlebox {
  max-width: 25.375rem;
  margin-inline: auto;
}
.faqsection .accordion {
  border: none;
}
.faqsection .accordion-item {
  border: none;
  border-radius: 0rem;
}
.faqsection .accordion-item:first-of-type .accordion-button, .faqsection .accordion-item:last-of-type .accordion-button {
  border-radius: 0rem;
}
.faqsection .accordion-button {
  background: transparent;
  color: hsl(0, 0%, 11%);
  box-shadow: none;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 1.25rem 0rem;
}
@media screen and (min-width: 48rem) {
  .faqsection .accordion-button {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 62rem) {
  .faqsection .accordion-button {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .faqsection .accordion-button {
    font-size: 1.75rem;
  }
}
.faqsection .accordion-button:not(.collapsed) {
  background: transparent;
  color: hsl(0, 0%, 11%);
  box-shadow: none;
}
.faqsection .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='5' viewBox='0 0 15 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3123 4.048H0.320312V0H14.3123V4.048Z' fill='%231B1B1B'/%3E%3C/svg%3E");
  transition: none;
}
.faqsection .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8738 16.64H7.11383V10.12H0.673828V6.52H7.11383V0H10.8738V6.52H17.3138V10.12H10.8738V16.64Z' fill='%231B1B1B'/%3E%3C/svg%3E%0A");
  transition: none;
}
.faqsection .accordion-body {
  padding: 0rem 0rem 2.5rem;
}
.faqsection .accordion-body p {
  color: hsl(0, 0%, 19%);
  font-size: 0.875rem;
  font-weight: 300;
}
@media screen and (min-width: 48rem) {
  .faqsection .accordion-body p {
    font-size: 1rem;
  }
}
@media screen and (min-width: 62rem) {
  .faqsection .accordion-body p {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .faqsection .accordion-body p {
    font-size: 1.25rem;
  }
}

.servicesbanner {
  padding-top: 2rem;
  padding-bottom: 4rem;
}
@media screen and (min-width: 62rem) {
  .servicesbanner {
    padding-top: 0rem;
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .servicesbanner {
    padding-bottom: 8rem;
  }
}
.servicesbanner .bannerdetails {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .servicesbanner .bannerdetails {
    margin-bottom: 0rem;
    text-align: left;
  }
}
@media screen and (min-width: 75rem) {
  .servicesbanner .bannerdetails {
    gap: 3rem;
  }
}
.servicesbanner .bannerdetails .info {
  max-width: 41.5rem;
  margin-inline: auto;
}
@media screen and (min-width: 62rem) {
  .servicesbanner .bannerdetails .info {
    margin: 0rem;
  }
}
.servicesbanner .bannerdetails .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}

.ourservices {
  background: hsl(240, 30%, 8%);
  padding: 4rem 0rem;
}
@media screen and (min-width: 62rem) {
  .ourservices {
    padding: 5rem 0rem;
  }
}
.ourservices-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 75rem) {
  .ourservices-content {
    gap: 5rem;
  }
}
.ourservices-content .icon {
  position: absolute;
  top: 0rem;
  right: -5rem;
}
.ourservices-content h2 {
  color: hsl(0, 0%, 100%);
}
.ourservices-content .servinfo p {
  color: hsl(210, 35%, 93%);
  font-weight: 300;
}
.ourservices table {
  position: relative;
  z-index: 100;
}
.ourservices table tbody {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 62rem) {
  .ourservices table tbody {
    gap: 4rem;
  }
}
.ourservices table tbody tr {
  border-bottom: solid 0.0625rem hsl(210, 17%, 36%);
  padding-bottom: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6rem;
}
@media screen and (min-width: 62rem) {
  .ourservices table tbody tr {
    padding-bottom: 4rem;
  }
}
.ourservices table tbody tr:last-child {
  border-bottom: 0;
}
.ourservices table tbody th {
  color: hsl(0, 0%, 100%);
  font-family: "Clash Display", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
}
.ourservices table tbody td .servicethumb {
  width: 100%;
  width: 24.75rem;
  height: 7.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5.625rem;
}
.ourservices table tbody td .servicethumb img {
  width: 100%;
  height: 100%;
}
.ourservices table tbody td .info {
  min-width: 17.5rem;
  max-width: 23.75rem;
}
@media screen and (min-width: 100rem) {
  .ourservices table tbody td .info {
    max-width: 32.5rem;
  }
}
.ourservices table tbody td .info p {
  color: hsl(210, 35%, 93%);
  font-weight: 300;
}
.ourservices table tbody td .servicelink {
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ourservices table tbody td .servicelink .staricon {
  display: block;
}
.ourservices table tbody td .servicelink .linkicon {
  display: none;
}
.ourservices table tbody td .servicelink:not([disabled]):hover .staricon {
  display: none;
}
.ourservices table tbody td .servicelink:not([disabled]):hover .linkicon {
  display: block;
}
.ourservices table:not(caption) > * > * {
  background: transparent;
}

.servicebanner {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .servicebanner {
    padding: 5rem 0rem;
  }
}
.servicebanner-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .servicebanner-detail {
    gap: 3rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .servicebanner-detail {
    gap: 5rem;
  }
}
.servicebanner-detail .titlebox {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media screen and (min-width: 31.25rem) {
  .servicebanner-detail .titlebox {
    gap: 2rem;
  }
}
@media screen and (min-width: 62rem) {
  .servicebanner-detail .titlebox {
    justify-content: flex-start;
  }
}
.servicebanner-detail .titlebox .servicetitle {
  max-width: 50%;
}
@media screen and (min-width: 31.25rem) {
  .servicebanner-detail .titlebox .servicetitle {
    max-width: 16.25rem;
  }
}
@media screen and (min-width: 62rem) {
  .servicebanner-detail .titlebox .servicetitle {
    width: calc(100% - 6.875rem);
  }
}
.servicebanner-detail .titlebox .iconbox {
  background: hsl(217, 100%, 56%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media screen and (min-width: 48rem) {
  .servicebanner-detail .titlebox .iconbox {
    width: 4.875rem;
    height: 4.875rem;
  }
}
.servicebanner-detail .titlebox .iconbox .titleicon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media screen and (min-width: 48rem) {
  .servicebanner-detail .titlebox .iconbox .titleicon {
    width: 2rem;
    height: 2rem;
  }
}
.servicebanner-detail .info {
  max-width: 90%;
  margin-inline: auto;
  text-align: center;
}
@media screen and (min-width: 48rem) {
  .servicebanner-detail .info {
    max-width: 41.4375rem;
  }
}
@media screen and (min-width: 62rem) {
  .servicebanner-detail .info {
    text-align: left;
    margin: 0;
  }
}
.servicebanner-detail .info .text {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.servicebanner-thumbnail {
  width: 100%;
  min-height: 13.375rem;
  max-height: 33.4375rem;
  position: relative;
}
@media screen and (min-width: 48rem) {
  .servicebanner-thumbnail {
    min-height: 21.875rem;
  }
}
@media screen and (min-width: 62rem) {
  .servicebanner-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 100rem) {
  .servicebanner-thumbnail {
    min-height: 33.4375rem;
  }
}
.servicebanner-thumbnail img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
}
.servicebanner-thumbnail .serviceicon {
  display: none;
  position: absolute;
  left: -18.3125rem;
  bottom: 0rem;
  width: 39.8125rem;
  height: 24rem;
}
@media screen and (min-width: 62rem) {
  .servicebanner-thumbnail .serviceicon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (min-width: 75rem) {
  .servicebanner-thumbnail .serviceicon {
    bottom: -2.25rem;
  }
}
@media screen and (min-width: 100rem) {
  .servicebanner-thumbnail .serviceicon {
    bottom: 0rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .servicebanner-thumbnail .serviceicon {
    bottom: -2.25rem;
  }
}

.serviceabout {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .serviceabout {
    padding: 5rem 0rem;
  }
}
.serviceabout .aboutdetail {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 62rem) {
  .serviceabout .aboutdetail {
    margin-bottom: 0rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .serviceabout .aboutdetail {
    gap: 4rem;
  }
}
.serviceabout .aboutdetail .info {
  max-width: 40rem;
}
.serviceabout .aboutdetail .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
@media screen and (min-width: 112.5rem) {
  .serviceabout .aboutdetail .info p {
    font-size: 1.125rem;
  }
}
.serviceabout ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media screen and (min-width: 112.5rem) {
  .serviceabout ul {
    gap: 1.25rem;
  }
}
.serviceabout ul li {
  display: flex;
  gap: 0.625rem;
}
.serviceabout ul li .icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.serviceabout ul li .text {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
@media screen and (min-width: 112.5rem) {
  .serviceabout ul li .text {
    font-size: 1.125rem;
  }
}

.moreservices {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .moreservices {
    padding: 5rem 0rem;
  }
}
.moreservices-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 75rem) {
  .moreservices-content {
    gap: 4rem;
  }
}
.moreservices-header {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 112.5rem) {
  .moreservices-header {
    gap: 5rem;
  }
}
.moreservices-header .info {
  max-width: 40rem;
}
.moreservices-header .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
@media screen and (min-width: 112.5rem) {
  .moreservices-header .info p {
    font-size: 1.125rem;
  }
}

.importedrequest {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .importedrequest {
    padding: 5rem 0rem 7.75rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .importedrequest {
    padding: 7.75rem 0rem 10rem;
  }
}
.importedrequest-details {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .importedrequest-details {
    gap: 5rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .importedrequest-details {
    gap: 7.75rem;
  }
}
.importedrequest-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .importedrequest-header {
    gap: 4rem;
  }
}
@media screen and (min-width: 112.5rem) {
  .importedrequest-header {
    gap: 6.25rem;
  }
}
.importedrequest-header .info {
  max-width: 41.5rem;
}
.importedrequest-header .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.importedrequest-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
.importedrequest-body p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.importedrequest-body .link {
  color: hsl(217, 100%, 56%);
}
.importedrequest-body .link:not([disabled]):hover {
  color: hsl(217, 100%, 47%);
}

.importpackage {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .importpackage {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 75rem) {
  .importpackage {
    padding: 7.5rem 0rem;
  }
}
.importpackage-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .importpackage-content {
    gap: 4rem;
  }
}
.importpackage-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 62rem) {
  .importpackage-header {
    gap: 4rem;
    margin-bottom: 0rem;
  }
}
.importpackage-header .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.importpackage-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 0.0625rem hsl(207, 23%, 92%);
  border-radius: 0.25rem;
  padding: 1.5rem;
  text-align: left;
}
@media screen and (min-width: 48rem) {
  .importpackage-body {
    padding: 3rem;
  }
}
@media screen and (min-width: 62rem) {
  .importpackage-body {
    padding: 3.5rem;
  }
}
.importpackage-body .parcelbox {
  border: solid 0.0625rem hsl(207, 23%, 92%);
  border-radius: 0.25rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.importpackage-body .parcelbox .title {
  color: hsl(0, 0%, 19%);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
}
@media screen and (min-width: 87.5rem) {
  .importpackage-body .parcelbox .title {
    font-size: 1rem;
  }
}

.trackorder {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .trackorder {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 75rem) {
  .trackorder {
    padding: 7.5rem 0rem;
  }
}
.trackorder-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .trackorder-content {
    gap: 4rem;
  }
}
.trackorder-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
@media screen and (min-width: 62rem) {
  .trackorder-header {
    gap: 4rem;
    margin-bottom: 0rem;
  }
}
.trackorder-header .info p {
  color: hsl(0, 0%, 11%);
  font-weight: 300;
}
.trackorder-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 0.0625rem hsl(208, 19%, 87%);
  padding: 1.5rem;
}
@media screen and (min-width: 48rem) {
  .trackorder-body {
    padding: 3rem;
  }
}
@media screen and (min-width: 62rem) {
  .trackorder-body {
    padding: 5rem 5rem 7.5rem;
  }
}
.trackorder-body .emptyorder {
  max-width: 32rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 48rem) {
  .trackorder-body .emptyorder {
    gap: 3rem;
  }
}
.trackorder-body .emptyorder .emptyicon {
  width: 12.1875rem;
  height: 12.1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.trackorder-body .emptyorder .emptyinfo p {
  color: hsl(208, 9%, 59%);
  font-weight: 500;
  text-align: center;
}
.trackorder-body .emptyorder .emptyinfo p .link {
  color: hsl(217, 100%, 56%);
  transition: color 350ms ease-in-out;
}
.trackorder-body .emptyorder .emptyinfo p .link:not([disabled]):hover {
  color: hsl(217, 100%, 47%);
}
.trackorder-body .trackorderinfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media screen and (min-width: 62rem) {
  .trackorder-body .trackorderinfo {
    gap: 5rem;
  }
}
@media screen and (min-width: 75rem) {
  .trackorder-body .trackorderinfo {
    gap: 7.5rem;
  }
}
.trackorder-body .trackorderinfo-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.trackorder-body .trackorderinfo-header p {
  color: hsl(208, 9%, 59%);
  font-weight: 500;
}
.trackorder-body .trackorderinfo-header p .idnumber,
.trackorder-body .trackorderinfo-header p .arrivaldate {
  color: hsl(217, 100%, 56%);
}
.trackorder-body .trackorderinfo-header p .date {
  color: hsl(0, 0%, 11%);
}
.trackorder-body .trackorderinfo-header .importid {
  color: hsl(0, 0%, 11%);
}
.orderlist {
  padding: 3rem 0rem;
}
@media screen and (min-width: 62rem) {
  .orderlist {
    padding: 5rem 0rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .orderlist {
    padding: 7.5rem 0rem;
  }
}
.orderlist-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media screen and (min-width: 62rem) {
  .orderlist-content {
    gap: 4rem;
  }
}
@media screen and (min-width: 75rem) {
  .orderlist-content {
    gap: 5rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .orderlist-content {
    gap: 6.25rem;
  }
}
.orderlist-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}
@media screen and (min-width: 62rem) {
  .orderlist-header {
    gap: 3rem;
  }
}
.orderlist-body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.emptyorder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2.5rem;
  padding: 7.5rem 0rem;
}
.emptyorder-thumbnail {
  width: 15.875rem;
  height: 8.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.emptyorder .emptyinfo {
  max-width: 28.625rem;
}
.emptyorder .emptyinfo p {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}
.emptyorder .importfile {
  max-width: 12.5rem;
}

.orderdetails {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem;
}
@media screen and (min-width: 62rem) {
  .orderdetails {
    padding: 2rem;
  }
}
@media screen and (min-width: 75rem) {
  .orderdetails {
    padding: 2.25rem;
  }
}
.orderdetails-header {
  border-bottom: solid 0.0625rem hsl(207, 23%, 92%);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 2rem;
}
.orderdetails-header .headerinfo {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.orderdetails-header .importdate {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 500;
}
.orderdetails-header .estimatedate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.orderdetails-header .estimatedate .icon {
  width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.orderdetails-header .estimatedate .text {
  color: hsl(168, 98%, 35%);
  font-size: 0.875rem;
  font-weight: 500;
}
.orderdetails-header .itemtable thead {
  background: hsl(207, 23%, 92%);
}
.orderdetails-header .itemtable thead tr th {
  color: hsl(0, 0%, 19%);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
}
.orderdetails-header .itemtable tbody tr th,
.orderdetails-header .itemtable tbody tr td {
  color: hsl(0, 0%, 19%);
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.3125rem 1rem;
}
.orderdetails-header .itemtable tbody tr td {
  font-weight: 500;
}
.orderdetails-header .itemtable tbody tr:first-child th, .orderdetails-header .itemtable tbody tr:first-child td {
  padding-top: 1.5rem;
}
.orderdetails-header .itemtable tbody tr:last-child td {
  padding-top: 1.25rem;
  font-weight: 500;
}
.orderdetails-body {
  border-bottom: solid 0.0625rem hsl(207, 23%, 92%);
  padding-bottom: 2rem;
}
.orderdetails-body .deliverytable thead tr th {
  color: hsl(0, 0%, 19%);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 0;
  text-transform: uppercase;
}
.orderdetails-body .deliverytable tbody th p {
  font-size: 0.875rem;
  font-weight: 500;
}
.orderdetails-body .deliverytable tbody th .calculating {
  color: hsl(0, 0%, 19%);
}
.orderdetails-body .deliverytable tbody th .waiting {
  color: #ff9900;
}
.orderdetails-body .deliverytable tbody th .paid {
  color: hsl(208, 9%, 59%);
}
.orderdetails-body .deliverytable tbody th .paid span {
  color: hsl(168, 98%, 35%);
}
.orderdetails-body .deliverytable tbody td .address {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.orderdetails-body .deliverytable tbody td .address .title {
  color: hsl(208, 9%, 59%);
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
}
.orderdetails-body .deliverytable tbody td .address p {
  color: hsl(0, 0%, 19%);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}
.orderdetails-footer .summarytable thead tr th {
  color: hsl(0, 0%, 19%);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 0;
  text-transform: uppercase;
}
.orderdetails-footer .summarytable tbody th {
  vertical-align: top;
}
.orderdetails-footer .summarytable tbody th .link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.orderdetails-footer .summarytable tbody th .link .icon {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.orderdetails-footer .summarytable tbody th .link .text {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 500;
}
.orderdetails-footer .summarytable tbody th .link:not([disabled]):hover .icon svg path {
  stroke: hsl(217, 100%, 56%);
}
.orderdetails-footer .summarytable tbody th .link:not([disabled]):hover .text {
  color: hsl(217, 100%, 56%);
}
.orderdetails-footer .summarytable tbody td .summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.orderdetails-footer .summarytable tbody td .summary-header {
  border-bottom: solid 0.0625rem hsl(207, 23%, 92%);
  padding-bottom: 1.25rem;
}
.orderdetails-footer .summarytable tbody td .summary-header .summarylist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.orderdetails-footer .summarytable tbody td .summary-header .summarylist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orderdetails-footer .summarytable tbody td .summary-header .summarylist-item span {
  color: hsl(208, 9%, 59%);
  font-size: 0.875rem;
  font-weight: 500;
}
.orderdetails-footer .summarytable tbody td .summary-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orderdetails-footer .summarytable tbody td .summary-body span {
  color: hsl(0, 0%, 11%);
  font-size: 0.875rem;
  font-weight: 500;
}

.errormain {
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
}

.footer-phone-svg{
  height: 20px;
  width: 20px;
}
.list-item-phone{
  display: flex;
  align-items: center; 
  justify-content: space-between;
}
@media screen and (min-width: 48rem) {
  .errormain {
    min-height: 100vh;
  }
}
.errormain .errorthumbnail {
  width: 100%;
  overflow: hidden;
}
@media screen and (min-width: 36rem) {
  .errormain .errorthumbnail {
    height: 18.75rem;
  }
}
@media screen and (min-width: 62rem) {
  .errormain .errorthumbnail {
    height: 30rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .errormain .errorthumbnail {
    height: 38.75rem;
  }
}

.shipcontainer {
  min-width: 100%;
  max-width: 100%;
  padding-inline: 1.25rem;
  margin-inline: auto;
}
@media screen and (min-width: 62rem) {
  .shipcontainer {
    padding-inline: 5rem;
  }
}
@media screen and (min-width: 87.5rem) {
  .shipcontainer {
    padding-inline: 9.375rem;
  }
}

.marked {
  color: hsl(217, 100%, 56%);
  font-weight: 600;
  letter-spacing: 0.0275rem;
}

.myimport {
  max-width: 8.125rem;
  margin-inline: auto;
}
@media screen and (min-width: 48rem) {
  .myimport {
    max-width: 11.25rem;
    margin: 0;
  }
}

.joininfo {
  max-width: 8.75rem;
}

.getstarted {
  max-width: 10rem;
}

.formlabel {
  color: hsl(0, 0%, 11%);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
}
@media screen and (min-width: 87.5rem) {
  .formlabel {
    font-size: 1rem;
  }
}