/* HEADER - styled using Tailwind CSS utility classes */

header.fixed {
  position: fixed;      /* sticks header to top */
  top: 0; left: 0; right: 0;
  z-index: 50;          /* ensure above most page content */
  transition-property: all;
  transition-duration: 300ms;
  background-color: rgba(255, 255, 255, 0.95); /* semi-transparent white */
  backdrop-filter: blur(8px); /* glassmorphism effect */
}

nav.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;   /* px-4 */
  padding-right: 1.5rem;
  /* lg:px-6 means at large screen, padding-left/right increases */
  /* This container centers and limits header content width */
}

nav > div.flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem; /* h-16 */
}

/* Branding box */
div.w-8.h-8.sm\:w-10.sm\:h-10.bg-primary.rounded-lg.flex.items-center.justify-center {
  width: 2rem; height: 2rem;
  border-radius: 0.5rem; /* rounded-lg */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Headings, buttons and nav links use font sizes and color classes like text-primary, font-bold, text-gray-700, hover:text-primary */

/* Responsive: display nav links and buttons on lg (large) screens, hide hamburger menu (on mobile) */

/* Button and link hover transitions: smooth color changes over 300ms */

/* Glassmorphism with backdrop-blur-sm and transparency means header visually separated */

/* -------------------------

OUR WORK SECTION (Portfolio)

----------------------------*/

/* Section container */
section#portfolio .container.mx-auto {
  max-width: 1200px;    /* centered content with max width */
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Section heading */
.text-center.mb-12 h2.text-3xl.sm\:text-4xl.lg\:text-5xl.font-bold.text-primary.mb-4 {
  font-size: 1.875rem / 2rem / 3rem depending on breakpoint;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
  text-align: center;
}

/* Project cards container */
section#portfolio .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem; /* 8 (32px) */
}

/* Cards styling */
.bg-white.rounded-2xl.shadow-lg.hover\:shadow-xl.transition-all.duration-300 {
  background-color: white;
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  transition: all 0.3s ease;
}

.bg-white.rounded-2xl.shadow-lg:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
  transform: translateY(-0.625rem); /* moves up 10px on hover */
}

/* Image styles within cards - object-cover with transition scale on hover */

/* Text colors, fonts, paddings consistent using utility classes */

/* Buttons with hover color transitions, padding, border-radius, font weight */

/* ----------------------------- */