/* === RESET AND BASE STYLES === */
* {
  box-sizing: border-box;
  font-family: 'Poppins', Helvetica, sans-serif;
}

html, body {
  width: 100%;
  min-height: 100vh; /* Use min-height to ensure it covers the full viewport */
  background-color: rgb(5, 5, 5);
  color: #202020; /* Default text color for light backgrounds */
  overflow-x: hidden; /* <--- REVERTED: Re-added this for general page overflow control.
                           The carousel fix is in the media query. */
}

#works-section {
  background-color: rgb(255, 255, 255); /* White background as per your snippet */
  width: 100%;
  height: auto; /* Changed height to auto; 100% can cause issues if content overflows viewport, auto allows it to expand */
  
  display: flex;
  flex-direction: column; /* Changed to column to stack title and wrapper vertically */
  justify-content: center; /* This centers the content (title and wrapper) horizontally */
  align-items: center; /* Aligns content to the top within this section */
  padding: 20px 0; /* Added general vertical padding to the works-section itself */
}

/* New/Adjusted style for the section title */
#works-section .work-title h2 {
  text-align: center;
  width: 100%; /* Ensure it takes full width to allow centering */
  padding-top: 10px; /* Space from top of section */
  margin-bottom: 24px; /* Space below the title before cards start */
  color: rgb(0, 0, 0);
  font-size:36px;
}

h2{
  font-size:36px;
}

.work-wrapper {
  display: flex;
  justify-content: flex-start; /* This aligns the individual .work-card elements to the left within the wrapper */
  align-items: flex-start; /* Aligns cards to the top of their row */
  gap: 40px; /* <--- CHANGED: Reduced gap for desktop */
  row-gap: 60px; /* <--- CHANGED: Reduced row-gap for desktop */
  flex-wrap: wrap; /* Allows cards to wrap to the next line */
  padding-top: 0; /* Already handled by .works-section or .work-title margin */
  padding-bottom: 16px;
  max-width: 1200px; /* Limits the maximum width of the card group */
  width: 100%; /* Ensures the wrapper takes full width up to max-width, allowing it to be centered by its parent */
}

.work-card {
  background-color: #fff;
  width: calc(50% - 20px); /* <--- CHANGED: Adjusted width based on new gap (40px gap / 2) */
  min-width: 400px; /* Ensure cards don't get too small on their own row before wrapping to 1 column */
  height: auto; /* Allow card height to be determined by content */
  border-radius: 8px;
  /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */
  display: flex; /* Ensure work-card is a flex container for its image and content */
  flex-direction: column; /* Stack image and content vertically */
  overflow: hidden; /* Ensures border-radius on card applies to image */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* <--- ADDED: Transition for hover effect */
  cursor:pointer;
  
}

.work-card a {
  text-decoration: none;
  color: inherit;
}

.work-card h3 {
  text-decoration: none;
  margin: 16px 0;
}

.work-card h3:hover {
  text-decoration: none;
}

.work-card:hover { /* <--- ADDED: Hover effect for the card */
    transform: translateY(-5px); /* Lifts the card */
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; /* https://getcssscan.com/css-box-shadow-examples */
}


.image-container {
  width: 100%;
  height: 350px; /* Fixed height for the image container */
  overflow: hidden; /* Ensures image doesn't overflow its container */
  border-radius: 8px 8px 0 0; /* Apply border-radius only to top corners if content is below */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0; /* Image doesn't need border-radius if container has it */
  transition: transform 0.3s ease; /* <--- ADDED: Transition for image zoom */
}

.work-card:hover .image-container img { /* <--- ADDED: Hover effect for the image */
    transform: scale(1.05); /* Zooms in the image */
}

.work-content {
  padding: 16px 20px; /* Adjusted padding for text content */
  background-color: #f7f7f7; /* Ensure background for text area */
  color: #202020; /* Text color for content on white card */
  text-align: center; /* Center text within the card content */
  flex-grow: 1; /* Allows content area to grow if needed */
  display: flex; /* Make content a flex container */
  flex-direction: column; /* Stack h3 and p */
  justify-content: center; /* Center h3 and p vertically if space allows */
}

.work-content h3 {
  font-size: 1.2rem; /* Adjusted font size */
  font-weight: 600;
  color: black; /* Set to black for visibility on white card */
}

.work-content p {
  font-size: 0.95rem; /* Adjusted font size */
  color: #555; /* Set to dark gray for visibility on white card */
  line-height: 1.4;
}




/* ///////////////Wireframe Section/////////////////////// */


/* Responsive adjustments */
@media (max-width: 1200px) {
  .work-wrapper {
    gap: 30px; /* <--- CHANGED: Reduced gap */
    row-gap: 50px; /* <--- CHANGED: Reduced row-gap */
    padding: 50px 20px; /* Adjust padding */
    max-width: 1000px; /* Reduce max-width for work-wrapper */
  }
  .work-card {
    width: calc(50% - 15px); /* <--- CHANGED: Adjusted width based on new gap */
    height: auto; /* Ensure height is auto */
    min-width: 350px; /* Adjust min-width */
  }
  .image-container {
      height: 200px; /* <--- CHANGED: Adjust image height for smaller cards */
  }
  .work-card:nth-child(2n) { /* Disable staggering for 2-column or fewer layouts to avoid awkward gaps */
      margin-top: 0; /* Remove stagger on smaller screens */
  }
}

@media (max-width: 768px) {
  #works-section {
      padding: 15px 0; /* Adjust vertical padding */
  }
  /* .works-section .work-title {
      padding-top: 30px;
      margin-bottom: 30px;
  } */
  #works-section .work-title h2 {
    font-size: 24px;
      text-align: center;
  }
  .work-wrapper {
    gap: 20px; /* <--- CHANGED: Reduced gap */
    row-gap: 30px; /* <--- CHANGED: Reduced row-gap */
    padding: 30px 15px; /* Adjust padding */
    max-width: 100%; /* Allow wrapper to take full width of viewport (with padding) */
  }
  .work-card {
    width: calc(100% - 0px); /* <--- CHANGED: Use 100% for single column */
    height: auto; /* Ensure height is auto */
    min-width: unset; /* Remove min-width constraint to allow 100% width */
  }
  .image-container {
      height: 180px; /* <--- CHANGED: Adjust image height for single column */
  }
}

@media (max-width: 480px) {
    /* .works-section .work-title {
        padding-top: 20px;
        margin-bottom: 20px;
    } */
    #works-section .work-title h2 {
      font-size: 20px;
        text-align: center;
    }
    .work-wrapper {
        gap: 10px; /* <--- CHANGED: Reduced gap */
        row-gap: 20px; /* <--- CHANGED: Reduced row-gap */
        padding: 20px 10px;
    }
    .work-card {
        width: 100%; /* Ensure 100% width */
        height: auto; /* Ensure height is auto */
    }
    .image-container {
        height: 150px; /* <--- CHANGED: Adjust image height for very small screens */
    }
    .work-content {
        padding: 12px 15px; /* Adjust padding for very small screens */
    }
    .work-content h3 {
        font-size: 1.1rem; /* Adjust title font size */
    }
    .work-content p {
        font-size: 0.85rem; /* Adjust paragraph font size */
    }
}