/* Professional business theme */
:root {
	--brand-900: #0f2742;
	--brand-700: #1f4f7a;
	--brand-500: #2f6fa3;
	--ink-900: #132033;
	--ink-700: #31445f;
	--surface-1: #f4f1eb;
	--surface-2: #fbf8f3;
	--line: #d6dde8;
	--glow: rgba(31, 79, 122, 0.18);
}

html { scroll-behavior: smooth; }

body {
	background:
		radial-gradient(1200px 500px at 15% -10%, rgba(47, 111, 163, 0.16), transparent 70%),
		radial-gradient(900px 400px at 90% -10%, rgba(15, 39, 66, 0.10), transparent 70%),
		linear-gradient(180deg, var(--surface-2), var(--surface-1));
	color: var(--ink-900);
}

/* Use highly readable premium fonts for a modern architectural feel */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size:16rem; font-size: 16px; line-height: 1.62; }

h1, h2, h3, h4, .hero-text #heroTitle, .card h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	letter-spacing: -0.01em;
}

#leftSidebar,
aside.md\:col-span-2.bg-white {
	background: linear-gradient(180deg, #ffffff, #f7fafc);
	border-color: var(--line);
}

header {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-color: var(--line);
}

h1 {
	letter-spacing: 0.01em;
}

.card img{transition:transform .45s ease, filter .3s ease; object-fit:cover; object-position:center center}
.card:hover img{transform:scale(1.02);filter:brightness(.98)}

.card {
	border: 1px solid rgba(20,36,50,0.06);
	box-shadow: 0 6px 18px rgba(15, 39, 66, 0.06);
	background: #ffffff;
	transition: box-shadow .28s ease, transform .28s ease;
}

.card:hover {
	box-shadow: 0 12px 28px rgba(15, 39, 66, 0.12);
	transform: translateY(-6px);
}

/* Ensure view button aligns at the bottom of each card */
.card{display:flex;flex-direction:column}
.card > .p-4{display:flex;flex-direction:column;flex:1;padding:1.25rem}
.card > .p-4 > .mt-4{margin-top:auto}

/* make image panel taller and cleaner */
.card .w-full.h-56{height:16rem}
.card .w-full.h-56 img{object-fit:cover; object-position:center center}

/* typography tweaks for premium feel */
.card h3{font-size:1.25rem;line-height:1.3;color:var(--ink-900);font-weight:600}
.card p{color:var(--ink-700);font-size:0.98rem;line-height:1.6}

/* reduce button footprint slightly */
.view-btn{padding:.5rem .9rem;font-size:.95rem;font-weight:600}

.filter-btn {
	border: 1px solid var(--line);
	background: #ffffff;
	color: var(--ink-700);
}

.filter-btn:hover {
	border-color: var(--brand-500);
	color: var(--brand-700);
	box-shadow: 0 4px 16px var(--glow);
}

.filter-btn[aria-pressed="true"],
.filter-btn.active {
	background: linear-gradient(180deg, #edf4fb, #e6f0fb);
	border-color: var(--brand-500);
	color: var(--brand-700);
}

.view-btn {
	background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
	color: #f8fbff;
	border: 1px solid transparent;
	box-shadow: 0 10px 20px rgba(15, 39, 66, 0.18);
}

.view-btn:hover {
	background: linear-gradient(135deg, #12365b, #29679a);
	box-shadow: 0 14px 26px rgba(15, 39, 66, 0.26);
}

.hero-slides {
	position: relative;
	width: 100%;
	height: clamp(18rem, 45vw, 28rem);
}

.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: translateX(30px) scale(1.02);
	transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide.active {
	opacity: 1;
	transform: translateX(0) scale(1);
}

/* Improve hero readability: stronger overlay and text shadow */
.hero-overlay {
	z-index: 1;
	background: linear-gradient(to top, rgba(2,6,23,0.88) 0%, rgba(2,6,23,0.55) 30%, rgba(2,6,23,0.22) 55%, transparent 75%);
}
.hero-text {
	z-index: 2;
}
.hero-text #heroTitle {
	text-shadow: 0 8px 30px rgba(2,6,23,0.6);
	color: #ffffff;
	font-size: clamp(1.5rem, 4vw, 2.75rem);
}
.hero-text p {
	color: #f1f5f9;
	text-shadow: 0 4px 18px rgba(2,6,23,0.45);
}
.hero-nav { /* make nav slightly more visible on dark overlay */
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.28);
}

.hero-nav {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.85rem;
}

.hero-nav:hover {
	background: rgba(255, 255, 255, 0.3);
}

.social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid var(--line);
	color: var(--ink-700);
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: 0 8px 18px rgba(15, 39, 66, 0.08);
}

.social-btn:hover {
	color: var(--brand-700);
	border-color: var(--brand-500);
}

/* Floating and shimmer for WhatsApp floating button */
#whatsappFloat { /* keep existing fixed placement, add float animation */
	animation: floatY 3s ease-in-out infinite;
}
#whatsappFloat:focus, #whatsappFloat:hover { outline: none; }

.whatsapp-btn { position: relative; display: inline-block; z-index: 45; }
.whatsapp-btn { transition: transform .18s ease, box-shadow .18s ease; }

/* gentle vertical floating */
@keyframes floatY {
	0% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
	100% { transform: translateY(0); }
}

/* glowing pulse shadow to suggest activity */
@keyframes whatsappGlow {
	0% { box-shadow: 0 6px 18px rgba(37,211,102,0.08), 0 0 0 rgba(37,211,102,0); transform: scale(1); }
	50% { box-shadow: 0 14px 36px rgba(37,211,102,0.22), 0 0 30px rgba(37,211,102,0.08); transform: scale(1.03); }
	100% { box-shadow: 0 6px 18px rgba(37,211,102,0.08), 0 0 0 rgba(37,211,102,0); transform: scale(1); }
}
.whatsapp-btn { animation: whatsappGlow 2.8s ease-in-out infinite; }

/* subtle shimmer sweep across the button */
.whatsapp-btn::before {
	content: '';
	position: absolute;
	left: -120%; top: -10%;
	width: 40%; height: 120%;
	background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
	transform: rotate(25deg) translateX(0);
	opacity: 0.0;
	pointer-events: none;
}
@keyframes whatsappShine {
	0% { transform: rotate(25deg) translateX(-120%); opacity: 0; }
	40% { opacity: 0.25; }
	50% { transform: rotate(25deg) translateX(10%); opacity: 0.9; }
	100% { transform: rotate(25deg) translateX(160%); opacity: 0; }
}
.whatsapp-btn { overflow: visible; }
.whatsapp-btn.shimmering::before { animation: whatsappShine 2.2s ease-in-out infinite; }

/* pause shimmer on hover for clarity */
#whatsappFloat:hover .whatsapp-btn { animation-play-state: paused; }
#whatsappFloat:hover .whatsapp-btn.shimmering::before { animation-play-state: paused; opacity: 0.9; }

/* Floating and shimmer for Instagram floating button (match WhatsApp behavior) */
#instagramFloat { animation: floatY 3s ease-in-out infinite; }
#instagramFloat:focus, #instagramFloat:hover { outline: none; }

.instagram-btn { position: relative; display: inline-block; z-index: 45; }
.instagram-btn { transition: transform .18s ease, box-shadow .18s ease; }

@keyframes instagramGlow {
	0% { box-shadow: 0 6px 18px rgba(225,48,108,0.06), 0 0 0 rgba(225,48,108,0); transform: scale(1); }
	50% { box-shadow: 0 14px 36px rgba(225,48,108,0.20), 0 0 30px rgba(225,48,108,0.06); transform: scale(1.03); }
	100% { box-shadow: 0 6px 18px rgba(225,48,108,0.06), 0 0 0 rgba(225,48,108,0); transform: scale(1); }
}
.instagram-btn { animation: instagramGlow 2.8s ease-in-out infinite; }

/* reuse the whatsapp shimmer sweep animation for Instagram */
.instagram-btn::before {
	content: '';
	position: absolute;
	left: -120%; top: -10%;
	width: 40%; height: 120%;
	background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
	transform: rotate(25deg) translateX(0);
	opacity: 0.0;
	pointer-events: none;
}
.instagram-btn.shimmering::before { animation: whatsappShine 2.2s ease-in-out infinite; }

/* pause shimmer on hover for clarity */
#instagramFloat:hover .instagram-btn { animation-play-state: paused; }
#instagramFloat:hover .instagram-btn.shimmering::before { animation-play-state: paused; opacity: 0.9; }

footer {
	background: linear-gradient(180deg, #eef3f8, #e6edf4) !important;
	border-color: var(--line) !important;
}

#imageModal > div {
	border: 1px solid #d8e2ee;
	box-shadow: 0 24px 70px rgba(15, 39, 66, 0.35);
}

/* responsive tweaks for iframe map */
.map-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border:1px solid #cfdae7}
.map-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;filter:saturate(0.92) contrast(1.02)}

/* small utility override for container max width */
.container{max-width:1240px}

/* Left mobile menu (slide-in) */
#mobileMenu { display: none; }
@media (max-width: 767px) {
	#mobileMenu { display: block; position: fixed; inset: 0 0 0 0; background: rgba(2,6,23,0.6); z-index: 40; }
	#mobileMenu .panel { background:white; width:260px; height:100%; padding:1rem; }
}

/* Video gallery styles */
#videoGallery { background: #fff; }
#videoGallery .video-card { transition: transform .22s ease, box-shadow .22s ease; }
#videoGallery .video-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,39,66,0.08); }
#videoGallery .video-thumb { position: relative; display: block; width: 100%; }
#videoGallery .video-thumb img { width: 100%; height: clamp(7.5rem, 10vw, 12rem); object-fit: cover; display: block; }
#videoGallery .play-overlay { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,0.5); color: #fff; padding: .35rem .5rem; border-radius: 6px; font-weight:700; }
#videoGallery .p-3 { padding-top: .6rem; padding-bottom: .6rem; }

/* Make video cards larger and readable on small and large screens */
#videoGallery .video-card video { width: 100%; height: clamp(180px, 28vw, 340px); object-fit: cover; display: block; }
#videoGallery .video-meta { padding-top: .6rem; padding-bottom: .6rem; }

/* Slightly larger thumbs in modal and more visible on small screens */
#modalVideoThumbs .thumb { width: 120px; height: 72px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; }

@media (max-width: 639px) {
	#videoGallery .video-card video { height: 220px; }
	#videoGallery .video-thumb img { height: 220px; }
	#modalVideoThumbs .thumb { width: 96px; height: 56px; }
}

/* prominent hero watch button */
.watch-btn { box-shadow: 0 14px 36px rgba(236,72,153,0.16); transition: transform .18s ease, box-shadow .18s ease; }
.watch-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 22px 48px rgba(236,72,153,0.2); }

/* Attention-grabbing animation for CTA buttons (subtle pulse + ring) */
.attract { position: relative; z-index: 2; animation: attractFloat 3.6s ease-in-out infinite; }
.attract:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.01); }
.attract::before {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 100%; height: 100%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	box-shadow: 0 0 0 0 rgba(59,130,246,0.18);
	pointer-events: none;
}
@keyframes attractFloat {
	0% { transform: translateY(0) scale(1); }
	45% { transform: translateY(-3px) scale(1.02); }
	80% { transform: translateY(0) scale(1); }
}
@keyframes attractRing {
	0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.18); opacity: 0.9; }
	70% { box-shadow: 0 18px 40px 18px rgba(59,130,246,0.06); opacity: 0; }
	100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); opacity: 0; }
}
.attract.ring::before { animation: attractRing 2.6s ease-out infinite; }

/* video modal styles */
#videoModal { display: none; }
#videoModal.flex { display: flex; }
#videoModal .rounded-lg { max-height: calc(100vh - 6rem); }
#modalVideo { max-height: 60vh; }
#modalVideoThumbs { background: #fff; }
#modalVideoThumbs .thumb { width: 96px; height: 56px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
#modalVideoThumbs .thumb.active { border-color: var(--brand-500); box-shadow: 0 8px 20px rgba(31,79,122,0.08); }