/* =========================================================
   GLOBAL FIXES
========================================================= */

/* Ensure container clips content */
.work-item .item-container {
    position: relative;
    overflow: hidden;
}

/* Smooth image zoom */
.work-item img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

/* Zoom image but stay inside box */
.work-item:hover img {
    transform: scale(1.08);
}

/* Ensure overlay stays above image */
.work-item .overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* =========================================================
   HEADER / NAVBAR CORE
========================================================= */

/* Brand wrapper */
.brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

/* Logo */
.brand-logo {
    max-height: 110px;
    width: auto;
    height: auto;
    display: block;
}

/* Tagline */
.brand-tagline {
    font-size: 16px;
    font-weight: 600;
    color: #1c75bc;
    white-space: nowrap;
}

/* =========================================================
   DESKTOP NAVIGATION (>= 992px)
========================================================= */

@media (min-width: 992px) {

    .navbar-header {
        float: left;
        width: auto;
    }

    .navbar-nav {
        float: right;
        display: block;
    }

    #fixed-collapse-navbar {
        text-align: right;
    }

    .navbar-nav > li > a {
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0.5px;
        padding: 18px 16px;
    }
}

/* =========================================================
   CLIENT PC FIX (1200px – 1399px)  ⭐ IMPORTANT
========================================================= */

@media (min-width: 1200px) and (max-width: 1399px) {

    .navbar-header {
        float: left;
        width: auto;
    }

    .navbar-collapse {
        float: right;
        width: auto;
    }

    .navbar-nav {
        display: flex;
        align-items: center;
        float: right;
    }

        .navbar-nav > li {
            margin: 0 12px;
        }

    /* Slider text balance */
    .tp-banner h2 {
        font-size: 48px;
    }

    .tp-banner p {
        font-size: 18px;
    }

    .layer-content-responsive {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   TABLET & MOBILE NAVIGATION (<= 991px)
========================================================= */

@media (max-width: 991px) {

    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        width: auto;
        padding: 10px 0;
    }

    .navbar-toggle {
        position: relative;
        float: right;
        margin-right: 15px;
        right: 0 !important;
    }

    .navbar-collapse {
        width: 100%;
        background: #ffffff;
        margin-top: 10px;
        padding: 10px 15px;
    }

    .navbar-nav {
        float: none;
        display: block;
        width: 100%;
    }

        .navbar-nav > li {
            display: block;
        }

            .navbar-nav > li > a {
                padding: 10px 0;
                font-size: 15px;
            }

    #navigation.affix {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* =========================================================
   MOBILE FINAL POLISH (<= 480px)
========================================================= */

@media (max-width: 480px) {

    .brand-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .brand-logo {
        max-height: 55px;
    }

    .brand-tagline {
        font-size: 13px;
        display: block;
        white-space: normal;
    }

    .navbar-toggle {
        padding: 6px;
        margin: 0;
        float: none;
    }

    /* Prevent slider overlap */
    #main-slider {
        margin-top: 80px;
    }
}

/* =========================================================
   LOGO RESPONSIVENESS
========================================================= */

@media (max-width: 1200px) {
    .brand-logo {
        max-height: 100px;
    }
}

@media (max-width: 992px) {
    .brand-logo {
        max-height: 90px;
    }
}

@media (max-width: 768px) {
    .brand-logo {
        max-height: 75px;
    }
}

/* =========================================================
   SLIDER BACKGROUND & IMAGE FIXES
========================================================= */

/* Background blur */
.tp-bgimg {
    filter: blur(6px);
    transform: scale(1.05);
}

/* Woman image alignment */
.tp-banner .caption.lfr {
    right: 0 !important;
    left: auto !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .tp-banner .caption.lfr {
        transform: scale(0.75);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .tp-banner .caption.lfr {
        transform: scale(0.7);
        right: 0 !important;
    }
}