@import url(style.css);

.history-project-text h2 {
    border-left: 4px solid var(--secondary-color);
    padding-left: 10px;
}
.btn-primary-custom {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    border: none;
}

.history-project-page .history-project-logo .container{
    background: var(--white-color);
}

.history-project-logo .card img {
    width: 100%;
    object-fit: cover;
}

.history-project-logo .card:hover {
    transform: scale(1.05);
}
.history-project-logo .card {
    position: relative;
    margin-bottom: 5%;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
}

/* Gambar dalam Card */
.history-project-logo .card img {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    transition: filter 0.3s ease-in-out;
}
/* Efek hover: gambar lebih gelap */
.history-project-logo .card:hover img {
    filter: brightness(50%);
}

/* Efek hover: Card sedikit membesar */
.history-project-logo .card:hover {
    transform: scale(1.05);
}

/* Overlay untuk judul di dalam Card */
.history-project-logo .card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.6); /* Latar belakang gelap transparan */
    color: var(--white-color);
    text-align: center;
    opacity: 0; /* Sembunyikan secara default */
    transition: opacity 0.3s ease-in-out;
}

/* Munculkan overlay saat hover */
.history-project-logo .card:hover .card-overlay {
    opacity: 1;
}
.pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}
.pagination .page-item .page-link {
    color: var(--primary-color) !important;
}
.pagination .page-item .page-link:hover {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    border-color: var(--primary-color) !important;
}
.pagination .page-item.active .page-link:hover {
    color: var(--primary-color) !important;
    background-color: var(--white-color) !important;
}