* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
 
}

body {
  background: #000;
  color: #fff;

}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 60px;
 
}

.logo {
  color: #ff2e2e;
  font-weight: bold;
  letter-spacing: 1px;
}

nav a {
  color: #ffffff;
  margin-left: 30px;
  text-decoration: none;
  font-size: 20px;
  
}

nav a:hover {
  color: #fff;
  border: 4px #ff0000;
}

/* HERO */
.hero {
  padding: 70px;
}

.profile {
  display: flex;
  gap: 150px;
  align-items: center;
 
}

.avatar {
  width: 290px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;   /* THIS LINE IS IMPORTANT */
   border: 6px solid rgba(239, 96, 132, 0.868);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro h1 {
  font-size: 50px;
}

.intro h3 {
  font-weight: 400;
  color: #fbdede;
  margin-top: 6px;
}

.intro p {
  margin-top: 14px;
  color: #fbe1e1;
  max-width: 420px;
}

.buttons {
  margin-top: 22px;
}

.btn {
  padding: 10px 27px;
  border-radius: 6px;
  border: none;
  background: #424040;
  color: #fff;
  cursor: pointer;
  margin-right: 10px;
}

.btn.primary {
  background: #00aaff;
}

.stats {
  display: flex;
  gap: 40px;
  margin-top: 30px;
}

.stats div {
  text-align: center;
}

.stats strong {
  font-size: 22px;
  display: block;
}

.stats span {
  font-size: 13px;
  color: #888;
}

/* SECTIONS */
.section {
  padding: 60px;
}

.section h2 {
  margin-bottom: 28px;
  font-size: 22px;
}

.tag {
  background: #ff2e2e;
  color: #000;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 8px;
}

/* PROJECTS */
.projects {
  display: flex;
  gap: 30px;
}

.project-card {
  background: #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  width: 360px;
}

.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* PAPERS */
.paper {
  background: #292929;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.paper h4 {
  margin-bottom: 6px;
}

.paper small {
  color: #888;
}

.paper p {
  margin-top: 12px;
  color: #bbb;
  max-width: 600px;
}

.actions {
  margin-top: 16px;
  color: #777;
  display: flex;
  gap: 18px;
  font-size: 13px;
}

.read {
  color: #00aaff;
  text-decoration: none;
  font-size: 14px;
}
/*Home / Projects / Research Common Section*/
.section {
  padding: 80px 60px;
  max-width: 1200px;
}

.section h1 {
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

.section p {
  max-width: 720px;
  font-size: 28px;
  color: #b5b5b5;
}
.page h2{
 font-size: 70px;
 color: #ffffff;
 margin-top: 50px;
   padding-left: 2rem; 
  padding-right: 2rem; 
  border: #4d4141;
}
.page p{
  font-size: 20px;
    padding-left: 2rem; 
  padding-right: 2rem; 
  margin-top: 30px;
  
}

/*Projects Grid*/
/* Projects Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 30px;
  padding: 0 2rem;
  justify-items: center; /* centers cards horizontally */
}

.project-card {
  width: 100%;
  max-width: 320px; /* ensures same card width */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(50, 67, 134, 0.08);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-card img {
  width: 100%;
  height: 240px; /* same height for all images */
  object-fit: cover; /* keeps aspect ratio without stretching */
  display: block;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(114, 93, 178, 0.12);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 30px;
  padding-left: 2rem; 
  padding-right: 2rem; 
}

/* Individual Project Card */
.project-card {
  background: #3d3d3f;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* ensures image doesn't spill */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column; /* stack image and text vertically */
}

/* Hover effect */
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

/* Overlay effect */
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.2),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card:hover::after {
  opacity: 1;
}

/* Image styling */
.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Text inside card */
.project-card h3 {
  margin: 1rem 1rem 0.5rem 1rem;
  font-size: 1.3rem;
  color: #f9f3f3;
}

.project-card p {
  margin: 0 1rem 1rem 1rem;
  color: #ffffff;
  font-size: 0.95rem;
}

.project-card span {
  margin: 0 1rem 1rem 1rem;
  font-weight: 600;
  color: #ff6b6b;
  font-size: 0.85rem;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  padding: 0 2rem;
  justify-items: center;
}

.project-card {
  display: block; /* Make <a> behave like a card */
  width: 100%;
  max-width: 320px;
  text-decoration: none; /* Remove underline */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: inherit; /* Keep text color */
}

.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.project-card h3 {
  margin: 0.8rem 1rem 0.5rem 1rem;
  font-size: 1.3rem;
}

.project-card p {
  margin: 0 1rem 1rem 1rem;
  color: #ffffff;
  font-size: 0.95rem;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px #2422881f;
}


/* projects page */
.projects-page {
  padding-top: 1rem;
}

.projects-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(0,170,255,0.16), rgba(255,46,46,0.14));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 2rem 2.2rem;
  margin-bottom: 1.8rem;
}

.projects-badge {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0.7rem 1rem;
  color: #67d3ff;
  font-weight: 600;
}

.card-content {
  padding: 1rem 1rem 1.2rem;
}

/* weather page */
.weather-page {
  padding-top: 1rem;
}

.weather-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(0,170,255,0.16), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 2rem 2.2rem;
  margin-bottom: 1.8rem;
}

.weather-card-preview img {
  width: 320px;
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.detail-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 1.2rem;
}

.detail-card h3 {
  margin-bottom: 0.6rem;
  color: #ffffff;
}

.detail-card p {
  margin: 0;
  padding: 0;
  color: #d7d7d7;
  line-height: 1.6;
}

/* home page enhancements */
.home-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.home-card .card-content {
  padding: 1rem 1rem 1.2rem;
}

.home-card:hover {
  transform: translateY(-6px);
}

/* ecommerce and eye pages */
.ecommerce-page .project-grid {
  margin-top: 1.2rem;
}

.eye-page .eye-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/*research page*/
.research-page {
  padding-top: 1rem;
}

.research-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(255,46,46,0.18), rgba(0,170,255,0.12));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 2rem 2.2rem;
  margin-bottom: 2rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  color: #67d3ff;
  margin-bottom: 0.75rem;
}

.research-hero h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  color: #ffffff;
}

.hero-copy {
  max-width: 620px;
  color: #d8d8d8;
  line-height: 1.7;
  font-size: 1rem;
  margin-top: 0;
  padding: 0;
}

.research-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.research-stats div {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  min-width: 110px;
  text-align: center;
}

.research-stats strong {
  display: block;
  font-size: 1.2rem;
  color: #ffffff;
}

.research-stats span {
  font-size: 0.85rem;
  color: #b8c7d2;
}

.research-list {
  display: grid;
  gap: 1.2rem;
}

.research-card {
  background: linear-gradient(145deg, rgba(55,50,50,0.96), rgba(36,36,36,0.96));
  padding: 1.6rem 1.7rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.research-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.research-card-top {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.badge {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: rgba(0,170,255,0.18);
  color: #67d3ff;
  border: 1px solid rgba(0,170,255,0.28);
}

.badge.alt {
  background: rgba(255,46,46,0.18);
  color: #ff9c9c;
  border-color: rgba(255,46,46,0.28);
}

.research-card h3 {
  font-size: 1.3rem;
  color: #ffffff;
  margin-bottom: 0.7rem;
}

.research-card p {
  margin-top: 0.5rem;
  color: #e8e8e8;
  line-height: 1.7;
  padding: 0;
}

.research-highlights {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.6rem;
}

.research-highlights li {
  position: relative;
  padding-left: 1rem;
  color: #cfdde8;
}

.research-highlights li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ff2e2e;
}

@media (max-width: 768px) {
  .research-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .research-stats {
    width: 100%;
  }
}
/*animations */
.section h1,
.project-card,
.research-card {
  animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/*responsive*/
@media (max-width: 768px) {
.header {
    padding: 20px;
  }

  .section {
    padding: 60px 20px;
  }

  .section h1 {
    font-size: 40px;
  }
}
/* Page wrapper */
.page {
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
}

/* Navbar (keeps it consistent) */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  border: #3ea6ff;
}

.navbar nav a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  border: 2px #3ea6ff;
}

.navbar nav a.active {
  border-bottom: 2px solid #ff0000;
}
/* Page */
.page {
  max-width: 1400px;
  margin: auto;
  padding: 2rem;
}

/* Project Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;                 /* space between images */
}

/* Project Card */
.project-card {
  display: block;
  width: 100%;
  text-decoration: none;
}

/* Images */
.project-card img {
  width: 100%;
  height: 380px;             /* same height */
  object-fit: cover;         /* no distortion */
  border-radius: 16px;
  display: block;
  background: #f5f5f5;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover */
.project-card img:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
/* Page reset */
body {
  margin: 0;
}

/* Page */
.page {
  width: 100%;
  padding: 0;
}

/* Vertical layout */
.project-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Card */
.project-card {
  width: 100%;
  display: flex;
  justify-content: flex-end;   /* PUSH IMAGE TO RIGHT */
}

/* Image */
.project-card img {
  width: 90vw;                /* full feel but right aligned */
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: bl
}/* Reset */
body {
  margin: 0;
}

/* Page */
.page {
  width: 100%;
  padding: 2rem;
}

/* Grid: side by side */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two images per row */
  gap: 32px;
  align-items: center;
}

/* Card */
.project-card {
  width: 100%;
}

/* Images – FULL VIEW, NO CROP */
.project-card img {
  width: 100%;
  height: auto;              /* keep original ratio */
  object-fit: contain;       /* FULL IMAGE visible */
  display: block;
  background: #f5f5f5;       /* fills empty space if any */
  border-radius: 14px;
}
/* RESET */
body {
  margin: 0;
}

/* PAGE */
.page {
  width: 100%;
  padding: 2rem;
}

/* PROJECT GRID – SIDE BY SIDE */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 images per row */
  gap: 32px;                             /* space between images */
  align-items: center;
}

/* PROJECT CARD */
.project-card {
  width: 100%;
  display: block;
  text-decoration: none;
}

/* IMAGES – FULL VIEW (NO CROP) */
.project-card img {
  width: 100%;
  height: auto;              /* keeps original aspect ratio */
  object-fit: contain;       /* FULL image visible */
  display: block;
  background: #f5f5f5;       /* fills empty space */
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* HOVER */
.project-card img:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* RESPONSIVE – MOBILE */
@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr; /* 1 image per row */
  }
}
.logo h2{
  font-size: 70px;
  color: #f40000;

}