:root {
    --NTM_color_base: #008080;
    --NTM_color_bright: #FF6F00;
    --NTM_color_HW: #D72638;
    --NTM_color_Connect: #002CB7;
    --NTM_color_SW: #FF9E1B;
    --NTM_color_E2E: #00A676;
    --NTM_color_Ref: #7D3AC1;
}
        body {
            font-family: 'Roboto Flex', sans-serif;
            background-color: #f9f9f9;
            padding-top: 60px; /* Add padding to prevent content from being hidden behind the fixed header */

        }

        .header {
            background-color: #000;
            color: #fff;
            padding: 12px 0;
            position: fixed; /* Fix the header at the top */
            top: 0;
            width: 100%;
            z-index: 1000; /* Ensure the header stays on top of other content */
        }


        .footer {
            background-color: #000;
            color: #fff;
            padding: 12px 0;
            margin-top: 12px;
            text-align: center;
            position: relative;
        }
        
        .footer p {
            margin-bottom: 12px; /* Add space below the footer text */
        }


        .header a, .footer p {
            color: #fff;
            text-decoration: none;
        }
        .header a:hover {
            color: #ccc;
        }
        .lang-menu a {
            color: #aaa;
            margin: 0 10px;
        }
        .lang-menu a:hover {
            color: #fff;
        }
        .lang-menu {
            margin-top: 10px; /* Adjust this value to move the menu down */
        }
        .content {
            padding: 20px;
        }
        .section {
            margin-bottom: 30px;
        }
        h1 {
            font-size: 40px;
            font-weight: 600;
        }
        .intro {
            font-size: 21px;
            font-weight: 300;
        }
        h2 {
            font-size: 26px;
            font-weight: 600;
        }
        h3 {
            font-size: 21px;
            font-weight: 600;
        }
        p, .form-label {
            font-size: 17px;
            font-weight: 300;
        }
        .caption {
            font-size: 12px;
            font-weight: 300;
        }
      .know-how {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: flex-start; /* Align items at the top */

      }
      

         .card {
            background-color: #fff;
            border-radius: 15px;
            padding: 20px;
            box-shadow: none;
            border: none;
            border-top: 3px solid transparent;
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Align items at the top */
            height: 100%;
            transition: border-top-color 0.2s ease, transform 0.2s ease;
         }
         /* --NTM_color_base (teal) was defined in :root but never applied anywhere
            on the site. Used here as a subtle hover accent on the know-how cards. */
         .card:hover {
            border-top-color: var(--NTM_color_base);
            transform: translateY(-2px);
         }
        .card i {
            font-size: 3.5rem;
            margin-bottom: 15px;
            align-self: flex-start; /* Align icon at the top */

        }
        .contact-info {
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .btn-custom {
            /* Orange (--NTM_color_bright) is the site's one CTA accent — reserved
               for the primary action only, so it stands out against the teal
               used everywhere else (links, badges, hover states). */
            background-color: var(--NTM_color_bright);
            border-radius: 25px;
            color: #fff;
            margin-top: 10px;
            display: block;
            width: 100%;
        }
        .btn-custom:hover {
            background-color: #CC5900; /* ~20% darker than --NTM_color_bright */
            color: #fff;
        }
        .form-row {
            display: flex;
            gap: 10px;
        }
        .form-row .company {
            flex: 2;
        }
        .form-row .phone {
            flex: 1;
        }
        /* Anti-spam question + Submit button on one row, button aligned to the
           bottom of the input (not the label) so the two controls line up. */
        .captcha-row {
            align-items: flex-end;
            gap: 10px;
        }
        .captcha-field {
            flex: 1;
        }
        .captcha-row .btn-custom {
            width: auto;
            margin-top: 0;
            white-space: nowrap;
        }
        .privacy-note {
            margin-top: 20px;
            font-size: 14px;
            color: #555;
        }
        /* Honeypot anti-spam field: present in the DOM and tabbable-safe (tabindex="-1"),
           but invisible and unreachable to a real visitor. Bots that auto-fill every
           field still populate it, which we check for in contact_me.js. */
        .hp-field {
            position: absolute;
            left: -9999px;
            top: -9999px;
            height: 0;
            width: 0;
            overflow: hidden;
        }
        .form-status {
            margin-top: 12px;
            font-size: 14px;
        }
        .form-status.is-success {
            color: #085229;
        }
        .form-status.is-error {
            color: #661d1d;
        }

         /* ICONES */
  
  .icon-hw {
      color: var(--NTM_color_HW); /* Hardware */
      margin: 0.1em; /* Add slight space around */
  }
  .icon-connect {
      color: var(--NTM_color_Connect); /* Connectivity */
      margin: 0.1em; /* Add slight space around */
  }
  .icon-sw {
      color: var(--NTM_color_SW); /* Software */
      margin: 0.1em; /* Add slight space around */
  }
  .icon-e2e {
      color: var(--NTM_color_E2E); /* End-to-End Solutions */
      margin: 0.1em; /* Add slight space around */
  }
  .icon-ref {
      color: var(--NTM_color_Ref); /* Reference Designs */
      margin: 0.1em; /* Add slight space around */
  }

  .header img {
            height: 25px; /* Adjust this value to fit your design */
            width: auto;
        }

  

        .big-text {
            font-size: 36px;
            font-weight: 700;
            text-align: center;
            margin: 20px 0;
            line-height: 1.5; /* keeps the look it had as a <p> now that it is the page <h1> */
        }

        /* Section titles demoted from <h1> to <h2> (single-H1 structure):
           same look as the former h1. */
        .section-title {
            font-size: 40px;
            font-weight: 600;
        }

        /* Pre-title line on the migration page (was an <h3> placed before the <h1>). */
        .pre-title {
            font-size: 21px;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: .5rem;
        }

        .feature-block {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 25px;
        padding: 10px;
       background-color: transparent;
        border: none;
        border-radius: 0;
                    height: 100%; /* Ensure all items have the same height */

    }
    .feature-item i {
        font-size: 2.5rem;
        color: var(--NTM_color_base);
        flex-shrink: 0;
        align-self: center; /* Center icon vertically */

    }

    

    .feature-plug {
    display: flex;
    align-items: flex-start;
    gap: 25px; /* Space between icon and text */
    padding: 20px;
    background-color: white;
    border: none;
    border-radius: 0;
}

/* End-to-End Solutions: title + icon/text row now share one .card-styled
   frame (same white/rounded/hover-accent look as the know-how cards),
   spanning the full section width. .feature-plug keeps its own layout
   (icon + text row) but its background/padding are redundant once nested
   inside .card, which already provides both. */
.feature-plug-card {
    align-items: stretch;
}
.feature-plug-card h2 {
    margin-bottom: 15px;
}
.feature-plug-card .feature-plug {
    padding: 0;
    background-color: transparent;
}

.feature-plug i {
    font-size: 3.5rem;

    flex-shrink: 0;
    margin-right: 10px; /* Add margin to the right of the icon */
}
    .feature-text {
        flex: 1;
    }
    .feature-text strong {
        font-size: 1.25rem;
        font-weight: 600;
        display: block;
    }
    .feature-text p {
        /* Was 1rem (16px), then briefly the 17px body baseline — now matches .intro
           (21px/300) per the owner's preference for that size as the site's "normal"
           reading size, applied broadly (2026-09-04). */
        font-size: 21px;
        font-weight: 300;
        margin: 0;
    }

    a.custom-link {
    color: var(--NTM_color_base); /* Teal — contrast-checked at ~4.8:1 on white, passes WCAG AA for normal text */
    text-decoration: none; /* No underline */
}

a.custom-link:hover {
    color: #006666; /* ~20% darker than --NTM_color_base */
    text-decoration: underline; /* Underline on hover */
}

.coded-link {
    color: var(--NTM_color_base); /* same as custom link */
}


.logo-spacing {
    display: flex;
    justify-content: left;
    margin: 10px 0 28px; /* Was 10px 0 — the "Company Information" heading right
                             below sat almost flush against the logo. */
}

.logo-spacing img {
    height: 40px; /* Adjust the height as needed */
    width: auto;
}

/* Company Information block (contact card): grouped into three visual tiers
   instead of seven identical, evenly-spaced <p> tags — company name (bold,
   standalone), address (grouped tightly), legal identifiers (muted, smaller,
   grouped tightly) — so the reader's eye can parse it at a glance rather than
   reading every line with equal weight. */
.contact-info h3 {
    margin-bottom: 14px;
}
.company-name {
    font-weight: 600;
    margin-bottom: 4px;
}
.company-address {
    margin-bottom: 18px;
    line-height: 1.5;
}
.company-legal {
    color: #555;
    line-height: 1.7;
    margin-bottom: 0;
}


.alert-custom {
    background-color: #ffffff; /* White background */
    color: #333333; /* Dark gray text */
    border-color: #cccccc; /* Light gray border */
    margin: 20px auto;
    width: 80%;
    text-align: center;
    border-radius: 10px;
}

/* Announcement banner message: was inheriting the browser default (16px) because
   it wasn't wrapped in a <p>, making it the smallest text on the page despite being
   the first thing visitors read. Now matches .intro (21px/300), left-aligned for
   readability (centering a multi-line paragraph makes both edges ragged). */
.alert-message {
    font-size: 21px;
    font-weight: 300;
    text-align: left;
    margin: 0 auto;
}

.logo-container {
    margin-bottom: 40px; /* Add space below the logo container */
}


.logo-announcement {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align items at the bottom */
    gap: 30px; /* Adjust the gap as needed for spacing between logos */
    flex-wrap: wrap; /* Allow wrapping for narrow screens */
}

.logo-announcement img {
    width: auto;
    max-width: 100%; /* Ensure logos don't overflow the container */
}

.logo-netmore {
    height: 35px; /* Adjust the height to 90% */
}

.logo-alliance {
    height: 30px; /* Adjust the height to 80% */
}

.logo-netemera {
    height: 45px; /* Adjust the height to 70% */
}
.logo-kerlink {
    height: 54px; /* 20% larger than the 45px baseline logo size */
}

@media (max-width: 600px) {
    .logo-announcement {
        flex-direction: column; /* Stack logos vertically on narrow screens */
        align-items: center; /* Center logos horizontally */
        gap: 12px; /* Was 30px — three logos stacked at the desktop gap pushed
                      all page content far below the fold on mobile. */
    }
    /* Same reasoning as the gap above: shrink the announcement banner's
       stacked logo trio specifically on mobile, where it previously pushed
       the entire homepage below ~1600px of scroll before any real content. */
    #announcementAlert .logo-netmore {
        height: 26px;
    }
    #announcementAlert .logo-alliance {
        height: 22px;
    }
    #announcementAlert .logo-netemera {
        height: 32px;
    }
}

.icon-netmore-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space between icons */
    align-items: center; /* Centers icons horizontally */
    height: 100%;
}

/* Was #f28933 (orange) with a #002cb7 (navy) icon — an arbitrary, one-off pair
   with no relation to Netemera's own brand color or to .icon-kerlink's palette
   (magenta/light-blue). Unified both partner badges on the site's own teal
   brand color (--NTM_color_base) so they read as one consistent component
   regardless of which partner a page is about. */
.icon-netmore {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--NTM_color_base);
    border-radius: 50%; /* Makes the background circular */
    width: 72px;
    height: 72px;
    margin: 6px 0; /* 3px space between icons */
}


.icon-netmore i {
    color: #ffffff;
    font-size: 48px;
}


.icon-kerlink-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space between icons */
    align-items: center; /* Centers icons horizontally */
    height: 100%;
}

/* Unified with .icon-netmore — see the comment there. */
.icon-kerlink {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--NTM_color_base);
    border-radius: 50%; /* Makes the background circular */
    width: 72px;
    height: 72px;
    margin: 6px 0; /* 3px space between icons */
}


.icon-kerlink i {
    color: #ffffff;
    font-size: 48px;
}

.logo-migration-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Distributes space between logos */
    align-items: center; /* Centers logos horizontally */
    height: 100%;
}
.logo-migration {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72px; /* Match the footprint of the 72px icon badges (.icon-netmore/.icon-kerlink)
                          below, while staying proportional. Was a fixed height: 72px with no
                          width cap — fine for roughly-square logos, but LoRaAlliance.png is a
                          very wide source image (475x106) and rendered ~322px wide at that fixed
                          height, overflowing its narrow col-md-2 column. height:auto + max-height
                          lets the browser scale down proportionally instead of stretching/
                          overflowing when the width constraint binds first. */
    margin: 6px 0; /* Adds space between logos */

}