/* Small overrides shared by every page (real-theme pages and custom pages alike). */

/* The off-canvas mobile nav below sits at `position: fixed; right: 0` and slides in via
   `transform: translateX(100%)` when closed — even fully off-screen, Chromium still counts
   that transformed box toward the page's scrollable area, which otherwise leaves every page
   horizontally scrollable by ~300px on mobile. Clipping it here is the standard fix. */
html, body { overflow-x: hidden; }

/* ===== Header =====
   Fully custom, self-contained header — the real theme's header (menuzord +
   .tm-header-menu) is an off-canvas panel driven by JS we don't load, and every
   attempt to coexist with its CSS (undefined custom properties, position:fixed,
   transform tricks) kept surfacing new ways for the nav to end up invisible or
   pushed off-screen. This has zero dependency on that system. */
.th-header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); position: relative; z-index: 100; }
.th-header-inner {
  max-width: 1320px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.th-header-logo { display: flex; align-items: center; flex-shrink: 0; }
.th-header-logo img { height: 60px; width: auto; display: block; }

.th-nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px;
  flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center;
}
.th-nav-toggle span { width: 24px; height: 2px; background: #222; display: block; }

.th-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; min-width: 0; }
.th-nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.th-nav-link { display: inline-block; padding: 8px 14px; color: #222; text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.th-nav-link:hover, .th-nav-link.active { color: #C60C0C; }
.th-nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.th-nav-greeting { font-size: 13px; font-weight: 600; color: #333; text-decoration: none; white-space: nowrap; }
.th-nav-actions .btn { padding: 9px 16px !important; font-size: 13px; white-space: nowrap; }


.btn-black { background: #1c1f2a !important; color: #fff !important; border-color: #1c1f2a !important; }
.btn-black:hover { background: #000 !important; }

@media (max-width: 900px) {
  .th-header-logo img { height: 38px; }
  .th-nav-toggle { display: flex; }
  .th-nav {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(300px, 85vw);
    background: #fff; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 90px 24px 24px; box-shadow: -6px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%); transition: transform 0.25s ease; z-index: 200; gap: 20px;
  }
  .th-nav.th-nav-open { transform: translateX(0); }
  .th-nav-list { flex-direction: column; align-items: flex-start; width: 100%; gap: 2px; }
  .th-nav-link { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
  .th-nav-actions { flex-direction: column; align-items: flex-start; width: 100%; gap: 10px; }
  .th-nav-actions .btn { width: 100%; text-align: center; }
}

.sample-note { display: block; font-size: 12px; color: #8a8f98 !important; margin-top: 8px; font-style: italic; }

/* Real theme sets .subtitle to white!important (meant for dark hero-style backgrounds).
   None of our sections are dark except the hero (which doesn't use this class), so this
   was rendering every section's small kicker label invisible against the white page. */
.subtitle { color: #C60C0C !important; }
.tm-text-editor { color: #333 !important; }
.title-part1, h2.title, .tm-sc-section-title h2 { color: #1c1f2a !important; }

/* Real theme footer background is transparent by default; the dark navy in the
   original came from a page-specific Elementor rule that isn't present in our
   simplified markup. Force the color with !important so nothing else in the
   real theme's CSS (which loads before this file) can win the cascade. */
#footer, #footer.footer { background-color: #212D33 !important; color: rgba(255,255,255,0.85) !important; }
#footer h4, #footer h5, #footer h4 *, #footer h5 * { color: #fff !important; }
#footer a, #footer a * { color: rgba(255,255,255,0.85) !important; }
#footer a:hover, #footer a:hover * { color: #C60C0C !important; }
#footer p, #footer p * { color: rgba(255,255,255,0.85) !important; }
#footer .tm-text-editor, #footer .tm-text-editor * { color: rgba(255,255,255,0.85) !important; }
#footer .icon-box-title, #footer .icon-box-title * { color: #fff !important; }
#footer .content, #footer .content * { color: rgba(255,255,255,0.85) !important; }

/* Footer text was a mix of sizes (21.6px headings, 16px body) with very generous
   line-heights (30–40px) meant for a roomier layout, leaving the compact footer
   looking loosely scattered. Unify to one small size with tight line spacing. */
#footer h4, #footer p, #footer a, #footer .tm-text-editor, #footer .tm-sc-simple-nav-menu li {
  font-size: 14px !important; line-height: 1.6 !important;
}
/* Top margin only on the bold column headings (Services / Useful Links / Ready To
   Apply?) — they sat flush against the footer's top edge with no breathing room. */
#footer h4 { margin: 20px 0 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
#footer .tm-sc-simple-nav-menu li { margin-bottom: 6px; }
#footer .e-con-inner:last-child p { margin: 0 !important; }
#footer .btn { font-size: 12px !important; }
#footer .logo-default { width: 130px !important; height: auto !important; }

/* ===== "3 easy simple steps" process section =====
   The real theme's isotope-based grid was rendering as a large blank box for
   this section (JS-dependent masonry positioning without the masonry JS).
   Force it into a plain, guaranteed CSS grid instead of chasing the exact
   cause inside the real theme's 1MB minified bundle. */
.tm-working-grid .isotope-layout {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important; height: auto !important; min-height: 0 !important; position: static !important;
}
.tm-working-grid .isotope-layout-inner { display: contents !important; }
.tm-working-grid .isotope-item {
  position: static !important; float: none !important; width: 100% !important;
  margin: 0 !important; padding: 0 !important; height: auto !important;
}
.working-block-style2 .icon-box { background-color: #f8f8f8 !important; border-top-color: #C60C0C !important; }
.working-title, .working-details, .working-count { color: #1c1f2a !important; }
@media (max-width: 900px) {
  .tm-working-grid .isotope-layout { grid-template-columns: 1fr !important; }
}

/* ===== "Choose Country" / features-grid sections =====
   Same root cause as the process-steps section, but here the masonry JS DOES run
   (adds .isotope-rendered + inline position:absolute/left/top/height) — it just
   miscalculates and stacks every card into a single left:0 column with no width,
   leaving a tall mostly-empty gap. Override the JS-set inline styles (!important
   beats inline styles here) with a plain CSS grid sized to each variant. */
.tm-features-grid .isotope-layout,
.tm-features-grid .isotope-layout.isotope-rendered {
  display: grid !important; gap: 20px !important;
  height: auto !important; min-height: 0 !important; position: static !important;
}
.tm-features-grid .isotope-layout.grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.tm-features-grid .isotope-layout.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.tm-features-grid .isotope-layout.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
.tm-features-grid .isotope-layout-inner { display: contents !important; height: auto !important; }
.tm-features-grid .isotope-item {
  position: static !important; left: auto !important; top: auto !important;
  float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; height: auto !important;
}
.features-title, .features-details { color: #1c1f2a !important; }
@media (max-width: 900px) {
  .tm-features-grid .isotope-layout.grid-3,
  .tm-features-grid .isotope-layout.grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .tm-features-grid .isotope-layout.grid-2,
  .tm-features-grid .isotope-layout.grid-3,
  .tm-features-grid .isotope-layout.grid-4 { grid-template-columns: 1fr !important; }
}

/* ===== Split-text scroll-reveal headings =====
   The real theme wraps heading text one letter per <div>, set to
   opacity:0 / transform:translate(50px,0) until a scroll-triggered JS
   animation reveals them. That trigger script isn't loaded, so these
   headings render permanently invisible. Force them visible. */
.tm-split-text, .tm-split-text * , .title-part1, .title-part1 * {
  opacity: 1 !important; transform: none !important;
}

/* ===== Oversized section padding =====
   Several Elementor sections carry very large --padding-top/--padding-bottom
   values (up to 490px in one case) that were originally designed to be filled
   by a large background image/parallax effect. We don't have those effects,
   so the padding alone rendered as large blank gaps between sections.
   .e-con-inner is the element that actually applies this padding (via
   padding-block-start/end, fed by the --padding-top/bottom custom properties
   on its parent). Cap it site-wide instead of hunting each offending element
   ID individually. */
.e-con-inner {
  padding-block-start: clamp(0px, var(--padding-block-start, 0px), 70px) !important;
  padding-block-end: clamp(0px, var(--padding-block-end, 0px), 70px) !important;
}

/* ===== Homepage service-type swiper (Student/Family/Business/Work Visa cards) =====
   Same root cause as the isotope grids above, but for Swiper.js: it normally measures
   slide height via JS and sets it explicitly on .swiper-wrapper (which has height:100%
   in the base CSS). Without that JS, height:100% resolves against an undersized
   auto-height parent, so the wrapper collapses and the cards overflow downward,
   overlapping the "Why Choose Us" section that follows instead of pushing it down. */
/* Swiper is fundamentally a sideways-scrolling track (a wide flex row shifted with
   transform: translateX) that JS resizes and repositions per slide. Fighting that
   flex/transform machinery with flex-basis overrides (previous approach) still left
   artifacts — a partially clipped first card, phantom pagination dots. Replacing
   display with a plain CSS grid sidesteps the track model entirely: each slide just
   fills its grid cell, no translate/track width math involved, and the base theme's
   `.swiper-slide{width:100%}` becomes harmless (100% of the grid cell, not the row). */
.tm-service-carousel .swiper-wrapper {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important;
  position: static !important; height: auto !important; transform: none !important;
}
.tm-service-carousel .swiper-slide { width: auto !important; flex: none !important; max-width: none !important; }
.tm-service-carousel .swiper-container-inner { height: auto !important; overflow: visible !important; }
.tm-service-carousel.tm-swiper-container { height: auto !important; }
.tm-service-carousel .swiper-pagination { display: none !important; }
@media (max-width: 900px) { .tm-service-carousel .swiper-wrapper { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .tm-service-carousel .swiper-wrapper { grid-template-columns: 1fr !important; } }

/* ===== "3 easy features" / "Why Choose Us" split section =====
   Calibrated for a decorative background shape from the original design (a
   -375px top margin meant to pull this section up under that shape); without
   it, the negative margin instead drags this section up on top of whatever
   precedes it, overlapping the swiper cards and the "Why Choose Us" heading. */
.elementor-element-1b915f3 { margin-top: 0 !important; }

/* ===== "Outstanding Immigration Visa Services" heading =====
   This section (elementor-element-976063b) has a dark background but the heading
   inherits the theme's default near-black heading color, rendering it almost
   invisible. Scoped by element ID rather than the shared .tm-bg-color-over-image
   utility class, since that class is also used by sibling sections with light
   backgrounds where the heading must stay dark. */
.elementor-element-976063b .tm-sc-section-title h2.title,
.elementor-element-976063b .tm-sc-section-title .title-part1 {
  color: #fff !important;
}

/* ===== Brand red buttons =====
   .btn-theme-colored1 / .btn-outline-theme-colored1 are hardcoded to the old
   brand red in the theme's compiled CSS (not a CSS custom property), so the
   only way to recolor every button sitewide is to override them here. */
.btn-theme-colored1 { background-color: #C60C0C !important; border-color: #C60C0C !important; }
.btn-theme-colored1:hover { background-color: #a80a0a !important; border-color: #a80a0a !important; }

/* ===== "Testimonials" kicker =====
   The generic .subtitle rule above makes every section kicker red; this one
   (elementor-element-d16d535, above "What Our Clients Say") should be black instead. */
.elementor-1698 .elementor-element.elementor-element-d16d535 .tm-sc-section-title .subtitle { color: #1c1f2a !important; }

/* ===== Email contact badge =====
   elementor-element-68cb7dd's icon-box-title (showing SITE_EMAIL) wraps mid-word
   inside its fixed-width box. Force it onto one line and shrink slightly to fit. */
.elementor-element-68cb7dd .icon-box-title { white-space: nowrap !important; font-size: 13px !important; }
.btn-outline-theme-colored1 { color: #C60C0C !important; border-color: #C60C0C !important; }
.btn-outline-theme-colored1:hover { background-color: #C60C0C !important; border-color: #C60C0C !important; color: #fff !important; }

/* ===== Country cards turning black on hover =====
   .features-block-style6 (used by the "Choose Country" cards on both the home page
   and About) sets background-color: var(--theme-color2) on hover, which resolves to
   pure black (#000000). Replace with a subtle light hover instead, and re-fix the
   text colors that were tuned for a dark hover background. */
.features-block-style6 .inner-box:hover { background-color: #fff !important; box-shadow: 0 10px 24px rgba(20,10,15,0.12); }
.features-block-style6 .inner-box:hover .features-title { color: #1c1f2a !important; }
.features-block-style6 .inner-box:hover .features-details { color: #56616b !important; }

/* ===== About page: "Most Trusted..." heading + video block =====
   Same dark-background/near-black-heading pattern as the homepage's "Outstanding
   Immigration Visa Services" fix above. */
.elementor-element-d8c98bd .tm-sc-section-title h2.title,
.elementor-element-d8c98bd .tm-sc-section-title .title-part1 {
  color: #fff !important;
}
/* The video popup (play button + YouTube link) and its "Watch Video" arrow callout —
   removed per request; hidden rather than deleted from the markup to avoid corrupting
   this page's deeply nested Elementor container structure. */
.elementor-element-169da60, .elementor-element-2aea1fb { display: none !important; }
/* Same decorative-overlap negative margin as elementor-element-1b915f3 on the homepage:
   the "Choose Country" section is pulled -120px up, clipping into "Most Trusted...". */
.elementor-element-19582a7 { margin-top: 0 !important; }
/* About/Contact's big Elementor page-title banner replaced with the same compact
   .th-dash-hero ribbon used on dashboard pages — hidden rather than deleted from the
   markup to avoid corrupting the nested Elementor container structure. */
.tm-page-title-elementor { display: none !important; }
/* "Experience Team Members" section: the per-card social icon flyout that pops up on
   hover/focus is removed per request — hidden rather than deleted from the markup. */
.tm-sc-team .social-links { display: none !important; }