.project-card {
            transition: all 0.2s ease-in-out;
        }
        .project-card:hover {
            transform: translateY(-2px);
        }
        .region-icon {
            width: 20px;
            height: 20px;
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
        }



        .hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/img/ref-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/img/ref-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: floatUp 5s ease-in-out infinite alternate;
}

@keyframes floatUp {
    0% {
        transform: scale(1) translateY(0);
    }
    100% {
        transform: scale(1.05) translateY(-10px);
    }
}

/* Ensure content stays above the animation */
.hero-section > * {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .hero-section {
        height: 300px;
    }
}


          body {
        padding-top: 80px!important; /* Adjust this value based on your header height */
    }