:root {
  --navy: rgba(0, 48, 146, 1);
  --navy-light: rgba(21, 93, 238, 1);
  --color-bttnCard: rgb(255, 0, 119);
  --color-bttnCard-hover: rgb(255, 0, 80);
  --blue-dark: rgb(126, 146, 236);
  --teal: rgba(0, 135, 158, 1);
  --blue-light: rgba(21, 241, 221, 0.2);
  /* --textColor-light: rgb(240, 245, 225); */
  --light: rgba(255, 242, 219, 1);
  --textColor-dark: rgb(124, 10, 10);
  --boxSadow: 3px 3px 8px rgba(128, 128, 128, 0.5);
  /* --border-dark: 2px solid rgb(0, 0, 255); */
  --border-light: 2px solid rgba(21, 241, 221, 0.2);
  --orangeYellow: rgba(255, 171, 91, 1);
  --bgTd: rgb(220, 220, 220);
}
html {
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
/* background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
  background-size: cover; */

/* video background */
/* #background-video {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
} */
header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* ############  GOOGLE TRANSLATE ################# */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-simple img {
  display: none !important;
}
.goog-tooltip {
  display: none !important;
  
}
.goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight {
  background-color: transparent !important;
  color: red !important;
  border: none !important;
  box-shadow: none !important;
}
/* ################################################ */
.logo {
  height: 5em;
  width: 5em;
  border-radius: 1em;
  margin-left: 0.5em;
}
nav {
  background: linear-gradient(
    to right,
    rgba(3, 110, 197, 0.85),
    rgba(34, 174, 213, 0.85)
  );
}
.nav-link {
  color: white;
  padding-left: 15px;
}
.nav-link:hover {
  color: var(--orangeYellow);
}
ul {
  list-style-type: none;
}
.nav-item :hover {
  color: yellow;
  background-color: rgba(0, 221, 255, 0.7);
  border-radius: 5px;
}
.blueBg {
  background-color: rgba(0, 184, 228, 1);
}
.nieuwsBg {
  height: 150px;
  width: 100%;
  background-image: radial-gradient(
    rgba(0, 104, 231, 1),
    rgba(21, 241, 221, 0.2)
  );
}
.nieuwsBtn {
  border: 5px solid yellow;
  box-shadow: 0px 0px 45px yellow;
  background-color: rgb(104, 89, 89);
  color: lime;
  letter-spacing: 1px;
}
.nieuwsBtn:hover {
  border: 5px solid lime;
  box-shadow: 0px 0px 45px lime;
  background-color: rgba(0, 255, 0, 0.65);
  color: rgb(1, 1, 180);
}

.card {
  background-color: var(--orangeYellow);
}

.showCase {
  background-color: var(--orangeYellow);
}

.tours {
  padding: 80px 0;
}
.card {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border-radius: 15px;
}
.img1 img {
  /* height: 300px; */
  border-radius: 15px;
  border-top-left-radius: 15px;
  width: 100%;
}
.reserveerBtn {
  color: aliceblue;
  width: 100%;
}
.reserveerBtn:hover {
  color: red;
}
.logoBoek {
  height: 50px;
}
.reserveer {
  border: 2px solid rgb(11, 11, 128);
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  width: 80%;
  border-radius: 50px;
  background-color: var(--color-bttnCard);
  transition: all 0.3s ease-in;
}
.reserveer:hover {
  background-color: rgb(200, 72, 153);
  box-shadow: 0 0 8px #fff;
  border: 2px solid white;
}

.mailIco {
  font-size: 30px;
}
.whatsapp {
  color: rgb(0, 119, 0);

  font-size: 35px;
}
.whatsapp:hover {
  color: rgb(1, 131, 1);
}
.accordion-button {
  background-color: var(--orangeYellow);
  color: var(--color-bttnCard);
  border: 1px solid blue;
  font-size: 12px;
  height: 10px;
}
.accBody {
  border: 1px solid blue;
  border-radius: 5px;
  color: var(--textColor-dark);
  background-color: var(--bgTd);
}

/* Open accordion kleur */
.accordion-button:not(.collapsed) {
  background-color: var(--navy);
  color: var(--light);
}

/* Gesloten accordion kleur */
.accordion-button.collapsed {
  background-color: var(--orangeYellow);
  color: var(--textColor-dark);
}
.accordion-button::after {
  filter: invert(0%); /* Makes it white */
}

/* Change chevron color when accordion is open */
.accordion-button:not(.collapsed)::after {
  filter: invert(100%); /* Makes it black */
}
.table .custom-td {
  background-color: var(--bgTd);
  color: var(--textColor-dark);
}
#card-row {
  background-color: antiquewhite;
  max-width: 40em;
}
.cardText {
  color: var(--textColor-dark);
  font-weight: bolder;
}
.cardTextLight {
  color: var(--textColor-dark);
}

.prijsText {
  background-color: var(--color-bttnCard);
  color: white;
  font-weight: bold;
  width: 50%;
  margin: auto;
  padding: 5px 0;
  border-radius: 5px;
}
.textBijz {
  font-size: 12px;
  text-align: start;
  /* color: red; */
  /* font-weight: bolder; */
  background-color: var(--bgTd);
}
#card-row img {
  max-width: 35%;
  margin: auto;
  padding: 0.5em;
  border-radius: 1em;
}

/* @media (min-width: 768px) {
  .news-input {
    width: 50%;
  }
} */
.acc {
  /* border: 2px solid blue; */
  border-radius: 10px;
}

/* ##############  ratingSide  ################### */
.canvas {
  background-color: var(--navy);
}
.contSide {
  background-color: var(--orangeYellow);
  border: 2px solid white;
  border-radius: 5px;
}
.titleSide {
  /* position: absolute; */
  display: block;

  border-radius: 5px;
  color: var(--textColor-dark);
  padding-bottom: 30px;
  padding-left: auto;
  padding-right: auto;
}
.imgSide img {
  position: relative;
  display: block;

  width: 80px;
  height: 80px;
  border-radius: 40px;
  border: 2px solid white;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
}
.fa {
  color: gray;
}
.tableRe {
  border: 1px solid orange;
  margin: 5px 0;
  border-radius: 25px;
}
.tableRev {
  /* width: 100%; */
  border: 1px solid orange;
  background-color: rgb(190, 190, 190);
  border-radius: 5px;
  margin-top: 5px;
}
.c1Table {
  /* background-color: red; */
  width: 40%;

  text-align: start;
  font-weight: 600;
  font-size: 13px;
}
.c2Table {
  width: 35%;
  background-color: rgb(190, 190, 190);
  text-align: start;
  padding-left: 10px;
  font-size: 13px;
}
.c3Table {
  background-color: rgb(168, 164, 164);
  width: 25%;
}
.review {
  text-align: start;
  font-size: 13px;
}
.leesM {
  font-size: 13px;
}
#button {
  color: white;
  background-color: var(--color-bttnCard);
  border-radius: 20px;
  width: 300px;
  margin-bottom: 5px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  /* padding: 40px 0; */

  border-radius: 20px;
  border: 2px solid rgb(255, 253, 253);

  background-color: orange;
}
.mainDiv {
  min-height: 100px;
  border: 2px solid rgb(255, 255, 255);
  background-color: var(--light);
  margin: 0 2px;
  border-radius: 10px;
  z-index: 20;
}

@media (max-width: 750px) {
  #background-video {
    display: none;
  }
}