/* Background image container */

.hero {
    position: relative;
    height: 500px;

		border-radius: 14px;

    background-image: url('../images/about-me.jpg');
    background-size: cover;
    background-position: center;

    display: flex;
    justify-content: right;
    align-items: flex-end;

    padding-bottom: 30px; /* controls vertical placement */
		padding-right: 30px; /* controls right placement */
		padding-left: 30px;
}

/* Overlay card*/

.stats-card {
    display: flex;
    justify-content: space-around;
    align-items: center;

    padding: 15px 25px;
    gap: 30px;

    background: rgba(255, 255, 255, 0.8); /* semi-transparent */
    backdrop-filter: blur(6px);            /* modern glass effect */
    
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

    max-width: 450px;
    /* width: 60%; */
}

/* Text styling */

.stat {
    text-align: center;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #ff6a00;
    /* margin-bottom: 6px; */
}

.stat-label {
    font-size: 18px;
    color: #555;
}

@media (max-width: 600px) {
    .hero {
        height: 400px;
				justify-content: left;
    }
		.stats-card {
        flex-direction: column;
        gap: 20px;
    }
}