:root {
  --primary-color: rgb(1, 123, 255);
  --secondary-color:hsl(200,100%,75%);
  --image-color: hsl(220, 100%, 60%);
  --almost-white: hsl(0, 0%, 98%);

}

body {
  color: #444;
  background-color: var(--almost-white)
}

.bg-color-primary {
  background-color: var(--primary-color) !important;
}

.verzekeringen-card-svg-image {
  stroke: var(--image-color)
}

.navbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--almost-white)
}

a.navbar-brand {
  font-size: 1.75rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.text-soften {
  opacity: 60%;
}

.btn {
  border-radius: 50rem;
}

.button-background {
  border: 1px solid white;
  color: white;
  width: 200px;
}

.button-background:hover {
  background-color: white;
  color: var(--primary-color);
}

.navbar-nav > li {
  float: left;
  position: relative;
  font-weight: 600;
}

.navbar-nav .active:not(.dropdown-item)::after {
  border-bottom: 2px solid var(--secondary-color);
  /* bottom: -8px; */
  content: " ";
  left: 0;
  position: absolute;
  right: 0;
}

.nav-item.active .nav-link {
  color: #003c7c;
}

.navbar-light .navbar-nav .show > .nav-link {
  text-decoration: underline;
}

.navbar-nav .dropdown-menu {
  top: 43px;

}

.custom-toggler.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(1, 123, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.dropdown-toggle {
  border-bottom: none;
}

.dropdown-item.active, .dropdown-item:active {
  border-bottom: none;
}


#particuliereVerzekeringen {
  font-family: Helvetica;
  color: white;
  background-color: var(--secondary-color);
}

.jumbotron#homeJumbotron {
  height: 425px;
  width: 100%;
  background-color: var(--primary-color);
  background-image: linear-gradient(to right, rgb(1, 123, 255), rgba(255, 255, 255, 0.4)), url('../assets/img/happy-couple-3.jpg');
  
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: top right; 
  color: white;
  border-radius: 0px;
}

/* .jumbotron-image {
  background-image: linear-gradient(to right, rgba(255,0,0,1),  rgba(255,0,0,0));
} */

#jumboImg {
  opacity: 100%;
  height: 450px;
  /* transform: translateY(-80%) scaleX(-1.1); */
  background-repeat: no-repeat;
}

/* .button-card-parent {
  border: 1px solid black;
} 

.verzekeringen-card {
  min-height: 550px;
}

.button-card-parent .button-card {
  
  bottom: 40px;
  left: 17px;  
} */

.usp-icon {
  border: 7px solid white;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}


.verzekeringen-card-body, .simulatie-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.verzekeringen-card, .simulatie-card {
  width: 18rem; 
  border: none;
  border-radius: 25px;
  box-shadow: 0 0 var(--almost-white);
  transition: 0.5s box-shadow ease;
  background-color: var(--almost-white);
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.shimmer {
  height: 100%;
  width: 45px;
  background-color: white;
  position: absolute;
  transform: skewX(-20deg);
  transition: none;
  /* opacity: 0.5; */
  left: -150px;
  opacity: 0.2;
}

.verzekeringen-card:hover .shimmer, .simulatie-card:hover .shimmer {
  transform: skewX(-20deg);
  left: 400px;
  opacity: 0.5;
  transition: all 1s ease-in-out;
}

.verzekeringen-card:hover, .simulatie-card:hover {
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 9px 30px 0 rgba(0, 0, 0, 0.19);

}

.verzekeringen-card .button-card,
.simulatie-card .button-card {
  background-color: var(--almost-white);
  color: var(--primary-color);
  transition: 0.5s background-color ease, 0.5s color ease;
}

.verzekeringen-card:hover .button-card,
.simulatie-card:hover .button-card {
  background-color: var(--primary-color);
  color: #fff;
}

.simulatie-card-title {
  font-weight: 600;
  color: var(--primary-color);
}

.simulatie-card-text {
  color: #555;
}

.card-image {
  width: 200px; 
  height: 150px; 
  margin: 25px auto;
}

.card-img-info {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
}

#clients {
  padding: 60px 0
}

#clients .client-logo {
  padding: 64px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  height: 160px;
  transform: scale(1.0);
  transition: 0.3s transform ease;
}

/* #clients .client-logo:hover {
  border: 3px solid #EEE;
  border-radius: 25px;
} */
/* 
#clients .client-logo:hover img {
  transform: scale(1.2);
  transition: 0.3s transform ease;
} */

@media only screen and (max-width: 768px) {

  /* #client .client-logo {
    padding: 12px;
    background-color: red;
  } */

  #clients img {
    height: 100%;

  }

  .jumbotron#homeJumbotron {
    background-image: none;
  }
}

.footer-title{
  color: white;
  opacity: 0.7;
}

.list-group-item-footer {
  background-color: none;
  list-style-type: none;
  margin: 10px 0;
}

.list-group-item-footer > a {
  color: white;
}

.about-footer {
  list-style-type: none;
  color: white;
  padding-right: 100px;
  padding-left: 16px;
}

#footer-contact-info {
  color: white;
  list-style: none;
}

#footer-contact-info li {
  margin: 10px 0;
}