/*****************************************/
/*     features page      */
/*****************************************/

<style>
  @keyframes float-a {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(6px, -4px); }
  50%  { transform: translate(-4px, 5px); }
  75%  { transform: translate(3px, -2px); }
  100% { transform: translate(0, 0); }
}
@keyframes float-b {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-5px, 6px); }
  40%  { transform: translate(4px, -3px); }
  60%  { transform: translate(-3px, 2px); }
  80%  { transform: translate(2px, 4px); }
  100% { transform: translate(0, 0); }
}
@keyframes float-c {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(5px, 5px); }
  60%  { transform: translate(-5px, -3px); }
  90%  { transform: translate(2px, -5px); }
  100% { transform: translate(0, 0); }
}
@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#arm-key {
  animation: swingArm 2.8s ease-in-out infinite;
  transform-origin: 90% 20%; /* adjust these values as needed */
}

@keyframes swingArm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
}

.floating-images .float {
  display: inline-block;
  will-change: transform;
  position: absolute;
  }
.float-a {
  animation: float-a 7s ease-in-out infinite;
  right: 150px;
  bottom: 15px;
}
.float-b {
  animation: float-b 6s ease-in-out infinite;
  right: 50px;
  bottom: 50px;
}
.float-c {
  animation: float-c 8s ease-in-out infinite;
  animation-delay: 1s;
right: -20px;
    bottom: -5px;
}
.rotating-a {
	display: inline-block;
    animation: slow-spin 10s linear infinite;
    transform-origin: center center;
    position: absolute;
    bottom: -28px;
    right: 30px;;
}
.blockchain {
    position: absolute;
    bottom: -115px;
    left: 30%;
}
  .keya svg{
    position: absolute;
    bottom: 0;
    right: -10px;
}
.mini-col {
  display: flex; 
  gap: 30px;"
}
.voting {
  background: #1C232E; 
  display: flex; 
  gap: 40px; 
  flex-wrap: nowrap; 
  text-align: left; 
  align-items: flex-start; 
  color: #fff; 
  padding: 60px 0  60px 80px;
}
.col-65 {
  max-width: 65%;
  padding-right: 30px;
}
.oa-img {
    width: 100%;
    text-align: center;
}
.forcefield {
  mask-image: linear-gradient(to top, transparent, black 20%, black 80%, transparent);
  width: 100%;
  text-align: center;
}
.forcefield img{
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); /* Adjust direction and color stops as needed */
}
.cell_17370678644095-background-layers {
    background-size: 758px !important;
}


/* Medium screens */
@media screen and (max-width: 1200px) {
    .dnd-column:has(.miv-card-col) {
    margin-left: 0;
    margin-right: 0;
  }
   .keya svg {
    width: 40%;
    height: 40%;
  }
  .rotating-a {
    right: 0;
    max-width: 155px;
  }
  .float-a {
    right: 120px;
    max-width: 100px;
  }
  .float-b {
    right: 50px;
    bottom: 50px;
    max-width: 100px;
  }
  .float-c {
    right: 6px;
    bottom: 13px;
    max-width: 73px;
  }
}


/* Small mobile devices */

@media screen and (max-width: 820px) {
  .dnd-column:has(.miv-card-col) {
    border-radius: 30px;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
  }
  .keya svg {
    width: 280px;
    height: auto;
  }
  .mini-col {
    display: flex;
    gap: 20px;
    flex-direction: column;
  }
  .voting {
    padding: 60px 50px !important;
    flex-direction: column;
    align-items: flex-end;
  }
  .col-65 {
  max-width: 100%;
    padding: 0 50px 50px 0;
}
}
/* Smaller mobile devices */
@media only screen and (max-width: 768px) {
     .miv-card img {
      max-width: inherit;
   }
}

  @media screen and (max-width: 800px) {
      .cell_17370678644095-background-layers {
        background-size: 700px !important;
    }
}

</style>