:root{--bg:#0b1f33;--accent:#0d6efd;--light:#f5f7fb;--text:#222;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:white}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{background:var(--bg);color:white;position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand img{height:140px;display:block}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:#cfe2ff;text-decoration:none;padding:10px 8px;border-radius:6px}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);color:white}
.hero{background:linear-gradient(90deg,var(--bg),#123a66);color:white;padding:64px 0}
.hero h1{margin:0 0 10px;font-size:40px}
.hero p{max-width:800px;margin:0 0 22px;font-size:18px;opacity:.95}
.button{display:inline-block;background:var(--accent);color:white;padding:12px 18px;border-radius:8px;text-decoration:none}
.button:hover{filter:brightness(1.05)}
.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid #e7eaf2;border-radius:10px;padding:18px;background:white}
.card h3{margin-top:0}
section h2{margin-top:8px}
form label{display:block;margin:12px 0}
input,textarea{width:100%;padding:10px;border:1px solid #d6d8df;border-radius:8px}
textarea{min-height:140px;resize:vertical}
button,.btn{background:var(--bg);color:white;border:none;padding:12px 16px;border-radius:8px;cursor:pointer}
footer{background:#0f2238;color:#cbd5e1;margin-top:48px}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.gallery{columns:4 280px;column-gap:14px}
.gallery img{width:100%;border-radius:10px;margin:0 0 14px;display:block}
.badge{display:inline-block;background:#eef2ff;color:#334155;border:1px solid #dbe4ff;padding:4px 8px;border-radius:999px;font-size:12px;margin-right:6px}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border:1px solid #e7eaf2;padding:10px;text-align:left}
@media (max-width:640px){
  .hero h1{font-size:30px}
  .brand img{height:72px}
}

/* ===========================

   Core Services - Horizontal Boxes

   =========================== */



.services-horizontal{

  display:flex;

  gap:16px;

  align-items:stretch;

  justify-content:space-between;

  flex-wrap:wrap;            /* keeps it usable on phones */

  margin:40px 0;

}



.service-card{

  flex:1 1 22%;              /* four across on desktop */

  background:#ffffff;

  border:1px solid #e6e6e6;

  border-radius:12px;

  padding:20px 22px;

  box-shadow:0 2px 8px rgba(0,0,0,.04);

  min-width:260px;           /* prevents cards from shrinking too small */

  transition:transform 0.2s ease, box-shadow 0.2s ease;

}



.service-card:hover{

  transform:translateY(-4px);

  box-shadow:0 4px 12px rgba(0,0,0,.12);

}



.service-card h3{

  margin:0 0 10px 0;

  font-size:1.15rem;

  font-weight:600;

  letter-spacing:.3px;

  color:#b31b1b;             /* ASAS Red */

  text-transform:uppercase;

}



.service-card p{

  margin:0;

  line-height:1.55;

  font-size:.96rem;

  color:#333333;

}



/* Optional: darker site backgrounds */

body.dark .service-card{ background:#151515; border-color:#2a2a2a; }

body.dark .service-card h3, body.dark .service-card p{ color:#f3f3f3; }



/* Responsive tweaks */

@media (max-width: 1100px){

  .service-card{ flex:1 1 45%; }   /* two per row */

}

@media (max-width: 640px){

  .service-card{ flex:1 1 100%; }  /* one per row */

}




/* --- Header layout: links left, contact on right, social under email --- */

.nav{

  display:flex;

  align-items:center;

  justify-content:space-between;

}

.contact-block{

  display:flex;

  flex-direction:column;    /* stack phone/email + social icons */

  align-items:flex-end;     /* push them to the right */

}

.contact-info a{

  color:#fff;

  font-size:14px;

  margin-left:20px;

  text-decoration:none;

}

.contact-info a i{ margin-right:6px; }

.social-icons{ margin-top:5px; }

.social-icons a{

  color:#fff;

  font-size:18px;

  margin-left:10px;

  transition:color .3s ease;

}

.social-icons a:hover{ color:#ff4d4d; }



/* Projects table — stronger selectors */
.project-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
font-size: 0.95em;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Header row color (navy) */
.project-table thead tr {
background-color: #0b2a4d !important; /* navy to match your site */
color: #ffffff !important;
}

/* Ensure header cells inherit the color and spacing */
.project-table thead th {
padding: 12px 15px;
font-weight: 600;
background: transparent !important;
color: inherit !important;
}

/* Body cells */
.project-table td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
color: #222;
}

/* Zebra rows + hover with subtle ASAS-red tint */
.project-table tbody tr:nth-child(even) { background-color: #f7f9fc; }
.project-table tbody tr:hover { background-color: #fdecee; }

/* Fallback: if you forgot <thead>, color the first row anyway */
.project-table tr:first-child {
background-color: #0b2a4d !important;
color: #ffffff !important;
}

/* .project-table th {
    text-align: center;
}
   .project-table td {
   text-align: left;
   color:#222;
}