* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-top: 0px;
}

.home body {
  padding-top: 0 !important;
}

.im-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 0;
  /* Recenters like the page shells (capped at 1280px) above 960px, instead of
     letting the logo/nav gap grow unbounded as the viewport widens (zoom out).
     Matches the .im-topbar-inner formula below so both bars stay aligned. */
  padding: 0 max(40px, calc((100% - 1280px) / 2));
  height: 72px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.07);
  border-bottom: 0;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index: 99999;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.im-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.im-logo-wrap {
  display: flex;
  align-items: center;
  min-width: 160px;
  min-height: 40px;
}

.im-logo-placeholder {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a2e6e;
  letter-spacing: 0.5px;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

.im-nav {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.im-nav li a,
.im-nav-toggle {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: #1a1a2e;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: -0.1px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.im-nav li a:hover,
.im-nav-toggle:hover {
  background: #f0f4ff;
  color: #1d4ed8;
}

.im-nav > li.current > a,
.im-nav > li.current > .im-nav-toggle {
  background: #1d4ed8;
  color: #ffffff !important;
  border-radius: 8px;
}

.im-nav > li.current > a:hover,
.im-nav > li.current > .im-nav-toggle:hover {
  background: #1a44c2;
  color: #ffffff !important;
}

.im-arrow {
  font-size: 10px;
  color: inherit;
  transition: transform 0.22s;
  display: inline-block;
}

.im-has-drop.open .im-arrow {
  transform: rotate(180deg);
}

.im-has-drop {
  position: relative;
}

.im-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.07);
  padding: 6px;
  min-width: 220px;
  list-style: none;
  z-index: 9999;
  margin: 0;
}

.im-has-drop.open .im-dropdown {
  display: block;
  animation: dropIn 0.16s ease;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.im-dropdown li a {
  display: block;
  padding: 9px 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a1a2e;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.im-dropdown li a:hover {
  background: #f0f4ff !important;
  color: #1d4ed8 !important;
}

.im-dropdown li.current a {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-weight: 600;
}

.im-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.18s;
}

.im-hamburger:hover {
  background: #f0f4ff;
}

.im-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1a1a2e;
  border-radius: 2px;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
}

.im-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.im-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.im-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Elementor header wrapper collapse.
   The header/topbar are fixed, so their Elementor containers must not keep
   normal document height or they create a white gap before the first section. */
header:has(.im-header),
.elementor-location-header:has(.im-header),
.elementor > .e-con:has(.im-topbar):has(.im-header),
.e-con:has(.im-topbar):has(.im-header),
.e-con-inner:has(.im-topbar):has(.im-header),
.elementor-widget-html:has(.im-topbar):has(.im-header),
.elementor-widget-html:has(.im-topbar):has(.im-header) > .elementor-widget-container {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.im-mob-menu {
  display: none;
  position: fixed !important;
  top: 72px;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 8px;
  list-style: none;
  z-index: 99998;
  margin: 0;
}

.im-mob-menu.open {
  display: block;
}

.im-mob-menu > li > a,
.im-mob-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: #1a1a2e;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  text-align: left;
  letter-spacing: -0.1px;
}

.im-mob-menu > li > a:hover,
.im-mob-toggle:hover {
  background: #f0f4ff;
  color: #1d4ed8;
}

.im-mob-menu > li.current > a {
  background: #1d4ed8;
  color: #ffffff !important;
}

.im-mob-sub {
  display: none;
  list-style: none;
  padding: 2px 0 4px 0;
  margin: 0;
}

.im-mob-sub.open {
  display: block;
}

.im-mob-sub li a {
  display: block;
  padding: 9px 14px 9px 30px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.im-mob-sub li a:hover {
  background: #f0f4ff;
  color: #1d4ed8;
}

@media (max-width: 960px) {
  .im-nav { display: none; }
  .im-hamburger { display: flex; }
  .im-header { padding: 0 20px; }
}

/* Header state color lock: prevents page/Elementor styles from turning active menu controls red. */
.im-header .im-nav > li.current > a,
.im-header .im-nav > li.current > .im-nav-toggle,
.im-header .im-has-drop.current > .im-nav-toggle,
.im-header .im-has-drop.open > .im-nav-toggle {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

.im-header .im-nav > li.current > a:hover,
.im-header .im-nav > li.current > .im-nav-toggle:hover,
.im-header .im-has-drop.current > .im-nav-toggle:hover,
.im-header .im-has-drop.open > .im-nav-toggle:hover {
  background: #1a44c2 !important;
  color: #ffffff !important;
}

.im-header .im-has-drop.current > .im-nav-toggle:focus,
.im-header .im-has-drop.current > .im-nav-toggle:active,
.im-header .im-has-drop.current > .im-nav-toggle:focus-visible,
.im-header .im-has-drop.open > .im-nav-toggle:focus,
.im-header .im-has-drop.open > .im-nav-toggle:active,
.im-header .im-has-drop.open > .im-nav-toggle:focus-visible {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: none !important;
}

.im-header .im-hamburger.open,
.im-header .im-hamburger.open:hover,
.im-header .im-hamburger.open:focus,
.im-header .im-hamburger.open:active {
  background: transparent !important;
  box-shadow: none !important;
}

.im-header .im-hamburger.open span {
  background: #111827 !important;
}

@media (max-width: 960px) {
  .im-header .im-hamburger.open {
    background: transparent !important;
  }
}

/* Intel Migration reassurance topbar
   Add the topbar HTML immediately before <div class="im-header"> in the header template. */
:root {
  --im-header-height: 72px;
  --im-topbar-height: 38px;
}

.im-topbar,
.im-topbar.im-full-width-breakout {
  background: #1d46a5;
  color: rgba(255, 255, 255, 0.88);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 100000;
  min-height: var(--im-topbar-height);
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}

.im-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 28px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

body:has(.im-topbar):not(:has(.im-header)) {
  padding-top: var(--im-topbar-height) !important;
}

body:has(.im-topbar):has(.im-header) {
  padding-top: calc(var(--im-header-height) + var(--im-topbar-height)) !important;
}

body:has(.im-topbar) .im-header {
  top: var(--im-topbar-height) !important;
}

body:has(.im-topbar) .im-mob-menu {
  top: calc(var(--im-header-height) + var(--im-topbar-height)) !important;
}

/* WordPress admin bar clearance.
   WP core pushes <html> down via margin-top (32px desktop, 46px at
   <=782px) whenever a user is logged in, but that spacing is never
   communicated to the theme's own fixed topbar/header stack above -
   leaving an unaccounted gap that only ever shows up while previewing
   the site logged in as admin (regular visitors never see it). */
body.admin-bar:has(.im-topbar):has(.im-header) {
  padding-top: calc(var(--im-header-height) + var(--im-topbar-height) + 32px) !important;
}

body.admin-bar:has(.im-topbar):not(:has(.im-header)) {
  padding-top: calc(var(--im-topbar-height) + 32px) !important;
}

body.admin-bar .im-topbar {
  top: 32px !important;
}

body.admin-bar:has(.im-topbar) .im-header {
  top: calc(32px + var(--im-topbar-height)) !important;
}

body.admin-bar:has(.im-topbar) .im-mob-menu {
  top: calc(32px + var(--im-header-height) + var(--im-topbar-height)) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar:has(.im-topbar):has(.im-header) {
    padding-top: calc(var(--im-header-height) + var(--im-topbar-height) + 46px) !important;
  }

  body.admin-bar:has(.im-topbar):not(:has(.im-header)) {
    padding-top: calc(var(--im-topbar-height) + 46px) !important;
  }

  body.admin-bar .im-topbar {
    top: 46px !important;
  }

  body.admin-bar:has(.im-topbar) .im-header {
    top: calc(46px + var(--im-topbar-height)) !important;
  }

  body.admin-bar:has(.im-topbar) .im-mob-menu {
    top: calc(46px + var(--im-header-height) + var(--im-topbar-height)) !important;
  }
}

.im-topbar .tb-item,
.im-topbar .tb-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.im-topbar .tb-item svg,
.im-topbar .tb-call svg {
  width: 15px;
  height: 15px;
}

.im-topbar .ok {
  display: inline-flex;
  color: #34d88a;
}

.im-topbar .tb-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}

.im-topbar .tb-spacer {
  margin-left: auto;
}

.im-topbar .tb-call {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .im-topbar-inner {
    gap: 12px;
    padding: 9px 20px;
  }

  .im-topbar .tb-hide-sm,
  .im-topbar .tb-sep {
    display: none;
  }

  .im-topbar .tb-spacer {
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .im-topbar-inner {
    padding: 8px 16px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .im-topbar-inner {
    justify-content: space-between;
    gap: 12px;
  }

  .im-topbar .tb-spacer {
    display: none;
  }
}

/* First container spacing after the fixed header stack.
   This prevents the fixed header offset plus page hero padding from creating a large empty gap. */
:root {
  /* Change this one value to adjust the heading gap below the fixed header on service-style pages. */
  --im-first-section-top-gap: clamp(1rem, 1.8vw, 1.5rem);
}

body:has(.im-topbar):has(.im-header) .services-page > .services-section:first-child,
body:has(.im-topbar):has(.im-header) .contact-page > .contact-section:first-child,
body:has(.im-topbar):has(.im-header) .visa186-page > .visa186-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .visa189-page > .visa189-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .visa190-page > .visa190-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .visa482-page > .visa482-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .visa485-page > .visa485-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .visa491-page > .visa491-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .visa494-page > .visa494-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .studentvisas-page > .studentvisas-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .visitorvisas-page > .visitorvisas-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .skilledvisas-page > .skilledvisas-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .graduatevisas-page > .graduatevisas-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .employervisas-page > .employervisas-hero-section:first-child,
body:has(.im-topbar):has(.im-header) .pf-page > .pf-section:first-child,
body:has(.im-topbar):has(.im-header) .cit-page > .cit-section:first-child,
body:has(.im-topbar):has(.im-header) .aat-page > .aat-section:first-child,
body:has(.im-topbar):has(.im-header) .edu-page > .edu-section:first-child,
body:has(.im-topbar):has(.im-header) .about-page > .im-section:first-child,
body:has(.im-topbar):has(.im-header) .faqhub-page > .faqhub-section:first-child,
body:has(.im-topbar):has(.im-header) .tools-page > .tools-section:first-child,
body:has(.im-topbar):has(.im-header) .blog-page > .blog-section:first-child,
body:has(.im-topbar):has(.im-header) .elementor > .e-con:first-of-type :is(.services-section, .contact-section, .student-section, .visitor-section, .skilled-section, .emp-section, .pf-section, .grad-section, .cit-section, .aat-section, .edu-section, .im-section, .faqhub-section, .tools-section, .blog-section):first-of-type {
  padding-top: var(--im-first-section-top-gap) !important;
}

body:has(.im-topbar):has(.im-header) .im-hero {
  margin-top: -1px !important;
}

body:has(.im-topbar):has(.im-header) .services-page > .services-section:first-child,
body:has(.im-topbar):has(.im-header) .elementor-widget-html:has(.services-section) .services-section:first-of-type {
  padding-top: 0 !important;
}

/* Top ribbon alignment: match the main header logo/nav horizontal edge.
   Same centering formula as .im-header so both bars recenter together above
   960px instead of drifting apart as the viewport widens (zoom out). */
.im-topbar .im-topbar-inner {
    width: 100% !important;
    max-width: none !important;
    padding-right: max(40px, calc((100% - 1280px) / 2)) !important;
    padding-left: max(40px, calc((100% - 1280px) / 2)) !important;
}

@media (max-width: 960px) {
    .im-topbar .im-topbar-inner {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}

/* Mobile topbar/header sync */
@media (max-width: 767px) {
    :root {
        --im-topbar-height: 3rem;
    }

    html,
    body {
        margin-top: 0 !important;
    }

    .im-topbar {
        top: 0 !important;
        height: var(--im-topbar-height) !important;
        min-height: var(--im-topbar-height) !important;
        line-height: 1 !important;
    }

    .im-topbar .im-topbar-inner {
        height: var(--im-topbar-height) !important;
        min-height: var(--im-topbar-height) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-right: 0.75rem !important;
        padding-left: 0.75rem !important;
    }

    .im-topbar .tb-item,
    .im-topbar .tb-call {
        display: inline-flex !important;
        height: var(--im-topbar-height) !important;
        min-height: var(--im-topbar-height) !important;
        align-items: center !important;
        gap: 0.32rem !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 13px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transform: translateY(-9px);
    }

    .im-topbar .ok,
    .im-topbar .tb-call svg {
        width: 0.72rem !important;
        height: 0.72rem !important;
    }

    .im-topbar svg {
        display: block !important;
    }

    .im-header {
        top: var(--im-topbar-height) !important;
    }

    .im-topbar .ok {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        line-height: 0 !important;
    }

    .im-topbar .ok svg,
    .im-topbar .tb-call svg {
        display: block !important;
        flex: 0 0 auto !important;
    }

    .im-topbar .tb-text,
    .im-topbar .tb-call-text {
        display: inline-block !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }
}

/* Final header color override.
   Keep all nav active/open/hover states on the Intel blue system, never the theme accent red. */
.im-header {
    --e-global-color-accent: #1d4ed8;
    --e-global-color-primary: #1d4ed8;
}

.im-header .im-nav > li.current > a,
.im-header .im-nav > li.current > a:hover,
.im-header .im-nav > li.current > a:focus,
.im-header .im-nav > li.current > a:active,
.im-header .im-nav > li.current > .im-nav-toggle,
.im-header .im-nav > li.current > .im-nav-toggle:hover,
.im-header .im-nav > li.current > .im-nav-toggle:focus,
.im-header .im-nav > li.current > .im-nav-toggle:active,
.im-header .im-has-drop.current > .im-nav-toggle,
.im-header .im-has-drop.current > .im-nav-toggle:hover,
.im-header .im-has-drop.current > .im-nav-toggle:focus,
.im-header .im-has-drop.current > .im-nav-toggle:active,
.im-header .im-has-drop.open > .im-nav-toggle,
.im-header .im-has-drop.open > .im-nav-toggle:hover,
.im-header .im-has-drop.open > .im-nav-toggle:focus,
.im-header .im-has-drop.open > .im-nav-toggle:active,
.im-header .im-mob-menu > li.current > a,
.im-header .im-mob-menu > li.current > a:hover,
.im-header .im-mob-menu > li.current > a:focus,
.im-header .im-mob-menu > li.current > a:active,
.im-header .im-mob-toggle.open,
.im-header .im-mob-toggle.open:hover,
.im-header .im-mob-toggle.open:focus,
.im-header .im-mob-toggle.open:active,
.im-header .im-mob-menu > li > .im-mob-toggle[aria-expanded="true"],
.im-header .im-mob-menu > li > .im-mob-toggle[aria-expanded="true"]:hover,
.im-header .im-mob-menu > li > .im-mob-toggle[aria-expanded="true"]:focus,
.im-header .im-mob-menu > li > .im-mob-toggle[aria-expanded="true"]:active {
    background: #1d4ed8 !important;
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
}

.im-header .im-nav > li.current > a:hover,
.im-header .im-nav > li.current > .im-nav-toggle:hover,
.im-header .im-has-drop.current > .im-nav-toggle:hover,
.im-header .im-has-drop.open > .im-nav-toggle:hover,
.im-header .im-mob-menu > li.current > a:hover,
.im-header .im-mob-toggle.open:hover,
.im-header .im-mob-menu > li > .im-mob-toggle[aria-expanded="true"]:hover {
    background: #1a44c2 !important;
    background-color: #1a44c2 !important;
    color: #ffffff !important;
}

.im-header .im-hamburger,
.im-header .im-hamburger:hover,
.im-header .im-hamburger:focus,
.im-header .im-hamburger:active,
.im-header .im-hamburger.open,
.im-header .im-hamburger.open:hover,
.im-header .im-hamburger.open:focus,
.im-header .im-hamburger.open:active {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.im-header .im-hamburger span,
.im-header .im-hamburger:hover span,
.im-header .im-hamburger:focus span,
.im-header .im-hamburger:active span,
.im-header .im-hamburger.open span,
.im-header .im-hamburger.open:hover span,
.im-header .im-hamburger.open:focus span,
.im-header .im-hamburger.open:active span {
    background: #111827 !important;
    background-color: #111827 !important;
}

.im-header .im-mob-toggle:hover,
.im-header .im-mob-toggle:focus,
.im-header .im-mob-toggle:active {
    background: #f0f4ff !important;
    background-color: #f0f4ff !important;
    color: #1d4ed8 !important;
}

/* Keep Elementor page roots below the fixed desktop header stack. */
@media (min-width: 768px) {
    html body:has(.im-topbar):has(.im-header) .elementor-location-header:has(.im-header) + .elementor:is(
        :has(.visa186-page),
        :has(.visa189-page),
        :has(.visa190-page),
        :has(.visa482-page),
        :has(.visa485-page),
        :has(.visa491-page),
        :has(.visa494-page),
        :has(.studentvisas-page),
        :has(.visitorvisas-page),
        :has(.skilledvisas-page),
        :has(.graduatevisas-page),
        :has(.employervisas-page),
        :has(.pf-page),
        :has(.edu-page),
        :has(.cit-page),
        :has(.aat-page),
        :has(.about-page),
        :has(.contact-page),
        :has(.faqhub-page),
        :has(.tools-page),
        :has(.blog-page)
    ) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
