:root {
gap:20px;
}

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

header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  flex: 1;
  text-align: center;
}

nav {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  flex: 1;
}

nav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .2s;
}

nav a:hover {
  background: rgba(14,165,163,0.1);
}



nav a {
color:var(--accent);
text-decoration:none;
font-weight:600;
font-size:1rem;
padding:6px 10px;
border-radius:8px;
transition:background .2s;
}

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

header h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  flex: 1;
  text-align: center; /* নাম থাকবে একদম মাঝখানে */
}

nav {
  display: flex;
  gap: 20px;
  justify-content: flex-end; /* ডান দিকে পাঠাবে */
  flex: 1;
}

nav a:hover {
background:rgba(14,165,163,0.1);
}
.hero {
background:var(--card);
text-align:center;
padding:60px 30px;
border-radius:16px;
box-shadow:0 6px 20px rgba(12,24,44,.06);
margin-top:30px;
}
.hero h2 {
font-size:2.5rem;
margin-bottom:10px;
}
.hero p {
color:var(--muted);
font-size:1.2rem;
margin-bottom:20px;
}
.btn {
display:inline-block;
padding:12px 24px;
background:var(--accent);
color:#fff;
border-radius:12px;
font-weight:600;
text-decoration:none;
}
.grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin-top:40px;
}
.card {
background:var(--card);
padding:20px;
border-radius:14px;
box-shadow:0 4px 12px rgba(12,24,44,.05);
text-align:center;
}
footer {
margin-top:40px;
text-align:center;
color:var(--muted);
font-size:0.95rem;
}




/-- :root {
text-decoration:none;
font-weight:600;
}


.grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin-top:40px;
}


.card {
background:var(--card);
padding:20px;
border-radius:14px;
box-shadow:0 4px 12px rgba(12,24,44,.05);
}


.card-page {
background:var(--card);
border-radius:12px;
box-shadow:0 6px 20px rgba(12,24,44,.06);
}


input, textarea {
width:100%;
padding:10px;
border-radius:8px;
border:1px solid #d1d5db;
margin-bottom:12px;
}


button {
background:var(--accent);
color:white;
padding:10px;
border:none;
border-radius:8px;
font-weight:600;
cursor:pointer;
}


footer {
margin-top:48px;
text-align:center;
color:var(--muted);
font-size:.95rem;
}
--/ 

@media (max-width:640px){
.container {padding:16px;margin:20px}
}