/*
 * Global typography, buttons, section titles and card treatments.
 * Layered on top of the parent theme + color overrides — every selector
 * here already exists in the Visarzo markup, this file only restyles.
 */

/* ---------- Typography ---------- */

body,
p,
input,
button,
select,
textarea {
	font-family: var(--nji-font-body);
	color: var(--nji-text-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nji-font-heading);
	color: var(--nji-charcoal);
	letter-spacing: -0.01em;
}

/* ---------- Global responsive type scale ----------
   The parent stylesheet declares its own font-size on dozens of classed
   selectors (.sec-title h2, .counter-block-one h3, etc.), all of which
   out-specificity a bare "h2 { }" rule. Rather than chase every one of
   those individually, the scale below is enforced with !important so it
   applies consistently site-wide. Anything that genuinely needs its own
   size (the hero title) is written with a matching !important of its
   own, since specificity is moot once both sides use it. */

h1 { font-size: 56px !important; line-height: 1.15 !important; font-weight: 700 !important; }
h2 { font-size: 42px !important; line-height: 1.2 !important; font-weight: 700 !important; }
h3 { font-size: 28px !important; line-height: 1.3 !important; font-weight: 700 !important; }
h4 { font-size: 22px !important; line-height: 1.35 !important; font-weight: 600 !important; }

body, p { font-size: 16px; line-height: 1.7; }

.small-text, .sec-title p { font-size: 14px !important; line-height: 1.5 !important; }

.theme-btn-one, .theme-btn-two { font-size: 16px; }

@media only screen and (max-width: 1200px) {
	h1 { font-size: 46px !important; }
	h2 { font-size: 37px !important; }
	h3 { font-size: 26px !important; }
	body, p { font-size: 16px; }
}

@media only screen and (max-width: 767px) {
	h1 { font-size: 32px !important; }
	h2 { font-size: 28px !important; }
	h3 { font-size: 22px !important; }
	h4 { font-size: 19px !important; }
	body, p { font-size: 15px; }
}

a {
	color: var(--nji-charcoal);
}

/* ---------- Section titles (eyebrow + heading pattern) ---------- */

.sec-title p {
	color: var(--nji-red);
	font-weight: 700;
	letter-spacing: 1.5px;
}

.sec-title h2 {
	font-weight: 700;
	color: var(--nji-charcoal);
	letter-spacing: -0.02em;
}

.sec-title:before {
	height: 3px;
	border-radius: 2px;
}

/* ---------- Buttons ---------- */

.theme-btn-one,
.theme-btn-two {
	border-radius: var(--nji-radius-sm);
	font-family: var(--nji-font-heading);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform var(--nji-transition), box-shadow var(--nji-transition), background-color var(--nji-transition);
}

.theme-btn-two {
	box-shadow: 0 6px 18px rgba(236, 28, 36, 0.25);
}

.theme-btn-two:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(236, 28, 36, 0.32);
}

.theme-btn-one:hover {
	transform: translateY(-2px);
}

/* Secondary/outline CTA used against dark or light backgrounds */
.theme-btn-one {
	border-color: var(--nji-charcoal);
	color: var(--nji-charcoal);
}

.theme-btn-one:after {
	background: var(--nji-charcoal);
}

.theme-btn-one:hover {
	color: #fff;
}

.banner-section .theme-btn-one,
.main-header .theme-btn-one,
.apply-section .theme-btn-one {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

/* ---------- Strategic red icon accents (promoted off the retired navy) ---------- */

.service-block-one .inner-box .icon-box,
.apply-style-two .single-item .inner-box .icon-box,
.coaching-details-content .content-style-two .inner-box .single-item .icon-box,
.contact-page-section .info-inner .single-item .inner-box .icon-box {
	color: var(--nji-red);
}

/* This one has a solid red background (below), so the icon glyph itself
   needs to stay white — it was being set to red-on-red here, making it
   completely invisible. */
.service-block-two .inner-box .lower-content .box .icon-box {
	background: var(--nji-red);
	color: #fff;
}

.apply-style-two .single-item .inner-box:hover .icon-box {
	background: var(--nji-red);
	border-color: var(--nji-red);
	color: #fff;
}

/* ---------- Cards: consistent premium elevation ---------- */

.service-block-one .inner-box {
	border-bottom: 3px solid transparent;
	box-shadow: var(--nji-shadow-soft);
	transition: transform var(--nji-transition), box-shadow var(--nji-transition), border-color var(--nji-transition);
}

.service-block-one .inner-box:before {
	background: var(--nji-red);
}

.service-block-one .inner-box:hover {
	box-shadow: var(--nji-shadow-card);
	border-bottom-color: var(--nji-red);
	transform: translateY(-4px);
}

.news-block-one .inner-box,
.testimonial-block-one .inner-box,
.team-block-one .inner-box {
	box-shadow: var(--nji-shadow-soft);
	transition: box-shadow var(--nji-transition), transform var(--nji-transition);
}

.news-block-one .inner-box:hover,
.testimonial-block-one:hover,
.team-block-one .inner-box:hover {
	box-shadow: var(--nji-shadow-card);
	transform: translateY(-4px);
}

/* ---------- Utility background classes (bg-color-2 had a broken 5-digit
   hex in the parent stylesheet — #d1000 — which browsers silently drop) */

.bg-color-1 {
	background: var(--nji-red);
}

/* "Our Visa Categories" section: the parent theme paints a large
   480px-tall fully-red backdrop behind this section via a ::before
   pseudo-element. Too much red for a professional site — light
   off-white keeps the same floating-card visual effect without the
   red wash or a heavy dark block. */
.offer-section:before {
	background: var(--nji-off-white);
}

/* The widget renders its heading with a "light" modifier class assuming
   a dark background (white text) — needs dark text now that the
   backdrop is light. Eyebrow stays red to match the sitewide pattern. */
.offer-section .sec-title.light p {
	color: var(--nji-red);
}

.offer-section .sec-title.light h2 {
	color: var(--nji-charcoal);
}

.bg-color-2 {
	background: var(--nji-charcoal);
}

/* The inquiry/contact widget (used on both the homepage and the Contact
   page, each under a different Elementor element ID) hardcodes
   .bg-color-1 into its own markup with no dedicated background control,
   so the global red utility class above would otherwise paint the whole
   section fully red on every page it's placed on. Scoped to the
   widget's own .inquiry-section class instead of a specific element ID
   so the fix applies everywhere the widget is used, not just one page.
   .bg-color-1 keeps its normal meaning everywhere else on the site. */
.inquiry-section.bg-color-1 {
	background: var(--nji-grey-100);
}

/* ---------- Trust / stat counters ---------- */

.counter-block-one .inner-box .count-outer,
.funfact-style-two .inner-container {
	color: var(--nji-red);
}

.funfact-style-two .inner-container {
	background: var(--nji-charcoal);
}

/* ---------- FAQ / accordion ---------- */

.accordion-box .block .acc-btn.active h5 {
	color: var(--nji-red);
}

.accordion-box .block .acc-btn.active {
	border-color: var(--nji-red);
}

/* ---------- Forms ---------- */

.wpcf7-form-control:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--nji-red) !important;
}

/* ---------- Subtle section wash for alternating rhythm ---------- */

.subtle-red-section {
	background: var(--nji-red-tint);
}

/* ---------- Section padding: stacked with the outer Elementor
   section's own padding, same pattern fixed elsewhere already. Forced
   with !important since same-specificity load order proved unreliable
   for this exact conflict elsewhere on the page. */

.faq-section {
	padding-top: 0 !important;
	padding-bottom: 60px !important;
}

.news-section {
	padding-top: 30px !important;
	padding-bottom: 0 !important;
}

/* Testimonials section: a 2-column grid with 3 direct children (image,
   heading badge, review widget) auto-places them in row-major order —
   image top-left, heading top-right, reviews wrap below the image
   instead of sitting beside the heading. Explicit placement instead:
   image spans both rows in column 1, heading + reviews stack in
   column 2. */
.elementor-element-52e2251 {
	grid-template-rows: auto 1fr !important;
}

.elementor-element-973dfaa {
	grid-column: 1 !important;
	grid-row: 1 / 3 !important;
}

.elementor-element-d539dc3 {
	grid-column: 2 !important;
	grid-row: 1 !important;
}

.elementor-element-931735d {
	grid-column: 2 !important;
	grid-row: 2 !important;
}

@media only screen and (max-width: 767px) {
	.elementor-element-973dfaa,
	.elementor-element-d539dc3,
	.elementor-element-931735d {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}

/* Hide the Trustindex plugin's own "Verified by Trustindex" branding
   badge under the Google reviews widget. */
.ti-verified-by,
.ti-verified-by-row {
	display: none !important;
}