:root{
--bg:#fff;
--text:#222;
--muted-text:#666;
--border:#e5e5e5;
--primary-soft:#e8f0fe;
--hover-bg:#f5f5f5;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f7f9fc;
color:#222;
line-height:1.7;
}

.container{
width:90%;
max-width:1100px;
margin:auto;
}

header{
background:#fff;
border-bottom:1px solid #e5e5e5;
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

@media (max-width:768px){
  nav .container{
    padding:0;
  }
  nav{padding:12px 0}
}

.logo{
font-weight:700;
font-size:18px;
display:flex;
align-items:center;
}

.logo-img{
height:40px;
width:auto;
object-fit:contain;
}

nav ul,
.nav-menu{
list-style:none;
display:none;
gap:22px;
align-items:center;
margin:0;
}

nav a{
text-decoration:none;
color:#333;
font-size:14px;
}

/* Ensure nav logo link looks consistent */
.logo a{color:inherit;text-decoration:none;font-weight:700;font-size:18px}

.nav .btn{padding:8px 14px}

.hero{
padding:60px 0;
display:flex;
align-items:center;
justify-content:center;
}

.hero h1{
font-size:36px;
margin-bottom:20px;
}

/* Hero image layout */
.hero-grid{
	display:flex;
	gap:28px;
	align-items:center;
	flex-wrap:wrap;
}
.hero-image{
	max-width:520px;
	width:100%;
	border-radius:8px;
	box-shadow:0 6px 18px rgba(0,0,0,0.12);
	object-fit:cover;
}
.hero-content{
	flex:1 1 360px;
	min-width:280px;
}
.hero-cta{margin-top:18px}

@media (max-width:800px){
	.hero-grid{flex-direction:column-reverse;gap:16px}
	.hero-image{max-width:100%}
}

.btn{
display:inline-block;
background:#000;
color:#fff;
padding:12px 24px;
text-decoration:none;
margin-top:20px;
}

section{
padding:60px 0;
}

section > .container {
max-width:800px;
}

h2{
margin-bottom:20px;
}

ul{
padding-left:20px;
}

footer{
margin-top:80px;
padding:40px 0;
border-top:1px solid #e5e5e5;
font-size:14px;
}

.footer-links{
display:flex;
gap:20px;
margin-bottom:20px;
flex-direction: column
}

.footer-links {
  display: flex;
  /* Default for mobile and smaller screens */
  flex-direction: column;
}

/* Media query for web version (e.g., screens wider than 768px) */
@media (min-width: 768px) {
  .footer-links {
    flex-direction: row;
    /* Add any other desired styling for web, e.g., justify-content, gap */
    justify-content: center; /* Example: center items horizontally */
    gap: 20px; /* Example: space between links */
  }
}

.footer-boundary{
font-size:12px;
color:#666;
line-height:1.6;
max-width:720px;
margin:0;
}

.form-group{
margin-bottom:20px;
}

input, select{
width:100%;
padding:10px;
border:1px solid #ccc;
}

textarea{
width:100%;
height:220px;
padding:10px;
border:1px solid #ccc;
overflow-y:scroll;
}

.checkbox{
display:flex;
gap:10px;
align-items:flex-start;
margin-top:12px;
flex-wrap:wrap;
}

.checkbox input[type="checkbox"]{
margin-top:2px;
flex-shrink:0;
}

.checkbox label{
flex:1 1 auto;
min-width:200px;
line-height:1.5;
}

button{
padding:12px 24px;
border:none;
background:#000;
color:#fff;
cursor:pointer;
font-size:14px;
}

button:disabled{
background:#999;
cursor:not-allowed;
}

button:not(:disabled){
transition:background 0.2s ease;
}

button:not(:disabled):hover{
background:#222;
}

/* Acceptance section styling */
.acceptance-section{
margin-top:28px;
padding:20px;
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:6px;
}

.acceptance-label{
display:block;
font-size:15px;
font-weight:600;
margin-bottom:12px;
color:#222;
}

.acceptance-button{
width:100%;
margin-top:16px;
}

@media (max-width:768px){
 .checkbox label{
 min-width:160px;
 font-size:13px;
 }
 .acceptance-section{
 padding:16px;
 margin-top:24px;
 }
 .acceptance-button{
 width:100%;
 }
}

@media (max-width:480px){
 .checkbox{
 flex-direction:column;
 align-items:flex-start;
 gap:8px;
 }
 .checkbox label{
 min-width:100%;
 font-size:12px;
 }
 .acceptance-button{
 width:100%;
 padding:10px 16px;
 font-size:13px;
 }
}

/* Legal / Policy page styles */
.legal{
	background:#fff;
	padding:34px;
	margin:40px auto;
	max-width:900px;
	border-radius:6px;
	box-shadow:0 1px 6px rgba(0,0,0,0.04);
	text-align:left;
}
.legal h1{font-size:26px;margin-bottom:10px}
.legal h2{font-size:18px;margin-top:20px;margin-bottom:8px}
.legal h3{font-size:16px;margin-top:14px;margin-bottom:6px}
.legal p,.legal ul,.legal ol{font-size:15px;color:#333;margin-bottom:12px}
.legal .small-note{color:#666;font-size:13px}

header .container > nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
footer .container{padding:24px 0;text-align:center}

input[type="checkbox"]{
width:auto;
padding:0;
height:18px;
width:18px;
margin:0;
cursor:pointer;
}

/* Menu Button */
.menu-btn{
  display:flex;
  appearance:none;
  border:none;
  background:none;
  cursor:pointer;
  padding:8px;
  flex-direction:column;
  align-items:center;
  gap:6px;
  z-index:40;
  margin-left:auto;
}

.menu-btn:focus{outline:2px solid var(--primary-soft); outline-offset:2px}

.hamburger{
  width:18px;
  height:12px;
  display:inline-block;
  position:relative;
}

.hamburger span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all 200ms ease;
}

.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:5px}
.hamburger span:nth-child(3){top:10px}

.menu-label{
  font-size:13px;
  color:var(--muted-text);
}

/* Hamburger open state */
.menu-btn.open .hamburger span:nth-child(1){
  top:5px;
  transform:rotate(45deg);
}

.menu-btn.open .hamburger span:nth-child(2){
  opacity:0;
}

.menu-btn.open .hamburger span:nth-child(3){
  top:5px;
  transform:rotate(-45deg);
}

/* Drawer */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,18,32,0.22);
  display:none;
  z-index:20;
  opacity:0;
  transition:opacity 180ms ease;
}

.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(360px, 92vw);
  background:var(--bg);
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform 180ms ease;
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.drawer.open{transform:translateX(0)}

.drawer-overlay.open{
  display:block;
  opacity:1;
}

.drawer-header{
  padding:16px 16px 10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.drawer-title{
  font-weight:650;
}

.drawer-close{
  appearance:none;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-size:13px;
}

.drawer-nav{
  padding:10px 8px 16px;
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

.drawer-nav ul{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  list-style:none;
  margin:0;
  align-items:stretch;
}

.drawer-nav ul li{
  border-bottom:1px solid var(--border);
}

.drawer-nav ul li:last-child{
  border-bottom:none;
}

.drawer-nav ul li a{
  display:block;
  padding:12px 16px;
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  transition:background 150ms ease;
}

.drawer-nav ul li a:hover{
  background:var(--hover-bg);
}

.drawer-nav ul li a.btn{
  background:#000;
  color:#fff;
  margin:12px 8px;
  width:calc(100% - 16px);
  text-align:center;
  border-radius:6px;
  border:none;
  padding:10px 16px;
  font-size:13px;
}

.drawer-nav ul li a.btn:hover{
  background:#222;
}

/* Center align all footer elements */
.footer-links {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer-boundary {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}