/*
- All external elements that are referenced in this css must have a descendant combinator at the style selector (the class name)
Ex: .grandparent .parent .child1 {styles}
- In regard to above statement, intermediate elements can be skipped so only the main selector and its focusing descendant is referenced.
Ex: .grandparent .child1 {styles}
- For Css selectors that are grouped to apply the same styles, each must have their own included parent css selector.
Ex: .grandparent .child1, .grandparent .child2 {styles}
- For HTML class names that are defined within the same html element i.e., <div class="parent1 parent2">, they can be chained as one in a Css selector
Ex: .parent1.parent2 {styles}
- In regard to above statement, if the html element is nested like <div class="parent"><div class="child"></div></div>, there must be space between the selectors
Ex: .parent .child {styles}
*/


/* Spinning Outline Flippable Gradient Card */ 
.card1 {
  overflow: visible;
  width: 190px;
  height: 254px;
}

.card1 .content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 300ms;
  box-shadow: 0px 0px 10px 1px #000000ee;
  border-radius: 5px;
}

.card1 .front, .card1 .back {
  background-color: #151515;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
}

.card1 .back {
  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.card1 .back::before {
  position: absolute;
  content: ' ';
  display: block;
  width: 160px;
  height: 160%;
  background: linear-gradient(90deg, transparent, #500303, #930706, #ffaa0b, #ffd10b, transparent);
  animation: card1rotate 5000ms infinite linear;
}

.card1 .back-content {
  position: absolute;
  width: 97%;
  height: 97.3%;
border-radius: 5px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.card1 .back-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent 50%, black 100%);
  border-radius: 5px;
  z-index: 1;
  pointer-events: none;
}

.card1 .back-content h5 {
    color: white;
    margin-top: 95%;
    position: relative;
    z-index: 2;
}

.card1:hover .content {
  transform: rotateY(180deg);
}

@keyframes card1rotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.card1 .front {
  transform: rotateY(180deg);
  color: white;
}

.card1 .front .front-content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card1 .front-content .badge {
  background-color: #00000055;
  padding: 2px 10px;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  width: fit-content;
}

.card1 .description {
  box-shadow: 0px 0px 10px 5px #00000088;
  width: 100%;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border-radius: 5px;
  color: black;
}

.card1 .description p, 
.card1 .description strong {
  color: black !important;
}

.card1 .title {
  color: black;
  font-size: 11px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
}


.card1 .card1-footer {
  color: black;
  font-size: 10px;
}

.card1 .front .img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card1 .circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #ffd10b;
  position: relative;
  filter: blur(15px);
  animation: floating 2600ms infinite linear;
}

.card1 .bottom {
  background-color: #930706;
  left: 50px;
  top: 0px;
  width: 150px;
  height: 150px;
  animation-delay: -800ms;
}

.card1 .right {
  background-color: #ff2233;
  left: 160px;
  top: -80px;
  width: 30px;
  height: 30px;
  animation-delay: -1800ms;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}
.card1 .back-content .top-logo {
  position: absolute; /* Takes it out of the flexbox flow */
  top: 10px;          /* Distance from the top edge */
  right: 10px;        /* Distance from the right edge */
  width: 70px;        /* Adjust size as needed */
  height: 70px;       
  object-fit: cover;  /* Ensures image doesn't stretch */
  z-index: 10;        /* Ensures it sits on top of the background */
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 1));
}









/*Below is css for grid system of card 1*/
  .grid-title {
    text-align: center;
    margin: 4rem 0 0 0;
    width: 100%;
  }

  /* Fixed 3-Column Grid for Top Cards */
  .card1-grid-fixed-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 1rem;
    padding: 2rem;
    justify-items: center;
  }

  /* Grid System for Card1 */
  .card1-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem 1rem;
    padding: 2rem;
    justify-items: center;
  }

  @media (min-width: 501px) {
    .card1-grid-fixed-3 {
      grid-template-columns: repeat(2, 1fr);
    }
    .card1-grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 768px) {
    .card1-grid-fixed-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .card1-grid-container {
      grid-template-columns: repeat(3, 1fr);
    }
    .card1-grid-container > .card1:last-child:nth-child(3n+1) {
      grid-column: 2;
    }
  }

  @media (min-width: 1024px) {
    .card1-grid-container {
      grid-template-columns: repeat(4, 1fr);
    }
    .card1-grid-container > .card1:last-child:nth-child(3n+1) {
      grid-column: auto;
    }
  }

  @media (min-width: 1536px) {
    .card1-grid-container {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  /* Card1 Hover and Flip Logic */
  .card1 {
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .card1:hover {
    transform: scale(1.05); /* Enlarge a little bit */
  }

  /* Disable the default hover-flip if it exists in external CSS */
  .card1:hover .content {
    transform: none;
  }

  /* Flip only when the 'flipped' class is present */
  .card1.flipped .content {
    transform: rotateY(180deg);
  }
  /* Transparent Gradient Card with Backdrop Circles */ 

































.ec2container {
  position: relative;
  height: 450px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  background-color: transparent;
}
.ec2container::after {
  content: " ";
  position: absolute;
  height: 150px;
  width: 150px;
  left: 50%;
  top: 25%;
  transform: translateX(-100%);
  background-image: linear-gradient(orange, magenta);
  border-radius: 50%;
  z-index: -1;
  border: 2px solid #ffffffa6;
  box-shadow: inset 10px 0px 20px #fff;
  animation: ani 28s ease-in-out infinite;
  transition: all 0.3s ease;
}
.ec2container::before {
  content: " ";
  position: absolute;
  height: 80px;
  width: 80px;
  left: 46%;
  bottom: 25%;
  transform: translateX(-100%);
  background-image: linear-gradient(orange, magenta);
  border-radius: 50%;
  z-index: -1;
  border: 2px solid #ffffffa6;
  box-shadow: inset 10px 0px 20px #fff;
  transition: all 0.3s ease;
  animation: ani2 22s ease-in-out infinite;
}
.ec2card {
  width: 190px;
  height: 254px;
  border: 1px solid #ffffff56;
  border-radius: 10px;
  backdrop-filter: blur(10.5px);
  -webkit-backdrop-filter: blur(10.5px);
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  position: relative;
  box-shadow: inset 2px 1px 6px #ffffff45;
  overflow: hidden;
  z-index: 0;
  transition: all 0.3s ease;
}
.ec2card::after {
  z-index: -1;
  content: " ";
  position: absolute;
  width: 150%;
  top: 0;
  left: 0;
  height: 10px;
  background: #fffffffb;
  transform: rotateZ(50deg);
  filter: blur(30px);
  animation: shine 10s ease infinite;
}
.ec2bg-box {
  position: absolute;
  width: 190px;
  height: 254px;
  padding: 10px;
  border: 1px solid transparent;
  background-color: rgb(227, 246, 255);
  border-radius: 10px;
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.ec2innerText {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(90deg, rgb(0, 0, 0), rgb(116, 111, 111));
  font-size: 36px;
  font-weight: 800;
  line-height: 1em;
  margin: 10px 0px;
  transition: all 0.3s ease;
}
@keyframes ani {
  0% {
    transform: translateX(0%) scale(1);
  }
  50% {
    transform: translateX(-100%) scale(0.8);
  }
  100% {
    transform: translateX(0%) scale(1);
  }
}
@keyframes ani2 {
  0% {
    transform: translateX(-100%) translateY(0%);
  }
  50% {
    transform: translateX(50%) translateY(-15%);
  }
  100% {
    transform: translateX(-100%) translateY(0%);
  }
}

@keyframes shine {
  0% {
    top: 100%;
    left: -100%;
  }
  50%,
  100% {
    top: 0%;
    left: 70%;
  }
}
.ec2desc {
  padding: 4px;
  color: #3a3939;
  transition: all 0.3s ease;
}

/* Dark Mode Counterpart */
.dark-mode .ec2card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 2px 1px 6px rgba(255, 255, 255, 0.1);
}
.dark-mode .ec2bg-box {
  background-color: #1e1e1e;
}
.dark-mode .ec2innerText {
  background-image: linear-gradient(90deg, #ffffff, #cccccc);
}
.dark-mode .ec2desc {
  color: #e0e0e0;
}
.dark-mode .ec2container::after,
.dark-mode .ec2container::before {
  box-shadow: inset 10px 0px 20px rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
}





















/* Floating bobbing icons*/
.ec3card {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.ec3stones-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  gap: 3rem 1rem;
  padding: 2rem;
}

@media (min-width: 768px) {
  .ec3stones-container {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Centers the 10th item in the middle column of the 4th row */
  .ec3stone-wrapper:last-child:nth-child(3n+1) {
    grid-column: 2;
  }
}

@media (min-width: 1024px) {
  .ec3stones-container {
    grid-template-columns: repeat(5, 1fr);
  }
  /* Resets the centering for the 5-column desktop layout */
  .ec3stone-wrapper:last-child:nth-child(3n+1) {
    grid-column: auto;
  }
}

.ec3stone-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 25px;
}

.ec3stone {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.3));
}

.ec3stone:hover {
  transform: scale(1.2);
}

.ec3stone-name {
  position: absolute;
  width: 160px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  top: 100%;
  margin-top: 10px;
  color: #fff;
  font-family: "Roboto Slab", "Times New Roman", serif;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  opacity: 1;
  transition: text-shadow 0.3s ease;
  text-shadow: none;
}

.ec3stone-wrapper:hover .ec3stone-name {
  text-shadow: 0 0 10px currentColor;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.ec3stone-wrapper {
  animation: float 4s ease-in-out infinite;
}

.ec3stone-wrapper:nth-child(2) {
  animation-delay: -0.5s;
}
.ec3stone-wrapper:nth-child(3) {
  animation-delay: -1s;
}
.ec3stone-wrapper:nth-child(4) {
  animation-delay: -1.5s;
}
.ec3stone-wrapper:nth-child(5) {
  animation-delay: -2s;
}
.ec3stone-wrapper:nth-child(6) {
  animation-delay: -2.5s;
}
.ec3stone-wrapper:nth-child(7) {
  animation-delay: -3s;
}
.ec3stone-wrapper:nth-child(8) {
  animation-delay: -3.5s;
}
.ec3stone-wrapper:nth-child(9) {
  animation-delay: -4s;
}
.ec3stone-wrapper:nth-child(10) {
  animation-delay: -4.5s;
}




















/* MacOS Terminal */ 
.card4 {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: #181818;
  border-radius: 8px;
  z-index: 1;
  box-shadow: 0px 2px 10px black;
  transition: 0.5s;
}

.card4:hover {
  transform: translateY(-7px);
  box-shadow: 0px 5px 10px black;
}

.card4 .ec4top {
  display: flex;
  align-items: center;
  padding-left: 10px;
  position: relative;
}

.card4 .ec4circle {
  padding: 0 4px;
}

.card4 .circle2 {
  display: inline-block;
  align-items: center;
  width: 10px;
  height: 10px;
  padding: 1px;
  margin-top: 15px;
  border-radius: 5px;
}

.card4 .ec4red {
  background-color: #ff605c;
}

.card4 .ec4yellow {
  background-color: #ffbd44;
}

.card4 .ec4green {
  background-color: #00ca4e;
}

.card4 .ec4header {
  margin: 5px;
  margin-top: 5px;
  border-radius: 5px;
}

.card4 .ec4title {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.card4 .ec4title2 {
  color: white;
  text-align: center;
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
}

.card4 .ec4code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}
.card4 .ec4code-code {
  width: 100%;
  height: auto;
  margin-left: 10px;
  margin-right: 10px;
  min-height: 20px;
  field-sizing: content;
  resize: none;
  background-color: #1f1f1f;
  border-radius: 5px;
  border: none;
  color: #ffc37b;
  padding: 10px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  box-sizing: border-box;
  overflow: hidden;
}
.card4 .ec4code-code:focus {
  outline: none !important;
}

/* This replaces the manual &nbsp; indentation */
.card4 .code-row {
  display: flex;
  flex-direction: column;
  padding-left: 20px;   /* Indents the whole row from the left */
  gap: 0px;            /* Adds space between the colon and the quote */
}

.card4 .key {
  white-space: nowrap;  /* Prevents the "Subject-..." part from breaking/wrapping */
  color: #73c5ff;       /* Optional: Makes it look like a JSON key color */
  flex-shrink: 0;       /* Ensures the key never shrinks or gets squished */
}

.card4 .value {
  /* No special code needed! Flexbox handles the wrapping automatically. */
  color: #ce9178;       /* Optional: String color */
}



  





















/* Trackable Card */
.ec5container {
  position: relative;
  width: 190px;
  height: 254px;
  transition: 200ms;
}

.ec5container:active {
  width: 180px;
  height: 245px;
}

#ec5card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  /* background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); */ /*Old Color*/
  background: linear-gradient(43deg, rgb(146, 11, 11) 0%, rgb(220, 20, 60) 46%, rgb(255, 215, 0) 100%);
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.ec5subtitle {
  transform: translateY(160px);
  color: rgb(134, 110, 221);
  text-align: center;
  width: 100%;
}

.ec5title {
  opacity: 0;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out-out;
  transition-delay: 100ms;
  position: absolute;
  font-size: x-large;
  font-weight: bold;
  color: white;
}

.ec5tracker:hover ~ #ec5card .ec5title {
  opacity: 1;
}

#ec5prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 20px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  position: absolute;
  max-width: 110px;
  color: rgb(255, 255, 255);
}

.ec5tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.ec5tracker:hover {
  cursor: pointer;
}

.ec5tracker:hover ~ #ec5card #ec5prompt {
  opacity: 0;
}

.ec5tracker:hover ~ #ec5card {
  transition: 300ms;
  filter: brightness(1.1);
}

.ec5container:hover #ec5card::before {
  transition: 200ms;
  content: '';
  opacity: 80%;
}

.ec5canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "ec5tr-1 ec5tr-2 ec5tr-3 ec5tr-4 ec5tr-5"
    "ec5tr-6 ec5tr-7 ec5tr-8 ec5tr-9 ec5tr-10"
    "ec5tr-11 ec5tr-12 ec5tr-13 ec5tr-14 ec5tr-15"
    "ec5tr-16 ec5tr-17 ec5tr-18 ec5tr-19 ec5tr-20"
    "ec5tr-21 ec5tr-22 ec5tr-23 ec5tr-24 ec5tr-25";
}

#ec5card::before {
  content: '';
  background: linear-gradient(43deg, rgb(220, 20, 60) 0%, rgb(238, 118, 30) 46%, rgb(255, 215, 0) 100%);
  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
}

.ec5tr-1 {
  grid-area: ec5tr-1;
}

.ec5tr-2 {
  grid-area: ec5tr-2;
}

.ec5tr-3 {
  grid-area: ec5tr-3;
}

.ec5tr-4 {
  grid-area: ec5tr-4;
}

.ec5tr-5 {
  grid-area: ec5tr-5;
}

.ec5tr-6 {
  grid-area: ec5tr-6;
}

.ec5tr-7 {
  grid-area: ec5tr-7;
}

.ec5tr-8 {
  grid-area: ec5tr-8;
}

.ec5tr-9 {
  grid-area: ec5tr-9;
}

.ec5tr-10 {
  grid-area: ec5tr-10;
}

.ec5tr-11 {
  grid-area: ec5tr-11;
}

.ec5tr-12 {
  grid-area: ec5tr-12;
}

.ec5tr-13 {
  grid-area: ec5tr-13;
}

.ec5tr-14 {
  grid-area: ec5tr-14;
}

.ec5tr-15 {
  grid-area: ec5tr-15;
}

.ec5tr-16 {
  grid-area: ec5tr-16;
}

.ec5tr-17 {
  grid-area: ec5tr-17;
}

.ec5tr-18 {
  grid-area: ec5tr-18;
}

.ec5tr-19 {
  grid-area: ec5tr-19;
}

.ec5tr-20 {
  grid-area: ec5tr-20;
}

.ec5tr-21 {
  grid-area: ec5tr-21;
}

.ec5tr-22 {
  grid-area: ec5tr-22;
}

.ec5tr-23 {
  grid-area: ec5tr-23;
}

.ec5tr-24 {
  grid-area: ec5tr-24;
}

.ec5tr-25 {
  grid-area: ec5tr-25;
}

.ec5tr-1:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.ec5tr-2:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.ec5tr-3:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.ec5tr-4:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.ec5tr-5:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.ec5tr-6:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.ec5tr-7:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.ec5tr-8:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.ec5tr-9:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.ec5tr-10:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.ec5tr-11:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.ec5tr-12:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.ec5tr-13:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.ec5tr-14:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.ec5tr-15:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.ec5tr-16:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.ec5tr-17:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.ec5tr-18:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.ec5tr-19:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.ec5tr-20:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.ec5tr-21:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.ec5tr-22:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.ec5tr-23:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.ec5tr-24:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.ec5tr-25:hover ~ #ec5card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.ec5noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}  /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
























 /* Sliding Up when Hovered Card */ 
.ec6card-container {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.ec6card {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.ec6card .ec6front-ec6content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.ec6card .ec6front-ec6content p {
  font-size: 32px;
  font-weight: 700;
  opacity: 1;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
}

.ec6card .ec6content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  color: #e8e8e8;
  padding: 20px;
  line-height: 1.5;
  border-radius: 5px;
  pointer-events: none;
  transform: translateY(96%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.ec6card .ec6content .ec6heading {
  font-size: 32px;
  font-weight: 700;
}

.ec6card:hover .ec6content {
  transform: translateY(0);
}

.ec6card:hover .ec6front-ec6content {
  transform: translateY(-30%);
}

.ec6card:hover .ec6front-ec6content p {
  opacity: 0;
}






















/* M2 Chip */
.ec7m2 {
  position: relative;
  width: 20vmin;
  height: 20vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  
  /* CRITICAL: This must be transparent so we see the layers inside */
  background: transparent; 
  isolation: isolate;
  z-index: 1;
  
  /* Remove isolation/negative index hacks. We are using positive z-index now. */
}

/* SHARED STYLES */
.ec7m2::before,
.ec7m2::after {
  content: "";
  position: absolute;
  border-radius: 0; /* Sharp Corners */
}

/* 1. THE GLOW (Bottom Layer) */
.ec7m2::before {
  /* Stick out further for the glow effect */
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  
  /* Layer 1: Bottom */
  z-index: 1; 
  
  background: radial-gradient(circle at 0 0, hsl(27deg 93% 60%), transparent),
    radial-gradient(circle at 100% 0, #00a6ff, transparent),
    radial-gradient(circle at 0 100%, #ff0056, transparent),
    radial-gradient(circle at 100% 100%, #6500ff, transparent);
    
  filter: blur(10px);
  animation: ec7blur-animation 1s ease-in-out alternate infinite;
}

/* 2. THE BLACK BOX + SHARP OUTLINE (Middle Layer) */
.ec7m2::after {
  /* Stick out 2px for the sharp outline */
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  
  /* Layer 2: Middle (Covers the center of the gradient) */
  z-index: 2;
  
  /* Gradient Border Trick: 
     The first background is the black box (clipped to padding).
     The second background is the gradient outline (clipped to border). */
  background: linear-gradient(135deg, #1e1e24 10%, #050505 60%) padding-box,
              conic-gradient(from 45deg, #00a6ff, #6500ff, #ff0056, hsl(27deg 93% 60%), #00a6ff) border-box;
  border: 2px solid transparent;
}

/* 3. LOGO / CONTENT (Top Layer) */
.ec7m2 .ec7logo {
  /* Layer 3: Top (Sits on the black box) */
  z-index: 3;
  
  position: relative; /* Needed for z-index to work on text */
  display: inline-block;
  font-size: 5vmin;
  font-weight: bold;
  background-image: linear-gradient(to right, #626262, #fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.ec7m2 .ec7logo svg {
  margin-right: -1vmin;
  width: 5vmin;
  height: 5vmin;
}

/* Animation */
@keyframes ec7blur-animation {
  to {
    filter: blur(12px);
    transform: scale(1.02);
  }
}
















  /* RBG Outline */ 
.ec8wrapper {
  height: 100px;
  width: 240px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
  animation: ec8-rgb-cycle 1.5s linear infinite !important;
  /* Force hardware acceleration for smoother filter animation */
  transform: translateZ(0);
  will-change: filter;
}
.ec8wrapper .ec8display,
.ec8wrapper span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ec8wrapper .ec8display {
  z-index: 999;
  height: 85px;
  width: calc(100% - 16px);
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.ec8display #ec8time {
  line-height: 85px;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes ec8-rgb-cycle {
  0% {
    filter: hue-rotate(0deg);
    -webkit-filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
    -webkit-filter: hue-rotate(360deg);
  }
}
.ec8wrapper span {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.ec8wrapper span:first-child {
  filter: blur(7px);
}
.ec8wrapper span:last-child {
  filter: blur(20px);
}






















  /* Item Carousel */ 
.ec9marquee {
  overflow: hidden;
  /* hide the scrolling overflow */
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}
.ec9marquee_header {
  font-size: 35px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
}
.ec9marquee__inner {
  display: flex;
  width: max-content;
  animation: ec9marquee 15s linear infinite;
}

.ec9marquee__group {
  display: flex;
}

.ec9marquee__group span {
  margin: 0 1.5rem;
  white-space: nowrap;
  background: #000000;
  color: white;
  padding: 4px 16px 4px 12px;
  border-radius: 6px;
  font-size: 1.2rem;
}

@keyframes ec9marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}






















  /* Congratulatory Card */ 
.ec10results-summary-container {
  font-family: "Hanken Grotesk", sans-serif;
  display: flex;
  width: 320px;
  border-radius: 30px;
  box-shadow: 10px 20px 20px rgba(120, 87, 255, 0.3);
  backface-visibility: hidden;
}

.ec10heading-primary,
.ec10heading-secondary,
.ec10heading-tertiary {
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ec10heading-primary {
  font-size: 36px;
  font-weight: 600;
  background-image: linear-gradient(to right, #f7bb97, #dd5e89);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.6);
}

.ec10heading-secondary {
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  letter-spacing: 2px;
}

.ec10heading-tertiary {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

.ec10paragraph {
  font-size: 17px;
  line-height: 1.4;
  color: #666;
}

.ec10paragraph-text-box {
  width: 100%;
}

.text-center {
  text-align: center;
}

.margin-1 {
  margin-bottom: 10px;
}

.ec10results-summary-container__result {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 30px;
  background-color: #ffffff;
  animation: none;
  .ec10result-box {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-image: linear-gradient(-45deg, #ef629f, #42275a);
  background-color: #56ab2f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: gradient 9s linear infinite;
}

.ec10result {
  margin-top: -8px;
  font-size: 16px;
  font-weight: 400;
  color: hsl(241, 100%, 89%);
}
}

.ec10btn {
  width: 240px;
  padding: 10px;
  color: #ffffff;
  background-image: linear-gradient(to right, #aa076b, #61045f);
  border: none;
  border-radius: 100px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
  cursor: pointer;
  margin: 20px 0 2px 0;
  transition: all 0.3s;
}

.ec10btn:hover {
  transform: translateY(5px);
  background-image: linear-gradient(to left, #aa076b, #61045f);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
    background-image: linear-gradient(-45deg, #ef629f, #42275a);
  }

  50% {
    background-position: 100% 50%;
    background-image: linear-gradient(to bottom, #aa076b, #61045f);
  }

  100% {
    background-position: 0% 50%;
    background-image: linear-gradient(to top, #ef629f, #42275a);
  }
}

.ec10confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 300px;
  height: 60%;
  overflow: hidden;
  z-index: 1000;
}

.ec10confetti-piece {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: hsl(39, 100%, 56%);
  top: 0;
  opacity: 0;
  animation: makeItRain 3000ms infinite linear;
}

.ec10confetti-piece:nth-child(1) {
  left: 7%;
  transform: rotate(-10deg);
  animation-delay: 182ms;
  animation-duration: 2000ms;
}

.ec10confetti-piece:nth-child(2) {
  left: 14%;
  transform: rotate(20deg);
  animation-delay: 161ms;
  animation-duration: 2076ms;
}

.ec10confetti-piece:nth-child(3) {
  left: 21%;
  transform: rotate(-51deg);
  animation-delay: 481ms;
  animation-duration: 2103ms;
}

.ec10confetti-piece:nth-child(4) {
  left: 28%;
  transform: rotate(61deg);
  animation-delay: 334ms;
  animation-duration: 1008ms;
}

.ec10confetti-piece:nth-child(5) {
  left: 35%;
  transform: rotate(-52deg);
  animation-delay: 302ms;
  animation-duration: 1776ms;
}

.ec10confetti-piece:nth-child(6) {
  left: 42%;
  transform: rotate(38deg);
  animation-delay: 180ms;
  animation-duration: 1168ms;
}

.ec10confetti-piece:nth-child(7) {
  left: 49%;
  transform: rotate(11deg);
  animation-delay: 395ms;
  animation-duration: 1200ms;
}

.ec10confetti-piece:nth-child(8) {
  left: 56%;
  transform: rotate(49deg);
  animation-delay: 14ms;
  animation-duration: 1887ms;
}

.ec10confetti-piece:nth-child(9) {
  left: 63%;
  transform: rotate(-72deg);
  animation-delay: 149ms;
  animation-duration: 1805ms;
}

.ec10confetti-piece:nth-child(10) {
  left: 70%;
  transform: rotate(10deg);
  animation-delay: 351ms;
  animation-duration: 2059ms;
}

.ec10confetti-piece:nth-child(11) {
  left: 77%;
  transform: rotate(4deg);
  animation-delay: 307ms;
  animation-duration: 1132ms;
}

.ec10confetti-piece:nth-child(12) {
  left: 84%;
  transform: rotate(42deg);
  animation-delay: 464ms;
  animation-duration: 1776ms;
}

.ec10confetti-piece:nth-child(13) {
  left: 91%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 1818ms;
}

.ec10confetti-piece:nth-child(14) {
  left: 94%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 818ms;
}

.ec10confetti-piece:nth-child(15) {
  left: 96%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.ec10confetti-piece:nth-child(16) {
  left: 98%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.ec10confetti-piece:nth-child(17) {
  left: 50%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.ec10confetti-piece:nth-child(18) {
  left: 60%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 1818ms;
}

.ec10confetti-piece:nth-child(odd) {
  background-color: hsl(0, 100%, 67%);
}

.ec10confetti-piece:nth-child(even) {
  z-index: 1;
}

.ec10confetti-piece:nth-child(4n) {
  width: 6px;
  height: 14px;
  animation-duration: 4000ms;
  background-color: #c33764;
}

.ec10confetti-piece:nth-child(5n) {
  width: 3px;
  height: 10px;
  animation-duration: 4000ms;
  background-color: #b06ab3;
}

.ec10confetti-piece:nth-child(3n) {
  width: 4px;
  height: 12px;
  animation-duration: 2500ms;
  animation-delay: 3000ms;
  background-color: #dd2476;
}

.ec10confetti-piece:nth-child(3n-7) {
  background-color: hsl(166, 100%, 37%);
}

@keyframes makeItRain {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    transform: translateY(250px);
  }
}



























/* Image carousel parallax*/
/*NOTE: 
- The images should be landscape like 16x9
- 
 */
.ec11ring, .ec11img {
  width:100%;
  height: 100%;
  transform-style: preserve-3d;
  user-select:none;
  background-repeat: no-repeat;
  background-size: cover;
}

.ec11img {
  border-radius: 15px;
  pointer-events: auto; 
  cursor: grab;
  box-shadow: 0 10px 15px rgba(0,0,0,0.8);
}

.ec11stage {
  width: 100%;
  height: 600px; /* Fixed height so it occupies space in the layout */
  overflow: hidden;
  position: relative; /* Ensures the absolute container stays inside this section */
  margin: 4rem 0;
}

.ec11container, .ec11ring, .ec11img {
  position: absolute;
}

.ec11container {
  perspective: 2000px;
  width: 300px;
  height: 400px;  
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events: none;
}

.ec11ring {
  pointer-events: none;
}

/* --- MODAL CSS --- */
.ec11modal {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw; 
  height: 100vh;
  background: rgba(0, 0, 0, 0.9); 
  z-index: 10000; 
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* BASE STATE: Hidden */
  opacity: 0;
  visibility: hidden; 
  pointer-events: none; 
  cursor: zoom-out;
  
  /* FIX: Split transitions for maximum browser compatibility */
  /* When closing: Fade opacity (0.3s), then toggle visibility after (0.3s delay) */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s !important;
}

.ec11modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  cursor: default;
  object-fit: contain;
  
  /* BASE STATE: Small and invisible */
  transform: scale(0.2);
  opacity: 0;
  
  transition: transform 0.3s ease-in, opacity 0.3s ease-in !important;
}

/* --- ACTIVE STATE --- */
.ec11modal.ec11active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  
  /* FIX: When opening: Fade opacity (0.3s) and toggle visibility IMMEDIATELY (0s delay) */
  transition: opacity 0.3s ease, visibility 0s linear 0s !important;
}

.ec11modal.ec11active img {
  transform: scale(1);
  opacity: 1;
  
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease !important;
}