:root {
  --white: #ffffff;
  --primary: #193C99;
  --primary-light: #4459A9;
  --accent: #ef8a00;
  --text: #0f1724;
  --muted: #6b7280;
  --max-w: 1100px;
}


* {
  box-sizing: border-box;
}


html, body {
  margin:0;
  padding:0;
  font-family:"Inter", Arial, sans-serif;
  background:var(--white);
  color:var(--text);
  overflow-x:hidden;
}


a {
  text-decoration:none;
  color:inherit;
}



/* NAVIGATION */

.nav-wrap {
  display:flex;
  flex-direction:column;
  max-width:var(--max-w);
  margin:0 auto;
  padding:20px 16px;
  border-bottom:1px solid #eee;
}


.logo-link {
  margin-bottom:10px;
}


.solint-logo {
  display:flex;
  align-items:center;
}


.logo-link {
  display:flex;
  align-items:center;
}


.logo-svg {
  height:90px;
  width:auto;
  display:block;
}



.nav-toggle {
  display:none;
  font-size:26px;
  cursor:pointer;
  align-self:flex-end;
}



.main-nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}


.main-nav a {
  color:var(--text);
  font-weight:600;
  padding:8px 12px;
  transition:.2s;
}


.main-nav a:hover {
  color:var(--primary);
}



/* DROPDOWN */

.nav-item {
  position:relative;
}

.nav-link-row {
  display:flex;
  align-items:center;
}


.nav-link-row > a {
  flex:1;
}


.dropdown-toggle {
  border:none;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  padding:8px 8px;
}


.dropdown-toggle:hover {
  color:var(--primary);
}

.dropdown-menu {

  position:absolute;
  top:100%;
  left:0;

  background:white;

  border:1px solid #eee;

  border-radius:8px;

  display:none;

  min-width:180px;

  box-shadow:0 4px 12px rgba(0,0,0,.1);

  z-index:10;

  flex-direction:column;
}


.dropdown-menu a {

  display:block;

  padding:8px 16px;

  font-weight:500;

}


.dropdown-menu a:hover {

  background:var(--primary);

  color:white;

}


.nav-item.dropdown:hover > .dropdown-menu {

  display:flex;

}


.dropdown-menu .nav-item.dropdown:hover > .dropdown-menu {

  display:flex;

  position:absolute;

  top:0;

  left:100%;

}


.nav-item.dropdown.open-left > .dropdown-menu {

  left:auto;
  right:100%;

}



/* HERO */

.hero {
    position: relative;

    min-height: 520px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 5rem 3rem;

    color: #fff;

    background: #193C99;
    overflow: hidden;

    transition: background-image .5s ease;
}

.hero h1 {
    max-width: 700px;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: 1rem;
}

.hero p {
    max-width: 650px;
    font-size: 1.25rem;
    margin-bottom: 2rem;
}


/* BUTTONS */


.btn {

  padding:12px 18px;

  border-radius:10px;

  font-weight:700;

  cursor:pointer;

  transition:.3s;

}


.btn.primary {

  background:var(--primary);

  color:white;

}


.btn.primary:hover {

  background:var(--accent);

}


.btn.ghost {

  border:2px solid #ddd;

}


.btn.ghost:hover {

  border-color:var(--primary);

  color:var(--primary);

}



/* OVERVIEW */

.overview {

  padding:4rem 2rem;

  text-align:center;

  background:#fafafa;

}


.overview-grid {

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

  gap:1.5rem;

}


.overview-card {

  background:white;

  border-radius:12px;

  box-shadow:0 2px 6px rgba(0,0,0,.1);

  padding:1.5rem;

  text-align:left;

}


.overview-card h3 a {

  color:var(--primary);

}


.overview-card p {

  color:#333;

}


.sub-links a {

  color:var(--primary);

}


.sub-links a:hover {

  color:var(--accent);

}



/* PAGES */

.page-header {

  text-align:center;

  padding:3rem 1rem 1rem;

  border-bottom:1px solid #eee;

  background:#fafafa;

}


.page-header h1 {

  font-size:2.4rem;

  color:var(--primary);

}


.page-header .tagline {

  color:var(--muted);

}



.page-content {

  max-width:var(--max-w);

  margin:2rem auto;

  padding:0 1rem;

  line-height:1.6;

}


.page-content h2 {

  color:var(--primary);

}



/* FOOTER */

footer {

  border-top:1px solid #eee;

  text-align:center;

  padding:28px 16px;

  background:#fafafa;

  color:var(--muted);

}


.footer-inner .motto {

  color:var(--primary);

}

/* EVOLVUM LOGO */
.evolveum-logo-link {
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  margin-left:6px;
}


.evolveum-logo {
  height:24px;
  width:auto;
  display:block;
}

/* MOBILE */

@media (max-width:768px){

  .nav-wrap{
    position:relative;
  }


  .nav-toggle{

    display:block;

    font-size:26px;

    cursor:pointer;

    align-self:flex-end;

    border:none;

    background:transparent;

    color:var(--text);

    padding:4px 8px;

  }


  .main-nav{

    display:none;

    width:100%;

    margin-top:16px;

    flex-direction:column;

    gap:0;

  }


  .main-nav.show{

    display:flex;

  }


  .nav-item{

    width:100%;

  }


  .nav-link-row{

    display:flex;

    width:100%;

    border-bottom:1px solid #eee;

  }


  .nav-link-row > a{

    display:block;

    flex:1;

    padding:14px 12px;

  }


  .dropdown-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    padding:0;

    border-left:1px solid #eee;

    font-size:18px;

  }


  .dropdown-menu{

    display:none;

    position:static;

    background:transparent;

    border:none;

    border-radius:0;

    box-shadow:none;

    min-width:0;

    width:100%;

    margin:0;

    padding:0;

  }


  .nav-item.open > .dropdown-menu{

    display:block;

  }


  .nav-item.open > .nav-link-row > .dropdown-toggle{

    transform:rotate(180deg);

  }


  .dropdown-menu .nav-item > .nav-link-row > a{

    padding-left:28px;

  }


  .dropdown-menu .dropdown-menu .nav-item > .nav-link-row > a{

    padding-left:44px;

  }


  .dropdown-menu .dropdown-menu .dropdown-menu .nav-item > .nav-link-row > a{

    padding-left:60px;

  }


  .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .nav-item > .nav-link-row > a{

    padding-left:76px;

  }


  .logo-svg{

    height:55px;

  }

}