body {
    background-attachment: fixed;
    color: white;
    min-height: 100vh;
    background:
    radial-gradient(
      circle farthest-side at -40% 40%,
      #ff9600,
      transparent 50%
    ),
    radial-gradient(
      circle farthest-side at 300% 70%,
      #ff9600, transparent 80%
    ),
        radial-gradient(circle at left bottom, #ff9600, transparent 10%),
    linear-gradient(
      180deg,
      black,
      #210505

    );
    background-attachment: fixed;
    background-size: 150%;
    animation: gradientMove 10s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
*{box-sizing: border-box; border-radius: 2vh;}
header {
  position: relative;
  display: flex;
  backdrop-filter: blur(2vh);
}
#logo {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 10vh;
  max-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vh;
  padding: 1vh;
  font-size: clamp(30px, 3vh, 5rem);
  font-weight: 900;
  background: black;
  border-radius: 2vh;
  overflow: hidden;
  font-family: KingsCustom;
}
#logo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -40%;
  
  width: 40%;
  height: 0.8vh;
  
  background: linear-gradient(90deg,
      transparent 0%,
      #ff9600 50%,
      transparent 100%);
  
  animation: borderSlide 3s ease-in-out infinite;
}
@keyframes borderSlide {
  0% {
    transform: translateX(0);
  }
  
  50% {
    transform: translateX(310%);
  }
  
  100% {
    transform: translateX(0);
  }
}
#logo span::after {
  content: "Forex lONERS ";
  animation: type1 .8s ease alternate;
}
@keyframes type1 {
  0% {content: 'F';}
  10% {content: 'Fo';}
  20% {content: 'For';}
  30% {content: 'Fore';}
  40% {content: 'Forex ';}
  50% {content: 'Forex l';}
  60% {content: 'Forex lO';}
  70% {content: 'Forex lON';}
  80% {content: 'Forex lONE';}
  90% {content: 'Forex lONER';}
  100% {content: 'Forex lONERS';}
  
}
#logo img {
    height: 100%;
    border-radius: 50%;
}
#brief {
  position: relative; 
  margin-top: 12vh;
  width: 100%;
  height: 30vh;
  padding: 2vh;
  overflow: hidden; 
  background: #111;
  font-family: PlayfairCustomItalic;
}
#brief::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    transparent,
    #ff9600,
    transparent 30%
  );
  animation: rotate 4s linear infinite;
  z-index: 1;
}
#brief::after {
  content: "";
  position: absolute;
  inset: 0.7vh;
  background: linear-gradient(135deg, #161618bd, black);
  z-index: 2;
  border-radius: 1.5vh;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#brief > * {
  position: relative;
  z-index: 3;
}
#brief span:nth-child(1) {
    position: absolute;
    align-self: flex-start;
    margin: auto;
    width: 50%;
    font-size: clamp(20px, 2vh, 3rem);
    font-weight: 600;
    line-height: 1.5;
}
#brief span:nth-child(2) {
    position: absolute;
    align-self: flex-start;
    margin: auto;
    width: 50%;
    font-size: clamp(1rem, 3vh, 2rem);
    font-weight: 600;
    bottom: 2vh;
    left: 5vh;
}
#brief div {
    position: absolute;
    width: 15vh;
    height: 15vh;
    right: 2vh;
    bottom: 2vh;
    background-blend-mode: lighten;
}
#brief div img {
    width: 100%;
    border-radius: 3vh;
    animation: bounce 3s ease infinite;
}
@keyframes bounce {
  0% {transform: translateY(1vh);}
  50% {transform: translateY(0);}
  100% {transform: translateY(1vh);}
}
/*doc {
    display: flex;
    width: 100%;
    height: 30vh;
    max-height: 50vh;
    overflow: hidden;
}
#doc.fieldset {
    width: 100%;
    border: none;
}
#doc div {
    display: flex;
}
.fieldset {
    position: relative;
    max-width: 100%;
    margin-top: 2vh;
    max-height: 30vh;
    background: transparent ;
    overflow: hidden;
}
.fieldset div {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
.fieldset div div {
    width: 100%;
    overflow: hidden;
}

.docImage {
    position: absolute;
    width: 40%;
    height: 100%;
    z-index: -2;
}
#fieldbg {
    position: absolute;
    right: -3vh;
    top: -20vh;
    width: 200%;
    height: 500%;
    background: black;
    z-index: -7;
}*/

#doc,
#doc-images {
  width: 100%;
  overflow: hidden;
}

.fieldset,
.document-container,
.image-wrapper {
  position: relative;
}

#fieldbg {
  position: absolute;
  right: -3vh;
  top: -20vh;
  width: 200%;
  height: 500%;
  background: black;
  z-index: -7;
}

.docImage {
  width: 40%;
  height: auto;
}
summary {
  border-top: 3px solid #ff9600;
  border-bottom: 1vh solid #ff9600;
  align-items: center;
  margin-top: 3vh;
  margin-bottom: 3vh;
  padding: 1vh;
  font-family: PlayfairCustom;
}
pre {
  text-align: center;
  overflow: auto;
  max-height: 50vh;
  font-family: PlayfairCustomitalic;
}
.images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  max-width: 100%;
  gap: 5vh;
}
#images img {
  width: 100%;
}
svg {
  fill: white;
  width: 5vh;
}
@font-face {
    font-family: 'KingsCustom'; 
    src: url('../Font/Kings/Kings-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MeaCulpaCustom';
    src: url('../Font/Mea_Culpa/MeaCulpa-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'MetamorphCustom';
  src: url('../Font/Metamorphous/../Font/Metamorphous/Metamorphous-Regular.ttf');
}
@font-face {
  font-family: 'PacificoCustom';
  src: url('../Font/Pacifico/Pacifico-Regular.ttf')
}
@font-face {
  font-family: 'MacondoCustom';
  src: url('../Font/Macondo/Macondo-Regular.ttf');
}
@font-face {
  font-family: 'PlayfairCustomItalic';
  src: url('../Font/Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'PlayfairCustom';
  src: url('../Font/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'PlaywriteCustom';
  src: url('../Font/Playwrite_NZ_Basic/PlaywriteNZBasic-VariableFont_wght.ttf');
}
aside {
  display: flex;
  position: absolute;
  flex-direction: column;
  z-index: 2000;
  right: 2vh;
  top: 7vh;
  background: hsla(235, 100%, 0%, .8);
  line-height: 2.3;
  padding: 2vh;
  align-items: center;
  font-family: PlaywriteCustom;
  transition: 1s ease;
}
#aside {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateX(20px);
  display: flex; 
}

#aside.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

a {
  text-decoration: none;
  color: #ff9600;
}
footer {
  background: linear-gradient(135deg, #201E1EFC, #060606);
  min-height: 20vh;
  width: 100%;
}
footer > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px;
}
footer div div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  background: black;
  overflow: hidden;
}
footer div div::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    transparent,
    #ff9600,
    transparent 50%
  );
  animation: rotate 4s linear infinite;
  z-index: 1;
}
footer div div::after {
  content: "";
  position: absolute;
  inset: 0.7vh; /* Adjust this for border thickness */
  background: #201E1E;
  z-index: 2;
  border-radius: 50%;
}
footer div div svg {
  position: relative;
  z-index: 5;
  width: 80%;
  height: 80%;
  fill: white;
  display: block;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.reveal, img {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.show, img.show {
  opacity: 1;
  transform: translateY(0);
}
.reveal:hover, img:hover {
  transform: translateY(-1vh);
}