/* =========================================================
   MORDMINI TECHNOLOGY
   GLOBAL + HEADER STYLES
   style.css
   ========================================================= */


/* =========================================================
   1. GLOBAL VARIABLES
   ========================================================= */

:root {
    --color-primary: #1268e8;
    --color-primary-dark: #0b4fc1;

    --color-navy: #102c50;
    --color-heading: #102c50;

    --color-text: #506985;
    --color-muted: #71839a;

    --color-white: #ffffff;
    --color-light: #f5f9fd;

    --color-border: #e5edf6;

    --container-width: 1280px;
    --header-height: 76px;

    --font-primary:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    --transition: 0.3s ease;

    --shadow-soft:
        0 10px 30px rgba(25, 75, 125, 0.10);
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    color: var(--color-text);

    background: var(--color-white);

    font-family: var(--font-primary);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   3. BASIC ELEMENT RESET
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}


img {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;

    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


/* =========================================================
   4. MAIN CONTAINER
   ========================================================= */

.container {
    width:
        min(
            100% - 64px,
            var(--container-width)
        );

    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   5. SITE HEADER
   ========================================================= */

.site-header {
    position: relative;
    z-index: 1000;

    width: 100%;
    height: var(--header-height);

    margin: 0;

    background:
        rgba(255, 255, 255, 0.98);

    border-bottom:
        1px solid var(--color-border);
}


/* =========================================================
   6. HEADER CONTAINER
   ========================================================= */

.header-container {
    display: flex;
    align-items: center;

    width:
        min(
            100% - 64px,
            var(--container-width)
        );

    height: var(--header-height);

    margin-right: auto;
    margin-left: auto;

    padding: 0;
}


/* =========================================================
   7. BRAND / LOGO
   ========================================================= */

.brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    text-decoration: none;
}


/*
   IMPORTANT:
   logo.png already contains the Mordmini wordmark
   and Technology Private Limited text.
*/

.brand-logo {
    display: block;

    width: auto;
    height: 48px;

    max-width: 280px;

    margin: 0;

    object-fit: contain;
    object-position: left center;
}


/* Hide old text branding if it is still in HTML */

.brand-details {
    display: none;
}


/* =========================================================
   8. MAIN NAVIGATION
   ========================================================= */

.main-navigation {
    display: flex;
    align-items: center;

    height: 100%;

    margin-left: auto;
}


/* =========================================================
   9. NAVIGATION LIST
   ========================================================= */

.navigation-list {
    display: flex;
    align-items: center;

    height: 100%;

    gap: 28px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.navigation-list li {
    display: flex;
    align-items: center;

    height: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   10. NAVIGATION LINKS
   ========================================================= */

.navigation-list a {
    position: relative;

    display: inline-flex;
    align-items: center;

    height: 100%;

    margin: 0;
    padding: 0;

    color: #405570;

    font-size: 13px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color var(--transition);
}


.navigation-list a:hover {
    color: var(--color-primary);
}


.navigation-list a.active {
    color: var(--color-primary);
}


/* Active underline */

.navigation-list a.active::after {
    position: absolute;

    right: 0;
    bottom: 13px;
    left: 0;

    height: 2px;

    content: "";

    background:
        var(--color-primary);

    border-radius: 2px;
}


/* Hover underline */

.navigation-list a:not(.active)::after {
    position: absolute;

    right: 50%;
    bottom: 13px;
    left: 50%;

    height: 2px;

    content: "";

    background:
        var(--color-primary);

    border-radius: 2px;

    transition:
        right var(--transition),
        left var(--transition);
}


.navigation-list a:not(.active):hover::after {
    right: 0;
    left: 0;
}


/* =========================================================
   11. HEADER CONTACT AREA
   ========================================================= */

.header-contact {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 18px;

    margin-left: 34px;
}


/* =========================================================
   12. HEADER CONTACT ITEMS
   ========================================================= */

.header-contact-item {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin: 0;

    color: #506985;

    font-size: 11px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color var(--transition);
}


.header-contact-item:hover {
    color: var(--color-primary);
}


/* =========================================================
   13. CONTACT ICON
   ========================================================= */

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: var(--color-primary);

    font-size: 14px;
    line-height: 1;
}


/* =========================================================
   14. MAIN CONTENT
   ========================================================= */

main {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   15. SECTION ANCHOR OFFSET
   Prevent fixed/sticky headers from covering sections
   ========================================================= */

section[id] {
    scroll-margin-top:
        var(--header-height);
}


/* =========================================================
   16. COMMON TEXT UTILITIES
   ========================================================= */

.text-primary {
    color: var(--color-primary);
}


/* =========================================================
   17. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        2px solid var(--color-primary);

    outline-offset: 3px;
}


/* =========================================================
   18. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    :root {
        --container-width: 1400px;
    }


    .header-container {
        width:
            min(
                100% - 80px,
                var(--container-width)
            );
    }


    .container {
        width:
            min(
                100% - 80px,
                var(--container-width)
            );
    }


    .navigation-list {
        gap: 31px;
    }


    .header-contact {
        margin-left: 38px;
    }
}


/* =========================================================
   19. LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .brand-logo {
        height: 44px;

        max-width: 240px;
    }


    .navigation-list {
        gap: 20px;
    }


    .navigation-list a {
        font-size: 12px;
    }


    .header-contact {
        gap: 12px;

        margin-left: 22px;
    }


    .header-contact-item {
        font-size: 10px;
    }
}


/* =========================================================
   20. SMALL LAPTOP / TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1050px) {

    .brand-logo {
        height: 42px;

        max-width: 220px;
    }


    .navigation-list {
        gap: 17px;
    }


    .header-contact {
        margin-left: 18px;
    }


    /*
       Hide email first on smaller screens.
       Phone remains visible.
    */

    .header-contact-item:last-child {
        display: none;
    }
}


/* =========================================================
   21. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        height: 72px;
    }


    .header-container {
        height: 72px;
    }


    .brand-logo {
        height: 40px;
    }


    .navigation-list {
        gap: 18px;
    }


    .navigation-list a {
        font-size: 12px;
    }


    .header-contact {
        display: none;
    }


    .navigation-list a.active::after,
    .navigation-list a:not(.active)::after {
        bottom: 10px;
    }
}


/* =========================================================
   22. MOBILE HEADER
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --header-height: auto;
    }


    .site-header {
        height: auto;

        min-height: 68px;
    }


    .header-container {
        flex-wrap: wrap;

        width:
            min(
                100% - 32px,
                var(--container-width)
            );

        height: auto;

        min-height: 68px;

        padding:
            10px 0;
    }


    .brand {
        width: 100%;

        justify-content: center;
    }


    .brand-logo {
        height: 42px;

        max-width: 220px;
    }


    .main-navigation {
        width: 100%;
        height: auto;

        margin-top: 8px;
        margin-left: 0;
    }


    .navigation-list {
        justify-content: center;
        flex-wrap: wrap;

        width: 100%;
        height: auto;

        gap:
            5px 18px;
    }


    .navigation-list li {
        height: auto;
    }


    .navigation-list a {
        height: auto;

        padding:
            7px 0;

        font-size: 12px;
    }


    .navigation-list a.active::after,
    .navigation-list a:not(.active)::after {
        bottom: 0;
    }


    section[id] {
        scroll-margin-top: 0;
    }
}


/* =========================================================
   23. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width:
            min(
                100% - 30px,
                var(--container-width)
            );
    }


    .header-container {
        width:
            min(
                100% - 30px,
                var(--container-width)
            );
    }


    .brand-logo {
        height: 39px;

        max-width: 205px;
    }


    .navigation-list {
        gap:
            4px 13px;
    }


    .navigation-list a {
        font-size: 11px;
    }
}


/* =========================================================
   24. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .brand-logo {
        height: 37px;

        max-width: 190px;
    }


    .navigation-list {
        gap:
            3px 11px;
    }


    .navigation-list a {
        font-size: 10.5px;
    }
}


/* =========================================================
   25. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    .navigation-list a,
    .navigation-list a::after,
    .header-contact-item {
        transition-duration:
            0.01ms !important;
    }
}
/* =========================================================
   26. FOOTER
   ========================================================= */

.site-footer {
    background: var(--color-navy);
    color: var(--color-white);
    padding: 16px 0;
}

.site-footer p {
    margin: 0;
}