/* start Project page  */

/* Style the tab container */
.tab {
  display: flex;
  justify-content: flex-start;
  /* Align tabs to the left */
  gap: 0;
  /* Remove space between tabs */
  padding: 0;
  /* Remove extra padding */
  border-bottom: 1px solid #ccc;
  /* Separator line below the tabs */
}

/* Style the buttons for a simple tab look */
.tab button {
  background-color: transparent;
  /* No background */
  border: none;
  /* Remove borders */
  outline: none;
  cursor: pointer;
  padding: 10px 16px;
  /* Adjust padding for size */
  font-size: 16px;
  /* Font size for readability */
  color: #333;
  /* Text color */
  transition: border-bottom 0.3s ease, color 0.3s ease;
  position: relative;
  /* For border alignment */
}

/* Add hover effect for tabs */
.tab button:hover {
  color: #000;
  /* Darker text on hover */
}

/* Highlight the active tab */
.tab button.active {
  color: #000;
  /* Darker text for active tab */
  border-bottom: 4px solid #000;
  /* Bold bottom line for the active tab */
  margin-bottom: -4px;
  /* Align bottom border with separator */
}

/* Style the tab content */
.tabcontent {
  display: none;
  /* padding: 20px; */
  /* border-top: 1px solid #ccc; */
  /* Top border for content */
  margin-top: 30px;
  /* Remove extra margin */
}

/* End Project page  */


/* Start Post details page */

/* Ensure all images inside the slider have the same size */
.slick-slider .slider-item {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slick-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Style the title */
.slider-item .title-overlay {
  position: absolute;
  top: 95%;
  left: 15%;
  transform: translate(-50%, -50%);
  color: #f0f0f0;
  font-size: 24px;
  font-weight: bold;
  opacity: 0;
  /* Hide title initially */
  transition: opacity 0.3s ease;
  text-align: center;
  z-index: 10;

  /* Border styling */
  border-radius: 5px;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Show title on hover */
.slider-item:hover .title-overlay {
  opacity: 1;
}

/* Optional: Add some max-height to limit image size if necessary */
.slick-slider .slider-item img {
  max-height: 1000px;
  /* You can adjust this value */
}

/* Make the slider responsive */
@media screen and (max-width: 768px) {
  .slick-slider .slider-item img {
    max-height: 300px;
    /* Reduce max-height on smaller screens */
  }
}

/* End Post details page */

/* Contant form css  */
textarea {
  width: 94%;
  /* Make it responsive, take up full width of the container */
  padding: 10px;
  /* Padding for text inside the textarea */
  border: 1px solid #ccc;
  /* Light gray border */
  font-size: 14px;
  /* Set font size */
  box-sizing: border-box;
  /* Includes padding and border in the width calculation */
  height: 50px;
  /* Ensure the height adapts to the content */
  min-height: 150px;
  /* Minimum height (you can adjust this as needed) */
  resize: vertical;
  /* Allow the user to resize the textarea vertically */
}

input[type="submit"] {
  height: 46px;
  width: 63%;


}