:root{
--max-width:1100px;
--gap:1rem;
--accent:#0b82f6;
--bg:#f7f8fb;
--text:#1a1a1a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--text); background:var(--bg)}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;text-decoration:none;color:var(--text)}
.brand span{color:var(--accent)}
.hero{padding:4rem 0;text-align:center;background:linear-gradient(180deg,white,rgba(11,130,246,0.04));}
.hero h1{margin:0;font-size:clamp(1.6rem,3vw,2.6rem)}
.btn{display:inline-block;padding:.6rem 1rem;background:var(--accent);color:white;border-radius:6px;text-decoration:none}
.features .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:2rem 0;}
.card{background:white;padding:1.5rem;border-radius:8px;min-height:120px;text-align: center; margin-top: 0.5 rem; font-weight: 500; box-shadow:0 6px 18px rgba(20,20,50,0.05)}
.latest .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.work{background:white;padding:1.5rem;border-radius:8px;min-height:120px;text-align: center; margin-top: 0.5 rem; font-weight: 500; box-shadow:0 6px 18px rgba(20,20,50,0.05)}
.site-footer{padding:1.5rem 0;text-align:center;font-size:.9rem}
.latest .grid img{width:100%;height:auto;border-radius: 8px;object-fit: cover;} /* Ensure images fit well within the div nicely */
.team .grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem;}
.team .card img {width: 100%;border-radius: 8px;object-fit: cover;}
.team .card h3 {margin: 0.5rem 0 0.25rem;text-align: center;}
.team .card p {text-align: center;font-size: 0.9rem;}
.why ul {list-style: disc;padding-left: 1.5rem;}
.services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 1.5rem;margin-top: 2rem;}
.services-grid .card img {width: 100%;border-radius: 8px;object-fit: cover;}
.services-grid .card h3 {margin: 0.5rem 0 0.25rem;text-align: center;}
.services-grid .card p {text-align: center;font-size: 0.9rem;}
.social-icons{margin-top: 10px;}
.social-icons a {font-size: 20px;margin: 0 8px;transition: color 0.3s;}
.social-icons a:hover {color: black;}

/*Navigation */
nav ul{width: 100%;list-style: none;display: flex;justify-content: flex-end;align-items: center;}
nav li{height:50px;}
nav a{height: 100%;padding: 0 30px;text-decoration: none;display:flex;align-items: center;color:var(--accent);}
nav a:hover{background-color: rgb(194, 193, 193);border-radius: 6px;}
nav li:first-child{margin-right: auto;}
.sidebar{position: fixed;top:0;right:0;height: 100vh;width: 250px;z-index: 999;background-color: #f9f9f9d9; backdrop-filter: blur(10px);box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);display: none;flex-direction: column;align-items: flex-start;justify-content: flex-start;}
.sidebar li{width:100%; }
.sidebar a{width: 100%;}
.menu-button{display:none;}

/* Responsive */
@media (max-width:1190px){
.hideOnMobile{display:none;}
.menu-button{display:block;}
}
@media (max-width:595px){.sidebar{width:100%;}}


/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Form styles */
form{max-width:600px}
label{display:block;margin-top:.75rem}
input,textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:6px}
button.btn{border:none;cursor:pointer}