/* =========================
   GLOBAL STYLES
========================= */

body {
  margin: 0;  
  /* Removes default browser margin so content touches screen edges */

  font-family: Arial, sans-serif;
  /* Sets default font for entire page */

  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  /* Creates a diagonal gradient background from top-left to bottom-right */

  color: white;
  /* Sets default text color to white */
}

/* Makes images and videos responsive */
img,
video {
  max-width: 100%;
  /* Ensures media never exceeds container width */

  height: auto;
  /* Maintains aspect ratio */
}

/* =========================
   NAVBAR
========================= */

.header {
  position: sticky;
  /* Keeps header fixed at top while scrolling */

  top: 0;
  /* Positions sticky element at very top */

  backdrop-filter: blur(12px);
  /* Blurs background behind navbar for glass effect */

  background: rgba(20, 20, 40, 0.6);
  /* Semi-transparent dark background */

  z-index: 1000;
  /* Ensures navbar stays above other content */
}

.navbar {
  display: flex;
  /* Enables flexbox layout */

  justify-content: space-between;
  /* Spreads items to left and right */

  align-items: center;
  /* Vertically centers items */

  padding: 15px 40px;
  /* top-bottom | left-right | more horizontal space than vertical space */

  flex-wrap: wrap;
  /* Allows items to wrap on smaller screens */
}

.logo {
  color: white;
  /* Sets logo text color */

  font-size: 22px;
  /* Makes logo text larger */
}

.logo span {
  color: #00d4ff;
  /* Highlights part of logo in blue */
}

.nav-menu {
  display: flex;
  /* Horizontal menu layout */

  gap: 20px;
  /* Space between menu items */

  list-style: none;
  /* Removes bullet points */

  margin: 0;
  /* Removes default margin */

  padding: 0;
  /* Removes default padding */

  align-items: center;
  /* Aligns items vertically */
}

.nav-menu a {
  color: white;
  /* Link color */

  text-decoration: none;
  /* Removes underline */

  transition: 0.3s;
  /* Smooth hover effect */
}

.nav-menu a:hover {
  color: #00d4ff;
  /* Changes link color on hover */
}

/* =========================
   HERO SECTION
========================= */

.hero {
  text-shadow: 2px 2px 5px black;
  /* Adds shadow for better text visibility */

  animation: fadeZoomIn 1.5s ease-in-out;
  /* Applies fade + zoom animation */

  padding: 20px 20px;
  /* top-bottom | left-right | Adds spacing inside hero section */
}

/* Animation for hero section */
@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    /* Starts invisible */

    transform: scale(0.8);
    /* Starts slightly smaller */
  }
  100% {
    opacity: 1;
    /* Fully visible */

    transform: scale(1);
    /* Normal size */
  }
}

.profile-img {
  width: 30vw;
  /* Sets the image width to 30% of the viewport width (responsive sizing) */

  max-width: 80px;
  /* Prevents the image from growing larger than 80px */

  border-radius: 50%;
  /* Makes the image perfectly circular */

  margin-top: 10px;
  /* Adds space above the image */
}

/* =========================
   CARDS
========================= */

.card-box {
  background: white;
  /* Card background */

  color: black;
  /* Text color inside card */

  padding: 15px;
  /* Internal spacing */

  border-radius: 10px;
  /* Rounded corners */

  margin-top: 15px;
  /* Space above card */

  text-align: center;
  /* Centers text */

  transition: 0.3s;
  /* Smooth hover effect */

  animation: slideUp 1s ease-in;
  /* Slide-in animation */
}

/* Slide-up animation for cards */
@keyframes slideUp {
  from {
    transform: translateY(50px);
    /* Starts lower */

    opacity: 0;
    /* Starts invisible */
  }
  to {
    transform: translateY(0);
    /* Ends at normal position */

    opacity: 1;
    /* Fully visible */
  }
}

.card-box:hover {
  transform: scale(1.05);
  /* Slight zoom effect on hover */
}

/* =========================
   FOOTER
========================= */

.footer {
  text-align: center;
  /* Centers footer text */

  padding: 15px;
  /* Adds spacing */

  color: white;
  /* Text color */

  margin-top: 40px;
  /* Space above footer */
}

/* =========================
   RESPONSIVE DESIGN
========================= */

/* Tablets */
@media (max-width: 1024px) {
  .navbar {
    padding: 15px 20px;
    /* Reduces navbar padding on tablets */
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    /* Stacks navbar items vertically */

    align-items: center;
    /* Centers items */

    gap: 10px;
    /* Adds spacing between items */
  }

  .nav-menu {
    flex-direction: column;
    /* Vertical menu layout */

    align-items: center;
    /* Centers menu items */

    gap: 10px;
    /* Reduces spacing */
  }

  .hero h1 {
    font-size: 28px;
    /* Smaller heading on mobile */
  }

  .card-box {
    margin-bottom: 15px;
    /* Adds spacing between cards */
  }
}

/* Small phones */
@media (max-width: 375px) {
  .hero h1 {
    font-size: 24px;
    /* Even smaller heading */
  }

  .logo {
    font-size: 18px;
    /* Smaller logo text */
  }
}