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

body {
  background: radial-gradient(circle at top, #1e293b 0%, #020617 100%);
  background-attachment: fixed;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- Navigation Fix --- */
nav {
  padding: 15px 8%; /* Reduced from 30px to 15px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5%;
}
.navlist1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
}

.navunlist {
  display: flex;
  list-style: none;
  gap: 40px; /* Perfect spacing between links */
}

.navtext {
  text-decoration: none;
  color: #78d0ff;
  font-size: 1.1rem;
  font-weight: 600;
  transition: 0.3s;
}

.navtext:hover {
  color: #ffffff;
}

/* --- Hero Section --- */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Reduced height pulls everything together */
  height: 40vh;
  margin-top: 20px; /* Gap between Nav and Name */
  margin-bottom: 20px; /* Gap between Subtitle and About Me section */
}

.main-title {
  text-align: center;
  font-size: 5rem;
  font-weight: 600;

  /* Line-height: 1 removes the invisible "cushion" around the letters */

  margin: 0;

  /* Keep your existing gradient code here */
  background: linear-gradient(90deg, #2a7b9b 0%, #57c785 50%, #eddd53 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.main-subtitle {
  text-align: center;
  font-size: 2.2rem;
  color: #f8fafc;
  font-weight: 300;

  /* This controls the small gap specifically between the name and subtitle */
  margin-top: 10px;
}
section,
footer {
  border: 3px solid rgb(24, 163, 163);
  border-radius: 30px;
  padding: 30px; /* Increased padding inside the box for better readability */

  /* THIS IS THE KEY CHANGE */
  margin: 50px auto; /* 60px gap on top and bottom, auto centers the box */

  width: 80%;
  max-width: 1100px; /* Prevents the boxes from getting too wide on huge screens */
  background: linear-gradient(
    90deg,
    rgba(18, 11, 117, 1) 0%,
    rgba(17, 17, 130, 1) 35%,
    rgba(31, 87, 97, 1) 100%
  );
  box-shadow: 0px 10px 50px rgba(58, 33, 201, 0.4); /* Smoother, less "heavy" shadow */
}
.sectiontitle {
  background: #8f8035;
  background: linear-gradient(
    90deg,
    rgba(143, 128, 53, 1) 0%,
    rgba(45, 95, 155, 1) 28%,
    rgba(160, 253, 29, 1) 50%,
    rgba(69, 121, 252, 1) 100%
  );
  background-clip: text;
  color: transparent;
  font-weight: 800;
  padding-bottom: 2px;
}
#para {
  padding-bottom: 10px;
}
#githublink {
  text-decoration: none;
  color: black;
  border: 2px solid #00ffff;
  border-radius: 3px;
  background-color: white;
  padding: 5px;
}
.unlist {
  padding: 5px;
}
.Learning {
  color: rgb(190, 119, 49);
  padding-bottom: 5px;
}
.ordlist {
  padding-bottom: 10px;
  padding-left: 10px;
}
.unordered {
  padding-left: 10px;
  padding-bottom: 5px;
}
.tech {
  color: rgb(190, 119, 49);
}
.data {
  border: 2px solid aqua;
  border-radius: 4px;
  padding: 10px;

  background-color: white;
  color: black;
}
.api {
  color: red;
  padding-bottom: 3px;
}
.datat {
  border: 2px solid aqua;
  border-radius: 4px;
  padding: 10px;

  background-color: white;
  color: black;
}
.cicd {
  color: red;
  padding-bottom: 3px;
}
.box-container {
  display: flex;
  gap: 4px;
}
.list {
  border: 2px solid aqua;
  border-radius: 4px;
  background-color: white;
  text-decoration: none;
  color: black;
  padding-right: 250px;
  margin-right: 3px;
  padding-top: 5px;
  padding-left: 5px;
  list-style: none;
  padding-bottom: 5px;
}
.listo {
  border: 2px solid aqua;
  border-radius: 4px;
  background-color: white;
  text-decoration: none;
  color: black;
  padding-right: 300px;
  padding-top: 5px;
  padding-left: 5px;
  list-style: none;
  padding-bottom: 5px;
}
.project {
  display: flex;
  gap: 1px;
}
.contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
}
.contact img {
  height: 40px;
  width: 40px;
}

/* styles for link inside the contact list */
.contact a {
  text-decoration: none;
  color: white;
}

.contact a:hover {
  color: aqua;
}
.top {
  text-decoration: none;
}