*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
   scroll-padding-top: 80px;
}


:root {
--bg: #f5f5f5;
--surface: #ffffff;
--text: #1a1a1a;
--text-muted: #4b4b4b;
--accent: #36bba5;
--accent-hover: #75d8aa;
--border: #d4d4d4;

/* Spacing */
--gap: 2rem;
--section-pad: clamp(80px, 10vw, 140px);
}

body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg);
color: var(--text);
font-size: 1rem; /* 16px */
line-height: 1.5;
}

h1, h2, h3 {
line-height: 1.2;
}

h1 {
font-size: 2rem;
}

h2 {
font-size: 1.5rem;
}

h3 {
font-size: 1.25rem;
}

p {
font-size: 1rem;
}

a {
color: inherit;
text-decoration: none;
}

img{
max-width: 100%;
display: block;
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 3rem 1.5rem;
}

.one-col {
display: block;
}

.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}

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

.navbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 100;
}

.nav-inner {
max-width: 960px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo {
font-weight: 600;
color: var(--text);
font-size: 1.25rem;
max-width: 50px;
line-height: .95;
text-transform: uppercase;
margin-right: 20px;
}

.nav-links {
display: flex;
gap: var(--gap);
align-items: center;
}

.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.95rem;
transition: color 0.05s;
}

.nav-links a:hover {
color: var(--accent-hover);
}

.nav-toggle {
display: none;
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
color: var(--text);
}

.footer {
background: var(--surface);
border-top: 1px solid var(--border);
margin-top: 4rem;
}

.footer-inner {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}

.footer-left p {
color: var(--text-muted);
font-size: 0.9rem;
}

.footer-right {
display: flex;
gap: 1.5rem;
}

.btn{
display:inline-block;
padding:8px 16px;
background: var(--accent);
color: var(--text);
text-decoration:none;
border-radius: 6px;
}

.btn:hover{
background:var(--accent-hover);
}

@media (max-width: 768px) {

.nav-links {
display: none;
flex-direction: column;
gap: 1rem;
padding: 1rem 1.5rem;
background: var(--surface);
border-top: 1px solid var(--border);
}

.nav-links.active {
display: flex;
}

.nav-toggle {
display: block;
}

.two-col,
.three-col {
grid-template-columns: 1fr;
}

.footer-inner {
grid-template-columns: 1fr;
gap: 0.5rem;
text-align: center;
}

.footer-right {
order: -1;
margin: 0 auto;
}

}

.hero {
   text-align: center;
   padding-block: var(--section-pad);
}

.hero h2 {
   font-size: clamp(2rem, 5vw, 3rem);
   margin-bottom: 1rem;
}

.hero p {
   max-width: 600px;
   margin: 0 auto 2rem;
   color: var(--text-muted);
}

.hero .btn {
   margin-top: 1rem;
}

.about {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--gap);
   align-items: center;
}

.about img {
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
   .about {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .about img {
      margin: 0 auto;
      max-width: 80%;
   }
}
.projects {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
}

.projects > div {
   background: var(--surface);
   padding: 2rem;
   border-radius: 8px;
   border: 1px solid var(--border);
   text-align: center;
   transition: transform 0.2s, box-shadow 0.2s;
}

.projects > div:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
   .projects {
      grid-template-columns: 1fr;
   }
}
.contact {
   text-align: center;
   padding-block: var(--section-pad);
}

.contact p {
   max-width: 600px;
   margin: 0 auto 2rem;
   color: var(--text-muted);
}