@media (min-width: 992px) {
  .spot::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: var(--bg-blur);
    position: absolute;
  }

  .spot::after {
    width: 100%;
    height: 5px;
    display: inline-block;
    background: #ffde00;
    position: absolute;
    content: "";
  }

  .fixed-header .spot::before {
    background-color: rgb(153, 153, 153, 0.25);
  }
  .fixed-header ul.dropdown-menu,
  .fixed-header ul.dropdown-menu .child-dropdown
  {
    background-color: rgb(255, 255, 255, 0.8);
  }

  .fixed-header ul.dropdown-menu li a {
    color: var(--secondary);
  }
  .d-aware:before,
  .d-aware:after {
    top: -100%;
    left: -100%;
  }

  .spot[class*="-in"]:hover:before,
  .spot[class*="-in"]:hover:after {
    top: 0;
    left: 0;
  }

  .t-in::before,
  .t-in::after {
    top: -100%;
    left: 0;
  }
  .t-in:hover:before,
  .t-in:hover::after {
    animation: tin 0.2s ease;
  }
  .t-out:before,
  .t-out:after {
    animation: tout 0.2s ease;
  }

  .r-in:before,
  .r-in::after {
    top: 0;
    left: 100%;
  }
  .r-in:hover:before,
  .r-in:hover::after {
    animation: rin 0.2s ease;
  }
  .r-out:before,
  .r-out::after {
    animation: rout 0.2s ease;
  }

  .b-in:before,
  .b-in::after {
    top: 100%;
    left: 0;
  }
  .b-in:hover:before,
  .b-in:hover::after {
    animation: bin 0.2s ease;
  }
  .b-out:before,
  .b-out::after {
    animation: bout 0.2s ease;
  }

  .l-in:before,
  .l-in::after {
    top: 0;
    left: -100%;
  }
  .l-in:hover:before,
  .l-in:hover::after {
    animation: lin 0.2s ease;
  }
  .l-out:before,
  .l-out::after {
    animation: lout 0.2s ease;
  }

  .tl-in:before,
  .tl-in::after {
    top: -100%;
    left: -100%;
  }
  .tl-in:hover:before,
  .tl-in:hover::after {
    animation: tlin 0.2s ease;
  }
  .tl-out:before,
  .tl-out::after {
    animation: tlout 0.2s ease;
  }

  .tr-in:before,
  .tr-in::after {
    top: -100%;
    left: 100%;
  }
  .tr-in:hover:before,
  .tr-in:hover::after {
    animation: trin 0.2s ease;
  }
  .tr-out:before,
  .tr-out::after {
    animation: trout 0.2s ease;
  }

  .br-in:before,
  .br-in::after {
    top: 100%;
    left: 100%;
  }
  .br-in:hover:before,
  .br-in:hover::after {
    animation: brin 0.2s ease;
  }
  .br-out:before,
  .br-out::after {
    animation: brout 0.2s ease;
  }

  .bl-in:before,
  .bl-in::after {
    top: 100%;
    left: -100%;
  }
  .bl-in:hover:before,
  .bl-in:hover::after {
    animation: blin 0.2s ease;
  }
  .bl-out:before,
  .bl-out::after {
    animation: blout 0.2s ease;
  }
}

/*left to right*/
@keyframes lin {
  0% {
    top: 0;
    left: -100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes rout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: 100%;
  }
}

/*right to left*/
@keyframes rin {
  0% {
    top: 0;
    left: 100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes lout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 0;
    left: -100%;
  }
}

/*top to bottom*/
@keyframes tin {
  0% {
    top: -100%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes bout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 100%;
    left: 0;
  }
}

/*bottom to top*/
@keyframes bin {
  0% {
    top: 100%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes tout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: -100%;
    left: 0;
  }
}

/*top-left to bottom-right*/
@keyframes tlin {
  0% {
    top: -100%;
    left: -100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes brout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 100%;
    left: 100%;
  }
}

/*bottom-right to top-left*/
@keyframes brin {
  0% {
    top: 100%;
    left: 100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes tlout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: -100%;
    left: -100%;
  }
}

/*top-right to bottom-left*/
@keyframes trin {
  0% {
    top: -100%;
    left: 100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes blout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 100%;
    left: -100%;
  }
}

/*bottom-left to top-right*/
@keyframes blin {
  0% {
    top: 100%;
    left: -100%;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes trout {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: -100%;
    left: 100%;
  }
}