:root{
  --rust:#b1532b;
  --deep:#1a3a2c;
  --cta:#00bfa5;
  --cta-dark:#009e8b;
  --muted:#555;
  --soft:#f6f7f8;
  --border:#e6e8eb;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:#222;line-height:1.65;background:#fff}

a{color:#0b6ea4}
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}

img{
  width: 100%;
  height:auto;
}

/* Hero */
.hero{
  position:relative;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35)),url('/images/hero/dullstroom-accommodation-hero.webp') center/cover no-repeat;
  color:#fff;text-align:center;padding:5rem 1.25rem 4rem;
}
.hero h1{font-size:2.6rem;margin:0 0 .5rem}
.hero p{max-width:820px;margin:.25rem auto 1.25rem;font-size:1.6rem}

.web-logo{
width: 150px;
height: auto;
display: block;
margin-bottom: 20px;
}

.my-span{
 color:  yellow;
 font-size: 1.4rem;
}
.badges{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:.8rem auto 1.4rem}
.badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);padding:.35rem .6rem;border-radius:999px;font-weight:800}
.ctas{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.2rem;border-radius:10px;font-weight:800;text-decoration:none;transition:transform .05s ease,background .25s ease}
.btn-primary{background:var(--cta);color:#fff}
.btn-primary:hover{background:var(--cta-dark)}
.btn-ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);color:#fff}
.btn:active{transform:translateY(1px)}

/* Sections */
.section{padding:3rem 0}
.section h2{text-align:center;color:var(--deep);margin:0 0 .75rem}
.section .lede{max-width:860px;margin:.25rem auto 1.75rem;text-align:center;color:var(--muted)}

/* Cards grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);padding:1.1rem}
.card h3{margin:.15rem 0 .5rem;color:var(--rust);font-size:1.15rem}
.card p, .card ul{margin:0;color:#333}
.card ul{list-style:none;padding:0}
.card ul li{margin:.4rem 0}

/* Area highlight */
.area{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:start}
.area .photo{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.area img{width:100%;display:block}

/* Table */
.table-wrap{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:auto}
table{border-collapse:collapse;width:100%;min-width:780px}
th,td{border-top:1px solid #eef1f3;padding:.65rem .8rem;vertical-align:top}
thead th{position:sticky;top:0;background:#f6faf8;color:#1f3c2e;border-bottom:1px solid var(--border);font-size:.95rem}

/* Strip tip */
.strip{background:#e9f5ee;border:1px solid #dfe7e2;border-radius:12px;padding:1rem;margin-top:1rem}
.strip ul{margin:0;padding-left:1.1rem}

/* Pricing CTA row */
.row-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.25rem}

/* FAQ */
.faq{max-width:900px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:800;color:var(--deep)}
.faq p{margin:.5rem 0 0}

/* Footer CTA */
.footer-cta{background:linear-gradient(180deg,#fdfbf8,#fff);text-align:center;border-top:1px solid var(--border)}



footer {
  grid-area: footer;
  background-color: rgb(76, 79, 75);
  color: white;
  padding: 2em 1em;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  gap: 2em;
}

.footer-section {
  flex: 1 1 250px;
  min-width: 200px;
}

.footer-section h4 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
  color: #a6a1a1;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 0.4em;
}

.footer-section a {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: #ccc;
}

.footer-bottom {
  text-align: center;
  margin-top: 2em;
  font-size: 0.9em;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1em;
}


/*NAVIGATION*/


/* Base styles */
.navbar {
background-color: #303030;
color: white;
padding: 10px 20px;
position: fixed;
width: 100%;
z-index: 999;
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
max-height: 80px;
}

.logo {
max-width: 80px;
}

/* Hamburger styles */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  margin: 4px 40px;
  transition: 0.4s;
}

/* Nav links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 300;
}

/* Mobile styles */
#menu-toggle {
  display: none;
}

@media (max-width: 768px) {
.hamburger {
display: flex;
}

.nav-links {
position: absolute;
top: 60px;
left: 0;
background-color: #303030;
width: 100%;
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;

}

#menu-toggle:checked ~ .nav-links {
max-height: 1000px;
}

.nav-links li {
padding: 15px;
text-align: center;
}
}

/* ENDS */



/* Responsive */
@media (max-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr}
  .area{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid-3{grid-template-columns:1fr}
  .hero{padding:3.75rem 1rem 3rem}
  .hero h1{font-size:1.85rem}
}