:root {
  --body-bg-color: #f8fafc;
  --body-bg-gradient1: #f8fafc;
  --body-bg-gradient2: #e2e8f0;
  --body-text-color: #222222;
  --heading-color: #222222;
  --hero-gradient1: #ce1141;
  --hero-gradient2: #04a2ab;
  --footer-bg-color: #0d0d0d;
  --footer-bg-gradient1: #0d0d0d;
  --footer-bg-gradient2: #1f2937;
  --link-color: #ce1141;
  --box-color: #04a2ab;
  --box-text-color: #ffffff;
  --header-bg-color: #ffffff;
  --font-family: Verdana, Geneva, sans-serif;
  --nav-link-color: #141414;
  --footer-text-color: #ffffff;
  --header-text-color: #ffffffff;
}

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;

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("/images/body-bg.jpg");
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
}


h1 {
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
}

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: 15px 0;
  scroll-margin-top: 70px;
}

h2,
h3 {
  color: var(--heading-color) !important;
}

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

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

.content-area h2 {
  position: relative;
  display: inline-block;

  margin-bottom: 1.25rem;
  padding: 0.35rem 1rem 0.4rem 1.15rem;

  font-weight: 700;

  color: var(--heading-color) !important;

  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--link-color) 20%, transparent),
      transparent);

  border-radius: 6px;
}

.content-area h2::before {
  content: "";
  position: absolute;

  left: 0;
  top: 15%;
  bottom: 15%;

  width: 4px;

  background: var(--link-color);
  border-radius: 10px;
}


.content-area,
.sidebar-search-box,
.sidebar-links {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  padding: 2rem;
}

.content-area section {
  margin: 15px 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.main-section-style-bordered {
  position: relative;

  padding: 1.8rem 1.9rem;

  border: 0;
  border-radius: 14px;

  background:
    color-mix(in srgb,
      var(--body-bg-color) 96%,
      #ffffff);

  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--body-text-color) 12%, transparent),
    8px 8px 0 color-mix(in srgb, var(--link-color) 28%, transparent);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.main-section-style-bordered::before {
  content: "";
  position: absolute;

  top: 14px;
  left: 14px;

  width: 42px;
  height: 42px;

  border-top: 3px solid var(--link-color);
  border-left: 3px solid var(--link-color);

  border-radius: 6px 0 0 0;

  pointer-events: none;
}

.main-section-style-bordered::after {
  content: "";
  position: absolute;

  right: 14px;
  bottom: 14px;

  width: 42px;
  height: 42px;

  border-right: 3px solid var(--link-color);
  border-bottom: 3px solid var(--link-color);

  border-radius: 0 0 6px 0;

  pointer-events: none;
}

.main-section-style-contrast {
  position: relative;
  isolation: isolate;

  padding: 2rem;
  margin: 10px;

  border-radius: 16px;
  background: var(--box-color);

  border: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.main-section-style-contrast::before {
  content: "";
  position: absolute;
  z-index: -1;

  inset: -9px 9px 9px -9px;

  border: 2px solid color-mix(in srgb, var(--box-color) 55%, white);

  border-radius: 18px;

  opacity: 0.55;
}

.main-section-style-contrast::after {
  content: "";
  position: absolute;

  top: 0;
  right: 0;

  width: 52px;
  height: 52px;

  background:
    linear-gradient(225deg,
      rgba(255, 255, 255, 0.28) 0 49%,
      transparent 50%);

  border-radius: 0 16px 0 0;

  pointer-events: none;
}


.main-section-style-h3-list .main-section-h3-list {
  margin-top: 1rem;
}

.main-section-style-h3-list .box {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  padding: 1.7rem 1.8rem;
  border-radius: 0;

  background: var(--box-color);

  clip-path: polygon(0 0,
      calc(100% - 28px) 0,
      100% 28px,
      100% 100%,
      28px 100%,
      0 calc(100% - 28px));

  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.main-section-style-h3-list .box::before {
  content: "";
  position: absolute;
  inset: 10px;

  z-index: -1;

  border: 1px solid rgba(255, 255, 255, 0.22);

  clip-path: polygon(0 0,
      calc(100% - 22px) 0,
      100% 22px,
      100% 100%,
      22px 100%,
      0 calc(100% - 22px));
}

.main-section-style-h3-list .box::after {
  content: "";
  position: absolute;

  width: 90px;
  height: 90px;

  top: -35px;
  right: -35px;

  border: 18px solid rgba(255, 255, 255, 0.10);
  transform: rotate(45deg);

  pointer-events: none;
}

.main-section-style-h3-list .box:hover {
  transform: translateY(-4px) rotate(-0.3deg);
  filter: brightness(1.04);
}

.main-section-style-h3-list .box h3 {
  margin-bottom: 0.65rem;
}

.main-section-style-h3-list .box,
.main-section-style-h3-list .box :is(h2, h3, h4, h5, h6, p, li, span, strong, em, td, th, a) {
  color: var(--box-text-color, #ffffff) !important;
}

.main-section-style-h3-list .box a {
  text-decoration: underline !important;
}

.main-section-style-h3-list .box a:hover {
  color: var(--box-text-color, #ffffff) !important;
  opacity: 0.8;
}



.main-section-style-contrast {
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--box-color);
}

.main-section-style-contrast,
.main-section-style-contrast :is(h2, h3, h4, h5, h6, p, li, span, strong, em, td, th, a) {
  color: var(--box-text-color, #ffffff) !important;
}

.main-section-style-contrast a {
  text-decoration: underline !important;
}

.main-section-style-contrast a:hover {
  color: var(--box-text-color, #ffffff) !important;
  opacity: 0.8;
}







.sidebar-search-box {
  width: 279px;
  margin-bottom: 15px;
}

.sidebar-search-box h3 {
  margin: 0 0 20px;
  font-weight: 700;
  color: var(--body-text-color) !important;
}

.sidebar-search-box form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-search-box input[type="search"],
.sidebar-search-box input[type="email"] {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #ffffff;
  color: #222222 !important;
  font-size: 0.95rem;
  font-family: var(--font-family);
  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.sidebar-search-box input[type="search"]:focus,
.sidebar-search-box input[type="email"]:focus {
  border-color: var(--link-color);
  box-shadow: 0 0 0 4px rgba(176, 54, 54, 0.12);
}

.sidebar-search-box input[type="search"]::placeholder,
.sidebar-search-box input[type="email"]::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.sidebar-search-box button {
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--box-color);
  color: var(--box-text-color, white);
  ;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: 0 6px 18px rgba(59, 104, 91, 0.25);
}

.sidebar-newsletter-box p {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--body-text-color);
  opacity: 0.75;
}

.sidebar-links {
  width: 279px;
  margin-bottom: 15px;
}

.sidebar-links h3 {
  margin: 0 0 20px;
  font-weight: 700;
}

.sidebar-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-page-list li {
  list-style: none;
}

.sidebar-page-list a {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--body-text-color);
  background: transparent;
  font-size: 0.98rem;
  font-weight: 500;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

.sidebar-page-list a:hover {
  background: rgba(176, 54, 54, 0.08);
  color: var(--link-color);
  transform: translateX(4px);
}

.sidebar-page-list a.active {
  background: var(--box-color);
  color: var(--box-text-color, white);
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(59, 104, 91, 0.25);
}

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

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


.error_page {
  min-height: 70vh;
}


.footer {
  background: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(1.75rem, 2.5vw, 2.5rem);
  position: relative;
  overflow: hidden;
}

.footer a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;

  transition: opacity .2s ease, text-decoration-color .2s ease;
}

.footer a:hover,
.footer a:focus-visible {
  opacity: .9;
}

.footer .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--footer-text-color);
  background: var(--link-color);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.footer .social-icon:hover,
.footer .social-icon:focus-visible {
  transform: translateY(-3px);
  background: var(--link-color / 30%);
}

.footer .footer-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      var(--footer-text-color) 40%,
      transparent);
  margin: 1.25rem 0;
}

.footer .small {
  font-style: italic;
  font-size: .95rem;
}

@media (max-width: 575.98px) {
  .footer .social-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .footer .small {
    font-size: .9rem;
  }
}

.footer img {
  filter: brightness(0) invert(1);
}


.navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  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.with-bg {
  background-image: radial-gradient(circle at 69% 75%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 38%, transparent 38%, transparent 69%, transparent 69%, transparent 100%), radial-gradient(circle at 41% 58%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 3%, transparent 3%, transparent 75%, transparent 75%, transparent 100%), radial-gradient(circle at 94% 91%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 48%, transparent 48%, transparent 55%, transparent 55%, transparent 100%), radial-gradient(circle at 68% 38%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 34%, transparent 34%, transparent 36%, transparent 36%, transparent 100%), radial-gradient(circle at 81% 20%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 40%, transparent 40%, transparent 61%, transparent 61%, transparent 100%), radial-gradient(circle at 46% 37%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 37%, transparent 37%, transparent 76%, transparent 76%, transparent 100%), radial-gradient(circle at 49% 5%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 43%, transparent 43%, transparent 67%, transparent 67%, transparent 100%), radial-gradient(circle at 18% 58%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 4%, transparent 4%, transparent 20%, transparent 20%, transparent 100%), radial-gradient(circle at 43% 68%, hsla(65, 0%, 95%, 0.05) 0%, hsla(65, 0%, 95%, 0.05) 10%, transparent 10%, transparent 36%, transparent 36%, transparent 100%), linear-gradient(135deg, rgb(206, 17, 65), rgb(4, 162, 171));
}


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


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

}

.navbar .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 .navbar-nav .nav-link:hover {
  color: var(--link-color) !important;
  transform: translateY(-1px);
}

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

@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 .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;
  }
}

@media (max-width: 767px) {
  .content-area {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
  }
}