:root {
  --body-bg-color: #f8fafc;
  --body-text-color: #222222;
  --heading-color: #222222;
  --hero-gradient1: #6800e3;
  --hero-gradient2: #b400c8;
  --footer-bg-color: #e6e6e6;
  --link-color: #b400c8;
  --header-bg-color: #f8fafc;
  --font-family: 'Trebuchet MS', Helvetica, sans-serif;
  --nav-link-color: #141414;
  --footer-text-color: #000000;
  --header-text-color: #000000;
}

html {
  overflow-x: hidden;
}

body {
  background-color: var(--body-bg-color);
  color: var(--body-text-color) !important;
  font-family: var(--font-family);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

}


h1 {
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
  background: linear-gradient(135deg, #6800e3, #b400c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
}

h3 {
  font-size: clamp(1.4rem, 3vw, 1.7rem) !important;
}

p {
  margin-bottom: 0.5rem !important;
}

section {
  padding: 40px 0;
  scroll-margin-top: 70px;
}

section h2 {
  position: relative;
  display: table;
  margin: 0 auto 15px;
  font-family: var(--font-family);
  color: var(--body-bg-color);
  padding: 0.35em 0.65em;
  border-radius: 0.9em 0.25em 0.9em 0.35em;
  background:
    linear-gradient(135deg, var(--hero-gradient1), var(--hero-gradient2));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.55) inset;
  transform: rotate(-0.6deg);
}

section h2::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 1.05em 0.35em 1.05em 0.45em;
  background:
    radial-gradient(120% 90% at 10% 20%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(120% 90% at 90% 80%, rgba(0, 0, 0, 0.10), transparent 55%);
  z-index: -1;
  filter: blur(6px);
}

section img {
  border-radius: 85% 15% 85% 15% / 15% 85% 15% 85%;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}

.content-area a {
  color: var(--link-color) !important;
  text-decoration: underline double !important;
}

.content-area a:hover {
  color: var(--link-color) !important;
  opacity: 0.8;
}

.sidebar-page-list {
  padding: 0;
  margin: 0;
  margin-bottom: 17px;
  width: 279px;
}

.sidebar-page-list li {
  list-style-type: disc;
  list-style-position: inside;
  color: var(--heading-color);
}

.sidebar-page-list li::marker {
  color: var(--link-color);
  font-size: 1.2em;
}

.sidebar-page-list li:last-child {
  border-bottom: none;
}

.sidebar-page-list li a {
  padding: 12px 0;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  color: var(--link-color);
}

.sidebar-page-list li a:hover {
  padding-left: 11px;
}

.twitter-tweet {
  width: 279px !important;
}

.x {
  display: flex;
  justify-content: center;
}

.error_page {
  min-height: 70vh;
}


.footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
}

.footer a {
  text-decoration: none;
  color: var(--link-color) !important;
}

.footer a:hover {
  color: var(--link-color) !important;
  opacity: 0.8;
}



.navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--header-bg-color) !important;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.hero-section {
  padding: 55px 0;
  position: relative;
  overflow: hidden;
  color: var(--header-text-color);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.246);
}

.hero-section.gradient-bg {

  width: 100%;
  height: 100%;
  --s: 105px;
  --c1: #d8d8d8;
  --c2: #e4e4e4;
  --c3: #fafafa;

  background: conic-gradient(from 75deg,
      var(--c1) 15deg,
      var(--c2) 0 30deg,
      #0000 0 180deg,
      var(--c2) 0 195deg,
      var(--c1) 0 210deg,
      #0000 0) calc(0.5 * var(--s)) calc(0.5 * var(--s) / 0.577),
    conic-gradient(var(--c1) 30deg,
      var(--c3) 0 75deg,
      var(--c1) 0 90deg,
      var(--c2) 0 105deg,
      var(--c3) 0 150deg,
      var(--c2) 0 180deg,
      var(--c3) 0 210deg,
      var(--c1) 0 256deg,
      var(--c2) 0 270deg,
      var(--c1) 0 286deg,
      var(--c2) 0 331deg,
      var(--c3) 0);
  background-size: var(--s) calc(var(--s) / 0.577);

  --mask:
    radial-gradient(44.72px at 50% 60px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(44.72px at 50% -40px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(44.72px at 50% calc(100% - 60px), #000 99%, #0000 101%) 50% 100%/80px 51% repeat-x,
    radial-gradient(44.72px at 50% calc(100% + 40px), #0000 99%, #000 101%) calc(50% - 40px) calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.hero-section .container {
  position: relative;
  z-index: 2;
}


@media (max-width: 768px) {
  .hero-section {
    padding: 60px 0;
  }

}

.navbar-light .navbar-nav .nav-link {
  color: var(--nav-link-color, #141414) !important;
  font-weight: 500;
  padding: 0 1rem;
  transition: color 0.3s ease, transform 0.2s ease;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--link-color) !important;
  transform: translateY(-1px);
}

.navbar-light .navbar-nav .nav-link.active {
  color: var(--link-color) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--link-color);
}

/* Mobile nav */
@media (max-width: 1199.98px) {
  .navbar-collapse {
    position: fixed;
    top: 61px;
    left: 15px;
    right: 15px;
    background-color: color-mix(in srgb,
        var(--header-bg-color) 65%,
        transparent);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    padding: 15px;
    margin: 0;
  }

  .navbar-nav {
    width: 100%;
  }

  .navbar-nav .nav-item {
    margin: 7px 0;
  }

  .navbar-nav .nav-item:hover {
    transform: translateY(-1px);
  }

  .navbar-nav .nav-link {
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    display: block;
    padding: 0;
  }

  .navbar-toggler {
    z-index: 10000;
    position: relative;
    border: var(--bs-border-width) solid var(--nav-link-color, #141414) !important;
  }
}


.custom-dropdown {
  border: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  min-width: 220px;
  background: color-mix(in srgb,
      var(--header-bg-color) 65%,
      transparent) !important;
  backdrop-filter: blur(12px);
}

.custom-dropdown .dropdown-item {
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
  color: var(--nav-link-color, #141414) !important;
  font-weight: 500;
  border-radius: 0;
  text-wrap: wrap;
}

.dropdown-menu {
  display: none;
}

.custom-dropdown .dropdown-item:hover {
  color: #fff;
  background: color-mix(in srgb,
      var(--header-bg-color) 95%,
      transparent) !important;
}

.nav-item.dropdown>.nav-link {
  display: flex;
  align-items: center;
}

.nav-item.dropdown>.nav-link .arrow {
  position: relative;
  margin-left: auto;
  border: solid var(--nav-link-color, #141414);
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  transition: transform 0.25s;
}

.dropdown.open .dropdown-menu {
  display: block;
}

@media (min-width: 1200px) {
  .nav-item.dropdown {
    position: relative;
  }

  .nav-item.dropdown>.nav-link .arrow {
    margin-left: 7px;
  }

  .custom-dropdown.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    z-index: 1000;
  }

  .nav-item.dropdown:hover>.nav-link .arrow {
    transform: rotate(-135deg);
  }

  .nav-item.dropdown:hover>.dropdown-menu {
    display: block !important;
  }
}

@media (max-width: 1199px) {
  .nav-item.dropdown>.nav-link .arrow {
    padding: 4px;
  }
}

.contact-container {
  margin: 40px auto;
  border-radius: 8px;
  color: black !important;
}

@media screen and (max-width: 768px) {
  .contact-container {
    width: 100%;
    padding: 15px;
  }
}

.contact-container .form {
  width: 440px;
  height: 510px;
  background: #E6E6E6;
  border-radius: 8px;
  box-shadow: 0 0 40px -10px #000;
  padding: 20px 30px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  position: relative;
}

.contact-container h2 {
  margin: 10px 0;
  padding-bottom: 10px;
  width: 320px;
  color: var(--hero-gradient1);
  border-bottom: 3px solid var(--hero-gradient2);
}

.contact-container input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: none;
  outline: none;
  resize: none;
  border: 0;
  font-family: "Montserrat", sans-serif;
  transition: all 0.3s;
  border-bottom: 2px solid var(--hero-gradient1);
}

.contact-container input:focus {
  border-bottom: 2px solid var(--hero-gradient1);
}

.contact-container p:before {
  content: attr(type);
  display: block;
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--hero-gradient1);
}

.contact-container button {
  float: right;
  padding: 8px 12px;
  margin: 8px 0 0;
  font-family: "Montserrat", sans-serif;
  border: 2px solid var(--hero-gradient1);
  background: 0;
  color: var(--hero-gradient1);
  cursor: pointer;
  transition: all 0.3s;
}

.contact-container button:hover {
  background: var(--hero-gradient2);
  color: #fff;
}

.contact-container .mail-container {
  content: "";
  position: absolute;
  bottom: -15px;
  right: -20px;
  background: var(--hero-gradient1);
  color: #fff;
  width: 320px;
  padding: 16px 4px 16px 0;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 10px 10px 40px -14px #000;
}

.contact-container .mail-container p:before {
  content: none;
}

.contact-container span {
  margin: 0 5px 0 15px;
}

.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--link-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--footer-bg-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--link-color), transparent 20%);
  color: var(--footer-bg-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

.styled {
  --mask:
    radial-gradient(44.72px at 50% 60px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(44.72px at 50% -40px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(44.72px at 50% calc(100% - 60px), #000 99%, #0000 101%) 50% 100%/80px 51% repeat-x,
    radial-gradient(44.72px at 50% calc(100% + 40px), #0000 99%, #000 101%) calc(50% - 40px) calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background-image: radial-gradient(circle at 44% 13%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 98%, transparent 98%, transparent 100%), radial-gradient(circle at 87% 84%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 46%, transparent 46%, transparent 100%), radial-gradient(circle at 84% 60%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 40%, transparent 40%, transparent 100%), radial-gradient(circle at 21% 32%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 28%, transparent 28%, transparent 100%), radial-gradient(circle at 57% 12%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 34%, transparent 34%, transparent 100%), radial-gradient(circle at 33% 60%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 29%, transparent 29%, transparent 100%), radial-gradient(circle at 3% 11%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 60%, transparent 60%, transparent 100%), radial-gradient(circle at 0% 74%, hsla(237, 0%, 100%, 0.05) 0%, hsla(237, 0%, 100%, 0.05) 87%, transparent 87%, transparent 100%), linear-gradient(45deg, rgb(180, 0, 200), rgb(104, 0, 227));

  padding: 40px 25px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  color: var(--body-bg-color);
}