/* Theme Settings */

:root {
  /* Button Template */
  --btn-color: rgb(227, 163, 6);
  --btn-color-hover: rgb(241, 189, 59);
  --btn-fnt-color: rgb(255, 255, 255);
  --btn-fnt-size: 1.2rem;
  --btn-font-weight: 600;
  --btn-border-radius: 1rem;
  --btn-width: 180px;
  --fnt-color: rgba(3, 33, 78, 1);

  /* Banner Template Settings */
  --banner-font-size: 5rem;
  --subtitle-font-size: 3rem;
  --subtitle-font-color: rgb(94, 94, 84);
}



/* Global Styles */
body {
  background-color: rgb(0, 0, 0);
  font-family: "Open Sans", sans-serif;
}

.footer-container .border-top {
  border-top: 1px solid #ffffff2d !important;
}

.particles-js-canvas-el {
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background: url("../resources/images/background.jpg"),
    linear-gradient(48deg, rgba(255, 255, 255, 1) 25%, rgb(154, 190, 197) 100%);
  
}

/* Important Parent Elements */
.parent-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Important Child Elements */
.child-container {
  z-index: 10; /* Overlays the div on top of particle.js */
  position: relative;
  margin-top: 240px;
  min-height: 65vh;
}

.homepage.child-container {
  margin-top: 40px;
}

.footer-container {
  position: relative;
  color: white;
  margin-top: 100px;
  padding: 20px 0px 10px 0px;
  background-color: #00285b;
  opacity: 0.8;
  text-align: left;
  width: 100%; /* Make the footer span the entire horizontal width */
  z-index: 11; /* Place the footer above the content */
  /* background-color: rgba(0,38,85,0.8); */
}

.footer-container a {
  color: rgba(255, 255, 255, 0.777);
}

.footer-container a:hover {
  color: orange;
}

.logo {
  transition: transform 0.3s ease-in-out;
}

.logo:hover {
  transform: translateY(-10px);
}

.btn {
  transition: transform 0.3s ease-in-out;
}
.btn:hover {
  transform: translateY(-10px);
}

.btn {
  background-color: var(--btn-color);
  color: var(--btn-fnt-color) !important;
  border-radius: var(--btn-radius);
  width: var(--btn-width);
  font-weight: var(--btn-font-weight) !important;
  transition: 0.3s ease-in-out;
}

.btn:hover {
  transition: 0.3s ease-in-out;
  background-color: var(--btn-color-hover);
}

/* Settings for each device. */

/* Mobile */
@media (max-width: 600px) {
  .child-container {
    max-width: 100%;
    min-width: 100%;
  }

}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .child-container {
    max-width: 80%;
    min-width: 80%;
  }

}

/* Desktop */
@media (min-width: 901px) and (max-width: 1200px) {
  .child-container {
    max-width: 80%;
    min-width: 80%;
  }
}

/* Large Desktop */
@media (min-width: 1201px) {
  .child-container {
    max-width: 80%;
    min-width: 80%;
  }
}

/* Navbar animation */
.navbar {
  transition: 0.3s ease-in-out;
  min-height: 25vh;
  transition-timing-function: cubic-bezier(5, 0, 0.2, 1);
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8603816526610644) 66%,
    rgba(213, 248, 255, 0) 100%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8603816526610644) 66%,
    rgba(213, 248, 255, 0) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8603816526610644) 66%,
    rgba(213, 248, 255, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#d5f8ff",GradientType=1);
}

.logo {
  z-index: 9999;
  transition: 0.3s ease-in-out;
  height: 110px;
  transition-timing-function: cubic-bezier(5, 0, 0.2, 1);
}

.close {
  transition: 0.3s ease-in-out;
}

/* Particle.js Container */
.particles-js-canvas-el {
  z-index: 1; /* Underlays the entire page */
  position: fixed; /* Ensures the banner is always on the person's view. */
  top: 0; /* Ensures it's always fixed to the top of the window, through the entire page. */
  left: 0;
}

/* Off-canvas Menu */
.offcanvas-collapse {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  overflow-y: auto;
  visibility: hidden;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

.off-canvas-item {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 3em;
  padding: 0 15px;
  line-height: 1.7rem;
  letter-spacing: 1px;
}

.off-canvas-item a:hover {
  color: rgb(0, 0, 0);
}

.off-canvas-item a {
  color: white;
}

.nav-item.off-canvas-item ul li a:hover {
  text-decoration: none;
}

.nav-link {
  line-height: 30px;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 48;
  z-index: 9999;
}

/* Tool Block Animations */
.tool-link {
  bottom: 0;
  transition: 0.5s;
  padding: 12px 15px;
}

.tool-link:hover {
  background-color: white;
  transform: scale(1.05);
  bottom: 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
}

.categorie-link {
  bottom: 0;
  transition: 0.5s;
  padding: 15px;
  width: 100%;
  min-width: 175px;
  min-height: 150px;
}

.categorie-link:hover {
  background-color: white;
  transform: scale(1);
  bottom: 5px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
}
.categorie-link h3 {
  font-size: 24px;
}

a:hover .icon {
  color: #f6b704;
}

/* Container */
.container {
  max-width: 800px;
  margin: 0 auto;
}

/* Search Heading */
.search-heading {
  font-size: 36px;
  font-weight: normal;
  width: 100%;
  margin-bottom: 20px;
}

/* Tool Parent Link Container */
.link-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.link-container h3 {
  font-size: 35px;
}

.link-container .icon {
  width: 100px;
  height: auto;
}

.tool-link .categorie-link h3 {
  text-decoration: none;
  color: orange;
}
/* Miscellaneous */
.categorie-link {
  text-decoration: none;
  color: black;
  font-weight: lighter;
}

.categorie-link a:hover {
  color: orange;
  text-decoration: none !important;
}
/* h3{
  all:unset !important;
 } */

/* Tool Selection Container at Tool-Categories */
.tool-selection-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.categorie-selection-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -50px;
}

.tool-selection-container .col-3 {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Tool Instruments Container at Tool-Instruments.php */

.instruments-menu .col {
  font-size: 1.7em;
  font-weight: 500;
  padding: 0;
}

.instruments-menu .col .bi {
  margin: 0px 0px 0px 0px;
}

.instruments-menu li {
  font-size: 18px;
}

/* Link overwrites */

.tool-instruments a {
  color: black;
}

.tool-instruments a:hover {
  color: orange;
  text-decoration: none;
}

.instruments-menu ul li {
  list-style: none;
  margin: 0px 0px 8px 0px;
  padding: 0px;
}

.instruments-menu ul {
  padding-inline-start: 5px;
}

.instruments-menu ul li {
  padding: 5px 5px;
  background-color: #ffffff8d;
  border-radius: 8px;
  transition: 0.3s;
}

.instruments-menu ul li:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
  background-color: #fff;}

.tool-selection-container {
  justify-content: left !important;
}

/* Tool Instruments Container at Tool-Categories / Instroom / Uitstroom / Doorstroom.php */
.tool-selection-container > a {
  text-decoration: none !important;
  color: black !important;
  text-align: center;
}

.tool-selection-container > a * {
  line-height: 32px;
}

.tool-selection-container a:hover * {
  color: orange !important;
}

.categorie-link {
  min-width: 200px;
  min-height: 200px;
  max-height: 250px;
  max-width: 250px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

.categorie-link h3 {
  font-size: 20px;
  font-weight: 400;
}

.navbar-toggler {
  position: absolute;
  right: 45px;
  top: 80px;
  transition: 0.3s;
  font-weight: 800;
}

.tool-bar {
  margin-top: -20px;
  margin-bottom: 30px;
}

.tool-bar .bi {
  font-size: 35px;
}

.tool-bar .display-4 {
  padding: 0px;
  font-size: 0;
}

.tool-bar .tool-link {
  width: 150px !important;
}

.tool-bar {
  justify-content: center;
}

.tool-bar .col-4 {
  flex: 0;
}

/* Navbar */
.inline-menu a {
  color: rgba(16, 34, 86, 1);
  font-size: 1.2em;
  padding: 5px 7px 0px 7px;
  text-decoration: none;
  text-transform: uppercase;
}

.inline-menu a:hover {
  color: orange;
  text-decoration: none;
}

.inline-menu {
  padding-top: 20px;
}

.active * {
  color: orange;
}


.small_logo {
  height: auto;
  width: auto;
  margin: 10px;
  width:200px;
}


.back-button:hover .back-button {
  color: orange;
  cursor: pointer;
}