/* ========== HERO SECTION ========== */

.hero-section {
    position: relative;
}

    .hero-section .text-gradient {
        background: linear-gradient(135deg, var(--amr-primary), var(--amr-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.hero-photo-wrapper {
    position: relative;
    max-width: 320px;
}

.hero-photo {
    display: block;
    width: 100%;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    transform: translateZ(0);
}

/* Meta line under hero */

.hero-meta span,
.hero-meta a {
    font-size: 0.9rem;
}

/* ========== SKILL CARDS ========== */

.skill-card {
    border-radius: 1rem;
    border: 1px solid rgba(108, 117, 125, .25);
    padding: 1.3rem 1.25rem 1.4rem;
    background-color: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="light"] .skill-card {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] .skill-card {
    background-color: rgba(255, 255, 255, 0.02);
}

.skill-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, rgba(0, 174, 239, 0.18), rgba(0, 207, 255, 0.28) );
}

.skill-icon {
    font-size: 1.1rem;
    color: var(--amr-primary);
}

/* ========== PROJECT CARDS & THUMBNAILS ========== */

.project-card {
    border-radius: 1rem;
    border: 1px solid rgba(108, 117, 125, .25);
    padding: 0.9rem 0.9rem 1.2rem;
    background-color: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] .project-card {
    background-color: rgba(255, 255, 255, 0.02);
}

.project-thumb {
    position: relative;
    border-radius: 0.9rem;
    overflow: hidden;
    background-color: #000;
}

.project-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    opacity: 0.9;
    transition: transform .25s ease, opacity .25s ease;
}

.project-type-badge {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    border-radius: 999px;
    padding: 0.3rem 0.45rem;
    background: linear-gradient(135deg, var(--amr-primary-dark), #000000);
    color: #fff;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover effect */
.project-card:hover .project-img {
    transform: scale(1.04);
    opacity: 1;
}



/* Base Gradient Card */
.project-gradient {
    height: 160px;
    border-radius: 14px;
    padding: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

    /* Hover Animation */
    .project-gradient:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    }

/* Icon */
.project-icon i {
    font-size: 2.5rem;
    color: #fff;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}

/* Title Text */
.project-title-overlay {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Custom Gradient Variants */
.project-foodshot {
    background: linear-gradient(135deg, #ff7b00, #ffbb55);
}

.project-jopetrol {
    background: linear-gradient(135deg, #0061ff, #4dacff);
}

.project-erp {
    background: linear-gradient(135deg, #0a8a50, #39d98a);
}

.project-teqanijo {
    background: linear-gradient(135deg, #8b00ff, #c06dff);
}

/* Dark Mode adjustments */
[data-bs-theme="dark"] .project-gradient {
    filter: brightness(0.92);
}