@charset "utf-8";
/* /style.css */

/* ---------- Base / Tokens ---------- */
:root{
  --bg:#efe8dc;
  --bg2:#e8f0ea;
  --surface:rgba(255,255,255,.55);
  --card:rgba(255,255,255,.72);
  --ink:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.12);
  --shadow:0 18px 55px rgba(15,23,42,.10);
  --shadow2:0 10px 28px rgba(15,23,42,.10);
  --radius:22px;

  --accent:#0f766e;
  --accent2:#1b8a6f;
  --accentSoft:rgba(15,118,110,.14);

  --container:1200px;
  --containerWide:1320px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1100px 650px at 15% 0%, rgba(15,118,110,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 10%, rgba(27,138,111,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), #f3efe8 40%, var(--bg2));
  line-height:1.6;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
b,strong{font-weight:750}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.92em;
  background:rgba(15,23,42,.06);
  padding:.12em .35em;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
}

.container{max-width:var(--container); margin:0 auto; padding:0 18px}
.containerWide{max-width:var(--containerWide)}
.small{font-size:.92rem}
.muted{color:var(--muted)}
.divider{height:1px;background:var(--line);margin:14px 0}

/* ---------- Accessibility ---------- */
.skipLink{
  position:absolute; left:-999px; top:12px;
  background:#fff; color:#000; padding:10px 12px;
  border-radius:12px; border:1px solid var(--line);
  z-index:999;
}
.skipLink:focus{left:12px}
:focus-visible{
  outline:3px solid rgba(15,118,110,.30);
  outline-offset:3px;
  border-radius:14px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.58);
  color:var(--ink);
  font-weight:700;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,23,42,.12)}
.btn.primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 16px 40px rgba(15,118,110,.22);
}
.btn.primary:hover{box-shadow:0 22px 48px rgba(15,118,110,.26)}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(15,23,42,.18);
  box-shadow:none;
}
.btn.ghost:hover{background:rgba(255,255,255,.35)}

/* ---------- Header ---------- */
.siteHeader{
  position:sticky; top:0; z-index:50;
  background:rgba(239,232,220,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(15,23,42,.10);
}
.headerRow{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.brandMark{
  width:44px; height:44px; border-radius:16px;
  background:radial-gradient(18px 18px at 30% 25%, rgba(255,255,255,.55), transparent 60%),
             linear-gradient(135deg, #0f766e, #2ab58b);
  box-shadow:0 14px 34px rgba(15,118,110,.20);
  border:1px solid rgba(255,255,255,.35);
}
.brandMark.sm{width:34px;height:34px;border-radius:14px}
.brandText{display:flex; flex-direction:column; line-height:1.15}
.brandName{font-size:1.05rem; font-weight:900; letter-spacing:-.01em}
.brandTag{font-size:.9rem; color:var(--muted)}

.navPill{
  display:flex; align-items:center; gap:8px;
  padding:8px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.navLink{
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  color:rgba(15,23,42,.78);
  border:1px solid transparent;
}
.navLink:hover{background:rgba(255,255,255,.55)}
.navLink.active{
  background:rgba(15,118,110,.13);
  border:1px solid rgba(15,118,110,.22);
  color:rgba(15,23,42,.92);
}

.headerCta{display:flex; gap:10px; justify-content:flex-end}

/* Mobile menu button + drawer (used by current header JS) */
.desktopNav{display:flex}
.menuBtn{
  display:none;
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.58);
  box-shadow:0 10px 28px rgba(15,23,42,.10);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menuBtn:hover{background:rgba(255,255,255,.70)}
.menuBtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(15,118,110,.20), 0 10px 28px rgba(15,23,42,.10);
}
.menuClose{
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.82);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menuClose:hover{background:rgba(255,255,255,.92)}
.menuClose:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(15,118,110,.20), 0 10px 28px rgba(15,23,42,.10);
}

.mobileNav{
  position:fixed;
  inset:0;
  z-index:999;
}
.mobileNav[hidden]{display:none}
.mobileNavBackdrop{
  position:absolute; inset:0;
  background:rgba(15,23,42,.40);
  backdrop-filter: blur(2px);
}
.mobileNavPanel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(86vw, 380px);
  background:rgba(255,255,255,.96);
  border-left:1px solid rgba(15,23,42,.12);
  box-shadow:0 28px 80px rgba(15,23,42,.32);
  display:flex;
  flex-direction:column;
  padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top));
  transform:translateX(14px);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}
.mobileNav.open .mobileNavPanel{transform:translateX(0); opacity:1}

.mobileNavTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:0;
  border-bottom:1px solid rgba(15,23,42,.10);
  margin-bottom:0;
}
.mobileBrand{display:flex; align-items:center; gap:10px}
.mobileBrandText{display:flex; flex-direction:column; line-height:1.15}

.mobileNavLinks{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px 0 14px;
}
.mNavLink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:16px;
  font-weight:900;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.08);
}
.mNavLink:hover{background:rgba(15,23,42,.05)}
.mNavLink.active{
  background:rgba(15,118,110,.13);
  border-color:rgba(15,118,110,.22);
  color:rgba(15,23,42,.92);
}

.mobileNavCtas{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:14px;
  border-top:1px solid rgba(15,23,42,.10);
}

/* Prevent background scroll when mobile menu open */
html.noScroll, html.noScroll body{overflow:hidden}

/* ---------- Hero ---------- */
.hero{padding:26px 0 22px}
.heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}

.pillRow{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.50);
  font-weight:800;
  color:rgba(15,23,42,.78);
}
.pill.small{padding:7px 10px; font-size:.92rem}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 6px 14px rgba(15,118,110,.25);
}

.heroTitle{
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 12px;
}
.accent{color:var(--accent)}
.accent2{color:#1b8a6f}

.heroSub{font-size:1.05rem; margin:0 0 16px; color:rgba(15,23,42,.78)}
.checkList{display:flex; flex-direction:column; gap:10px; margin:16px 0 18px}
.checkItem{display:flex; gap:10px; align-items:flex-start}
.check{
  width:26px; height:26px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(15,118,110,.14);
  border:1px solid rgba(15,118,110,.22);
  color:var(--accent);
  font-weight:900;
  flex: 0 0 26px;
}

.ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 10px}

.trustNote{
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(15,23,42,.12);
}

/* ---------- Media / Cards / Tabs ---------- */
.mediaCard{
  background:rgba(255,255,255,.52);
  border:1px solid rgba(15,23,42,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.mediaCardTop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.mediaTitle{font-weight:950; font-size:1.15rem}
.mediaHint{color:var(--muted); font-size:.95rem; margin-top:2px}

.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 12px}
.tabBtn{
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.55);
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.tabBtn.isActive{
  background:rgba(15,118,110,.14);
  border-color:rgba(15,118,110,.22);
}

.tabPanel{display:none}
.tabPanel.isActive{display:block}

.figure{margin:0}
.figcap{margin-top:10px; color:var(--muted); font-size:.95rem}

.mediaAuto{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  box-shadow:var(--shadow2);
  background:rgba(255,255,255,.55);
}
.mediaAuto img{display:block;width:100%}
.openBadge{
  position:absolute;
  right:12px;
  top:12px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,23,42,.12);
  font-weight:900;
  font-size:.92rem;
  box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.mediaAuto:hover .openBadge{transform:translateY(-1px)}
.playBadge{
  position:absolute;
  left:14px; top:14px;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:rgba(15,118,110,.16);
  border:1px solid rgba(15,118,110,.22);
  font-size:20px; font-weight:900;
  color:var(--accent);
  backdrop-filter: blur(8px);
}

.miniGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.mini{
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.48);
}
.valueTiles{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.tile{
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.48);
}

/* ---------- Sections ---------- */
.section{padding:28px 0}
.section.tint{
  background:rgba(255,255,255,.26);
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.sectionHead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.sectionHead h2{margin:0; font-size:1.85rem; letter-spacing:-.02em}
.sectionHead p{margin:6px 0 0}
.sectionCtas{display:flex; gap:10px; flex-wrap:wrap}

.card{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.55);
  box-shadow:var(--shadow2);
}
.cardTop{display:flex; justify-content:space-between; gap:12px; align-items:center}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}

.featureCard{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.55);
  box-shadow:var(--shadow2);
}
.featureCard h3{margin:0 0 6px}
.featureCard p{margin:0}

.bullets{margin:10px 0 0; padding-left:18px}
.bullets li{margin:6px 0}

.callout{
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(15,118,110,.10);
  border:1px solid rgba(15,118,110,.18);
}

/* Before/After */
.baGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.baCard{
  padding:14px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.55);
  box-shadow:var(--shadow2);
}
.baTop{display:flex; justify-content:space-between; gap:12px; margin-bottom:10px}

/* Who cards */
.whoCard{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.55);
  box-shadow:var(--shadow2);
}
.whoTop{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.whoTop h3{margin:0}

/* Pricing */
.pricingGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.priceCard{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.56);
  box-shadow:var(--shadow2);
}
.priceCard.highlight{
  border-color: rgba(15,118,110,.22);
  box-shadow:0 18px 55px rgba(15,118,110,.18);
}
.priceTop h3{margin:8px 0 6px; font-size:2rem; letter-spacing:-.03em}
.tag{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.56);
}
.priceBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; justify-content:center}
.priceBtns .btn{min-width:160px}

/* FAQ */
.faq{display:flex; flex-direction:column; gap:10px}
.faqItem{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.50);
  padding:12px 14px;
}
.faqItem summary{cursor:pointer; font-weight:900}
.faqBody{margin-top:10px; color:var(--muted)}

/* Final CTA */
.finalCta{
  margin-top:16px;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(15,118,110,.18);
  background:rgba(15,118,110,.08);
  display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.finalCta.compact{padding:16px}
.finalCta h3{margin:0}
.finalCta p{margin:6px 0 0}
.finalBtns{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Inner pages ---------- */
.pageHero{padding:26px 0 12px}
.pageHeroGrid{
  display:grid;
  grid-template-columns: 1fr .95fr;
  gap:14px;
  align-items:start;
}
.pageHero h1{margin:0 0 8px; font-size:2.3rem; letter-spacing:-.03em}
.pageHeroMedia{align-self:start}

.h3{font-size:1.25rem; margin:0}

/* Tables */
.tableWrap{overflow:auto; border-radius:18px; border:1px solid rgba(15,23,42,.10)}
.table{width:100%; border-collapse:collapse; background:rgba(255,255,255,.55)}
.table th,.table td{padding:12px 12px; border-bottom:1px solid rgba(15,23,42,.10); text-align:left}
.table th{font-weight:950}

/* Legal prose */
.prose{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.55);
  box-shadow:var(--shadow2);
}
.prose h2{margin:18px 0 8px; letter-spacing:-.02em}
.prose p{margin:8px 0}
.prose ul{margin:8px 0; padding-left:18px}
.link{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

/* Media wrapper for videos created by JS */
.mediaWrap{position:relative; border-radius:18px; overflow:hidden}

/* ---------- Footer ---------- */
.siteFooter{
  margin-top:22px;
  padding:22px 0 16px;
  border-top:1px solid rgba(15,23,42,.10);
  background:rgba(239,232,220,.55);
  backdrop-filter: blur(10px);
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:14px;
  align-items:start;
}
.footerBrandTop{display:flex; gap:12px; align-items:flex-start}
.footerName{font-weight:950; font-size:1.05rem}
.footerTitle{font-weight:950; margin-bottom:8px}
.footerLink{
  display:block;
  padding:6px 0;
  color:rgba(15,23,42,.80);
}
.footerLink:hover{color:var(--accent)}
.footerMini{margin-top:10px}
.footerBottom{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.08);
  display:flex; justify-content:space-between; gap:10px; align-items:center;
}
.backTop{font-weight:900; color:rgba(15,23,42,.80)}
.backTop:hover{color:var(--accent)}


/* Prevent horizontal scroll on mobile */
html{overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}}
body{overflow-x:hidden}
/* Prevent flex/grid children from forcing horizontal scroll */
.headerRow > *, .heroGrid > *, .pageHeroGrid > *, .footerGrid > *{min-width:0}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  /* Header: 2-row layout on tablets */
  .headerRow{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap:10px;
    padding:12px 0;
  }
  .brand{grid-area:brand}
  .navPill{grid-area:nav}
  .headerCta{grid-area:actions; justify-content:flex-end}

  /* Layout */
  .heroGrid{grid-template-columns:1fr; gap:12px}
  .pageHeroGrid{grid-template-columns:1fr; gap:12px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .pricingGrid{grid-template-columns:1fr}
  .baGrid{grid-template-columns:1fr}
  .miniGrid{grid-template-columns:1fr}
  .valueTiles{grid-template-columns:1fr}
  .footerGrid{grid-template-columns:1fr; gap:12px}
  .finalCta{flex-direction:column; align-items:flex-start}
  .sectionHead{flex-direction:column; align-items:flex-start}
}

@media (max-width: 760px){
  /* Container + overall */
  .container{padding:0 14px}

  /* Header: compact + hamburger */
  .headerRow{
    grid-template-areas:"brand actions";
    grid-template-columns: 1fr auto;
    gap:12px;
    padding:10px 0;
  }
  .brand{grid-area:brand}
  .headerCta{grid-area:actions}
  .desktopNav{display:none}

  .menuBtn{display:inline-flex}
  .headerContact{display:none}
  .brandTag{display:none}
  .brandName{font-size:1.0rem}

/* Hero: tighter, more "app-like" */
  .hero{padding:18px 0 18px}
  .pillRow{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    margin-bottom:12px;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .pillRow::-webkit-scrollbar{display:none}
  .pill{white-space:nowrap; padding:8px 12px; font-size:.92rem}

  /* FIX #1: Keep Part 1 first on mobile (remove "Part 2 first" behavior) */
  .heroGrid{
    display:grid;                /* back to grid instead of column flex */
    grid-template-columns:1fr;   /* single column */
    gap:12px;
    width:100%;
  }

  /* FIX #2: Prevent hero text cutting / horizontal overflow on mobile */
  .heroGrid > *{min-width:0; max-width:100%;}
  .heroTitle{
    font-size: clamp(1.9rem, 7.2vw, 2.6rem);
    line-height:1.06;
    text-wrap:balance;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
    max-width:100%;
  }
  .heroSub{
    font-size:1rem;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .ctaRow{
    flex-wrap:wrap;
    width:100%;
  }
  .ctaRow > *{min-width:0; max-width:100%;}
  .btn{max-width:100%;}

  /* Tabs scroll instead of wrapping awkwardly */
  .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabBtn{white-space:nowrap}
}

/* --- MOBILE MENU OVERRIDES (solid drawer) --- */
@media (max-width: 760px){
  /* Darken page behind drawer like Indiakartz */
  .mobileNavBackdrop{ background: rgba(15,23,42,.50); backdrop-filter: none; }

  /* Drawer: solid white, opens from LEFT */
  .mobileNavPanel{
    left: 0; right: auto;
    background: #fff !important;
    border-left: 0;
    border-right: 1px solid rgba(15,23,42,.12);
    width: min(86vw, 420px);
    transform: translateX(-16px);
    opacity: 0;
}
  .mobileNav.open .mobileNavPanel{ transform: translateX(0); opacity: 1; }

  /* Links: full-width rows (no pills / no transparency) */
  .mobileNavLinks{ gap: 0; padding: 0; }
  .mNavLink{
    border-radius: 0;
    background: #fff;
    border: 0;
    border-bottom: 1px solid rgba(15,23,42,.10);
    padding: 18px 18px;
    font-weight: 900;
    font-size: 1.2rem;
  }
  .mNavLink:hover{ background: rgba(15,23,42,.03); }
  .mNavLink.active{
    background: #e7f4f1;
    color: rgba(15,23,42,.95);
  }

  /* Keep CTAs separated */
  .mobileNavCtas{ background: #fff; }
}
/* --- END MOBILE MENU OVERRIDES --- */
/* Desktop only: center the nav group in header */
@media (min-width: 981px){
  .headerRow{
    grid-template-columns: 1fr auto 1fr;
  }
  .desktopNav{
    justify-self: center;
  }
  .headerActions{
    justify-self: end;
  }
}