/* --- GLOBAL --- */
/*=====================================================
 light theme colors ( as SCSS mixin )
 =====================================================*/
/*=====================================================
 dark theme colors ( as SCSS mixin )
 =====================================================*/
/*=====================================================
 common variables ( as SCSS mixin ) 
 define common variable for light and dark here
 =====================================================*/
 .rounded-corner {
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
  }
  /*=====================================================
   ⚠ WARNING: please do not edit below this line,
   incorrect coding may break the theme
   Merging common variables with light and dark
   separately
   =====================================================*/
  :root {
    /*****
     Setting theme color to ghost accent color.
     --ghost-accent-color, --theme-color, and --gradient-color-one all are same color
     By default we used #215DEE
     If you want to disable gradient then just set
     the --gradient-color-two to the same color as --ghost-accent-color
     *****/
    --theme-color: var(--ghost-accent-color);
    /*  #215DEE */
    --gradient-color-one: #215DEE;
    --gradient-color-two: #B61CFF;
    --gradient-angle: 30deg;
    --gradient-primary: linear-gradient(var(--gradient-angle), var(--gradient-color-one), var(--gradient-color-two));
    --logo-header-height: 32px;
    --logo-footer-height: 32px;
    --white: #ffffff;
    --black: #000000;
    --success-color: #3cb44e;
    --error-color: #f02e2e;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-full: 50%;
    --global-width-wide: 1032px;
    --global-width-content: 700px;
    --body-background-color: #ffffff;
    --card-background-color: var(--white);
    --text-color-main: #2D3350;
    --text-color-dark: #090C1E;
    --tag-background-color: #EFF1F4;
    --background-color-alt: #100F15;
    --text-color-alt: var(--body-background-color);
    --border-color: #eeeeee;
    --code-background-color: #f1f1f1;
    --shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
  }
  [data-theme="dark"] {
    /*****
     Setting theme color to ghost accent color.
     --ghost-accent-color, --theme-color, and --gradient-color-one all are same color
     By default we used #215DEE
     If you want to disable gradient then just set
     the --gradient-color-two to the same color as --ghost-accent-color
     *****/
    --theme-color: var(--ghost-accent-color);
    /*  #215DEE */
    --gradient-color-one: #215DEE;
    --gradient-color-two: #B61CFF;
    --gradient-angle: 30deg;
    --gradient-primary: linear-gradient(var(--gradient-angle), var(--gradient-color-one), var(--gradient-color-two));
    --logo-header-height: 32px;
    --logo-footer-height: 32px;
    --white: #ffffff;
    --black: #000000;
    --success-color: #3cb44e;
    --error-color: #f02e2e;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-full: 50%;
    --global-width-wide: 1032px;
    --global-width-content: 700px;
    --body-background-color: #100F15;
    --card-background-color: #17171C;
    --text-color-main: #d4d4d4;
    --text-color-dark: #f1f1f1;
    --tag-background-color: #313438;
    --background-color-alt: #ffffff;
    --text-color-alt: var(--body-background-color);
    --border-color: #28272c;
    --code-background-color: #05091a;
    --shadow: 0 3px 10px -2px rgba(4, 9, 14, 0.1), 0 10px 25px -30px rgba(0, 0, 0, 0.1);
  }
  


/* --- HERO --- */
.site-hero {
    margin-top: 1rem;
    margin-bottom: 6rem;
  }
  .site-hero .intro-title {
    margin-top: 0;
  }
  @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
    .site-hero .intro-title span {
      background-image: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .site-hero .intro-description {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 900px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }
  .site-hero .intro-description span {
    font-weight: 700;
  }
  .site-hero .cta-wrapper {
    margin-top: 3rem;
  }
  /* centered hero area */
  .site-hero-centered .hero-intro-content {
    max-width: var(--global-width-wide);
    margin-left: auto;
    margin-right: auto;
  }
  .site-hero-centered .intro-description {
    max-width: var(--global-width-content);
    margin-left: auto;
    margin-right: auto;
  }
  /* hero two column */
  .hero-two-column {
    display: flex;
    gap: 48px;
    align-items: center;
  }
  .hero-column-left {
    flex: 1 0 50%;
    max-width: 850px;
  }
  .hero-column-right {
    flex: 1;
    align-self: flex-start;
    position: relative;
    min-width: 300px;
  }
  @media (max-width: 991px) {
    .hero-two-column {
      flex-direction: column;
    }
    .hero-column-left {
      max-width: 100%;
    }
    .hero-column-right {
      max-width: 700px;
      margin: 0 auto;
    }
  }
  .hero-email-subscription {
    position: relative;
    margin-top: 3rem;
    max-width: 520px;
  }
  .hero-email-subscription::before {
    content: "";
    position: absolute;
    border-radius: 99px;
    inset: 0;
    background-image: var(--gradient-primary);
  }
  .hero-email-subscription:after {
    content: "";
    position: absolute;
    border-radius: 99px;
    inset: 2px;
    background-color: var(--card-background-color);
  }
  .hero-subscription-form {
    position: relative;
    padding: 0.5rem;
    z-index: 9;
  }
  .hero-subscription-form .email {
    flex: 1 1 150px;
    margin-bottom: 0;
    margin-right: 0.5rem;
    background: transparent;
    border: 0px;
  }
  .hero-subscription-form .email:focus {
    border: 0px;
    outline: -webkit-focus-ring-color auto 1px;
  }
  .hero-subscription-form .email:focus-visible {
    outline: none;
  }
  .site-cover-image-wrapper img {
    aspect-ratio: 0.8;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-16);
  }
  .total-member-card {
    position: absolute;
    bottom: -32px;
    left: -32px;
    background-color: var(--card-background-color);
    padding: 1.5rem;
    border-radius: var(--radius-16);
    border: 1px solid var(--border-color);
    display: flex;
    animation: 8s linear infinite move;
  }
  .total-member-card:hover {
    animation-play-state: paused;
  }
  .total-member-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-16);
    box-shadow: 2px 4px 30px var(--gradient-color-two), -2px -4px 30px var(--gradient-color-one);
    opacity: 0.15;
  }
  .total-member {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-right: 1rem;
  }
  .member-subtext {
    max-width: 150px;
    font-size: 0.875rem;
  }
  @keyframes move {
    0% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, -20px, 0);
    }
  }
  @media (max-width: 991px) {
    .total-member-card {
      left: -16px;
    }
  }
  @media (max-width: 767px) {
    .site-hero .intro-description {
      font-size: 1.125rem;
    }
  }
  @media (max-width: 575px) {
    .hero-subscription-form .email {
      padding: 0 1rem;
    }
  }