/*========== FONT LIKED HERE ==========*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/*========== FONT LIKED HERE// ==========*/

/*========== BASIC STYLE ==========*/
:root {
  --bs-body-color: #ff4500;
  --heading-color: #2b2b2b;
  --text-color: #2b2b2b;
  --gray-color: #ddd;

  --bs-primary: #ff4500;
  --bs-primary-rgb: 255, 69, 0;
  --bs-secondary: #ff7f50;
  --bs-warning: #ffd700;

  --bs-gradient: linear-gradient(180deg,
      var(--bs-primary),
      var(--bs-secondary));
  --font-osw: "Oswald", sans-serif;
  --font-ubu: "Ubuntu", sans-serif;
  --container: 1640px;

  scroll-behavior: smooth;
}

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

/* html,
body {
  overflow-x: hidden;
  position: relative;
} */
body {
  font-family: var(--font-ubu);
  font-weight: normal;
  font-style: normal;
  color: var(--text-color);
  font-size: 16px;
}

p {
  line-height: 1.667;
  margin-bottom: 15px;
  font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-osw);
  color: var(--heading-color);
  margin-bottom: 15px;
  font-weight: 700;
  line-height: 1.4;
}

h1 {
  font-size: 130px;
}

h2 {
  font-size: 42px;
}

h3 {
  font-size: 38px;
}

h4 {
  font-size: 30px;
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: 18px;
}

img {
  max-width: 100%;
  transition: 0.3s;
  vertical-align: middle;
}

video {
  max-width: 100%;
}

a {
  text-decoration: none;
}

a:hover {
  color: var(--bs-body-color);
}

a,
button {
  transition: 0.3s ease;
  color: inherit;
  outline: medium none;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

button:focus,
input:focus,
textarea:focus {
  outline: 0;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

*::selection,
*::-moz-selection {
  background: #007acc;
  color: #fff;
  text-shadow: none;
}

/* INPUT, SELECT, TEXTAREA, PLACEHOLDER */
.nice-select,
input,
textarea {
  width: 100%;
  padding: 1.5em;
  padding-left: 2.2em;
  font-size: 16px;
  transition: 0.3s ease;
  border: 1px solid transparent;
  font-weight: 500;
  background: #fff;
  color: #222;
}

input:focus,
textarea:focus {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

::-webkit-input-placeholder,
::-ms-placeholder,
::-moz-placeholder,
::placeholder {
  color: #6e6e6e;
  opacity: 1;
}

::-moz-placeholder,
::placeholder {
  opacity: 1;
}

/*========== BASIC STYLE// ==========*/

/*========== CONTAINER WIDTH ==========*/
.container {
  max-width: var(--container);
}

/*========== CONTAINER WIDTH// ==========*/

/*========== GLOBAL CSS ==========*/
.white-content h1,
.white-content h2,
.white-content h3,
.white-content h4,
.white-content h5,
.white-content h6,
.white-content p {
  color: #fff;
}

.bg-attachment {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--gray-color);
}

.el-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.el-absolute {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  max-height: 100%;
}

.el-absolute.center-center,
.el-absolute.center-right,
.el-absolute.center-left {
  top: 50%;
  transform: translate(0, -50%);
}

.el-absolute.center-center {
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-absolute.top-right,
.el-absolute.bottom-right,
.el-absolute.center-right {
  left: auto;
  right: 0;
}

.el-absolute.bottom-right,
.el-absolute.bottom-left {
  top: auto;
  bottom: 0;
}

.section-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: #000;
  opacity: 0.8;
  transition: 0.3s ease;
  border-radius: inherit;
}

.slick-slider {
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.slick-slide {
  margin-right: calc(var(--bs-gutter-x) * 0.5);
  margin-left: calc(var(--bs-gutter-x) * 0.5);
}

.pulse-btn {
  position: relative;
  z-index: 1;
}

.pulse-btn:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
  border-radius: inherit;
  background-color: var(--bs-body-color);
  opacity: 0.6;
  z-index: -1;
  -webkit-animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
  animation: btnIconRipple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
  pointer-events: none;
}

@keyframes btnIconRipple {
  0% {
    border-width: 4px;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  80% {
    border-width: 1px;
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }

  100% {
    opacity: 0;
  }
}

/* GLOW BTN */

.glowing-btn {
  min-width: 250px;
  height: 50px;
  position: relative;
  font-size: 1.2em;
}

.glowing-btn {
  border-color: transparent;
}

.glowing-btn span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
  font-weight: 400px;
  z-index: 1;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.glowing-btn:hover span {
  letter-spacing: 3px;
}

.glowing-btn span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translate(0);
  transition: 0.5s;
  filter: blur(0px);
}

.glowing-btn:hover a::before {
  transform: skewX(45deg) translate(200px);
}

.glowing-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.glowing-btn:hover::before

/*lightup button*/
  {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: var(--bs-primary);
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0.5;
}

.glowing-btn:hover::after

/*lightup button*/
  {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
}

.glowing-white-btn span {
  background: rgba(255, 255, 255, 0.08);
}

.btn.glowing-btn:active,
.glowing-btn:active {
  border-color: transparent;
}

/*========== GLOBAL CSS// ==========*/

/*========== PRELOADER - COMMENTED OUT ==========*/
/*
.preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #000;
  z-index: 999999;
  transition: 0.3s ease;
}
body.loaded .preloader,
body.loaded .game-loader {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.preloader svg {
  display: none;
}

.blobs {
  filter: url(#goo);
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 70px;
  transform-style: preserve-3d;
}
.blobs .blob-center {
  transform-style: preserve-3d;
  position: absolute;
  background: #fff200;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform-origin: left top;
  transform: scale(0.9) translate(-50%, -50%);
  -webkit-animation: blob-grow linear 3.4s infinite;
  animation: blob-grow linear 3.4s infinite;
  border-radius: 50%;
  box-shadow: 0 -10px 40px -5px #fff200;
}

.blob {
  position: absolute;
  background: #fff200;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-animation: blobs ease-out 3.4s infinite;
  animation: blobs ease-out 3.4s infinite;
  transform: scale(0.9) translate(-50%, -50%);
  transform-origin: center top;
  opacity: 0;
}
.blob:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.blob:nth-child(2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.blob:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.blob:nth-child(4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.blob:nth-child(5) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes blobs {
  0% {
    opacity: 0;
    transform: scale(0) translate(calc(-330px - 50%), -50%);
  }
  1% {
    opacity: 1;
  }
  35%,
  65% {
    opacity: 1;
    transform: scale(0.9) translate(-50%, -50%);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@keyframes blobs {
  0% {
    opacity: 0;
    transform: scale(0) translate(calc(-330px - 50%), -50%);
  }
  1% {
    opacity: 1;
  }
  35%,
  65% {
    opacity: 1;
    transform: scale(0.9) translate(-50%, -50%);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}
@-webkit-keyframes blob-grow {
  0%,
  39% {
    transform: scale(0) translate(-50%, -50%);
  }
  40%,
  42% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }
  43%,
  44% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  45%,
  46% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  47%,
  48% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  52% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  54% {
    transform: scale(1.7, 1.6) translate(-50%, -50%);
  }
  58% {
    transform: scale(1.8, 1.7) translate(-50%, -50%);
  }
  68%,
  70% {
    transform: scale(1.7, 1.5) translate(-50%, -50%);
  }
  78% {
    transform: scale(1.6, 1.4) translate(-50%, -50%);
  }
  80%,
  81% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  82%,
  83% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  84%,
  85% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  86%,
  87% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  90%,
  91% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }
  92%,
  100% {
    transform: scale(0) translate(-50%, -50%);
  }
}
@keyframes blob-grow {
  0%,
  39% {
    transform: scale(0) translate(-50%, -50%);
  }
  40%,
  42% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }
  43%,
  44% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  45%,
  46% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  47%,
  48% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  52% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  54% {
    transform: scale(1.7, 1.6) translate(-50%, -50%);
  }
  58% {
    transform: scale(1.8, 1.7) translate(-50%, -50%);
  }
  68%,
  70% {
    transform: scale(1.7, 1.5) translate(-50%, -50%);
  }
  78% {
    transform: scale(1.6, 1.4) translate(-50%, -50%);
  }
  80%,
  81% {
    transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  82%,
  83% {
    transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  84%,
  85% {
    transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  86%,
  87% {
    transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  90%,
  91% {
    transform: scale(1, 0.9) translate(-50%, -50%);
  }
  92%,
  100% {
    transform: scale(0) translate(-50%, -50%);
  }
}
*/
/*========== PRELOADER - COMMENTED OUT// ==========*/

/*========== HEADER AREA ==========*/
.header-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: 0.3s ease;
  padding: 0.5em 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.header-area.sticky {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  padding: 0.3em 0;
}

.logo img {
  width: 2em;
}

.mainmenu a {
  color: #fff;
  font-weight: 700;
  padding: 0.5em 1em;
  margin: 0 0.5em;
}

.mainmenu a:hover {
  color: var(--bs-primary);
}

/* NAV */
.mainmenu li {
  display: inline-block;
}

/*========== HEADER AREA// ==========*/

/*========== HEADER AREA ==========*/

.parallax-imgs>div {
  width: 20%;
}

.parallax-imgs::before {
  z-index: 2;
}

.features {
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0%, -50%);
  z-index: 3;
}

.card {
  --bs-card-spacer-y: 3em;
  --bs-card-border-radius: 1.2em;
  --bs-card-border-color: #4e4e4e;
  --bs-card-border-width: 0px;
  --bs-card-bg: transparent;
  position: relative;
  z-index: 1;
  transition: 0.3s ease;
  width: 100%;
}

.card:hover {
  transform: scale(1.05);
  z-index: 2;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.feature-item {
  z-index: 1;
  position: relative;
}

.feature-item:hover {
  z-index: 2;
}

.card::before {
  opacity: 0;
}

.card:hover::before {
  opacity: 0.5;
  backdrop-filter: blur(5px);
}

.card h3,
.card h2 {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transition: 0.3s ease;
}

.card:hover h2 {
  scale: 1.1;
}

.system-img {
  padding-top: 100%;
}

/* system */
/* .system {
  width: 50%;
  position: absolute;
  z-index: 8;
  top: 50vh;
  left: 50%;
  transform: translate(0%, -50%);
} */

/* ANIMATION */
.climate-content,
.system-tabs,
.system-list,
.system-list-item,
.feature-tabs,
.features,
.globe,
.hero-text {
  transition: 0.7s ease;
}

.hero-content {
  position: relative;
  z-index: 1;
  height: calc(100vh - var(--header-h));
  margin-top: var(--header-h);
}

.hero-text {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  width: 80%;
  z-index: 4;
}

.hero-text h1 {
  filter: drop-shadow(0 5px 20px #000);
}

.hero-text h2 {
  font-size: 62px;
}

.globe {
  position: absolute;
  transform-origin: 0% 0%;
  top: 50%;
  width: 50%;
  position: absolute;
  left: 0;
  z-index: 3;
  transform: scale(2);
}

.system-globe {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-60%, -50%);
  z-index: 2;
  width: 79%;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease;
}

.system-globe video {
  width: 100%;
}

.features {
  pointer-events: none;
}

.feature-item {
  transform: translate(5em);
  opacity: 0;
}

.circle-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3em;
  height: 3em;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
  color: #000;
  font-size: 1.4em;
}

.feature-arrow {
  pointer-events: none;
  opacity: 0;
  transition: none;
}

.feature-tabs {
  pointer-events: none;
  opacity: 0;
  width: 100%;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  height: 100%;
}

.climate-slider-wrap,
.feature-tab {
  width: 50%;
  transition: 0.5s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  opacity: 0;
  visibility: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.climate-change.active .climate-slider-wrap,
.feature-tab.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.system-list {
  text-align: right;
  padding-right: 10%;
  position: relative;
}

.system-list h2 {
  position: absolute;
  font-size: 62px;
}

.system-list-item {
  position: relative;
  text-align: right;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: inline-flex;
}

.system-list-item h4 {
  transition: 0.3s ease;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5em 1em;
  backdrop-filter: blur(10px);
  padding-right: 3em;
  border-radius: 5em;
  width: 7.5em;
  font-weight: normal;
  display: inline-block;
  margin-bottom: 0;
  margin-right: -1.6em;
}

.system-list-item.active h4,
.system-list-item:hover h4 {
  background: #fff;
  color: #000 !important;
}

.system-list-item:hover h4 {
  margin-right: -1.2em;
}

div:nth-child(1)>.system-list-item,
div:nth-child(5)>.system-list-item {
  transform: translate(19%);
}

div:nth-child(2)>.system-list-item,
div:nth-child(4)>.system-list-item {
  transform: translate(4%);
}

.system-img {
  width: 7em;
  padding-top: 7em;
  position: relative;
}

.system-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.activities-tab {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  animation: fadeEffect 0.5s ease;
  width: 130%;
}

.system-tab {
  position: absolute;
  top: 0;
  left: 0;
  animation: fadeEffect 0.5s ease;
  width: 130%;
  opacity: 0;
  pointer-events: none;
  height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding: 1.5em 0;
  overflow: hidden;
}

.system-tab.active {
  opacity: 1;
  pointer-events: all;
}

.system-tab img {
  width: 100%;
}

.system-tabs {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.system-inner-tabs {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.system-inner-tab .gallery-item img {
  height: 18em;
  object-fit: cover;
}

.system-tab .slick-track {
  display: flex;
  align-items: center;
}

@keyframes fadeEffect {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.system-inner-tab-links li {
  display: inline-block;
  margin-right: 1em;
}

.system-inner-tab-links button {
  --bs-btn-font-size: 1.2em;
  --bs-btn-border-color: #fff;
  --bs-btn-color: #fff;
  --bs-btn-padding-x: 2em;
  --bs-btn-padding-y: 0.5em;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-btn-border-radius: 0.5em;
}

.system-inner-tab-links li.active button {
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: #fff;
  --bs-btn-color: #000;
  --bs-btn-hover-color: #000;
}

/* animation 1 */
.hero-content.animation-1 .globe {
  transform: translate(0, -50%) scale(1);
}

.hero-content.animation-1 .hero-text {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-100%, 50%);
}

.hero-content.animation-1 .features {
  pointer-events: all;
}

.hero-content.animation-1 .feature-item {
  transform: translate(0);
  opacity: 1;
}

/* animation 2 */
.hero-content.animation-2 .globe {
  transform: translate(100%, -50%) scale(1);
}

.hero-content.animation-2 .features {
  pointer-events: none;
  transform: translate(105%, -50%);
}

.hero-content.animation-2 .feature-item {
  opacity: 0.3;
}

.hero-content.animation-2 .feature-arrow {
  pointer-events: all;
  opacity: 1;
}

.hero-content.animation-2 .feature-tabs {
  pointer-events: all;
  opacity: 1;
}

/* ANIMATION EARTH */
.hero-content.animation-earth .globe {
  opacity: 0;
  pointer-events: none;
}

.hero-content.animation-earth .system-globe {
  pointer-events: all;
  opacity: 1;
  transform: translate(18%, -50%);
}

/* ANIMATION SYSTEM */
.hero-content.animation-system .system-globe,
.hero-content.animation-system .globe {
  opacity: 0;
  pointer-events: none;
}

.hero-content.animation-system div:nth-child(1)>.system-list-item,
.hero-content.animation-system div:nth-child(5)>.system-list-item {
  transform: translate(0);
}

.hero-content.animation-system div:nth-child(2)>.system-list-item,
.hero-content.animation-system div:nth-child(4)>.system-list-item {
  transform: translate(0);
}

.hero-content.animation-system .system-list-item {
  opacity: 0.5;
}

.hero-content.animation-system .system-list-item:hover,
.hero-content.animation-system .system-list-item.active {
  opacity: 1;
}

.hero-content.animation-system .system-list {
  transform: translate(100%);
}

.hero-content.animation-system .system-tabs {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

/* CONNECTION */
.connection-content {
  width: 100vw;
  margin-left: calc((100vw - var(--container) + var(--bs-gutter-x)) / -2);
  position: relative;
  overflow: hidden;
  height: calc(100% + var(--header-h));
  margin-top: calc(var(--header-h) * -1);

  --blur: 5px;
  --bg: rgba(0, 0, 0, 0.5);
  --round: 20px;
  --border: 1px solid rgba(255, 255, 255, 0.3);
  --ball: 1.8em;
  --line: 5px;
  --posX: 5em;
  --posY: 0em;

  background-color: rgba(255, 174, 0, 0);
}

.connection-content-inner {
  mix-blend-mode: multiply;
}

.clouds img {
  position: absolute;
  left: 0;
  top: -5%;
  transform: translate(0, -20%);
  width: 20%;
}

.clouds img.cloud-lg {
  width: 30%;
}

.clouds img.cloud-sm {
  width: 15%;
}

/* .clouds img {
  animation: move 30s linear infinite forwards;
} */
/* @keyframes move {
  0% {
    transform: translate(-100%);
    left: 0;
  }
  100% {
    transform: translate(100%);
    left: 100%;
  }
} */
.connection-intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2em 0;
  padding: 4em;
  backdrop-filter: var(--blur);
  background-color: var(--bg);
  border: var(--border);
  transition: 0.5s ease;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.connection-intro h2 {
  letter-spacing: 0.1em;
}

.connection-marker {
  position: absolute;
  top: 0%;
  left: 0%;
}

.connection-title {
  backdrop-filter: var(--blur);
  background-color: var(--bg);
  padding: 1.2em 2.5em;
  border-radius: 10em;
  border: var(--border);
  opacity: 0;
  pointer-events: none;
}

.connection-marker.active .connection-title {
  opacity: 1;
  pointer-events: all;
}

/* .connection-marker.active-comp .connection-title, */
.connection-title:hover {
  background-color: var(--bs-primary);
}

.connection-marker h4 {
  color: #fff;
  margin-bottom: 0;
}

.connection-ball {
  content: "";
  height: var(--ball);
  width: var(--ball);
  border-radius: 50%;
  background: #fff;
  position: absolute;
  right: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 100%;
  transform: translate(var(--posX), -50%);
  animation: scaling 1.9s ease infinite;
}

@keyframes scaling {
  50% {
    transform: translate(var(--posX), -50%) scale(1.2);
  }
}

.connection-line {
  content: "";
  position: absolute;
  top: calc(50% - var(--line) / 2);
  left: 100%;
  width: calc(var(--posX) + var(--ball) / 2);
  height: var(--posY);
  border-top: var(--line) solid #fff;
  border-right: var(--line) solid #fff;
  opacity: 0;
  pointer-events: none;
}

.connection-marker.active .connection-line {
  opacity: 1;
  pointer-events: all;
}

.connection-marker-atm {
  top: 10%;
  left: 25%;
  --posX: 2em;
}

.connection-marker-hyd {
  top: 90%;
  left: 45%;
  --posX: 4em;
}

.connection-marker-cry {
  top: 51%;
  left: 45%;
  --posX: 6em;
}

.connection-marker-geo {
  top: 37%;
  left: 69%;
  --posX: 6em;
}

.connection-marker-bio {
  top: 80%;
  left: 71%;
  --posX: 5em;
}

.connection-marker {
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease 0.3s;
}

.connection-wrap.intro .connection-intro {
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
}

.connection-wrap.intro .connection-marker,
.connection-marker.active {
  opacity: 1;
  pointer-events: all;
}

.connection-comps button {
  color: #fff;
}

.connection-control-wrap {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 100%;
  transition: 0.3s ease;
  opacity: 0;
  pointer-events: none;
  padding-bottom: 1em;
}

.connection-control {
  background-color: rgba(0, 0, 0, 0.8);
  border: var(--border);
  border-radius: var(--round) 0;
  padding: 1em;
  min-width: 20em;
  position: relative;
}

.connection-comps {
  position: absolute;
  bottom: calc(100% + 1em);
  background-color: var(--bg);
  border: var(--border);
  border-radius: var(--round) 0;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  opacity: 0;
  pointer-events: none;
}

.connection-marker.active.active-comp .connection-comps {
  opacity: 1;
  pointer-events: all;
}

.connection-control::after,
.connection-comps::after {
  content: "";
  height: 1em;
  width: 1em;
  z-index: -1;
  background: var(--bg);
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translate(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.connection-comps li {
  position: relative;
}

/* .connection-comps li:hover .connection-control-wrap {
  opacity: 1;
  pointer-events: all;
} */

.connection-comps li:hover .connection-control-wrap {
  opacity: 1;
  pointer-events: all;
}

.connection-comps button i {
  font-size: 1.5em;
  transition: inherit;
}

.connection-comps button {
  color: #fff;
  height: 5em;
  width: 5em;
}

.connection-comps button:hover {
  color: var(--bs-primary);
}

.connection-comps button:hover {
  color: var(--bs-primary);
}

.connection-comps li:hover button i {
  scale: 1.3;
}

.connection-comps li:hover button {
  color: var(--bs-primary);
}

.connection-marker-atm .connection-comps {
  bottom: auto;
  top: calc(100% + 1em);
}

.connection-marker-atm .connection-comps::after {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  bottom: 100%;
  top: auto;
}

.connection-marker-atm .connection-control-wrap {
  top: 100%;
  bottom: auto;
  padding-bottom: 0;
  padding-top: 1em;
}

.connection-marker-atm .connection-control::after,
.connection-marker-atm .connection-comps::after {
  bottom: calc(100% - 1px);
  top: auto;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.connection-trees img,
.connection-water img,
.connection-lava img,
.connection-glaciers img {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.connection-trees img.active,
.connection-water img.active,
.connection-lava img.active,
.connection-glaciers img.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.connection-water img,
.connection-lava img,
.connection-glaciers img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.connection-trees img {
  position: absolute;
  left: var(--l, 0);
  bottom: var(--b, 0);
  width: var(--w, 20%);
  transition: 0.3s ease;
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  transition: 0.1s ease;
}

.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  transition: 0.1s ease;
}

.form-range::-moz-range-thumb:active {
  transform: scale(1.2);
  background-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb:active {
  transform: scale(1.2);
  background-color: var(--bs-primary);
}

.form-range::-moz-range-progress {
  background-color: var(--bs-primary);
  height: 0.5rem;
  border-radius: 1rem;
}

.form-range::-webkit-slider-progress {
  background-color: var(--bs-primary);
  height: 0.5rem;
}

.connection-statistics-tabs {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--container) - 22%);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--header-h) / 2));
  padding: 3em 0;
  border-radius: 2em;
  z-index: 2;
  height: 87%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.connection-statistics-tabs.active {
  opacity: 1;
  visibility: visible;
}

.connection-statistics-tab {
  padding: 0 3em;
  overflow: auto;
  height: 100%;
  transition: 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.connection-statistics-tab.active {
  opacity: 1;
  pointer-events: all;
}

.connection-statistics-tabs .close {
  position: absolute;
  top: 0;
  right: 0;
  height: 2em;
  width: 2em;
  background: #fff;
  color: #000;
  border-radius: 0.5em;
  font-size: 1.5em;
}

.connection-statistics-tabs .close:hover {
  background: var(--bs-primary);
  color: #fff;
}

.connection-statistics-nav button {
  padding: 0.5em 1em;
  border-radius: 0.5em;
  border: 1px solid #fff;
}

.connection-statistics-nav li {
  margin-bottom: 1em;
}

.connection-statistics-nav button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.connection-statistics-nav li.active button {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

.connection-statistics-menu li {
  display: inline-block;
  margin: 0 0.2em;
}

.connection-statistics-menu button {
  font-weight: 700;
  padding: 0.5em 0;
  width: 8em;
  border-radius: 0.3em;
  border: 2px solid rgba(255, 255, 255, 0.7);
  font-size: 1.2em;
}

.connection-statistics-menu button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.connection-statistics-menu li.active button {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

.conn-statistics-menu-tab .card-img {
  height: 22em;
  object-fit: cover;
}

.system-inner-tab,
.conn-statictics-inner-tab,
.conn-statistics-menu-tab,
.connection-statistics-tab {
  display: none;
  animation: fadeEffect 1s ease;
}

.system-inner-tab.active,
.conn-statictics-inner-tab.active,
.conn-statistics-menu-tab.active,
.connection-statistics-tab.active {
  display: block;
}

@keyframes fadeEffect {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.connection-accessibility {
  position: absolute;
  bottom: 3%;
  left: 8%;
}

.show-markers {
  --bs-btn-bg: rgba(255, 255, 255, 0.5);
  --bs-btn-color: #000;
  --bs-btn-border-radius: var(--round) 0;
  --bs-btn-padding-x: 1.5em;
  --bs-btn-padding-y: 1em;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  letter-spacing: 0.2em;
  border: var(--border);
  font-weight: 700;
  backdrop-filter: blur(2px);
}

.sun {
  position: absolute;
  top: 0;
  left: -7%;
  width: 50%;
  opacity: 0.5;
  height: 33em;
  background-color: transparent;
}

/* connection popup */
.connection-popup {
  position: absolute;
  z-index: 3;
  top: 15%;
  left: 5%;
  background: rgba(255, 255, 255, 0.5);
  padding: 1.5em;
  border-radius: 1em;
  max-width: 26em;
  text-align: left;
  backdrop-filter: blur(10px);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
  transition: 0.5s ease;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.connection-popup.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.connection-popup p:last-child {
  margin-bottom: 0;
}

.connection-popup::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5em;
  width: 2em;
  background: inherit;
  backdrop-filter: inherit;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

.connection-popup-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 1.5em;
  width: 2em;
  display: grid;
  place-content: center;
}

.connection-popup-bio {
  left: 26%;
  top: 65%;
}

.connection-popup-geo {
  left: 82%;
}

.connection-popup-cry {
  left: 30%;
  top: 43%;
}

.connection-popup-hyd {
  left: 32%;
  top: 90%;
}

/* ANIMATION CONNECTION */
.hero-content.animation-connection .globe {
  transform: translate(-120%, -50%) scale(1);
}

.hero-content.animation-connection .feature-tab {
  width: 100%;
}

/* CLIMATE */
.card-box.card {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: 1rem;
}

.card-box.card:hover .card-img-top img {
  transform: scale(1.1);
}

.card-box .card-img-top img {
  width: 100%;
  height: 18em;
  object-fit: cover;
}

.card-box.card:hover {
  transform: translate(0, -0.5em);
}

.climate-features .card-box {
  height: 10em;
}

.climate-features .card-body h3 {
  margin-bottom: 0;
  font-size: 34px;
}

.slick-dots button {
  background: #fff;
  font-size: 0;
  line-height: 0;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin: 0 8px;
  cursor: pointer;
  transition: 0.3s ease;
}

.slick-dots li.slick-active button {
  transform: scale(2);
  background: var(--bs-primary);
}

.slick-dots li {
  display: flex;
  padding: 0.5em 0;
}

.slick-arrow {
  font-size: 2em;
  height: 1.5em;
  width: 1.5em;
  display: inline-grid;
  place-content: center;
  background: #fff;
  color: #000;
  border-radius: 50%;
  margin: 0.5em 0;
}

.slick-arrow:hover {
  background-color: var(--bs-primary);
  transform: scale(1.1);
  color: #fff;
}

.slick-arrow.slick-disabled {
  opacity: 0.5;
}

.img-slider .slick-dots {
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translate(-50%);
  display: flex;
}

.climate-slider-control {
  position: absolute;
  right: 103%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.climate-slider-control .slick-next {
  order: 6;
}

.climate-slider-wrap {
  transform: translateY(0%);
  width: 100%;
}

.climate-change.active .climate-slider_wrap {
  transform: translateY(-50%);
}

.climate-change.active .climate-content {
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.climate-slider .card-box.card:hover {
  transform: translate(0, 0);
}

.climate-slider .card-box.card .card-img-top {
  border-radius: var(--bs-card-inner-border-radius);
}

.climate-slider .card-box.card .card-img-top img {
  height: 22em;
}

.climate-slide .card {
  margin-top: 10px;
  margin-bottom: 20px;
}

.text-link {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  padding: 0.2em 0;
  display: inline-flex;
  align-items: center;
  color: var(--bs-primary);
}

.text-link:hover {
  letter-spacing: 0.05em;
}

.text-link i {
  transition: 0.3s ease;
  font-size: 0.8em;
}

.text-link:hover i {
  transform: translate(5px);
}

.climate-feature-close {
  position: absolute;
  top: 50%;
  left: 100%;
  font-size: 3em;
  height: 1.5em;
  width: 1.5em;
  transform: translate(-20%, -50%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.climate-feature-close i {
  transition: inherit;
}

.climate-feature-close:hover i {
  transform: translate(50%);
}

.climate-tabs {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 0.5s ease;
  transform: scale(0.5);
}

.climate-element-nav {
  display: flex;
  gap: 1em;
}

.climate-element-nav li {
  flex: 1;
}

.climate-element-tabs {
  padding: 2em;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 1em 1em;
  backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgb(255, 255, 255);
  height: 76vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.climate-element-tabs h1,
.climate-element-tabs h2,
.climate-element-tabs h3,
.climate-element-tabs h4,
.climate-element-tabs h5,
.climate-element-tabs h6 {
  color: #fff;
}

.climate-element-tab {
  display: flex;
  gap: 2em;
}

.climate-element-nav button {
  width: 100%;
  border-bottom: 0;
  --bs-btn-font-size: 1.4em;
  --bs-btn-border-radius: 0.5em 0.5em 0 0;
  --bs-btn-padding-y: 0.5em;
  --bs-btn-border-color: rgb(255, 255, 255);
}

.climate-element-nav button:hover,
.climate-element-nav li.active button {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
}

.climate-component-nav button {
  width: 10em;
  --bs-btn-padding-y: 0.8em;
  --bs-btn-padding-x: 0;
  --bs-btn-border-color: rgba(255, 255, 255, 0.2);
}

.climate-component-nav li.active button {
  background: #ffffff;
  color: #000000;
}

.climate-component-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding-left: 1em;
}

.climate-component-tabs {
  flex: 1;
  height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1em;
}

.dotted-list {
  font-size: 1.2em;
  margin-left: 1em;
}

.dotted-list li {
  list-style: disclosure-closed;
  margin-bottom: 0.5em;
}

.temperature-globe,
.temperature-globe-img {
  position: relative;
  z-index: 1;
}

.temperature-globe-img {
  min-height: 20em;
}

.temperature-globe-img .image {
  position: absolute;
  z-index: 1;
  opacity: 0;
  top: 0;
}

.temperature-globe-img .image:first-child {
  position: relative;
}

.temperature-globe-img .image.active {
  opacity: 1;
  z-index: 2;
}

.temperature-globe .key {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.same-height-img {
  object-fit: cover;
  height: 10em;
  width: 100%;
}

/* ANIMATION CLIMATE */
.feature-tab:nth-child(3) {
  width: 100%;
  transform: translate(0%, 50%);
}

.hero-content.animation-climate .feature-tab {
  transform: translate(0, -50%);
}

.hero-content.animation-climate .features {
  transform: translate(112%, -50%);
}

.hero-content.animation-climate-feature .features {
  transform: translate(130%, -50%);
}

.hero-content.animation-climate .feature-item {
  opacity: 0.3;
}

.hero-content.animation-climate .globe {
  transform: translate(-120%, -50%) scale(1);
}

.hero-content.animation-climate .feature-tabs {
  pointer-events: all;
  opacity: 1;
  width: 100%;
}

.hero-content.animation-climate-feature .climate-content {
  transform: translate(-105%, 0);
}

.hero-content.animation-climate-feature .climate-features .card-box {
  opacity: 0.5;
  pointer-events: none;
}

.hero-content.animation-climate-feature .climate-feature-close {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.hero-content.animation-climate-feature .climate-tabs {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transform: scale(1);
}

/* ACTIVITIES */

.activities-arrow {
  left: 100%;
  transform: translate(-50%, -50%) rotate(180deg);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.activities-tab {
  width: 100%;
  transform: translate(110%, -50%);
  top: 50%;
}

.activities-tabs {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}

.bioscope-popup-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 46em;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

.bioscope-wrap.active .bioscope-popup-wrap {
  pointer-events: all;
  opacity: 1;
  visibility: visible;
}

.bioscope-tab {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(30px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  padding-top: 80%;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 3em 3em rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(0.8);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  border-radius: 50%;
}

.bioscope-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  border-radius: inherit;
  border: 2em solid #000;
  z-index: 2;
  filter: blur(18px);
}

.bioscope-tab.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.bioscope-tab .bioscope-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.bioscope-close {
  position: absolute;
  top: 8%;
  right: 8%;
  color: #fff;
  z-index: 6;
  font-size: 2em;
  background: #fff;
  border-radius: 50%;
  height: 2em;
  width: 2em;
  color: #000;
  opacity: 0.5;
}

.bioscope-close:hover {
  opacity: 1;
}

.bioscope-btn {
  position: absolute;
  top: 47%;
  left: 23%;
  height: var(--width);
  width: var(--width);
  border-radius: 50%;
  --width: 6em;
}

.bioscope-btn-2 {
  left: 45.5%;
}

.bioscope-btn-3 {
  left: 67.4%;
}

.bioscope-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.1;
  transition: inherit;
}

.bioscope-btn:hover::after {
  rotate: 180deg;
}

.bioscope-move {
  animation: updownmove 3s linear infinite;
}

@keyframes updownmove {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-0.5em);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(0.5em);
  }

  100% {
    transform: translateY(0);
  }
}

.bioscope-img {
  transition: 0.5s ease;
}

.bioscope-wrap.active .bioscope-img {
  transform: scale(1.8);
  opacity: 0;
}

/* quiz */
.app {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  border-radius: 10px;
  padding: 3em;
  backdrop-filter: blur(10px);
  color: #fff;
}

.app h1 {
  font-size: 32px;
  color: #ffffff;
  font-weight: 600;
  border-bottom: 1px solid #333;
  padding-bottom: 30px;
}

.quiz {
  padding: 20px 0;
}

.quiz h2 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
}

.quiz .btn {
  background: #fff;
  color: #000;
  font-weight: 600;
  width: 100%;
  border: 0;
  padding: 15px;
  margin: 10px 0;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  --bs-btn-disabled-opacity: 1;
}

.quiz .btn:hover:not([disabled]) {
  background: #9d9d9d;
  color: #fff;
}

.quiz .btn:disabled {
  cursor: no-drop;
}

#next-btn {
  background: #fff;
  color: #000;
  font-weight: 500;
  width: 150px;
  border: none;
  padding: 10px;
  margin: 20px auto 0;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}

.correct {
  background: #9aeabc !important;
}

.incorrect {
  background: #ff9393 !important;
}

/* ACTIVITIES ANIMATION */
.feature-tab:nth-child(4) {
  transform: translate(-50%, -50%);
}

.hero-content.animation-act-expand .activities-tabs {
  opacity: 1;
  pointer-events: all;
}

.hero-content.animation-activities .feature-tab {
  transform: translate(0, -50%);
}

.hero-content.animation-act-expand .feature-tab {
  transform: translate(-110%, -50%);
}

.hero-content.animation-act-expand .activities-arrow {
  opacity: 1;
  pointer-events: all;
}

.hero-content.animation-act-expand .activities-item {
  opacity: 0.3;
}

.hero-content.animation-act-expand .features {
  transform: translate(130%, -50%);
}

/* NASA */
.nasa {
  transition: 0.7s ease;
}

.nasa-slider-dots ul {
  display: flex;
}

.nasa-tab .card {
  --bs-card-spacer-y: 0.8em;
  --bs-card-border-radius: 0.5em;
}

.nasa-tabs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 77%;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
}

.nasa-tab-close {
  height: 1.5em;
  width: 1.5em;
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
}

.nasa-tab-close:hover {
  transform: translate(0, -5px);
}

.nasa-inner-tab-link.active {
  box-shadow: 0 0 6px 4px var(--bs-primary);
}

.nasa-inner-tab-link.fade {
  opacity: 0.3;
}

.nasa-inner-tab-link.fade:hover {
  opacity: 1;
}

.nasa-inner-tab-link::before {
  opacity: 0.5;
}

/* ANIMATION NASA */
.feature-tab:nth-child(5) {
  width: 100%;
  transform: translate(0, 50%);
}

.hero-content.animation-nasa .feature-tab {
  transform: translate(0, -50%);
}

.hero-content.animation-nasa .features {
  pointer-events: none;
  transform: translate(0%, -103%);
  top: 0;
}

.hero-content.animation-nasa-tab .features {
  transform: translate(0%, -140%);
}

.hero-content.animation-nasa .feature-item {
  opacity: 0.3;
}

.hero-content.animation-nasa .feature-arrow {
  pointer-events: all;
  opacity: 1;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 50%) rotate(-90deg);
}

.hero-content.animation-nasa .globe {
  transform: translate(-100%, -50%) scale(1);
}

.hero-content.animation-nasa .feature-tabs {
  pointer-events: all;
  opacity: 1;
  width: 100%;
}

.hero-content.animation-nasa-tab .nasa {
  transform: translate(0, 108%);
}

.hero-content.animation-nasa-tab .nasa-tabs {
  opacity: 1;
  visibility: visible;
}

.hero-content.animation-nasa-tab .nasa-tab-close {
  opacity: 0.8;
  visibility: visible;
  margin-right: 10px;
}

/* CONTENT HIDE OR SHOW WITH FADE EFFECT */
.climate-tab,
.climate-component-tab,
.climate-element-tab,
.nasa-tab,
.nasa-tab-video,
.nasa-inner-tab,
.connection-sub,
.activities-tab {
  display: none;
  animation: fadeEffect 0.5s ease;
}

.climate-tab.active,
.climate-component-tab.active,
.nasa-tab.active,
.nasa-tab-video.active,
.nasa-inner-tab.active,
.connection-sub.active,
.activities-tab.active {
  display: block;
}

.climate-element-tab.active {
  display: flex;
}

.social-links a {
  font-size: 1.5em;
  height: 2em;
  width: 2em;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.5em;
  color: #fff;
  display: inline-grid;
  place-content: center;
  position: relative;
  z-index: 1;
}

.social-links a::before {
  content: "";
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  position: absolute;
  background: var(--card-grad);
  transition: 0.3s ease;
  opacity: 0;
}

.social-links a:hover {
  transform: scale(1.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.social-links a:hover::before {
  opacity: 1;
}

.social-links li {
  margin-right: 1em;
}

.social-links li:last-child {
  margin-right: 0;
}

/*========== STARRY NIGHT BACKGROUND SYSTEM ==========*/

/* Starry Night Background Animations */
@keyframes comet-fall {
  0% {
    transform: translateX(-150px) translateY(-150px) rotate(225deg);
    opacity: 0;
  }

  15% {
    opacity: 0.4;
  }

  85% {
    opacity: 0.4;
  }

  100% {
    transform: translateX(300px) translateY(300px) rotate(225deg);
    opacity: 0;
  }
}

@keyframes falling-star {
  0% {
    transform: rotate(45deg) translateY(-100px);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) translateY(100vh);
    opacity: 0;
  }
}

@keyframes shooting-trail {
  0% {
    transform: rotate(45deg) translateX(100px);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) translateX(-200px);
    opacity: 0;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px);
  }

  50% {
    transform: translateY(-20px) translateX(10px);
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

/* Nebula Cloud Styles */
.nebula-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: float 8s ease-in-out infinite;
}

.nebula-1 {
  top: 20%;
  left: 10%;
  width: 240px;
  height: 240px;
  background: rgba(147, 51, 234, 0.15);
  animation-duration: 8s;
}

.nebula-2 {
  bottom: 20%;
  right: 20%;
  width: 192px;
  height: 192px;
  background: rgba(37, 99, 235, 0.12);
  animation-delay: 2s;
  animation-duration: 10s;
  animation-direction: reverse;
}

.nebula-3 {
  top: 50%;
  left: 25%;
  width: 144px;
  height: 144px;
  background: rgba(6, 182, 212, 0.15);
  animation-delay: 4s;
  animation-duration: 12s;
}

.nebula-4 {
  top: 33%;
  right: 33%;
  width: 160px;
  height: 160px;
  background: rgba(236, 72, 153, 0.1);
  animation-delay: 6s;
  animation-duration: 9s;
  animation-direction: reverse;
}

/* Star styles */
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}

.comet {
  position: absolute;
  background: linear-gradient(to bottom, white, rgba(147, 197, 253, 0.8), transparent);
  width: 2px;
  height: 80px;
  opacity: 0.35;
  transform: rotate(225deg);
  animation: comet-fall 15s linear infinite;
}

.falling-star {
  position: absolute;
  background: linear-gradient(to bottom, rgba(196, 181, 253, 1), rgba(251, 207, 232, 1), transparent);
  width: 4px;
  height: 48px;
  opacity: 0.6;
  transform: rotate(45deg);
  animation: falling-star 8s linear infinite;
}

.shooting-trail {
  position: absolute;
  background: linear-gradient(to bottom, rgba(165, 243, 252, 1), rgba(191, 219, 254, 1), transparent);
  width: 2px;
  height: 80px;
  opacity: 0.5;
  transform: rotate(45deg);
  animation: shooting-trail 4s ease-out infinite;
}

.distant-star {
  position: absolute;
  background: radial-gradient(circle, white, transparent);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.3;
  animation: twinkle 5s ease-in-out infinite;
}

/*========== STARRY NIGHT BACKGROUND SYSTEM // ==========*/

/*========== BACK BUTTON STYLING ==========*/
.back-button {
  transition: all 0.3s ease !important;
  position: relative;
}

.back-button:hover {
  transform: scale(1.05) !important;
}

.back-button i {
  transition: transform 0.3s ease;
}

.back-button:hover i {
  transform: rotate(-15deg);
}

/*========== BACK BUTTON STYLING // ==========*/

/*========== CLIMATE ARROW FIX ==========*/
.hero-content.animation-climate .feature-arrow {
  pointer-events: all;
  opacity: 1;
  left: 30px;
  /* Shift arrow 30px to the right */
}

/*========== CLIMATE ARROW FIX // ==========*/

/*========== SYSTEM POPUP MODAL STYLING ==========*/

.system-popup-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  animation: modalFadeIn 0.3s ease;
}

.system-popup-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-popup-content {
  background: linear-gradient(135deg,
      rgba(15, 23, 42, 0.95) 0%,
      rgba(30, 41, 59, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  max-width: 90vw;
  max-height: 90vh;
  width: 1000px;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: modalSlideIn 0.4s ease;
}

.system-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  border-radius: 15px 15px 0 0;
}

.system-popup-header h3 {
  margin: 0;
  font-family: var(--font-osw);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.system-popup-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.system-popup-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.system-popup-body {
  padding: 30px;
  color: #e2e8f0;
  line-height: 1.6;
}

/* Tab Navigation */
.system-popup-tabs {
  padding: 20px 30px 0 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.system-popup-tab-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}

.system-popup-tab-links li {
  margin: 0;
}

.system-popup-tab-links button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: var(--font-ubu);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.system-popup-tab-links li.active button,
.system-popup-tab-links button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.system-popup-tab-content {
  padding: 0;
}

/* Gallery specific styling */
.system-popup-tab-content .gallery-item {
  margin-top: 20px;
}

.system-popup-tab-content .gallery-item img,
.system-popup-tab-content .gallery-item video {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.system-popup-tab-content .gallery-item img:hover,
.system-popup-tab-content .gallery-item video:hover {
  transform: scale(1.05);
}

/* Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .system-popup-content {
    width: 95vw;
    max-height: 95vh;
  }

  .system-popup-header {
    padding: 15px 20px;
  }

  .system-popup-body {
    padding: 20px;
  }
}

/*========== SYSTEM POPUP MODAL STYLING // ==========*/

/*========== SPACE PRELOADER STYLING ==========*/
.game-loader {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #273355;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.game-loader__planet {
  filter: url("#goo");
  position: relative;
  width: 100vw;
  height: 100vw;
}
.game-loader__planet::after {
  content: "";
  display: block;
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  background: #11DBD9;
  box-shadow: #11DBD9 0 0 24px 4px;
  margin: 0 auto;
  position: absolute;
  top: 46vw;
  left: 46vw;
  animation: scale 16s linear infinite, color5 8s linear 1;
}
.game-loader__planet .loader-mini1 {
  position: absolute;
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  background: #11DBD9;
  top: 48.5vw;
  left: 48.5vw;
  animation: move1 8s linear 1, color1 8s linear 1;
}
.game-loader__planet .loader-mini2 {
  position: absolute;
  width: 3.6vw;
  height: 3.6vw;
  border-radius: 50%;
  background: #11DBD9;
  top: 48.5vw;
  left: 48.5vw;
  animation: move2 9s linear 1, color2 9s linear 1;
}
.game-loader__planet .loader-mini3 {
  position: absolute;
  width: 4.2vw;
  height: 4.2vw;
  border-radius: 50%;
  background: #11DBD9;
  top: 48.5vw;
  left: 48.5vw;
  animation: move3 10s linear 1, color3 10s linear 1;
}
.game-loader__planet .loader-mini4 {
  position: absolute;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 50%;
  background: #11DBD9;
  top: 48.5vw;
  left: 48.5vw;
  animation: move4 11s linear 1, color4 11s linear 1;
}
.game-loader__planet .loader-radius1 {
  position: absolute;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  border: 0.5px solid #11DBD9;
  opacity: 0.2;
  background: transparent;
  top: 44vw;
  left: 44vw;
  transform: scale(0);
  animation: orbit1 8s linear 1;
}
.game-loader__planet .loader-radius2 {
  position: absolute;
  width: 18vw;
  height: 18vw;
  border-radius: 50%;
  border: 0.5px solid #11DBD9;
  opacity: 0.2;
  background: transparent;
  transform: scale(0);
  top: 41vw;
  left: 41vw;
  animation: orbit2 9s linear 1;
}
.game-loader__planet .loader-radius3 {
  position: absolute;
  width: 24vw;
  height: 24vw;
  border-radius: 50%;
  border: 0.5px solid #11DBD9;
  opacity: 0.2;
  background: transparent;
  transform: scale(0);
  top: 38vw;
  left: 38vw;
  animation: orbit3 10s linear 1;
}
.game-loader__planet .loader-radius4 {
  position: absolute;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  border: 0.5px solid #11DBD9;
  opacity: 0.2;
  background: transparent;
  transform: scale(0);
  top: 35vw;
  left: 35vw;
  animation: orbit4 11s linear 1;
}

/* Preloader Animations */
@keyframes move1 {
  0% { transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
  10% { transform: skewX(5deg) rotate(180deg) translateY(-6vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
  25% { transform: skewX(5deg) rotate(360deg) translateY(-12vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
  50% { transform: skewX(5deg) rotate(720deg) translateY(-12vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
  75% { transform: skewX(5deg) rotate(1080deg) translateY(-12vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
  90% { transform: skewX(5deg) rotate(1260deg) translateY(-6vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
  100% { transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); }
}

@keyframes move2 {
  0% { transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
  10% { transform: skewX(5deg) rotate(180deg) translateY(-9vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
  25% { transform: skewX(5deg) rotate(360deg) translateY(-18vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
  50% { transform: skewX(5deg) rotate(720deg) translateY(-18vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
  75% { transform: skewX(5deg) rotate(1080deg) translateY(-18vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
  90% { transform: skewX(5deg) rotate(1260deg) translateY(-9vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
  100% { transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); }
}

@keyframes move3 {
  0% { transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
  10% { transform: skewX(5deg) rotate(180deg) translateY(-12vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
  25% { transform: skewX(5deg) rotate(360deg) translateY(-24vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
  50% { transform: skewX(5deg) rotate(720deg) translateY(-24vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
  75% { transform: skewX(5deg) rotate(1080deg) translateY(-24vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
  90% { transform: skewX(5deg) rotate(1260deg) translateY(-12vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
  100% { transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); }
}

@keyframes move4 {
  0% { transform: skewX(5deg) rotate(0deg) translateY(0em) rotate(0deg) skewX(-5deg) rotate(0deg); }
  10% { transform: skewX(5deg) rotate(180deg) translateY(-15vw) rotate(-180deg) skewX(-5deg) rotate(180deg); }
  25% { transform: skewX(5deg) rotate(360deg) translateY(-30vw) rotate(-360deg) skewX(-5deg) rotate(360deg); }
  50% { transform: skewX(5deg) rotate(720deg) translateY(-30vw) rotate(720deg) skewX(-5deg) rotate(720deg); }
  75% { transform: skewX(5deg) rotate(1080deg) translateY(-30vw) rotate(-1080deg) skewX(-5deg) rotate(1080deg); }
  90% { transform: skewX(5deg) rotate(1260deg) translateY(-15vw) rotate(-1260deg) skewX(-5deg) rotate(1260deg); }
  100% { transform: skewX(5deg) rotate(1440deg) translateY(0em) rotate(-1440deg) skewX(-5deg) rotate(1440deg); }
}

@keyframes scale {
  0% { transform: scale(1.5); }
  50% { transform: scale(1); }
  100% { transform: scale(1.5); }
}

@keyframes orbit1 {
  0% { transform: scale(0); }
  10% { transform: scale(1); }
  25% { transform: scale(2.2); }
  35% { transform: scale(2.1); }
  50% { transform: scale(2); }
  65% { transform: scale(2.1); }
  75% { transform: scale(2); }
  90% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes orbit2 {
  0% { transform: scale(0); }
  10% { transform: scale(1); }
  25% { transform: scale(2.2); }
  35% { transform: scale(2.1); }
  50% { transform: scale(2); }
  65% { transform: scale(2.1); }
  75% { transform: scale(2); }
  90% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes orbit3 {
  0% { transform: scale(0); }
  10% { transform: scale(1); }
  25% { transform: scale(2.2); }
  35% { transform: scale(2.1); }
  50% { transform: scale(2); }
  65% { transform: scale(2.1); }
  75% { transform: scale(2); }
  90% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes orbit4 {
  0% { transform: scale(0); }
  10% { transform: scale(1); }
  25% { transform: scale(2.2); }
  35% { transform: scale(2.1); }
  50% { transform: scale(2); }
  65% { transform: scale(2.1); }
  75% { transform: scale(2); }
  90% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes color1 {
  10% { background: #11DBD9; }
  50% { background: #FF217B; }
  90% { background: #11DBD9; }
}

@keyframes color2 {
  10% { background: #11DBD9; }
  50% { background: #FF7878; }
  90% { background: #11DBD9; }
}

@keyframes color3 {
  10% { background: #11DBD9; }
  50% { background: #FFA283; }
  90% { background: #11DBD9; }
}

@keyframes color4 {
  10% { background: #11DBD9; }
  50% { background: #962A4E; }
  90% { background: #11DBD9; }
}

@keyframes color5 {
  10% { background: #11DBD9; box-shadow: #11DBD9 0 0 24px 4px; }
  50% { background: #13C2D3; box-shadow: #13C2D3 0 0 24px 4px; }
  90% { background: #11DBD9; box-shadow: #11DBD9 0 0 24px 4px; }
}

.preloader-svg {
  position: absolute;
  z-index: -100;
  pointer-events: none;
}

/* Enhanced visibility for connection markers */
.connection-marker .connection-ball {
  cursor: pointer;
  transition: all 0.3s ease;
}

.connection-marker .connection-ball:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.connection-marker .connection-title {
  cursor: pointer;
  transition: all 0.3s ease;
}

.connection-marker .connection-title:hover {
  transform: scale(1.05);
  color: #ffffff !important;
}

.connection-marker.active .connection-ball {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* HIDE SYSTEM TABS SECTION COMPLETELY */
.system-tabs {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ENSURE NO GALLERY/STATISTICS/SLIDER CONTROLS SHOW */
.connection-statistics-tabs,
.connection-statistics-link,
.gallery-controls,
.slider-controls,
.statistics-panel {
  display: none !important;
  visibility: hidden !important;
}

/*========== STAR WARS BACKGROUND TOGGLE ==========*/
.background-toggle-btn {
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 16px !important;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
}

.background-toggle-btn:hover {
  color: #ffd700 !important;
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
}

.background-toggle-btn.active {
  color: #ffd700 !important;
  background: rgba(255, 215, 0, 0.15);
  border-color: #ffd700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.background-toggle-btn i {
  transition: all 0.3s ease;
}

.background-toggle-btn:hover i {
  transform: scale(1.1) rotate(5deg);
}

.background-toggle-btn.active i {
  animation: rocketPulse 2s infinite;
}

@keyframes rocketPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Star Wars Background Styles */
.star-wars-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 25%, #1a1a1a 50%, #0a0a0a 75%, #000000 100%);
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.star-wars-background.active {
  opacity: 1;
  z-index: -1;
}

.star-wars-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Multiple star layers for dense star field with varied sizes */
.star-wars-stars::before,
.star-wars-stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  animation: starMove 4s ease-in-out infinite;
}

/* First star layer - Large and medium stars */
.star-wars-stars::before {
  top: 0%;
  left: 0%;
  animation-delay: 0s;
  box-shadow: 
    100px 50px 0 1px #ffffff,
    200px 150px 0 0.5px #ffffff,
    300px 80px 0 2px #ffffff,
    400px 200px 0 1.5px #ffffff,
    500px 120px 0 0.5px #ffffff,
    600px 250px 0 2.5px #ffffff,
    700px 90px 0 1px #ffffff,
    800px 180px 0 3px #ffffff,
    900px 220px 0 1px #ffffff,
    1000px 60px 0 2px #ffffff,
    1100px 190px 0 0.5px #ffffff,
    1200px 140px 0 1.5px #ffffff,
    1300px 280px 0 2px #ffffff,
    1400px 110px 0 1px #ffffff,
    150px 300px 0 2.5px #ffffff,
    250px 350px 0 0.5px #ffffff,
    350px 320px 0 1.5px #ffffff,
    450px 380px 0 3px #ffffff,
    550px 340px 0 1px #ffffff,
    650px 400px 0 2px #ffffff,
    750px 360px 0 1.5px #ffffff,
    850px 420px 0 0.5px #ffffff,
    950px 390px 0 2.5px #ffffff,
    1050px 450px 0 1px #ffffff,
    1150px 370px 0 3px #ffffff,
    1250px 430px 0 2px #ffffff,
    1350px 410px 0 1px #ffffff,
    80px 500px 0 1.5px #ffffff,
    180px 550px 0 2.5px #ffffff,
    280px 520px 0 0.5px #ffffff,
    380px 580px 0 2px #ffffff,
    480px 540px 0 3px #ffffff,
    580px 600px 0 1px #ffffff,
    680px 560px 0 1.5px #ffffff,
    780px 620px 0 2px #ffffff,
    880px 590px 0 0.5px #ffffff,
    980px 650px 0 2.5px #ffffff,
    1080px 570px 0 1px #ffffff,
    1180px 630px 0 3px #ffffff,
    1280px 610px 0 1.5px #ffffff,
    120px 700px 0 2px #ffffff,
    220px 750px 0 0.5px #ffffff,
    320px 720px 0 2.5px #ffffff,
    420px 780px 0 1px #ffffff,
    520px 740px 0 3px #ffffff,
    620px 800px 0 1.5px #ffffff,
    720px 760px 0 2px #ffffff,
    820px 820px 0 0.5px #ffffff,
    920px 790px 0 2.5px #ffffff,
    1020px 850px 0 1px #ffffff,
    1120px 770px 0 3px #ffffff,
    1220px 830px 0 2px #ffffff;
}

/* Second star layer - Small and tiny stars */
.star-wars-stars::after {
  top: 10%;
  left: 5%;
  animation-delay: -2s;
  animation-duration: 6s;
  opacity: 0.8;
  box-shadow: 
    50px 100px 0 0.5px #ffffff,
    150px 200px 0 1px #ffffff,
    250px 130px 0 0.3px #ffffff,
    350px 250px 0 1.5px #ffffff,
    450px 170px 0 0.8px #ffffff,
    550px 300px 0 2px #ffffff,
    650px 140px 0 0.5px #ffffff,
    750px 230px 0 1.2px #ffffff,
    850px 270px 0 0.7px #ffffff,
    950px 110px 0 1.8px #ffffff,
    1050px 240px 0 0.4px #ffffff,
    1150px 190px 0 1.3px #ffffff,
    1250px 330px 0 0.9px #ffffff,
    1350px 160px 0 2.2px #ffffff,
    1450px 290px 0 0.6px #ffffff,
    75px 350px 0 1.1px #ffffff,
    175px 400px 0 0.5px #ffffff,
    275px 370px 0 1.7px #ffffff,
    375px 430px 0 0.8px #ffffff,
    475px 390px 0 2.1px #ffffff,
    575px 450px 0 0.4px #ffffff,
    675px 410px 0 1.4px #ffffff,
    775px 470px 0 0.7px #ffffff,
    875px 440px 0 1.9px #ffffff,
    975px 500px 0 0.6px #ffffff,
    1075px 420px 0 1.2px #ffffff,
    1175px 480px 0 0.9px #ffffff,
    1275px 460px 0 2.3px #ffffff,
    130px 550px 0 0.5px #ffffff,
    230px 600px 0 1.6px #ffffff,
    330px 570px 0 0.8px #ffffff,
    430px 630px 0 2px #ffffff,
    530px 590px 0 0.3px #ffffff,
    630px 650px 0 1.3px #ffffff,
    730px 610px 0 0.7px #ffffff,
    830px 670px 0 1.8px #ffffff,
    930px 640px 0 0.5px #ffffff,
    1030px 700px 0 2.4px #ffffff,
    1130px 620px 0 0.9px #ffffff,
    1230px 680px 0 1.1px #ffffff,
    1330px 660px 0 0.6px #ffffff,
    170px 750px 0 1.5px #ffffff,
    270px 800px 0 0.4px #ffffff,
    370px 770px 0 2.1px #ffffff,
    470px 830px 0 0.8px #ffffff,
    570px 790px 0 1.7px #ffffff,
    670px 850px 0 0.5px #ffffff,
    770px 810px 0 1.2px #ffffff,
    870px 870px 0 0.9px #ffffff,
    970px 840px 0 2.2px #ffffff,
    1070px 900px 0 0.7px #ffffff;
}

@keyframes starMove {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Additional star layers using pseudo-elements */
.star-wars-stars {
  background-image: 
    radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 40px 70px, #ffffff, transparent),
    radial-gradient(1px 1px at 90px 40px, #ffffff, transparent),
    radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
    radial-gradient(1px 1px at 160px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 190px 90px, #ffffff, transparent),
    radial-gradient(1px 1px at 230px 50px, #ffffff, transparent),
    radial-gradient(1px 1px at 270px 110px, #ffffff, transparent),
    radial-gradient(1px 1px at 300px 20px, #ffffff, transparent),
    radial-gradient(1px 1px at 340px 60px, #ffffff, transparent),
    radial-gradient(1px 1px at 380px 100px, #ffffff, transparent),
    radial-gradient(1px 1px at 420px 40px, #ffffff, transparent);
  background-repeat: repeat;
  background-size: 500px 600px;
  animation: bgStarMove 40s linear infinite;
}

@keyframes bgStarMove {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: -50px -50px;
  }
}

/* Star Wars Fighters using Font Awesome icons */
.star-wars-fighter {
  position: absolute;
  font-size: 18px;
  color: #cccccc;
  opacity: 0.8;
  animation: fighterMove 15s linear infinite;
  text-shadow: 0 0 4px rgba(255,255,255,0.5);
  transform-origin: center;
}

.star-wars-fighter.fighter-1 {
  top: 15%;
  left: -30px;
  animation-delay: 0s;
  animation-duration: 18s;
  color: #ffffff;
}

.star-wars-fighter.fighter-2 {
  top: 35%;
  left: -30px;
  animation-delay: -6s;
  animation-duration: 22s;
  font-size: 14px;
  color: #ffaa00;
}

.star-wars-fighter.fighter-3 {
  top: 55%;
  left: -30px;
  animation-delay: -12s;
  animation-duration: 20s;
  font-size: 22px;
  color: #ffffff;
}

.star-wars-fighter.fighter-4 {
  top: 75%;
  left: -30px;
  animation-delay: -18s;
  animation-duration: 25s;
  font-size: 16px;
  color: #ff6600;
}

.star-wars-fighter.fighter-5 {
  top: 25%;
  left: -30px;
  animation-delay: -9s;
  animation-duration: 16s;
  font-size: 20px;
  color: #cccccc;
}

.star-wars-fighter.fighter-6 {
  top: 45%;
  left: -30px;
  animation-delay: -15s;
  animation-duration: 19s;
  font-size: 12px;
  color: #ffffff;
}

@keyframes fighterMove {
  0% {
    transform: translateX(-30px) translateY(0) rotate(-15deg);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(calc(100vw + 50px)) translateY(-30px) rotate(-15deg);
    opacity: 0;
  }
}

/*========== STAR WARS BACKGROUND TOGGLE // ==========*/