/*
Theme Name: JIC Custom Theme
Template: hello-elementor
Version: 1.0.1
*/
:root {
	--jic-main-color: #f293a7;
	--jic-green-color: #6db09f;
}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
	padding: 0px !important;
}
.mega-menu-item-1913 a {
	display: block !important;
	background-color: var(--jic-main-color) !important;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
	font-weight: var(--e-global-typography-primary-font-weight) !important;
	font-size: 15px !important;
	fill: #303030;
	color: #303030;
	border-radius: 7px 7px 7px 7px !important;
	padding: 15px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	width: 100% !important;
	transition: all 0.3s !important;
}
.mega-menu-item-1913:hover a {
	background-color: var(--jic-green-color) !important;
	color: #ffffff !important;
}

/* ── Header: compact mobile bar ──────────────────────────────────────────
 * The Elementor header row holds the logo, the "register" pushable button and
 * the Max Mega Menu widget (set to 100% width), so on phones each one wrapped
 * onto its own line. Below Max Mega Menu's 768px breakpoint, keep them on one
 * row: logo at the start, button + hamburger at the end. Flex order and
 * margin-inline mirror automatically between the Arabic (RTL) and English
 * (LTR) versions. Rows are matched by "contains the mega menu widget", not by
 * Elementor IDs, so edits to the header don't break this.
 */
@media (max-width: 768px) {
	.elementor-location-header .e-con.e-con:has(> .e-con-inner > .elementor-widget-maxmegamenu),
	.elementor-location-header .e-con.e-con:has(> .elementor-widget-maxmegamenu) {
		--padding-top: 10px;
		--padding-bottom: 10px;
	}

	.elementor-location-header :is(.e-con-inner, .e-con):has(> .elementor-widget-maxmegamenu) {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 10px !important;
	}

	.elementor-location-header :is(.e-con-inner, .e-con):has(> .elementor-widget-maxmegamenu) > .elementor-widget-image {
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
		width: auto !important;
		margin-inline-end: auto;
		text-align: start;
	}

	.elementor-location-header :is(.e-con-inner, .e-con):has(> .elementor-widget-maxmegamenu) > .elementor-widget-pushable_button_widget {
		order: 2;
		flex: 0 0 auto;
	}

	.elementor-location-header :is(.e-con-inner, .e-con):has(> .elementor-widget-maxmegamenu) > .elementor-widget-maxmegamenu {
		order: 3;
		flex: 0 0 auto;
		width: auto !important;
		max-width: none !important;
	}

	/* Anything else in the row (e.g. search) goes after the menu */
	.elementor-location-header :is(.e-con-inner, .e-con):has(> .elementor-widget-maxmegamenu) > .elementor-element:not(.elementor-widget-image, .elementor-widget-pushable_button_widget, .elementor-widget-maxmegamenu) {
		order: 4;
	}

	/* Hamburger: 44px touch target in a soft brand tile, dark lines.
	   The icon is scaled rather than resized so Max Mega Menu's
	   open/close (X) animation geometry stays intact. */
	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle {
		height: 44px;
		line-height: 44px;
		background: transparent;
	}

	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle :is(.mega-toggle-blocks-left, .mega-toggle-blocks-center, .mega-toggle-blocks-right) {
		padding: 0;
	}

	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
		width: 44px;
		height: 44px;
		border-radius: 12px;
		background-color: #fdeef2;
		transition: background-color 0.2s ease;
	}

	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated {
		background-color: var(--jic-main-color);
	}

	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box {
		transform: scale(0.6);
	}

	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
	.elementor-location-header #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
		background-color: #303030;
	}

	/* Soft shadow once the sticky header starts following the page */
	.elementor-location-header .elementor-sticky--effects {
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	}
}

/* Very narrow phones: tighten the button so the bar never overflows */
@media (max-width: 360px) {
	.elementor-location-header .elementor-widget-pushable_button_widget .pushable.mix-color .front {
		padding: 4px 10px;
		font-size: 1rem;
	}
}

.news-block {
	text-align: right;
}
.text-abyad p {
	font-family: "Beiruti", Sans-serif;
	color: #ffffff;
}

/* kabse 3d style */
.pushable {
	position: relative;
	display: block;
	width: fit-content;
	margin: auto;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	clear: both;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}
.shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	transform: translateY(2px);
	transition: all 0.3s ease;
}
.pushable.green-color .front {
	background: #65c1c4;
}
.pushable.green-color .edge {
	background: #157a7e;
}
.edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: #982941;
	transition: all 0.3s ease;
}
.front {
	display: block;
	position: relative;
	padding: 12px 42px;
	border-radius: 12px;
	font-family: "Beiruti", Sans-serif;
	font-size: 1.25rem;
	color: white;
	background: #f194a8;
	transform: translateY(-4px);
	transition: all 0.3s ease;
}
.pushable.mix-color .front {
	padding: 4px 15px;
	text-wrap: nowrap;
	border-radius: 5px;
	font-size: 1.2rem;
}
.pushable.mix-color .edge, .pushable.mix-color .shadow {
	border-radius: 5px;
}
.pushable.mix-color:hover .front {
	background: #65c1c4;
}
.pushable.mix-color:hover .edge {
	background: #157a7e;
}

.pushable.greenmix-color .front {
	background: #65c1c4;
	padding: 4px 15px;
	text-wrap: nowrap;
	border-radius: 5px;
	font-size: 1.2rem;
}
.pushable.greenmix-color .edge, .pushable.greenmix-color .shadow {
	background: #157a7e;
	border-radius: 5px;
}

.pushable:hover .front {
	transform: translateY(-6px);
}
.pushable:hover .shadow {
	transform: translateY(4px);
}
.pushable:active .front {
	transform: translateY(-2px);
}
.pushable:active .shadow {
	transform: translateY(1px);
}

.pushable:focus:not(:focus-visible) {
	outline: none;
}