/* ROOT COLOR PALETTE */
        :root {
            --bg-dark: #050505;
            --bg-card: #0a0a0a;
            --primary-orange: #ff8c00;
            --secondary-orange: #ff4500;
            --text-main: #ffffff;
            --text-dim: #cbd5e1;
            --accent-gradient: linear-gradient(135deg, var(--primary-orange) 0%, var(--secondary-orange) 100%);
            --glow-shadow: 0 0 20px rgba(255, 140, 0, 0.3);
        }


/* CERTIFICATE SECTION */
.cert-section {
    margin-top:-50px ;
    padding: 50px 4%;
    position: relative;
    background: transparent;
    z-index: 1;
}

.cert-title {
    text-align: center;
    font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 100px;
    color: var(--text-main);
}

.cert-title span {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SHOWCASE LAYOUT */
.cert-showcase {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}

/* CERTIFICATE ITEM */
.cert-item {
    position: relative;
    width: 280px;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    cursor: pointer;
}

.cert-item img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

/* Initial tilts */
.tilt-left {
    transform: rotate(-6deg) translateY(10px);
}

.tilt-right {
    transform: rotate(6deg) translateY(10px);
}

.tilt-none {
    transform: rotate(0deg);
}

/* Hover effect */
.cert-item:hover {
    transform: rotate(0deg) translateY(-20px) scale(1.05);
}

.cert-item:hover img {
    box-shadow: 0 0 60px rgba(255, 140, 0, 0.6);
}

/* INFO */
.cert-info {
    margin-top: 22px;
    text-align: center;
}

.cert-info h3 {
    font-size: 1.2rem;
    color: var(--text-main);
    margin-bottom: 6px;
}

.cert-info span {
    font-size: 0.9rem;
    color: var(--text-dim);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .cert-item {
        width: 300px;
    }
}

.cert-section {
    position: relative;
    top: -180px;
}

.team-section{
    position: relative;
    top: -80px;
}