body {
    font-family: "Inter", sans-serif !important;
}

h2, h2, h3, h4, h5, h6 {
    font-family: "Source Serif 4", serif !important;
}
p, a, li, span, div {
    font-family: "Inter", sans-serif !important;
}
.project-item{
    flex-flow: column !important;
}

.header .topbar {
    background-color: #683300;
}
.navmenu li:hover>a, .navmenu .active, .navmenu .active:focus {
    color: #04B148 !important;
    font-weight: 600 !important;
}

.projects .project-status.ongoing {
    background: #04B148;
    font-size: 12px;
}
.ongoing {
    background: #04B148 !important;
    /* font-size: 12px; */
}
.in-progress{
    background: #fcb900 !important;
}
header{
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
}
.btn-primary {
    background-color: #02923b !important;
    border-color: #02923b !important;
    color: var(--contrast-color);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: color-mix(in srgb, var(--accent-color), #000 10%);
    border-color: color-mix(in srgb, var(--accent-color), #000 10%);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}
.projects .project-details {
    margin-bottom: 8px;
}
.header .logo img {
    max-height: 70px;
}
.hero{
    padding-top: 0px;
}
.about .about-content p{
    margin-bottom: 8px !important;
}
.footer{
    background-color: #002555 !important;
}
.about .about-image .experience-badge{
    background-color: #04B148 !important;
}
.hero-img {
    height: 100% !important;
}
.projects .project-link, .new-link{
    background-color: #14529d !important;
    color: #ffffff !important;
}
.custom-filter-group .filter-btn {
    background: #ffffff;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 30px;
    margin: 0 6px;
    transition: all 0.3s ease-in-out;
    box-shadow: inset 0 0 0 0 #007bff;
}
.project-details .project-header .project-banner img{
    height: auto;
}
.custom-filter-group .filter-btn:hover {
    background: #007bff;
    color: #ffffff;
    transform: translateY(0px);
}

.custom-filter-group .filter-btn.active {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #ffffff;
    border: none;
    box-shadow: 0px 5px 15px rgba(0, 123, 255, 0.3);
}

.custom-filter-group .filter-btn:focus {
    outline: none;
    box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.3);
}
.newly .new-visual{
    
}

.newly .new-item {
    width: 100%;
    max-width: 450px;
    margin: 0; /* <-- changed from auto */
    justify-self: start; /* ensures left alignment */
}





















/* Desktop */
@media (min-width:767px) {
    .header .branding {
        padding: 6px 0;
    }
}
/* Mobile */
@media (max-width:767px) {
    .hero {
        padding: 0px 0;
    }
    .projects .project-visual {
        height: auto !important;
    }
    .header .logo img {
        max-height: 70px;
    }
}