*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  background:#050816;

  color:#fff;

  font-family:'Inter',sans-serif;
}

a{
  text-decoration:none;
}

.projects-page{

  max-width:1400px;

  margin:auto;

  padding:120px 50px;
}

.projects-header{

  text-align:center;

  margin-bottom:70px;
}

.projects-header h1{

  font-size:3rem;

  margin-bottom:15px;

  background:
  linear-gradient(
    90deg,
    #ffffff,
    #8b5cf6
  );

  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

.projects-header p{

  color:#94a3b8;

  max-width:700px;

  margin:auto;

  line-height:1.8;
}

.projects-grid{

  display:grid;

  grid-template-columns:
  repeat(3, 1fr);

  gap:30px;
}

.project-card{

  background:
  rgba(255,255,255,.03);

  border:
  1px solid rgba(255,255,255,.08);

  border-radius:24px;

  overflow:hidden;

  backdrop-filter:blur(12px);

  transition:.4s;

  display:flex;

  flex-direction:column;
}

.project-card:hover{

  transform:
  translateY(-10px);

  border-color:
  rgba(139,92,246,.4);

  box-shadow:
  0 0 30px rgba(139,92,246,.18);
}

.project-card img{

  width:100%;

  aspect-ratio:16/9.5;

  height:auto;

  object-fit:cover;

  object-position:center top;

  display:block;

  border-radius:20px 20px 0 0;

  transition:transform .4s ease;
}

.project-content{

  padding:25px;

  flex:1;

  display:flex;

  flex-direction:column;

  justify-content:space-between;
}

.project-content h3{

  margin-bottom:12px;
}

.project-content p{

  color:#94a3b8;

  line-height:1.7;

  margin-bottom:20px;
}

.project-links{

  display:flex;

  gap:12px;
}

.project-links a{

  flex:1;

  text-align:center;

  padding:12px;

  border-radius:12px;

  color:#fff;

  font-size:.95rem;

  transition:.3s;
}

.project-links a:first-child{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #3b82f6
  );
}

.project-links a:last-child{

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  );
}

.project-links a:hover{

  transform:
  translateY(-3px);
}

.projects-btn{

  text-align:center;

  margin-top:70px;
}

.projects-btn a{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:15px 30px;

  border-radius:50px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #8b5cf6
  );

  color:#fff;

  font-weight:600;

  transition:.4s;
}

.projects-btn a:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 10px 30px rgba(139,92,246,.3);
}

@media(max-width:1024px){

  .projects-grid{

    grid-template-columns:repeat(2, 1fr);

    gap:20px;
  }
}

@media(max-width:768px){

  .projects-page{

    padding:90px 20px;
  }

  .projects-header h1{

    font-size:2.2rem;
  }

  .projects-grid{

    grid-template-columns:1fr;

    gap:20px;
  }
}
/* AI Study Assistant Card Hover - Matching Red / Amber-Yellow Glow */
.project-card.ai-study-assistant-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card.ai-study-assistant-card:hover {
  transform: translateY(-10px);
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 20px 45px rgba(244, 63, 94, 0.25), 0 0 35px rgba(245, 158, 11, 0.25) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(244, 63, 94, 0.06), rgba(245, 158, 11, 0.06)) !important;
}