:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa7bf;
  --accent:#7c5cff;
  --accent2:#a58bff;
  --radius:12px;
}

body{
  background:var(--bg);
  margin:0;
  font-family:Inter, sans-serif;
  color:#e9f0ff;
}

/* Title */
.project-title-outer{
  text-align:center;
  padding:28px 16px 26px;
}
.project-title-outer h1{
  margin:0;
  font-size:1.6rem;
  color:#7c5cff;
}

/* Main Container */
.project-container{
  width:92%;
  max-width:1100px;
  margin:0 auto;
}

/* Box Wrapper */
.project-boxed{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:28px;
  position:relative;
  box-shadow:0 8px 32px rgba(2,6,23,0.55);
}

/* View Project Button — inside box */
.project-action{
  position:absolute;
  top:18px;
  right:18px;
}
.view-project{
  padding:8px 16px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#051029;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 18px rgba(124,92,255,0.18);
}
.view-project:hover{transform:translateY(-3px);}

/* Two equal-height columns */
.project-row{
  display:flex;
  gap:22px;
  align-items:stretch;
  margin-top:36px;
}
.project-column{
  flex:1;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  padding:22px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
}

/* Headings */
.section-heading{
  margin:0 0 12px;
  font-size:1.15rem;
  font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-heading{
  margin:0 0 12px;
  font-size:1.15rem;
  font-weight:700;
  background-clip: text;


  background:linear-gradient(90deg,var(--accent),var(--accent2));

  /* FIX — add standard property */
  background-clip:text;          /* <--- Add this */
  -webkit-background-clip:text;  /* Safari + Chrome */
  -webkit-text-fill-color:transparent;
}

.subheading{
  color:#7c5cff;
  margin-top:16px;
  margin-bottom:6px;
  font-size:1rem;
}

/* Text Lists */
.text-list{
  margin:4px 0 0 20px;
  color:var(--muted);
  line-height:1.6;
}

/* Module Boxes (clean — NO COLOR LAYER) */
.module-box{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  padding:14px 12px;
  border-radius:10px;
  margin-bottom:10px;
}
.module-box h4{
  margin:0 0 6px;
  color:#bda7ff;
}

/* Animation */
.card-animated{
  opacity:0;
  transition:opacity .4s ease;
}
.card-animated.is-visible{
  opacity:1;
}

/* Responsive */
@media(max-width:900px){
  .project-row{flex-direction:column;}
  .project-action{position:static; text-align:center; margin-bottom:10px;}
  .view-project{margin:0 auto;}
}
/* Fade + slide reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(.2, .6, .2, 1);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor glow effect */
.cursor-glow {
  position: fixed;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(124,92,255,0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: lighten;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Smooth transition for tilt + lift */
.tilt, .hover-lift {
  transition: transform .3s ease, box-shadow .3s ease;
}
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa7bf;
  --accent:#7c5cff;
  --accent2:#a58bff;
  --radius:12px;
}

body{
  background:var(--bg);
  margin:0;
  font-family:Inter, sans-serif;
  color:#e9f0ff;
}

/* Title */
.project-title-outer{
  text-align:center;
  padding:28px 16px 6px;
  margin-bottom: 20px;
}
.project-title-outer h1{
  margin:0;
  font-size:1.6rem;
  color:#7c5cff;
}

/* Extra spacing before second project title */
.second-title{
  padding-top:36px;
}

/* Main Container */
.project-page{
  padding:18px 0 60px;
}
.project-container{
  width:92%;
  max-width:1100px;
  margin:0 auto;
}

/* Box Wrapper */
.project-boxed{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:28px;
  position:relative;
  box-shadow:0 8px 32px rgba(2,6,23,0.55);
  margin-bottom:28px; /* small gap between sections */
}

/* View Project Button — inside box */
.project-action{
  position:absolute;
  top:18px;
  right:18px;
}
.view-project{
  padding:8px 16px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#051029;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 18px rgba(124,92,255,0.18);
}
.view-project:hover{
  transform:translateY(-3px);
}

/* Two equal-height columns */
.project-row{
  display:flex;
  gap:22px;
  align-items:stretch;
  margin-top:36px;
  
}
.project-column{
  flex:1;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  padding:22px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
}

/* Headings */
.section-heading{
  margin:0 0 12px;
  font-size:1.15rem;
  font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.subheading{
  color:#7c5cff;
  margin-top:16px;
  margin-bottom:6px;
  font-size:1rem;
}

/* Text Lists */
.text-list{
  margin:4px 0 0 20px;
  color:var(--muted);
  line-height:1.6;
}

/* Module Boxes */
.module-box{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  padding:14px 12px;
  border-radius:10px;
  margin-bottom:10px;
}
.module-box h4{
  margin:0 0 6px;
  color:#bda7ff;
}

/* Animation */
.card-animated{
  opacity:0;
  transition:opacity .4s ease;
}
.card-animated.is-visible{
  opacity:1;
}

/* Responsive */
@media(max-width:900px){
  .project-row{
    flex-direction:column;
  }
  .project-action{
    position:static;
    text-align:center;
    margin-bottom:10px;
  }
  .view-project{
    margin:0 auto;
  }
}

/* ===== New styles for Customer Recharge Portal section ===== */

/* Figma link row */
.figma-link-row{
  margin-top:14px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.figma-label{
  color:var(--muted);
  font-size:0.95rem;
}
.figma-link{
  font-size:0.95rem;
  text-decoration:none;
  font-weight:600;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.figma-link:hover{
  text-decoration:underline;
}

/* Project Status list */
.status-list{
  margin:6px 0 0 20px;
  color:var(--muted);
  line-height:1.6;
}

/* Media preview (image / video) */
.project-media{
  margin-top:16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  background:rgba(0,0,0,0.25);
}
.project-media img,
.project-media video{
  display:block;
  width:100%;
  height:auto;
}

/* Slight extra bottom breathing room on small screens */
@media(max-width:600px){
  .project-boxed{
    padding:22px;
    margin-bottom:24px;
  }
}
/* ===== View Design button beside title ===== */
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.figma-btn{
  padding:8px 14px;
  border-radius:999px;
  font-size:0.9rem;
  text-decoration:none;
  font-weight:600;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#051029;
  box-shadow:0 6px 16px rgba(124,92,255,0.15);
  transition:all .25s ease;
}

.figma-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(124,92,255,0.22);
}

/* Responsive adjustment */
@media(max-width:600px){
  .section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.figma-btn {
  padding: 6px 14px;
  background: linear-gradient(90deg, #7c5cff, #a58bff);
  border-radius: 999px;
  text-decoration: none;
  color: #051029;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: 0.25s ease;
}

.figma-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(124,92,255,0.28);
}

.project-media img, 
.project-media video {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  margin-top: 14px;
}
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa7bf;
  --accent:#7c5cff;
  --accent2:#a58bff;
  --radius:12px;
}

body{
  background:var(--bg);
  margin:0;
  font-family:Inter, sans-serif;
  color:#e9f0ff;
}

/* Title */
.project-title-outer{
  text-align:center;
  padding:28px 16px 6px;
}
.project-title-outer h1{
  margin:0;
  font-size:1.6rem;
  color:#7c5cff;
}

/* allow title + button in same row */
.title-row{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.title-row h1{
  margin:0;
  font-size:1.5rem;
}

/* Main Container */
.project-page { padding: 18px 0 70px; }
.project-container{
  width:92%;
  max-width:1100px;
  margin:0 auto;
}

/* Box Wrapper */
.project-boxed{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:28px;
  position:relative;
  box-shadow:0 8px 32px rgba(2,6,23,0.55);
  margin-bottom:26px;
}

/* View Project Button — inside box (used for Trash-It) */
.project-action{
  position:absolute;
  top:18px;
  right:18px;
}
.view-project{
  padding:8px 16px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#051029;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 18px rgba(124,92,255,0.18);
  font-size:0.9rem;
  white-space:nowrap;
}
.view-project:hover{transform:translateY(-3px);}

/* Two equal-height columns */
.project-row{
  display:flex;
  gap:22px;
  align-items:stretch;
  margin-top:36px;
}
.project-column{
  flex:1;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  padding:22px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
}

/* Headings */
.section-heading{
  margin:0 0 12px;
  font-size:1.15rem;
  font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.subheading{
  color:#7c5cff;
  margin-top:16px;
  margin-bottom:6px;
  font-size:1rem;
}

/* Text Lists */
.text-list,
.status-list{
  margin:4px 0 0 20px;
  color:var(--muted);
  line-height:1.6;
  padding-left:0;
}

/* Module Boxes */
.module-box{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  padding:14px 12px;
  border-radius:10px;
  margin-bottom:10px;
}
.module-box h4{
  margin:0 0 6px;
  color:#bda7ff;
}

/* Media (image/video) */
.project-media img,
.project-media video{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  margin-top:14px;
  display:block;
}

/* Lead paragraph */
.lead{
  color:var(--muted);
  line-height:1.6;
  margin-top:4px;
}

/* Section header (heading + View Design button) */
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* Figma View Design button */
.figma-btn{
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#051029;
  text-decoration:none;
  font-weight:600;
  font-size:0.85rem;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(124,92,255,0.22);
}
.figma-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(124,92,255,0.32);
}

/* Small animation */
.card-animated{
  opacity:0;
  transition:opacity .4s ease, transform .4s ease;
}
.card-animated.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Book review small tweak (optional) */
.book-review-box{
  margin-bottom:32px;
}

/* Responsive */
@media(max-width:900px){
  .project-row{
    flex-direction:column;
  }
  .project-action{
    position:static;
    text-align:right;
    margin-bottom:6px;
  }
  .view-project{
    font-size:0.85rem;
  }
  .title-row{
    flex-direction:column;
    align-items:flex-start;
  }
}
/* Center all section titles */
.second-title h1 {
  text-align:center;
  width:100%;
}

/* Book Review button inside right column */
.book-review-col {
  position:relative;
}

/* Adjust Book Review button position */
.book-review-btn-wrapper {
  position: absolute;
  top: 32px; /* moved lower from 10px */
  right: 16px;
}


/* Make sure spacing doesn't overlap title */
.book-review-col .section-heading {
  margin-top:52px; /* pushes content below button */
}
.section-heading {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
  
  background: linear-gradient(90deg, var(--accent), var(--accent2));

  /* Fix warnings + ensure cross-browser support */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Back to Portfolio Button Styling */
.back-btn-wrapper {
  text-align: center;
  margin-top: 40px;
}

.back-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #051029;

  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 24px rgba(124,92,255,0.25);

  transition: all 0.25s ease-in-out;
}

/* Hover Effect */
.back-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(124,92,255,0.35);
}

/* Mobile friendly */
@media(max-width:600px){
  .back-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}