:root{
  --bg:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --brand:#5c6ac4;
  --brand-2:#ff6b6b;
  --brand-3:#ffd166;
  --ring: 0 10px 30px rgba(0,0,0,.06);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.nav-wrap{display:flex;align-items:center;gap:24px;padding:21px 0}
.logo img{height:120px}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-links a{display:block;padding:8px 10px;border-radius:10px}
.nav-links a:hover{background:#f5f7ff;text-decoration:none}
.nav-toggle{display:none}

.dropdown{position:relative}
.dropdown-menu{position:absolute;display:none;top:100%;left:0;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:var(--ring);list-style:none;margin:8px 0 0 0;padding:6px;min-width:180px}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{padding:8px 10px;display:block}

.hero{background:linear-gradient(135deg,#f7f7ff, #fff);border-bottom:1px solid #eee}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;padding:48px 0}
.hero-copy h1{font-family:Fredoka, Poppins, sans-serif;font-weight:700;font-size:42px;margin:0 0 10px}
.hero-copy p{color:var(--muted);max-width:52ch;margin:0 0 18px}
.cta-row{display:flex;gap:12px justify-content:center; }
.btn{display:inline-block;display:inline-block;padding:12px 18px;border-radius:14px;border:2px solid transparent;font-weight:600}
.btn-primary{background:var(--brand);color:#fff}
.btn-outline{border-color:#d1d5db;color:var(--ink);background:#fff}
.btn-small{padding:8px 12px;border:1px solid #e5e7eb;border-radius:12px}



.slide{min-width:100%;position:relative}
.slide-caption{position:absolute;left:20px;bottom:20px;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(6px);padding:10px 12px;border-radius:12px;box-shadow:var(--ring)}







.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:38px auto}
.brand-card{padding:18px;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--ring);text-align:center}
.brand-card h3{margin:8px 0 6px}
.brand-card p{color:var(--muted);margin:0 0 10px}

.page{padding:32px 0}
.lede{color:var(--muted);font-size:18px}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none;margin:12px 0 20px}
.pill-list li{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:8px 12px}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid #eee;border-radius:var(--radius);padding:14px;box-shadow:var(--ring)}
.card h3{margin:10px 0 6px}
.card p{color:var(--muted)}

.cta-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff7ed;border:1px solid #fde68a;border-radius:16px;padding:16px;margin:24px 0}

.faq details{border:1px solid #eee;border-radius:12px;padding:12px;margin:10px 0;background:#fff}
.faq summary{cursor:pointer;font-weight:600}

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #e5e7eb;margin:6px 0}
.form-note{color:var(--muted);font-size:12px}

.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:26px;margin:10px 0}
.checklist li::before{content:'✔';position:absolute;left:0;top:0;color:var(--brand)}

.site-footer{margin-top:40px;border-top:1px solid #eee;padding:24px 0;background:#fafafa}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:6px 0}
.copyright{margin-top:12px;color:var(--muted);font-size:13px;text-align:center}

@media (max-width:900px){
  .brand-grid,.cards-3,.contact-grid,.hero-inner,.footer-grid{grid-template-columns:1fr}
  
  .nav-links{display:none;position:absolute;right:16px;top:64px;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:var(--ring);padding:8px}
  .nav-links li{margin:6px 4px}
  .nav-toggle{display:block;background:#fff;border:1px solid #eee;border-radius:10px;padding:6px 10px}
  nav.open .nav-links{display:block}
}

.footer-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;justify-items:center;text-align:center}
@media (max-width:900px){
  .footer-grid-2{grid-template-columns:1fr}
}

.page.centered h1, .page.centered h2, .page.centered h3 {text-align:center}
.page.centered p, .page.centered ul, .page.centered .faq, .page.centered .checklist {margin-left:auto;margin-right:auto;max-width:800px}





.hero{width:100%;max-width:100%;margin:0 auto;padding:48px 20px;text-align:center}
.hero .hero-inner{display:block;padding:0}
.hero .hero-copy{max-width:900px;margin:0 auto}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav ul.nav-links {
  margin-left: auto;
}
/* Keep dropdown open when hovering */
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu:hover {
  display: block;
}
.dropdown-menu {
  margin-top: 0;
}
/* Homepage spacing adjustment */
.home 
.home .brand-grid {
  margin-top: 20px;
}


/* Responsive carousel captions */
.slide-caption h2 {
  font-size: 2.2rem;
}
.slide-caption p {
  font-size: 1.2rem;
}

@media (max-width: 1024px) {
  .slide-caption h2 {
    font-size: 1.8rem;
  }
  .slide-caption p {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  .slide-caption {
    text-align: center;
  }
  .slide-caption h2 {
    font-size: 1.4rem;
  }
  .slide-caption p {
    font-size: 0.9rem;
  }
}


/* Center and scale brand logos */
.brand-block img {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  height: auto;
}


/* Force uniform scaling + centering of brand logos */
img[src*="logo-viahart"],
img[src*="logo-brainflakes"],
img[src*="logo-siammandalay"] {
  display: block !important;
  margin: 0 auto !important;
  max-width: 200px !important;
  height: auto !important;
}


/* Scale SiamMandalay logo smaller (60% of others) */
img[src*="logo-siammandalay"] {
  max-width: 120px !important; /* 60% of 200px */
}


/* Balance vertical alignment of brand logos */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px; /* ensures consistent block height */
}

.brand-block img {
  margin-top: auto;
  margin-bottom: auto;
}


/* Reduce SiamMandalay logo size on homepage by 30% */
.home img[src*="logo-siammandalay"] {
  max-width: 84px !important; /* 70% of 120px */
}


/* Increase Brain Flakes logo size on homepage by 20% */
.home img[src*="logo-brainflakes"] {
  max-width: 240px !important; /* 20% increase from 200px */
}


/* === Hero banner (2-slide) === */
.hero-banner{position:relative;overflow:hidden;width:100%;max-height:550px}
.hero-carousel{position:relative;width:100%;height:100%}
.hero-carousel .slide{display:none;position:absolute;inset:0}
.hero-carousel .slide.active{display:block}
.hero-carousel img{width:100%;height:auto;display:block}
.hero-carousel button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.3);color:#fff;border:0;font-size:2rem;padding:0 12px;cursor:pointer;border-radius:6px}
.hero-carousel .prev{left:10px}
.hero-carousel .next{right:10px}
.hero-carousel button:hover{background:rgba(0,0,0,.5)}
@media (max-width:768px){.hero-banner{max-height:380px}.hero-carousel button{font-size:1.6rem}}


/* Hero banner fixes: ensure slides display and container has height */
.hero-banner{position:relative;width:100%;overflow:hidden}
.hero-carousel{position:relative;width:100%}
.hero-carousel .slide{display:none;position:relative}
.hero-carousel .slide.active{display:block}
.hero-carousel img{width:100%;height:auto;display:block}
.hero-carousel button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.3);color:#fff;border:0;font-size:2rem;padding:0 12px;cursor:pointer;border-radius:6px}
.hero-carousel .prev{left:10px}
.hero-carousel .next{right:10px}
.hero-carousel button:hover{background:rgba(0,0,0,.5)}
@media (max-width:768px){.hero-carousel button{font-size:1.6rem}}


/* Ensure section heading styles */
.section-heading { font-size: 2rem; margin: 24px 0 12px; }
.text-center { text-align: center; }
.fw-bold { font-weight: 700; }
@media (max-width: 600px) { .section-heading { font-size: 1.6rem; } }


/* === Hero banner: Fill-crop 16:9 with fade === */
.hero-banner{position:relative;width:100%}
.hero-carousel{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.hero-carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;}
.hero-carousel .slide.active{opacity:1;}
.hero-carousel img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (max-width:768px){.hero-carousel{aspect-ratio:16/9}}


/* Remove spacing above and below the site logo */
header img[src*="logo.png"],
.navbar img[src*="logo.png"],
img[src*="assets/images/logo.png"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: block;
}


/* Remove vertical spacing around site logo container while keeping position */
header, header .container, .navbar, .navbar-brand, .nav-wrap, .site-logo {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Ensure the logo image itself doesn't add extra line-height spacing */
header img[src*="logo.png"],
.navbar img[src*="logo.png"],
.site-logo img[src*="logo.png"] {
  display: block !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Remove top/bottom padding from the header bar if any utility classes add it */
.header, .topbar, .header-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}