:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #111;
  --muted: #777;
  --border: #e5e7eb;
  --hover: #f7f7f9;
}

[data-theme="dark"] {
  --bg: #0e0f11;
  --card: #15161a;
  --text: #fff;
  --muted: #aaa;
  --border: #2a2b30;
  --hover: #1b1c21;
}

* {
  margin:0; padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

body {
  background:var(--bg);
  color:var(--text);
  transition:.3s;
}

/* NAV */
nav {
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:1100px;
  padding:14px 24px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(18px) saturate(160%);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}

[data-theme="dark"] nav {
  background:rgba(21,22,26,0.6);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.logo {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  text-transform: lowercase;   /* makes AttoZip → attozip */
  cursor: pointer;
}
.logo:hover {
  color:#001B94;
}
.nav-right { display:flex; gap:18px; align-items:center; }
.nav-link { text-decoration:none; font-size:.85rem; color:var(--text); opacity:.7; transition:.2s; }
.nav-link:hover { opacity:1; }
.toggle { cursor:pointer; opacity:.7; }
.toggle:hover { opacity:1; }

/* MAIN ABOUT WRAPPER */
.about-wrapper {
  width:92%;
  max-width:950px;
  margin:110px auto 70px;  /* REDUCED */
}

/* CARD SECTION */
.section-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:40px 36px;
  margin-bottom:28px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.section-card h2 {
  font-size:26px;
  font-weight:700;
  margin-bottom:14px;
}

.section-card p {
  font-size:15.5px;
  line-height:1.72;
  color:var(--muted);
  margin-bottom:8px;
}

/* ICONS INSIDE CARDS */
.icon {
  width:22px;
  height:22px;
  stroke:var(--text);
  margin-right:10px;
  opacity:.8;
}

.flex {
  display:flex;
  align-items:flex-start;
}

/* CONNECT WITH US (updated) */
.contact-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--hover);
  cursor: pointer;
  transition: .2s;
  border: 1px solid var(--border);
  color: var(--text);
}

.contact-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  stroke: var(--muted);   /* DEFAULT LIGHT GREY */
  fill: none;
  transition: .2s;
}

.contact-item:hover {
  background: var(--border);
}

.contact-item:hover svg {
  stroke: var(--text);    /* ICON BECOMES BLACK */
}
* {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}
/* TRUSTED COMPANIES SECTION */
.trusted-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px 36px;
  margin-top: 30px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);

  max-width: 950px;        /* ✔ prevents overflow */
  margin-left: auto;
  margin-right: auto;
}
.trusted-title {
  font-size: 26px;        /* same as other cards */
  font-weight: 700;
  text-align: left;       /* ← align left */
  margin-bottom: 60px;
}
.company-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;          /* ✔ allows wrapping */
}

.company-row img {
  height: 20px;             /* same height */
  width: auto;
  max-width: 120px;         /* ✔ ensures logo never too wide */
  opacity: 0.55;
  filter: grayscale(100%);
  transition: .25s;
}

.company-row img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* Mobile – reduce size slightly */
@media (max-width: 600px) {
  .company-row img {
    height: 28px;           /* smaller on mobile */
    max-width: 90px;
  }
}
.explore-btn {
  margin: 30px auto 0;    /* center + top margin */
  padding: 12px 28px;
  background: var(--text);
  color: var(--card);
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
  display: inline-block;
}

.explore-btn:hover {
  opacity: .85;
}
.explore-text {
  text-align: center;
  font-size: 15px;
  color: var(--muted);
  margin-top: 50px;
  margin-bottom: 10px;
  user-select: none;
  line-height: 1.72;
}
.company-row img {
  -webkit-user-drag: none;   /* Chrome / Safari */
  user-select: none;         /* no text selection ghost */
}
/* FINAL BRAND CONTAINER */
.brand-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 50px 36px;
  margin-top: 35px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);

  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.brand-logo {
  height: 100px;               /* adjust if needed */
  opacity: 0.55;
  filter: grayscale(100%);
  transition: .25s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.brand-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

.brand-text {
  margin-top: auto;
  font-size: 15px;
  color: var(--muted);
  user-select: none;
}

.section-card, .trusted-section, .brand-section {
    transition: transform .25s ease, box-shadow .25s ease;
}

.section-card:hover, .trusted-section:hover, .brand-section:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}





/* MAIN section-card already gives width = 1100px */

/* TWO BOXES ROW */
.founders-row {
  display: flex;
  gap: 25px;
}

/* SIMPLE PLAIN ROUNDED RECTANGLES */
.founder-box {
  flex: 1;
  background: var(--card);      /* matches theme */
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  text-align: center;

  /* NO SHADOW, NO HOVER, NO POP */
  box-shadow: none;
  transition: none;
}

/* ROUND DP */
.founder-dp {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: var(--border);
  margin: 0 auto 18px;
}

/* TEXT */
.founder-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.founder-role {
  font-size: .9rem;
  opacity: .7;
}

/* MOBILE */
@media (max-width: 700px) {
  .founders-row {
    flex-direction: column;
  }
}