/* DenizKozmetik header overrides (RTL): force hamburger on all sizes and align controls */
.header-area .main-menu { display: none !important; }

.main-header .header-bar { display: flex; align-items: center; justify-content: space-between; direction: rtl; }

.main-header .header-left { display: flex; align-items: center; }

/* Ensure hamburger icon always visible */
.header-area .side-menu-open { display: inline-flex !important; align-items: center; justify-content: center; }

/* Tweak search dropdown to align icon button appearance */
.header-area .search-dropdown > .dropdown-toggle { background: transparent; border: 0; padding: 0; line-height: 1; }

/* Hero slider sizing: cap at 700px and scale down on smaller screens */
.hero-area .hero-item {
	height: 70vh;
	max-height: 800px;
	min-height: 320px;
	background-size: cover !important;
	background-position: center center !important;
	display: flex;
	align-items: center;
}

@media (max-width: 991.98px) {
	.hero-area .hero-item {
		height: 62vh;
		max-height: 520px;
		min-height: 280px;
	}
}

@media (max-width: 767.98px) {
	.hero-area .hero-item {
		height: 45vh;
		max-height: 400px;
		min-height: 240px;
	}
}

/* Hero slider nav: modern, bigger arrows, no background (RTL positions swapped) */
.hero-area .owl-theme-styled .owl-nav {
	position: absolute;
	top: 42%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: block;
	pointer-events: auto;
}
.hero-area .owl-theme-styled .owl-dots {
	position: absolute;
	bottom: 15px;
	left: 60px;
	display: flex !important;
	gap: 8px;
}

.hero-area .owl-theme-styled .owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	background: rgba(255,255,255,0.6);
}

.hero-area .owl-theme-styled .owl-dots .owl-dot.active span,
.hero-area .owl-theme-styled .owl-dots .owl-dot:hover span {
	background: #F66B5D;
}

.hero-area .owl-theme-styled .owl-nav button.owl-prev,
.hero-area .owl-theme-styled .owl-nav button.owl-next {
	background: transparent !important;
	box-shadow: none !important;
	width: auto;
	height: auto;
	line-height: 1 !important;
	border: none;
	pointer-events: auto;
	position: absolute;
}

/* In RTL, previous sits on the right, next on the left */
.hero-area .owl-theme-styled .owl-nav button.owl-prev { right: 16px; }
.hero-area .owl-theme-styled .owl-nav button.owl-next { left: 16px; }

.hero-area .owl-theme-styled .owl-nav i {
	font-size: 44px !important;
	color: #fff !important;
}

.hero-area .owl-theme-styled .owl-nav button:hover i {
	color: #F66B5D !important; /* primary accent on hover */
}

/* Align hero content to right on RTL */
.hero-area .hero-item .container { display: flex; }
/* Ensure hero text aligns to the right in RTL */
.hero-area .hero-content h2, .hero-area .hero-content p, .hero-area .hero-btns { text-align: right !important; }

/* Play/Pause toggle styling */
.hero-area { position: relative; }
	.hero-area .hero-play-toggle {
		position: absolute;
		bottom: 8px;
		left: 15px;
		width: 36px;
		height: 36px;
		border: none;
		background: transparent;
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 99;
	}

.hero-area .hero-play-toggle i { font-size: 16px; }
.hero-area .hero-play-toggle:hover i { color: #F66B5D; }

/* CTA button bottom-center */
	.hero-area .hero-cta {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9;
		position: absolute;
		bottom: 36px;
		left: 50%;
		transform: translateX(-50%);
		padding: 5px 24px;
		font-size: 14px;
		border-radius: 999px;
		border: 1px solid rgba(255,255,255,0.9);
		color: #fff;
		background: rgba(0,0,0,0.15);
		backdrop-filter: blur(2px);
		text-decoration: none;
		font-weight: 500;
		transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
		animation: hero-cta-pulse 2.2s ease-in-out infinite;
	}
	
	.hero-area .hero-cta i {
		font-size: 12px;
	}

.hero-area .hero-cta:hover {
	color: #F66B5D;
	border-color: #F66B5D;
	background: rgba(0,0,0,0.2);
	transform: translateX(-50%) translateY(-1px);
}

@keyframes hero-cta-pulse {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(-3px); }
}