/* Custom CSS for Projects Section */

/* Container for projects */
.projects-grid .project-card {
  margin-bottom: 30px;
  /* Space between each project card */
  text-align: center;
  /* Center align the contents */
  width: 100%;
  /* Ensure full width responsiveness */
}

/* Individual project item */
.projects-grid .project-card .item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  width: 200px;
  /* Fixed width for square shape */
  height: 200px;
  /* Fixed height for square shape */
}

/* Hover effect on project item */
.projects-grid .project-card .item:hover {
  transform: scale(1.05);
  /* Scale up a bit on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  /* Add a stronger shadow on hover */
}

/* Image inside the project item */
.projects-grid .project-card .item img {
  width: 100%;
  /* Ensure image fills its container */
  height: 100%;
  /* Ensure image fills its container */
  display: block;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  object-fit: cover;
  /* Ensure images maintain aspect ratio and cover the container */
}

/* Horizontal layout for filters */
.filters ul {
  list-style-type: none;
  padding: 0;
  text-align: center;
  /* Center align the filters */
}

/* Individual filter item */
.filters ul li {
  display: inline-block;
  margin-right: 10px;
  /* Space between each filter */
  cursor: pointer;
  color: #333;
  /* Adjust as needed */
  font-size: 16px;
  /* Adjust as needed */
  transition: color 0.3s ease-in-out;
}

.header-area .logo {
  display: flex;
  align-items: center;

  /* Adjust margin as needed */
}

.header-area .logo img {
  width: 65px;
  /* Increase the size by 50% */
  max-width: none;
  /* Remove max-width to allow the logo to expand */
  height: auto;
  /* Maintains aspect ratio */
  border-radius: 50%;
  /* Ensures the logo is round */
  transition: transform 0.3s ease-in-out;
  /* Smooth transform on hover */
  background-color: transparent;
  /* Remove any background color */
  border: none;
  /* Remove any border */
}

.header-area .logo img:hover {
  transform: scale(1.1);
  /* Scale up a bit on hover */
}

/* Align the logo to the left */
.header-area .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-area .main-nav {
  text-align: right;
  /* Adjust as needed */
}


.section {
  padding: 60px 0;
}

.left-text-content {
  margin-bottom: 30px;
}

.section-heading h6 {
  color: #333;
  font-size: 16px;
  margin-bottom: 5px;
}

.section-heading h2 {
  font-size: 24px;
  color: #000;
  margin-bottom: 20px;
}

.contact-info {
  list-style: none;
  padding: 0;
}

.contact-info li {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.contact-info img.contact-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.contact-info span {
  font-size: 16px;
  color: #333;
}

.contact-info b span {
  font-weight: bold;
}

/* Responsive Styles */
@media (max-width: 767px) {
  .section-heading h2 {
    font-size: 20px;
  }

  .section-heading h6 {
    font-size: 14px;
  }

  .contact-info li {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-info img.contact-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
  }

  .contact-info span {
    font-size: 14px;
  }
}