/* ── .jTitle ─────────────────────────────────────────────── */
.jTitle {
  margin-top: 10vh;
  color: #fff;
  font-weight: bolder;
  text-align: center;
  font-size: 10.5vh;
}

.jTitle span {
  color: var(--ThemeColor-);
}

/* ── .journey (section wrapper) ─────────────────────────── */
.journey {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

/* ── .journey .lineJourney ───────────────────────────────── */
.journey .lineJourney {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  z-index: -1;
}

.journey .lineJourney .L {
  height: 90%;
  width: 0.8vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 1vh;
  background-color: var(--ThemeColor-);
}

.journey .lineJourney .plane {
  width: 10vh;
  height: 10vh;
  background: url(/img/Icons/plane.webp) center center / cover no-repeat;
}

/* ── .journey .container ─────────────────────────────────── */
.journey .container {
  height: auto;
  justify-content: center;
  flex-direction: column;
  margin: 15vh 0;
}

/* ── .xx  (each milestone row) ──────────────────────────── */
.journey .container .xx {
  height: 20vh;
  width: 100%;
  display: flex;
  margin: 10px 0;
  align-items: center;
  justify-content: center;
}

/* ── Left-side items  (leftLan → odd letters a/c/e…) ─────── */
/* All left items share justify-content: flex-start */
.journey .container .a,
.journey .container .c,
.journey .container .e,
.journey .container .g,
.journey .container .i,
.journey .container .k,
.journey .container .m,
.journey .container .o,
.journey .container .q,
.journey .container .s,
.journey .container .u,
.journey .container .w,
.journey .container .y {
  justify-content: flex-start;
}

/* Left .ccc offset */
.journey .container .a .ccc,
.journey .container .c .ccc,
.journey .container .e .ccc,
.journey .container .g .ccc,
.journey .container .i .ccc,
.journey .container .k .ccc,
.journey .container .m .ccc,
.journey .container .o .ccc,
.journey .container .q .ccc,
.journey .container .s .ccc,
.journey .container .u .ccc,
.journey .container .w .ccc,
.journey .container .y .ccc {
  margin-left: -50vh;
}

/* ── Right-side items (rightLan → even letters b/d/f…) ───── */
/* Right .ccc offset */
.journey .container .b .ccc,
.journey .container .d .ccc,
.journey .container .f .ccc,
.journey .container .h .ccc,
.journey .container .j .ccc,
.journey .container .l .ccc,
.journey .container .n .ccc,
.journey .container .p .ccc,
.journey .container .r .ccc,
.journey .container .t .ccc,
.journey .container .v .ccc,
.journey .container .x .ccc,
.journey .container .z .ccc {
  margin-right: -50vh;
}

/* leftJ fallback */
.journey .container .leftJ .ccc {
  margin-right: -50vh;
  margin-left: -50vh;
}

/* ── .ccc  (inner column: circle + dash + label) ─────────── */
.journey .container .xx .ccc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ── .aa  (circle) ───────────────────────────────────────── */
.journey .container .xx .ccc .aa {
  width: 25vh;
  height: 25vh;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.4vh solid var(--ThemeColor-);
}

/* ── .p  (image inside circle) ───────────────────────────── */
.journey .container .xx .ccc .aa .p,
.journey .container .ccc .aa .p {
  height: 95%;
  width: 95%;
  border-radius: 50%;
  background-size: cover;
}

/* ── .bb  (horizontal dash below circle) ─────────────────── */
.journey .container .xx .ccc .bb {
  width: 3vh;
  height: 0.4vh;
  margin: 1.5vh 0;
  border-radius: 1vh;
  background-color: var(--ThemeColor-);
}

/* ── .cc  (text label) ───────────────────────────────────── */
.journey .container .xx .ccc .cc {
  width: 20vh;
  height: 5vh;
  text-align: center;
  color: #fff;
  font-size: 2.3vh;
  font-weight: 700;
}

.journey .container .xx .ccc .cc span {
  font-size: 2.3vh;
  font-weight: 300;
}

/* ── .aaa  (right-side year connector bar) ───────────────── */
.journey .container .xx .aaa {
  height: 0.4vh;
  width: 15vh;
  margin-left: -0.5vh;
  position: relative;
  border-radius: 1vh;
  background-color: var(--ThemeColor-);
}

.journey .container .xx .aaa::after {
  content: "2025";
  display: block;
  color: var(--ThemeColor-);
  font-size: 3vh;
  font-weight: 600;
  position: absolute;
  transform: translate(-50%, -100%);
  top: 50%;
  left: 50%;
}

/* ── ._aaa  (left-side year connector bar) ───────────────── */
.journey .container .xx ._aaa {
  height: 0.4vh;
  width: 15vh;
  margin-right: -0.5vh;
  position: relative;
  border-radius: 1vh;
  background-color: var(--ThemeColor-);
}

.journey .container .xx ._aaa::after {
  content: "2025";
  display: block;
  color: var(--ThemeColor-);
  font-size: 3vh;
  font-weight: 600;
  position: absolute;
  transform: translate(-50%, -100%);
  top: 50%;
  left: 50%;
}

/* ── .jMore  (VIEW MORE button row) ─────────────────────── */
.jMore {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  text-align: center;
  font-size: 2.5vh;
  margin-top: 3vh;
  cursor: pointer;
}

.jMore a {
  color: var(--ThemeColor-);
}

/* ── .ct  (the button itself) ────────────────────────────── */
.ct {
  text-transform: uppercase;
  font-size: 1.8vh;
  color: var(--ThemeColor-);
  font-weight: 600;
  margin-top: 1vh;
  padding: 1.2vh 2vh 1.2vh 2vh;
  border-radius: 1.4vh;
  border: 0.4vh solid var(--ThemeColor-);
  transition: 0.3s ease;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct::after {
  content: "";
  position: absolute;
  background-image: url(/img/default/icon/right-arrow.webp);
  height: 1.8vh;
  width: 1.8vh;
  top: 50%;
  right: 0.5vh;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: 0.3s ease;
}

.ct:hover::after {
  opacity: 1;
}

.ct:hover {
  padding: 1.2vh 4vh 1.2vh 1vh;
}

.ct:active {
  padding: 1vh 2vh;
}

.ct:active::after {
  opacity: 0;
}

/* ── Responsive overrides ────────────────────────────────── */
@media (max-width: 700px) {
  .jTitle {
    font-size: 5vh;
    margin-bottom: 2vh;
  }
}

@media (max-width: 600px) {
  .journey .container .xx {
    transform: scale(0.65);
    height: 15vh;
  }

  .journey .container .a .ccc,
  .journey .container .c .ccc,
  .journey .container .e .ccc,
  .journey .container .g .ccc,
  .journey .container .i .ccc,
  .journey .container .k .ccc,
  .journey .container .m .ccc,
  .journey .container .o .ccc,
  .journey .container .q .ccc,
  .journey .container .s .ccc,
  .journey .container .u .ccc,
  .journey .container .w .ccc,
  .journey .container .y .ccc {
    margin-left: -40vh;
  }

  .journey .container .b .ccc,
  .journey .container .d .ccc,
  .journey .container .f .ccc,
  .journey .container .h .ccc,
  .journey .container .j .ccc,
  .journey .container .l .ccc,
  .journey .container .n .ccc,
  .journey .container .p .ccc,
  .journey .container .r .ccc,
  .journey .container .t .ccc,
  .journey .container .v .ccc,
  .journey .container .x .ccc,
  .journey .container .z .ccc {
    margin-right: -40vh;
  }

  .journey .lineJourney .L {
    width: 0.4vh;
  }

  .journey .lineJourney .plane {
    width: 6vh;
    height: 6vh;
    background: url(/img/Icons/plane.webp) center center / cover no-repeat;
  }

  .journey .container .xx ._aaa,
  .journey .container .xx .aaa {
    display: none;
  }
}

.leftLan .ccc {
  margin-left: -50vh;
}

.rightLan .ccc {
  margin-right: -50vh;
}

.indexJourney15 .ccc .aa .p {
  background-image: url(/img/indexJourney/gulfood-2026.webp);
  background-position: -12.5vh center;
  background-size: 220% !important;
}

.journey .container .indexJourney15 .aaa::after {
  content: "2026";
}

.indexJourney14 .ccc .aa .p {
  background-image: url(/img/indexJourney/food\ ag\ karachi\ pakistan\ 2025.webp);
  background-position: center -8vh;
  background-size: 120% !important;
}

.journey .container .indexJourney14 .aaa::after {
  content: "2025";
}

.indexJourney13 .ccc .aa .p {
  background-image: url(/img/indexJourney/cricket.webp);
  background-position: center center;
}

.journey .container .indexJourney13 .aaa::after {
  content: "2025";
}

.indexJourney12 .ccc .aa .p {
  background-image: url(/img/indexJourney/SIAL\ PARIS\ EXHIBITION\ VILLEPINTE\,\ FRANCE.webp);
  background-position: center -4vh;
  background-size: 160% !important;
}

.journey .container .indexJourney12 ._aaa::after {
  content: "2024";
}

.indexJourney11 .ccc .aa .p {
  background-image: url(/img/indexJourney/CONSUMERS\ CHOICE\ AWARDS\ BEST\ RECIPE\ MIXES.webp);
  background-position: center center;
}

.journey .container .indexJourney11 .aaa::after {
  content: "2023";
}

.indexJourney10 .ccc .aa .p {
  background-image: url(/img/indexJourney/NEW\ OFFICE\ INAUGURATION\ CEREMONY.webp);
  background-position: center center;
}

.journey .container .indexJourney10 ._aaa::after {
  content: "2022";
}

.indexJourney9 .ccc .aa .p {
  background-image: url(/img/indexJourney/RAMZAN\ TVC.webp);
  background-position: center center;
}

.journey .container .indexJourney9 .aaa::after {
  content: "2021";
}

.indexJourney8 .ccc .aa .p {
  background-image: url(/img/indexJourney/first-tvc-launch.webp);
  background-position: center center;
}

.journey .container .indexJourney8 ._aaa::after {
  content: "2020";
}
.indexJourney7 .ccc .aa .p {
  background-image: url(/img/indexJourney/GULFOOD\ EXHIBITION\ DUBAI\,\ UAE.webp);
  background-position: center center;
}

.journey .container .indexJourney7 .aaa::after {
  content: "2019";
}

.indexJourney6 .ccc .aa .p {
  background-image: url(/img/indexJourney/COOKBOOK\ SEASON\ 1.webp);
  background-position: center center;
}

.journey .container .indexJourney6 ._aaa::after {
  content: "2018";
}

.indexJourney5 .ccc .aa .p {
  background-image: url(/img/indexJourney/anuga.webp);
  background-position: center center;
}

.journey .container .indexJourney5 .aaa::after {
  content: "2017";
}

.indexJourney4 .ccc .aa .p {
  background-image: url(/img/indexJourney/FIRE\ INCIDENT\ OFFICE.webp);

  background-position: center center;
}

.journey .container .indexJourney4 ._aaa::after {
  content: "2016";
}
.indexJourney3 .ccc .aa .p {
  background-image: url(/img/indexJourney/LOSS\ OF\ SHAHEED\ JUNAID\ JAMSHED.webp);
  background-position: center top;
}

.journey .container .indexJourney3 .aaa::after {
  content: "2016";
}

.indexJourney2 .ccc .aa .p {
  background-image: url(/img/indexJourney/JAZAA\ LAUNCH\ CEREMONY.webp);
  background-position: left center;
}

.journey .container .indexJourney2 ._aaa::after {
  content: "2016";
}
.indexJourney1 .ccc .aa .p {
  background-image: url(/img/indexJourney/aboutus.webp);
  background-position: center center;
}

.journey .container .indexJourney1 .aaa::after {
  content: "2015";
}

#pkBtn {
  height: 2.5dvh;
  width: 2.5dvh;

  padding: 2dvh;

  position: fixed;
  bottom: 2dvh;
  right: 2dvh;
  border: 0.4dvh solid var(--ThemeColor-);

  border-radius: 2vh;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.295);
  backdrop-filter: blur(1vh);
  color: var(--ThemeColor-);
  z-index: 1000;

  background-image: url(/img/shopping-bag-svgrepo-com\ \(1\).svg);
  background-size: 4dvh;
  background-position: center center;
  background-repeat: no-repeat;

  transition: 0.2s ease-in-out;
}

#pkBtn:hover {
  height: 2.5dvh;
  width: 2.5dvh;

  padding: 2dvh;

  position: fixed;
  bottom: 2dvh;
  right: 2dvh;
  border: 0.4dvh solid var(--ThemeColor-);

  border-radius: 2vh;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.295);
  backdrop-filter: blur(1vh);
  color: var(--ThemeColor-);
  z-index: 1000;

  background-image: url(/img/imagemain/icons/arrowdownyellow\ -\ Copy.png);
  background-size: 2.5dvh;
  background-position: center center;
  background-repeat: no-repeat;
  /* transform: rotate(-90deg); */
}