.heading {
    font-family: "Francois One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

body {
    font-family: "Poppins", sans-serif;
}  

.slanted-border {
  width: 2px;
  height: 130%;
  background-color: #fff;
  --slant-skew: -46deg;
  transform: skewX(var(--slant-skew));
  transform-origin: top right;
}

.slanted-top {
  --slant-offset: 50px;
  clip-path: polygon(var(--slant-offset) 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 640px) {
  .slanted-top {
    --slant-offset: 0px;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .slanted-top {
    --slant-offset: 30px;
  }
}
@media (max-width: 640px) {
  .slanted-right-box {
    --slant-offset-right: 12px;
  }
  .slanted-teal-box {
    --slant-offset-teal: 12px;
  }
  .slanted-light-box {
    --slant-offset-light: 12px;
  }
  .slanted-border {
    --slant-skew: -18deg;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .slanted-right-box {
    --slant-offset-right: 30px;
  }
  .slanted-teal-box {
    --slant-offset-teal: 30px;
  }
  .slanted-light-box {
    --slant-offset-light: 30px;
  }
  .slanted-border {
    --slant-skew: -36deg;
    transform-origin: top right;
  }
}
@media (min-width: 1080px) and (max-width: 1300px) {
  .slanted-border {
    --slant-skew: -45deg;
    transform-origin: top right;
    right: -30px;
  }
}
@media (min-width: 1300px) {
  .slanted-border {
    --slant-skew: -45deg;
    transform-origin: top right;
    right: -106px;
  }
}