*{box-sizing:border-box;}
body{
margin:0;
font-family:'Inter','Segoe UI',Arial,sans-serif;
background:linear-gradient(180deg,#F7F9FC,#EEF2F7);
color:#1F2937;
}

/* Header */
header{
background:#FFFFFF;
border-bottom:1px solid #E5E7EB;
position:sticky;
top:0;
z-index:10;
}

.navbar{
width:90%;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 0;
flex-wrap:wrap;
}

.logo{
display:flex;
align-items:center;
gap:12px;
font-weight:700;
font-size:18px;
color:#0F172A;
}

.logo img{height:38px;}

nav{
display:flex;
flex-wrap:wrap;
}

nav a{
margin-left:28px;
text-decoration:none;
color:#374151;
font-weight:500;
}

nav a:hover{color:#2563EB;}

/* Sections */
section{padding:80px 10%;}

.hero{
background:#FFFFFF;
text-align:center;
}

.hero h1{
font-size:48px;
font-weight:700;
color:#0F172A;
margin-bottom:20px;
}

.hero ul{
max-width:760px;
margin:0 auto;
text-align:left;
font-size:18px;
line-height:1.9;
color:#374151;
}

h2{
text-align:center;
font-size:32px;
font-weight:700;
color:#0F172A;
margin-bottom:40px;
}

/* Cards */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.card{
background:#FFFFFF;
padding:32px;
border-radius:14px;
border:1px solid #E5E7EB;
transition:transform .25s, box-shadow .25s, border .25s;
}

.card h3{
margin-top:0;
color:#1E3A8A;
font-size:20px;
}

.card ul{
padding-left:20px;
line-height:1.8;
color:#374151;
}

.card:hover{
transform:translateY(-6px);
border:1px solid #2563EB;
box-shadow:0 20px 40px rgba(37,99,235,.15);
}

/* Highlight */
.highlight{
background:linear-gradient(135deg,#0F172A,#1E3A8A);
color:#FFFFFF;
}

.highlight h2{color:#FFFFFF;}
.highlight ul{
max-width:760px;
margin:auto;
font-size:18px;
line-height:1.9;
}

/* Forms */
input,textarea{
width:100%;
padding:14px;
margin-bottom:16px;
border-radius:10px;
border:1px solid #D1D5DB;
font-size:15px;
}

button{
background:#2563EB;
color:#FFFFFF;
border:none;
padding:14px 32px;
border-radius:10px;
font-size:16px;
font-weight:600;
cursor:pointer;
width:100%;
}

button:hover{background:#1E3A8A;}

/* Footer */
footer{
background:#0F172A;
color:#E5E7EB;
text-align:center;
padding:32px;
font-size:14px;
}

/* Mobile */
@media (max-width:768px){
.navbar{flex-direction:column;align-items:flex-start;}
nav{margin-top:12px;}
nav a{margin:8px 16px 0 0;}
section{padding:60px 6%;}
.hero h1{font-size:34px;}
h2{font-size:26px;}
.hero ul, .highlight ul{font-size:16px;}
}


/* Clients & Technology Partners */
.logo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:30px;
  align-items:center;
  justify-items:center;
}
.logo-grid img{
  max-width:220px;
  height:auto;
  opacity:0.9;
  transition:0.3s;
}
.logo-grid img:hover{
  opacity:1;
}


/* ===============================
   Clients & Technology Partners
   Responsive Fix
   =============================== */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  align-items: center;
  justify-items: center;
  margin-top: 30px;
}

.logo-grid img {
  max-width: 160px;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-grid img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Desktop */
@media (min-width: 1024px) {
  .logo-grid img {
    max-width: 200px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .logo-grid img {
    max-width: 120px;
  }
}


/* ===============================
   FINAL HARD FIX: LOGO RESPONSIVENESS
   =============================== */

/* Ensure sections don't overflow */
#clients, #technology-partners {
  width: 100%;
  overflow-x: hidden;
}

/* Constrain grid container */
#clients .logo-grid,
#technology-partners .logo-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  align-items: center;
  justify-items: center;
}

/* Force images to never exceed container */
#clients .logo-grid img,
#technology-partners .logo-grid img {
  max-width: 140px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}

/* Desktop refinement */
@media (min-width: 1024px) {
  #clients .logo-grid,
  #technology-partners .logo-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  #clients .logo-grid img,
  #technology-partners .logo-grid img {
    max-width: 180px !important;
  }
}

/* Mobile hard stop */
@media (max-width: 600px) {
  #clients .logo-grid,
  #technology-partners .logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  #clients .logo-grid img,
  #technology-partners .logo-grid img {
    max-width: 110px !important;
  }
}

/* Absolute safety against viewport overflow */
img {
  max-width: 100%;
}


/* ===== OPTION A CLIENTS GRID (MOBILE SAFE) ===== */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  justify-items: center;
  align-items: center;
}

.client-item {
  text-align: center;
}

.client-item img {
  max-width: 120px;
  width: 100%;
  height: auto;
  margin: 0 auto 8px;
}

.client-item span {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.clients-grid.single {
  grid-template-columns: 1fr;
}

@media (max-width: 768px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-item img {
    max-width: 90px;
  }
}