/* === 1. HEADER BAR === */
/* This makes the header bar shorter (e.g., 80px) */
#header, #header .logo, #header #navbar {
    height: 80px !important; /* <-- SET YOUR COMPACT HEIGHT HERE */
}

/* === 2. HOMEPAGE BANNER === */
/* This makes the homepage banner image match the new header height */
.modular-row.showcase.flush-top {
    padding-bottom: 0 !important;
    height: 250px !important;       /* <-- MAKE THIS MATCH YOUR HEIGHT */
    min-height: 150px !important;  /* <-- MAKE THIS MATCH YOUR HEIGHT */
    background-position: 50% 25% !important; /* Your image position */
}

/* This makes the homepage header transparent */
body.header-image #header {
    background-color: transparent !important;
}

/* This moves the homepage content up to sit below the new header */
.header-image #body .flush-top {
    margin-top: -150px !important; /* <-- MAKE THIS MATCH YOUR HEIGHT */
    padding-top: 0 !important;
}

/* === 3. FIX FOR ALL OTHER PAGES (Portfolio, About, etc.) === */
/* This pushes the content (like the "PORTFOLIO" title) down 
   to sit below the new 80px menu bar. */
#body {
    padding-top: 150px !important; /* <-- MAKE THIS MATCH YOUR HEIGHT */
}