:root{
  --height-notificationshub: 95vh;
}

body {
  line-height: 1.2;
  font-family: "Fira Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  color: #4c4c4c;
}

p, .paragraph {
  font-weight: 400;
  color: #4c4c4c;
  font-size: 15px;
  line-height: 2;
  font-family: "Fira Sans", sans-serif;
}

p-lg, .paragraph-lg {
  font-size: 22px;
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-family: "Fira Sans", serif;
  line-height: 1.2;
}

@media (max-width: 991px) {
  h1, .h1 {
    font-size: 65px;
  }
}

h2, .h2 {
  font-size: 60px;
}

ol,
ul {
  list-style-type: none;
  margin: 0px;
}

img {
  vertical-align: middle;
  border: 0;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a,
button,
select {
  cursor: pointer;
  transition: 0.2s ease;
}
a:focus,
button:focus,
select:focus {
  outline: 0;
}

a.text-dark:hover {
  color: #41228e !important;
}

a:hover {
  color: #41228e;
}

.section {
  padding-top: 80px;
  padding-bottom: 80px;
}
.section-title {
  margin-bottom: 40px;
  font-family: "Fira Sans", serif;
}

.text-light {
  color: #999999 !important;
}

.zindex-1 {
  z-index: 1;
}

.rounded-lg {
  border-radius: 15px;
}

.overflow-hidden {
  overflow: hidden;
}

.font-secondary {
  font-family: "Fira Sans", serif !important;
}

.font-tertiary {
  font-family: "Fira Sans", serif !important;
}

.bg-dark {
  background-color: #222222 !important;
}

.hero-area h1,
.hero-area h2,
.hero-area i {

  color:var(--main-color) !important;
}

.hero-area {
  padding-top: 30vh;
  padding-left: 5vw;
  height: 100vh;
  position: relative;
  background: var(--main-background) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

@media (max-width: 767px) {
  .hero-area {
    padding: 250px 0 150px;
    overflow: hidden;
  }
}

.hero-area img.main-text-image, 
.hero-area li 
{
  position: relative;
  z-index: 2;
}

.dotted-bg-image-open {
  position: absolute;
  left: 0;
  top: -300px;
  z-index: -1;
}

.footer-section {
  padding-top: 100px;
}

.section-on-footer {
  margin-bottom: -250px;
}

.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: rgb(27.5, 40, 65.1);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #7f8787;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #04cdd5;
  border-top-color: #e7e4fe;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

.window {
  height: 100vw;
  container-type: inline-size;
  transform-style: preserve-3d;
  width: 80vw;
  outline: 4px dashed transparent;
  transition: outline 0.5s;
  background-color: transparent;
  position: absolute;
  bottom:0;
  left:20vw;
  z-index: 0;
}

.scene {
  --buff: 65rem;
  height: 100%;
  width: 100%;
  mask:
    linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
    linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
  mask-composite: intersect;
}

@container (width < 900px) {
  
  .scene {
    --buff: 3rem;
    height: 200%;
  }
}

:root:has(#overflow:checked) .scene {
  mask: unset;
}
:root:has(#overflow:checked) .window {
  outline: 4px dashed #db2777;
}
:root:has(#overflow:checked) .header {
  opacity: 0.2;
}

.dev-link {
  width: 48px;
  aspect-ratio: 1;
  position: fixed;
  top: 1rem;
  left: 1rem;
  display: grid;
  place-items: center;
  color: currentColor;
}

.dev-link svg {
  width: 75%;
}

.grid {
  --count: 6; 
  --inset: 0; 
  --outset: 2.5;
  height: 100%;
  width: 100%;
  margin: 0;
  list-style-type: none;
  position: relative;
  display: grid;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
  transition: transform 0.5s;

  transform:
    rotateX(calc(var(--rotate, 0) * 20deg))
    rotateZ(calc(var(--rotate, 0) * -20deg))
    skewX(calc(var(--rotate, 0) * 20deg));
}

:root:has(#dimension:checked) .grid {
  --rotate: 1;
}

.grid li {
  min-height: 60px;
  transform-style: preserve-3d;
  width: 100%;
  z-index: calc(1 + var(--active));
}

.grid {
  transform-style: preserve-3d;
  gap: 1rem;
}

.item {
  align-items: center;
  background: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 90%);
  color: hsl(0 0% 10%);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  height: 100%;
  justify-content: start;
  overflow: hidden;
  padding: 1.25rem;
  text-align: center;
  width: 100%;
  transition: transform var(--transition), scale var(--transition), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;;
  scale: calc(1 + (var(--active, 0) * 0.05));
  transform: translate3d(0, 0, calc(var(--active, 0) * 24px));
}
.item__icon {
  width: 24px;
  color: rgb(124, 58, 237);
}
.item__text {
  flex: 1;
  text-align: center;
}

.grid li:nth-of-type(1) { --index: 0; }
.grid li:nth-of-type(2) { --index: 0; }
.grid li:nth-of-type(3) { --index: 1; }
.grid li:nth-of-type(4) { --index: 1; }
.grid li:nth-of-type(5) { --index: 2; }
.grid li:nth-of-type(6) { --index: 2; }
.grid li:nth-of-type(7) { --index: 3; }
.grid li:nth-of-type(8) { --index: 3; }
.grid li:nth-of-type(9) { --index: 4; }
.grid li:nth-of-type(10) { --index: 4; }
.grid li:nth-of-type(11) { --index: 5; }
.grid li:nth-of-type(12) { --index: 5; }

@media(prefers-reduced-motion: no-preference) {
  .grid {
    gap: 0 2rem;
  }

  .grid li {
    --duration: calc(var(--speed) * 1);
    --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
    animation: slide var(--duration) var(--delay) infinite linear;
    translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
  }

  @keyframes slide {
    100% {
      translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));
    }
  }
}


.notifications{
  position: fixed;
  bottom: -20vh;
  left: 2vw;
  width: 96vw;

  z-index: 15;
}

.activeNotification{
  animation-name: activeNotification;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes activeNotification {
  0%{
    bottom: -20vh;
  }
  5%{
    bottom: 4vh;
  }
  80%{
    bottom: 4vh;
  }
  90%{
    bottom: -20vh;
  }
}

.notificationsHub .container{

  z-index: 1001;
}

.notificationsHub {
    position: fixed;
    top: 100vh;
    right: 0vw;
    width: 100vw;
    height: var(--height-notificationshub);
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.99) 98%,
        rgba(0, 106, 255, 0.95) 2%
    );
    opacity: 1;
    z-index: 9900;
}

.scrollspy-news-items{
    
    height: var(--height-notificationshub);
    overflow-y: scroll;
}

#navbar-news-titles{
    overflow-y: scroll;
}

#navbar-news-titles a{
    width: 90%;
}

.enter-notificationsHub{
    animation-name: enter-from-bottom;
    animation-duration: 0.5s;
    animation-delay: 0.1;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
}

@keyframes enter-from-bottom{
    from{
        top: 100vh;
        opacity: 0;
    }
    to{
        top: calc(100vh - var(--height-notificationshub));
        opacity: 1;
    }
}

.leave-notificationsHub{
    animation-name: leave-from-bottom;
    animation-duration: 0.5s;
    animation-delay: 0.1;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
}

@keyframes leave-from-bottom{
    from{
        top: calc(100vh - var(--height-notificationshub));
        opacity: 1;
    }
    to{
        top: 100vh;
        opacity: 0;
    }
}

#navbar-news-titles{
  height: 80vh !important;
}

@media (max-width: 770px) {

  .hidden-small-screen{
    display: none;
  }

  .show-small-screen{
    display: block;
  }
}

@media (min-width: 771px) {

  .hidden-small-screen{
    display: block;
  }

  .show-small-screen{
    display: none;
  }
}

@media (max-width: 991px) {
  .notificationsHub {
    height: 100vh;
    z-index: 8000;
  }
  .scrollspy-news-items{
    height: 50vh;
  }
  #navbar-news{
    width: 50vw;
  }
  #navbar-news-titles{
    height: 40vh !important;
  }
  #navbar-news-content{
    height: 80vh !important;
    border: 2px black solid;
  }
  iframe{
    width: 267px !important;
  }
  @keyframes enter-from-bottom{
    from{
        top: 100vh;
        opacity: 0;
    }
    to{
        top: 0vh;
        opacity: 1;
    }
  }
  @keyframes leave-from-bottom{
    from{
        top: 0vh;
        opacity: 1;
    }
    to{
        top: 100vh;
        opacity: 0;
    }
  }
}