/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    /* Reset */
    html {
    scroll-behavior: smooth;
    }

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

    body {
      font-family: 'Poppins', sans-serif;
      background: #200d0d;
      color: #fff;
      overflow-x: hidden;
    }

/* -----------------------------start------------------------------------*/
/* Reset defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header container */
header {
  min-height: 25%; /* full screen height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  text-align: center;
  padding: 10px;
}

/* Image */
.header-img-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.header-img {
  max-width: 150px;
  width: 100%;
  height: auto;
}

/* Text */
header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

header p {
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* Button */
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: #ff6666;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  transition: background 0.3s;
}

.btn:hover {
  background: #9696965d;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  header p {
    font-size: 1rem;
  }

  .header-img {
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.5rem;
  }

  header p {
    font-size: 0.9rem;
  }

  .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* -----------------------------finish------------------------------------*/

/*    .header-img-container {
      display: flex;
      justify-content: center;
      max-width: 96px;
      height: 96px;
      align-items: center;
      align-self: center;
      align-content: center;
      object-position: center;
      text-align: center;
    }

    .header-img {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: auto;
      height: auto;
      align-self: center;
      align-content: center;
      object-position: center;
      text-align: center;
    }
*/

    /* 3D Background Canvas */
    #bg-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: radial-gradient(circle at 50% 50%, #3d3b3b, hsl(0, 0%, 0%));
    }

    header {
      text-align: center;
      padding: 4rem 2rem;
    }

    header h1 {
      font-size: 3rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 1rem;
    }

    header p {
      font-size: 1.2rem;
      color: #aaa;
    }

    .btn {
      display: inline-block;
      align-items: center;
      align-content: center;
      margin-top: 2rem;
      padding: 0.8rem 1rem;
      background: linear-gradient(135deg, #3d3b3b, #ff6666);
      border-radius: 2rem;
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      color: white;
      box-shadow: 0 4px 15px rgba(0,0,0,0.4);
      transition: transform 0.3s ease;
    }

    .btn:hover {
      transform: scale(1.05);
    }

    section {
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: auto;
    }

    section h2 {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 3rem;
    }

    .projects {
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 1rem;
    }

    .project-card {
      display: grid; /* Enables CSS Grid */
      place-items: center; /* Centers both horizontally and vertically */
      /* Add height to the parent if vertical centering is desired and the parent's height is not defined by content */
      background: rgba(255,255,255,0.05);
      border-radius: 1.5rem;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .project-card:hover {
      transform: translateY(-8px);
      background: rgba(255,255,255,0.1);
    }

    .project-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .project-content {
      display: grid; /* Enables CSS Grid */
      place-items: center; /* Centers both horizontally and vertically */
      /* Add height to the parent if vertical centering is desired and the parent's height is not defined by content */
      padding: 1.5rem;
    }

    .project-content h3 {
      display: grid; /* Enables CSS Grid */
      place-items: center; /* Centers both horizontally and vertically */
      /* Add height to the parent if vertical centering is desired and the parent's height is not defined by content */
      margin-bottom: 0.5rem;
    }

    .project-content p {
      display: grid; /* Enables CSS Grid */
      place-items: center; /* Centers both horizontally and vertically */
      /* Add height to the parent if vertical centering is desired and the parent's height is not defined by content */
      color: #ccc;
      font-size: 0.9rem;
    }

    footer {
      text-align: center;
      padding: 2rem;
      color: #aaa;
      font-size: 0.9rem;
    }

    /* Responsive tweaks */
    @media(max-width: 768px) {
      header h1 {
        font-size: 2.2rem;
      }
      section h2 {
        font-size: 2rem;
      }
    }