/* ==========================================================
   Our Meals – Animated Widget (Little Ayub)
   All values below are fallbacks; the Elementor panel overrides them.
   ========================================================== */

.om8c-wrap {
	--om8c-gspeed: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 340px;
	padding: 50px 20px;
	overflow: hidden;
	background-color: #FDFBF3;
	isolation: isolate;
}

.om8c-wrap *,
.om8c-wrap *::before,
.om8c-wrap *::after {
	box-sizing: border-box;
}

/* ---------- Text content ---------- */

.om8c-content {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 820px;
	text-align: center;
}

.om8c-heading {
	margin: 0 0 4px;
	padding: 0;
	color: #0B5134;
	font-family: "Chewy", "Baloo 2", "Comic Sans MS", cursive;
	font-size: 96px;
	font-weight: 400;
	line-height: 1.05;
	overflow-wrap: break-word;
}

.om8c-heading a {
	color: inherit;
	text-decoration: none;
	transition: color .25s ease;
}

.om8c-underline {
	--om8c-ul-thick: 7px;
	position: relative;
	width: 520px;
	max-width: 100%;
	color: #F9C21A;
	line-height: 0;
}

.om8c-underline svg {
	display: block;
	width: 100%;
	height: calc(var(--om8c-ul-thick) * 3);
	overflow: visible;
}

.om8c-underline svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--om8c-ul-thick);
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.om8c-underline svg .om8c-ul-2 {
	stroke-width: calc(var(--om8c-ul-thick) * .45);
	opacity: .55;
}

.om8c-underline img {
	display: block;
	width: 100%;
	height: auto;
}

.om8c-desc {
	max-width: 760px;
	margin: 18px 0 0;
	color: #0F5A3B;
	font-family: "Nunito", "Quicksand", sans-serif;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.5;
}

.om8c-desc p { margin: 0; }
.om8c-desc p + p { margin-top: .6em; }

/* ---------- Decorative elements ----------
   .om8c-el        -> position + size (left/top = centre point)
   .om8c-el__rot   -> rotation, flip, opacity
   .om8c-el__hover -> hover animation
   .om8c-el__anim  -> continuous animation
   (separate layers = no conflict between position, rotation & scaling)
------------------------------------------- */

.om8c-el {
	--om8c-r: 0deg;
	--om8c-fx: 1;
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 100px;
	line-height: 0;
	transform: translate(-50%, -50%);
}

.om8c-el__rot {
	transform: rotate(var(--om8c-r)) scaleX(var(--om8c-fx));
	transform-origin: center;
}

.om8c-el__hover {
	transform-origin: center;
	animation-duration: .8s;
	animation-timing-function: ease;
	animation-fill-mode: both;
	animation-iteration-count: 1;
}

.om8c-el__anim {
	transform-origin: center;
	animation-name: none;
	animation-duration: calc(var(--om8c-dur, 4s) / (var(--om8c-speed, 1) * var(--om8c-gspeed, 1)));
	animation-delay: var(--om8c-delay, 0s);
	animation-iteration-count: var(--om8c-iter, infinite);
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	backface-visibility: hidden;
	will-change: transform;
}

.om8c-el__buzz {
	animation-name: none;
	animation-duration: .22s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.om8c-el__link { display: block; }

.om8c-el__media img,
.om8c-el__media svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: contain;
}

.om8c-el__media svg { overflow: visible; }

/* Desktop fallbacks (overridden by the panel) */
.om8c-el--cloud-left  { left: 9%;  top: 62%; width: 20%; }
.om8c-el--cloud-right { left: 97%; top: 84%; width: 13%; --om8c-fx: -1; }
.om8c-el--heart-left  { left: 22%; top: 46%; width: 70px; --om8c-r: -8deg; z-index: 2; }
.om8c-el--heart-right { left: 74.5%; top: 30%; width: 58px; --om8c-r: 10deg; z-index: 2; }
.om8c-el--sun         { left: 93%; top: 20%; width: 150px; }
.om8c-el--bird        { left: 82%; top: 52%; width: 170px; z-index: 3; }
.om8c-el--trail       { left: 89%; top: 72%; width: 200px; z-index: 2; }

/* ---------- Built-in illustrations ---------- */

/* Bird */
.om8c-svg--bird path,
.om8c-svg--bird ellipse {
	stroke: #1E3A5F;
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.om8c-svg--bird .om8c-bird-body      { fill: var(--om8c-c1, #62C1EC); }
.om8c-svg--bird .om8c-bird-belly     { fill: var(--om8c-c3, #FFF4E8); stroke: none; }
.om8c-svg--bird .om8c-bird-tail,
.om8c-svg--bird .om8c-bird-wing-fill { fill: var(--om8c-c2, #4FB0E6); }
.om8c-svg--bird .om8c-bird-feather   { fill: none; stroke-width: 2; opacity: .7; }
.om8c-svg--bird .om8c-bird-beak      { fill: #F7A02A; }
.om8c-svg--bird .om8c-bird-eye,
.om8c-svg--bird .om8c-bird-tuft      { fill: none; stroke-width: 3.5; }
.om8c-svg--bird .om8c-bird-cheek     { fill: #F6A5A5; stroke: none; opacity: .85; }
.om8c-svg--bird .om8c-bird-legs path { fill: none; stroke: #E8862A; stroke-width: 3; }
.om8c-svg--bird .om8c-bird-lines path {
	fill: none;
	stroke: #F6B71E;
	stroke-width: 3.5;
	stroke-linecap: round;
}
.om8c-svg--bird .om8c-bird-lines {
	animation: om8cBlink 1.2s ease-in-out infinite;
}
.om8c-bird-wing {
	transform-box: fill-box;
	transform-origin: 0% 85%;
	animation-name: none;
	animation-duration: var(--om8c-wing-dur, .35s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

/* Sun */
.om8c-svg--sun .om8c-sun-rays line {
	stroke: var(--om8c-c1, #FFC52E);
	stroke-width: 9;
	stroke-linecap: round;
}
.om8c-svg--sun .om8c-sun-core  { fill: var(--om8c-c1, #FFC52E); }
.om8c-svg--sun .om8c-sun-shine { fill: #fff; opacity: .25; }

/* Heart */
.om8c-svg--heart path {
	fill: none;
	stroke: var(--om8c-c1, #F6B71E);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Cloud */
.om8c-svg--cloud .om8c-cloud-body { fill: var(--om8c-c1, #CFEAF8); opacity: .9; }
.om8c-svg--cloud .om8c-cloud-soft { fill: #fff; opacity: .22; }
.om8c-svg--cloud .om8c-cloud-arc  {
	fill: none;
	stroke: #fff;
	stroke-width: 4;
	stroke-linecap: round;
	opacity: .85;
}

/* Dotted trail */
.om8c-svg--trail .om8c-trail-dash {
	fill: none;
	stroke: var(--om8c-c1, #F6B71E);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-dasharray: 10 9;
	stroke-dashoffset: 0;
}
.om8c-svg--trail .om8c-trail-maskpath {
	fill: none;
	stroke: #fff;
	stroke-width: 16;
	stroke-linecap: round;
	stroke-dasharray: 100 100;
	stroke-dashoffset: 0;
}
.om8c-trail-fx-march .om8c-trail-dash,
.om8c-trail-fx-both .om8c-trail-dash {
	animation: om8cMarch var(--om8c-trail-dur, 2.5s) linear infinite;
}
.om8c-trail-fx-draw .om8c-trail-maskpath,
.om8c-trail-fx-both .om8c-trail-maskpath {
	animation: om8cDraw calc(var(--om8c-trail-dur, 2.5s) * 2.4) ease-in-out infinite;
}

/* ---------- Keyframes (transform-only = smooth & lightweight) ---------- */

@keyframes om8cFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, calc(var(--om8c-int, 12px) * -1), 0); }
}

@keyframes om8cDrift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(var(--om8c-int, 12px), 0, 0); }
}

@keyframes om8cHover {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(calc(var(--om8c-deg, 4deg) * -.6)); }
	25%      { transform: translate3d(calc(var(--om8c-int, 12px) * .5), calc(var(--om8c-int, 12px) * -1), 0) rotate(calc(var(--om8c-deg, 4deg) * .4)); }
	50%      { transform: translate3d(var(--om8c-int, 12px), calc(var(--om8c-int, 12px) * -.35), 0) rotate(var(--om8c-deg, 4deg)); }
	75%      { transform: translate3d(calc(var(--om8c-int, 12px) * .35), calc(var(--om8c-int, 12px) * -.8), 0) rotate(0deg); }
}

@keyframes om8cPulse {
	0%, 70%, 100% { transform: scale(var(--om8c-smin, .92)); }
	14%           { transform: scale(var(--om8c-smax, 1.1)); }
	28%           { transform: scale(var(--om8c-smin, .92)); }
	42%           { transform: scale(var(--om8c-smax, 1.1)); }
}

@keyframes om8cZoom {
	0%, 100% { transform: scale(var(--om8c-smin, .94)); }
	50%      { transform: scale(var(--om8c-smax, 1.06)); }
}

@keyframes om8cSpin {
	0%   { transform: rotate(0deg); animation-timing-function: linear; }
	100% { transform: rotate(360deg); }
}

@keyframes om8cSpinBreathe {
	0%   { transform: rotate(0deg) scale(var(--om8c-smin, .95)); animation-timing-function: linear; }
	50%  { transform: rotate(180deg) scale(var(--om8c-smax, 1.06)); animation-timing-function: linear; }
	100% { transform: rotate(360deg) scale(var(--om8c-smin, .95)); }
}

@keyframes om8cSwing {
	0%, 100% { transform: rotate(calc(var(--om8c-deg, 6deg) * -1)); }
	50%      { transform: rotate(var(--om8c-deg, 6deg)); }
}

@keyframes om8cBounce {
	0%, 50%, 80%, 100% { transform: translate3d(0, 0, 0); }
	30% { transform: translate3d(0, calc(var(--om8c-int, 12px) * -1), 0); }
	65% { transform: translate3d(0, calc(var(--om8c-int, 12px) * -.4), 0); }
}

@keyframes om8cBuzz {
	0%, 100% { transform: translate3d(0, 0, 0); }
	25% { transform: translate3d(var(--om8c-buzz, .8px), calc(var(--om8c-buzz, .8px) * -1), 0); }
	50% { transform: translate3d(calc(var(--om8c-buzz, .8px) * -1), 0, 0); }
	75% { transform: translate3d(0, var(--om8c-buzz, .8px), 0); }
}

@keyframes om8cWing {
	0%, 100% { transform: rotate(-6deg); }
	50%      { transform: rotate(16deg); }
}

@keyframes om8cBlink {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

@keyframes om8cMarch {
	to { stroke-dashoffset: -38; }
}

@keyframes om8cDraw {
	0%   { stroke-dashoffset: 100; }
	55%  { stroke-dashoffset: 0; }
	80%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -100; }
}

/* Hover animations */
@keyframes om8cHGrow  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes om8cHJump  { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } 70% { transform: translateY(-4px); } }
@keyframes om8cHShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes om8cHSpin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes om8cHJello { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.2, .85); } 50% { transform: scale(.9, 1.12); } 70% { transform: scale(1.06, .96); } }

/* Paused while off-screen (set by script.js) */
.om8c-wrap.om8c-is-paused .om8c-el,
.om8c-wrap.om8c-is-paused .om8c-el * {
	animation-play-state: paused !important;
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.om8c-wrap .om8c-el,
	.om8c-wrap .om8c-el * {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Responsive fallbacks ---------- */

@media (max-width: 1024px) {
	.om8c-heading { font-size: 68px; }
	.om8c-desc    { font-size: 20px; max-width: 560px; }
	.om8c-underline { width: 380px; }
	.om8c-el--cloud-left  { left: 9%;  top: 66%; width: 26%; }
	.om8c-el--cloud-right { left: 96%; top: 86%; width: 16%; }
	.om8c-el--heart-left  { left: 14%; top: 40%; width: 52px; }
	.om8c-el--heart-right { left: 78%; top: 26%; width: 46px; }
	.om8c-el--sun         { left: 91%; top: 18%; width: 115px; }
	.om8c-el--bird        { left: 88%; top: 56%; width: 120px; }
	.om8c-el--trail       { left: 88%; top: 74%; width: 150px; }
}

@media (max-width: 767px) {
	.om8c-wrap      { min-height: 680px; padding: 190px 20px 300px; }
	.om8c-heading   { font-size: 56px; }
	.om8c-desc      { font-size: 17px; max-width: 340px; }
	.om8c-underline { width: 270px; }
	.om8c-el--cloud-left  { left: 24%; top: 79%; width: 58%; }
	.om8c-el--cloud-right { left: 82%; top: 92%; width: 46%; }
	.om8c-el--heart-left  { left: 20%; top: 21%; width: 42px; }
	.om8c-el--heart-right { left: 91%; top: 59%; width: 38px; }
	.om8c-el--sun         { left: 84%; top: 14%; width: 105px; }
	.om8c-el--bird        { left: 66%; top: 68%; width: 120px; }
	.om8c-el--trail       { left: 86%; top: 76%; width: 100px; }
}