/*Import Global Compulsory CSS Files*/

@import url(app.css);

@import url(blocks.css);

/*Import CSS Plugins*/

@import url(plugins/style-switcher.css);

:root {
  --bg: #0a0a0f;
  --card: #13131a;
  --border: #1e1e2e;
  --text: #e8e8f0;
  --muted: #5a5a7a;
  --accent1: #ff3c6f;
  --accent2: #00d9ff;
  --accent3: #7c3aed;
  --accent4: #f59e0b;
  --accent5: #10b981;
  --accent6: #d8fa5b;
}

* {
  border-radius: 0;
}

body {
  color: #333;
  font-size: 13px;
  line-height: 1.6;
}

body.header-fixed-space {
  padding-top: 94px;
}

body.header-fixed-space-v2 {
  padding-top: 135px;
}

@media (max-width: 991px) {
  body.header-fixed-space,
  body.header-fixed-space-v2 {
    padding-top: 0;
  }
}

p,
li,
li a,
label {
  color: #555;
}

a {
  color: #72c02c;

  text-decoration: none;
}

a,
a:focus,
a:hover,
a:active,
button,
button:hover {
  outline: 0 !important;
}

a:focus {
  text-decoration: none;
}

a:hover {
  color: #72c02c;

  text-decoration: underline;
}

/*Boxed Layout

------------------------------------*/

.wrapper {
  background: #fff;
}

.boxed-layout {
  padding: 0;

  box-shadow: 0 0 5px #ccc;

  margin-left: auto !important;

  margin-right: auto !important;

  background: url(../img/patterns/15.png) repeat;
}

/*Hiding arrows for select field in IE*/

select::-ms-expand {
  display: none;
}

.particles-js {
  width: 100%;

  height: 100%;

  background-image: url("");

  background-size: cover;

  background-position: 50% 50%;

  background-repeat: no-repeat;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0053a3+1,336ba0+100 */

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0053a3+1,0fa6c4+100 */

  background: rgb(0, 83, 163); /* Old browsers */

  background: -moz-linear-gradient(
    top,
    rgba(0, 83, 163, 1) 1%,
    rgba(15, 166, 196, 1) 100%
  ); /* FF3.6-15 */

  background: -webkit-linear-gradient(
    top,
    rgba(0, 83, 163, 1) 1%,
    rgba(15, 166, 196, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */

  background: linear-gradient(
    to bottom,
    rgba(0, 83, 163, 1) 1%,
    rgba(15, 166, 196, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0053a3', endColorstr='#0fa6c4',GradientType=0 ); /* IE6-9 */
}

#about-me {
  overflow: hidden;
  position: relative;
}

.vd-bg {
  right: -70px;
  bottom: -150px;
  position: absolute;
}

.vd-bg video {
  width: 100%;
  margin-bottom: 20px;
  max-width: 1500px;
  height: calc(100% - 120px);
  max-height: 1080px;
}

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /* change if the mask should have another color then white */
  z-index: 9999;
  /* makes sure it stays on top */
  background: rgb(0, 83, 163);
  background: -moz-linear-gradient( top, rgba(0, 83, 163, 1) 1%, rgba(15, 166, 196, 1) 100% );
  background: -webkit-linear-gradient(top, rgba(0, 83, 163, 1) 1%, rgba(15, 166, 196, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 83, 163, 1) 1%, rgba(15, 166, 196, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0053a3', endColorstr='#0fa6c4',GradientType=0 );
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

/* ─── 13. CUBE 3D ─── */
  .cube-scene {
    perspective: 300px;
    width: 50px;
    height: 50px;
    margin: auto;
    align-items: center;
  }
  .cube {
    width: 50px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    animation: cube-rotate 3s linear infinite;
  }
  .cube-face {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 2px solid var(--accent6);
    opacity: 0.85;
  }
  .cube-face.front  { transform: translateZ(25px); background: rgba(216,250,91,0.15); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(25px); background: rgba(216,250,91,0.1); }
  .cube-face.right  { transform: rotateY(90deg) translateZ(25px); background: rgba(216,250,91,0.12); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(25px); background: rgba(216,250,91,0.1); }
  .cube-face.top    { transform: rotateX(90deg) translateZ(25px); background: rgba(216,250,91,0.2); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(25px); background: rgba(216,250,91,0.1); }
  @keyframes cube-rotate {
    from { transform: rotateX(-25deg) rotateY(0deg); }
    to { transform: rotateX(-25deg) rotateY(360deg); }
  }

  /* ─── 7. GLITCH LOADER ─── */
  .glitch-wrap {
    position: relative;
    font-family: 'Space Mono', monospace;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    animation: glitch-main 2s infinite;
    margin: auto;
    position: absolute;
    width: 72px;
    height: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 130px;
  }
  .glitch-wrap::before {
    content: 'LOADING';
    position: absolute;
    top: 0; left: 0;
    color: var(--accent1);
    animation: glitch-1 2s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
  }
  .glitch-wrap::after {
    content: 'LOADING';
    position: absolute;
    top: 0; left: 0;
    color: var(--accent6);
    animation: glitch-2 2s infinite;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  }
  @keyframes glitch-main {
    0%,90%,100% { transform: none; }
    92% { transform: skewX(-3deg); }
    94% { transform: skewX(3deg); }
    96% { transform: none; }
  }
  @keyframes glitch-1 {
    0%,90%,100% { transform: none; opacity: 0; }
    92% { transform: translate(-4px, -2px); opacity: 1; }
    94% { transform: translate(4px, 2px); opacity: 1; }
    96% { opacity: 0; }
  }
  @keyframes glitch-2 {
    0%,90%,100% { transform: none; opacity: 0; }
    92% { transform: translate(4px, 2px); opacity: 1; }
    94% { transform: translate(-4px, -2px); opacity: 1; }
    96% { opacity: 0; }
  }