:root {
  --main: #e28d2d;
  --accent: #fbba33;
  --light: #f6fbff;
}
body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', 'Roboto', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  background: var(--light);
  color:black;
}
header {
  background: url('https://images.unsplash.com/photo-1429497419816-9ca5cfb4571a?auto=format&fit=crop&w=1300&q=100') center/cover no-repeat;
  transition: background-image 1s ease;
  color: black;
  text-align: center;
  padding: 3.5em 1em 2.5em 1em;
  font-size: xx-large;
  font-weight: 800;
}
header img.logo {
  float: left;
  margin-left: 0;
  margin-top: 1px;
  margin-right: 1em;
  width:200px;
  height: 150px;
  object-fit: cover;
}

nav { display: flex; justify-content: center; background: #fff; box-shadow: 0 1px 4px #0001; }
nav a { color: var(--main); text-decoration: none; font-weight:600; text-transform:uppercase; padding:1em 1.6em; transition: color .15s; }
nav a.active, nav a:hover { color: var(--accent);}
main {max-width: 1150px; margin: auto; padding: 2em 1em;}
.section { display: none;}
.section.active { display: block; animation: fadeIn .7s;}
@keyframes fadeIn { from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);}}
h1,h2,h3 {color: var(--main);}
h2 {margin-top:1.5em;}
ul,ol { margin:1.1em 0 1.1em 2em;}
.features {display:flex;
  flex-wrap:wrap;justify-content:center;gap:1.8em;margin:2.4em 0;flex-direction: row;}
.features div {background:var(--main);color:#fff;padding:1.1em 1.7em;border-radius:13px;font-size:1.1em;box-shadow:0 2px 10px #0022;}
.home-image{ text-align:center;margin: 2em 0;}
.home-image img {max-width: 700px; width:93%;border-radius:13px;box-shadow:0 2px 24px #0002;}
.home-intro{ text-align:center;font-size:1.21em;font-weight:200;}
.grid {display:grid;gap:2em;}
@media (min-width:900px) { .grid-2 {grid-template-columns:1fr 1fr;} }
.team-photo img { width: 95%; max-width:390px; border-radius: 13px; box-shadow:0 2px 10px #0002;}
.card-list {display:flex;flex-wrap:wrap;gap:1.3em;}
.card {background:#fff;border-radius:10px;box-shadow:0 4px 16px #0016;margin:1.1em 0;flex:1 1 250px;max-width:280px;text-align:center;padding:1.1em;}
.card img {width:72px;height:72px;object-fit:cover;border-radius:50%;margin-bottom:1em;}
.table-responsive { overflow-x:auto; }
table {width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 8px #0002;margin:1.5em 0;}
th,td {padding:.6em; border:1px solid #dde;}
th {background:var(--light);color:var(--main);}
@media (max-width:600px){ table,thead,tbody,tr,th,td {font-size: 0.90em;} }
.clients-logo {display:flex;flex-wrap:wrap;gap:2.3em;justify-content:center;margin:2.3em 0;}
.clients-logo img {height: 100px;background:#fafafc;padding: 0.3em;;border-radius:10px;box-shadow:0 2px 8px #0015; }
.clients-logos {display:flex;flex-wrap:wrap;gap:2.2em;justify-content:center;margin:2.3em 0;}
.clients-logos img {height: 250px;background:#fafafc;padding: 0.3em;;border-radius:10px;box-shadow:0 2px 8px #0015; }
.contact-box {background:var(--main);color:#fff;border-radius:11px;padding:2em 1.5em;max-width:400px;margin:2.5em auto;box-shadow:0 3px 25px #10243733;font-size:1.09em; text-align:center;}
.form-wrap input, .form-wrap textarea { width:88%;margin-bottom:1em;padding:.6em;border-radius:7px;border:1px solid #aac;font-size:1em;}
.form-wrap button { background:var(--accent); color:var(--main);font-weight:600;padding:.8em 2em;border:none;border-radius:8px;cursor:pointer;font-size:1em;box-shadow:0 2px 10px #00336612;}
.form-wrap button:active {background:#fcd769;}
.form-status {height:1.5em;margin-top:.7em;}
footer {background: var(--main);color: #fff;text-align: center;padding: 2em 1em;margin-top: 3em;font-size:1.13em;}
::-webkit-scrollbar {width:8px;}
::-webkit-scrollbar-thumb {background:var(--main);border-radius:4px;}
.ba {
  background-color: rgb(52, 128, 183);
  display: inline-block;
  max-width: 90vw;         /* Responsive: never wider than 90% of viewport */
  min-width: 200px;        /* Optional: minimum width for small screens */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin: 0 auto;
  padding: 0.5em 1.5em;
  font-size: medium;
  font-weight: 1000;
  font-family: "gf_Roboto_Flex variant0";
  border-radius: 8px;
}

#home{
  width: 100%;
  justify-content: center;
  flex-direction: row;
}
.home-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* align items to the top */
  flex-direction: row;     /* sidebar and content side by side */
  gap: 2em;                /* space between sidebar and content */
}
.home-image{
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#sideBar {
  width: 48%;
  min-width: 320px;
  max-width: 600px;
  background-color: #5eb336;
  font-size: large;
  border-radius: 12px;
  padding: 1.2em 1em;
  box-sizing: border-box;
  order: 2;
  flex-shrink: 1; /* allow shrinking if needed */
  margin-top: 6em; /* Increased from 4em to 6em to move a little further down */
}
.home-header > div {
  flex: 1 1 0;
  min-width: 0;
  order: 1;
}

/* Responsive: stack sidebar on top for small screens */
@media (max-width: 1200px) {
  #sideBar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    ;
  }
  .home-header {
    flex-direction: column;
    gap: 1em;
  }
}
.la {
  font-size: small;
  margin-top: 0;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.ka{
  font-size: large;
  font-weight: bold;
}
@keyframes fadeScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.clients-logo img {
  animation: fadeScale 1.2s cubic-bezier(.42,0,.58,1) both;
}
.clients-logo img:nth-child(2) { animation-delay: 0.2s; }
.clients-logo img:nth-child(3) { animation-delay: 0.4s; }
.clients-logo img:nth-child(4) { animation-delay: 0.6s; }
.clients-logo img:nth-child(5) { animation-delay: 0.8s; }
h1 {
  color: #cf4e1f; /* Example: deep blue, change as needed */
}