@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
  /* Define your custom breakpoints: */
  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}
@layer base {
  :root {
    /* Primary Colors */
    --color-primary-100: #ed2ee; /* RGB(237, 242, 238) */
    --color-primary-200: #d5ecc6; /* RGB(213, 236, 198) */
    --color-primary-300: #c0e49e; /* RGB(192, 228, 158) */
    --color-primary-400: #4f9f5f; /* RGB(79, 159, 95) */
    --color-primary-500: #71a76e; /* RGB(113, 167, 110) */
    --color-primary-600: #63a370; /* RGB(99, 163, 112) */
    --color-primary-700: #306141; /* RGB(48, 97, 65) */
    --color-primary-800: #2f5e4a; /* RGB(47, 94, 74) */
    --color-primary-900: #244339; /* RGB(36, 67, 57) */
    --color-primary-1000: #142d1e; /* RGB(20, 45, 30) */

    /* Light Primary Colors */
    --color-light-primary-100: #d9f8d4; /* RGB(217, 248, 212) */
    --color-light-primary-200: #c3f0b5; /* RGB(195, 240, 181) */
    --color-light-primary-300: #add8a9; /* RGB(173, 216, 169) */
    --color-light-primary-400: #9fde9f; /* RGB(159, 222, 159) */
    --color-light-primary-500: #85da83; /* RGB(133, 218, 131) */
    --color-light-primary-600: #7fda75; /* RGB(127, 218, 117) */
    --color-light-primary-700: #64a96b; /* RGB(100, 169, 107) */
    --color-light-primary-800: #509758; /* RGB(80, 151, 88) */
    --color-light-primary-900: #3c9442; /* RGB(60, 148, 66) */
    --color-light-primary-1000: #216433; /* RGB(33, 100, 51) */

    /* Secondary Colors */
    --color-secondary-100: #f5faec; /* RGB(245, 250, 236) */
    --color-secondary-200: #eef5d2; /* RGB(238, 245, 210) */
    --color-secondary-300: #e6f0b7; /* RGB(230, 240, 183) */
    --color-secondary-400: #d9e8b2; /* RGB(217, 232, 178) */
    --color-secondary-500: #c4de96; /* RGB(196, 222, 150) */
    --color-secondary-600: #a9d483; /* RGB(169, 212, 131) */
    --color-secondary-700: #8a8a30; /* RGB(138, 138, 48) */
    --color-secondary-800: #9a7b2c; /* RGB(154, 123, 44) */
    --color-secondary-900: #335c1d; /* RGB(51, 92, 29) */
    --color-secondary-1000: #404a16; /* RGB(64, 74, 22) */

    /* Neutral Colors */
    --color-neutral-100: #f1f1f1; /* RGB(241, 241, 241) */
    --color-neutral-200: #eeeeee; /* RGB(238, 238, 238) */
    --color-neutral-300: #e4e4e4; /* RGB(228, 228, 228) */
    --color-neutral-400: #dbdbdb; /* RGB(219, 219, 219) */
    --color-neutral-500: #c2c2c2; /* RGB(194, 194, 194) */
    --color-neutral-600: #a0a0a0; /* RGB(160, 160, 160) */
    --color-neutral-700: #bfbfbf; /* RGB(191, 191, 191) */
    --color-neutral-800: #a7a7a7; /* RGB(167, 167, 167) */
    --color-neutral-900: #949494; /* RGB(148, 148, 148) */
    --color-neutral-1000: #7d7d7d; /* RGB(125, 125, 125) */
  }
}

@layer utilities {
  /* Primary Color Utilities */
  .bg-primary-100 {
    background-color: var(--color-primary-100);
  }
  .bg-primary-200 {
    background-color: var(--color-primary-200);
  }
  .bg-primary-300 {
    background-color: var(--color-primary-300);
  }
  .bg-primary-400 {
    background-color: var(--color-primary-400);
  }
  .bg-primary-500 {
    background-color: var(--color-primary-500);
  }
  .bg-primary-600 {
    background-color: var(--color-primary-600);
  }
  .bg-primary-700 {
    background-color: var(--color-primary-700);
  }
  .bg-primary-800 {
    background-color: var(--color-primary-800);
  }
  .bg-primary-900 {
    background-color: var(--color-primary-900);
  }
  .bg-primary-1000 {
    background-color: var(--color-primary-1000);
  }

  .text-primary-100 {
    color: var(--color-primary-100);
  }
  .text-primary-200 {
    color: var(--color-primary-200);
  }
  .text-primary-300 {
    color: var(--color-primary-300);
  }
  .text-primary-400 {
    color: var(--color-primary-400);
  }
  .text-primary-500 {
    color: var(--color-primary-500);
  }
  .text-primary-600 {
    color: var(--color-primary-600);
  }
  .text-primary-700 {
    color: var(--color-primary-700);
  }
  .text-primary-800 {
    color: var(--color-primary-800);
  }
  .text-primary-900 {
    color: var(--color-primary-900);
  }
  .text-primary-1000 {
    color: var(--color-primary-1000);
  }

  .border-primary-100 {
    border-color: var(--color-primary-100);
  }
  .border-primary-200 {
    border-color: var(--color-primary-200);
  }
  .border-primary-300 {
    border-color: var(--color-primary-300);
  }
  .border-primary-400 {
    border-color: var(--color-primary-400);
  }
  .border-primary-500 {
    border-color: var(--color-primary-500);
  }
  .border-primary-600 {
    border-color: var(--color-primary-600);
  }
  .border-primary-700 {
    border-color: var(--color-primary-700);
  }
  .border-primary-800 {
    border-color: var(--color-primary-800);
  }
  .border-primary-900 {
    border-color: var(--color-primary-900);
  }
  .border-primary-1000 {
    border-color: var(--color-primary-1000);
  }

  /* Light Primary Color Utilities */
  .bg-light-primary-100 {
    background-color: var(--color-light-primary-100);
  }
  .bg-light-primary-200 {
    background-color: var(--color-light-primary-200);
  }
  .bg-light-primary-300 {
    background-color: var(--color-light-primary-300);
  }
  .bg-light-primary-400 {
    background-color: var(--color-light-primary-400);
  }
  .bg-light-primary-500 {
    background-color: var(--color-light-primary-500);
  }
  .bg-light-primary-600 {
    background-color: var(--color-light-primary-600);
  }
  .bg-light-primary-700 {
    background-color: var(--color-light-primary-700);
  }
  .bg-light-primary-800 {
    background-color: var(--color-light-primary-800);
  }
  .bg-light-primary-900 {
    background-color: var(--color-light-primary-900);
  }
  .bg-light-primary-1000 {
    background-color: var(--color-light-primary-1000);
  }

  .text-light-primary-100 {
    color: var(--color-light-primary-100);
  }
  .text-light-primary-200 {
    color: var(--color-light-primary-200);
  }
  .text-light-primary-300 {
    color: var(--color-light-primary-300);
  }
  .text-light-primary-400 {
    color: var(--color-light-primary-400);
  }
  .text-light-primary-500 {
    color: var(--color-light-primary-500);
  }
  .text-light-primary-600 {
    color: var(--color-light-primary-600);
  }
  .text-light-primary-700 {
    color: var(--color-light-primary-700);
  }
  .text-light-primary-800 {
    color: var(--color-light-primary-800);
  }
  .text-light-primary-900 {
    color: var(--color-light-primary-900);
  }
  .text-light-primary-1000 {
    color: var(--color-light-primary-1000);
  }

  .border-light-primary-100 {
    border-color: var(--color-light-primary-100);
  }
  .border-light-primary-200 {
    border-color: var(--color-light-primary-200);
  }
  .border-light-primary-300 {
    border-color: var(--color-light-primary-300);
  }
  .border-light-primary-400 {
    border-color: var(--color-light-primary-400);
  }
  .border-light-primary-500 {
    border-color: var(--color-light-primary-500);
  }
  .border-light-primary-600 {
    border-color: var(--color-light-primary-600);
  }
  .border-light-primary-700 {
    border-color: var(--color-light-primary-700);
  }
  .border-light-primary-800 {
    border-color: var(--color-light-primary-800);
  }
  .border-light-primary-900 {
    border-color: var(--color-light-primary-900);
  }
  .border-light-primary-1000 {
    border-color: var(--color-light-primary-1000);
  }

  /* Secondary Color Utilities */
  .bg-secondary-100 {
    background-color: var(--color-secondary-100);
  }
  .bg-secondary-200 {
    background-color: var(--color-secondary-200);
  }
  .bg-secondary-300 {
    background-color: var(--color-secondary-300);
  }
  .bg-secondary-400 {
    background-color: var(--color-secondary-400);
  }
  .bg-secondary-500 {
    background-color: var(--color-secondary-500);
  }
  .bg-secondary-600 {
    background-color: var(--color-secondary-600);
  }
  .bg-secondary-700 {
    background-color: var(--color-secondary-700);
  }
  .bg-secondary-800 {
    background-color: var(--color-secondary-800);
  }
  .bg-secondary-900 {
    background-color: var(--color-secondary-900);
  }
  .bg-secondary-1000 {
    background-color: var(--color-secondary-1000);
  }

  .text-secondary-100 {
    color: var(--color-secondary-100);
  }
  .text-secondary-200 {
    color: var(--color-secondary-200);
  }
  .text-secondary-300 {
    color: var(--color-secondary-300);
  }
  .text-secondary-400 {
    color: var(--color-secondary-400);
  }
  .text-secondary-500 {
    color: var(--color-secondary-500);
  }
  .text-secondary-600 {
    color: var(--color-secondary-600);
  }
  .text-secondary-700 {
    color: var(--color-secondary-700);
  }
  .text-secondary-800 {
    color: var(--color-secondary-800);
  }
  .text-secondary-900 {
    color: var(--color-secondary-900);
  }
  .text-secondary-1000 {
    color: var(--color-secondary-1000);
  }

  .border-secondary-100 {
    border-color: var(--color-secondary-100);
  }
  .border-secondary-200 {
    border-color: var(--color-secondary-200);
  }
  .border-secondary-300 {
    border-color: var(--color-secondary-300);
  }
  .border-secondary-400 {
    border-color: var(--color-secondary-400);
  }
  .border-secondary-500 {
    border-color: var(--color-secondary-500);
  }
  .border-secondary-600 {
    border-color: var(--color-secondary-600);
  }
  .border-secondary-700 {
    border-color: var(--color-secondary-700);
  }
  .border-secondary-800 {
    border-color: var(--color-secondary-800);
  }
  .border-secondary-900 {
    border-color: var(--color-secondary-900);
  }
  .border-secondary-1000 {
    border-color: var(--color-secondary-1000);
  }

  /* Neutral Color Utilities */
  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }
  .bg-neutral-200 {
    background-color: var(--color-neutral-200);
  }
  .bg-neutral-300 {
    background-color: var(--color-neutral-300);
  }
  .bg-neutral-400 {
    background-color: var(--color-neutral-400);
  }
  .bg-neutral-500 {
    background-color: var(--color-neutral-500);
  }
  .bg-neutral-600 {
    background-color: var(--color-neutral-600);
  }
  .bg-neutral-700 {
    background-color: var(--color-neutral-700);
  }
  .bg-neutral-800 {
    background-color: var(--color-neutral-800);
  }
  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }
  .bg-neutral-1000 {
    background-color: var(--color-neutral-1000);
  }

  .text-neutral-100 {
    color: var(--color-neutral-100);
  }
  .text-neutral-200 {
    color: var(--color-neutral-200);
  }
  .text-neutral-300 {
    color: var(--color-neutral-300);
  }
  .text-neutral-400 {
    color: var(--color-neutral-400);
  }
  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
  .text-neutral-600 {
    color: var(--color-neutral-600);
  }
  .text-neutral-700 {
    color: var(--color-neutral-700);
  }
  .text-neutral-800 {
    color: var(--color-neutral-800);
  }
  .text-neutral-900 {
    color: var(--color-neutral-900);
  }
  .text-neutral-1000 {
    color: var(--color-neutral-1000);
  }

  .border-neutral-100 {
    border-color: var(--color-neutral-100);
  }
  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }
  .border-neutral-300 {
    border-color: var(--color-neutral-300);
  }
  .border-neutral-400 {
    border-color: var(--color-neutral-400);
  }
  .border-neutral-500 {
    border-color: var(--color-neutral-500);
  }
  .border-neutral-600 {
    border-color: var(--color-neutral-600);
  }
  .border-neutral-700 {
    border-color: var(--color-neutral-700);
  }
  .border-neutral-800 {
    border-color: var(--color-neutral-800);
  }
  .border-neutral-900 {
    border-color: var(--color-neutral-900);
  }
  .border-neutral-1000 {
    border-color: var(--color-neutral-1000);
  }

  /* Hover Utilities */
  .hover\:bg-primary-100:hover {
    background-color: var(--color-primary-100);
  }
  .hover\:bg-primary-200:hover {
    background-color: var(--color-primary-200);
  }
  .hover\:bg-primary-300:hover {
    background-color: var(--color-primary-300);
  }
  .hover\:bg-primary-400:hover {
    background-color: var(--color-primary-400);
  }
  .hover\:bg-primary-500:hover {
    background-color: var(--color-primary-500);
  }
  .hover\:bg-primary-600:hover {
    background-color: var(--color-primary-600);
  }
  .hover\:bg-primary-700:hover {
    background-color: var(--color-primary-700);
  }
  .hover\:bg-primary-800:hover {
    background-color: var(--color-primary-800);
  }
  .hover\:bg-primary-900:hover {
    background-color: var(--color-primary-900);
  }
  .hover\:bg-primary-1000:hover {
    background-color: var(--color-primary-1000);
  }

  .hover\:text-primary-100:hover {
    color: var(--color-primary-100);
  }
  .hover\:text-primary-200:hover {
    color: var(--color-primary-200);
  }
  .hover\:text-primary-300:hover {
    color: var(--color-primary-300);
  }
  .hover\:text-primary-400:hover {
    color: var(--color-primary-400);
  }
  .hover\:text-primary-500:hover {
    color: var(--color-primary-500);
  }
  .hover\:text-primary-600:hover {
    color: var(--color-primary-600);
  }
  .hover\:text-primary-700:hover {
    color: var(--color-primary-700);
  }
  .hover\:text-primary-800:hover {
    color: var(--color-primary-800);
  }
  .hover\:text-primary-900:hover {
    color: var(--color-primary-900);
  }
  .hover\:text-primary-1000:hover {
    color: var(--color-primary-1000);
  }

  .hover\:border-primary-100:hover {
    border-color: var(--color-primary-100);
  }
  .hover\:border-primary-200:hover {
    border-color: var(--color-primary-200);
  }
  .hover\:border-primary-300:hover {
    border-color: var(--color-primary-300);
  }
  .hover\:border-primary-400:hover {
    border-color: var(--color-primary-400);
  }
  .hover\:border-primary-500:hover {
    border-color: var(--color-primary-500);
  }
  .hover\:border-primary-600:hover {
    border-color: var(--color-primary-600);
  }
  .hover\:border-primary-700:hover {
    border-color: var(--color-primary-700);
  }
  .hover\:border-primary-800:hover {
    border-color: var(--color-primary-800);
  }
  .hover\:border-primary-900:hover {
    border-color: var(--color-primary-900);
  }
  .hover\:border-primary-1000:hover {
    border-color: var(--color-primary-1000);
  }

  /* Add similar hover utilities for other color categories */
}

body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  color: #4A5565;
}

.bg-grid {
  background-image: url("/static/images/hero_section.png");
  background-size: cover;
  background-position: center;
}

.bg-impact {
  background-image: url("/static/images/panels/solar_panes.jpg");
  background-size: cover;
  background-position: center;
  background-color: rgba(147, 164, 51, 0.3);
  background-blend-mode: overlay;
}

.bg-about {
  background-image: url("/static/images/about_bg.png");
  background-size: cover;
  background-position: center;
}

.flex-items{
  display: flex;
  align-items: flex-start;
  row-gap: 0.4rem;
}

.text-primary {
  color: #4f8157;
}

.text-accent {
  color: #b8cd40;
}

.bg-primary {
  background-color: #63a06d;
}

.bg-accent {
  background-color: #b8cd40;
}

.bg-light {
  background-color: #fff;
}

.bg-card {
  background-color: #e5ece6;
}

.bg-card-dark {
  background-color: #5c9766;
}

.border-accent {
  border-color: #b8cd40;
}

.text-light-green {
  color: #e9f0c4;
}


.btn{
  padding: 0.8rem 1.2rem;
  border-radius: 0.2rem;
  text-align: center;
  border: 1px solid #B8CD40;
  cursor: pointer;
  color: #B8CD40;

}

.cta{
  background-color: #B8CD40;
  color: #31723c;
  cursor: pointer;
  width: 100%;
}

.link{
  color: #707f19;
}



/* Tracking Area css
============================================================================================ */

.tracking_search_area {
  padding: 100px 0px;
}

.tracking_search_area .tracking_search_inner {
  max-width: 600px;
  margin: auto;
}

.tracking_search_area .tracking_search_inner .single_title {
  padding-bottom: 6px;
}

.tracking_search_area .tracking_search_inner h5 {
  font-size: 15px;
  color: #58585a;
  opacity: .5;
  padding-bottom: 30px;
}

.tracking_search_area .tracking_search_inner .input-group input {
  height: 50px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0px;
  font-size: 14px;
  color: #58585a;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  letter-spacing: .45px;
  padding: 0px 15px;
}

.tracking_search_area .tracking_search_inner .input-group input.placeholder {
  font-size: 14px;
  color: #58585a;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  letter-spacing: .45px;
}

.tracking_search_area .tracking_search_inner .input-group input:-moz-placeholder {
  font-size: 14px;
  color: #58585a;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  letter-spacing: .45px;
}

.tracking_search_area .tracking_search_inner .input-group input::-moz-placeholder {
  font-size: 14px;
  color: #58585a;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  letter-spacing: .45px;
}

.tracking_search_area .tracking_search_inner .input-group input::-webkit-input-placeholder {
  font-size: 14px;
  color: #58585a;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  letter-spacing: .45px;
}

.tracking_search_area .tracking_search_inner .input-group .input-group-btn .btn-default {
  border: none;
  height: 50px;
  padding: 0px;
  width: 150px;
  background: #2761d8;
  color: #fff;
  border-radius: 0px;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  letter-spacing: .45px;
}

@media (max-width: 480px) {
  .tracking_search_area .tracking_search_inner .input-group .input-group-btn .btn-default {
      width: 110px;
  }
}

.tracking_search_area .tracking_search_inner .input-group .input-group-btn .btn-default i {
  padding-right: 10px;
}

@media (max-width: 480px) {
  .tracking_search_area .tracking_search_inner .input-group .input-group-btn .btn-default i {
      padding-right: 5px;
  }
}

.tracking_search_area .tracking_search_inner ul {
  margin-top: 20px;
}

.tracking_search_area .tracking_search_inner ul li {
  display: inline-block;
  margin-right: 15px;
}

.tracking_search_area .tracking_search_inner ul li a {
  font-size: 16px;
  color: #2761d8;
}

.timeline_tracking_inner {
  padding: 0.3rem 0;
  padding-bottom: 100px;
}

.timeline_tracking_inner .single_title {
  padding-bottom: 15px;
}

.timeline_tracking_inner .timeline_tracking_box {
  border: 1px solid #ecf0f1;
  border-radius: 5px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_head {
  text-align: center;
  background: #f9f9f9;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_head h4 {
  font-size: 16px;
  font-weight: normal;
  font-family: "Roboto", sans-serif;
  letter-spacing: .45px;
  line-height: 70px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_country {
  padding: 25px 15px;
  border-bottom: 1px solid #ecf0f1;
  margin-bottom: 40px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_country .media .media-left {
  padding-right: 20px;
  vertical-align: middle;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_country .media .media-body {
  vertical-align: middle;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_country .media .media-body h4 {
  font-size: 24px;
  color: #2f2f30;
  font-family: "Roboto", sans-serif;
  letter-spacing: .60px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_country .media .media-body a {
  color: #58585a;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #2761d8;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_in {
  text-align: center;
  background: #2761d8;
  color: #fff;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_in h4 {
  font-size: 18px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  line-height: 70px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_in.tag-delivered {
  background-color: #4cbb87;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list {
  margin-left: 40px;
}

@media (max-width: 420px) {
  .timeline_tracking_inner .timeline_tracking_box .tracking_list {
      margin-left: 5px;
  }
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul {
  position: relative;
  padding: 20px 0px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul:before {
  position: absolute;
  display: block;
  width: 1px;
  top: 0;
  left: 126px;
  bottom: 0;
  content: "";
  background-color: #ddd;
  z-index: 1;
}

@media (max-width: 420px) {
  .timeline_tracking_inner .timeline_tracking_box .tracking_list ul:before {
      left: 105px;
  }
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li {
  padding: 20px 0px;
  position: relative;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__time {
  float: left;
  text-align: right;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__time strong {
  color: #2f2f30;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  letter-spacing: .45px;
}

@media (max-width: 420px) {
  .timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__time strong {
      font-size: 14px;
  }
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__time .hint {
  font-size: 14px;
  color: #58585a;
  font-family: "Roboto", sans-serif;
  opacity: .5;
  letter-spacing: .28px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__icon {
  position: absolute;
  left: 109px;
  top: 15px;
  width: 36px;
  height: 36px;
  line-height: 28px;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 18px;
  z-index: 10;
}

@media (max-width: 420px) {
  .timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__icon {
      left: 88px;
  }
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__icon.intransit:before {
  content: "";
  display: block;
  background-color: #ddd;
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 12px;
  left: 11px;
  top: 11px;
  z-index: 9;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__icon.delivered {
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI4IDEyOCI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzRDQkI4Nzt9IC5zdDF7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnIGlkPSJEZWxpdmVkIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIj48cGF0aCBpZD0iT3ZhbC03LUNvcHktMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgY2xhc3M9InN0MCIgZD0iTTY0IDEyOGMzNS4zIDAgNjQtMjguNyA2NC02NHMtMjguNy02NC02NC02NC02NCAyOC43LTY0IDY0IDI4LjcgNjQgNjQgNjR6Ii8+PHBhdGggaWQ9IlNoYXBlIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiBjbGFzcz0ic3QxIiBkPSJNODIuNSA1My4ybC0zLjQtMy40Yy0uNS0uNS0xLS43LTEuNy0uN3MtMS4yLjItMS43LjdsLTE2LjIgMTYuNS03LjMtNy40Yy0uNS0uNS0xLS43LTEuNy0uN3MtMS4yLjItMS43LjdsLTMuNCAzLjRjLS41LjUtLjcgMS0uNyAxLjdzLjIgMS4yLjcgMS43bDkgOS4xIDMuNCAzLjRjLjUuNSAxIC43IDEuNy43czEuMi0uMiAxLjctLjdsMy40LTMuNCAxNy45LTE4LjJjLjUtLjUuNy0xIC43LTEuN3MtLjItMS4yLS43LTEuN3oiLz48L2c+PC9zdmc+");
  background-color: #4cbb87;
  border: 0;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__icon.outfordelivery {
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTI4IDEyOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI4IDEyOCI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0Y1QTU1MTt9IC5zdDF7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnIGlkPSJvdXQtZm9yLWRlbGl2ZXJ5IiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIj48ZWxsaXBzZSBpZD0iT3ZhbC03LUNvcHkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIGNsYXNzPSJzdDAiIGN4PSI2NCIgY3k9IjY0IiByeD0iNjQiIHJ5PSI2NCIvPjxwYXRoIGlkPSJTaGFwZSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgY2xhc3M9InN0MSIgZD0iTTQxIDUwYy0yLjUtLjgtMi41LTIuNCAwLTNsMTktMTBjMi4zLTEuMyA1LjctMS4zIDggMGwxOSAxMGMyLjUuOCAyLjUgMi40IDAgM2wtMTkgMTBjLTIuMyAxLjMtNS43IDEuMy04IDBsLTE5LTEwem0yNCAyMGMwLTIuNSAxLjctNS4zIDQtNmwyMC0xMWMyLjMtLjcgNCAuNCA0IDN2MTljMCAyLjctMS43IDUuNS00IDdsLTIwIDEwYy0yLjMuNy00LS40LTQtM3YtMTl6bS0yOCAxMWMtMi4zLS43LTQtMy40LTQtNnYtMTljMC0yLjUgMS43LTMuNiA0LTNsMjAgMTBjMi4zIDEuNiA0IDQuMiA0IDd2MTljMCAyLjUtMS43IDMuNi00IDNsLTIwLTExeiIvPjwvZz48L3N2Zz4=");
  background-color: #f5a551;
  border: 0;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__content {
  margin-left: 160px;
}

@media (max-width: 420px) {
  .timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__content {
      margin-left: 132px;
  }
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__content strong {
  color: #2f2f30;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  letter-spacing: .45px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__content strong .checkpoint__courier-name {
  margin-left: 5px;
  padding: 4px;
  background-color: #ecf0f1;
  border-radius: 3px;
  color: #95a5a6;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  font-size: 14px;
}

.timeline_tracking_inner .timeline_tracking_box .tracking_list ul li .checkpoint__content .hint {
  font-size: 14px;
  color: #58585a;
  font-family: "Roboto", sans-serif;
  opacity: .5;
  letter-spacing: .28px;
}

.scheduled_area {
  width: 95%;
  margin: 0px auto 40px;
  height: 90px;
  
}


.scheduled_area ul {
  position: relative;
  padding: 35px 0px;
}

.scheduled_area ul:before {
  background: #ddd;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0px;
  top: 17%;
  content: "";
}

.scheduled_area ul li {
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.scheduled_area ul li .schedul_box {
  width: fit-content;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 26px;
  
}
@media (max-width: 640px) {
  .scheduled_area {
      /* min-width: fit-content; */
      width: 100%;
      overflow-y: hidden;
      padding-top: 1rem;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;
  }
  .scheduled_area::-webkit-scrollbar{
    display:none;
  }
  .scheduled_area ul li .schedul_box{
    width: 30px;
    font-size: 12px;
    line-height: 46px;
  }
  .scheduled_area ul:before {
    
    height: 1px;
    position: absolute;
    left: 0px;
    top: 2%;
    content: "";
  }
}

.scheduled_area ul li:nth-child(1) {
  left: 2%;
  -webkit-transform: translateX(-20%);
  -ms-transform: translateX(-20%);
  transform: translateX(-20%);
  bottom: 0px;
}
.scheduled_area ul li:nth-child(2) {
  left: 25%;
  -webkit-transform: translateX(-40%);
  -ms-transform: translateX(-40%);
  transform: translateX(-40%);
  bottom: 0px;
}
.scheduled_area ul li:nth-child(3) {
  left: 50%;
  -webkit-transform: translateX(-60%);
  -ms-transform: translateX(-60%);
  transform: translateX(-60%);
  bottom: 0px;
}
.scheduled_area ul li:nth-child(4) {
  left: 75%;
  -webkit-transform: translateX(-80%);
  -ms-transform: translateX(-80%);
  transform: translateX(-80%);
  bottom: 0px;
}
.scheduled_area ul li:nth-child(5) {
  right: 0;
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  bottom: 0px;
}

.scheduled_area ul li:nth-child(2) .s_icon {
  bottom: auto;
  top: -29px;
}

.scheduled_area ul li:last-child {
  right: 0px;
  bottom: 0px;
  left: auto;
  top: auto;
}

.scheduled_area ul li:last-child .s_icon {
  bottom: auto;
  top: -29px;
}

.scheduled_area ul li .s_icon {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  top: -29px;
  width: 20px;
  height: 20px;
  line-height: 28px;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 18px;
  z-index: 10;
  -webkit-transition: all 300ms linear 0s;
  -o-transition: all 300ms linear 0s;
  transition: all 300ms linear 0s;
}

.scheduled_area ul li .s_icon:before {
  content: "";
  display: block;
  background-color: #ddd;
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 12px;
  left: 5px;
  top: 5px;
  z-index: 9;
  -webkit-transition: all 300ms linear 0s;
  -o-transition: all 300ms linear 0s;
  transition: all 300ms linear 0s;
}

.scheduled_area ul li .s_icon.active {
  background-color: #4cbb87;
  border-color: #4cbb87;
}

.scheduled_area ul li .s_icon.active:before {
  background-color: #FFF;
}

.scheduled_area ul li:hover .s_icon {
  border-color: #2761d8;
}

.scheduled_area ul li:hover .s_icon:before {
  background: #2761d8;
}

.scheduled_area ul li:hover .s_icon.active {
  background-color: #4cbb87;
  border-color: #4cbb87;
}

.scheduled_area ul li:hover .s_icon.active:before {
  background-color: #FFF;
}

.timeline_tracking_inner ul li{
  list-style: none;
}

/* End Tracking Area css