/*
Theme Name: Shifters Lite Child
Template: shifters-lite
*/

* {
  font-family: 'Roboto', 'Merriweather', sans-serif;
  font-size: 20px;
}

ion-icon { color: #ff7a00; transition: 0.3s linear ;}
ion-icon:hover { color: #fffcf2ff; }

.icon {
  height: 100px;
  width: 100px;
  text-align: center;
  font-size: 3em;
  color: #ff7a00;
  margin-bottom: 10px;
  background-color: #fffcf2ff;
  outline: 5px solid #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  transition: 0.3s linear, color 0.5s linear;
}

.icon:hover {
  color: #fffcf2ff;
  background-color: #0b3d2e;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.cta-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff7a00;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  transition: 0.3s linear;
  pointer-events: visible;
}

.cta-button:hover { background-color: #0b3d2e !important; color: #fff !important; }


@media print {
  .subscribe, footer, .top_nav, nav, .nav {
    display: none !important;
  }
}


.site-header { display: none !important; }


/*--------------------------------*/
/* PRELOADER & BACK TO TOP */
/*--------------------------------*/

/* Preloader Styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fffcf2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000;
}

.loader {
  width: 80px;
  height: 80px;
  border: 5px solid #fffcf2ff;
  border-top: 5px solid #0deg;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

/* Back to Top Button Styles */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 50px;
  background-color: #ff7a00;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: none;
  transition: 0.3s ease;
}

#backToTop:hover {
  background-color: #0b3d2e;
  color: #fff;
  transform: scale(1.05);
}

.top_nav {
  position: relative;
  z-index: 10000;
  padding: 10px 100px;
  width: 100%;
  background-color: #0b3d2e;
  color: #fffcf2ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top_nav_contents {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top_nav_contents ion-icon { margin-right: 10px; }
.top_nav_contents p { margin-right: 50px; }

.top_nav_email,
.top_nav_contact,
.top_nav_address,
.top_nav_socials {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top_nav_socials ion-icon { margin-left: 15px; }
.top_nav p { font-size: 0.7em; }

/* Main Nav*/

nav {
  position: relative;
  z-index: 100000;
  width: 100%;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  padding: 5px 100px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out; /* Smooth sliding effect */
}

nav .logo {
  display: flex;
  flex-basis: 15%;
  max-width: 100%;
  height: 60px;
  justify-content: flex-start;
}

nav .logo img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.nav {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  transition: 0.5s ease;
}

.nav .nav_items {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
}

.nav .nav_items li { margin-left: 30px; }

.nav .nav_items li a:link,
.nav .nav_items li a:visited {
  text-decoration: none;
  color: #585858;
  font-weight: 600;
  font-size: 0.9em;
  transition: 0.3s ease;
}

.nav .nav_items li a:hover,
.nav .nav_items li a:active { 
  color: #0b3d2e;
  transition: 0.3s ease;
}

.nav .nav_items li a.active { 
  color: #0b3d2e;
  font-weight: 700;
  transition: 0.3s ease;
}

.nav .nav_items li a.active:hover { color: #ff7a00; }

nav .cta-button {
  flex-basis: 20%;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

/* Sticky Nav*/

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 4px 6px rgba(20, 18, 4, 0.1);
  z-index: 100000;
  padding: 10px 25px;
}

.sticky .logo { flex-basis: 15%; }

/*Mobile Nav*/

.mobile_nav_icon {
  z-index: 10000;
  background: url('https://postfastlogistics.com/tracking/wp-content/uploads/2024/11/menu-sharp.png')no-repeat;
  background-size: 30px;
  background-position: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: 0.3s ease;
  display: none;
}

.mobile_nav_icon.active {
  z-index: 10000;
  background: url('https://postfastlogistics.com/tracking/wp-content/uploads/2024/11/close.png')no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.nav.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 4, 0.8);
  transition: 0.5s ease;
  -webkit-animation: waterEffect 1s ease-in-out both;
  animation: waterEffect 1s ease-in-out both;
}

.nav.active .nav_items {
  background: #fffcf2ff;
  width: 450px;
  max-width: 450px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
  transition: 0.3s ease;
}

.nav.active .nav_items li a:link,
.nav.active .nav_items li a:visited {
  color: #141204ff;
  position: relative;
  display: block;
  transition: 0.3s ease;
  font-size: 110%;
  margin: 20px auto;
}

.nav.active .nav_items li a:after {
  content: '';
  background-color: #141204ff;
  display: block;
  width: 0;
  height: 3px;
  border-radius: 10%;
  transition: 0.3s ease;
}

.nav.active .nav_items li a:hover::after,
.nav.active .nav_items li a:active { width: 100%; }

/*--------------------------------*/
/* CUSTOM CURSOR */
/*--------------------------------*/

.custom-cursor {
  z-index: 10000;
  width: 10px;
  height: 10px;
  background-color: #ff7a00; /* Custom cursor color */
  border-radius: 50%;
  position: fixed;
  pointer-events: none; /* Avoid interfering with clicks */
  transform: translate(-50%, -50%); /* Centers the cursor around mouse position */
  transition: transform 0.1s ease-in-out; /* Smooth transition */
}


/* MENU BAR ANIMATIONS */
@-webkit-keyframes waterEffect {
  0% {
    -webkit-filter: blur(0px) hue-rotate(0deg);
            filter: blur(0px) hue-rotate(0deg);
    opacity: 0;
    transform: scale(1);
  }
  50% {
    -webkit-filter: blur(2px) hue-rotate(120deg);
            filter: blur(2px) hue-rotate(120deg);
    opacity: 0.8;
    transform: scale(1.05); /* Slight enlargement to mimic flow */
  }
  100% {
    -webkit-filter: blur(0px) hue-rotate(0deg);
            filter: blur(0px) hue-rotate(0deg);
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes waterEffect {
  0% {
    -webkit-filter: blur(0px) hue-rotate(0deg);
            filter: blur(0px) hue-rotate(0deg);
    opacity: 0;
    transform: scale(1);
  }
  50% {
    -webkit-filter: blur(2px) hue-rotate(120deg);
            filter: blur(2px) hue-rotate(120deg);
    opacity: 0.8;
    transform: scale(1.05); /* Slight enlargement to mimic flow */
  }
  100% {
    -webkit-filter: blur(0px) hue-rotate(0deg);
            filter: blur(0px) hue-rotate(0deg);
    opacity: 1;
    transform: scale(1);
  }
}


/*Extra Small devices (phones, 350px to 100)*/
@media only screen and (max-width: 350px) and (min-width: 100px){
    html,
    body { font-size: 12px; }
    
    /*HEADER*/
    
    .cta-button { font-size: 0.9em; }
    nav { padding: 10px; }
    .sticky { padding: 10px; }
    .nav { display: none; }
    nav .logo { flex: 1; max-width: 100%; height: 45px; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    .top_nav { display: none; }
    nav .cta-button { display: none; }
    
}


/*Extra Small devices (phones, 350px to 600)*/
@media only screen and (max-width: 600px) and (min-width: 350px){
    html,
    body { font-size: 16px; }
    
    /*HEADER*/
    
    nav { padding: 10px 20px; }
    .nav { display: none; }
    nav .logo { flex: 1; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    
    .top_nav { display: none; }
    nav .cta-button { flex-basis: 15%; text-align: center; padding: 5px 15px; }
}


/*Small devices (portrait tablets and large phones, 600 to 768)*/
@media only screen and (max-width: 768px) and (min-width: 600px) {
    html,
    body { font-size: 18px; }
    
    /*HEADER*/
    
    nav { padding: 10px 20px; }
    .nav { display: none; }
    nav .logo { flex: 1; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    .top_nav { display: none; }
    nav .cta-button { flex-basis: 15%; text-align: center; padding: 5px 15px; }
    
}


/*Medium devices (landscapen tablets, 768 to 992)*/
@media only screen and (max-width: 992px) and (min-width: 768px) {
    
    html,
    body { font-size: 16px; }
    
    /*HEADER*/

    nav { padding: 10px 20px; }
    .nav { display: none; }
    nav .logo { flex: 1; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    
    .top_nav { padding: 10px 30px; }
    .top_nav_contents p { margin-right: 30px; }
    .top_nav p { font-size: 0.9em; }
    nav .cta-button { flex-basis: 30%; text-align: center; padding: 15px;}
    
}