:root{
  --accent:#684753;
  --accent-2:#ffb84d;
  --muted:#666;
  --bg:#fff7fb;
  --card-shadow:0 12px 34px rgba(16,16,40,0.08);
  --text:#111;
  --radius:12px;
}
:root[data-theme="dark"]{
  --bg:#08070a;
  --text:#eaeaea;
  --muted:#cfcfcf;
  --card-shadow: 0 12px 34px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Arial, Helvetica, sans-serif; color:var(--text);-webkit-font-smoothing:antialiased}
/* subtle pattern overlay */

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: radial-gradient(rgba(183,28,84,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events:none;
  z-index:0;
  opacity:0.9;
}

a{color:inherit}
img{display:block;max-width:100%}
.container{max-width:1200px;margin:24px auto;padding:16px;position:relative;z-index:1}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;box-shadow:0 6px 22px rgba(16,16,40,0.04);position:sticky;top:0;z-index:9999;background:rgba(255,255,255,0.8);backdrop-filter: blur(6px)}

.logo{font-size:1.35rem;font-weight:800;color:var(--accent);text-decoration:none}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
nav ul li a{text-decoration:none;color:var(--text);font-weight:700;padding:8px 6px;border-radius:8px}
nav ul li a:hover{color:var(--accent);background:rgba(183,28,84,0.05)}
.header-right{display:flex;gap:10px;align-items:center}
.icon-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,0.06);text-decoration:none;font-weight:700;z-index:10000}
.icon-btn.call{background:linear-gradient(90deg,#ff6b8a,#b71c54);color:#fff}
.icon-btn.wh{background:linear-gradient(90deg,#25D366,#128C7E);color:#fff}

/* Banner */
.banner{width:100%;height:420px;overflow:hidden;border-radius:14px;box-shadow:0 18px 46px rgba(16,16,40,0.06);position:relative;margin-top:18px}
.banner img{width:100%;height:100%;object-fit:cover;display:none}
.banner .overlay{position:absolute;left:28px;bottom:28px;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));padding:16px;border-radius:12px;backdrop-filter: blur(6px);box-shadow:0 10px 30px rgba(16,16,40,0.06)}
@media(min-width:1025px){.banner img.desktop{display:block}}
@media(min-width:768px) and (max-width:1024px){.banner img.tablet{display:block}}
@media(max-width:767px){.banner{height:300px}.banner img.mobile{display:block}.banner .overlay{left:12px;right:12px;bottom:12px}}

/* Typography */
h1, h2, h3, h4 {   font-family: 'Poppins', serif; /* Use a Google Font */
  font-size: 2.5rem;
  font-weight: 600;
  color: #333;
  letter-spacing: 1px;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
  text-align: center;}
h1{font-size:1.6rem;margin-bottom:12px;color:#0f1724; }
h2{font-size:1.25rem;margin-top:18px;margin-bottom:10px;color:#0f1724}
ul, p{font-family: 'Arial'; margin:15px 0 15px 0;color:#000; letter-spacing: 1.8px;}

/* Gallery */
.gallery{display:grid;gap:14px;margin:18px 0}
@media(min-width:1025px){.gallery{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px) and (max-width:1024px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.gallery{grid-template-columns:repeat(2,1fr)}}
.card{background:linear-gradient(180deg, #ffffff, #fff9fb);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(16,16,40,0.06);border:1px solid rgba(183,28,84,0.04);display:flex;flex-direction:column}
.card img{width:100%;height:200px;object-fit:cover;display:block}
.card .meta{padding:10px;display:flex;justify-content:space-between;align-items:center}

/* Price table */
.table-wrap{margin:18px 0;border-radius:10px;box-shadow:0 10px 30px rgba(16,16,40,0.06);overflow:hidden}
table{width:100%;border-collapse:collapse;min-width:700px}
th,td{padding:12px 14px;border-bottom:1px solid rgba(16,16,40,0.04);text-align:left}
thead th{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:800}

/* FAQ (accordion) */
.faq{margin:20px 0}
.faq-item{margin-bottom:10px;border-radius:8px;background:linear-gradient(180deg,#fff,#fff7fb);overflow:hidden;border:1px solid rgba(16,16,40,0.04)}
.faq-item button{width:100%;text-align:left;padding:14px;border:0;background:transparent;font-weight:800;font-size:1rem;cursor:pointer;color:var(--accent);display:flex;justify-content:space-between;align-items:center}
.faq-item .answer{padding:12px 14px;border-top:1px solid rgba(16,16,40,0.03);display:none;background:transparent;color:var(--muted)}

/* Tags */
.tags{margin:20px 0}
.tags a{display:inline-block;margin:4px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid rgba(16,16,40,0.04);text-decoration:none;color:var(--text);font-size:0.9rem}
.tags a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

ul {
  margin-left: 3rem;
}
/* Footer */
footer {background:linear-gradient(180deg,#111 0%, #0b0b0b 100%);color:#ddd;left:0;right:0;margin-top:34px;padding:30px 0}
.footer-container {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1200px;margin:0 auto;padding:0 16px}
.footer-col h3, .footer-col h4 {margin-bottom:12px;color:var(--accent-2);}
.footer-col ul {list-style:none;margin:0;padding:0;}
.footer-col ul li {margin-bottom:8px;}
.footer-col ul li a {color:#ddd;text-decoration:none;transition:color .3s;}
.footer-col ul li a:hover {color:var(--accent-2)}
.footer-col p {color:#fff }

.footer-bottom {text-align:center;padding:12px;background:transparent;margin-top:20px;color:#bbb;font-size:0.9rem}
.footer-bottom p {color:#fff }
/* Floating side buttons */
.side-call{position:fixed;left:-2px;bottom:35%;display:flex;flex-direction:column;gap:1px;box-shadow: 0 0 15px rgb(65 220 255 / 60%), 0 0 30px rgb(43 138 255 / 40%);z-index:9999}
.side-call a{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:10%;box-shadow:0 10px 28px rgba(16,16,40,0.08);font-size:1.2rem;text-decoration:none;color:#fff}
.side-call .call{background:linear-gradient(90deg,#ff6b8a,#b71c54)}
.side-call .wh{background:linear-gradient(90deg,#25D366,#128C7E)}

/* Helpers */
.muted{color:var(--muted)}
.lead{color:var(--muted);margin-bottom:12px}
.quick-book{background:linear-gradient(180deg,#fff,#fff9fb);padding:14px;border-radius:12px;border:1px solid rgba(16,16,40,0.04);box-shadow:0 10px 26px rgba(16,16,40,0.04)}

/* Responsive tweaks */
@media(max-width:700px){
  .gallery{grid-template-columns:repeat(1,1fr)}
  header{padding:10px}
  .banner{height:260px}
}

/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
body{font-size:14px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:#f2faff;color:#111;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:1rem}
.site-header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:1.2rem;padding:0.6rem 0}
.nav a{margin-left:1rem;color:#333;font-weight:600}
.hero-card{display:flex;gap:1rem;align-items:center;background:#fff;padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.hero-left{flex:1}
.hero-left h2{font-size:1.6rem;margin-bottom:0.4rem}
.hero-right img{width:320px;height:200px;object-fit:cover;border-radius:8px}

/* Gallery grid pages */
.gallery { margin-top:1rem; }
.xxx-grid-wrapper{position:relative;overflow:hidden}
.xxx-grid-page{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:6px}
.xxx-grid-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.06);text-align:left}
.xxx-grid-card img{width:100%;height:160px;object-fit:cover;display:block}
.xxx-grid-info{padding:0.6rem;font-size:0.9rem}
.xxx-grid-info .name{display:block;font-weight:700;margin-bottom:4px}
.xxx-grid-info .phone{display:block;color:#111;font-weight:600}
.xxx-grid-info .wa{display:block;color:#25D366;font-weight:600}

/* Tags */
.tags{margin-top:0.6rem}
.tag{display:inline-block;padding:0.4rem 0.8rem;border-radius:999px;margin:0.2rem;font-weight:600;color:#fff;background:linear-gradient(90deg,#ff7a18,#af002d);box-shadow:0 6px 20px rgba(0,0,0,0.08)}
.tag.tag-secondary{background:linear-gradient(90deg,#00b4db,#0083b0)}
.tag.tag-accent{background:linear-gradient(90deg,#7b61ff,#4ec5ff)}
.tag.tag-outline{background:transparent;color:#333;border:1px solid rgba(0,0,0,0.06)}

/* Buttons */
.btn{display:inline-block;padding:0.6rem 1rem;border-radius:8px;background:linear-gradient(90deg,#ff7a18,#af002d);color:#fff;font-weight:700;text-decoration:none}

/* Footer */
.site-footer{padding:1rem 0;margin-top:2rem;background:#fff;text-align:center;border-top:1px solid rgba(0,0,0,0.04)}

/* Responsive */
@media (max-width:900px){
  .xxx-grid-page{grid-template-columns:repeat(3,1fr)}
  .hero-right img{width:220px;height:150px}
}
@media (max-width:600px){
  .xxx-grid-page{grid-template-columns:repeat(2,1fr)}
  .hero-card{flex-direction:column}
  .hero-right img{width:100%}
}
:root{
  --accent:#684753;
  --accent-2:#ffb84d;
  --muted:#666;
  --bg:#fff7fb;
  --card-shadow:0 12px 34px rgba(16,16,40,0.08);
  --text:#111;
  --radius:12px;
}
:root[data-theme="dark"]{
  --bg:#08070a;
  --text:#eaeaea;
  --muted:#cfcfcf;
  --card-shadow: 0 12px 34px rgba(0,0,0,0.45);
}
 
    .wrap{max-width:1200px;margin:0 auto}

    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}

    .card{
      position:relative;overflow:hidden;border-radius:var(--card-radius);background:#e7e7e7;box-shadow:var(--shadow);
      transform-origin:center center;transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .3s;cursor:pointer;
    }

    .card img{border-radius:12px 12px 12px 12px; width:100%;height:220px;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.9,.25,1)}

    .info{
      position:absolute;; color:#fff; left:0;right:0;bottom:0;padding:14px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(2,6,23,0.7) 60%, rgba(2,6,23,0.92) 100%);
      display:flex;align-items:center;justify-content:space-between;gap:10px;backdrop-filter:blur(4px);
    }
    .hotel-name{font-size:15px;font-weight:600; color:#fff}
    .hotel-meta{font-size:12px;opacity:.72; color:#fff}

    .card::after{
      content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06), transparent 20%);
      opacity:0; colore:#fff;transition:opacity .4s;
    }
    .card:hover{transform:translateY(-8px) rotateX(4deg) scale(1.02);box-shadow:0 22px 50px rgba(2,6,23,0.55)}
    .card:hover img{transform:scale(1.08) translateY(-6px)}
    .card:hover::after{opacity:1}

    @media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)} .card img{height:200px}}
    @media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr)} .card img{height:180px}}
    @media (max-width:420px){.grid{grid-template-columns:1fr} .card img{height:220px}}

    .hotel-name{transform:translateY(6px);opacity:0;transition:transform .45s,opacity .45s}
    .card:hover .hotel-name{transform:translateY(0);opacity:1}

    .badge{background:rgba(255,255,255,0.06);padding:6px 8px;text-decoration:none; border-radius:999px;font-size:12px}