/* ──────── CUSTOM STYLES ──────── */

/* Your existing brand font (keep it) */
nav.navbar-default .navbar-header .navbar-brand {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* Perfectly center your logo vertically in the black navbar */
.navbar-brand img {
    margin-top: -8px !important;   /* move logo up – try -6 to -12 */
    height: 56px !important;       /* optional bigger size on load */
}

@media (min-width: 768px) {
    .navbar-shrink .navbar-brand img {
        margin-top: -6px !important;   /* slightly less lift when scrolled */
        height: 48px !important;       /* slightly smaller when scrolled */
    }
}

/* NEW: Force black navbar at all times (desktop + mobile) */
#mainNav {
    background-color: #000000 !important;
    transition: none !important;            /* removes the transparent → colored fade on scroll */
}

#mainNav.navbar-shrink {
    background-color: #000000 !important;   /* makes sure it stays black even after scrolling */
}

/* Make text and links readable on black */
#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* Optional: make active/hover links your brand blue instead of default gray */
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active {
    color: #0056D2 !important;   /* your primary blue from the config */
}

/* MOBILE: Force black navbar + perfect logo position on phones */
@media (max-width: 767px) {
    .navbar-default {
        background-color: #000000 !important;   /* black even when collapsed */
    }
    
    .navbar-brand img {
        height: 44px !important;       /* nice size on mobile */
        margin-top: -6px !important;    /* raises it perfectly */
    }
    
    /* When you open the mobile menu – keep it black */
    .navbar-collapse.in,
    .navbar-collapse.collapsing {
        background-color: #000000 !important;
    }
}
/* ──────── PORTFOLIO CUSTOM STYLES ──────── */

/* Portfolio grid titles under thumbnails */
#portfolio .portfolio-caption h4 {
    font-size: 14px !important;    /* adjust smaller/larger */
    font-weight: 600;
    margin-bottom: 4px;            /* reduce spacing */
    text-transform: none;          /* remove uppercase if needed */
}

/* Portfolio grid subtitles */
#portfolio .portfolio-caption .text-muted {
    font-size: 13px !important;
    margin-top: 0;
}

/* Portfolio modal titles */
.portfolio-modal .modal-body h2 {
    font-size: 26px !important;    /* adjust smaller/larger */
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: none;          /* remove uppercase */
}

/* Portfolio modal descriptions */
.portfolio-modal .modal-body p {
    font-size: 15px;
    line-height: 1.5;
}

/* Portfolio modal Client/Date/Service details */
.portfolio-modal .modal-body .item-details {
    font-size: 13px;
}


.social-icons-spacing {
    margin-top: 60px; /* adjust as needed */
    margin-bottom: 0;
}

/* Add spacing between About Me image and text on mobile */
@media (max-width: 767px) {
    #about .row.align-items-center > .col-md-8 {
        margin-top: 30px !important; /* Adjust as needed for spacing */
    }
}