:root {
  --navy: #10264a;
  --navy-deep: #0a1a33;
  --red: #b31931;
  --red-dark: #8e1226;
  --white: #ffffff;
  --cloud: #e8eff9;
  --steel: #fff;
  --slate: #47586f;
  --ink: #1b2940;
  --maxw: 1180px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: "Public Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
}
p {
  font-size: 16px !important;
  color: #000;
}
h1,
h2,
h3,
.serif {
  font-family: "Libre Caslon Text", Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.section-eyebrow-light {
  color: #e38ea0;
}

.body-copy {
  color: #000;
  font-size: 16.5px;
  margin-bottom: 16px;
}

.section-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

.section-space {
  padding: 70px 0;
}

.section-header {
  max-width: 100%;
  margin-bottom: 24px;
}

.section-title {
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--navy);
  margin: 10px 0 14px;
}

.section-subtitle {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--red);
  margin-bottom: 12px;
}

.section-description {
  color: #000;
}

.common-btn,
.blue-btn,
.red-btn,
.white-border-btn {
  display: inline-block;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  border-radius: 3px;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
  cursor: pointer;
  border: 2px solid transparent;
  text-align: center;
  line-height: 1.6;
}
body.page-h1b-visa .btn-outline {
      font-size: 16px;
          font-weight: 700;
}
.btn-red, .red-btn {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.btn-red:hover,
.red-btn:hover {
  background: var(--red-dark);
  color: var(--cloud);
  border-color: var(--red-dark);
}

.btn-outline,
.white-border-btn {
  border-color: var(--white);
  color: var(--white);
}

.btn-outline:hover,
.white-border-btn:hover {
  background: var(--white);
  color: var(--navy);
}

.btn-navy,
.blue-btn {
  background: var(--navy);
  color: #fff;
}

.btn-navy:hover,
.blue-btn:hover {
  background: var(--navy-deep);
  color: var(--cloud);
  border-color: var(--navy-deep);
}

.btn-ghost-navy {
  border-color: var(--navy);
  color: var(--navy);
}

.btn-ghost-navy:hover {
  background: var(--navy);
  color: #fff;
}

.cta-row {
  gap: 14px;
}

/* -- Utility bar --------------------------- */
.utility {
  background: var(--navy-deep);
  color: var(--steel);
  font-size: 13px;
}
.utility .container {
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.utility a:hover {
  color: #fff;
}

.utility .u-left span:not(:nth-child(4)) {
    margin-right: 10px;
    white-space: nowrap;
    padding-right: 10px;
    border-right: 1px solid #ffffff33;
}

.utility strong {
  color: #fff;
  font-weight: 600;
}

/* -- Header / Nav -------------------------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 3px solid var(--red);
  box-shadow: 0 1px 0 rgba(16, 38, 74, 0.08);
}
.nav-row {
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand .b-firm {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
}

.brand .b-site {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-top: 2px;
}

nav.main {
  display: flex;
  align-items: center;
  gap: 4px;
}

nav.main > ul {
  display: flex;
  list-style: none;
  gap: 8px;
}

nav.main > ul > li {
  position: relative;
}

nav.main > ul > li > a {
  display: block;
  padding: 10px 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: #000;
  border-radius: 3px;
}
.top-banner-section {
      background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 78%) !important;
}
nav.main > ul > li > a:hover,
nav.main > ul > li:focus-within > a {
  background: var(--cloud);
  color: var(--red);
}

.dd {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--steel);
  border-top: 3px solid var(--red);
  box-shadow: 0 14px 34px rgba(10, 26, 51, 0.14);
  padding: 10px 0;
  display: none;
}

nav.main li:hover .dd,
nav.main li:focus-within .dd {
  display: block;
}

.dd a {
  display: block;
  padding: 9px 18px;
  font-size: 14px;
  color: #000;
}

.dd a:hover {
  background: var(--cloud);
  color: var(--red);
}

.dd .dd-label {
  padding: 8px 18px 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}

.hdr-cta {
  white-space: nowrap;
  padding: 11px 20px;
  font-size: 14px;
}

.menu-btn {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: 3px;
  padding: 7px 12px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  font-size: 14px;
}

.header-logo {
  max-width: 140px;
}

/* -- 1. Hero ------------------------------- */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 78%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(201, 212, 228, 0.14);
  border-radius: 50%;
}

.hero::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(179, 25, 49, 0.35);
  border-radius: 50%;
}
.hero .container {
  position: relative;
  z-index: 1;
/*   padding-top: 84px;
  padding-bottom: 84px; */
}

.hero .kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(32px, 5vw, 54px);
    margin-bottom: 14px;
    color: var(--white);
}

.home-herosection h1 { 
    max-width: 720px;
}

.hero .sub {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--steel);
  margin-bottom: 22px;
}

.hero p.lede {
  color: #fff;
  max-width: 720px;
  margin-bottom: 16px;
}

.hero .cta-row {
  margin-top: 30px;
}

/* -- 2. Credibility bar -------------------- */
.cred {
  background: var(--red);
  color: #fff;
}
.cred .container {
  padding-top: 16px;
  padding-bottom: 16px;
}

.cred span {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.cred span:last-child {
  border-right: none;
}

.common-grid-3,
.common-grid-4 {
  display: flex;
  flex-wrap: wrap;
}

/* -- 3. Goals grid ------------------------- */
.intent {
  background: var(--cloud);
}
.intent-grid {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
}

.intent-card {
  background: #fff;
  border: 1px solid var(--steel);
  border-top: 4px solid var(--navy);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
}

.intent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(16, 38, 74, 0.12);
  border-top-color: var(--red);
}

.intent-card h3 {
  font-size: 19px;
  color: var(--navy);
  margin-bottom: 10px;
}

.intent-card p {
  color: #000;
  margin-bottom: 14px;
}

.intent-card .tags {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 18px;
}

.intent-card .go {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.intent-card .go::after {
  content: "\2192";
}

/* -- 4. Featured services ------------------ */
.svc-grid {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

.svc {
  border: 1px solid var(--steel);
  padding: 26px 22px;
  background: #fff;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
  display: flex;
  flex-direction: column;
}

.svc:hover {
  border-color: var(--navy);
  box-shadow: 0 10px 26px rgba(16, 38, 74, 0.1);
}

.svc .abbr {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--red);
  margin-bottom: 8px;
}

.svc h3 {
  font-size: 15.5px;
  color: var(--navy);
  margin-bottom: 8px;
  font-family: "Public Sans", sans-serif;
  font-weight: 700;
}

.svc p {
  font-size: 13.8px;
  color: #000;
  margin-bottom: 16px;
}

.svc .go {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.svc .go::after {
  content: "\2192";
}

/* -- 5. Why -------------------------------- */
.why {
  background: var(--navy);
  color: #fff;
}

.why .section-title,
.why .section-eyebrow {
  color: #fff;
}

.why .section-description {
  color: var(--steel);
}

.why .section-subtitle {
  color: #e38ea0;
}
.why-grid {
  --bs-gutter-x: 26px;
  --bs-gutter-y: 26px;
}

.why-item {
  border-top: 2px solid var(--red);
  padding-top: 18px;
}

.why-item h3 {
  font-size: 17px;
  margin-bottom: 10px;
  color: #fff;
}

.why-item p {
  font-size: 14.5px;
  color: var(--steel);
}

.why .cta-row {
  margin-top: 44px;
}

/* -- 6. Attorney --------------------------- */
.atty-grid {
  --bs-gutter-x: 56px;
  --bs-gutter-y: 0;
  align-items: center;
}

.atty-photo-col {
  flex: 0 0 396px;
  max-width: 396px;
}

.atty-copy-col {
  flex: 1 0 0;
  max-width: calc(100% - 396px);
}

.atty-photo {
  background: var(--steel) ;
/*   border: 1px solid var(--steel); */
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  position: relative;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/* 
.atty-photo::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(16, 38, 74, 0.25);
} */

.atty .section-title {
  font-size: clamp(26px, 3vw, 34px);
  color: var(--navy);
  margin: 10px 0 6px;
}

.atty .role {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.atty .cta-row {
  margin-top: 26px;
}

/* -- 7. Employers -------------------------- */
.employers {
  background: var(--cloud);
}
.emp-grid {
  --bs-gutter-x: 56px;
  --bs-gutter-y: 0;
  align-items: flex-start;
}

.emp-copy-col {
  flex: 1.05 0 0;
  max-width: none;
}

.emp-panel-col {
  flex: 1 0 0;
  max-width: none;
}
.emp-copy .motto {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--red);
  margin-bottom: 16px;
}

.emp-copy .cta-row {
  margin-top: 28px;
}

.emp-panel {
  background: #fff;
  border: 1px solid var(--steel);
  border-top: 4px solid var(--navy);
  padding: 30px 30px 26px;
}

.emp-panel h3 {
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 18px;
}

.emp-panel ul {
  list-style: none;
  columns: 2;
  column-gap: 26px;
}

.emp-panel li {
  font-size: 16px;
  color: #000;
  padding: 6px 0 6px 22px;
  position: relative;
  break-inside: avoid;
}

.emp-panel li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}

/* -- 8. RFE / NOID ------------------------- */
.rfe-grid {
  --bs-gutter-x: 56px;
  --bs-gutter-y: 0;
  align-items: flex-start;
}

.rfe-copy-col {
  flex: 1 0 0;
  max-width: none;
}

.rfe-panel-col {
  flex: 1.05 0 0;
  max-width: none;
}
.rfe-copy .second {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  margin: 22px 0 16px;
}

.rfe-panel {
  background: var(--navy);
  color: #fff;
  padding: 30px 30px 26px;
  border-left: 5px solid var(--red);
}

.rfe-panel h3 {
  font-size: 16px;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.rfe-panel ul {
  list-style: none;
  columns: 2;
  column-gap: 26px;
}

.rfe-panel li {
  font-size: 16px;
  color: var(--steel);
  padding: 6px 0 6px 20px;
  position: relative;
  break-inside: avoid;
}

.rfe-panel li::before {
  content: "›";
  position: absolute;
  left: 2px;
  color: var(--red);
  font-weight: 700;
}

/* -- 9. Results ---------------------------- */
.results {
  background: var(--cloud);
}
.res-grid {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
}

.res {
  background: #fff;
  border-left: 4px solid var(--red);
  padding: 24px 24px 22px;
  box-shadow: 0 4px 16px rgba(16, 38, 74, 0.06);
}

.res .cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

.res h3 {
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 8px;
}

.res p {
  color: #000;
}

.res-note {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--slate);
}

.results .cta-row {
  margin-top: 30px;
}

/* -- 10. Reviews --------------------------- */
.rev-grid {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
}

.rev {
  border: 1px solid var(--steel);
  padding: 28px 26px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.rev .stars {
  color: var(--red);
  letter-spacing: 3px;
  font-size: 15px;
  margin-bottom: 14px;
}

.rev blockquote {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 18px;
}

.rev blockquote {
  background: var(--cloud);
  border: 1px dashed var(--steel);
  padding: 14px;
  font-size: 13.5px;
}

.rev .who {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

.reviews .cta-row {
  margin-top: 30px;
}

/* -- 11. Videos ---------------------------- */
.media {
  background: var(--cloud);
}
.vid-grid {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
  margin-bottom: 36px;
}

.vid {
  background: #fff;
  border: 1px solid var(--steel);
  display: block;
}

.vid .thumb {
  background: #000;
  position: relative;
  overflow: hidden;
}

.vid .thumb iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.vid .vbody {
  padding: 18px 20px 20px;
}

.vid .vbody .vcat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

.vid .vbody h3 {
  font-size: 15.5px;
  color: var(--navy);
  font-family: "Public Sans", sans-serif;
  font-weight: 700;
}
.topics,
.related-links {
  gap: 10px;
  margin-bottom: 34px;
}

.topics a,
.related-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--steel);
  padding: 7px 16px;
  border-radius: 20px;
  transition: all 0.15s;
}

.topics a:hover,
.related-links a:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* -- 12. News ------------------------------ */
.news-grid {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
  margin-bottom: 34px;
}

.news-card {
  border: 1px solid var(--steel);
  border-top: 4px solid var(--red);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s;
}

.news-card:hover {
  box-shadow: 0 12px 28px rgba(16, 38, 74, 0.1);
}

.news-card .date {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}

.news-card h3 {
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 10px;
}

.news-card p {
  font-size: 14px;
  color: var(--slate);
  margin-bottom: 16px;
}

.news-card-desc  {
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card .go {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}

.news-card .go::after {
  content: " >";
}

/* -- 13. Final CTA ------------------------- */
.final {
  	background: linear-gradient(160deg, #0a1a33 0%, #b31931 80%);
  	color: #fff;
  	text-align: center;
	scroll-margin-block-start: 100px;
}
.final .container {
 padding: 0px;
}

.final h2 {
  font-size: clamp(28px, 3.8vw, 42px);
  margin-bottom: 10px;
  color: var(--white);
}

.final .tag {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--steel);
  margin-bottom: 18px;
}

.final p {
  color: #fff;
  margin-bottom: 34px;
}

.final .cta-row {
  justify-content: center;
  margin-bottom: 44px;
}

.final .contact-card {
  border-top: 1px solid rgba(201, 212, 228, 0.3);
  padding-top: 36px;
  font-size: 15px;
  color: var(--steel);
  line-height: 1.9;
}

.final .contact-card .firm {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-size: 19px;
  color: #fff;
}

.final .contact-card a {
  color: #fff;
  font-weight: 600;
}

.final .contact-card a:hover {
  text-decoration: underline;
}

/* -- Footer -------------------------------- */
footer {
  background: var(--navy-deep);
  color: var(--steel);
  font-size: 13.5px;
}
.f-top {
  padding-top: 52px;
  padding-bottom: 8px;
}

.footer-logo {
  max-width: 150px;
}

.f-brand .b-firm {
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.f-brand .b-site {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e38ea0;
  font-weight: 700;
  margin: 4px 0 10px;
}

.f-brand p {
  max-width: 520px;
  margin-bottom: 30px;
  color: #fff
}
.f-grid {
  --bs-gutter-x: 32px;
  --bs-gutter-y: 32px;
  padding-bottom: 44px;
}

.f-grid h4 {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.f-grid ul {
  list-style: none;
}

.f-grid li {
  margin-bottom: 8px;
  font-size: 14px;
}

.f-grid li a {
  color: var(--cloud);
}

.f-grid a:hover {
  color: #fff;
}

.f-legal {
  border-top: 1px solid rgba(201, 212, 228, 0.2);
}

.f-legal .container {
  padding-top: 20px;
  padding-bottom: 26px;
  font-size: 14px;
  line-height: 1.7;
}

.f-legal strong {
  color: #fff;
  letter-spacing: 0.1em;
}

/* -- Reveal -------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   H-1B VISA PAGE
   COMMON INNER PAGE COMPONENTS
   These classes can also be reused on EB-1A, NIW, PERM,
   O-1, L-1, E-2, EB-5 and other redesigned inner pages.
========================================================== */

/* ----------------------------------------------------------
   Common Background
---------------------------------------------------------- */

.section-bg-cloud {
  background: var(--cloud);
}

/* ----------------------------------------------------------
   Compact Section Header
---------------------------------------------------------- */

.section-header-compact {
  margin-bottom: 22px;
}

/* ----------------------------------------------------------
   Common 2 Column Grid
---------------------------------------------------------- */

.common-grid-2 {
  display: flex;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------
   Inner Page Breadcrumb
---------------------------------------------------------- */

.inner-breadcrumb {
  background: var(--cloud);
  color: #000;
  font-size: 13px;
}

.inner-breadcrumb .container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.inner-breadcrumb a:hover {
  color: var(--red);
}

.breadcrumb-separator {
  display: inline-block;
  margin: 0 8px;
  color: var(--navy-deep);
}

/* ----------------------------------------------------------
   Inner Page Hero
---------------------------------------------------------- */

.inner-hero-content {
    max-width: 880px;
    text-align: center;
    margin: 0 auto;
}

.hero .inner-hero-content  .cta-row {
	justify-content: center;
} 

.inner-hero .container {
  padding: 0;
}

.inner-hero h1 {
  font-size: clamp(30px, 4.4vw, 46px);
}

.inner-hero .kicker {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}

.inner-hero p.lede {
  max-width: 700px;
  font-size: 16px;
margin: 0 auto;
  margin-bottom: 30px;
}

/* ----------------------------------------------------------
   Qualification Card
---------------------------------------------------------- */

.qualification-card {
  background: var(--white);
  border: 1px solid var(--steel);
  border-left: 4px solid var(--navy);
  padding: 18px 22px;
  color: var(--slate);
}

.qualification-card strong {
  display: block;
  color: var(--navy);
  font-size: 15.5px;
  margin-bottom: 4px;
}

.qualification-card p {
  margin-bottom: 0;
  font-size: 15px;
}

/* ----------------------------------------------------------
   Check / Evidence Card
---------------------------------------------------------- */

.check-card {
  position: relative;
  border: 1px solid var(--steel);
  padding: 16px 18px 16px 40px;
  color: #000;
  font-size: 16px;
  background: var(--white);
}

.check-card::before {
  content: "\203A";
  position: absolute;
  left: 16px;
  top: 15px;
  color: var(--red);
  font-weight: 700;
}

/* ----------------------------------------------------------
   Common Mid Page CTA
---------------------------------------------------------- */

.mid-cta {
  background: var(--red);
  color: var(--white);
}

.mid-cta .container {
    gap: 20px;
    padding-top: 26px;
    padding-bottom: 26px;
    display: grid;
    grid-template-columns: 75% 1fr;
}

.mid-cta-title {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-weight: 700;
  font-size: 20px;
}

.mid-cta-btn {
  background: var(--white);
  color: var(--red);
}

.mid-cta-btn:hover {
  background: var(--navy-deep);
  color: var(--white);
}

/* ----------------------------------------------------------
   Common Information Card
---------------------------------------------------------- */

.info-card {
  border: 1px solid var(--steel);
  border-top: 4px solid var(--red);
  padding: 22px 24px;
  background: var(--white);
}

.info-card h3 {
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 8px;
}

.info-card p {
  color: #000;
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   Common Process / Steps
---------------------------------------------------------- */

.process-list {
  counter-reset: process-step;
}

.process-step {
  display: flex;
  gap: 20px;
  padding: 20px 0;
      border-bottom: 1px solid rgb(16 38 74 / 6%);
}

.process-step:last-child {
  border-bottom: 0;
}

.process-step::before {
  counter-increment: process-step;
  content: counter(process-step);
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
}

.process-step strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 3px;
}

.process-step p {
  color:#000;
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   Common FAQ
---------------------------------------------------------- */

.common-faq .faq-item {
  border: 1px solid var(--steel);
  margin-bottom: 10px;
  background: var(--white);
}

.common-faq .faq-item:last-child {
  margin-bottom: 0;
}

.common-faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 16px 44px 16px 20px;
  color: var(--navy);
  font-size: 15.5px;
  font-weight: 700;
}

.common-faq summary::-webkit-details-marker {
  display: none;
}

.common-faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 12px;
  color: var(--red);
  font-size: 22px;
  font-weight: 400;
}

.common-faq .faq-item[open] summary::after {
  content: "-";
}

.common-faq .faq-item p {
  padding: 0 20px 18px;
  color: #000;
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   Common Feature Card
---------------------------------------------------------- */

.feature-card {
  background: var(--white);
  border: 1px solid var(--steel);
  padding: 22px;
  color: var(--slate);
}

.feature-card strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 6px;
}

.feature-card p {
  margin-bottom: 0;
  font-size: 14px;
}

/* ----------------------------------------------------------
   Common Final CTA Inner Content
---------------------------------------------------------- */

.final-content {
  max-width: 720px;
  margin: 0 auto;
}

.final-contact-line {
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
}

.final-contact-line a {
  color: var(--white);
  font-weight: 600;
}

.final-contact-line a:hover {
  text-decoration: underline;
}

/* ==========================================================
   H-1B VISA PAGE
   PAGE SPECIFIC STYLES
========================================================== */

/* ----------------------------------------------------------
   H-1B Qualification Grid
---------------------------------------------------------- */

.h1b-qualification-grid {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}

/* ----------------------------------------------------------
   H-1B Evidence Grid
---------------------------------------------------------- */

.h1b-evidence-grid {
  --bs-gutter-x: 14px;
  --bs-gutter-y: 14px;
}

/* ----------------------------------------------------------
   H-1B Problems Grid
---------------------------------------------------------- */

.h1b-problems-grid {
  --bs-gutter-x: 18px;
  --bs-gutter-y: 18px;
}

/* ----------------------------------------------------------
   H-1B Feature / Why Choose Grid
---------------------------------------------------------- */

.h1b-feature-grid {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   H-1B ULTIMATE GUIDE — PAGE-SCOPED FIXES
   Add at the END of new-style.css.
   Every selector is scoped to .h1b-ultimate-guide so these
   rules cannot affect the standard H-1B page or other pages.
========================================================== */

/* ---------- Shared long-guide typography ---------- */
.h1b-ultimate-guide .container > h3 {
  color: var(--navy);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.25;
  margin: 30px 0 18px;
}

.h1b-ultimate-guide .feature-card h3,
.h1b-ultimate-guide .feature-card h4,
.h1b-ultimate-guide .qualification-card h3,
.h1b-ultimate-guide .qualification-card h4,
.h1b-ultimate-guide .info-card h3,
.h1b-ultimate-guide .why-item h3 {
  color: var(--navy);
  font-family: "Libre Caslon Text", Georgia, serif;
  line-height: 1.3;
}

.h1b-ultimate-guide .feature-card h4,
.h1b-ultimate-guide .qualification-card h4 {
  font-size: 19px;
  margin-bottom: 12px;
}

.h1b-ultimate-guide .feature-card ul,
.h1b-ultimate-guide .qualification-card ul,
.h1b-ultimate-guide .info-card ul,
.h1b-ultimate-guide .why-item ul {
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.65;
}

.h1b-ultimate-guide .feature-card li,
.h1b-ultimate-guide .qualification-card li,
.h1b-ultimate-guide .info-card li,
.h1b-ultimate-guide .why-item li {
  margin-bottom: 5px;
}

.h1b-ultimate-guide .feature-card li:last-child,
.h1b-ultimate-guide .qualification-card li:last-child,
.h1b-ultimate-guide .info-card li:last-child,
.h1b-ultimate-guide .why-item li:last-child {
  margin-bottom: 0;
}

/* ---------- Attorney / stats block ---------- */
.h1b-ultimate-guide .h1b-guide-contact-section {
  padding-top: 54px;
  padding-bottom: 54px;
}

.h1b-ultimate-guide .h1b-guide-contact-section .section-header {
  margin-bottom: 28px;
}

.h1b-ultimate-guide .h1b-guide-contact-section .feature-card {
  border-top: 3px solid var(--navy);
  padding: 20px 22px;
}

.h1b-ultimate-guide
  .h1b-guide-contact-section
  .common-grid-3
  .feature-card
  strong {
  display: block;
  color: var(--navy);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 25px;
  line-height: 1.15;
  margin-bottom: 6px;
}

.h1b-ultimate-guide .h1b-guide-contact-section .feature-card p {
  margin-bottom: 0;
}

/* ---------- Guide table of contents ---------- */
.h1b-ultimate-guide .h1b-guide-toc {
  background: var(--white);
  border-top: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  padding: 18px 0;
}

.h1b-ultimate-guide .h1b-guide-toc .related-links {
  gap: 8px;
}

.h1b-ultimate-guide .h1b-guide-toc .related-links a {
  padding: 7px 13px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

/* ---------- Five-item trust strip ---------- */
.h1b-ultimate-guide .h1b-guide-trust-section {
  padding-top: 44px;
  padding-bottom: 44px;
}

.h1b-ultimate-guide .h1b-guide-trust-section .h1b-feature-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.h1b-ultimate-guide
  .h1b-guide-trust-section
  .h1b-feature-grid
  > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}

.h1b-ultimate-guide .h1b-guide-trust-section .feature-card {
  border-top: 3px solid var(--red);
  padding: 20px;
}

.h1b-ultimate-guide .h1b-guide-trust-section .feature-card strong {
  display: block;
  color: var(--navy);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 23px;
  margin-bottom: 5px;
}

.h1b-ultimate-guide .h1b-guide-trust-section .feature-card p {
  margin-bottom: 0;
}

/* ---------- Overview ---------- */
.h1b-ultimate-guide #overview .feature-card {
  padding: 24px;
}

.h1b-ultimate-guide #overview .feature-card > strong {
  color: var(--navy);
  display: block;
  margin-bottom: 7px;
}

.h1b-ultimate-guide #overview .feature-card a {
  color: var(--red);
  font-weight: 600;
}

.h1b-ultimate-guide #overview .feature-card a:hover {
  text-decoration: underline;
}

.h1b-ultimate-guide #overview .feature-card > div:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--steel);
}

/* ---------- Dark strategy/cap sections ---------- */
.h1b-ultimate-guide .why.h1b-strategy .section-title {
  color: var(--white);
}

.h1b-ultimate-guide .why.h1b-strategy .section-description {
  color: var(--steel);
}

.h1b-ultimate-guide #cap .h1b-feature-grid {
  margin-bottom: 26px;
}

.h1b-ultimate-guide #cap .h1b-feature-grid .why-item {
  border-top: 3px solid var(--red);
  padding: 20px 0 18px;
}

.h1b-ultimate-guide #cap .h1b-feature-grid .why-item strong {
  display: block;
  color: var(--white);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 25px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.h1b-ultimate-guide #cap .h1b-feature-grid .why-item p {
  color: var(--steel);
  margin-bottom: 0;
}

.h1b-ultimate-guide #cap .h1b-problems-grid {
  --bs-gutter-y: 20px;
}

.h1b-ultimate-guide #cap .h1b-problems-grid .why-item {
  border-top: 3px solid var(--red);
  padding: 22px 0 0;
}

.h1b-ultimate-guide #cap .h1b-problems-grid .why-item h3 {
  color: var(--white);
  font-size: 20px;
  margin-bottom: 12px;
}

.h1b-ultimate-guide #cap .h1b-problems-grid .why-item .body-copy,
.h1b-ultimate-guide #cap .h1b-problems-grid .why-item li {
  color: var(--steel);
}

.h1b-ultimate-guide
  #cap
  .h1b-problems-grid
  .why-item
  > div:not(.table-responsive) {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--red);
  background: rgba(255, 255, 255, 0.05);
}

.h1b-ultimate-guide #cap .h1b-problems-grid .why-item > div strong {
  color: var(--white);
}

/* ---------- Bootstrap tables: theme them only on this page ---------- */
.h1b-ultimate-guide .table-responsive {
  border: 1px solid var(--steel);
  background: var(--white);
}

.h1b-ultimate-guide .table {
  --bs-table-bg: var(--white);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--steel);
  margin-bottom: 0;
  font-size: 14px;
}

.h1b-ultimate-guide .table thead th {
  background: var(--navy);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 700;
  vertical-align: middle;
}

.h1b-ultimate-guide .table tbody td,
.h1b-ultimate-guide .table tbody th {
  padding: 11px 14px;
  vertical-align: top;
}

.h1b-ultimate-guide .table tbody tr:nth-child(even) td,
.h1b-ultimate-guide .table tbody tr:nth-child(even) th {
  background: var(--cloud);
}

.h1b-ultimate-guide .table tbody tr:hover td,
.h1b-ultimate-guide .table tbody tr:hover th {
  background: #edf2f8;
}

.h1b-ultimate-guide .h1b-guide-criteria-table th[scope="row"] {
  width: 52px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 17px;
}

/* Tables inside navy sections */
.h1b-ultimate-guide #cap .table-responsive {
  border-color: rgba(255, 255, 255, 0.2);
}

.h1b-ultimate-guide #cap .table {
  --bs-table-bg: rgba(255, 255, 255, 0.05);
  --bs-table-color: var(--white);
  --bs-table-border-color: rgba(255, 255, 255, 0.2);
}

.h1b-ultimate-guide #cap .table thead th {
  background: var(--red);
  color: var(--white);
}

.h1b-ultimate-guide #cap .table tbody td {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
}

.h1b-ultimate-guide #cap .table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.08);
}

.h1b-ultimate-guide #cap .table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.11);
}

/* ---------- Wage level cards ---------- */
.h1b-ultimate-guide #wage-levels .h1b-feature-grid {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}

.h1b-ultimate-guide #wage-levels .qualification-card {
  border: 1px solid var(--steel);
  border-top: 4px solid var(--navy);
  border-left-width: 1px;
  padding: 22px;
}

.h1b-ultimate-guide #wage-levels .qualification-card > strong:first-child {
  color: var(--red);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.h1b-ultimate-guide #wage-levels .qualification-card h3 {
  font-size: 28px;
  margin: 6px 0 10px;
}

.h1b-ultimate-guide #wage-levels .qualification-card p {
  margin-bottom: 12px;
}

.h1b-ultimate-guide #wage-levels .qualification-card .mb-0 strong {
  color: var(--navy);
}

.h1b-ultimate-guide #wage-levels > .container > .info-card {
  border-top: 0;
  border-left: 4px solid var(--red);
  padding: 20px 22px;
}

.h1b-ultimate-guide #wage-levels > .container > .info-card > strong {
  display: block;
  color: var(--red);
  margin-bottom: 5px;
}

/* ---------- Requirements ---------- */
.h1b-ultimate-guide #requirements .h1b-problems-grid {
  --bs-gutter-y: 18px;
  margin-bottom: 38px;
}

.h1b-ultimate-guide #requirements .feature-card {
  border-top: 4px solid var(--navy);
  padding: 22px;
}

.h1b-ultimate-guide #requirements .feature-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
}

.h1b-ultimate-guide #requirements > .container > .info-card {
  margin-top: 24px;
  border-left: 4px solid var(--red);
}

.h1b-ultimate-guide #requirements > .container > .info-card > strong {
  display: block;
  color: var(--red);
  margin-bottom: 8px;
}

/* ---------- Fee section ---------- */
.h1b-ultimate-guide #fees > .container > h3 {
  margin-top: 28px;
  margin-bottom: 14px;
}

.h1b-ultimate-guide #fees .h1b-problems-grid {
  --bs-gutter-y: 18px;
  margin-top: 24px;
}

.h1b-ultimate-guide #fees .feature-card {
  border-top: 4px solid var(--navy);
  padding: 22px;
}

.h1b-ultimate-guide #fees .feature-card > strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 10px;
}

.h1b-ultimate-guide #fees .feature-card:first-child > strong {
  color: var(--red);
}

/* ---------- Transfer / Amendment cards ---------- */
.h1b-ultimate-guide #transfer .qualification-card {
  border: 1px solid var(--steel);
  border-top: 4px solid var(--navy);
  border-left-width: 1px;
  padding: 22px;
}

.h1b-ultimate-guide #transfer .qualification-card h4 {
  font-size: 20px;
  margin-bottom: 12px;
}

.h1b-ultimate-guide #transfer > .container > .info-card {
  border-left: 4px solid var(--red);
  border-top-width: 1px;
  padding: 20px 22px;
}

.h1b-ultimate-guide #transfer > .container > .info-card > strong {
  display: block;
  color: var(--red);
  margin-bottom: 6px;
}

/* ---------- Similar long-page card sections ---------- */
.h1b-ultimate-guide #extension .feature-card,
.h1b-ultimate-guide #port-of-entry .feature-card,
.h1b-ultimate-guide #rfe .info-card,
.h1b-ultimate-guide #denial-reasons .info-card,
.h1b-ultimate-guide #strategy .info-card,
.h1b-ultimate-guide #compliance .feature-card {
  padding: 22px;
}

.h1b-ultimate-guide #extension .feature-card,
.h1b-ultimate-guide #port-of-entry .feature-card,
.h1b-ultimate-guide #compliance .feature-card {
  border-top: 4px solid var(--navy);
}

/* ---------- Dark content cards: occupations, stamping, checklist, GC ---------- */
.h1b-ultimate-guide #occupations .why-item,
.h1b-ultimate-guide #stamping .why-item,
.h1b-ultimate-guide #checklist .why-item,
.h1b-ultimate-guide #green-card .why-item {
  padding-top: 18px;
}

.h1b-ultimate-guide #occupations .why-item h3,
.h1b-ultimate-guide #occupations .why-item h4,
.h1b-ultimate-guide #stamping .why-item h3,
.h1b-ultimate-guide #stamping .why-item h4,
.h1b-ultimate-guide #checklist .why-item h3,
.h1b-ultimate-guide #checklist .why-item h4,
.h1b-ultimate-guide #green-card .why-item h3,
.h1b-ultimate-guide #green-card .why-item h4 {
  color: var(--white);
}

.h1b-ultimate-guide #occupations .why-item p,
.h1b-ultimate-guide #occupations .why-item li,
.h1b-ultimate-guide #stamping .why-item p,
.h1b-ultimate-guide #stamping .why-item li,
.h1b-ultimate-guide #checklist .why-item p,
.h1b-ultimate-guide #checklist .why-item li,
.h1b-ultimate-guide #green-card .why-item p,
.h1b-ultimate-guide #green-card .why-item li {
  color: var(--steel);
}

/* ---------- Keep long section gaps consistent ---------- */
.h1b-ultimate-guide .section-space + .section-space {
  border-top: 1px solid rgba(201, 212, 228, 0.45);
}

.h1b-ultimate-guide .why.h1b-strategy + .section-space,
.h1b-ultimate-guide .section-space + .why.h1b-strategy {
  border-top: 0;
}

nav.main > ul > li > a.hdr-cta {
  color: var(--white);
}

nav.main > ul > li > a.hdr-cta:hover {
  color: var(--red);
}

.mobile-utility {
    background-color: var(--red);
    color: #fff;
}

.mobile-utility .col-6 a,
.mobile-utility .col-12 a {
    font-size: 14px;
    text-align: center;
    color: #fff;
    display: block;
    padding: 8px;
}

.mobile-utility .col-6:nth-child(2) a,
.mobile-utility .col-6:nth-child(3) a {
	background-color: var(--navy-deep);
}

.mobile-utility.bottom {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 999;
}

.wp_icon:hover a {
  background-color: transparent !important;
}
.wp_icon::marker {
  font-size: 0;
}
.wp_icon a {
      font-size: 26px !important;
    padding: 0 !important;
    color: #25D366 !important;
}

.final-content .section-eyebrow {
  color: #fff;
}

.feature-card ul {
  font-size: 16px;
  color: #000;
}
.qualification-card ul {
  color: #000;
  font-size: 16px;
}

.h1b-strategy h3 {
  color: #fff;
}
.h1b-evidence-grid .why-item  h4,
.h1b-problems-grid .why-item  h4{
  color: #fff
}
.uni_heding h4 {
  color: #fff;
}

.location-list ul li a::before {
  background: #b31931;
}
.location-list ul li a:after {
  top: 30px;
  background-color: #b31931;
      outline: 2px solid #b31931;
}
body.page-eligibility-quiz .qhero-section {
      background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 78%) !important;
}
body.page-eligibility-quiz .qhero-badge {
  color: #b31931;
}
body.page-eligibility-quiz section.keshab-raj {
      background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 78%) !important;
}
body.page-eligibility-quiz .faq-q .arrow {
      background: #0a1a33;
}
.new-form-one .left-grid  {
  background: #b71c1c !important;
    border: 5px solid #ffc2c2 !important;
    box-shadow: none !important;
    outline: none !important;
}
.final .section-eyebrow {
  color: #fff;
}



/* =============================================
   12. Language Section
   ============================================= */

.language-section .section-header {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 44px;
}

.lang-card {
  background: #fff;
  border: 1.5px solid var(--steel);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  transition: border-color 0.18s, box-shadow 0.18s, color 0.18s;
  text-decoration: none;
}

.lang-card:hover {
  border-color: var(--red);
  box-shadow: 0 4px 16px rgba(179, 25, 49, 0.10);
  color: var(--red);
}

.lang-flag {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.lang-flag img {
	width: 24px;
	height: 24px;
}

.lang-name {
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.lang-arrow {
  font-size: 20px;
  font-weight: 300;
  color: var(--red);
  opacity: 0.7;
  flex-shrink: 0;
} 



/* =============================================
   Footer Variants: Desktop vs Mobile Accordion
   ============================================= */

/* Desktop variant: visible on desktop, hidden on mobile */
.footer-desktop,
.footer-desktop-variant {
  display: flex;
}

/* Mobile variant: hidden on desktop, visible on mobile */
.footer-mobile,
.footer-mobile-variant {
  display: none;
}

/* Custom state classes dynamically added by JS */
.footer-variant-active,
.variant-visible,
.is-desktop-active,
.is-mobile-active {
  display: flex !important;
}

.footer-variant-disabled,
.variant-hidden,
.is-desktop-hidden,
.is-mobile-hidden {
  display: none !important;
}

/* Accordion button & toggle styles for mobile */
.f-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}

.f-acc-chevron {
  display: inline-block;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.25s ease;
  color: var(--steel);
}

.f-acc-btn[aria-expanded="true"] .f-acc-chevron,
.f-col-acc.f-acc-open .f-acc-chevron {
  transform: rotate(90deg);
}

.f-acc-panel {
  display: none;
  padding-bottom: 12px;
}

.f-col-acc.f-acc-open .f-acc-panel {
  display: block;
}

/* -- Responsive ---------------------------- */

@media (max-width: 1399.98px) {
  .header-logo {
    max-width: 100px;
  }
}

@media (max-width: 1199.98px) {
  .nav-row {
    gap: 8px;
  }
  nav.main > ul > li > a {
    padding: 10px 8px;
    font-size: 13px;
  }
/* === applying css properties directly in body for bottom utility links to fit accurately ===   
	body {
		padding-bottom: 40px;
	}  === */
}
@media (max-width: 1024px) {
  nav.main > ul > li > a {
            padding: 10px 6px;
  }
  nav.main > ul {
    gap: 1px;
  }
}

@media (max-width: 1020px) {
  .mobile_book {
        width: 80%;
    margin: auto;
  }
  .wp_icon {
    width: 100%;
    text-align: end;
  }
  nav.main {
    display: none;
  }

  nav.main.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 3px solid var(--red);
    box-shadow: 0 20px 40px rgba(10, 26, 51, 0.18);
    padding: 10px 0 20px;
    /* max-height: 75vh; */
    max-height: 330px;
    overflow-y: auto;
  }

  nav.main.open > ul {
    flex-direction: column;
    gap: 0;
  }

  nav.main.open > ul > li > a {
    padding: 12px 24px;
    font-size: 16px;
  }

  .dd {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 0 0 6px;
  }

  .dd a {
    padding: 8px 38px;
  }

  .menu-btn {
    display: block;
  }

  /* Preserve the original 2-column breakpoint at 1020px. */
  .common-grid-3 > [class*="col-"],
  .common-grid-4 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .atty-grid,
  .emp-grid,
  .rfe-grid {
    --bs-gutter-x: 0;
    --bs-gutter-y: 36px;
  }

  .atty-photo-col,
  .atty-copy-col,
  .emp-copy-col,
  .emp-panel-col,
  .rfe-copy-col,
  .rfe-panel-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .atty-photo {
    max-width: 340px;
  }

  .common-grid-2 > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .h1b-ultimate-guide .h1b-guide-trust-section .h1b-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .h1b-ultimate-guide .h1b-guide-contact-section {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .h1b-ultimate-guide .h1b-guide-toc {
    padding: 14px 0;
  }

  .h1b-ultimate-guide .h1b-guide-toc .related-links {
    gap: 6px;
  }

  .h1b-ultimate-guide .h1b-guide-toc .related-links a {
    padding: 7px 10px;
    font-size: 11.5px;
  }

  .h1b-ultimate-guide .h1b-guide-trust-section .h1b-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h1b-ultimate-guide .table {
    min-width: 680px;
  }

  .h1b-ultimate-guide #cap .h1b-feature-grid .why-item {
    padding-top: 16px;
  }
 .footer-desktop,
  .footer-desktop-variant {
    display: none !important;
  }

  .footer-mobile,
  .footer-mobile-variant {
    display: flex !important;
  }

  .f-col-acc {
    border-bottom: 1px solid rgba(201, 212, 228, 0.15);
  }

  .f-col-acc:first-of-type {
    border-top: 1px solid rgba(201, 212, 228, 0.15);
  }

  .f-grid h4.f-acc-trigger {
    margin-bottom: 0;
  }

  .f-grid.footer-mobile {
    --bs-gutter-y: 0;
  }
}

@media (max-width: 640px) {
  .hero::before,
  .hero::after {
    display: none !important;
  }

  .common-btn,
  .blue-btn,
  .red-btn,
  .white-border-btn {
    padding: 15px;
  }

  .section-space {
    padding: 58px 0;
  }

  /* Preserve the source layout's single-column breakpoint at 640px. */
  .common-grid-3 > [class*="col-"],
  .common-grid-4 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .emp-panel ul,
  .rfe-panel ul {
    columns: 1;
  }

  .cred span {
    border-right: none;
    padding: 4px 0;
    width: 100%;
    text-align: center;
  }

  .utility .u-right {
    display: none;
  }

  .common-grid-2 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .process-step {
    gap: 14px;
  }

  .process-step::before {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .inner-hero .container {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .hero .container,
  .final .container {
    padding-top: 20px;
    padding-bottom: 20px;
  }
	.hero .row {
		flex-direction: column-reverse;
	}
	.atty-photo {
		margin-inline: auto;
	}
}


@media (max-width: 575px) {
  .hero .container,
  .final .container {
    padding-top: 0;
    padding-bottom: 0;
  }
  .h1b-ultimate-guide .h1b-guide-trust-section .h1b-feature-grid {
    grid-template-columns: 1fr;
  }

  .h1b-ultimate-guide .h1b-guide-toc .related-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .h1b-ultimate-guide .h1b-guide-toc .related-links a {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
  .section-space {
    padding: 48px 0;
  }

  .hero,
    .final {
        padding: 45px 12px;
  }
  .final p {
    margin-bottom: 0;
  }

	 
	.cta-row{ 
		flex-direction: column;
	}
	
  .lang-flag {
    font-size: 22px;
  }
	
  .lang-name {
    font-size: 14px;
  }

/* =============================================
   Footer Accordion — mobile only (< 576px)
   ============================================= */
.f-col-acc {
    border-bottom: 1px solid rgba(201, 212, 228, 0.15);
  }

  .f-col-acc:first-of-type {
    border-top: 1px solid rgba(201, 212, 228, 0.15);
  }

  .f-grid h4.f-acc-trigger {
    margin-bottom: 0;
  }

  .f-acc-btn {
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    pointer-events: auto;
  }

  .f-acc-chevron {
    display: inline-block;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.25s ease;
    color: var(--steel);
  }

  .f-acc-btn[aria-expanded="true"] .f-acc-chevron {
    transform: rotate(90deg);
  }

  .f-acc-panel {
    padding-bottom: 12px;
  }

  /* Remove row gap between accordion items on mobile */
  .f-grid {
    --bs-gutter-y: 0;
  }
}





/* Payment Modal */
.payment-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}

.payment-modal .modal-header {
    padding: 24px;
    border-bottom: 1px solid #edf0f4;
}

.payment-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #b31931;
    margin-bottom: 7px;
}

.payment-modal .modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
}

.payment-modal .modal-body {
    padding: 25px;
    text-align: center;
}

.payment-icon {
    width: 58px;
    height: 58px;
    background: #f7d7dc;
    color: #b31931;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    margin: 0 auto 18px;
}

.payment-modal .modal-body h4 {
    font-size: 20px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 10px;
}

.payment-description {
    color: #697586;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 23px;
}

.payment-detail {
    background: #f7d7dc;
    padding: 16px;
    border: 1px solid #b31931;
    border-radius: 10px;
    text-align: left;
}

.payment-detail > span {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    color: #8995a3;
    font-weight: 700;
    margin-bottom: 10px;
}

.email-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.email-row strong {
    color: #b31931;
    font-size: 16px;
    word-break: break-word;
}
.copy-btn {
    border: none;
    background: #b31931;
    color: white;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.copy-btn:hover {
    background: #106b57;
}

.memo-info {
    display: flex;
    gap: 12px;
    text-align: left;
    padding: 16px;
    background: #fff8e9;
    border: 1px solid #f4e3bb;
    border-radius: 9px;
    margin-top: 17px;
}

.memo-icon {
    background: #f3d48b;
    color: #76520d;
    min-width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.memo-info strong {
    display: block;
    color: #76520d;
    font-size: 13px;
    margin-bottom: 5px;
}

.memo-info p {
    color: #000000;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}
.confirmation-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #b31931;
    font-size: 12px;
    line-height: 1.5;
}

.confirmation-info span {
    font-size: 17px;
    font-weight: bold;
}

.payment-modal .modal-footer {
    padding: 0 25px 25px;
    border: none;
}

.modal-done-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #173c58;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.modal-done-btn:hover {
    background: #0d2c43;
}

@media(max-width: 575px) {
    .payment-modal .modal-body {
        padding: 20px;
    }

    .payment-modal .modal-header {
        padding: 20px;
    }

    .payment-modal .modal-title {
        font-size: 19px;
    }
}