body {
  padding:0px;
  margin:0px;
  padding-top: 3px;
  background-color:#323232;
}

.navbar {
  background-color:#FEF8EC;
  Border-bottom:5px solid #323232;
}
.nav-link{
  color:#323232;

}
.container-fluid
{
  margin:0px;
  padding:0px;
  max-width:calc(100vw);
  overflow:hidden;
}

.link-gold                  {  font-weight: 600; font-size:1.2rem; font-family: 'Roboto', sans-serif; background-image: linear-gradient( to right, #462523 0, #cb9b51 22%,  #f6e27a 45%, #f6f2c0 50%,
                          #f6e27a 55%, #cb9b51 78%, #462523 100% ); color:transparent; -webkit-background-clip:text; text-decoration:none;  text-transform:uppercase;}
                          
h1{
    margin-top:50px;
}
#header
{
background-image: url("/img/header.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-color:#fff;
background-position:top;
border:10px solid #fff;
height:100vh;
width:calc(100vw + 10px);
margin:-10px;
padding:0px;
padding-bottom: 100px; margin-top: -100px
}
.carousel-justify{
    display: flex; /* Zet de display eigenschap op flex om flexbox te gebruiken */
    justify-content: center; /* Centreert de carousel horizontaal */
    align-items: center; /* Centreert de carousel verticaal */
    height: 95vh; /* Zet de hoogte van de header zodat deze het volledige scherm beslaat */
    width:calc(100% - 180px); 
    margin-left:auto; 
    margin-right:auto;
    object-fit: cover; /* Zorgt ervoor dat afbeeldingen de container vullen zonder hun aspectratio te verliezen */

}
/* Algemene stijl voor de carousel */
#carouselExampleIndicators {
    max-width: calc(100% - 40px); /* Pas de breedte van de carousel aan */
    margin: auto; /* Centreer de carousel horizontaal */
}

.carousel-control-prev, .carousel-control-next{
    background-color:transparent; border:0px;
    width:70px;
    
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    background-color: transparent; /* Verwijdert de achtergrondkleur bij hover */
    color: inherit; /* Behoudt de originele kleur van de iconen bij hover */
}
/* Stijl voor de navigatiepictogrammen (volgende/vorige) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #000; /* Achtergrondkleur van de navigatiepictogrammen */
    border-radius: 50%; /* Maakt de navigatiepictogrammen rond */
    padding: 30px; /* Ruimte rondom de navigatiepictogrammen */
}
.carousel-indicators button {
    background-color: #cccccc; /* Lichtgrijze kleur voor niet-actieve slides */
    width: 10px; /* Breedte van de niet-actieve bollen */
    height: 15px; /* Hoogte van de niet-actieve bollen */
    border-radius: 50%; /* Maakt de bollen rond */
    margin: 0 2px; /* Voegt een kleine ruimte toe tussen de bollen */
    opacity: 1; /* Maakt de niet-actieve bollen volledig zichtbaar */
    border:2px solid #cccccc;
}
.carousel-indicators button:hover {
    border:2px solid #323232;
}
/* Stijl voor de actieve indicator */
.carousel-indicators [data-bs-target].active {
    background-color: #323232; /* Wijzig de kleur van de actieve indicator */
    width: 14px; /* Breedte van de actieve indicator */
    height: 17px; /* Hoogte van de actieve indicator */
    border-radius: 50%; /* Maakt de actieve indicator rond */
    border:2px solid #323232;
    margin-top:-1px;
}

main
{
  max-width:calc(100vw);
  background-color:#fff;
  color:#323232;
  min-height:100vh;
}
#woningverbetering
{  
  max-width:calc(100vw);
  background: rgb(50,50,50);
  background: linear-gradient(190deg, rgba(75,75,75,1) 0%, rgba(32,32,32,1) 100%);
  min-height:140vh;
  color:#fff;
}
#isolatie
{  
  max-width:calc(100vw);
  background: rgb(222,222,222);
  background: linear-gradient(190deg, rgba(222,222,222,1) 0%, rgba(191,191,191,1) 100%);
  color:#323232;
  min-height:100vh;
}
#warmtepompen
{  
  max-width:calc(100vw);
  background: rgb(50,50,50);
  background: linear-gradient(190deg, rgba(50,50,50,1) 0%, rgba(0,0,0,1) 100%);
  color:#bebebe;
  min-height:110vh;
}
#zonnepanelen
{  
  max-width:calc(100vw);
  background: rgb(190,190,190);
  background: linear-gradient(190deg, rgba(190,190,190,1) 0%, rgba(124,124,124,1) 100%);
  color:#000;
  min-height:100vh;
}
#faq
{  
  max-width:calc(100vw);
  background-color: #000;
  color:#fff;
  min-height:100vh;
  text-align:left;
}
.accordion-button:focus {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.accordion-button {
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius:15px;
    padding:10px;
    font-size:1.3em;
    cursor: help;
}
.accordion-body {
    padding:10px;
}
footer
{  
  max-width:calc(100vw);
  background-color:#000;
  color:#bebebe;
  border-top:5px solid #323232;
}
.container-center
{
  width:100%; 
  padding:20px;
  text-align:center;
}
.container-left
{
  width:100%; 
  padding:20px;
  text-align:left;
}
.container-right
{
  width:100%; 
  padding:20px;
  text-align:right;
}
.bubble-white{
  background-color:#dedede; color:#323232; width:95%; margin:10px; padding:10px; margin-left:auto; margin-right:auto; border-radius:10px; font-weight:600;
}
.semi-transparent{
    background-color:rgba(255,255,255,0.8);
    padding:10px;
    margin:10px;
    border-radius:10px;
}

#about:target{ padding-top: 100px; margin-top: -100px}
#woningverbetering:target{ padding-top: 100px;margin-top: -100px}
#isolatie:target{ padding-top: 100px;margin-top: -100px}
#warmtepompen:target{ padding-top: 100px;margin-top: -100px}
#zonnepanelen:target{ padding-top: 100px;margin-top: -100px}
@media only screen and (max-width: 1920px) {
  #header
  {
    height:100vh;
  }
    .carousel-justify{
    height:90vh;
    }
}
@media only screen and (max-width: 1680px) {
  #header
  {
    height:80vh;
  }
    .carousel-justify{
    height:80vh;
    }
}
@media only screen and (max-width: 1440px) {
  #header
  {
    height:85vh;
  }
  .hide-1440{
    Display:none;
  }
    #woningverbetering:target{ padding-top: 0px; margin-top: -0px}
    #isolatie:target{ padding-top: 0px; margin-top: -0px}
    #warmtepompen:target{ padding-top: 0px; margin-top: -0px}
    #zonnepanelen:target{ padding-top: 0px; margin-top: -0px}
}
@media only screen and (max-width: 1024px) {
  #header
  {
    height:65vh; 
  }
    .carousel-justify{
    height:65vh;
    }
}
@media only screen and (max-width: 800px) {
  #header
  {
    margin-top:35px;
    height:50vh;
  }
  .container-center
  {
    text-align:left;
  }
  .container-left
  {
    text-align:left;
  }
  .container-right
  {
    text-align:left;
  }
    #carouselExampleIndicators{
    display:none;
    }
}
@media only screen and (max-width: 600px) {
  #header
  {
    margin-top:35px;
    height:45vh;
  }
}