.hero-section-base {
  background: url('../images/bg/project/hero-section.jpeg') center center / cover no-repeat !important;
}

.hero-section-base .overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* --- LEFT SIDE --- */
.projects-tabs {
  background: linear-gradient(90deg, rgba(176, 0, 54, 1) 0%, rgba(255, 10, 84, 1) 100%);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  align-self: stretch;
}

.tab-item {
  color: #fff;
  padding: 20px;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
}

.recent {
  margin-top: 20px;
}

/* --- ACTIVE TAB --- */
.tab-item.active {
  background: #fff;
  color: #d90429;
}

/* --- RIGHT SIDE --- */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* --- CARD STYLE --- */
.project-card {
  padding: 20px;
  margin-bottom: 20px;
}

/* --- IMAGE PLACEHOLDER --- */
.img-placeholder {
    margin: 40px;
    width: 70px;   /* control size */
    height: auto;
    object-fit: contain;
}

/* --- VALUE SECTION IMAGE --- */
.section-block--value img {
  transition: transform 0.4s ease;
}

.section-block--value img:hover {
  transform: scale(1.05);
}

.section-block--value {
    background-color: var(--surface-soft);
}

/* --- RESPONSIVE --- */
@media (max-width: 991.98px) {
    .img-placeholder {
        margin: 20px auto;
        display: block;
        width: 60px;
    }

    .project-card {
        padding: 16px;
    }

    .project-card .row > [class*="col-md-3"],
    .project-card .row > [class*="col-md-6"] {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    /* Stack tabs above content */
    .projects-tabs {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-self: auto;
        white-space: nowrap;
    }

    .projects-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-item {
        flex-shrink: 0;
        padding: 14px 18px;
        font-size: 0.875rem;
    }

    .recent {
        margin-top: 0;
    }

    .col-md-8.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .project-card .col-md-3 {
        text-align: center;
    }

    .img-placeholder {
        margin: 12px auto;
        width: 54px;
    }
}

@media (max-width: 575.98px) {
    .tab-item {
        padding: 12px 14px;
        font-size: 0.82rem;
    }

    .project-card {
        padding: 14px 12px;
    }

    .project-card h5 {
        font-size: 0.95rem;
    }

    .project-card p,
    .project-card small {
        font-size: 0.82rem;
    }
}