/*
 * Bridge styles: map native Elementor widget output onto the Rock theme.
 * Elementor puts the "CSS Classes" on the widget WRAPPER, while the theme
 * styles the inner element — so here we retarget the theme's real values onto
 * Elementor's inner nodes (.elementor-heading-title / .elementor-button / …).
 * !important is used to beat Elementor's global Kit colors, which otherwise win.
 * Everything is scoped to the page sections; the PHP header/footer is untouched.
 */

/* ---------- Headings ---------- */
.elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

/* Hero title */
.nenix-hero-section .hero-content .title .elementor-heading-title {
	font-size: 88px !important;
	line-height: 95px !important;
	color: #1a1a1a !important;
	font-weight: 700;
}

/* Section titles (About / Contact) */
.section-title .title .elementor-heading-title {
	font-size: 64px !important;
	line-height: 1 !important;
	color: #141414 !important;
	font-weight: 700;
	font-family: "Plus Jakarta Sans", sans-serif;
	letter-spacing: -2px;
}
.section-title .section-title-half-size .elementor-heading-title {
	font-size: 36px !important;
	line-height: 1.2 !important;
	color: #141414 !important;
	font-weight: 700;
	font-family: "Plus Jakarta Sans", sans-serif;
}

/* Journey / values titles */
.journey-item .title .elementor-heading-title {
	font-size: 26px !important;
	line-height: 32px !important;
	color: #130F49 !important;
	font-weight: 400;
	font-family: "Karla", sans-serif;
	letter-spacing: -0.8px;
}
.journey-item .title .elementor-heading-title span {
	display: inline-block;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background: #FFF5F6;
	border-radius: 50%;
	margin-right: 15px;
}

/* Number badges (15+ / 350+) */
.image-content .number .elementor-heading-title {
	font-size: 64px !important;
	line-height: 1 !important;
	color: #130F49 !important;
	font-weight: 700;
}

/* CTA title */
.nenix-cta-section .title .elementor-heading-title {
	font-size: 48px !important;
	line-height: 1.1 !important;
	color: #141414 !important;
	font-weight: 700;
	font-family: "Plus Jakarta Sans", sans-serif;
}

/* ---------- Body text ---------- */
.nenix-hero-section .hero-content .text .elementor-text-editor,
.nenix-hero-section .hero-content .text p {
	font-size: 18px !important;
	line-height: 30px !important;
	color: #130F49 !important;
}

/* ---------- Buttons: kill Elementor's global accent, mirror the theme .btn ---------- */
/* Base = theme .btn (outline: transparent fill, dark text, pink border) */
.nenix-hero-section .elementor-button,
.nenix-about-section .elementor-button,
.nenix-journey-section .elementor-button,
.contact-section .elementor-button,
.nenix-cta-section .elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: transparent !important;
	background-image: none !important;
	color: #130F49 !important;
	border: 1px solid #EA4C89 !important;
	border-radius: 30px !important;
	font-size: 18px !important;
	font-family: "Karla", sans-serif !important;
	font-weight: 400 !important;
	height: 58px;
	line-height: 1 !important;
	padding: 0 30px !important;
	text-transform: uppercase;
	box-shadow: none !important;
	transition: all 0.5s ease 0s;
	fill: currentColor;
}
/* Base hover = fill pink, white text */
.nenix-hero-section .elementor-button:hover,
.nenix-about-section .elementor-button:hover,
.nenix-journey-section .elementor-button:hover,
.contact-section .elementor-button:hover,
.nenix-cta-section .elementor-button:hover {
	background-color: #EA4C89 !important;
	color: #ffffff !important;
}

/* The theme's .btn / .btn-1 / .btn-2 classes are meant for the <a>, but
 * Elementor puts them on the button WIDGET WRAPPER (a div). That makes the
 * theme paint a full box behind the pill (pink normally, navy on hover via
 * .btn-2:hover). Neutralise the wrapper — all real styling lives on the pill
 * (.elementor-button) above. */
.elementor-widget-button.btn,
.elementor-widget-button.btn-1,
.elementor-widget-button.btn-2,
.elementor-widget-button.btn-plain,
.elementor-widget-button.cta-btn {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	height: auto !important;
	line-height: normal !important;
	box-shadow: none !important;
}

/* Filled variant = theme .btn-2 (pink fill, white text, transparent border) */
.elementor-widget-button.btn-2 .elementor-button {
	background-color: #EA4C89 !important;
	border-color: transparent !important;
	color: #ffffff !important;
}
/* Filled hover = darken to navy (theme .btn-2:hover) */
.elementor-widget-button.btn-2 .elementor-button:hover {
	background-color: #130F49 !important;
	border-color: transparent !important;
	color: #ffffff !important;
}

/* Icon spacing + colour follow the label */
.elementor-button .elementor-button-icon {
	margin-left: 5px;
}
.elementor-button .elementor-button-icon i {
	color: inherit !important;
}

/* ---------- Buttons row: keep the two buttons tight, not spread 50/50 ---------- */
.hero-btn-wrap > .elementor-container > .elementor-column {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

/* ---------- Contact info rows ---------- */
.single-contact-info {
	align-items: center;
}
.single-contact-info .info-icon .elementor-icon i {
	color: #EA4C89 !important;
	font-size: 18px !important;
}
.single-contact-info .info-icon .elementor-icon {
	width: auto;
	height: auto;
}

/* ---------- Floating image badges (white cards over the images) ---------- */
.hero-images,
.about-img {
	position: relative;
}
.hero-images .elementor-inner-section,
.about-img .elementor-inner-section {
	position: absolute !important;
	width: auto !important;
	max-width: 60%;
	background: #ffffff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
	border-radius: 20px;
	padding: 25px 30px;
	z-index: 2;
	margin: 0 !important;
}
.hero-images .elementor-inner-section {
	right: 40px;
	bottom: 30px;
}
.about-img .elementor-inner-section {
	left: 30px;
	bottom: 30px;
}
.image-content {
	align-items: center;
}
.image-content .image-icon .elementor-icon i {
	font-size: 34px !important;
	color: #EA4C89 !important;
}
.image-content .number .elementor-heading-title {
	margin: 0 !important;
}
/* Badge (inner section) inner container: icon + number aligned centre */
.image-content > .elementor-container {
	align-items: center;
	flex-wrap: nowrap;
}

/* ---------- Layout helpers for the native Elementor structure ---------- */
/* (map Bootstrap col/row behaviour onto Elementor sections/columns 1:1) */

/* The theme floats every top-level block (.section, .main-wrapper: float:left).
 * Elementor's top sections are normal blocks, so between the floated header and
 * footer the whole page "floats"/overlaps. Make each Elementor top section join
 * the same float flow — mirrors the theme's .section. Location-independent, so
 * it works under any page layout (Default / Full Width / Canvas). */
.elementor > .elementor-section,
.elementor > .elementor-top-section,
.elementor .e-con {
	float: left;
	clear: both;
	width: 100%;
}

/* Core Values: centre the 2×2 grid inside the ~col-lg-8 wrapper */
.nenix-journey-section .journey-row {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Contact info rows: icon + text on one line, vertically centred */
.single-contact-info > .elementor-container {
	align-items: center;
	flex-wrap: nowrap;
}
.single-contact-info .info-icon {
	width: auto;
	flex: 0 0 auto;
}

/* Hero client block (avatar + rating) aligned centre */
.hero-client-text-wrap > .elementor-container {
	align-items: center;
	flex-wrap: nowrap;
}
.hero-client-text-wrap .client-img {
	width: auto;
	flex: 0 0 auto;
}

/* CTA button = theme .cta-right .btn (smaller, bold) */
.nenix-cta-section .cta-right .elementor-button {
	height: 52px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px;
	font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* Hero: first CTA button keeps the theme 20px gap to the second */
.hero-btn-wrap .btn-1 .elementor-button {
	margin-right: 20px;
}

/* ============================================================
 * RESPONSIVE — mirror the theme's breakpoints for the Elementor
 * structure. (Most theme media queries already apply now that the
 * section/column classes render; these fill the two gaps: Elementor
 * columns don't stack until 767, and the bridge sets heading sizes
 * with !important so they need per-breakpoint overrides.)
 * ============================================================ */

/* Keep icon+text rows on ONE line at every screen size (contact info,
 * image badges, hero client) — Elementor would otherwise stack them <768. */
.single-contact-info > .elementor-container,
.image-content > .elementor-container,
.hero-client-text-wrap > .elementor-container {
	flex-wrap: nowrap !important;
	align-items: center;
}
.single-contact-info .info-icon,
.image-content .image-icon,
.hero-client-text-wrap .client-img {
	width: auto !important;
	flex: 0 0 auto !important;
}
.single-contact-info .info-text,
.image-content .image-text,
.hero-client-text-wrap .client-text {
	width: auto !important;
	flex: 1 1 auto !important;
}

/* Stack the main two-column sections at the theme's lg breakpoint (<=991) */
@media only screen and (max-width: 991px) {
	.nenix-hero-section > .elementor-container > .elementor-column,
	.nenix-about-section > .elementor-container > .elementor-column,
	.contact-section > .elementor-container > .elementor-column,
	.cta-wrap > .elementor-container > .elementor-column {
		width: 100% !important;
	}
}

/* --- Hero title (bridge base = 88px !important) --- */
@media only screen and (max-width: 1399px) {
	.nenix-hero-section .hero-content .title .elementor-heading-title {
		font-size: 72px !important;
		line-height: 78px !important;
	}
}
@media only screen and (max-width: 1199px) {
	.nenix-hero-section .hero-content .title .elementor-heading-title {
		font-size: 60px !important;
		line-height: 66px !important;
	}
}
@media only screen and (max-width: 991px) {
	.nenix-hero-section .hero-content .title .elementor-heading-title {
		font-size: 48px !important;
		line-height: 54px !important;
	}
}
@media only screen and (max-width: 767px) {
	.nenix-hero-section .hero-content .title .elementor-heading-title {
		font-size: 36px !important;
		line-height: 42px !important;
	}
}
@media only screen and (max-width: 449px) {
	.nenix-hero-section .hero-content .title .elementor-heading-title {
		font-size: 30px !important;
		line-height: 36px !important;
	}
}

/* --- Section titles (About / Values / Contact) --- */
@media only screen and (max-width: 1399px) {
	.section-title .title .elementor-heading-title {
		font-size: 52px !important;
	}
}
@media only screen and (max-width: 767px) {
	.section-title .title .elementor-heading-title {
		font-size: 30px !important;
		line-height: 36px !important;
	}
	.section-title .section-title-half-size .elementor-heading-title {
		font-size: 28px !important;
	}
}

/* --- Number badges (15+ / 350+) --- */
@media only screen and (max-width: 1199px) {
	.image-content .number .elementor-heading-title {
		font-size: 50px !important;
	}
}

/* --- CTA title (bridge base = 48px) --- */
@media only screen and (max-width: 767px) {
	.nenix-cta-section .title .elementor-heading-title {
		font-size: 42px !important;
	}
}
@media only screen and (max-width: 575px) {
	.nenix-cta-section .title .elementor-heading-title {
		font-size: 36px !important;
	}
}

/* --- Floating badges: keep them inside the image on small screens --- */
@media only screen and (max-width: 575px) {
	.hero-images .elementor-inner-section,
	.about-img .elementor-inner-section {
		right: 10px !important;
		left: auto !important;
		bottom: 20px !important;
		padding: 18px 20px !important;
		max-width: 75% !important;
	}
	.image-content .number .elementor-heading-title {
		font-size: 44px !important;
	}
}