/* Kleurvariabelen */
:root{
  --accent: #00004d;
  --accent-light: #ffffff;
  --muted: #6c757d;
  --bg-hero: #f8f9fa;
  --panel-bg: #ffffff;
}

@font-face {
  font-family: 'Indigo Regular';
  src: url('../fonts/Indigo-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'coolvetica-rg';
  src: url('../fonts/coolvetica-rg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Lettertype */
body{
 
  color: #000042 !important;;
}

/* Navigatie */
.navbar{
  background-color: var(--accent) !important;
}
/* .navbar .navbar-brand,
.navbar .btn{
  color: var(--accent-light) !important;
} */
.navbar .btn-primary{
  background-color: var(--accent);
  color: var(--accent-light) !important;
  border: none;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

/* Hero */
.hero{
  background: var(--accent);
  /* padding:6rem 0; */
  color: var(--accent-light);
}
.hero .lead{
  font-size:1.15rem;
  line-height:1.6;
  color: var(--accent-light);
}
.tagline{
  letter-spacing:.02em;
  font-weight:600;
  color: var(--accent-light);
}

/* CTA-knoppen */
.cta-btn{
  border-radius: .5rem;
  padding: .75rem 1.25rem;
}
.btn-primary{
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover{
  background-color: #000044;
  border-color: #000044;
}
.btn-outline-secondary{
  color: var(--accent-light);
  border-color: var(--accent-light);
}
.btn-outline-secondary:hover{
  background-color: var(--accent-light);
  color: var(--accent);
}

.top-navbar{
  background-color: #000044!important;
}
.top-navbar img{
  height: 100px;
  width: auto;

}

.mid-navbar{ 
  background-color: white!important;
  
}

.mid-navbar p{
  color: #000044;
  font-size: 40px;
    margin:16px 0;
  padding: 0;
  font-weight: 400;
  font-family: 'Indigo Regular', sans-serif;
}

@media (max-width: 568px){
  .mid-navbar p{
    font-size: 24px;
  }
}


.mid-navbar p:hover{
  color: #000042;
}


.bottom-navbar{
   font-family: 'coolvetica-rg', sans-serif;
  background-color: #000044!important;
}
.bottom-navbar p{
  color: white;
  font-family: 'Indigo Regular', sans-serif;
  font-size: 64px;
  
}
@media (max-width: 568px){
  .bottom-navbar p{
    font-size: 32px;
  }
}

.hero-image{
  width: 100%;
  max-height: 85vh;
  object-fit: cover;
}

/* Panels */
.panel{
  background:var(--panel-bg);
  border-radius:.5rem;
  padding:1.25rem;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}

/* Values */
.values .value{
  min-height:120px;
}

.invest-image{
  position: relative;

}

.invest-image img{
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: cover;
}


/* Footer */
footer{
  padding:2rem 0;
  background:#f1f3f5;
}

.why-sordino{
  background-color: #000042;
  color: white;
}

/* Mobile */
@media (max-width:767px){
  .hero{
    padding:3rem 0;
  }
}
.accordion-item{
  border: none;
  background-color:transparent;
}
.accordion-header button {
  background-color: #000042;
  color: #fff;
  border: none;              
  border-bottom: 1px solid #444a7d;
  box-shadow: none;
}

.text-muted a{
  color: #000042;
}

/* uitgeklapt dezelfde stijl houden */
.accordion-button:not(.collapsed) {
  background-color: #000042;
  color: #fff;
  box-shadow: none!important;
  border-bottom: 1px solid #444a7d;
}

/* het pijltje */
.accordion-button,
.accordion-button:not(.collapsed),
.accordion-button:focus {
  background-color: #000042 !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid #FFF !important;
  border-radius: 0px!important;
}

/* Het pijltje altijd wit */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.3s ease;
}

.accordion-body{
  background-color: #000042;
  color: #FFF;
}

.accordion-button, 
.accordion-header, 
summary {
  outline: none!important;
  -webkit-tap-highlight-color: transparent!important; /* voorkomt grijs/blauw randje op mobiel */
} .accordion-button:focus,
.accordion-header:focus,
summary:focus {
  outline: none;
  box-shadow: none;
}