.cepg-wrapper { background:#0b1f2a; padding:50px; }
.cepg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }

.cepg-card {
    background:#1f3a4a;
    border-radius:14px;
    overflow:hidden;
    transition:.3s;
}
.cepg-card:hover { transform:translateY(-10px); }

.cepg-image img { width:100%; height:220px; object-fit:cover; }

.cepg-content { padding:20px; color:#fff; }

/* FILTER */
.cepg-filters {
    display:flex;
    background:#eee;
    border-radius:10px;
    padding:6px;
    margin-bottom:30px;
    position:relative;
}
.cepg-filters button {
    flex:1;
    background:none;
    border:none;
    padding:10px;
    z-index:2;
    cursor:pointer;
}
.cepg-slider {
    position:absolute;
    background:#c9a646;
    border-radius:8px;
    transition:.3s;
}

/* SKELETON */
.skeleton {
    height:200px;
    background:linear-gradient(90deg,#2a4a5d 25%,#3b5f75 50%,#2a4a5d 75%);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% { background-position:-200% }
    100% { background-position:200% }
}
.cepg-tags {
    margin-top: 15px;
}

.cepg-tags span {
    background: #2c4b5d;
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 20px;
    margin-right: 6px;
    display: inline-block;
    transition: 0.3s;
}

.cepg-tags span:hover {
    background: #c9a646; /* gold hover */
    color: #000;
}