/* ------------------------------------
  JwEffectsBg
 ------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

[background-effect] {
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  will-change: transform, filter, opacity;
  isolation: isolate;
}

[background-effect]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
  transition: inherit;
}

[background-indicator="dot"] {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 100;
}

.background-nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.background-nav-dot:hover,
.background-nav-dot.active {
  background: white;
  transform: scale(1.3);
}

@media (max-width: 768px) {
  [background-indicator="dot"] {
    right: 1rem;
  }

  [background-effect] {
    background-attachment: scroll;
  }
}
/* ------------------------------------
  JwDropdown
 ------------------------------------ */
/* Menu Styling */
[data-function="menu-dropdown"] {
  background-color: #333;
}

[menu-item] {
  position: relative;
  display: inline-block;
}

[menu-item] a,
[menu-item] div {
  display: block;
  padding: 0px 0px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  /* Make divs and anchors clickable */
}

[menu-item] a:hover,
[menu-item] div:hover {
  background-color: #555;
}

/* Submenu Styling */
[data-function="menu-dropdown"] [menu-content="sub"] {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 200px;
}

[data-function="menu-dropdown"] [menu-content="sub"] [menu-item] {
  display: block;
}

[data-function="menu-dropdown"] [menu-content="sub"] [menu-item] a,
[data-function="menu-dropdown"] [menu-content="sub"] [menu-item] div {
  padding: 0px 0px;
}

[data-function="menu-dropdown"] [menu-content="sub"] [menu-content="sub"] {
  top: 0;
  left: 100%;
}

/* Show Submenu on Hover */
[data-function="menu-dropdown"]
  [menu-action="dropdown"]:hover
  > [menu-content="sub"] {
  display: block;
}
/* ------------------------------------
  JwTabs
 ------------------------------------ */
[tabs-buttons="buttons"] {
  display: flex;
  position: relative;
}

[tabs-panels="panels"] {
  flex: 1;
}

[tabs-data] {
  position: relative;
  flex: 1;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  overflow: hidden;
}

[tabs-data].active {
  /* background: #ddd; */
}

[tabs-contents] {
  display: none;
}

[tabs-contents].active {
  display: block;
}

[tabs-data]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: #4caf50;
  transform-origin: left;
  transform: scaleX(0);
}

[tabs-data].active::after {
  animation: fillBar var(--interval) linear forwards;
}

[tabs-data].paused::after {
  animation-play-state: paused !important;
}

@keyframes fillBar {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Vertical Tabs */
[data-function="tabs-contents"].vertical {
  display: flex;
}

[data-function="tabs-contents"].vertical [tabs-buttons="buttons"] {
  flex-direction: column;
  width: 160px;
}

[data-function="tabs-contents"].vertical [tabs-data] {
  width: 100%;
}

[data-function="tabs-contents"].vertical [tabs-data]::after {
  bottom: auto;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  transform-origin: top;
  transform: scaleY(0);
}

[data-function="tabs-contents"].vertical [tabs-data].active::after {
  animation: fillBarVertical var(--interval) linear forwards;
}

[data-function="tabs-contents"].vertical [tabs-data].paused::after {
  animation-play-state: paused !important;
}

@keyframes fillBarVertical {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}
/* ------------------------------------
  JwTyping
 ------------------------------------ */
.typing-container {
  display: inline-block;
  font-family: "Verdana", sans-serif;
  font-size: 20px;
  color: #333;
  position: relative;
}

.typing-cursor {
  display: inline-block;
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}
/* ------------------------------------
  JwScrollEffects
 ------------------------------------ */
[scroll-data-effect] {
  transform: translate(0, 0) scale(1) rotate(0deg);
  transition: all 1s ease;
}

[scroll-data-effect="animate-bottom-to-position"] {
  transform: translateY(100px);
}

[scroll-data-effect="animate-top-to-position"] {
  transform: translateY(-100px);
}

[scroll-data-effect="animate-left-to-position"] {
  transform: translateX(-100px);
}

[scroll-data-effect="animate-right-to-position"] {
  transform: translateX(100px);
}

[scroll-data-effect="zoom-in"] {
  transform: scale(0.5);
}

[scroll-data-effect="zoom-out"] {
  transform: scale(1.5);
}

[scroll-data-effect="rotate"] {
  transform: rotate(90deg);
}

[scroll-data-effect="fade-in"] {
  opacity: 0;
}

[scroll-data-effect="fade-out"] {
  opacity: 1;
}

[scroll-data-effect="bounce-up"] {
  transform: translateY(200px);
}

[scroll-data-effect="bounce-down"] {
  transform: translateY(-200px);
}

[scroll-data-effect].active {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
}

[scroll-data-effect].reflect {
  opacity: 1;
  transform: scale(1);
}
/* ------------------------------------
  JwEffectsDivs
 ------------------------------------ */
div[div-effect] {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  opacity: 1;
  /* Initially visible */
  transform: scale(1);
}

/* Animation Keyframes for various effects */

/* Zoom In and Out Effect */
@keyframes zoomInOut {
  0%,
  100% {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Top to Bottom Animation */
@keyframes topToBottom {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

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

/* Left to Right Animation */
@keyframes leftToRight {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  50% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Bottom to Top Animation */
@keyframes bottomToTop {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

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

/* Right to Left Animation */
@keyframes rightToLeft {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
/* ------------------------------------
  JwAccordion
 ------------------------------------ */
[data-function="accordion"] {
  margin: 0;
}

[accordion-progress] {
  height: 4px;
  width: 100%;
  /* background: #e0e0e0; */
  overflow: hidden;
  position: relative;
}

[accordion-progress] .progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 0, 0, 1));
  transition: none;
  position: absolute;
  top: 0;
  left: 0;
}

[accordion-item] {
  overflow: hidden;
}

[accordion-data="header"] {
  cursor: pointer;
  position: relative;
}

[accordion-data="header"]::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

[accordion-item].active [accordion-data="header"]::after {
  content: "-";
}

[accordion-data="content"] {
  display: none;
  overflow: hidden;
}

[accordion-item].active [accordion-data="content"] {
  display: block;
}