/*-----------------------------------------------------------------------------------
    Header/Navigation Bar Zoom Fix CSS
    Makes the header bar work properly at different browser zoom levels (80%, 90%, 100%, 110%)
-----------------------------------------------------------------------------------*/

/* ==========================================================================
   Base Header Styles - Works at all zoom levels
   ========================================================================== */

/* Header container - use percentage-based width */
.tp-header-area .container-1750 {
    max-width: 96%;
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   Logo - Keep original size
   ========================================================================== */

.tp-header-logo img {
    max-width: inherit;
    width: auto;
    height: auto;
}

/* ==========================================================================
   Menu Items - Consistent text size with spacing adjustments only
   ========================================================================== */

.tp-header-menu>nav>ul>li {
    margin: 0 12px;
}

.tp-header-menu>nav>ul>li>a {
    font-size: 16px;
    padding: 20px 0;
}

/* Header top-level cursor behavior */
.tp-header-menu > nav > ul > li > a.menu-link-services,
.tp-header-menu > nav > ul > li > a.menu-link-expertise {
    cursor: default;
}

.tp-header-menu > nav > ul > li > a.menu-link-tech-stack,
.tp-header-menu > nav > ul > li > a.menu-link-our-works,
.tp-header-menu > nav > ul > li > a.menu-link-contact-us {
    cursor: pointer;
}

/* ==========================================================================
   Megamenu Dropdown - Percentage-based width
   ========================================================================== */

.tp-megamenu-wrapper {
    max-width: 95% !important;
    left: 2.5% !important;
    right: 2.5% !important;
}

.tp-header-shop-wrap .tp-megamenu-wrapper {
    max-width: 95% !important;
}

.tp-megamenu-title {
    font-size: 17px;
    padding-left: 25px;
}

.tp-megamenu-list ul li a {
    font-size: 17px;
    padding: 12px 25px;
}

.tp-megamenu-list ul li a p {
    font-size: 15px;
}

/* ==========================================================================
   Header Button
   ========================================================================== */

.tp-btn-yellow-green.green-solid {
    height: auto;
    min-height: 46px;
    padding: 10px 16px;
    font-size: 14px;
}

/* ==========================================================================
   Zoom Level Specific Adjustments - Minimal text size changes
   ========================================================================== */

/* For screens 1400px - 1599px (typical 100% zoom on 1920px monitors) */
@media (min-width: 1400px) and (max-width: 1599px) {
    .tp-header-area .container-1750 {
        max-width: 98%;
    }

    .tp-header-menu>nav>ul>li {
        margin: 0 10px;
    }

    .tp-header-menu>nav>ul>li>a {
        font-size: 15px;
        padding: 18px 0;
    }

    .tp-megamenu-title {
        font-size: 16px;
        padding-left: 20px;
    }

    .tp-megamenu-list ul li a {
        font-size: 16px;
        padding: 10px 20px;
    }

    .tp-megamenu-list ul li a p {
        font-size: 14px;
    }

    .tp-btn-yellow-green.green-solid {
        min-height: 44px;
        padding: 9px 14px;
        font-size: 14px;
    }
}

/* For screens 1200px - 1399px (higher zoom levels) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .tp-header-area .container-1750 {
        max-width: 99%;
    }

    .tp-header-menu>nav>ul>li {
        margin: 0 8px;
    }

    .tp-header-menu>nav>ul>li>a {
        font-size: 14px;
        padding: 16px 0;
    }

    .tp-megamenu-wrapper {
        max-width: 98% !important;
        left: 1% !important;
        right: 1% !important;
    }

    .tp-megamenu-title {
        font-size: 15px;
        padding-left: 18px;
        padding-bottom: 18px;
    }

    .tp-megamenu-list ul li a {
        font-size: 15px;
        padding: 10px 18px;
    }

    .tp-megamenu-list ul li a p {
        font-size: 13px;
    }

    .tp-btn-yellow-green.green-solid {
        min-height: 42px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* For large screens 1600px+ (80% zoom or large monitors) */
@media (min-width: 1600px) {
    .tp-header-area .container-1750 {
        max-width: 94%;
    }

    .tp-header-menu>nav>ul>li {
        margin: 0 14px;
    }

    .tp-header-menu>nav>ul>li>a {
        font-size: 16px;
        padding: 20px 0;
    }

    .tp-megamenu-wrapper {
        max-width: 92% !important;
        left: 4% !important;
        right: 4% !important;
    }

    .tp-megamenu-title {
        font-size: 17px;
        padding-left: 28px;
    }

    .tp-megamenu-list ul li a {
        font-size: 17px;
        padding: 12px 28px;
    }

    .tp-megamenu-list ul li a p {
        font-size: 15px;
    }

    .tp-btn-yellow-green.green-solid {
        min-height: 48px;
        padding: 10px 16px;
        font-size: 15px;
    }
}

/* For very large screens 1800px+ */
@media (min-width: 1800px) {
    .tp-header-area .container-1750 {
        max-width: 92%;
    }

    .tp-header-menu>nav>ul>li {
        margin: 0 16px;
    }

    .tp-header-menu>nav>ul>li>a {
        font-size: 17px;
    }

    .tp-megamenu-wrapper {
        max-width: 90% !important;
        left: 5% !important;
        right: 5% !important;
    }

    .tp-megamenu-title {
        font-size: 18px;
    }

    .tp-megamenu-list ul li a {
        font-size: 18px;
    }
}