.projects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 100px;
  /* Added padding for sides */
  width: 100%;
  /* Full width */
  max-width: 100%;
  /* Limit the section width on larger screens */
  margin: 0 auto;
  /* Center the section */
  background: #1D1E22;
  /* Black background */
  border-radius: 48px 48px 0px 0px;
  /* Rounded top corners */
  box-sizing: border-box;
  /* Ensure padding is part of the width */
}

.appearing-text {
  width: 100%;
  /* Ensure it stretches across the section */
  text-align: left;
  /* Align text to the left */
  padding: 0 48px;
  /* Add horizontal padding for spacing */
  margin-top: 100px;
  margin-bottom: 48px;
  /* Create space below the title */
}

.appearing-text h1 {
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  /* Italicize "PROJETOS" */
  font-weight: 400;
  /* Use a light weight for emphasis */
  font-size: 48px;
  /* Adjust font size */
  line-height: 65px;
  /* Proper line height for spacing */
  text-transform: uppercase;
  /* Make text uppercase */
  color: #FFFFFF;
  /* White text for contrast */
  margin: 0;
  /* Remove any default margins */
}

.appearing-text h1 span {
  font-style: italic;
  font-weight: 200;
}


/* cards */
.cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  width: 1240px;
  gap: 48px;
}

/* column */
.column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 48px;
}

.column:nth-child(2) {
  margin-top: 264px;
  /* Add spacing for alternation in the second column */
}

.card-project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  padding: 24px;
  gap: 16px;
  width: 528px;
  height: auto;
  background: #1D1E22;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-project:hover {
  transform: scale(1.05);
  /* Increases size slightly */
  box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.5);
  /* Adds white shadow */
}

.project-image {
  width: 480px;
  height: 316px;
  background: #8434AF;
  /* Placeholder for image */
  border-radius: 8px;
  background-size: cover;
}

.text {
  align-items: flex-start;
}

.text .title {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.text .description {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  color: #9E9E9E;
}

/* Media Queries for Specific Breakpoints */
@media (max-width: 1024px) {
  .cards {
    flex-direction: column;
    /* Stack cards vertically */
    align-items: center;
    /* Center the stacked cards */
  }

  .card-project {
    width: 100%;
    /* Ensure full width for stacked cards */
    max-width: 600px;
    /* Adjust max width for larger viewports */
  }
}

@media (max-width: 768px) {
  .projects {
    padding: 0px 24px;
  }

  .cards {
    gap: 16px;
    /* Reduce gap between cards */
    width: 360px;
  }

  .card-project {
    padding: 16px;
    /* Reduce padding for smaller cards */
    width: 360px;
  }

  .project-image {
    width: 320px;
    height: 220px;
    background: #8434AF;
    /* Placeholder for image */
    border-radius: 8px;
    background-size: cover;
  }

  .text {
    padding: 0px 8px;
    gap: 4px;
    width: 312px;
  }

  .appearing-text {
    width: 100%;
    /* Ensure it stretches across the section */
    text-align: left;
    /* Align text to the left */
    padding: 0 0px;
    /* Add horizontal padding for spacing */
    margin-top: 100px;
    margin-bottom: 48px;
    /* Create space below the title */
  }


  .column:nth-child(2) {
    margin-top: 0px;
    /* Add spacing for alternation in the second column */
  }
}