/* ===== Navigation Bar ===== */
.navbar {
  background: #f0f0f0; ;     /* light grey */
  padding: 0.5rem 0;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}
.navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;  /* center the menu */
  margin: 0;
  padding: 0;
}
.navbar li {
  margin: 0 1.5rem;
}
.navbar a {
  text-decoration: none;
  font-weight: 600;
  color: #333;
}
.navbar a:hover, .navbar a.active {
  color: #0077cc;
}

/* ===== About Section Resize ===== */
.banner.peek { 
  min-height: 75vh;         /* not full screen, next section peeks */
}
.banner .content { 
  flex: 0 0 55%;            /* text ~55% width */
}
.banner .image { 
  flex: 0 0 45%;            /* image ~45% width */
}
#about .image {
  flex: 0 0 30%;      /* take only 30% of the section width */
  max-height: 400px;  /* limit how tall it can get */
  display: flex;
  align-items: center; /* vertically center the image */
}

#about .image img {
  width: 100%;
  height: auto;       /* maintain aspect ratio */
  object-fit: contain; /* don't crop */
  border-radius: 8px;
}
/* Reduce white space between navbar and About section */
#about.banner {
  min-height: auto !important;                 /* don't stretch the section */
  padding: 2rem 0 0.01rem !important;           /* cut top/bottom padding */
  align-items: flex-start !important;  
  overflow: hidden;        /* no vertical centering */
}

/* Reduce the inner content padding/margins */
#about.banner .content {
  padding: 5rem 5rem !important;
}
#about.banner .content > :first-child { margin-top: 0 !important; }
#about.banner .content > :last-child  { margin-bottom: 0 !important; }
/* Remove the big gap the 'divided' layout adds above the first section */
#wrapper.divided > section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Force illustrations to behave like icons */
section .icon img {
  width: 60px;        /* small size */
  height: 60px;       /* keep consistent */
  object-fit: contain;
  border-radius: 8px; /* optional: round edges for uniform look */
  display: block;
  margin: 0 auto 1rem; /* center with spacing below */
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 equal columns */
  gap: 2rem;                              /* spacing between cards */
  max-width: 2000px;
  margin: 0 auto;                         /* center grid */
  padding: 2rem 1rem;
}

.skills-grid section {
  background: #fff; 
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  text-align: center;
}

/* Responsive: stack on smaller screens */
@media (max-width: 1024px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row */
  }
}

@media (max-width: 640px) {
  .skills-grid {
    grid-template-columns: 1fr;            /* stack */
  }
}


#three .image img {
  width: 90%;          /* shrink to 80% of container width */
  max-width: 900px;    /* don’t let it grow too big */
  height: auto;        /* keeps the proportions */
  margin: 0 auto;      /* centers the image */
  display: block;
}
/*to reduce size of image in section two "my blogpost"
/* Reduce overall vertical padding of this block */
#three {
  padding: 0.001rem 0;                 /* was pretty tall by default */
}


#three .image {
  flex: 0 0 38%;                   /* make the image column smaller */
  max-width: 520px;                /* cap its width */
  max-height: 520px;               /* cap its height (adjust as needed) */
  display: flex;
  align-items: center;             /* center the img vertically */
}

/* Show full plot without cropping and keep it modest */
#three .image img {
  width: 100%;
  height: auto;                    /* keep aspect ratio */
  object-fit: contain;             /* don't crop */
  display: block;
}
/* to shirnk the horizontal container of my blogpost section
/* Reduce vertical padding of this spotlight block */
#three.spotlight {
  padding: 0.001rem 0 !important;    /* less space top/bottom */
  align-items: flex-start !important;  /* align content to top, not centered */
}

/* Optionally, limit min-height */
#three.spotlight {
  min-height: auto !important;   /* stop forcing it taller */
}





/* --- Tighten vertical height for sections #two, #three, #four only --- */
#two.spotlight,
#three.spotlight,
#four.spotlight {
  padding: 1rem 0 !important;   /* reduce top/bottom space (default is large) */
  min-height: auto !important;     /* don't force tall rows */
  align-items: flex-start !important; /* stop vertical centering that stretches height */
  overflow: hidden;
}

/* Optional: slightly reduce inner spacing in the text column */
#two .content,
#three .content,
#four .content {
  padding: 0.80rem 1rem !important;  /* lighter inner padding */
}

/* Optional: cap image column so it can't make the row tall */
#two .image,
#three .image,
#four .image {
  max-height: 500px;                 /* adjust to taste (360–480px) */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;               /* keep image vertically centered within the cap */
}

#two .image img,
#three .image img,
#four .image img {
  width: 80%;
  height: fit-content;                      /* no distortion */
  object-fit: contain;               /* avoid cropping */
  display: block;
}

/* Reduce space inside the Featured Projects wrapper */
#projects .inner{
  padding-top: 0.5rem !important;   /* was ~3-4rem */
  padding-bottom: 0.5rem !important;
}
#projects .gallery {
  margin-top: 0.5rem !important;   /* tighten space below h2 */
}

/* Reduce space above & below Get in touch section */
#contsct {
  padding-top: 0.5rem !important;   /* was probably 4–6rem */
  padding-bottom: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce spacing inside the inner container */
#contsct .inner {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Tighten the h2 specifically */
#contsct h2 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* Tighten the paragraphs */
#contsct p {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}


/* === Skills Section Grid Layout === */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 2rem;                             /* space between cards */
  max-width: 1000px;                     /* keep it tidy */
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Each skill box */
.skills-grid section {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  text-align: center;
}

/* Adjust h3 inside the skill cards */
.skills-grid h3 {
  font-size: 1.3rem;   /* smaller than section title */
  font-weight: 700;    /* keep bold */
  margin-bottom: 1rem; /* spacing below */
}

/* Responsive */
@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: 1fr; /* stack on smaller screens */
  }
}