.home-intro {
  background-color: var(--clr-palette-1);
  
  min-height: 58vh;
  display: grid;
  place-items: center;
  perspective: 500px;
  perspective-origin: 50% calc(50% - 150px);
}

@media (min-width: 45rem) {
  .home-intro {
    margin-bottom: 15vh;
  }
} 

/* @media (max-width: 780px) {
  .home-intro {
    width: 75%;
  }
}  */

.scene {
  position: relative;
  transform-style: preserve-3d;
}

.banner {
  display: flex;
  transform-style: preserve-3d;
  -webkit-animation: rotate 24s infinite linear;
  animation: rotate 24s infinite linear;
}

@-webkit-keyframes rotate {
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes rotate {
  to {
    transform: rotateY(-360deg);
  }
}
.panel {
  position: absolute;
  transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(215px);
  width: 30px;
  height: 120px;
  overflow: hidden;
}

.panel::before {
  position: absolute;
  left: var(--left);
  content: "Forging Solutions For Your Success.";
  font-size: 85px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  color: hsl(var(--hue), 75%, 75%);
}

.panel:nth-child(1) {
  --left: 0px;
  --hue: 0;
  --angle: 0deg;
}

.panel:nth-child(2) {
  --left: -30px;
  --hue: 7.8260869565;
  --angle: 7.8260869565deg;
}

.panel:nth-child(3) {
  --left: -60px;
  --hue: 15.652173913;
  --angle: 15.652173913deg;
}

.panel:nth-child(4) {
  --left: -90px;
  --hue: 23.4782608696;
  --angle: 23.4782608696deg;
}

.panel:nth-child(5) {
  --left: -120px;
  --hue: 31.3043478261;
  --angle: 31.3043478261deg;
}

.panel:nth-child(6) {
  --left: -150px;
  --hue: 39.1304347826;
  --angle: 39.1304347826deg;
}

.panel:nth-child(7) {
  --left: -180px;
  --hue: 46.9565217391;
  --angle: 46.9565217391deg;
}

.panel:nth-child(8) {
  --left: -210px;
  --hue: 54.7826086957;
  --angle: 54.7826086957deg;
}

.panel:nth-child(9) {
  --left: -240px;
  --hue: 62.6086956522;
  --angle: 62.6086956522deg;
}

.panel:nth-child(10) {
  --left: -270px;
  --hue: 70.4347826087;
  --angle: 70.4347826087deg;
}

.panel:nth-child(11) {
  --left: -300px;
  --hue: 78.2608695652;
  --angle: 78.2608695652deg;
}

.panel:nth-child(12) {
  --left: -330px;
  --hue: 86.0869565217;
  --angle: 86.0869565217deg;
}

.panel:nth-child(13) {
  --left: -360px;
  --hue: 93.9130434783;
  --angle: 93.9130434783deg;
}

.panel:nth-child(14) {
  --left: -390px;
  --hue: 101.7391304348;
  --angle: 101.7391304348deg;
}

.panel:nth-child(15) {
  --left: -420px;
  --hue: 109.5652173913;
  --angle: 109.5652173913deg;
}

.panel:nth-child(16) {
  --left: -450px;
  --hue: 117.3913043478;
  --angle: 117.3913043478deg;
}

.panel:nth-child(17) {
  --left: -480px;
  --hue: 125.2173913043;
  --angle: 125.2173913043deg;
}

.panel:nth-child(18) {
  --left: -510px;
  --hue: 133.0434782609;
  --angle: 133.0434782609deg;
}

.panel:nth-child(19) {
  --left: -540px;
  --hue: 140.8695652174;
  --angle: 140.8695652174deg;
}

.panel:nth-child(20) {
  --left: -570px;
  --hue: 148.6956521739;
  --angle: 148.6956521739deg;
}

.panel:nth-child(21) {
  --left: -600px;
  --hue: 156.5217391304;
  --angle: 156.5217391304deg;
}

.panel:nth-child(22) {
  --left: -630px;
  --hue: 164.347826087;
  --angle: 164.347826087deg;
}

.panel:nth-child(23) {
  --left: -660px;
  --hue: 172.1739130435;
  --angle: 172.1739130435deg;
}

.panel:nth-child(24) {
  --left: -690px;
  --hue: 180;
  --angle: 180deg;
}

.panel:nth-child(25) {
  --left: -720px;
  --hue: 187.8260869565;
  --angle: 187.8260869565deg;
}

.panel:nth-child(26) {
  --left: -750px;
  --hue: 195.652173913;
  --angle: 195.652173913deg;
}

.panel:nth-child(27) {
  --left: -780px;
  --hue: 203.4782608696;
  --angle: 203.4782608696deg;
}

.panel:nth-child(28) {
  --left: -810px;
  --hue: 211.3043478261;
  --angle: 211.3043478261deg;
}

.panel:nth-child(29) {
  --left: -840px;
  --hue: 219.1304347826;
  --angle: 219.1304347826deg;
}

.panel:nth-child(30) {
  --left: -870px;
  --hue: 226.9565217391;
  --angle: 226.9565217391deg;
}

.panel:nth-child(31) {
  --left: -900px;
  --hue: 234.7826086957;
  --angle: 234.7826086957deg;
}

.panel:nth-child(32) {
  --left: -930px;
  --hue: 242.6086956522;
  --angle: 242.6086956522deg;
}

.panel:nth-child(33) {
  --left: -960px;
  --hue: 250.4347826087;
  --angle: 250.4347826087deg;
}

.panel:nth-child(34) {
  --left: -990px;
  --hue: 258.2608695652;
  --angle: 258.2608695652deg;
}

.panel:nth-child(35) {
  --left: -1020px;
  --hue: 266.0869565217;
  --angle: 266.0869565217deg;
}

.panel:nth-child(36) {
  --left: -1050px;
  --hue: 273.9130434783;
  --angle: 273.9130434783deg;
}

.panel:nth-child(37) {
  --left: -1080px;
  --hue: 281.7391304348;
  --angle: 281.7391304348deg;
}

.panel:nth-child(38) {
  --left: -1110px;
  --hue: 289.5652173913;
  --angle: 289.5652173913deg;
}

.panel:nth-child(39) {
  --left: -1140px;
  --hue: 297.3913043478;
  --angle: 297.3913043478deg;
}

.panel:nth-child(40) {
  --left: -1170px;
  --hue: 305.2173913043;
  --angle: 305.2173913043deg;
}

.panel:nth-child(41) {
  --left: -1200px;
  --hue: 313.0434782609;
  --angle: 313.0434782609deg;
}

.panel:nth-child(42) {
  --left: -1230px;
  --hue: 320.8695652174;
  --angle: 320.8695652174deg;
}

.panel:nth-child(43) {
  --left: -1260px;
  --hue: 328.6956521739;
  --angle: 328.6956521739deg;
}

.panel:nth-child(44) {
  --left: -1290px;
  --hue: 336.5217391304;
  --angle: 336.5217391304deg;
}

.panel:nth-child(45) {
  --left: -1320px;
  --hue: 344.347826087;
  --angle: 344.347826087deg;
}

.panel:nth-child(46) {
  --left: -1350px;
  --hue: 352.1739130435;
  --angle: 352.1739130435deg;
}

/* .screen {
  position: absolute;
  width: 430px;
  height: 400px;
  background-image: linear-gradient(90deg, #000a, #0004, #000a);
  transform: translate(-50%, -50%);
} */