/* General Reset */
body {
  font-family: 'Poppins', sans-serif;
  margin:0; padding:0;
  background:#111; color:#eee;
}

/* Hero Section */
#hero {
  background: linear-gradient(135deg, #0077b6, #00b4d8, #023e8a);
  color:#fff;
  text-align:center;
  padding:120px 20px;
}
.hero-container {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hero-img {
  width:180px;
  height:180px;
  border-radius:50%;
  border:4px solid #ffcc00;
  box-shadow:0 0 25px rgba(0,180,216,0.7);
  margin-bottom:20px;
}
#hero h1 {
  font-size:3em;
  margin:10px 0;
  text-shadow:0 0 20px #00b4d8;
}
.hero-line {
  font-size:1.4em;
  color:#ffcc00;
  margin-top:10px;
  text-shadow:0 0 15px #0077b6;
}
/* Header Section */
header {
  background: linear-gradient(135deg, #ff0040, #ff7f00, #ffcc00);
  color:#fff; text-align:center; padding:100px 20px;
}
header h1 {
  margin:0; font-size:3.5em;
  text-shadow:0 0 20px #ff0040, 0 0 40px #ff7f00;
  overflow:hidden; border-right:.15em solid #fff;
  white-space:nowrap;
  animation: typing 3.5s steps(40,end), blink .75s step-end infinite;
}
/* Section Headings */
h2 {
  color:#00b4d8;
  border-bottom:3px solid #ffcc00;
  padding-bottom:12px;
  margin-bottom:25px;
  text-shadow:0 0 10px #0077b6;
  text-align:center;        /* Center align */
  font-size:2.2em;          /* Bigger size */
  letter-spacing:1px;       /* Slight spacing for bold look */
}
@keyframes typing {from {width:0} to {width:100%}}
@keyframes blink {50% {border-color: transparent}}
header p {font-size:1.3em; margin-top:15px; color:#ffcc00;}
button {
  background: linear-gradient(135deg, #00ffcc, #00ccff);
  color:#111; border:none; padding:14px 30px;
  margin:10px; border-radius:30px; cursor:pointer;
  font-weight:700; transition:0.3s;
}
button:hover {
  transform:scale(1.15) rotate(-2deg);
  box-shadow:0 0 25px #00ffcc, 0 0 40px #00ccff;
}

/* Center + Bigger Content for Text Sections */
#about p,
#experience ul,
#interests p,
#contact p {
  text-align: center;       /* Center align content */
  font-size: 1.2em;         /* Slightly bigger text */
  line-height: 1.8;         /* More spacing for readability */
  max-width: 900px;         /* Limit width for neat look */
  margin: 0 auto 20px auto; /* Center block with spacing */
}
#experience ul {
  list-style: none;         /* Remove bullets */
  padding: 0;
}
#experience ul li {
  margin-bottom: 12px;
  font-size: 1.2em;
}

/* Navigation */
nav {
  background:#000; padding:20px; text-align:center;
  box-shadow:0 4px 15px rgba(255,0,64,0.6);
}
nav a {
  color:#fff; margin:0 25px; text-decoration:none;
  font-weight:700; transition:0.3s;
}
nav a:hover {
  color:#ff0040; text-shadow:0 0 15px #ff7f00;
  transform:scale(1.3);
}

/* Sections */
section {
  padding:70px; max-width:1200px; margin:auto;
}
h2 {
  color:#ffcc00; border-bottom:4px solid #ff0040;
  padding-bottom:12px; margin-bottom:25px;
  text-shadow:0 0 10px #ff7f00;
}

/* Cards */
.projects, .skills {
  display:flex; flex-wrap:wrap; gap:30px;
}
.card {
  background:#222; padding:25px; border-radius:15px;
  box-shadow:0 6px 20px rgba(255,0,64,0.4);
  flex:1; opacity:0; transform:translateY(60px);
  transition:0.6s;
  color:#eee;
}
.card:hover {
  transform:scale(1.08) rotate(1deg);
  box-shadow:0 8px 30px rgba(255,127,0,0.6);
}
.card img {
  width:100%; border-radius:12px; transition:0.4s;
  margin-bottom:12px;
}
.card:hover img {transform:scale(1.1); filter:brightness(1.2);}

/* Contact Section Social Icons */

.social-icons {
  margin-top: 20px;
  display: flex;
  justify-content: center;   /* horizontally center */
  align-items: center;       /* vertically center */
  gap: 25px;                 /* spacing between icons */
}
.social-icons img {
  width: 40px;
  height: 40px;
  transition: 0.3s;
}
.social-icons img[alt="GitHub"] {
  background-color: #fff;
  border-radius: 50%;
  padding: 5px;
}
.social-icons img:hover {
  transform: scale(1.2);
}
.social-icons i {
  font-size: 40px;
  color: #fff;
  transition: 0.3s;
}
.social-icons i:hover {
  transform: scale(1.2);
  color: #ffcc00;
}

/* Footer */
footer {
  background:#000; color:#ffcc00; text-align:center; padding:30px;
  box-shadow:0 -4px 15px rgba(255,0,64,0.6);
}