/* ==========================================================================
   SONNAR brand overrides for the Innovatik template
   Brand palette: leaf green #58a83c · deep green #14532d · accent #7ac943
   ========================================================================== */

:root{
  --sonnar-green:#58a83c;
  --sonnar-green-light:#7ac943;
  --sonnar-green-dark:#14532d;
  --sonnar-ink:#1c2b1f;
}

/* ---- Logo ---- */
#logo img{ max-height:48px; width:auto; }
#logo a{ display:inline-block; }

/* ---- Hero / parallax backgrounds: brand green gradients ---- */
#header-background{
  background:linear-gradient(125deg,#14532d 0%,#2f7d32 45%,#58a83c 100%) !important;
  background-attachment:fixed !important;
}
#header-background::before{
  background:radial-gradient(circle at 80% 20%, rgba(122,201,67,.30) 0%, rgba(20,83,45,0) 55%) !important;
}
#parallax-background{
  background:linear-gradient(120deg,#1b5e20 0%,#388e3c 60%,#58a83c 100%) !important;
}
#parallax-background::before{
  background-color:rgba(10,40,20,.45) !important;
}
#parallax-background-prices{
  background:linear-gradient(135deg,#14532d 0%,#2f7d32 100%) !important;
}
#parallax-background-prices::before{
  background-color:rgba(10,40,20,.55) !important;
}
#parallax-background-team{
  background:#f4f9f1 !important;
}

/* subtle brand tint behind the booking/feature strip */
#booking-section .form-container{
  border-top:4px solid var(--sonnar-green);
}

/* ---- Section title accent ---- */
.titlearea h3{ color:var(--sonnar-green); letter-spacing:2px; }

/* ---- Feature icons ---- */
.feature-box .icon, .feature-box2 .icon{ color:var(--sonnar-green); }

/* ---- Stats / social section recoloured to greens ---- */
#social-section .sb-facebook{ background:#14532d; }
#social-section .sb-twitter{ background:#2f7d32; }
#social-section .sb-google-plus{ background:#3f9142; }
#social-section .sb-linkedin{ background:#58a83c; }
#social-section .sb-icon-mail{ background:#6fb84a; }
#social-section .sb-dribbble{ background:#7ac943; }

/* ---- Language switcher (top bar) ---- */
.lang-switch{ list-style:none; margin:0; padding:0; display:inline-flex; gap:6px; }
.lang-switch li{ display:inline-block; }
.lang-switch a{
  display:inline-block; padding:2px 9px; border-radius:3px;
  font-size:13px; font-weight:600; color:#7a7a7a; text-decoration:none;
  border:1px solid transparent;
}
.lang-switch a:hover{ color:var(--sonnar-green); }
.lang-switch a.active{
  background:var(--sonnar-green); color:#fff; border-color:var(--sonnar-green);
}

/* ---- Footer brand logo ---- */
.footer-brand img{ max-height:44px; margin-bottom:18px; }

/* ---- Pill badges used in module lists ---- */
.tag-list{ list-style:none; padding:0; margin:18px 0 0; }
.tag-list li{
  display:inline-block; margin:0 8px 10px 0; padding:7px 14px;
  background:#eef6e9; color:#2f7d32; border-radius:30px;
  font-size:13px; font-weight:600;
}

/* stat numbers */
.stat-number{ color:var(--sonnar-green); font-weight:800; }

/* ---- Sticky header fix ----
   The template sets #header{position:fixed} with no top on desktop, which
   detaches the white nav bar and floats it over the page (transparent-looking
   gap behind it) while scrolling. Keep the header in flow normally and pin it
   to the top only once the .sticky class is added on scroll. */
@media (min-width:1025px){
  #header{ position:relative !important; top:auto; }
  #header.sticky{
    position:fixed !important;
    top:0; left:0; right:0; width:100%;
    background:#fff !important;
    box-shadow:0 2px 14px rgba(20,83,45,.14);
    border-bottom:1px solid #eef2ec;
  }
}

/* Solid, non-transparent top bar so nothing shows through the nav */
#topbar.topbar-transparent{ background:#fff !important; }
#header, .header-white{ background:#fff !important; }

/* ---- Header layout: logo and menu on the same row ----
   The template floats the nav right and yanks it up with a negative margin,
   but the non-floated logo block pushes the nav onto a second row. Lay the
   header out with flexbox on desktop so the menu sits beside the logo. */
@media (min-width:1025px){
  #header-wrap > .container{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  }
  #logo{ width:auto; padding-top:0; float:none; }
  #logo img{ float:none; margin-top:0; }
  .main-menu{ float:none; }
  .main-menu .navigation{ float:none; margin-top:0; }
  .main-menu .navbar-collapse{ display:block !important; }
  /* compact item spacing so the longer Spanish labels stay on one row */
  .main-menu .navigation li a{ padding-left:13px; padding-right:13px; }
  #logo img{ max-height:44px; }
}

/* ---- Stat boxes (social-section): show numbers and fix icons ---- */
#social-section .socialbox{ cursor:default; padding:34px 10px; }
#social-section .socialbox .stat-ico{
  display:block; font-size:40px; color:#fff; margin-bottom:14px; line-height:1;
}
#social-section .socialbox .fan-count{
  opacity:1 !important; visibility:visible !important; height:auto !important;
  transform:none !important; color:rgba(255,255,255,.85) !important;
  font-size:13px; letter-spacing:1px;
}
#social-section .socialbox .fan-count > span{
  font-size:30px; font-weight:700; display:block; margin-bottom:2px;
}
#social-section .socialbox:hover .stat-ico{ transform:none !important; }
#social-section .socialbox:hover .fan-count{ transform:none !important; }

/* ---- Restore the floating "platform" card (was #booking-section) ----
   Renaming the section to #platform dropped the template's .form-container
   styling, leaving the card flush against the hero. Re-apply it here. */
#platform .form-container{
  margin:-110px auto 0;
  position:relative;
  width:100%;
  background:#fff;
  padding:70px 60px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  box-shadow:0 0 15px 0 rgba(0,0,0,.06);
}
#platform .form-container h2{
  font-family:'Work Sans', sans-serif;
  font-size:38px; line-height:50px; font-weight:600; color:#282828;
}
#platform{ padding-bottom:60px; }
@media (max-width:560px){ #platform .form-container{ padding:40px 20px; } }

/* Give the hero a little more breathing room above the overlapping card */
#header-background .intro{ padding-bottom:60px; }

/* ---- About-us tiles: center the logo image within the square ---- */
#why .box img{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;      /* fill the square, keep the logo centred */
  object-position:center;
}

/* ---- Offset anchor jumps so the fixed header doesn't cover section tops ---- */
#home,#platform,#modules,#why,#how,#licensing,#industries,#contact{
  scroll-margin-top:96px;
}

/* ---- Equal-height feature cards in the modules/service section ---- */
@media (min-width:768px){
  #modules .row{ display:flex; flex-wrap:wrap; }
  #modules .row > [class*="col-"]{ display:flex; }
  #modules .feature-box2{ width:100%; height:100%; margin-bottom:0; }
  #modules .row:first-of-type{ margin-bottom:30px; }
}

/* ---- Preserve section backgrounds after renaming template IDs ---- */
#platform, #modules, #industries{ background-color:#f6fcfd; }
#modules{ padding:70px 0 40px; }
#industries{ padding:80px 0; }
#industries .feature-box .icon{ font-size:40px; }
#industries .feature-box .name{ margin-top:10px; }