/* =========================================================
   KRACKERZ INDIA
   3PL INDUSTRY PAGE
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.pl-page {

  --pl-teal: #00a9a5;
  --pl-teal-dark: #043f44;
  --pl-teal-mid: #075e63;

  --pl-pink: #f7255f;

  --pl-accent: #8de6df;

  --pl-text: #12383b;
  --pl-muted: #667f81;

  --pl-soft: #eef7f6;

  --pl-gradient:
    radial-gradient(
      circle at 12% 18%,
      rgba(0,169,165,.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(247,37,95,.13),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #075e63 0%,
      #064f54 48%,
      #043f44 100%
    );

  color: var(--pl-text);

  overflow: hidden;
}


/* =========================================================
   GLOBAL SECTION
   ========================================================= */

.pl-section {

  position: relative;

  padding: 110px 0;

}


/* =========================================================
   SECTION LABEL
   ========================================================= */

.pl-section-label {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 18px;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .17em;

  text-transform: uppercase;

  color: var(--pl-teal);

}


.pl-section-label::before {

  content: "";

  width: 28px;

  height: 2px;

  border-radius: 10px;

  background: currentColor;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.pl-section-heading {

  max-width: 720px;

  margin-bottom: 55px;

}


.pl-section-heading h2 {

  margin: 0;

  font-size: clamp(34px,4vw,52px);

  line-height: 1.08;

  font-weight: 700;

  letter-spacing: -.045em;

}


.pl-section-heading h2 span {

  color: var(--pl-teal);

}


.pl-section-heading p {

  max-width: 620px;

  margin: 20px 0 0;

  color: var(--pl-muted);

  font-size: 15px;

  line-height: 1.8;

}


.pl-light-heading h2 {

  color: #fff;

}


.pl-light-heading p {

  color: rgba(255,255,255,.68);

}


.pl-light-heading .pl-section-label {

  color: var(--pl-accent);

}


/* =========================================================
   HERO
   ========================================================= */

.pl-hero {

  position: relative;

  min-height: 90vh;

  display: flex;

  align-items: center;

  color: #fff;

  background: var(--pl-gradient);

  overflow: hidden;

}


.pl-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4,63,68,.10),
      transparent 58%
    );

  pointer-events: none;

}


.pl-hero .container {

  position: relative;

  z-index: 2;

}


.pl-hero-orb {

  position: absolute;

  border-radius: 50%;

  filter: blur(4px);

  pointer-events: none;

}


.pl-orb-one {

  width: 420px;

  height: 420px;

  right: -190px;

  top: -160px;

  background: rgba(0,169,165,.13);

  animation: plOrbMove 9s ease-in-out infinite;

}


.pl-orb-two {

  width: 320px;

  height: 320px;

  left: -170px;

  bottom: -170px;

  background: rgba(247,37,95,.08);

  animation: plOrbMove 11s ease-in-out infinite reverse;

}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.pl-breadcrumb {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 28px;

  color: rgba(255,255,255,.52);

  font-size: 12px;

}


.pl-breadcrumb a {

  color: rgba(255,255,255,.62);

  text-decoration: none;

  transition: color .25s ease;

}


.pl-breadcrumb a:hover {

  color: #fff;

}


.pl-breadcrumb i {

  font-size: 9px;

  opacity: .5;

}


.pl-breadcrumb strong {

  color: rgba(255,255,255,.86);

  font-weight: 600;

}


/* =========================================================
   HERO EYEBROW
   ========================================================= */

.pl-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 18px;

  color: var(--pl-accent);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .18em;

  text-transform: uppercase;

}


.pl-eyebrow::before {

  content: "";

  width: 30px;

  height: 2px;

  background: currentColor;

  border-radius: 20px;

}


/* =========================================================
   HERO HEADING
   ========================================================= */

.pl-hero h1 {

  max-width: 760px;

  margin: 0;

  font-size: clamp(42px,5.5vw,70px);

  line-height: 1.02;

  letter-spacing: -.055em;

  font-weight: 700;

}


.pl-hero h1 span {

  display: block;

  color: #8de6df;

}


/* =========================================================
   HERO COPY
   ========================================================= */

.pl-hero-copy {

  max-width: 620px;

  margin: 25px 0 0;

  color: rgba(255,255,255,.70);

  font-size: 16px;

  line-height: 1.85;

}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.pl-hero-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 24px;

  margin-top: 34px;

}


.pl-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 52px;

  padding: 0 24px;

  border: 0;

  border-radius: 12px;

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.pl-btn:hover {

  transform: translateY(-3px);

}


.pl-btn i {

  transition: transform .3s ease;

}


.pl-btn:hover i {

  transform: translate(3px,-3px);

}


.pl-btn-light {

  color: var(--pl-teal-dark);

  background: #fff;

  box-shadow:
    0 12px 30px rgba(0,0,0,.12);

}


.pl-btn-light:hover {

  color: var(--pl-teal-dark);

  box-shadow:
    0 18px 40px rgba(0,0,0,.18);

}


.pl-link-light {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: rgba(255,255,255,.72);

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  transition: color .25s ease;

}


.pl-link-light:hover {

  color: #fff;

}


/* =========================================================
   HERO NETWORK
   ========================================================= */

.pl-network {

  position: relative;

  width: min(450px,100%);

  aspect-ratio: 1;

  margin: auto;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0,169,165,.13),
      transparent 60%
    );

  animation:
    plNetworkFloat 7s ease-in-out infinite;

}


.pl-network-ring {

  position: absolute;

  border: 1px solid rgba(255,255,255,.13);

  border-radius: 50%;

}


.pl-network-ring.ring-one {

  inset: 8%;

}


.pl-network-ring.ring-two {

  inset: 23%;

  border-color: rgba(141,230,223,.18);

}


/* =========================================================
   NETWORK CENTER
   ========================================================= */

.pl-network-center {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 145px;

  height: 145px;

  transform: translate(-50%,-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  border-radius: 50%;

  background: rgba(255,255,255,.09);

  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 20px 50px rgba(0,0,0,.15),
    inset 0 0 25px rgba(255,255,255,.04);

  backdrop-filter: blur(14px);

}


.pl-network-icon {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 8px;

  border-radius: 12px;

  color: var(--pl-accent);

  background: rgba(0,169,165,.12);

  font-size: 20px;

}


.pl-network-center strong {

  font-size: 16px;

  letter-spacing: .03em;

}


.pl-network-center small {

  margin-top: 4px;

  color: rgba(255,255,255,.48);

  font-size: 9px;

}


/* =========================================================
   NETWORK NODES
   ========================================================= */

.pl-node {

  position: absolute;

  width: 82px;

  height: 82px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  border-radius: 50%;

  background: rgba(255,255,255,.08);

  border: 1px solid rgba(255,255,255,.16);

  backdrop-filter: blur(10px);

  animation: plNodeFloat 4s ease-in-out infinite;

}


.pl-node i {

  margin-bottom: 5px;

  color: var(--pl-accent);

  font-size: 20px;

}


.pl-node span {

  color: rgba(255,255,255,.76);

  font-size: 9px;

  font-weight: 600;

  text-align: center;

}


.pl-node-top {

  top: 2%;

  left: 50%;

  transform: translateX(-50%);

}


.pl-node-right {

  top: 50%;

  right: 2%;

  transform: translateY(-50%);

  animation-delay: .8s;

}


.pl-node-bottom {

  bottom: 2%;

  left: 50%;

  transform: translateX(-50%);

  animation-delay: 1.6s;

}


.pl-node-left {

  top: 50%;

  left: 2%;

  transform: translateY(-50%);

  animation-delay: 2.4s;

}


/* =========================================================
   PULSES
   ========================================================= */

.pl-pulse {

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--pl-accent);

  animation: plPulse 2.2s infinite;

}


.pulse-one {

  left: 25%;

  top: 28%;

}


.pulse-two {

  right: 27%;

  top: 25%;

  animation-delay: .7s;

}


.pulse-three {

  right: 24%;

  bottom: 26%;

  animation-delay: 1.4s;

}


/* =========================================================
   INTRO
   ========================================================= */

.pl-intro {

  background: #fff;

}


.pl-intro-grid {

  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 90px;

  align-items: center;

}


.pl-intro-heading h2 {

  margin: 0;

  font-size: clamp(34px,4vw,50px);

  line-height: 1.08;

  letter-spacing: -.045em;

}


.pl-intro-heading h2 span {

  display: block;

  color: var(--pl-teal);

}


.pl-intro-content {

  padding-left: 35px;

  border-left: 1px solid rgba(4,63,68,.12);

}


.pl-intro-content p {

  margin: 0 0 20px;

  color: var(--pl-muted);

  font-size: 15px;

  line-height: 1.85;

}


.pl-intro-content p:last-child {

  margin-bottom: 0;

}


/* =========================================================
   FLOW SECTION
   ========================================================= */

.pl-flow-section {

  color: #fff;

  background: var(--pl-gradient);

  overflow: hidden;

}


.pl-flow-glow {

  position: absolute;

  width: 600px;

  height: 600px;

  right: -280px;

  top: -250px;

  border-radius: 50%;

  background: rgba(0,169,165,.08);

  pointer-events: none;

}


.pl-flow-track {

  position: relative;

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 20px;

}


.pl-flow-track::before {

  content: "";

  position: absolute;

  left: 9%;

  right: 9%;

  top: 62px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(141,230,223,.35),
      transparent
    );

}


.pl-flow-card {

  position: relative;

  z-index: 2;

  padding: 30px 24px;

  border-radius: 22px;

  background: rgba(255,255,255,.07);

  border: 1px solid rgba(255,255,255,.11);

  backdrop-filter: blur(10px);

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease;

}


.pl-flow-card:hover {

  transform: translateY(-8px);

  background: rgba(255,255,255,.11);

  border-color: rgba(141,230,223,.28);

}


.pl-flow-icon {

  width: 62px;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 22px;

  border-radius: 18px;

  color: var(--pl-teal-dark);

  background: #fff;

  font-size: 22px;

  box-shadow:
    0 15px 30px rgba(0,0,0,.12);

}


.pl-flow-step {

  display: block;

  margin-bottom: 8px;

  color: var(--pl-accent);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .15em;

}


.pl-flow-card h3 {

  margin: 0 0 10px;

  font-size: 21px;

}


.pl-flow-card p {

  margin: 0;

  color: rgba(255,255,255,.63);

  font-size: 13px;

  line-height: 1.75;

}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.pl-capabilities {

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(0,169,165,.06),
      transparent 25%
    ),
    #fff;

}


.pl-feature-card {

  position: relative;

  height: 100%;

  min-height: 235px;

  padding: 30px;

  border-radius: 22px;

  background: #fff;

  border: 1px solid rgba(4,63,68,.07);

  box-shadow:
    0 20px 55px rgba(4,63,68,.07);

  overflow: hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}


.pl-feature-card::before {

  content: "";

  position: absolute;

  width: 160px;

  height: 160px;

  right: -80px;

  bottom: -90px;

  border-radius: 50%;

  background: rgba(0,169,165,.06);

  transition: transform .45s ease;

}


.pl-feature-card:hover {

  transform: translateY(-8px);

  border-color: rgba(0,169,165,.14);

  box-shadow:
    0 28px 65px rgba(4,63,68,.12);

}


.pl-feature-card:hover::before {

  transform: scale(1.6);

}


.pl-feature-icon {

  position: relative;

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 25px;

  border-radius: 15px;

  background: var(--pl-gradient);

  color: #fff;

  font-size: 20px;

}


.pl-feature-card h3 {

  position: relative;

  margin: 0 0 10px;

  font-size: 18px;

  font-weight: 600;

}


.pl-feature-card p {

  position: relative;

  max-width: 310px;

  margin: 0;

  color: var(--pl-muted);

  font-size: 13px;

  line-height: 1.75;

}


.pl-card-arrow {

  position: absolute;

  right: 27px;

  top: 30px;

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--pl-teal);

  background: rgba(0,169,165,.08);

  font-size: 13px;

  transition:
    transform .3s ease,
    background .3s ease;

}


.pl-feature-card:hover .pl-card-arrow {

  transform: translate(3px,-3px);

  background: rgba(0,169,165,.14);

}


/* =========================================================
   CONTROL / WHY
   ========================================================= */

.pl-control {

  background: var(--pl-soft);

}


.pl-control-grid {

  display: grid;

  grid-template-columns: .8fr 1.2fr;

  gap: 90px;

  align-items: start;

}


.pl-control-content h2 {

  margin: 0;

  font-size: clamp(34px,4vw,50px);

  line-height: 1.08;

  letter-spacing: -.045em;

}


.pl-control-content h2 span {

  display: block;

  color: var(--pl-teal);

}


.pl-control-content > p {

  max-width: 450px;

  margin: 22px 0 0;

  color: var(--pl-muted);

  font-size: 15px;

  line-height: 1.8;

}


.pl-benefits {

  display: grid;

  gap: 15px;

}


.pl-benefit {

  display: grid;

  grid-template-columns: 55px 1fr;

  gap: 20px;

  padding: 23px;

  border-radius: 20px;

  background: #fff;

  transition:
    transform .3s ease,
    background .3s ease;

}


.pl-benefit:hover {

  transform: translateX(7px);

  background: #e8f2f1;

}


.pl-benefit-icon {

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 15px;

  background: var(--pl-soft);

  color: var(--pl-teal);

  font-size: 20px;

  box-shadow:
    0 8px 22px rgba(4,63,68,.06);

}


.pl-benefit h3 {

  margin: 3px 0 7px;

  font-size: 17px;

  font-weight: 600;

}


.pl-benefit p {

  margin: 0;

  color: var(--pl-muted);

  font-size: 13px;

  line-height: 1.7;

}


/* =========================================================
   APPLICATIONS
   ========================================================= */

.pl-applications {

  background: #fff;

}


.pl-application-card {

  min-height: 145px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 12px;

  border-radius: 20px;

  border: 1px solid rgba(4,63,68,.07);

  background:
    linear-gradient(
      145deg,
      #fff,
      #f5fbfa
    );

  color: var(--pl-text);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.pl-application-card:hover {

  transform: translateY(-7px);

  border-color: rgba(0,169,165,.18);

  box-shadow:
    0 20px 45px rgba(4,63,68,.09);

}


.pl-application-card i {

  font-size: 28px;

  color: var(--pl-teal);

}


.pl-application-card span {

  font-size: 14px;

  font-weight: 600;

}


/* =========================================================
   CTA
   ========================================================= */

.pl-cta-section {

  padding: 100px 0;

  background: var(--pl-soft);

}


.pl-cta {

  position: relative;

  padding: 70px;

  border-radius: 32px;

  overflow: hidden;

  color: #fff;

  background: var(--pl-gradient);

  box-shadow:
    0 25px 65px rgba(4,63,68,.16);

}


.pl-cta::before {

  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  right: -180px;

  top: -220px;

  border-radius: 50%;

  background: rgba(0,169,165,.12);

}


.pl-cta::after {

  content: "";

  position: absolute;

  width: 280px;

  height: 280px;

  right: -120px;

  bottom: -170px;

  border-radius: 50%;

  background: rgba(247,37,95,.09);

}


.pl-cta-glow {

  position: absolute;

  width: 220px;

  height: 220px;

  left: -100px;

  bottom: -130px;

  border-radius: 50%;

  background: rgba(0,169,165,.10);

}


.pl-cta-content {

  position: relative;

  z-index: 2;

  max-width: 720px;

}


.pl-cta .pl-section-label {

  color: var(--pl-accent);

}


.pl-cta h2 {

  margin: 0;

  font-size: clamp(35px,4.5vw,55px);

  line-height: 1.05;

  letter-spacing: -.045em;

}


.pl-cta h2 span {

  display: block;

  color: var(--pl-accent);

}


.pl-cta p {

  max-width: 600px;

  margin: 20px 0 30px;

  color: rgba(255,255,255,.69);

  font-size: 15px;

  line-height: 1.8;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes plNetworkFloat {

  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

}


@keyframes plNodeFloat {

  0%,100% {
    margin-top: 0;
  }

  50% {
    margin-top: -7px;
  }

}


@keyframes plPulse {

  0% {

    opacity: .9;

    box-shadow:
      0 0 0 0 rgba(141,230,223,.45);

  }

  70% {

    opacity: .4;

    box-shadow:
      0 0 0 15px rgba(141,230,223,0);

  }

  100% {

    opacity: .9;

    box-shadow:
      0 0 0 0 rgba(141,230,223,0);

  }

}


@keyframes plOrbMove {

  0%,100% {
    transform: translate(0,0);
  }

  50% {
    transform: translate(20px,15px);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

  .pl-section {
    padding: 85px 0;
  }


  .pl-hero {
    min-height: auto;
  }


  .pl-hero .container {

    padding-top: 80px;

    padding-bottom: 80px;

  }


  .pl-network {

    width: 390px;

    max-width: 100%;

    margin-top: 30px;

  }


  .pl-intro-grid,
  .pl-control-grid {

    grid-template-columns: 1fr;

    gap: 45px;

  }


  .pl-intro-content {

    padding-left: 25px;

  }


  .pl-flow-track {

    grid-template-columns: repeat(2,1fr);

    row-gap: 25px;

  }


  .pl-flow-track::before {

    display: none;

  }


  .pl-cta {

    padding: 55px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .pl-section {

    padding: 70px 0;

  }


  .pl-hero .container {

    padding-top: 70px;

    padding-bottom: 65px;

  }


  .pl-breadcrumb {

    font-size: 10px;

    line-height: 1.6;

  }


  .pl-hero h1 {

    font-size: clamp(40px,11vw,55px);

  }


  .pl-hero-copy {

    font-size: 14px;

  }


  .pl-hero-actions {

    flex-direction: column;

    align-items: flex-start;

  }


  .pl-btn {

    width: 100%;

  }


  .pl-network {

    width: 320px;

  }


  .pl-network-center {

    width: 110px;

    height: 110px;

  }


  .pl-network-icon {

    width: 32px;

    height: 32px;

    font-size: 17px;

  }


  .pl-node {

    width: 66px;

    height: 66px;

  }


  .pl-node i {

    font-size: 17px;

  }


  .pl-node span {

    font-size: 8px;

  }


  .pl-section-heading {

    margin-bottom: 38px;

  }


  .pl-intro-content {

    padding-left: 20px;

  }


  .pl-flow-track {

    grid-template-columns: 1fr;

    gap: 20px;

  }


  .pl-feature-card {

    min-height: 220px;

  }


  .pl-benefit {

    grid-template-columns: 48px 1fr;

    gap: 15px;

  }


  .pl-benefit-icon {

    width: 46px;

    height: 46px;

  }


  .pl-cta-section {

    padding: 70px 0;

  }


  .pl-cta {

    padding: 40px 25px;

    border-radius: 25px;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .pl-hero h1 {

    font-size: 39px;

  }


  .pl-network {

    width: 285px;

  }


  .pl-network-center {

    width: 92px;

    height: 92px;

  }


  .pl-network-icon {

    width: 32px;

    height: 32px;

    font-size: 16px;

  }


  .pl-node {

    width: 58px;

    height: 58px;

  }


  .pl-node i {

    font-size: 15px;

  }


  .pl-node span {

    font-size: 7px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pl-page *,
  .pl-page *::before,
  .pl-page *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

  }

}