/* ==========================================
   IJCE ARCHIVE – FINAL PREMIUM MATCHED VERSION
========================================== */

/* ================= HERO SECTION ================= */

.archive-hero{
  position:relative;
  padding:90px 8% 80px;   /* Matches Guidelines height */
  text-align:center;
  color:#fff;
  background: linear-gradient(135deg, #0a4fff 0%, #0036b3 100%);
  overflow:hidden;
}

/* Soft Circle Decorations */

.archive-hero::before,
.archive-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
}

.archive-hero::before{
  width:480px;
  height:480px;
  top:-160px;
  left:-160px;
}

.archive-hero::after{
  width:580px;
  height:580px;
  bottom:-220px;
  right:-220px;
}

/* ================= HEADING ================= */

.hero-content h1{
  font-family:'Playfair Display',serif;
  font-size:52px;              /* Reduced from 60px */
  font-weight:600;
  letter-spacing:.5px;
  margin:0;
}

/* Underline */

.hero-content h1::after{
  content:"";
  display:block;
  width:75px;                  /* Slightly shorter */
  height:4px;
  margin:18px auto 0;
  border-radius:3px;
  background:rgba(255,255,255,.85);
}

/* Subtitle */

.hero-content p{
  font-family:'Inter',sans-serif;
  font-size:15px;
  opacity:.9;
  max-width:600px;
  margin:18px auto 0;
  line-height:1.6;
}

/* ================= BACK BUTTON ================= */

.back-home{
  position:absolute;
  top:28px;
  left:8%;
  padding:11px 20px;
  border-radius:30px;
  text-decoration:none;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  transition:.3s ease;
}

.back-home:hover{
  background:#fff;
  color:#0a4fff;
}

/* ================= ARCHIVE SECTION ================= */

.archive-wrapper{
  padding:120px 8% 140px;   /* Slightly reduced */
  min-height:100vh;
  text-align:center;
  background:linear-gradient(180deg,#f3f6ff 0%, #e9eeff 60%, #f6f9ff 100%);
}

/* Container */

.archive-container{
  max-width:1200px;
  margin:auto;
  padding:70px 60px;
  border-radius:28px;

  background:rgba(255,255,255,.85);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);

  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 40px 90px rgba(10,79,255,.12);
}

/* ================= GRID ================= */

.volume-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:45px;
}

/* ================= CARDS ================= */

.volume-card{
  position:relative;
  padding:70px 35px;
  border-radius:22px;
  text-decoration:none;
  font-size:22px;
  font-weight:600;
  color:#0d0c2d;
  background:#ffffff;
  border:1px solid #e3e8ff;
  transition:all .35s ease;
  overflow:hidden;
}

/* Gradient Border */

.volume-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(135deg,#0a4fff,#00c6ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:.4s ease;
}

.volume-card span{
  position:relative;
  z-index:2;
}

/* Hover */

.volume-card:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 60px rgba(10,79,255,.18);
}

.volume-card:hover::before{
  opacity:1;
}

.volume-card:hover span{
  color:#0a4fff;
}