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

body {
  background: linear-gradient(to right,#020617,#0f172a);
  color: white;
}

/* Navbar */
nav {
  display: flex;
  justify-content: space-between;
  padding: 20px 60px;
  background: #020617;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 20px;
}

nav ul li a {
  text-decoration: none;
  color: white;
}

/* Hero */
.hero {
  height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
}

.hero span {
  color: #38bdf8;
}
.hero {
  background: linear-gradient(120deg,#020617,#1e3a8a);
}


.hero button {
  margin-top: 20px;
  width: 200px;
  padding: 10px;
  border: none;
  background: #38bdf8;
  cursor: pointer;
}

/* Section */
section {
  padding: 60px;
}

h2 {
  margin-bottom: 20px;
}

/* Skills */
.skill {
  margin-bottom: 15px;
}

.bar {
  background: #1e293b;
  height: 10px;
  border-radius: 10px;
}

.fill {
  background: #38bdf8;
  height: 100%;
  border-radius: 10px;
}

/* Projects */
.project-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 20px;
}

.card {
  background: #020617;
  padding: 20px;
  border-radius: 10px;
}
/* Experience Section */

.timeline {
  margin-top: 20px;
}

.experience-card {
  background: #020617;
  padding: 25px;
  border-left: 4px solid #38bdf8;
  border-radius: 10px;
  margin-bottom: 20px;
}

.experience-card h3 {
  color: #38bdf8;
}

.experience-card h4 {
  margin: 5px 0;
}

.experience-card span {
  font-size: 14px;
  color: #94a3b8;
}

.experience-card ul {
  margin-top: 10px;
  padding-left: 20px;
}

.experience-card ul li {
  margin-bottom: 8px;
}
/* Resume Button */
.resume-btn {
  background: #0ea5e9;
  color: white;
  border-radius: 6px;
  font-weight: bold;
}

/* Sticky Navbar */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Stats Section */
.stats-container {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.stat-box {
  background: #020617;
  padding: 30px;
  border-radius: 12px;
  width: 200px;
}

.stat-box h1 {
  color: #38bdf8;
}

/* Timeline Animation */
.experience-card {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.experience-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hover Cards */
.card:hover {
  transform: scale(1.03);
  transition: 0.3s;
}

/* Mobile Responsive */
@media(max-width:768px) {
  nav {
    flex-direction: column;
  }

  .hero {
    padding: 30px;
  }

  section {
    padding: 30px;
  }

  .stats-container {
    flex-direction: column;
    gap: 20px;
  }
}
/* Certificates */

.cert-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 20px;
}

.cert-card {
  background: linear-gradient(135deg,#020617,#0f172a);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #0ea5e9;
}

.cert-card:hover {
  transform: translateY(-5px);
  transition: 0.3s;
}
button {
  background: linear-gradient(135deg,#0ea5e9,#2563eb);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
}
/* Hero Layout */

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Profile Photo */

.hero-img img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #38bdf8;
  box-shadow: 0px 0px 20px rgba(56,189,248,0.6);
}

/* Mobile View */

@media(max-width:768px) {

.hero-content {
  flex-direction: column-reverse;
  text-align: center;
}

.hero-img img {
  width: 180px;
  height: 180px;
  margin-bottom: 20px;
}

}