.nav-link-custom {
  position: relative;
  padding: 8px 16px;
  transition: 0.3s ease;

  background: linear-gradient(
    180deg,
    #2f7de1,
    #1f5fbf
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 19px;
}

.nav-link-custom:hover {
  background: linear-gradient(
    90deg,
    #f6d365 0%,
    #fda085 40%,
    #f6d365 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.active-nav{
background: linear-gradient(
  90deg,
    #f6d365 0%,
    #fda085 40%,
    #f6d365 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.active-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  height: 2px;
    background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 170, 50, 0.3) 20%,
    rgba(255, 190, 80, 0.8) 50%,
    rgba(255, 170, 50, 0.3) 80%,
    transparent 100%
  );
}
@media screen and (max-width: 768px) {
  .active-nav::after{
    bottom: 5px;
  }
  .nav-desk{
    display: none;
  }
}


.jw-flex-center {
  display: flex;

}


/* JailWatch Pro branded background */
.jwpro-bg {
  background-image: url("/static/img/bgtry1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  

}


/* Optional: keep content readable */
.jwpro-surface {
background: rgba(10, 20, 35, 0.70);
border: 1px solid rgba(200, 169, 62, 0.25);
border-radius: 14px;
backdrop-filter: blur(6px);
}



/* Buttons (brand) */
.btn-gold {
background: #C8A93E;
color: #0E1A2B;
border: 1px solid rgba(255,255,255,0.15);
}
.btn-gold:hover { filter: brightness(1.05); }




.btn-red {
background: #B91C1C;
color: #F9FAFB;
}



/* MANUAL STYLES  BY ABHISAR JAIN*/


.gradient-line {
  height: 2px;              /* thickness of line */
  width: 100%;
  background: linear-gradient(
    to right,
    transparent,
    #ff7a18,
    #ffd200,
    #ff7a18,
    transparent
  );
}

.gold-divider {
  position: relative;
  height: 2px;
  width: 100%;
  margin: 30px 0;


  /* base subtle line */
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 170, 50, 0.3) 20%,
    rgba(255, 190, 80, 0.8) 50%,
    rgba(255, 170, 50, 0.3) 80%,
    transparent 100%
  );
}


/* glowing highlight in center */
.gold-divider::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 6px;

  background: radial-gradient(
    circle,
    rgba(255, 210, 120, 0.9),
    rgba(255, 170, 50, 0.4),
    transparent 70%
  );

  filter: blur(3px);
}




/* TRANSPARENT CARD */

.jw-card {
  position: relative;
  padding: 30px;
  border-radius: 12px;

  /* glass background */
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(0px);

  /* border space */
  border: 1px solid transparent;

  /* gradient border */
  background-clip: padding-box;
}

/* gradient border layer */
.jw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;

  background: linear-gradient(
    135deg,
    rgba(255,190,80,0.9),
    rgba(255,140,0,0.7),
    rgba(255,190,80,0.9)
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

/* golden glow */
.jw-card {
  box-shadow:
    0 0 10px rgba(255,170,50,0.25),
    0 0 25px rgba(255,140,0,0.15);
}

.jw-gold-card-bg {
  background-image: url("/static/img/contact.png");
  
  background-size: cover;       /* full fill */
  background-position: center;  /* center glow */
  background-repeat: no-repeat;

  border-radius: 12px;

  /* optional glass overlay (screenshot jaisa feel) */
  position: relative;
  overflow: hidden;
  /* golden border */
  border: 1px solid rgba(255, 190, 80, 0.8);

  /* glow */
  box-shadow:
    0 0 12px rgba(255,150,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);

}

/* GOLD TEXT */

.jw-gold-text {
  background: linear-gradient(
    90deg,
    #f6d365 0%,   /* light gold */
    #fda085 40%,  /* warm gold */
    #f6d365 100%  /* light gold */
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  font-weight: 600;
}

/* RED BUTTON */
.jw-btn-red {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 28px;
  border-radius: 8px;
  border: none;

  color: white;
  font-weight: 600;
  cursor: pointer;

  /* red gradient */
 background-color: red;

  /* glow */
  box-shadow:
    0 4px 15px rgba(255,70,30,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);

  transition: all 0.25s ease;
}
.jw-btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 22px;
  border-radius: 8px;

  color: white;
  font-weight: 600;
  cursor: pointer;

  /* blue gradient (screenshot jaisa) */
  background: linear-gradient(
    180deg,
    #2f7de1,
    #1f5fbf
  );

  /* subtle border */
  border: 1px solid rgba(120, 170, 255, 0.6);

  /* glossy + glow */
  box-shadow:
    0 4px 12px rgba(30, 100, 220, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);

  transition: all 0.25s ease;
}

/* ORANGE BUTTON */
.jw-btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 22px;
  border-radius: 8px;

  color: #fff;
  font-weight: 600;
  cursor: pointer;

  /* orange gradient background */
  background: linear-gradient(
    135deg,
    #ff7a00,
    #ff9500
  );

  /* golden border */
  border: 1px solid rgba(255, 190, 80, 0.8);

  /* glow */
  box-shadow:
    0 0 12px rgba(255,150,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);

  transition: all 0.25s ease;
}

.jw-btn-outline-blue {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 28px;
  border-radius: 8px;

  color: #e8f0ff;
  font-weight: 600;
  cursor: pointer;

  /* dark glass background */
  background: linear-gradient(
    180deg,
    rgba(20, 30, 50, 0.85),
    rgba(10, 15, 30, 0.9)
  );

  /* blue border */
  border: 1px solid rgba(120,170,255,0.8);

  /* glow */
  box-shadow:
    0 0 12px rgba(80,140,255,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);

  backdrop-filter: blur(6px);

  transition: all 0.25s ease;
}
.account-icon {
  width: 110px;
  height: 110px;
  object-fit: contain;
}





/* PRICING SECTION */

.jw-card-red-headline {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;

  /* glass background */
  background: rgba(0,0,0,0.35);

  /* golden glow */
  box-shadow:
    0 0 10px rgba(255,170,50,0.25),
    0 0 25px rgba(255,140,0,0.15);
}

/* gradient border (same jw-card style) */
.jw-card-red-headline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;

  background: linear-gradient(
    135deg,
    rgba(255,190,80,0.9),
    rgba(255,140,0,0.7),
    rgba(255,190,80,0.9)
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}


.jw-card-red-headline .card-head {
  padding: 16px 24px;
  border-radius: 12px 12px 0 0;

  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;

  /* red gradient */
  background: linear-gradient(
    90deg,
    rgba(200, 40, 40, 0.9) 0%,
    rgba(150, 20, 20, 0.7) 40%,
    rgba(120, 10, 10, 0.3) 70%,
    rgba(0,0,0,0) 100%
  );

  /* subtle shine */
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
}




/* card body */
.jw-card-red-headline .card-body {
  padding: 24px;
  color: #ddd;
}

/* gold labels */
.jw-card-red-headline strong {
  color: #f6d365;
  margin-right: 8px;
}


.center-flex {
  display: flex;
  gap: 50px;
  justify-content: center;
}

/* 📱 mobile screen */
@media (max-width: 768px) {
  .center-flex {
    display: block;   /* flex hata diya */
  }
}




.faq-card {
  padding: 15px;
  width: 300px;
  cursor: pointer;
}

.faq-question {
  font-weight: 600;
}

/* hidden by default */
.faq-answer {
  max-height: 0;
  overflow: scroll;
  transition: max-height 0.3s ease;
  color: #ddd;
  margin-top: 10px;
}

/* expanded state */
.faq-card.active .faq-answer {
  max-height: 200px;
}