:root{
  --primary:#0b4dbb;
  --dark:#0a2540;
  --border:#e6ecf3;
  --light:#f5f8fc;
  --text-color:#3b4a5a;
}

/* Base Reset and Typography */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;color:var(--text-color);line-height:1.6}
a{text-decoration:none;color:inherit}

/* Header and Navigation */
header{border-bottom:1px solid var(--border)}
.nav{max-width:1200px;margin:auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}

/* --- LOGO STYLES (Two-Line) --- */
.logo{
  display: flex; /* Makes the logo text stack vertically */
  flex-direction: column;
  line-height: 1.1; /* Reduces space between the two lines */
}
.logo-main{
  font-size:22px;
  font-weight:700;
  color:var(--primary);
}
.logo-sub{
  font-size:12px; /* Smaller size for the sub-text */
  font-weight:500;
  color:var(--dark); /* Using dark color for better contrast */
  opacity: 0.8;
  margin-top: 2px;
}
/* ------------------------ */

nav a{
  margin-left:24px;
  font-weight:500;
  color:var(--dark);
  transition: color 0.2s; 
}
nav a:hover {
  color: var(--primary); 
}


/* General Layout */
section{padding:90px 24px}
.container{max-width:1200px;margin:auto}

/* Hero Section */
.hero{
  background:linear-gradient(135deg,#0b4dbb,#0a2540);
  color:#fff;
  padding: 100px 24px; 
}
.hero h1{font-size:44px;margin-bottom:14px}
.hero p{font-size:18px;opacity:.95}

/* Buttons */
.btn{
  display:inline-block;
  margin-top:24px;
  padding:14px 28px;
  background:#fff;
  color:var(--primary);
  border-radius:6px;
  font-weight:600;
  transition: background 0.2s, color 0.2s; 
}
.btn:hover {
  background: var(--dark); 
  color: #fff;             
}

/* Section Headings */
.section-title{
  font-size:32px;
  color:var(--dark);
  margin-bottom:12px;
}
.section-sub{max-width:700px;margin-bottom:50px}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

/* SERVICES / CARDS */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:30px;
}
.card ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 10px;
}
.card ul li {
    margin-bottom: 5px;
}


/* INDUSTRY THUMBNAILS */
.industry-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  transition:.3s;
}
.industry-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:14px;
}
.industry-card h3{
  font-size:16px;
  color:var(--dark);
}
.industry-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}

/* FORMS */
form{
  max-width:520px;
  background:#fff;
  border:1px solid var(--border);
  padding:40px;
  border-radius:14px;
}
input,textarea{
  border:1px solid var(--border);
  width:100%;
  padding:14px;
  margin-bottom:16px;
  border-radius:6px;
}
button{
  padding:14px 26px;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:6px;
  font-weight:600;
  transition: background 0.2s;
}
button:hover {
  background: var(--dark); 
}


/* CTA Section */
.cta{
  background:linear-gradient(135deg,#0a2540,#0b4dbb);
  color:#fff;
  text-align:center;
}

/* Footer */
footer{
  background:#081a33;
  color:#c9d6e4;
  text-align:center;
  padding:40px;
}

/* Mobile Responsiveness Fixes */
@media(max-width:900px){
  /* Base Grid Change */
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}

  /* Navigation Stacking (Crucial Mobile Fix) */
  .nav {
    flex-direction: column; 
    align-items: flex-start; 
    padding-bottom: 5px;
  }
  
  nav {
    margin-top: 15px;
  }

  nav a {
    display: block; 
    margin: 8px 0; 
  }
}