@font-face {
  font-family: neon;
  src: url("neoneon.otf");
}

@font-face {
  font-family: RobotoC;
  src: url("RobotoCondensed.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* --neon-blue: #510CEF; */
  --neon-blue: #007dff;
  --neon-yellow: #f3fe00;
  --neon-red: #e30f3a;
  --bg-color-high: #252844;
  --bg-color-low: #171824;
  --font-color: white; /*#a6a6a6;*/
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color-low);
  font-family: RobotoC, sans-serif;
  font-size: 18px;
  color: var(--font-color);
  /*background-image: url("../images/bgbar.jpg");*/
  background-size: cover;
}

a,
i {
  transition: all 0.3s ease-in-out;
}

a,
a:visited {
  text-decoration: none;
  color: var(--font-color);
}
a:hover {
  text-decoration: none;
}

/**********/
/* HEADER */
/**********/

.upper-menu {
  position: fixed;
  z-index: 850;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: var(--bg-color-high);
  background-image: linear-gradient(
    180deg,
    var(--bg-color-high) 0%,
    #1b1d33 100%
  );
  transition: top 0.3s ease-in-out;
}

.upper-menu.hide {
  top: -8rem;
}

.upper-menu .h-logo img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.upper-menu .title {
  color: #c6e2ff;
  font-family: neon;
  font-size: 40px;
  padding: 0.2em;
  line-height: 1;
}

.upper-menu .menu-item {
  font-size: 25px;
  font-family: RobotoC, sans-serif;
  color: var(--font-color);
  box-shadow: none;
  border: 0;
  text-decoration: none;
  padding: 0.5em 1em;
}

.upper-menu .menu-item:hover,
.upper-menu .menu-item.active {
  box-shadow: none;
  border: 0;
  color: #dfdfdf;
  text-shadow: 0 0 15px var(--neon-blue), 0 0 23px var(--neon-blue),
    0 0 36px var(--neon-blue);
}

.header-parallax-container {
  height: 680px;
  position: relative;
  overflow: hidden;
}

.header-parallax-container .bg {
  position: absolute;
  z-index: 1;
  top: -100px;
  left: 0;
  width: 100%;
  height: 120%;
}

.circle {
  position: relative;
  width: 200px;
  height: 200px;
}

.circle-bg {
  position: absolute;
  top: 27px;
  width: 100%;
  height: 180px;
  border-radius: 0 0 50% 50%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  transform: scale(1.3);
}

.border-one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px var(--neon-blue));
  overflow: hidden;
  animation: rotate 6s linear infinite;
}

.border-one::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 90%;
  height: 100%;
  background: linear-gradient(0deg, var(--neon-blue), var(--neon-blue));
}
.border-one::after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 90%;
  height: 100%;
  background: linear-gradient(0deg, transparent, transparent, var(--neon-blue));
}

.border-two {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px var(--neon-yellow));
  overflow: hidden;
  animation: rotate 6s linear infinite;
  animation-delay: -6s;
}

.border-two::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 90%;
  height: 100%;
  background: linear-gradient(
    0deg,
    var(--neon-yellow),
    transparent,
    transparent
  );
}
.border-two::after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -50%;
  width: 90%;
  height: 100%;
  background: linear-gradient(0deg, var(--neon-yellow), var(--neon-yellow));
}

/* Let's create animation */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.content {
  position: absolute;
  padding: 0px;
  inset: 2px;
  background-color: #0c0a3e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.content img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.title {
  margin: 0;
}

.neon {
  font-family: neon;
  font-size: 100px;
  color: #c6e2ff;
  text-align: center;
  padding-top: 0.2em;
}

@media (max-width: 767px) {
  .neon {
    font-size: 4rem;
  }
}

.neon-effect {
  margin: 0;
  font-weight: normal;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff,
    0 0 15px var(--neon-blue), 0 0 23px var(--neon-blue);
  animation: pulsate 0.8s infinite alternate;
}

@keyframes pulsate {
  0% {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff,
      0 0 15px var(--neon-blue), 0 0 23px var(--neon-blue);
  }

  100% {
    text-shadow: 0 0 5px #fff, 0 0 9px #fff, 0 0 18px #fff,
      0 0 36px var(--neon-blue), 0 0 49px var(--neon-blue);
  }
}

.intro {
  color: var(--font-color);
  font-size: 24px;
  padding: 1em;
  background-color: color-mix(in srgb, var(--bg-color-high) 100%, transparent);
}

/* MAIN-MENU-2 */
.menu-toggler {
  padding: 0.5em 1em;
  font-size: 1.2rem;
  color: white;
}

.main-menu2 {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
  transition: top 0.3s ease-in-out;
}

.main-menu2.hide {
  top: -500px;
}

.main-menu2 .title {
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  backdrop-filter: blur(3px);
}

.main-menu2 .menu-items {
  max-width: 900px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.4);
  border: 0px solid red;
  padding: 1em 1em;
  backdrop-filter: blur(3px);
}

.main-menu2 .menu-item {
  font-family: neon;
  font-size: 30px;
  text-align: center;
  padding: 0.5em 1em;
  text-decoration: none;
}

@media (max-width: 991px) {
  .main-menu2 .menu-item {
    font-size: 25px;
  }
  .main-menu2 .menu-items {
    max-width: 800px;
  }
}


.main-menu2 .menu-item:hover,
.main-menu2 .menu-item.active,
#menuModal .menu-item:hover,
#menuModal .menu-item.active {
  color: #dfdfdf;
  text-decoration: none;
  text-shadow: 0 0 15px var(--neon-blue), 0 0 23px var(--neon-blue),
    0 0 36px var(--neon-blue);
}

/* MAIN-MENU-2 END*/

/* MENU MODAL */

#menuModal .modal-header {
  border: 0;
}

#menuModal .modal-content {
  background-color: color-mix(in srgb, var(--bg-color-high) 100%, transparent);
  background-image: linear-gradient(
    180deg,
    var(--bg-color-low) 0%,
    var(--bg-color-high) 100%
  );
  border: 2px solid var(--bg-color-high);
  color: white;
}

#menuModal .menu-item {
  font-family: neon;
  font-size: 30px;
  text-align: center;
  padding: 0.5em 1em;
  text-decoration: none;
  border-bottom: 2px solid var(--bg-color-high);
}

#menuModal .btn-close {
  background-color: white;
}

/* MENU MODAL END */

/***********/
/* CONTENT */
/***********/

section.main {
  background-color: color-mix(in srgb, var(--bg-color-low) 90%, transparent);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

section.stained-glass {
  background-color: var(--bg-color-high);
  padding: 2em 0;
}

section.stars {
  background-color: var(--bg-color-high);
}

.description-left {
  background-color: var(--bg-color-high);
  padding: 3em;
  padding-right: 6em;
  line-height: 1.8;
}

.description-right {
  background-color: var(--bg-color-high);
  padding: 3em;
  padding-left: 6em;
  line-height: 1.8;
}

.parallax-container {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  width: 100%;
  height: 200%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/bg-parallax.jpg") center center/cover no-repeat;
  /*background-size: cover;*/
  z-index: 0;
}

.parallax-bg2 {
  position: absolute;
  width: 100%;
  height: 500%;
  top: -300px;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/bg2-parallax.jpg") center center/cover no-repeat;
  z-index: 0;
}

.parallax-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/parallax-frame2.png") center left no-repeat;
  background-size: contain;
  outline: 10px solid black;
  outline-offset: -10px;
}

.parallax-frame.right {
  background-position: center right;
}

/**********/
/* FOOTER */
/**********/

footer {
  background-color: var(--bg-color-high);
  padding-top: 2em;
}

.f-title {
  color: #7d7d7d;
  font-size: 24px;
}

.f-logo {
  display: flex;
  align-items: center;
}

.f-logo img {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .f-logo img {
    width: 20%;
    margin: 1rem;
  }
}

hr {
  width: 50%;
  height: 2px;
  margin: 1em 0;
  background-color: #7d7d7d;
  border: none;
  opacity: 1;
}

.socials i {
  margin: 0.5em 0.2em;
}

footer .socials a:hover i {
  color: var(--neon-blue);
  transform: scale(1.2);
}

/******************
 * STARS COMPONENT
 ******************/

section.stars {
  position: relative;
  background-color: var(--bg-color-low);
  padding: 2em 0;
}

.stars-container {
  height: 2em;
}

.stars-component {
  position: relative;
  padding: 1.5rem 2rem;
}

.stars-component.yellow i {
  color: var(--neon-yellow);
}

.stars-component.blue i {
  color: var(--neon-blue);
}

.stars-component i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 5px rgba(0, 0, 0, 1),
    0px 0px 5px rgba(0, 0, 0, 1);
}

.stars-component i.star1 {
  top: 0;
  left: 0;
}

.stars-component i.star2 {
  top: 0;
  left: 2em;
}

.stars-component i.star1 {
  top: 1em;
  left: 1em;
}

/******************
 * MAP COMPONENT
 ******************/
.map-container {
  height: 50vh;
}