/* Minimy CSS Online and Use for better performance - Notes Broken Shadow */
/* === FONTS === */

/* Cooper Hewitt (all weights) */
@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/assets/fonts/CooperHewitt-Book.woff');
  font-weight: 400;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('/assets/fonts/CooperHewitt-Bold.woff');
  font-weight: 700;
}

/* 🔥 NEW ADDITIONS */

@font-face {
  font-family: 'Cyberway';
  src: url('/assets/fonts/Cyberway-Riders.woff') format('woff');
}

@font-face {
  font-family: 'Cyberpunk';
  src: url('/assets/fonts/SDCyberPunkCityDemo.woff') format('woff');
}

@font-face {
  font-family: 'Blacked';
  src: url('/assets/fonts/BlackedDemoRegular.woff') format('woff');
}

/* === Preview Classes === */
.cooper {
  font-family: 'Cooper Hewitt', sans-serif;
}

.cyberpunk {
  font-family: 'Cyberpunk', monospace;
  letter-spacing: 1px;
}

.Cyberway {
  font-family: 'Cyberway', monospace;
  letter-spacing: 1px;
}


.Blacked {
  font-family: 'Blacked', monospace;
  letter-spacing: 1px;
}





/* Remove outline on all focus by default */
button,
a,
input,
textarea {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* remove blue tap highlight on Android */
}

/* Show outline only when focus is from keyboard (focus-visible) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ff6600;
  /* your custom visible focus */
  outline-offset: 2px;
}

/* Disable selection globally except interactive fields */
body {
  user-select: none;
  -webkit-user-select: none;
}

/* Allow selection inside inputs and important text */
input,
textarea,
.inputToken,
.cookie-para,
.file-name,
.file-item-download a {
  user-select: text !important;
  -webkit-user-select: text !important;
}


/* For Webkit browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 4px;
  /* Scrollbar width */
  height: 4px;
  /* For horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background-color: linear-gradient(90deg, #1c1c1c, #6220fb);
  border-radius: 10px;
  /* Rounded corners for the track */
}

::-webkit-scrollbar-thumb {
  background-color: #000000;
  /* Default thumb color */
  border-radius: 10px;
  /* Rounded thumb */
  border: 2px solid #767676;
  /* Adds space between thumb and track */
  transition: background-color 0.3s ease;
  /* Smooth hover transition */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* Darker thumb color on hover */
}

/* For Firefox */
scrollbar {
  width: 4px;
  height: 4px;
}

scrollbar-track {
  background-color: #f1f1f1;
}

scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

scrollbar-thumb:hover {
  background-color: #555;
}






/* Hide system cursor on desktop */
@media (pointer: fine) {
  body {
    cursor: url('/assets/img/cursor_1.png') 0 0, auto;
  }

  button,
  a,
  input,
  textarea,
  select,
  [role='button'] {
    cursor: url('/assets/img/cursor_1.png') 0 0, pointer;
  }
}

@media (pointer: coarse) {
  * {
    cursor: none !important;
  }

  #customCursor {
    display: none !important;
  }
}







* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Cooper Hewitt', sans-serif;
  letter-spacing: 1px;
}

body {
  font-family: 'Cooper Hewitt', sans-serif;

  background:

  linear-gradient(rgba(120,110,255,0.10) 1px, transparent 1px),
  linear-gradient(90deg, rgba(120,110,255,0.10) 1px, transparent 1px),

  radial-gradient(circle at 50% 25%, rgba(110,90,255,0.18), transparent 60%),
  radial-gradient(circle at 20% 80%, rgba(40,120,255,0.12), transparent 70%),

  #04050b;

  background-size:
  18px 18px,
  18px 18px,
  auto,
  auto,
  auto;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  color: rgb(198, 198, 198);
  overflow: hidden;
}


/* subtle horizontal scanlines */

body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.02) 0px,
rgba(255,255,255,0.02) 1px,
transparent 1px,
transparent 3px
);

pointer-events:none;
z-index:2222;
}






















a.pp {
  position: fixed;
  bottom: 15px;
  right: -100px;
  animation: slide 0.5s 3s forwards;
  display: block;
  z-index: 4
}

a.pp img {
  border-radius: 100%;
  width: 60px;
  border: 2.5px solid white;
}

@keyframes slide {
  from {
    right: -100px;
    transform: rotate(360deg);
    opacity: 0;
  }

  to {
    right: 15px;
    transform: rotate(0deg);
    opacity: 1;
  }
}







/* From Uiverse.io by himanshu9682 */
.type--A {
  --line_color: #555555;
  --back_color: #ffecf6;
}

.type--B {
  --line_color: #1b1919;
  --back_color: #e9ecff;
}

.type--C {
  --line_color: #00135c;
  --back_color: #defffa;
}

.button {
  margin-bottom: 60px;
  position: relative;
  z-index: 0;
  width: 300px;
  height: 66px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: rgb(200, 199, 199);
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.button__text {
  font-weight: 900;
  font-size: 22px;
  font-family: 'Cyberway', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.button::before,
.button::after,
.button__text::before,
.button__text::after {
  content: "";
  position: absolute;
  height: 1px;
  border-radius: 2px;
  background: black;
  transition: all 0.5s ease;
}

.button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 56px * 2 - 16px);
}

.button__text::after {
  bottom: 0;
  left: 54px;
  width: 8px;
}


.container-h1 {
  position: fixed;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 20;
  pointer-events: auto;
}

.button.hover-active .button__drow1 {
  animation: drow1 ease-in 0.15s;
  animation-fill-mode: forwards;
}

.button.hover-active .button__drow1::before {
  animation: drow2 linear 0.2s 0.15s;
  animation-fill-mode: forwards;
}

.button.hover-active .button__drow1::after {
  animation: drow3 linear 0.15s 0.35s;
  animation-fill-mode: forwards;
}

.button.hover-active .button__drow2 {
  animation: drow4 linear 0.15s 0.5s;
  animation-fill-mode: forwards;
}

.button.hover-active .button__drow2::before {
  animation: drow3 linear 0.15s 0.65s;
  animation-fill-mode: forwards;
}

.button.hover-active .button__drow2::after {
  animation: drow5 linear 0.15s 0.8s;
  animation-fill-mode: forwards;
}

.button:hover,
.button.hover-active {
  color: #007bff;
  /* Blue color on hover */
  text-shadow: 0 0 8px rgba(0, 123, 255, 0.8);
  /* Glow effect */
}


/* Fading out only the animation effects (not the text or button color) */
.fade-out-effect .button__drow1,
.fade-out-effect .button__drow1::before,
.fade-out-effect .button__drow1::after,
.fade-out-effect .button__drow2,
.fade-out-effect .button__drow2::before,
.fade-out-effect .button__drow2::after {
  animation: fadeOut 0.6s forwards;
  /* Smooth fade-out */
}

/* Fade-out effect */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Ensure only animation parts fade out, not the button text and color */
.button:hover,
.button.hover-active {
  color: #007bff;
  /* Blue color on hover */
  text-shadow: 0 0 8px rgba(0, 123, 255, 0.8);
  /* Glow effect */
}







/* Initial state (hidden until animation starts) */
.buttonH1 {
  position: relative;
  width: 14em;
  height: 5em;
  outline: none;
  transition: 1.1s;
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
  color: #ddebf0;
  opacity: 0;
  /* Start hidden */
  transform: scale(0.8);
  /* Start smaller */
}

/* When the 'animate' class is added, the button will animate into view */
.buttonH1.animate {
  opacity: 1;
  transform: scale(1);
  /* Scale to normal size */
  transition: all 0.5s ease-in-out;
  /* Smooth transition */
}


.arrow1 {
  position: absolute;
  transition: 0.2s;
  background-color: #2761c3;
  top: 35%;
  width: 11%;
  height: 30%;
}


.buttonH1:hover #rightArrow {
  background-color: #27c39f;
  left: -15%;
  animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}

.buttonH1:hover #leftArrow {
  background-color: #27c39f;
  left: 103%;
  animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}

.corner {
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: #2761c3;
  box-shadow: inset 1px 1px 8px #2781c3;
  transform: scale(1) rotate(45deg);
  transition: 0.2s;
}

#rightTop {
  top: -1.98em;
  left: 91%;
}

#leftTop {
  top: -1.96em;
  left: -3.0em;
}

#leftBottom {
  top: 2.10em;
  left: -2.15em;
}

#rightBottom {
  top: 45%;
  left: 88%;
}

.buttonH1:hover #leftTop {
  animation: 0.1s ease-in-out 0.05s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

.buttonH1:hover #rightTop {
  animation: 0.1s ease-in-out 0.15s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

.buttonH1:hover #rightBottom {
  animation: 0.1s ease-in-out 0.25s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

.buttonH1:hover #leftBottom {
  animation: 0.1s ease-in-out 0.35s both changeColor8,
    0.2s linear 0.4s both lightEffect8;
}

.buttonH1:hover .corner {
  transform: scale(1.25) rotate(45deg);
}

.buttonH1:hover #clip {
  animation: 0.2s ease-in-out 0.55s both greenLight8;
  --color: #27c39f;
}

@keyframes changeColor8 {
  from {
    background-color: #2781c3;
  }

  to {
    background-color: #27c39f;
  }
}

@keyframes lightEffect8 {
  from {
    box-shadow: 1px 1px 5px #27c39f;
  }

  to {
    box-shadow: 0 0 2px #27c39f;
  }
}

@keyframes greenLight8 {
  from {}

  to {
    box-shadow: inset 0px 0px 32px #27c39f;
  }
}

@keyframes leftArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(10px);
  }
}

@keyframes rightArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(-10px);
  }
}























.container {
  text-align: center;
  margin-bottom: 10px;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.options {
  display: flex;
  gap: 20px;
}

.option {
  padding: 20px 40px;
  border: none;
  background: #007BFF;
  color: white;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.3s;
}

.option:hover {
  background: #0056b3;
}



.input-container {
  display: flex;
  align-items: center;
  gap: 0px;
  /* Adds space between the input and button */

}

.inputToken {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  margin-left: 10px;
  background-color: #383838;
  border: 1ex solid none;
  border-top-width: 1.7em;
  padding: 0;
  color: #383838;
  word-wrap: break-word;
  outline: 7px solid #383838;
  height: 30px;
  width: 150px;
  font-size: 17px;
  text-align: center;
  transition: all 1s;
  max-width: 190px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
}

.inputToken:hover {
  border-top-width: 0.2em;
  background-color: #f1e8e8;
}

.inputToken:focus {
  border-top-width: 0.2em;
  background-color: #f1e8e8;
}



/* ---------------------------------------------------------------
CARD MAIN PAGE  
*/





/* ---------------------------------------------------------------
MAIN BUTTON SEND & RECIEVE
*/
.button_Main {
  height: 50px;
  margin: 5px;
  width: 120px;
  background: #333;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: 'Blacked', Courier New, monospace;
  border: solid #404c5d 1px;
  font-size: 22px;
  color: rgb(161, 161, 161);
  -webkit-transition: 500ms;
  transition: 500ms;
  border-radius: 5px;
  background: linear-gradient(145deg, #2e2d2d, #212121);
  -webkit-box-shadow: -1px -5px 15px #41465b, 5px 5px 15px #41465b,
    inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;
  box-shadow: -1px -5px 15px #41465b, 5px 5px 15px #41465b,
    inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;
}

.button_Main:hover {
  -webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;
  box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;
  color: #d6d6d6;
  -webkit-transition: 500ms;
  transition: 500ms;
}

.button_Main:active {
  -webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;
  box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;
  color: #d6d6d6;
  -webkit-transition: 100ms;
  transition: 100ms;
}
















/* ---------------------------------------------------------------
BACK BUTTON INNER
*/

.top-btn {

  position: absolute;
  z-index: 800;
  top: 20px;
  left: 20px;
  opacity: 0;
  transform: scale(0.8);
  transition-duration: 0.5s;
  transition: transform 0.5s ease-in-out, opacity 1.5s ease-in-out;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
  cursor: pointer;
  overflow: hidden;
}

.svgIcon {
  width: 12px;
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: white;
}

.top-btn:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.6s;
  background-color: rgb(181, 160, 255);
  align-items: center;
}

.top-btn:hover .svgIcon {
  transition-duration: 0.2s;
  transform: translateY(-200%);
}

.top-btn::before {
  position: absolute;
  bottom: -20px;
  content: "Home";
  color: white;
  font-size: 10px;
}

.top-btn:hover::before {
  font-size: 17px;
  opacity: 1;
  bottom: unset;
  transition-duration: 0.5s;
}

















/* ---------------------------------------------------------------
TOOLTIPS
*/

ul {
  list-style: none;
  margin-top: 70px;
}

.example-2 {
  display: flex;
  justify-content: end;
  align-items: end;
}

.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}


.example-2 .icon-content a {
  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.65);

  transition: all .35s cubic-bezier(.2,.8,.2,1);
}

.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}


.example-2 .icon-content a[data-social="linkedin"]:hover {
  color: #0a66c2;
}

.example-2 .icon-content a[data-social="instagram"]:hover {
  color: #ff3ea5;
}

.example-2 .icon-content a[data-social="github"]:hover {
  color: #ffffff;
}

.example-2 .icon-content a[data-social="telegram"]:hover {
  color: #2aa9e0;
}

.example-2 .icon-content .tooltip {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);

  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;

  color: rgba(255,255,255,0.9);

  background: rgba(20,20,25,0.85);
  backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.example-2 .icon-content a:hover {
  transform: translateY(-2px);

  border-color: rgba(255,255,255,0.2);

  box-shadow:
    0 8px 25px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}







































.svgIcon {
  fill: rgb(214, 178, 255);
}

.icon2 {
  width: 18px;
  height: 5px;
  border-bottom: 2px solid rgb(182, 143, 255);
  border-left: 2px solid rgb(182, 143, 255);
  border-right: 2px solid rgb(182, 143, 255);
}

.tooltip {
  position: absolute;
  right: -105px;
  opacity: 0;
  background-color: rgb(12, 12, 12);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .2s;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.tooltip::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background-color: rgb(12, 12, 12);
  background-size: 1000%;
  background-position: center;
  transform: rotate(45deg);
  left: -5%;
  transition-duration: .3s;
}

.Btn:hover .tooltip {
  opacity: 1;
  transition-duration: .3s;
}

.Btn:hover {
  background-color: rgb(150, 94, 255);
  transition-duration: .3s;
}

.Btn:hover .icon2 {
  border-bottom: 2px solid rgb(235, 235, 235);
  border-left: 2px solid rgb(235, 235, 235);
  border-right: 2px solid rgb(235, 235, 235);
}

.Btn:hover .svgIcon {
  fill: rgb(255, 255, 255);
  animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}





















#uploadResult {
  margin-top: 10px;
  font-size: 16px;
  background: rgba(52, 152, 219, 0.1);
  padding: 10px;
  border-radius: 5px;
  text-shadow: 0 0 5px #3498db;
}

/* ______________________________________________________________________________ */

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  transition: all 5s ease-in-out;
  z-index: 1000;
}

.popup-content {
  background-color: #ecf0f1;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.8);
  text-align: center;
  max-width: 400px;
  width: 80%;
}

.popup-content h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.popup-content p {
  font-size: 1.2em;
  margin-bottom: 20px;
  font-weight: bold;
  color: #3498db;
}

/*@media screen and (max-width: 700px) {*/
/*  .box {*/
/*    width: 70%;*/
/*  }*/

/*.popup {*/
/*  width: 70%;*/
/*}*/
/*}*/

/* ______________________________________________________________________________ */


/* =====================================================
   EXECUTIVE DARK TOKEN POPUP
   Wider. Tighter. No neon. No toy energy.
===================================================== */


/* =========================
   POPUP BASE
========================= */

.cookies-card,
#tokenPopup {
  display: none;

  width: 360px;
  max-width: 92vw;

  background: #0d1117;
  border-radius: 10px;

  /* subtle outer border */
  border: 1px solid rgba(255, 255, 255, 0.07);

  /* inner premium light edge */
  box-shadow:
    0 60px 140px rgba(0, 0, 0, 0.9),
    /* main depth */
    0 0 0 1px rgba(255, 255, 255, 0.02),
    /* subtle outer crisp edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    /* top inner highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  /* bottom inner shadow */

  flex-direction: column;
  align-items: stretch;
  justify-content: center;

  padding: 15px 17px;
  gap: 14px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.97);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  z-index: 1000;
  opacity: 0;
  visibility: hidden;

  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.2, .8, .2, 1);
}

#tokenPopup.show,
.cookies-card.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

#tokenPopup::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;

  background: radial-gradient(120% 100% at 50% 0%,
      rgba(255, 255, 255, 0.05),
      transparent 60%);

  pointer-events: none;
}


/* =========================
   HEADINGS
========================= */

.cookie-heading {
  font-size: 13px;
  margin-left: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}


/* =========================
   TOKEN TEXT
========================= */

.cookie-para {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.8px;
  font-style: normal;

  color: #00e0c6;
  /* keep subtle mint */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================
   TOKEN ROW
========================= */

.token-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  padding: 3px 8px;

  border-radius: 10px;
  background: #131922;
  border: 1px solid rgba(255, 255, 255, 0.04);

  transition: border .25s ease, background .25s ease;
}

.token-container:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: #161d27;
}


/* =========================
   COPY BUTTON
========================= */

.copy {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  background: #171e29;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50px;

  color: rgba(255, 255, 255, 0.6);

  cursor: pointer;

  transition:
    background .2s ease,
    border .2s ease,
    color .2s ease,
    transform .15s ease;
}

.copy:hover {
  background: #1c2430;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: translateY(-2px);
}

.copy:active {
  transform: scale(.96);
}

.copy svg {
  width: 16px;
  height: 16px;
}


/* =========================
   MAGIC LINK (STRUCTURED)
========================= */

.href-magicLink {
  transition: border .25s ease, background .25s ease;
}

.href-magicLink:hover {
  background: #161d27;
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}


/* =========================
   GOTCHA BUTTON (NO NEON)
========================= */

.accept,
.exit-button {
  margin-top: 8px;
  width: 100%;
  padding: 12px 0;

  border-radius: 10px;

  font-weight: 600;
  letter-spacing: 0.8px;

  cursor: pointer;

  /* Deep metallic surface */
  background: linear-gradient(180deg,
      #1c2430 0%,
      #141b25 100%);

  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 18px rgba(0, 0, 0, 0.5);

  transition:
    transform .18s ease,
    box-shadow .25s ease,
    border .25s ease;
}

.accept:hover,
.exit-button:hover {
  transform: translateY(-2px);

  border-color: rgba(255, 255, 255, 0.15);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.6);
}

.accept:active,
.exit-button:active {
  transform: translateY(0px);

  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.7);
}


/* Exit button darker variation */
.exit-button {
  background: #2a1414;
  border-color: rgba(255, 0, 0, 0.2);
}





/* ===============================
   GLOBAL DIM OVERLAY (V3 BEAST)
=============================== */

#zt-global-overlay {
  position: fixed;
  inset: 0;

  background:
    radial-gradient(circle at 50% 40%, rgba(120, 0, 255, 0.12), transparent 60%),
    linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.85));

  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.35s ease;

  z-index: 901;
}

#zt-global-overlay.active {
  opacity: 1;
  pointer-events: auto;
}































/* ----- SECOND POP UP ERROR ------- */




/* Success Overlay (Background Dimmer) */
.success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: none;
  /* Initially hidden */
}

/* Success Popup Box */
.success-popup {
  display: none;
  /* Initially hidden */
  width: 350px;
  background-color: #252525;
  border-radius: 10px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Success Popup Content */
.success-popup-content {
  text-align: center;
  color: rgb(183, 183, 183);
}

/* Success Message */
.success-message {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Close Button Styling */
.success-close-btn {
  background-color: #353434;
  color: #059326;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.success-close-btn:hover {
  background-color: #00751c;
  color: #282828;
}

/* Show Class for Popup and Overlay */
.success-popup.show,
.success-overlay.show {
  opacity: 1;
  visibility: visible;
}




























.button-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cookie-button {
  width: 50%;
  padding: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.accept {
  background-color: rgb(34, 34, 34);
  color: white;
}

.reject {
  background-color: #ececec;
  color: rgb(34, 34, 34);
}

.accept:hover {
  background-color: rgb(0, 0, 0);
}

.reject:hover {
  background-color: #ddd;
}

.exit-button {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: flex;
  background-color: #918e8e;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.exit-button:hover {
  background-color: #a1a1a1;
}

.svgIconCross {
  height: 10px;
}

















/* Close Button inside Files Popup */
#closeFilesPopup {
  background-color: #e74c3c;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s;
}

#closeFilesPopup:hover {
  background-color: #c0392b;
}

a {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

a:hover {
  color: #2980b9;
  text-shadow: 0 0 5px #3498db;
}













#fileInput {
  display: none;
}

.custom-file-upload {
  display: inline-block;
  padding: 10px 120px;
  background-color: #471b60;
  color: white;
  font-weight: bold;
  font-family: monospace;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.custom-file-upload:hover {
  background-color: #000000;
}


.file-item:hover {
  background-color: #3b3b3b;
  /* Lighten on hover */
}

/* File name text style */
.file-item .file-name {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  /* Adjust weight */
  max-width: 75%;
  /* Prevents the text from overflowing the box */
  padding-right: 10px;
  display: block;
  white-space: nowrap;
  /* Prevents text from wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Adds ... for overflowing text */
  line-height: 1.4em;
  height: 2.8em;
  /* Limit to two lines */
}

/* Remove border for the last file item */
.file-item:last-child {
  border-bottom: none;
}







.fixed-bottom {
  position: sticky;
  bottom: 0;
  background: #2a2a3c;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}

.button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: absolute;
  bottom: 10px;
}



.arrow path {
  fill: rgb(19, 19, 19);
}

.upload-btn:hover .arrow {
  animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-8px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.upload-btn:active {
  transform: scale(0.97);
}



















.button-SelectFiles {
  border-radius: .25rem;
  text-transform: uppercase;
  font-style: normal;
  margin-right: 120px;
  font-weight: 400;
  padding-left: 25px;
  padding-right: 25px;
  color: #fff;
  -webkit-clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 100%);
  clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 100%);
  height: 40px;
  font-size: 0.7rem;
  line-height: 14px;
  letter-spacing: 1.2px;
  transition: .2s .1s;
  background-image: linear-gradient(90deg, #1c1c1c, #6220fb);
  border: 0 solid;
  overflow: hidden;
}

.button-SelectFiles:hover {
  cursor: pointer;
  transition: all .3s ease-in;
  padding-right: 30px;
  padding-left: 30px;
}


.upload-btn {
  width: 140px;
  height: 40px;
  top:20%;
  margin-left: 4px;
  margin-top: -80px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  position: sticky;
  border-radius: 6px;
  cursor: pointer;
  border: 3px solid linear-gradient(90deg, #1c1c1c, #6220fb);
  background-color: linear-gradient(90deg, #1c1c1c, #6220fb);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
  opacity: 0;
  /* Initially invisible */
  visibility: hidden;
  /* Keep hidden until shown via JS */
  transition: opacity .5s ease-in-out, visibility 0s 1.5s;
  /* Fade in with delay */
}

.upload-btn.visible {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out;
}

.upload-btn.invisible {
  display: flex;
  opacity: 0;
  visibility: hidden;
}

.upload-btn-text {
  width: 70%;
  height: 100%;
  display: flex;
  font-size: 15px;
  align-items: center;
  font-family: Monospace;
  font-weight: bold;
  justify-content: center;
  background-color: rgb(27, 27, 27);
  color: white;
}


@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  /* Start hidden */
  10% {
    opacity: 1;
    transform: scale(1);
  }

  /* Fade in */
  60% {
    opacity: 1;
  }

  /* Stay visible for 2s */
  90% {
    opacity: 0;
    transform: scale(0.95);
  }

  /* Fade out */
  100% {
    opacity: 0;
  }

  /* Stay hidden for 1s */
}

.AlertMessage {
  display: none;
  align-items: center;
  justify-content: center;
  position: sticky;
  opacity: 0;
  /* Start hidden */
  animation: fadeInOut 3s infinite ease-in-out;
  /* 3s cycle */

  /* Huge, bold, stylish text */
  font-size: 11px;
  font-weight: 900;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;

  /* Neon-like glow */
  color: #b3b3b3;
  /* Bright red */
  text-shadow: 0 0 10px rgba(117, 117, 117, 0.6),
    0 0 20px rgba(125, 125, 125, 0.5),
    0 0 30px rgba(255, 75, 75, 0.4);

  /* Centering the text */
  width: 100%;
  text-align: center;
}























/*// FETCH BUTTOn*/

.ui-btn {
  margin-left: 20px;
  margin-bottom: 30px;
  --btn-default-bg: rgb(41, 41, 41);
  --btn-padding: 12px 20px;
  --btn-hover-bg: rgb(51, 51, 51);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #ffffff;
  --default-btn-color: #fff;
  --font-size: 16px;
  /* 👆 this field should not be empty */
  --font-weight: 600;
  --font-family: Menlo, Roboto Mono, monospace;
  /* 👆 this field should not be empty */
}

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover,
.ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span,
.ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before,
.ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "â„–:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}


























.file-list {
  margin-top: 15px;
  display: flex;
  /* Ensures correct layout */
  flex-direction: column;
  /* Stacks items vertically */
  align-items: stretch;
  /* Stretches items to full width */
  height: auto;
  /* Auto height for natural content flow */
  max-height: 190px;
  /* Prevents exceeding max height */
  min-height: 40px;
  /* Allow scrolling if content overflows */
  padding: 10px;
  background-color: linear-gradient(90deg, #1c1c1c, #6220fb);
  border-radius: 8px;
  border: 1.3px solid rgb(106, 106, 106);
  transition: height 0.5s ease-in-out;
  /* Smooth height transition */
  flex: 1;
  overflow-y: auto;

}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Ensures spacing */
  padding: 8px 12px;
  margin: 5px 0;
  background-color: #2b2b2b;
  border-radius: 4px;
  border: 1px solid rgba(206, 206, 206, 0.363);
  transition: background-color 0.3s ease;
  width: 100%;
  /* Ensures it doesn't expand */
  box-sizing: border-box;
  /* Includes padding in width */
  overflow: hidden;
  /* Prevents content overflow */
}

.disabled {
  pointer-events: none;
  /* Disable clicks */
  opacity: 0.5;
  /* Reduce visibility to indicate disabled */
}

/* Filename + Close Button */
.inlineFileListUpload {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Cooper Hewitt';
  gap: 8px;
  max-width: 75%;
  /* Prevents filename from taking too much space */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Close button */
.ButtonInlineFileSelction {
  background: transparent;
  border: none;
  font-weight: bold;
  color: #e0fff8;
  cursor: pointer;
  flex-shrink: 0;
}

.ButtonInlineFileSelction:hover {
  color: red;
}

/* File Size - Prevents Overflow */
.InnerFileSizeUpload {
  font-size: 10px;
  color: #9482f7;
  font-weight: bold;
  font-family: 'Cooper Hewitt', Times, serif;
  text-align: right;
  flex-shrink: 0;
  /* Prevents shrinking */
  min-width: 60px;
  /* Ensures spacing remains */
  max-width: 25%;
  /* Restricts size width */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 10px;
}

/* Add a class to target buttons with fade-out transition */
.ButtonInlineFileSelction {
  transition: opacity 0.5s ease-out;
  /* smooth fade-out effect */
  opacity: 1;
  /* Initially visible */
}

/* Add a class for the "faded" state */
.faded {
  opacity: 0;
  /* Make it invisible */
}
























































/* //linear-gradient(315deg,#03a9f4,#ff0058); linear-gradient(315deg,#03a9f4,#ff0058); */


/* From Uiverse.io by mrhyddenn */
.progress-loader {
  display: none;
  margin-left: 135px;
  transform: translate(-50%, -50%);
}

.progress-loader {
  width: 90%;
  background: rgba(236, 236, 238, 0.253);
  height: 4px;
  border-radius: 7px;
}

.progress {
  content: '';
  width: 0;
  height: 4px;
  border-radius: 7px;
  background: rgb(255, 255, 255);
  transition: 0.5s;
  /* animation: loading1274 2s ease infinite; */
}












.card2 {
  height: 400px;
  display: none;
  flex-direction: column;

  opacity: 0;

  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.5s ease-in-out;

  text-align: center;
  padding: 1rem;
  gap: 1rem;
  width: 20rem;

  border-radius: 1rem;

  background: linear-gradient(145deg,
      rgba(12, 14, 24, 0.98),
      rgba(8, 10, 18, 0.96));

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(140, 110, 255, 0.08),
    0 0 60px rgba(110, 70, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) scale(0.95);
}

.card2.show {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

















/* Outer File List Container */
.DownloadFileList-container {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  max-width: 350px;
  width: 100%;
  transition: transform 0.3s ease;
  padding: 10px;

  margin-top: 20px !important;
  /* Ensure top margin */
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  /* Outer thin border */
}

.DownloadFileList-container:hover {
  transform: scale(1.02);
}

.filesListPopup {
  display: none;
}

#filesListPopup {
  list-style: none;
  padding: 5px;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  transition: opacity 0.5s ease;
}

.file-item-download {
  /* SAME SURFACE AS GOTCHA BUTTON */
  background: linear-gradient(180deg,
      #1c2430 0%,
      #141b25 100%);

  border-radius: 8px;
  height: 40px;
  padding: 12px;
  margin: 8px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);

  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* SAME DEPTH STYLE */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 16px rgba(0, 0, 0, 0.45);

  position: relative;
  opacity: 0;
  animation: fadeIn 0.5s forwards;

  overflow: hidden;
  white-space: nowrap;

  transition:
    transform .18s ease,
    border .25s ease,
    box-shadow .25s ease;
}


.file-item-download a {
  color: #bbb7b7;
  text-decoration: none;
  /* Remove underline */
  flex-grow: 1;
  font-size: 12.5px;
  font-family: 'Cooper Hewitt', sans-serif;
  font-weight: normal;
  /* Allow the link to grow and take up remaining space */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  /* Ensure text is aligned left */
}

.file-item-download button {
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 100px;
  cursor: pointer;
  width: 35px;
  /* Ensure the width is not restricted */
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.file-item-download button:hover {
  transform: translateY(-2px);
}

.file-item-download button:focus {
  outline: none;
}

/* New Custom Download Button */
.DownloadBtn {
  /* width: 30px; */
  margin-left: 10px;
  height: 30px;
  border: 2px solid rgb(255, 0, 0);
  border-radius: 10px;
  background-color: rgb(168, 166, 166);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
}

.DownloadBtn .DownloadIcon {
  fill: rgb(0, 0, 0);
  width: 10px;
  height: 10px;
}

.DownloadBtn .DownloadIcon2 {
  width: 14px;
  height: 5px;
  border-bottom: 2px solid rgb(70, 70, 70);
  border-left: 2px solid rgb(70, 70, 70);
  border-right: 2px solid rgb(70, 70, 70);
}

.DownloadBtn:hover {
  background-color: rgb(51, 51, 51);
  transition-duration: 0.3s;
}

.DownloadBtn:hover .DownloadIcon2 {
  border-bottom: 2px solid rgb(235, 235, 235);
  border-left: 2px solid rgb(235, 235, 235);
  border-right: 2px solid rgb(235, 235, 235);
}

.DownloadBtn:hover .DownloadIcon {
  fill: rgb(255, 255, 255);
  animation: slide-in-top 1s linear infinite;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* Smooth fade-in effect */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}












































#button-container-last {
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.5s ease-in-out;
}


.button-container-last {
  margin-top: 9px;
  display: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* Ensures full width so buttons go to extreme left and right */
  padding: 0 20px;
  /* Adjusts spacing from the sides */
}

.buttonZip {
  display: flex;
  --main-focus: #2d8cf0;
  --font-color: #323232;
  --bg-color-sub: #dedede;
  --bg-color: #eee;
  --main-color: #323232;
  position: relative;
  width: 140px;
  height: 40px;
  cursor: pointer;
  margin-left: 7px;
  align-items: center;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  background-color: var(--bg-color);
  border-radius: 10px;
  overflow: hidden;
}

.buttonZip,
.buttonZip_icon,
.buttonZip_text {
  transition: all 0.3s;
}

.buttonZip .buttonZip_text {
  letter-spacing: 1px;
  font-family: monospace;
  transform: translateX(22px);
  color: var(--font-color);
  font-weight: 600;
}

.buttonZip .buttonZip_icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 20px;
  background-color: var(--bg-color-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonZip .svg {
  width: 20px;
  fill: var(--main-color);
}

.buttonZip:hover {
  background: var(--bg-color);
}

.buttonZip:hover .buttonZip_text {
  color: transparent;
}

.buttonZip:hover .buttonZip_icon {
  width: 148px;
  transform: translateX(0);
}

.buttonZip:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px var(--main-color);
}

/* Button Delete All */
.bin-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 15px;
  background-color: rgb(255, 95, 95);
  cursor: pointer;
  border: 3px solid rgb(255, 201, 201);
  transition-duration: 0.3s;
}

.bin-bottom {
  width: 15px;
}

.bin-top {
  width: 17px;
  transform-origin: right;
  transition-duration: 0.3s;
}

.bin-button:hover .bin-top {
  transform: rotate(45deg);
}

.bin-button:hover {
  background-color: rgb(255, 0, 0);
}

.bin-button:active {
  transform: scale(0.9);
}

/* Tooltip */
.bin-button-tooltip {
  position: absolute;
  top: 60px;
  /* Adjust this value based on your button's size */
  left: 50%;
  transform: translateX(-50%);
  background-color: red;
  color: white;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Tooltip container */
.delete-container {
  background-color: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Show tooltip below the delete button on hover */
.delete-container:hover .tooltip {
  background-color: rgb(26, 25, 25);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  opacity: 1;
  visibility: visible;
  transform: translateX(30%) translateY(5px);
}
























/* From Uiverse.io by alexruix */
.loaderZipping {
  display: none;
  opacity: 1;
  margin-left: 40px;
  width: 80px;
  height: 50px;
  position: fixed;
}

.loaderZipping-text {
  position: absolute;
  top: 0;
  padding: 0;
  margin-left: 1px;
  color: #C8B6FF;
  animation: text_713 3.5s ease both infinite;
  font-size: .8rem;
  letter-spacing: 1px;
}

.loadZipping {
  margin-left: 40px;
  background-color: #9A79FF;
  border-radius: 50px;
  display: block;
  height: 16px;
  width: 16px;
  bottom: 0;
  position: absolute;
  transform: translateX(64px);
  animation: loading_713 3.5s ease both infinite;
}

.loadZipping::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #D1C2FF;
  border-radius: inherit;
  animation: loading2_713 3.5s ease both infinite;
}

@keyframes text_713 {
  0% {
    letter-spacing: 1px;
    transform: translateX(0px);
  }

  40% {
    letter-spacing: 2px;
    transform: translateX(26px);
  }

  80% {
    letter-spacing: 1px;
    transform: translateX(32px);
  }

  90% {
    letter-spacing: 2px;
    transform: translateX(0px);
  }

  100% {
    letter-spacing: 1px;
    transform: translateX(0px);
  }
}

@keyframes loading_713 {
  0% {
    width: 16px;
    transform: translateX(0px);
  }

  40% {
    width: 100%;
    transform: translateX(0px);
  }

  80% {
    width: 16px;
    transform: translateX(64px);
  }

  90% {
    width: 100%;
    transform: translateX(0px);
  }

  100% {
    width: 16px;
    transform: translateX(0px);
  }
}

@keyframes loading2_713 {
  0% {
    transform: translateX(0px);
    width: 16px;
  }

  40% {
    transform: translateX(0%);
    width: 80%;
  }

  80% {
    width: 100%;
    transform: translateX(0px);
  }

  90% {
    width: 80%;
    transform: translateX(15px);
  }

  100% {
    transform: translateX(0px);
    width: 16px;
  }
}
















































.loaderEye-FileList {
  display: flex;
  gap: 20px;
  margin-left: 90px;
}

.loaderEye-FileList:before,
.loaderEye-FileList:after {
  content: "";
  height: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, #000 95%, #0000) 35% 35%/6px 6px no-repeat #fff;
  animation: l5 3s infinite;
}

@keyframes l5 {

  0%,
  11% {
    background-position: 35% 35%
  }

  14%,
  36% {
    background-position: 65% 35%
  }

  38%,
  61% {
    background-position: 65% 65%
  }

  64%,
  86% {
    background-position: 35% 65%
  }

  88%,
  100% {
    background-position: 35% 35%
  }
}


























































/* Common Tooltip Styles */
.tooltip-common {
  position: fixed;
  top: 50%;
  background: #0000009f;
  color: #bdbbbb;
  padding: 12px;
  border-radius: 11px;
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
  width: 180px;
  /* Slim */
  min-height: 50px;
  /* Starts small */
  max-height: 0;
  /* Expands dynamically */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 200px;
  margin-right: 200px;
  line-height: 1.4;
  z-index: 1000;
}

/* Right Tooltip */
.tooltip-right {
  right: 20px;
  transform: translateY(-50%);
}

/* Left Tooltip */
.tooltip-left {
  left: 20px;
  top: calc(50% + 90px);
  /* Move it slightly below the right tooltip */
  transform: translateY(-50%);
}


/* Tooltip Arrows */
.tooltip-right::after,
.tooltip-left::after {
  content: "";
  position: absolute;
  top: 50%;
  border: 6px solid transparent;
}

.tooltip-right::after {
  left: 100%;
  border-left-color: #1e1e1e;
}

.tooltip-left::after {
  right: 100%;
  border-right-color: #1e1e1e;
}

/* Show Tooltip */
.show-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  max-height: 300px;
  /* Expands dynamically */
  transition: max-height 1s ease, opacity 0.5s ease;
}

/* Close Button */
.tooltip-close-btn {
  background: none;
  border: none;
  color: #bbb;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 10px;
}

.tooltip-close-btn:hover {
  color: #fff;
}

/* Fade Out Effect */
.fade-out {
  opacity: 0 !important;
  transition: opacity 0.5s ease, max-height 0.5s ease;
  max-height: 0;
}

/* Bottom Tooltip (For Mobile) */
.tooltip-bottom {
  bottom: 10px;
  margin-top: 220px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  /* Responsive width */
  max-width: 390px;
  text-align: start;
}

/* Ensure only one tooltip shows on mobile */
@media (max-width: 768px) {

  .tooltip-right,
  .tooltip-left {
    /* margin-left: 6px;
    margin-right: 6px; */
    display: none !important;
  }
}

@media (max-width: 1138px) {
  .tooltip-common {
    margin-left: 20px;
    margin-right: 20px;
  }

}









#coolAppBanner {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 20px);

  display: flex;
  align-items: center;
  gap: 18px;

  padding: 18px 22px;
  min-width: 320px;
  max-width: 550px;
  width: auto;

  border-radius: 18px;

  background: rgba(20, 20, 25, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;

  font-family: 'Cooper Hewitt', sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);

  opacity: 0;
  pointer-events: none;
  transition: all .45s cubic-bezier(.2, .8, .2, 1);

  z-index: 9999;
}

#coolAppBanner.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

#coolInstallBtn {
  margin-left: auto;

  padding: 8px 18px;
  border-radius: 10px;

  border: 1px solid rgba(0, 255, 170, 0.25);
  background: linear-gradient(
    145deg,
    rgba(0, 255, 170, 0.12),
    rgba(0, 255, 170, 0.05)
  );

  color: #00ffb3;
  font-weight: 600;
  font-size: 13px;

  cursor: pointer;
  transition: all .25s ease;
}

#coolInstallBtn:hover {
  background: rgba(0, 255, 170, 0.15);
  transform: translateY(-1px);
}

#closeBannerBtn {
  position: absolute;
  top: 10px;
  right: 4px;

  background: none;
  border: none;

  font-size: 18px;
  color: rgba(255,255,255,0.4);

  cursor: pointer;
  transition: .25s ease;
}

#closeBannerBtn:hover {
  color: #ffffff;
}

#coolAppBanner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #00ffb3, #00a3ff);
  opacity: 0.6;
}

/* Mobile specific adjustment */
@media (max-width: 768px) {


  #coolAppBanner {
    top: 70%;
    left: 50%;

    right: auto;
    bottom: auto;

    width: 300px;
    max-width: 85%;
    min-width: auto;

    transform: translate(120%, -50%);
    /* start off screen (right side) */

    border-radius: 18px;
    opacity: 1;

    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #coolAppBanner.show {
    transform: translate(-50%, -50%);
    /* perfectly centered */
  }

  #coolAppBanner.hidden {
    transform: translate(120%, -50%);
  }

  #mobileBannerDim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.5s ease;
    z-index: 9998;
    /* below banner */
  }

  #mobileBannerDim.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Ensure banner is above */
  #coolAppBanner {
    z-index: 9999;
  }


  #coolInstallBtn {
    margin-left: 5px;
    margin-top: 5px;
  }

  @keyframes bounceIn {
    0% {
      transform: translateX(-50%) translateY(250px);
      opacity: 0;
    }

    60% {
      transform: translateX(-50%) translateY(-30px);
      opacity: 1;
    }

    80% {
      transform: translateX(-50%) translateY(15px);
    }

    100% {
      transform: translateX(-50%) translateY(0px);
    }
  }

  @keyframes fadeOutUp {
    0% {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    100% {
      opacity: 0;
      transform: translateX(-50%) translateY(100px);
    }
  }
}





















#featureStacksContainer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

/* ===== FLOATING PANEL ===== */
.feature-stack {
  position: absolute;
  width: 390px;
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(22, 28, 48, 0.6), rgba(15, 20, 38, 0.55));
  /*backdrop-filter: blur(18px) saturate(140%);*/
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(255, 255, 255, 0.02);
  opacity: 0;
  transform: translate3d(0, 100px, 0) scale(0.9);

  transition:
    transform 0.9s cubic-bezier(.16, 1, .3, 1),
    opacity 0.9s cubic-bezier(.16, 1, .3, 1);

  will-change: transform, opacity;
  contain: layout paint style;

  overflow: hidden;
  z-index: 1;
}


/* glowing border edge */
.feature-stack::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  background: linear-gradient(120deg, #7c3aed, #10b981, #3b82f6);
  opacity: 0;
  filter: blur(25px);
  transition: opacity 0.6s ease;
  z-index: -1;
}

.feature-stack h2 {
  font-family: 'Cooper Hewitt', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1px;
  line-height: 1.1;
  margin-bottom: 20px;

  background: linear-gradient(90deg, #c084fc, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-stack p {
  font-family: 'Cooper Hewitt', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin: 6px 0;
}

/* Active state */
.feature-stack.active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Exit upward fade */
.feature-stack.exit {
  opacity: 0;
  transform: translate3d(0, -140px, 0) scale(0.95);
}

/* Hover insanity */
.feature-stack:hover {
  transform: scale(1.05) rotateX(4deg) rotateY(-4deg);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(124, 58, 237, 0.4);
}

.feature-stack:hover::before {
  opacity: 0.6;
}

/* ===== BETWEEN DESKTOP & TABLET (<1195px) ===== */
@media (max-width: 1195px) and (min-width: 901px) {

  .feature-stack {
    width: 28vw;
    max-width: 320px;
  }

  .feature-stack h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .feature-stack p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}


@media (max-width: 900px) {

  .feature-stack {
    position: fixed;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 6%;
    transform: translateX(-50%) translateY(80px) scale(0.95);

    width: 82vw;
    max-width: 380px;

    padding: 12px 1px 8px 10px;
    border-radius: 8px;

    background: rgba(18, 22, 40, 0.55);
    backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.06);

    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.5),
      inset 0 0 30px rgba(255, 255, 255, 0.02);
  }


  .feature-stack p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .feature-stack h2 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .feature-stack.active {
    transform: translateX(-50%) translateY(0px) scale(1);
  }

  .feature-stack.exit {
    transform: translateX(-50%) translateY(-100px) scale(0.96);
  }

  .feature-stack:hover {
    transform: translateX(-50%) scale(1.02);
  }

  .feature-stack h2 {
    font-size: 17px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .feature-stack p {
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.3px;
  }

}









/*SPEED BAR UPLOAD */
/* =========================================
   BEAST PROGRESS BAR — PREMIUM EDITION
========================================= */

.beast-bar {
  width: 100%;
  margin-top: 22px;
  padding: 14px 18px 18px 18px;
  border-radius: 14px;
  background: rgba(20, 24, 38, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);

  opacity: 0;
  transform: translateY(15px) scale(0.96);
  transition: opacity 0.45s cubic-bezier(.2, .8, .2, 1),
    transform 0.45s cubic-bezier(.2, .8, .2, 1);
}

.beast-bar.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.beast-bar.hiding {
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
}

.beast-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.4px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
}

.beast-speed {
  opacity: 0.85;
}

.beast-percent {
  font-weight: 600;
  opacity: 0.95;
}

.beast-time {
  opacity: 0.65;
}

/* Ultra thin premium bar */
.beast-progress-wrapper {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.beast-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
      rgba(140, 120, 255, 0.9),
      rgba(120, 180, 255, 0.9));
  border-radius: 50px;
  transition: width 0.3s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 0 12px rgba(120, 180, 255, 0.35);
}

.beast-progress-fill::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent);
  animation: beastShine 1.8s linear infinite;
}

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

  100% {
    transform: translateX(250%);
  }
}


/**/













#siteWrapper {
  opacity: 0;
  transition: opacity 0.6s ease;
}

#globalLoader {
  position: fixed;
  inset: 0;

  background: radial-gradient(
    circle at center,
    #101010 0%,
    #0a0a0a 40%,
    #000000 100%
  );

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  z-index: 99999;

  opacity: 1;
  visibility: visible;

  transition: opacity 0.6s cubic-bezier(.4,0,.2,1),
              visibility 0.6s cubic-bezier(.4,0,.2,1);
}

/* From Uiverse.io by anand_4957 */ 
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  /*margin-left: -50px;*/
  animation: speeder 0.4s linear infinite;
}

.loader > span {
  height: 5px;
  width: 35px;
  background: #f51313;
  position: absolute;
  top: -19px;
  left: 60px;
  border-radius: 2px 10px 1px 0;
}

.base span {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 100px solid #f3cfcf;
  border-bottom: 6px solid transparent;
}

.base span:before {
  content: "";
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #f3cfcf;
  position: absolute;
  right: -110px;
  top: -16px;
}

.base span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-right: 55px solid #f3cfcf;
  border-bottom: 16px solid transparent;
  top: -16px;
  right: -98px;
}

.face {
  position: absolute;
  height: 12px;
  width: 20px;
  background: #f3cfcf;
  border-radius: 20px 20px 0 0;
  transform: rotate(-40deg);
  right: -125px;
  top: -15px;
}

.face:after {
  content: "";
  height: 12px;
  width: 12px;
  background: #f51313;
  right: 4px;
  top: 7px;
  position: absolute;
  transform: rotate(40deg);
  transform-origin: 50% 50%;
  border-radius: 0 0 2px 2px;
}

.loader > span > span {
  width: 30px;
  height: 1px;
  background: #ffffff;
  position: absolute;
}

.loader > span > span:nth-child(1) {
  animation: fazer1 0.2s linear infinite;
}

.loader > span > span:nth-child(2) {
  top: 3px;
  animation: fazer2 0.4s linear infinite;
}

.loader > span > span:nth-child(3) {
  top: 1px;
  animation: fazer3 0.4s linear infinite;
  animation-delay: -1s;
}

.loader > span > span:nth-child(4) {
  top: 4px;
  animation: fazer4 1s linear infinite;
  animation-delay: -1s;
}

@keyframes fazer1 {
  0% {
    left: 0;
  }
  100% {
    left: -80px;
    opacity: 0;
  }
}

@keyframes fazer2 {
  0% {
    left: 0;
  }
  100% {
    left: -100px;
    opacity: 0;
  }
}

@keyframes fazer3 {
  0% {
    left: 0;
  }
  100% {
    left: -50px;
    opacity: 0;
  }
}

@keyframes fazer4 {
  0% {
    left: 0;
  }
  100% {
    left: -150px;
    opacity: 0;
  }
}

@keyframes speeder {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -3px) rotate(-1deg);
  }
  20% {
    transform: translate(-2px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 3px) rotate(-1deg);
  }
  60% {
    transform: translate(-1px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-2px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.longfazers {
  position: absolute;
  width: 100%;
  height: 100%;
}

.longfazers span {
  position: absolute;
  height: 2px;
  width: 20%;
  background: #ffffff;
}

.longfazers span:nth-child(1) {
  top: 20%;
  animation: lf 0.6s linear infinite;
  animation-delay: -5s;
}

.longfazers span:nth-child(2) {
  top: 40%;
  animation: lf2 0.8s linear infinite;
  animation-delay: -1s;
}

.longfazers span:nth-child(3) {
  top: 60%;
  animation: lf3 0.6s linear infinite;
}

.longfazers span:nth-child(4) {
  top: 80%;
  animation: lf4 0.5s linear infinite;
  animation-delay: -3s;
}

@keyframes lf {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}

@keyframes lf2 {
  0% {
    left: 200%;
  }
  100% {
    left: -200%;
    opacity: 0;
  }
}

@keyframes lf3 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}

@keyframes lf4 {
  0% {
    left: 200%;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}

/* ✅ CLOUDS - moving right to left with px values */
.clouds {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.25;
  animation: moveClouds linear infinite;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

.cloud::before {
  width: 60%;
  height: 60%;
  top: -30%;
  left: 10%;
}

.cloud::after {
  width: 40%;
  height: 40%;
  top: -20%;
  left: 50%;
}

/* Clouds start off-screen (right) and move left */
.cloud1 {
  width: 100px;
  height: 60px;
  top: 15%;
  left: 1400px; /* off-screen to the right */
  animation-duration: 2s;
}

.cloud2 {
  width: 150px;
  height: 80px;
  top: 35%;
  left: 1600px;
  animation-duration: 3s;
}

.cloud3 {
  width: 80px;
  height: 50px;
  top: 20%;
  left: 2000px;
  animation-duration: 4s;
}
.cloud4 {
  width: 100px;
  height: 80px;
  top: 70%;
  left: 1100px;
  animation-duration: 3s;
}
.cloud5 {
  width: 170px;
  height: 50px;
  top: 80%;
  left: 1500px;
  animation-duration: 2s;
}

@keyframes moveClouds {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-2000px);
  }
}
.loader,
.longfazers,
.clouds {
  position: absolute;
}

.loader {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader {
  filter: drop-shadow(0 0 25px rgba(255, 0, 0, 0.25));
}

.longfazers span {
  opacity: 0.6;
}

.cloud {
  filter: blur(2px);
}




@media (max-width: 900px) {

  .card::after {
    filter: blur(1px) !important;
  }

}














.card-NewCardMain {
  width: 302px;
  max-width: 90vw;
  min-height: 340px;
  padding: 35px 18px;

  position: relative;
  margin: 25px auto 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;

  overflow: hidden;

  border-radius: 18px;

  background: linear-gradient(160deg,
      #0b1c35 0%,
      #07182E 40%,
      #061427 100%);

  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.55),
    0 5px 15px rgba(0, 0, 0, 0.4);
}

/* rotating animated border */
.card-NewCardMain::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200%;

  background: conic-gradient(from 0deg,
      #4e1e76 0deg 40deg,
      transparent 40deg 120deg,
      #26ae9c 120deg 170deg,
      transparent 170deg 260deg,
      #6722b1 260deg 300deg,
      transparent 300deg 360deg);

  filter: blur(60px) contrast(105%) brightness(90%);

  animation: rotBGimg 18s linear infinite;
  z-index: 0;
}

/* inner panel */
.card-NewCardMain::after {
  content: '';
  position: absolute;
  inset: 3px;

  border-radius: 15px;


  background:
    /* dark dim overlay */
    linear-gradient(rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.65)),

    /* zoomed + shifted image   4 7 9 10   11 sometimes*/
    var(--dynamic-card-bg) 50% 70% / 160% auto no-repeat,

    /* subtle dust */
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),

    /* base */
    linear-gradient(160deg,
      #0b0d12 0%,
      #06080d 50%,
      #030407 100%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -30px 60px rgba(0, 0, 0, 0.75);

  z-index: 1;
}

/* content above layers */
.card-NewCardMain>* {
  position: relative;
  z-index: 2;
}









/*TOOL TIP TOP CORNER FOR CONTACT FOLLOW EMAIL*/

.button-box-supportTool {
  position: relative;
  transform: scale(0.82);
  width: 12rem;
  height: 5rem;
  display: flex;
}

.button-box-supportTool .button-supportTool {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  cursor: pointer;
  border: 3px solid #311703;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  opacity: 0.75;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

.button-box-supportTool .button-supportTool .icon-supportTool {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: 0.25s;
}

.button-box-supportTool .button-supportTool:nth-child(4) {
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 30;
  background: #07695a;
}

.button-box-supportTool .button-supportTool:nth-child(5) {
  transform: translate(-50%, -50%) rotate(-115deg);
  z-index: 40;
  background: #8b056a;
}

.button-box-supportTool .button-supportTool:nth-child(6) {
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 50;
  background: #3b2471;
}

.button-box-supportTool .button-supportTool:nth-child(6) .icon-supportTool {
  animation: active 2.2s linear infinite;
}


.button-box-supportTool:hover .button-supportTool:nth-child(6) .icon-supportTool {
  animation: active 4s linear infinite;
}

@keyframes active {
  to {
    transform: rotate(360deg);
  }
}

/* === Support Tool Fixed Top Right === */
.button-box-supportTool {
  position: fixed;
  top: 50px;
  right: 1%;
  left: auto;
  z-index: 9997;
}

/* === Hover Data Labels (Fixed for your structure) === */
.button-box-supportTool .button-supportTool::after {
  content: attr(data-label);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.button-box-supportTool .touch-supportTool.left:hover~.button-supportTool:nth-child(4)::after {
  opacity: 1;
  transform: translateX(-120%) translateY(-40px) rotate(90deg);
}


/* RIGHT */
.button-box-supportTool .touch-supportTool.right:hover~.button-supportTool:nth-child(5)::after {
  opacity: 1;
  transform: translateX(30%) translateY(-40px) rotate(-90deg);
}

/* MIDDLE */
.button-box-supportTool .touch-supportTool.middle:hover~.button-supportTool:nth-child(6)::after {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* Hidden by default */
.button-box-supportTool {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

/* Visible state */
.button-box-supportTool.show-supportTool {
  opacity: 1;
  visibility: visible;
}


.button-box-supportTool .button-supportTool:nth-child(4) {
  z-index: 70;
}
.button-box-supportTool .button-supportTool:nth-child(5) {
  z-index: 71;
}
.button-box-supportTool .button-supportTool:nth-child(6) {
  z-index: 72;
}
.button-box-supportTool:hover .button-supportTool:nth-child(4) {
  transform: translate(-170%, -50%) rotate(-90deg);
}

.button-box-supportTool:hover .button-supportTool:nth-child(5) {
  transform: translate(70%, -50%) rotate(90deg);
}

.button-box-supportTool:hover .button-supportTool:nth-child(6) {
  transform: translate(-50%, -50%) rotate(0deg);
}

.button-supportTool:nth-child(4):hover::after {
  opacity: 1;
  transform: translateX(-120%) translateY(-40px) rotate(90deg);
}

.button-supportTool:nth-child(5):hover::after {
  opacity: 1;
  transform: translateX(30%) translateY(-40px) rotate(-90deg);
}

.button-supportTool:nth-child(6):hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}







































/* smoother border animation */
@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* subtle hover depth (desktop only) */
@media (hover: hover) {
  .card-NewCardMain:hover {
    transform: translateY(-6px);
    transition: transform 0.4s ease;
  }
}

/* mobile adjustments */
@media (max-width: 900px) {
  .card-NewCardMain {
    width: 305px;
    min-height: 280px;
    margin: -10% auto 0 auto;
  }
}




@media (max-width: 768px) {
  .card2 {
    top: 21rem;
  }

  .container-h1 {
    top: 8%;
  }

  .button-box-supportTool {
    transform: scale(0.62);
    transform-origin: top right;
    right: -5px;
    top: 18px;
    left: 51%;
  }
}











/* ================================
   Upload Cancel Icon (Refined)
================================ */

.upload-cancel {
  position: absolute;
  top: 32px;
  /* aligns with SELECT FILES */
  right: 24px;
  /* inside card padding */
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 600;

  color: #ff4d6d;
  background: rgba(255, 77, 109, 0.08);

  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 50%;

  backdrop-filter: blur(6px);

  cursor: pointer;

  opacity: 0;
  transform: scale(0.85);
  transition: all 0.25s ease;

  z-index: 20;
}

.upload-cancel.visible {
  opacity: 1;
  transform: scale(1);
}

.upload-cancel.hidden {
  display: none;
}

.upload-cancel:hover {
  background: rgba(255, 77, 109, 0.18);
  border-color: rgba(255, 77, 109, 0.5);
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 77, 109, 0.4);
}

.upload-cancel:active {
  transform: scale(0.92);
}






















.SEND-ButtonNew {
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cyberpunk";
  cursor: pointer;
  padding: 0.8em 1.3em 0.8em 0.9em;
  color: white;
  gap: 5px;

  /* Deep premium gradient */
  background: linear-gradient(135deg,
      #0f0c29 0%,
      #1e1b4b 35%,
      #302b63 65%,
      #24243e 100%);

  border-radius: 16px;

  /* subtle outer border */
  border: 1px solid rgba(255, 255, 255, 0.06);

  /* layered glow + depth */
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.75),
    /* depth */
    0 0 0 1px rgba(255, 255, 255, 0.02),
    /* crisp edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    /* top inner highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.7);
  /* bottom inner shadow */

  transition:
    box-shadow .35s ease,
    transform .35s ease,
    background .35s ease;
}

.SEND-ButtonNew:hover {
  background: linear-gradient(135deg,
      #0b0920 0%,
      #17153a 35%,
      #1f1c45 65%,
      #15152c 100%);

  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.9),
    /* deeper drop shadow */
    0 0 0 1px rgba(255, 255, 255, 0.04),
    /* crisp edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8);
  /* stronger bottom inner shadow */
}

.SEND-ButtonNew::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(120% 100% at 50% 0%,
      rgba(255, 255, 255, 0.06),
      transparent 60%);
  pointer-events: none;
}

.SEND-ButtonNew {
  position: relative;
  overflow: hidden;
}


.SEND-ButtonNew svg {
  transform: rotate(30deg);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.SEND-ButtonNew span {
  align-items: center;
  font-weight: normal;
  font-size: 21px;
  letter-spacing: 4px;
  font-family: "Blacked";
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.SEND-ButtonNew:hover svg {
  transform: translateX(5px) rotate(90deg);
}

.SEND-ButtonNew:hover span {
  transform: translateX(7px);
}























/* ERROR POPUP V2 */

.card-ErrorPop {
  min-width: 340px;
  max-width: 420px;
  padding: 22px 24px;
  border-radius: 16px;
  box-sizing: border-box;

  background:
    linear-gradient(145deg, #0f0f12, #16161c);

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 1001;

  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);

  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 30px;
  /* space for report button */
  overflow: hidden;
}

.card-ErrorPop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.wave-ErrorPop {
  position: absolute;
  transform: rotate(90deg);
  left: -43px;
  width: 110px;
  min-height: 100px;
  height: auto;
  fill: #760000;
}

.icon-container-ErrorPop {
  width: 48px;
  height: 48px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 14px;

  background:
    radial-gradient(circle at 30% 30%, #ff2d2d33, transparent 70%),
    linear-gradient(145deg, #1c1c22, #121217);

  border: 1px solid rgba(255, 0, 0, 0.15);

  box-shadow:
    0 8px 25px rgba(255, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.icon-ErrorPop {
  width: 20px;
  height: 20px;
  color: #ff3b3b;
}

.message-text-container-ErrorPop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-grow: 1;
}

.message-text-ErrorPop,
.sub-text-ErrorPop {
  margin: 0;
  cursor: default;
}

.message-text-ErrorPop {
  margin-bottom: 1%;
  margin-left: 1%;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.4px;

  color: #ff4d4d;

  margin: 0;
}

.sub-text-ErrorPop {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-top: 6px;
}

.cross-icon-ErrorPop {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 18px;
  height: 18px;

  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;

  transition: all .25s ease;
}

.cross-icon-ErrorPop:hover {
  color: #ffffff;
  transform: scale(1.1);
}

.error-report-btn {
  position: absolute;
  top: 80%;
  bottom: 4px;
  right: 18px;

  background: none;
  border: none;

  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;

  color: rgba(255, 255, 255, 0.5);

  cursor: pointer;

  padding: 2px 4px;
  border-radius: 6px;

  transition: all .25s ease;
}

.error-report-btn:hover {
  color: #ff5c5c;
  background: rgba(255, 0, 0, 0.08);
}










/* SUCCESS POPUP V2 */

.card-SuccessPop {
  min-width: 340px;
  max-width: 420px;
  padding: 22px 24px;
  border-radius: 16px;
  box-sizing: border-box;

  background:
    linear-gradient(145deg, #0f0f12, #16161c);

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 1001;

  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);

  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 30px;
  /* space for report button */
  overflow: hidden;
}

.card-SuccessPop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.wave-SuccessPop {
  position: absolute;
  transform: rotate(90deg);
  left: -43px;
  width: 110px;
  min-height: 100px;
  height: auto;
  fill: #007a2f; /* green wave */
}

.icon-container-SuccessPop {
  width: 48px;
  height: 48px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 14px;
    
  background:
    radial-gradient(circle at 30% 30%, #00ff8840, transparent 70%),
    linear-gradient(145deg, #1c1c22, #121217);

  border: 1px solid rgba(0, 255, 120, 0.2);

  box-shadow:
    0 8px 25px rgba(0, 255, 120, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.icon-SuccessPop {
  width: 20px;
  height: 20px;
  color: #00ff88;
}

.message-text-container-SuccessPop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-grow: 1;
}

.message-text-SuccessPop,
.sub-text-SuccessPop {
  margin: 0;
  cursor: default;
}

.message-text-SuccessPop {
  margin-bottom: 1%;
  margin-left: 1%;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #00ff88;
  margin: 0;
}

.sub-text-SuccessPop {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-top: 6px;
}

.cross-icon-SuccessPop {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 18px;
  height: 18px;

  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;

  transition: all .25s ease;
}

.cross-icon-SuccessPop:hover {
  color: #ffffff;
  transform: scale(1.1);
}



@media (max-width: 440px) {
    .card-ErrorPop.show {
      transform: translate(-50%, -50%) scale(0.85);
    }
    
    .card-SuccessPop.show {
      transform: translate(-50%, -50%) scale(0.85);
    }
}





































.three-body {
  position: fixed;
  top: 48%;
  left: 48.8%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 99999;

  --uib-size: 55px;
  --uib-speed: 0.8s;
  --uib-color: #bcbcbc;

  height: var(--uib-size);
  width: var(--uib-size);

  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* Visible State */
.three-body.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.three-body__dot {
 position: fixed;
 height: 100%;
 width: 30%;
}

.three-body__dot:after {
 content: '';
 position: fixed;
 height: 0%;
 width: 100%;
 padding-bottom: 100%;
 background-color: var(--uib-color);
 border-radius: 50%;
}

.three-body__dot:nth-child(1) {
 bottom: 5%;
 left: 0;
 transform: rotate(60deg);
 transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite ease-in-out;
 animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
 bottom: 5%;
 right: 0;
 transform: rotate(-60deg);
 transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
 bottom: 0;
 left: 0;
 animation: wobble1 var(--uib-speed) infinite
    calc(var(--uib-speed) * -0.15) ease-in-out;
}

.three-body__dot:nth-child(3) {
 bottom: -5%;
 left: 0;
 transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
 top: 0;
 left: 0;
 animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
 0% {
  transform: rotate(0deg);
 }

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

@keyframes wobble1 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }

 50% {
  transform: translateY(-66%) scale(0.65);
  opacity: 0.8;
 }
}

@keyframes wobble2 {
 0%,
  100% {
  transform: translateY(0%) scale(1);
  opacity: 1;
 }

 50% {
  transform: translateY(66%) scale(0.65);
  opacity: 0.8;
 }
}

/* Default (Desktop) – keep your radial vibe */
.cool-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;

  backdrop-filter: blur(0px);
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.45) 15%,
    rgba(0,0,0,0.25) 35%,
    rgba(0,0,0,0.1) 55%,
    rgba(0,0,0,0.02) 70%,
    transparent 85%
  );

  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    backdrop-filter 0.45s ease;
}

.cool-loader-overlay.active {
  opacity: 1;
  transform: scale(1);
  backdrop-filter: blur(6px);
}


/* 📱 Mobile & iPad Override */
@media (max-width: 1024px) {

  .cool-loader-overlay {
    background: rgba(0,0,0,0.65); /* full overlay */
    transform: none;              /* remove scale */
  }

  .cool-loader-overlay.active {
    transform: none;
    backdrop-filter: blur(4px);   /* slightly lighter blur for performance */
  }
}

@media (max-width: 400px) {
    .three-body {
      left: 40.8%;
  }
}











/* =========================
   BACKGROUND VIDEO SYSTEM
========================= */

.zt-bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  object-fit: cover;
  object-position: center;

  z-index: 0;

  opacity: 0; /* start hidden */

  transform: scale(var(--zt-video-zoom, 1.85));
  transition:
    opacity 1.4s ease,
    transform 1.2s ease,
    filter 0.8s ease;

  filter:
    brightness(var(--zt-video-brightness, 0.21))
    contrast(var(--zt-video-contrast, 1.1))
    saturate(var(--zt-video-saturation, 1.05));

  pointer-events: none;
  will-change: opacity, transform, filter;
}

/* Fade-in active state */
.zt-bg-video.visible {
  opacity: 1;
}

body.video-loading {
  background: #000 !important;
}

/* =========================
   CINEMATIC EDGE DARKEN
========================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1; /* above video, below UI */

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.25) 55%,
      rgba(0,0,0,0.55) 80%,
      rgba(0,0,0,0.85) 100%
    );

  mix-blend-mode: multiply;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.6) 0%,
      rgba(0,0,0,0.15) 20%,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0) 65%,
      rgba(0,0,0,0.15) 80%,
      rgba(0,0,0,0.6) 100%
    );
}

@media (max-width: 768px) {
    .zt-bg-video {
      transform: scale(var(--zt-video-zoom, 1.65));
      filter:
        brightness(var(--zt-video-brightness, 0.23))
        contrast(var(--zt-video-contrast, 1.1))
        saturate(var(--zt-video-saturation, 1.05));
    }
}