:root{
	--bg: #fbfafa; /* slight off-white */
	--bg-overlay: rgba(0,0,0,0.02);
	--accent: #c82333; /* red */
	--muted: #666;
	--max-width: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: 'Noto Sans SC', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:#111; scroll-behavior:smooth}
/* Reserve scrollbar space to avoid layout shift when it appears/disappears */
html{scrollbar-gutter:stable}
body{overflow-y:scroll}

:root{
	--bg: #ffffff; /* pure white to match logo */
	--surface: #ffffff;
	--text: #111111;
	--muted: #666666;
	--accent: #c82333; /* red */
	--max-width: 1100px;
	--bg-overlay: rgba(0,0,0,0.02);
}
/* Page transition states with enhanced smooth scroll */
html{
  scroll-behavior:smooth;
  scroll-padding-top:80px; /* Offset for sticky header */
}
html,body{
  height:100%;
  margin:0;
  font-family: 'Noto Sans SC', 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
  background:var(--bg); 
  color:var(--text); 
  transition:background 0.3s ease, color 0.3s ease;
}
/* Smooth momentum scrolling on iOS */
body{
  -webkit-overflow-scrolling:touch;
  position:relative;
  overflow-x:hidden;
  min-width:320px;
  width:100%;
}
/* Ensure all direct children respect the body width */
body > *{
  max-width:100%;
  overflow-x:hidden;
}
/* Animated background decorations */
body::before,
body::after{
  content:'';
  position:fixed;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
/* Main gradient blobs */
body::before{
  width:600px;
  height:600px;
  background:radial-gradient(circle at 30% 50%, var(--accent), transparent 65%);
  top:calc(-150px - var(--scroll-offset, 0px) * 0.5);
  right:-150px;
  opacity:0.12;
  border-radius:50%;
  animation:float-1 25s ease-in-out infinite;
}
body::after{
  width:700px;
  height:700px;
  background:radial-gradient(circle at 70% 50%, var(--accent), transparent 60%);
  bottom:calc(-250px + var(--scroll-offset, 0px) * 0.3);
  left:-250px;
  opacity:0.1;
  border-radius:50%;
  animation:float-2 30s ease-in-out infinite;
}
/* Decorative subtle gradient waves */
.container::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg, transparent 0%, rgba(200,35,51,0.005) 50%, transparent 100%);
  pointer-events:none;
  z-index:0;
}
@keyframes float-1{
  0%, 100%{transform:translate(0, 0) rotate(0deg)}
  33%{transform:translate(40px, 30px) rotate(5deg)}
  66%{transform:translate(-20px, 50px) rotate(-3deg)}
}
@keyframes float-2{
  0%, 100%{transform:translate(0, 0) rotate(0deg)}
  33%{transform:translate(-30px, -40px) rotate(-4deg)}
  66%{transform:translate(30px, -20px) rotate(3deg)}
}
html.theme-dark body::before,
html.theme-dark body::after{
  opacity:0.18;
}
html.theme-dark .container::before{
  background:linear-gradient(135deg, transparent 0%, rgba(200,35,51,0.01) 50%, transparent 100%);
  opacity:0.1;
}
/* Ensure content is above background decorations */
.site-header,
main,
footer{
  position:relative;
  z-index:1;
}
/* page-level transition uses opacity only to avoid subpixel transform shifts */
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem;display:flex;align-items:center;gap:0.5rem}
.controls{display:flex;align-items:center;gap:0.6rem}
.main-nav{display:flex;align-items:center;overflow:visible}
.main-nav a{margin:0 0.5rem;color:var(--text);text-decoration:none;font-weight:500}
.nav-dropdown{position:relative;display:inline-block;z-index:2001}
.nav-dropdown > a{margin:0 0.5rem;color:var(--text);text-decoration:none;font-weight:500}
.dropdown-menu{position:absolute;top:100%;left:0;background:var(--surface);min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.12);border-radius:8px;padding:0.5rem 0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s cubic-bezier(0.25,0.1,0.25,1);z-index:2002;margin-top:0.5rem}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:0.7rem 1.2rem;color:var(--text);text-decoration:none;font-weight:500;margin:0;transition:background 0.2s ease}
.dropdown-menu a:hover{background:rgba(200,35,51,0.08);color:var(--accent)}

/* Mobile hamburger menu */
.hamburger-menu{display:none;background:transparent;border:none;cursor:pointer;padding:0.5rem;z-index:2003}
.hamburger-menu span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;transition:all 0.3s ease}
.hamburger-menu.active span:nth-child(1){transform:rotate(45deg) translate(7px, 7px)}
.hamburger-menu.active span:nth-child(2){opacity:0}
.hamburger-menu.active span:nth-child(3){transform:rotate(-45deg) translate(6px, -6px)}
html.page-enter{opacity:0}
html.page-exit{opacity:0.7;transition:opacity 0.3s ease}
.lang-btn{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:600}
.lang-btn.active{background:var(--accent);color:white;border-color:var(--accent)}

.theme-btn{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:6px 8px;border-radius:8px;cursor:pointer;font-size:16px}

.point-card{background:var(--surface);border:1px solid rgba(0,0,0,0.06);padding:1.2rem;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.04);transition:transform .18s ease,box-shadow .18s}
/* Per-element entrance animation (staggered) */
.quote-card{flex:1;min-width:260px;padding:1.4rem;border-radius:10px;background:linear-gradient(180deg,var(--surface),var(--surface));border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 24px rgba(0,0,0,0.03);order:2}
.anim-item{opacity:0;transform:translateY(10px);will-change:transform,opacity}
.quote{font-size:1.2rem;margin:0 0 0.6rem;color:var(--text);line-height:1.6}
.author{color:var(--muted);font-weight:600}
.anim-out{animation:anim-slide-down .32s cubic-bezier(.4,0,.2,1) both;}
.site-footer{padding:1.2rem 0;border-top:1px solid rgba(0,0,0,0.06);margin-top:2rem}

@keyframes anim-slide-up{
		from{opacity:0;transform:translateY(60px) scale(0.90)}
		to{opacity:1;transform:translateY(0) scale(1)}
}

.footer-links a{margin-left:0.8rem;color:var(--text);text-decoration:none;transition:color 0.2s ease,opacity 0.2s ease}
.footer-links a:hover{color:var(--accent);opacity:0.9}

.scenery figcaption{margin-top:0.5rem;color:var(--muted);font-size:0.9rem}

/* Dark theme overrides */
html.theme-dark{
	--bg: #0b0b0c; /* page background */
	--surface: #18181b; /* card / surface grey */
	--text: #ececec; /* main text */
	--muted: #bfbfbf; /* secondary text */
	--accent: #ff5960; /* brighter red for contrast */
	--bg-overlay: rgba(255,255,255,0.02);
	--card-border: rgba(255,255,255,0.04);
}

/* Dark theme component overrides - make white areas grey and boost contrast */
html.theme-dark .site-header{
	background:linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.35));
	border-bottom:1px solid rgba(255,255,255,0.03);
	backdrop-filter:none;
}

html.theme-dark .main-nav a,
html.theme-dark .footer-links a{
	color:var(--text);
}

html.theme-dark .point-card,
html.theme-dark .quote-card{
	background:var(--surface);
	border:1px solid var(--card-border);
	box-shadow: none;
	color:var(--text);
}

html.theme-dark .point-card p,
html.theme-dark .footer-links a{
	color:var(--muted);
}

html.theme-dark .quote{
	color:#aaa;
}

html.theme-dark .site-footer{border-top:1px solid rgba(255,255,255,0.03)}

html.theme-dark .hero{background:linear-gradient(180deg, rgba(255,89,96,0.08), transparent)}
html.theme-dark .cta{background:var(--accent)}
html.theme-dark .brand-text,
html.theme-dark .point-card h3{color:var(--accent)}
html.theme-dark .main-nav a{color:var(--text)}
html.theme-dark .nav-dropdown > a{color:var(--text)}
html.theme-dark .dropdown-menu{background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,0.4)}
html.theme-dark .dropdown-menu a{color:var(--text)}
html.theme-dark .dropdown-menu a:hover{background:rgba(255,89,96,0.15);color:var(--accent)}
html.theme-dark .logo{content:url('../images/ChatGPT Image Dec 17, 2025, 04_15_40 PM.png')}

/* slightly soften previously white-only elements */
html.theme-dark .point-card{
  background:linear-gradient(135deg, rgba(200,35,51,0.08), rgba(200,35,51,0.12));
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  border-color:rgba(200,35,51,0.25);
}
html.theme-dark .point-card::before{
  background:linear-gradient(135deg, transparent, rgba(200,35,51,0.15));
}
html.theme-dark .point-card:hover{
  box-shadow:0 12px 32px rgba(200,35,51,0.25);
  border-color:rgba(200,35,51,0.4);
}

/* Language / theme button visibility in dark mode */
html.theme-dark .lang-btn{
	background:transparent;
	border:1px solid rgba(255,255,255,0.06);
	color:var(--muted);
}
html.theme-dark .lang-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
html.theme-dark .lang-toggle .lang-btn{min-width:44px;text-align:center}

html.theme-dark .theme-btn{
	border:1px solid rgba(255,255,255,0.06);
	color:var(--text);
	background:transparent;
}
@keyframes anim-slide-down{
	from{opacity:1;transform:translateY(0) scale(1)}
	to{opacity:0;transform:translateY(-20px) scale(0.96)}
}

/* allow per-element delay via CSS variable */
/* anim-in: play slide-up animation so elements become visible - much slower */
.anim-in{animation:anim-slide-up 1.2s cubic-bezier(.2,0,.2,1) both;animation-delay:var(--delay,0ms)}
.anim-out{animation:anim-slide-down 0.6s cubic-bezier(.4,0,.2,1) both;animation-delay:var(--delay,0ms)}

/* small performance tweak */
.anim-item, .anim-in, .anim-out{transition-timing-function:linear}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{position:sticky;top:0;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.9));backdrop-filter: blur(6px);border-bottom:1px solid #f0f0f0;z-index:2000;transition:background 0.7s ease, border-bottom 0.7s ease, backdrop-filter 0.7s ease;overflow:visible}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.6rem 0;overflow:visible}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem}
.main-nav a{margin:0 0.5rem;color:#333;text-decoration:none;font-weight:500}
.lang-toggle{display:flex;gap:0.4rem}
.lang-btn{background:transparent;border:1px solid #eee;padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:600;min-width:44px;text-align:center}
.lang-btn.active{background:var(--accent);color:white;border-color:var(--accent)}

.hero{padding:5rem 0;background:linear-gradient(180deg,rgba(200,35,51,0.04),transparent);position:relative;overflow:visible}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);pointer-events:none}
.hero-inner{display:flex;align-items:center;justify-content:center}
.hero-frame{text-align:center;padding:2rem;border-radius:12px;backdrop-filter: blur(2px)}
.logo{height:48px;width:48px;margin-right:0.6rem;vertical-align:middle;transition:all 0.3s ease;object-fit:contain}
.brand-text{font-weight:700;color:var(--accent);margin-left:0.4rem}
.hero-title{font-size:2.2rem;margin:0 0 0.4rem;color:var(--accent)}
.hero-sub{color:var(--muted);margin:0 0 1rem}
.cta{display:inline-block;background:var(--accent);color:white;padding:0.7rem 1.1rem;border-radius:999px;text-decoration:none;font-weight:700;transition:transform .18s ease}
.cta:hover{transform:translateY(-3px)}

.three-points{padding:3rem 0}
.section-title{font-size:1.4rem;color:var(--accent);margin-bottom:1rem}
.points-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.point-card{
  background:linear-gradient(135deg, rgba(200,35,51,0.02), rgba(200,35,51,0.05));
  border:1px solid rgba(200,35,51,0.12);
  padding:1.5rem 1.5rem;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.point-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg, transparent, rgba(200,35,51,0.08));
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}
.point-card:hover::before{
  opacity:1;
}
.point-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 32px rgba(200,35,51,0.15);
  border-color:rgba(200,35,51,0.25);
}
.point-icon{
  font-size:2.5rem;
  margin-bottom:0.8rem;
  line-height:1;
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.point-card:hover .point-icon{
  transform:scale(1.15) rotateY(15deg);
}
.point-card h3{
  margin:0;
  color:var(--accent);
  font-size:1.3rem;
  font-weight:600;
}
.point-card .point-description{
  display:none;
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:0.95rem;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.point-card:hover .point-description{
  display:block;
  opacity:1;
  margin-top:0.8rem;
  transform:translateY(0);
  animation:fadeInDescription 0.4s ease forwards;
}
@keyframes fadeInDescription{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

.quote-section{padding:3rem 0;display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.quote-card{
  flex:1;
  min-width:260px;
  padding:1.4rem;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#fff);
  border:1px solid #f5f5f5;
  box-shadow:0 8px 24px rgba(0,0,0,0.03);
  order:2;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
  will-change:transform;
}
.quote-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.05);
}
.quote{font-size:1.2rem;margin:0 0 0.6rem;color:#222;line-height:1.6}
.author{color:var(--muted);font-weight:600}
.scenery{flex:1.6;min-width:360px;margin:0;order:1;display:flex;flex-direction:column;align-items:center}
.scenery img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid #eee;
  display:block;
  background:#fafafa;
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
  will-change:transform;
}
.scenery img:hover{
  transform:scale(1.03);
  box-shadow:0 12px 40px rgba(0,0,0,0.08);
}
.scenery figcaption{margin-top:0.75rem;color:var(--muted);font-size:0.95rem;text-align:center}
.scenery figcaption{margin-top:0.5rem;color:var(--muted);font-size:0.9rem}

.site-footer{padding:1.2rem 0;border-top:1px solid #f0f0f0;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.footer-links a{margin-left:0.8rem;color:#333;text-decoration:none}

/* Tablet (768px - 1024px) */
@media (max-width:1024px){
	.container{padding:1rem 2rem}
	.scenery{flex:1;min-width:280px}
	.scenery img{max-height:420px}
	.hero-title{font-size:2rem}
}

/* Mobile landscape and small tablets (481px - 768px) */
@media (max-width:768px){
	.container{padding:1.5rem 2rem}
	.header-inner{flex-wrap:wrap;gap:0.8rem;padding:1rem 2rem}
	.main-nav{order:3;width:100%;display:flex;justify-content:center;gap:0.5rem;margin-top:0.5rem;flex-wrap:wrap}
	.main-nav a{font-size:0.9rem;padding:0.5rem 0.8rem}
	.controls{gap:0.5rem}
	.lang-btn{padding:6px 10px;font-size:0.85rem;min-width:42px}
	.theme-btn{padding:6px 8px;font-size:14px}
	.hero-title{font-size:1.9rem;padding:0}
	.hero-sub{font-size:1rem;padding:0}
	.hero{padding:3.5rem 0}
	.quote-section{flex-direction:column;padding:2.5rem 0}
	.scenery{order:2}
	.quote-card{order:1;margin:0}
	.scenery img{height:240px;object-fit:cover;max-height:340px}
	.points-grid{grid-template-columns:1fr;gap:1.2rem;padding:0}
	.point-card{min-height:120px}
	.footer-inner{flex-direction:column;text-align:center;gap:0.8rem}
	.footer-links a{margin:0 0.5rem}
	.site-footer .container{padding:2rem 2rem}
}

/* Mobile portrait (up to 480px) */
@media (max-width:480px){
	.container{padding:1rem 1.5rem}
	.header-inner{padding:0.8rem 1.5rem;flex-wrap:wrap}
	.brand{font-size:1rem}
	.logo{height:42px}
	.brand-text{font-size:0.95rem}
	
	/* Show hamburger menu */
	.hamburger-menu{display:block;order:3;margin-left:auto}
	
	/* Hide navigation by default on mobile */
	.main-nav{display:none;flex-direction:column;width:100%;order:4;margin-top:1rem;background:var(--surface);border-radius:8px;padding:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
	.main-nav.active{display:flex}
	.main-nav a{font-size:0.95rem;padding:0.8rem;margin:0;display:block;border-bottom:1px solid rgba(0,0,0,0.05)}
	.main-nav a:last-child{border-bottom:none}
	
	/* Mobile dropdowns */
	.nav-dropdown{width:100%;position:relative}
	.nav-dropdown > a{display:block;width:100%;padding:0.8rem;margin:0;border-bottom:1px solid rgba(0,0,0,0.05)}
	.dropdown-menu{position:static;box-shadow:none;border:none;margin-top:0;border-radius:0;background:rgba(200,35,51,0.03);padding:0;opacity:1;visibility:visible;transform:none;display:none}
	.nav-dropdown.active .dropdown-menu{display:block}
	.dropdown-menu a{padding:0.7rem 1.5rem;font-size:0.9rem;border-bottom:1px solid rgba(0,0,0,0.05)}
	.dropdown-menu a:last-child{border-bottom:none}
	
	.controls{gap:0.5rem;order:2}
	.lang-btn{padding:5px 9px;font-size:0.82rem;min-width:38px}
	.theme-btn{padding:5px 7px;font-size:13px}
	.hero{padding:2.5rem 1.5rem}
	.hero-title{font-size:1.6rem;margin-bottom:0.8rem;padding:0}
	.hero-sub{font-size:0.95rem;margin-bottom:1rem;padding:0}
	.cta{padding:0.7rem 1.2rem;font-size:0.95rem}
	.section-title{font-size:1.35rem;margin-bottom:1.2rem}
	.point-card{padding:1.2rem;min-height:110px}
	.point-card h3{font-size:1.15rem}
	.point-card .point-description{font-size:0.9rem}
	.quote{font-size:1.08rem}
	.quote-card{padding:1.3rem;margin:0}
	.scenery img{height:200px;max-height:260px}
	.site-footer{padding:1.5rem 0;font-size:0.9rem}
	.site-footer .container{padding:2rem 1.5rem}
	
	/* Add more padding to sections on mobile */
	.three-points{padding:2.5rem 1.5rem}
	.announcements{padding:2.5rem 1.5rem}
	.services-section{padding:2.5rem 1.5rem}
	.announcements-grid{padding:0 0.5rem}
	.services-grid{padding:0 0.5rem}
	.points-grid{padding:0 0.5rem}
	
	main{padding:2rem 0}
}

/* decorative figures */
.decor-shape{position:absolute;left:0;bottom:-1px;width:100%;height:60px;opacity:0.95}


/* entrance animation - enhanced with smoother, much slower reveals */
.reveal{opacity:0;transform:translateY(50px) scale(0.94);transition:opacity 2s cubic-bezier(0.25,0.1,0.25,1),transform 2s cubic-bezier(0.25,0.1,0.25,1)}
.reveal.visible{opacity:1;transform:translateY(0) scale(1)}

/* Scroll-based parallax classes - slower transitions */
.parallax-slow{transition:transform 0.6s ease-out}
.parallax-medium{transition:transform 0.5s ease-out}
.parallax-fast{transition:transform 0.4s ease-out}

/* small utilities */
.hidden{display:none}

/* Announcements section */
.announcements{padding:3rem 0}
.announcements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.announcement-card{background:var(--surface);border:1px solid rgba(0,0,0,0.06);padding:1.5rem;border-radius:12px;text-decoration:none;display:block;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.04);position:relative;overflow:hidden}
.announcement-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent);transform:scaleY(0);transition:transform 0.3s ease;transform-origin:bottom}
.announcement-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.announcement-card:hover::before{transform:scaleY(1);transform-origin:top}
.announcement-date{color:var(--muted);font-size:0.9rem;margin-bottom:0.8rem;font-weight:600}
.announcement-title{color:var(--text);font-size:1.2rem;margin:0 0 0.5rem;font-weight:700;line-height:1.4}
.announcement-arrow{color:var(--accent);font-size:1.5rem;margin-top:0.5rem;transition:transform 0.3s ease}
.announcement-card:hover .announcement-arrow{transform:translateX(4px)}

/* Announcement detail page */
.announcement-page-title{color:var(--text);font-size:clamp(1.8rem,5vw,2.5rem);margin-bottom:2rem;line-height:1.3;font-weight:700}
.announcement-content{background:var(--surface);padding:2rem;border-radius:12px;border-left:4px solid var(--accent);line-height:1.8;font-size:1.1rem;color:var(--text);box-shadow:0 4px 12px rgba(0,0,0,0.04)}
.announcement-content p{margin:0 0 1rem}
.announcement-content p:last-child{margin-bottom:0}
.inline-link{color:var(--accent);text-decoration:none;font-weight:600;border-bottom:2px solid var(--accent);transition:all 0.3s ease;padding-bottom:2px}
.inline-link:hover{background:var(--accent);color:white;padding:2px 6px;border-radius:4px;border-bottom-color:transparent}
.signature{font-weight:600;color:var(--accent);margin-top:2rem !important}
.back-nav{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(200,35,51,0.2)}
.back-link{display:inline-flex;align-items:center;gap:0.5rem;color:var(--accent);text-decoration:none;font-weight:600;transition:all 0.3s ease;padding:0.5rem 1rem;border-radius:8px}
.back-link:hover{background:rgba(200,35,51,0.08);transform:translateX(-4px)}
.arrow-back{transition:transform 0.3s ease;display:inline-block}
.back-link:hover .arrow-back{transform:translateX(-4px)}
.breadcrumb a:hover{color:var(--accent) !important}

/* Dark theme for announcements */
html.theme-dark .announcement-card{background:var(--surface);border:1px solid rgba(255,255,255,0.06);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
html.theme-dark .announcement-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.5)}
html.theme-dark .announcement-content{background:var(--surface);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
html.theme-dark .back-link:hover{background:rgba(255,89,96,0.15)}
html.theme-dark .back-nav{border-top-color:rgba(255,89,96,0.2)}

/* Announcements list page */
.announcements-list{display:flex;flex-direction:column;gap:1.5rem}
.announcements-list .announcement-card{width:100%;max-width:100%}
.view-all-link:hover{opacity:0.7}
.page-header{text-align:center}

/* Mobile responsive for announcements */
@media (max-width:768px){
  .announcements-grid{grid-template-columns:1fr;gap:1.2rem;padding:0}
  .announcement-card{padding:1.3rem 1.5rem}
  .announcement-content{padding:1.5rem;font-size:1rem;line-height:1.7}
  .announcement-page-title{font-size:1.7rem;margin-bottom:1.5rem}
  .page-header{padding:0}
  .page-header h1{font-size:1.9rem}
  .page-header p{font-size:1.05rem}
}

/* Additional mobile portrait fixes for announcements */
@media (max-width:480px){
  .announcements-grid{gap:1rem}
  .announcement-card{padding:1.2rem}
  .announcement-page-title{font-size:1.6rem}
  .announcement-content{padding:1.2rem;font-size:0.95rem;border-radius:8px}
  .page-header h1{font-size:1.7rem}
  .page-header p{font-size:1rem}
}

/* Services section */
.services-section{padding:3rem 0}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-card{display:block;background:var(--surface);border-radius:16px;overflow:hidden;position:relative;text-decoration:none;transition:all 0.4s cubic-bezier(0.25,0.1,0.25,1);box-shadow:0 4px 20px rgba(0,0,0,0.08);border:1px solid rgba(200,35,51,0.1)}
.service-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(200,35,51,0.15)}
.service-image-wrapper{position:relative;width:100%;height:280px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(200,35,51,0.02)}
.service-image{width:110%;height:110%;object-fit:contain;transition:transform 0.6s cubic-bezier(0.25,0.1,0.25,1)}
.service-card:hover .service-image{transform:scale(1.25)}
.service-content{padding:2rem;background:var(--surface)}
.service-content h3{font-size:1.5rem;color:var(--accent);margin:0 0 0.5rem;font-weight:700}
.service-content p{color:var(--muted);line-height:1.6;margin:0;font-size:1.05rem}

/* Dark theme for services */
html.theme-dark .service-card{background:#ffffff;border:2px solid var(--accent);box-shadow:0 4px 20px rgba(200,35,51,0.2)}
html.theme-dark .service-card:hover{box-shadow:0 12px 40px rgba(200,35,51,0.3)}
html.theme-dark .service-content{background:#ffffff}
html.theme-dark .service-content h3{color:var(--accent)}
html.theme-dark .service-content p{color:#666}

/* Mobile responsive for services */
@media (max-width:768px){
  .services-grid{grid-template-columns:1fr;gap:1.5rem;padding:0}
  .service-card{margin:0}
  .service-image-wrapper{height:220px}
  .service-content{padding:1.8rem}
  .service-content h3{font-size:1.35rem;margin-bottom:0.8rem}
  .service-content p{font-size:1.05rem;line-height:1.6}
}

@media (max-width:480px){
  .announcements{padding:2.5rem 0}
  .announcements-grid{padding:0}
  .announcement-card{padding:1.3rem 1.2rem;margin:0}
  .announcement-content{padding:1.3rem;font-size:0.96rem;line-height:1.65}
  .announcement-detail{padding:0}
  .breadcrumb{font-size:0.86rem !important;padding:0}
  .page-header{margin-bottom:2.5rem !important;padding:0}
  .page-header h1{font-size:1.65rem}
  .page-header p{font-size:0.95rem}
  .services-grid{padding:0;gap:1.2rem}
  .service-card{margin:0}
  .service-image-wrapper{height:180px}
  .service-content{padding:1.5rem 1.3rem}
  .service-content h3{font-size:1.25rem}
  .service-content p{font-size:0.98rem}
}

/* Back to top button */
.back-to-top{
  position:fixed;
  bottom:30px;
  right:30px;
  width:50px;
  height:50px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:50%;
  font-size:24px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
  box-shadow:0 4px 12px rgba(200,35,51,0.3);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.back-to-top.show{
  opacity:1;
  visibility:visible;
}
.back-to-top:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(200,35,51,0.4);
}
html.theme-dark .back-to-top{
  background:var(--accent);
  box-shadow:0 4px 12px rgba(200,35,51,0.5);
}
html.theme-dark .back-to-top:hover{
  box-shadow:0 6px 16px rgba(200,35,51,0.6);
}
@media (max-width:768px){
  .back-to-top{
    width:48px;
    height:48px;
    bottom:25px;
    right:25px;
    font-size:21px;
  }
}

/* Chat button and window */
.chat-btn{
  position:fixed;
  bottom:30px;
  right:90px;
  width:50px;
  height:50px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:50%;
  font-size:24px;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 4px 16px rgba(200,35,51,0.4);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chat-btn:hover{
  transform:scale(1.1);
  box-shadow:0 6px 20px rgba(200,35,51,0.5);
}

.chat-window{
  position:fixed;
  bottom:30px;
  right:30px;
  width:360px;
  height:500px;
  background:var(--surface);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  display:flex;
  flex-direction:column;
  z-index:1001;
  opacity:0;
  visibility:hidden;
  transform:translateY(20px) scale(0.95);
  transition:all 0.3s ease;
  border:2px solid rgba(200,35,51,0.2);
  overflow:hidden;
}
.chat-window.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.chat-header{
  background:var(--accent);
  color:white;
  padding:1rem 1.5rem;
  border-radius:14px 14px 0 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:1.1rem;
}
#closeChatBtn{
  background:none;
  border:none;
  color:white;
  font-size:24px;
  cursor:pointer;
  line-height:1;
  padding:0;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  transition:all 0.2s ease;
  opacity:0.8;
}
#closeChatBtn:hover{
  background:rgba(255,255,255,0.15);
  opacity:1;
  transform:scale(1.1);
}

.chat-body{
  flex:1;
  overflow-y:auto;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:rgba(200,35,51,0.02);
}

.chat-message{
  padding:0.8rem 1.2rem;
  border-radius:12px;
  max-width:85%;
  line-height:1.6;
  font-size:0.95rem;
  white-space:pre-line;
  word-wrap:break-word;
}
.bot-message{
  background:var(--accent);
  color:white;
  align-self:flex-start;
  border-bottom-left-radius:4px;
  box-shadow:0 2px 8px rgba(200,35,51,0.2);
}
.typing-indicator{
  width:60px;
  padding:0.8rem 1.2rem;
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:center;
}
.typing-indicator span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:white;
  opacity:0.6;
  animation:typing-dot 1.4s infinite;
}
.typing-indicator span:nth-child(2){
  animation-delay:0.2s;
}
.typing-indicator span:nth-child(3){
  animation-delay:0.4s;
}
@keyframes typing-dot{
  0%, 60%, 100%{
    opacity:0.6;
    transform:translateY(0);
  }
  30%{
    opacity:1;
    transform:translateY(-8px);
  }
}
.user-message{
  background:#e8e8e8;
  color:var(--text);
  align-self:flex-end;
  border-bottom-right-radius:4px;
}

.chat-input-area{
  display:flex;
  gap:0.5rem;
  padding:1rem 1.5rem;
  border-top:1px solid rgba(200,35,51,0.1);
  background:var(--surface);
  border-radius:0 0 14px 14px;
}

.chat-input-container{
  display:flex;
  gap:0.6rem;
  padding:0.8rem 1rem;
  border-top:1px solid rgba(200,35,51,0.1);
  background:var(--surface);
  align-items:center;
}

.chat-input-container input{
  flex:1;
  padding:0.7rem 1rem;
  border:2px solid rgba(200,35,51,0.15);
  border-radius:8px;
  font-size:0.9rem;
  font-family:inherit;
  background:white;
  color:var(--text);
  transition:all 0.3s ease;
  outline:none;
}

.chat-input-container input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(200,35,51,0.1);
}

.chat-input-container button{
  padding:0.7rem 1.4rem;
  background:var(--accent);
  color:white;
  border:none;
  border-radius:8px;
  font-weight:600;
  font-size:0.9rem;
  cursor:pointer;
  transition:all 0.3s ease;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(200,35,51,0.25);
}

.chat-input-container button:hover{
  background:#b02838;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(200,35,51,0.35);
}

.chat-input-container button:active{
  transform:translateY(0);
}

html.theme-dark .chat-window{
  background:#1a1a1a;
  border-color:rgba(200,35,51,0.3);
}
html.theme-dark .chat-body{
  background:rgba(0,0,0,0.3);
}
html.theme-dark .chat-input-area,
html.theme-dark .chat-input-container{
  background:#1a1a1a;
  border-top-color:rgba(200,35,51,0.2);
}

html.theme-dark .chat-input-container input{
  background:#2a2a2a;
  border-color:rgba(200,35,51,0.25);
  color:#e8e8e8;
}

html.theme-dark .chat-input-container input:focus{
  border-color:var(--accent);
  background:#333;
}
html.theme-dark .user-message{
  background:#333;
  color:#e8e8e8;
}

@media (max-width:768px){
  .chat-button{
    width:48px;
    height:48px;
    bottom:25px;
    right:85px;
    font-size:21px;
  }
  .chat-window{
    right:15px;
    left:15px;
    width:auto;
    bottom:15px;
    height:460px;
    max-height:calc(100vh - 100px);
  }
  .chat-header{padding:1rem 1.2rem}
  .chat-messages{padding:1rem}
  .chat-input{padding:0.8rem 1rem}
  .chat-input input{padding:0.7rem 0.9rem;font-size:0.95rem}
}