.body {
       margin: 0;
       font-family: "Norwester", sans-serif, -apple-system, Segoe UI, Roboto, 'Norwester', sans-serif;
       background: #f9fafc;
       color: #222;
       line-height: 1.7;
   }

   .Joinhero {
       display: grid;
       grid-template-columns: 1fr 1fr;
       align-items: center;
       gap: 3rem;
       padding: 3rem 3rem;
       background: linear-gradient(135deg, #0a2540, #1d72b8);
       color: white;
       height: 54rem;
       width: 122rem;
   }

   .Joinhero img {
       width: 103%;
           max-width:880px;
       border-radius: 50%;
       filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 1.18));
       justify-self: center;
       margin: -10rem 10rem;
   }

   .JoinHeading {
          color: white;
    padding: 0rem 3.3rem;
    font-weight: 100;
    width: 62rem;
   }

   .JoinSubHeading {
            color: rgb(255, 255, 255);
    background-color: #ff4e00;
    padding: 0.3rem 0.9rem;
    border-radius: 12.6rem;
    margin-left: 0rem;
    font-weight: 100;
    width: 19rem;
    font-size: 1rem;
    height: 2rem;
    margin: 0rem 3.5rem;
   }

   .JoinHeadParaBlock {
       display: block;
       position: relative;
       align-items: center;
       align-self: center;
       align-content: center;

   }
   .JoinHeadingPara {
       font-size: 1.1rem;
       margin-top: 1rem;
       color: #e4ebf3;
    margin-left: 3.6rem;   }

   .JoinParaST {
       font-weight: 100;
       color: black;
       background-color: #ffffff;
       padding: 0.3rem 1rem;
       border-radius: 0.6rem;
          margin-left: 3.4rem;

   }

   .Joinhero-text {
       display: block;
       align-items: flex-start;
       justify-items: flex-start;
   }

   .JoinBtn-Primary {
          background: #000000;
    color: #ffffff;
    font-weight: 100;
    padding: 0.8rem 1.5rem;
    margin: 0rem 3.3rem;
    border-radius: 40px;
    transition: transform .3s ease, box-shadow .3s ease;
    font-family: 'Norwester';
    font-size: 1rem;
   }

   .JoinBtn-Primary:hover {
       transform: scale(1.05);
       box-shadow: 0 6px 15px #ff7917;
       background-color: black;
   }

   .JoinBookBtn {
       margin: 3rem 0rem;
   }

   .community-section {
      margin: 10rem 19rem;
    text-align: center;
    height: 60%;
   }

   .community-title {
       font-size: 5.2rem;
       font-weight: 100;
       color: #0a2540;
       margin-bottom: 0.5rem;
       width: 83rem;
   }

   .community-subtitle {

       font-size: 1.1rem;
   }

   .community-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(511px, 5fr));
       gap: 2rem;
       min-width: 107rem;
       margin: 0rem -15rem;
   }

   
   .cta:active {
       transform: translateY(0);
       opacity: .9;
   }
   /* ============================
   JoinHero RESPONSIVE
   ============================ */
/* ============================
   JoinHero Inner Responsive
   ============================ */
@media (max-width: 1024px) {
  .Joinhero {
   display: flex;
        flex-direction: column;
        gap: 2rem;
        width: auto;
        height: auto;
        padding: 6rem 0rem;
        margin: 0rem 0rem;
        align-items: flex-start;
  }

  .Joinhero-text {
    max-width: 90%;
        justify-items: flex-start;
        padding: 3rem 0rem;
        display: block;
  }

  .Joinhero img {
        width: 334px;
        padding: 0rem 0rem;
  }

  .JoinHeading {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .JoinHeadingPara {
    font-size: 1rem;
    line-height: 1.5;
  }

  .JoinBookBtn {
            margin: 1rem -2rem;
        padding: 0rem 0rem;
  }
}

@media (max-width: 600px) {
  .JoinHeading {
    font-size: 1.5rem;
    padding: 0rem 1.3rem;
  }

  .JoinSubHeading {
   padding: 0.3rem 0.8rem;
        margin: 0rem 1rem;
        height: 2rem;
    }

  .JoinParaST {
    display: block;
    font-weight: 100;
    color: black;
    font-size: 0.7rem !important;
    background-color: #ffffff;
    padding: 0.3rem 0.3rem;
    margin-left: 1rem;
    border-radius: 17rem;
  }

  .JoinHeadingPara {
    font-size: 0.9rem;
        margin-left: 1.5rem;
  }

  .JoinBtn-Primary {
    font-size: 0.9rem;
    padding: 0.6rem 1.1rem;
    display: inline-block;
    text-align: center;
    margin: 1rem 3.3rem;
  }

  .Joinhero img {
    max-width: 340px;
  }
}
/* Animated angle custom property */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root{
  --page-bg:#000;          /* site dark bg */
  --card-bg:#fff;          /* white card */
  --card-fg:#0b0b0b;       /* black text */
  --muted:#646b74;
  --ring-1:#5ddcff;
  --ring-2:#3c67e3;
  --ring-3:#4e00c2;
  --shadow: 0 20px 60px rgba(0,0,0,.25);
  --radius: 18px;
}

.join-community{ 
  padding: clamp(28px,5vw,56px) clamp(16px,5vw,40px);
  background: var(--page-bg); 
}

.jc-wrap{
  /* if you use Bootstrap container-fluid this just enhances layout */
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(16px,2.4vw,28px);
  align-items: stretch;
}

.jc-card{
  grid-column: span 4;
  position: relative;
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--card-fg);
  min-height: 260px;
  box-shadow: var(--shadow);
  overflow: clip; /* prevents bleed of glow */
  isolation: isolate; /* keeps glow behind content */
}

/* Full-card link makes the whole card clickable */
.jc-card__link{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px);
  padding-right: clamp(90px,10vw,120px); /* space for arrow circle */
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Subtle decorative corner texture per-card using --bg */
.jc-card::after{
  content:"";
  position: absolute;
  inset: -20% -30% auto auto; /* top-right corner flourish */
  height: 70%;
  width: 70%;
  background-image: var(--bg, radial-gradient(40% 40% at 70% 20%, rgba(0,0,0,.06), transparent 60%));
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

/* Animated gradient ring border using mask (keeps interior white) */
.jc-card::before{
  content:"";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 2px);
  background: conic-gradient(from var(--angle),
              var(--ring-1), var(--ring-2) 35%, var(--ring-3) 70%, var(--ring-1));
  animation: jc-spin 6s linear infinite;
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px; /* ring thickness */
  z-index: -1;
}

/* Soft outer glow for drama */
.jc-card .jc-glow,
.jc-card__link::before{
  content:"";
  position: absolute;
  inset: -35%;
  background: radial-gradient(60% 60% at 50% 40%,
              color-mix(in hsl, var(--ring-2) 25%, transparent) 0%,
              transparent 70%);
  filter: blur(40px);
  opacity: .25;
  z-index: -2;
}

/* Headings */
.jc-head h3{
  font-size: clamp(18px,2.1vw,22px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .1px;
}
.jc-head h3 span{
  color: var(--muted);
  font-weight: 600;
}

/* Paragraph */
.jc-card p{
  margin: 0;
  color: #222;
  line-height: 1.55;
  font-size: clamp(14px,1.7vw,16px);
}

/* Actions */
.jc-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.jc-btn{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: #0e0e0e;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.jc-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.22); }

.jc-btn--light{
  background: #eef1f5;
  color: #0b0b0b;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.08);
}

/* Big black circle arrow on the right */
.jc-arrow{
  position: absolute;
  right: clamp(14px,2vw,18px);
  top: 50%;
  translate: 0 -50%;
  width: clamp(52px,6.4vw,64px);
  height: clamp(52px,6.4vw,64px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(20px,2.2vw,26px);
  background: #0c0c0c;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, background .2s ease;
  pointer-events: none; /* link already on parent */
}

/* Hover / focus states */
.jc-card:hover .jc-arrow,
.jc-card:has(.jc-card__link:focus-visible) .jc-arrow{
  transform: translateY(-50%) scale(1.06) rotate(6deg);
  background: #000;
}

/* Motion control */
@media (prefers-reduced-motion: reduce){
  .jc-card::before{ animation: none; }
}

/* Spin keyframes */
@keyframes jc-spin{
  to { --angle: 1turn; }
}

/* Responsive grid */
@media (max-width: 1100px){
  .jc-card{ grid-column: span 6; }
}
@media (max-width: 680px){
  .jc-card{ grid-column: span 12; }
}
/* Animated angle custom property */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root{
  --page-bg:#000;          /* site dark bg */
  --card-bg:#fff;          /* white card */
  --card-fg:#0b0b0b;       /* black text */
  --muted:#646b74;
  --ring-1:#5ddcff;
  --ring-2:#3c67e3;
  --ring-3:#4e00c2;
  --shadow: 0 20px 60px rgba(0,0,0,.25);
  --radius: 18px;
}

.join-community{ 
  padding: clamp(28px,5vw,56px) clamp(16px,5vw,40px);
  background: var(--page-bg); 
}

.jc-wrap{
  /* if you use Bootstrap container-fluid this just enhances layout */
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(16px,2.4vw,28px);
  align-items: stretch;
}

.jc-card{
  grid-column: span 4;
  position: relative;
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--card-fg);
  min-height: 260px;
  box-shadow: var(--shadow);
  overflow: clip; /* prevents bleed of glow */
  isolation: isolate; /* keeps glow behind content */
}

/* Full-card link makes the whole card clickable */
.jc-card__link{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px);
  padding-right: clamp(90px,10vw,120px); /* space for arrow circle */
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Subtle decorative corner texture per-card using --bg */
.jc-card::after{
  content:"";
  position: absolute;
  inset: -20% -30% auto auto; /* top-right corner flourish */
  height: 70%;
  width: 70%;
  background-image: var(--bg, radial-gradient(40% 40% at 70% 20%, rgba(0,0,0,.06), transparent 60%));
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

/* Animated gradient ring border using mask (keeps interior white) */
.jc-card::before{
  content:"";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 2px);
  background: conic-gradient(from var(--angle),
              var(--ring-1), var(--ring-2) 35%, var(--ring-3) 70%, var(--ring-1));
  animation: jc-spin 6s linear infinite;
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px; /* ring thickness */
  z-index: -1;
}

/* Soft outer glow for drama */
.jc-card .jc-glow,
.jc-card__link::before{
  content:"";
  position: absolute;
  inset: -35%;
  background: radial-gradient(60% 60% at 50% 40%,
              color-mix(in hsl, var(--ring-2) 25%, transparent) 0%,
              transparent 70%);
  filter: blur(40px);
  opacity: .25;
  z-index: -2;
}

/* Headings */
.jc-head h3{
  font-size: clamp(18px,2.1vw,22px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .1px;
}
.jc-head h3 span{
  color: var(--muted);
  font-weight: 600;
}

/* Paragraph */
.jc-card p{
  margin: 0;
  color: #222;
  line-height: 1.55;
  font-size: clamp(14px,1.7vw,16px);
}

/* Actions */
.jc-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.jc-btn{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: #0e0e0e;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.jc-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.22); }

.jc-btn--light{
  background: #eef1f5;
  color: #0b0b0b;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.08);
}

/* Big black circle arrow on the right */
.jc-arrow{
  position: absolute;
  right: clamp(14px,2vw,18px);
  top: 50%;
  translate: 0 -50%;
  width: clamp(52px,6.4vw,64px);
  height: clamp(52px,6.4vw,64px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(20px,2.2vw,26px);
  background: #0c0c0c;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, background .2s ease;
  pointer-events: none; /* link already on parent */
}

/* Hover / focus states */
.jc-card:hover .jc-arrow,
.jc-card:has(.jc-card__link:focus-visible) .jc-arrow{
  transform: translateY(-50%) scale(1.06) rotate(6deg);
  background: #000;
}

/* Motion control */
@media (prefers-reduced-motion: reduce){
  .jc-card::before{ animation: none; }
}

/* Spin keyframes */
@keyframes jc-spin{
  to { --angle: 1turn; }
}

/* Responsive grid */
@media (max-width: 1100px){
  .jc-card{ grid-column: span 6; }
}
@media (max-width: 680px){
  .jc-card{ grid-column: span 12; }
}
.join-community{
    margin: 14rem 0rem;
}