/* ================================================================
   qualification.css — Vivek Pal | FINAL FIXED v3 (New Card Design)
   ✅ Colors ab class-based cycle karte hain (qc-cyan/qc-pink/qc-purple/qc-green)
   ✅ Unlimited entries ke liye kaam karega
   ✅ Naya card design — top accent bar + row layout + white logo box
   ✅ Optional description support
   ================================================================ */

/* ----------------------------------------------------------------
   CONTAINER
---------------------------------------------------------------- */
.qual-container {
  padding: 80px 5% 100px;
  background: transparent !important;
  position: relative;
  min-height: 100vh;
  width: 100%;
  z-index: 1;
}

#qualification {
  scroll-margin-top: 110px !important;
}

.qual-title {
  color: #00f2ff;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 90px;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(0,242,255,0.5);
  position: relative;
  animation: titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse {
  0%,100% { text-shadow: 0 0 20px rgba(0,242,255,0.4); }
  50%      { text-shadow: 0 0 60px rgba(0,242,255,0.9), 0 0 100px rgba(0,242,255,0.3); }
}
.qual-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #00f2ff, #ff2d55, #a855f7, #00ff88);
  margin: 16px auto 0;
  border-radius: 2px;
  animation: lineExpand 2s ease-in-out infinite alternate;
}
@keyframes lineExpand {
  from { width: 60px; }
  to   { width: 150px; }
}

/* ----------------------------------------------------------------
   QUAL BOX
---------------------------------------------------------------- */
.qual-box {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: block;
}

/* ----------------------------------------------------------------
   CENTER LINE
---------------------------------------------------------------- */
.scroll-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  background: rgba(255,255,255,0.07);
  transform: translateX(-50%);
  border-radius: 2px;
}

.red-marker {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  background: linear-gradient(to bottom, #00f2ff, #a855f7, #ff2d55, #00ff88);
  height: 0;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,242,255,0.5);
  transition: height 0.08s linear;
}

/* ----------------------------------------------------------------
   QUAL ITEM BASE
---------------------------------------------------------------- */
.qual-item {
  position: relative;
  width: 50%;
  margin-bottom: 70px;
  opacity: 0;
  transition: opacity 0.7s ease,
              transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  clear: both;
}

.qual-item.reveal-visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* ----------------------------------------------------------------
   DOT
---------------------------------------------------------------- */
.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #0a0a0f;
  border: 3px solid #00f2ff;
  border-radius: 50%;
  z-index: 20;
  transition: transform 0.3s ease;
  top: 22px;
}
.qual-item:hover .dot {
  transform: scale(1.6) !important;
}

/* ----------------------------------------------------------------
   CONTENT CARD — NAYA DESIGN
   Top pe thin accent bar, halka gradient background, rounded corners
---------------------------------------------------------------- */
.content {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34,1.4,0.64,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.content:hover {
  transform: translateY(-7px) scale(1.01);
}

/* top accent bar — color set per-variant below */
.content::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  z-index: 2;
}

.content::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.04) 50%, transparent 70%);
  animation: cardShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardShimmer {
  0%   { left: -80%; }
  100% { left: 160%; }
}

/* ----------------------------------------------------------------
   TITLE
---------------------------------------------------------------- */
.content h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 6px 0 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   ROW LAYOUT — Board / Institution / Status, har ek apni line me
---------------------------------------------------------------- */
.qual-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.qual-row:last-child {
  margin-bottom: 0;
}

.qual-row strong {
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-size: 0.85rem;
  min-width: 78px;
  flex-shrink: 0;
}

/* ===== Label color — decided per-row by admin panel (board_color / institution_color) ===== */
.label-cyan   { color: #00d4ff !important; }
.label-pink   { color: #ff4d6d !important; }
.label-green  { color: #2bff9c !important; }
.label-yellow { color: #ffd100 !important; }
.label-purple { color: #c084fc !important; }

/* ===== Logo border color — same color choice as its row ===== */
.logo-cyan   { border: 1.5px solid #00d4ff; }
.logo-pink   { border: 1.5px solid #ff4d6d; }
.logo-green  { border: 1.5px solid #2bff9c; }
.logo-yellow { border: 1.5px solid #ffd100; }
.logo-purple { border: 1.5px solid #c084fc; }

.qual-row .val {
  color: #ccc;
  font-size: 0.88rem;
  line-height: 1.6;
  flex: 1;
}

/* Status ko pill/badge jaisa dikhana — automatic detect via :contains nahi hota CSS me,
   isliye simple styling val par hi rakhi hai taaki har status readable rahe */
.qual-row .val {
  word-break: break-word;
}

/* ----------------------------------------------------------------
   OPTIONAL DESCRIPTION
---------------------------------------------------------------- */
.edu-desc {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,0.1);
  color: #c0c0c0;
  font-size: 0.82rem;
  line-height: 1.7;
  font-style: italic;
}

/* ----------------------------------------------------------------
   STATUS BADGE — pill/box, color admin panel se choose hota hai
---------------------------------------------------------------- */
.status-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.status-badge.status-green {
  background: rgba(0,255,136,0.12);
  color: #00ff88;
  border: 1px solid rgba(0,255,136,0.4);
}
.status-badge.status-yellow {
  background: rgba(255,209,0,0.12);
  color: #ffd100;
  border: 1px solid rgba(255,209,0,0.4);
}
.status-badge.status-cyan {
  background: rgba(0,242,255,0.12);
  color: #00f2ff;
  border: 1px solid rgba(0,242,255,0.4);
}
.status-badge.status-pink {
  background: rgba(255,45,85,0.12);
  color: #ff2d55;
  border: 1px solid rgba(255,45,85,0.4);
}
.status-badge.status-purple {
  background: rgba(168,85,247,0.12);
  color: #a855f7;
  border: 1px solid rgba(168,85,247,0.4);
}

/* ----------------------------------------------------------------
   LOGO — bada kiya, white box (LinkedIn style)
---------------------------------------------------------------- */
.qual-logo-inline {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: #ffffff;
  padding: 2px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* ----------------------------------------------------------------
   CARD COLORS — class based, cycles endlessly via {% cycle %} in template
   Har variant: accent bar + border + title color + dot glow + logo border
---------------------------------------------------------------- */

/* ===== CYAN ===== */
.qual-item.qc-cyan .content {
  border-color: rgba(0,242,255,0.2);
  box-shadow: 0 4px 25px rgba(0,242,255,0.07);
}
.qual-item.qc-cyan .content:hover {
  border-color: rgba(0,242,255,0.65);
  box-shadow: 0 18px 60px rgba(0,242,255,0.28);
}
.qual-item.qc-cyan .content::before {
  background: linear-gradient(90deg, #00f2ff, #7be9ff);
}
.qual-item.qc-cyan h3 { color: #00f2ff; text-shadow: 0 0 15px rgba(0,242,255,0.5); }
.qual-item.qc-cyan .dot {
  border-color: #00f2ff;
  box-shadow: 0 0 10px #00f2ff;
  animation: dotCyan 2s ease-in-out infinite;
}
@keyframes dotCyan {
  0%,100% { box-shadow: 0 0 8px #00f2ff, 0 0 16px rgba(0,242,255,0.4); }
  50%      { box-shadow: 0 0 22px #00f2ff, 0 0 45px rgba(0,242,255,0.8); }
}

/* ===== PINK ===== */
.qual-item.qc-pink .content {
  border-color: rgba(255,45,85,0.2);
  box-shadow: 0 4px 25px rgba(255,45,85,0.07);
}
.qual-item.qc-pink .content:hover {
  border-color: rgba(255,45,85,0.65);
  box-shadow: 0 18px 60px rgba(255,45,85,0.28);
}
.qual-item.qc-pink .content::before {
  background: linear-gradient(90deg, #ff2d55, #ff8aa3);
}
.qual-item.qc-pink h3 { color: #ff2d55; text-shadow: 0 0 15px rgba(255,45,85,0.5); }
.qual-item.qc-pink .dot {
  border-color: #ff2d55;
  animation: dotPink 2s ease-in-out infinite;
}
@keyframes dotPink {
  0%,100% { box-shadow: 0 0 8px #ff2d55, 0 0 16px rgba(255,45,85,0.4); }
  50%      { box-shadow: 0 0 22px #ff2d55, 0 0 45px rgba(255,45,85,0.8); }
}

/* ===== PURPLE ===== */
.qual-item.qc-purple .content {
  border-color: rgba(168,85,247,0.2);
  box-shadow: 0 4px 25px rgba(168,85,247,0.07);
}
.qual-item.qc-purple .content:hover {
  border-color: rgba(168,85,247,0.65);
  box-shadow: 0 18px 60px rgba(168,85,247,0.28);
}
.qual-item.qc-purple .content::before {
  background: linear-gradient(90deg, #a855f7, #d4a9ff);
}
.qual-item.qc-purple h3 { color: #a855f7; text-shadow: 0 0 15px rgba(168,85,247,0.5); }
.qual-item.qc-purple .dot {
  border-color: #a855f7;
  animation: dotPurple 2s ease-in-out infinite;
}
@keyframes dotPurple {
  0%,100% { box-shadow: 0 0 8px #a855f7, 0 0 16px rgba(168,85,247,0.4); }
  50%      { box-shadow: 0 0 22px #a855f7, 0 0 45px rgba(168,85,247,0.8); }
}

/* ===== GREEN ===== */
.qual-item.qc-green .content {
  border-color: rgba(0,255,136,0.2);
  box-shadow: 0 4px 25px rgba(0,255,136,0.07);
}
.qual-item.qc-green .content:hover {
  border-color: rgba(0,255,136,0.65);
  box-shadow: 0 18px 60px rgba(0,255,136,0.28);
}
.qual-item.qc-green .content::before {
  background: linear-gradient(90deg, #00ff88, #8dffc4);
}
.qual-item.qc-green h3 { color: #00ff88; text-shadow: 0 0 15px rgba(0,255,136,0.5); }
.qual-item.qc-green .dot {
  border-color: #00ff88;
  animation: dotGreen 2s ease-in-out infinite;
}
@keyframes dotGreen {
  0%,100% { box-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0,255,136,0.4); }
  50%      { box-shadow: 0 0 22px #00ff88, 0 0 45px rgba(0,255,136,0.8); }
}

/* ================================================================
   DESKTOP >= 1025px  (position — left/right alternating, nth-child based)
================================================================ */
@media (min-width: 1025px) {
  .qual-item { width: 50%; }

  .qual-item:nth-child(even) {
    float: right;
    text-align: left;
    padding-left: 44px;
    padding-right: 0;
    transform: translateX(60px);
  }
  .qual-item:nth-child(even) .dot { left: -10px; right: auto; }

  .qual-item:nth-child(odd):not(:first-child) {
    float: left;
    text-align: left;
    padding-right: 44px;
    padding-left: 0;
    transform: translateX(-60px);
  }
  .qual-item:nth-child(odd):not(:first-child) .dot { right: -10px; left: auto; }

  .qual-item.reveal-visible { transform: translateX(0) !important; }
  .qual-box::after { content: ""; display: table; clear: both; }
}

/* ================================================================
   TABLET 769–1024
================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .qual-item { width: 50%; }

  .qual-item:nth-child(even) {
    float: right; padding-left: 36px; padding-right: 0;
    transform: translateX(50px);
  }
  .qual-item:nth-child(even) .dot { left: -10px; right: auto; }

  .qual-item:nth-child(odd):not(:first-child) {
    float: left; padding-right: 36px; padding-left: 0; text-align: left;
    transform: translateX(-50px);
  }
  .qual-item:nth-child(odd):not(:first-child) .dot { right: -10px; left: auto; }

  .qual-item.reveal-visible { transform: translateX(0) !important; }
  .qual-box::after { content: ""; display: table; clear: both; }
}

/* ================================================================
   MOBILE <= 768px
================================================================ */
@media (max-width: 768px) {

  .qual-container { padding: 60px 4% 60px; }
  .qual-title { font-size: 1.8rem; margin-bottom: 50px; letter-spacing: 2px; }

  .scroll-line {
    left: 20px !important;
    transform: none !important;
    width: 2px !important;
  }
  .red-marker {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    background: linear-gradient(to bottom, #00f2ff, #a855f7, #ff2d55, #00ff88);
    height: 0;
    transform: translateX(-50%);
    z-index: 2;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,242,255,0.5);
    transition: height 0.15s ease-out;
    will-change: height;
  }

  .qual-item,
  .qual-item:nth-child(even),
  .qual-item:nth-child(odd),
  .qual-item:nth-child(odd):not(:first-child) {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    text-align: left !important;
    padding-left: 52px !important;
    padding-right: 12px !important;
    margin-bottom: 32px !important;
    transform: translateY(30px) !important;
  }

  .qual-item .dot,
  .qual-item:nth-child(even) .dot,
  .qual-item:nth-child(odd) .dot,
  .qual-item:nth-child(odd):not(:first-child) .dot {
    left: 11px !important;
    right: auto !important;
    top: 20px !important;
    width: 20px !important;
    height: 20px !important;
  }

  .qual-item .dot { animation-duration: 4s !important; }

  .content::after { animation: none !important; }

  .qual-item.reveal-visible,
  .qual-item:nth-child(even).reveal-visible,
  .qual-item:nth-child(odd).reveal-visible,
  .qual-item:nth-child(odd):not(:first-child).reveal-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .content { padding: 18px 16px !important; border-radius: 14px !important; }
  .content h3 { font-size: 0.98rem !important; }

  .qual-row { gap: 8px; margin-bottom: 10px; }
  .qual-row strong { font-size: 0.78rem; min-width: 64px; }
  .qual-row .val { font-size: 0.8rem; }

  .qual-logo-inline {
    width: 32px;
    height: 32px;
    padding: 2px;
  }

  .edu-desc { font-size: 0.78rem; margin-top: 10px; padding-top: 10px; }

  /* mobile pe left/right reorder cancel — sab seedha, natural order */
  .qual-item:nth-child(odd):not(:first-child) .qual-row {
    justify-content: flex-start !important;
  }
  .qual-item:nth-child(odd):not(:first-child) .qual-row strong,
  .qual-item:nth-child(odd):not(:first-child) .qual-row .qual-logo-inline,
  .qual-item:nth-child(odd):not(:first-child) .qual-row .val {
    order: initial !important;
    text-align: left !important;
  }
}

@media (max-width: 400px) {
  .qual-title { font-size: 1.4rem !important; }
  .content { padding: 14px !important; }
}