/* Variabelen */
:root {
  --backgroundcolor: #ffffff;
  --Goud: #c5b673; 
  --scroll: #cccccc;
  --scrollhover: #c5b673;
  --Rood: #CC231E;
  --Groen: #34A65F;
  --Donkergroen: #0F8A5F;
  /*--lettertype:  Verdana sans-serif;*/
  --tekstkleur: #222222;
}

/* Dark mode variables */
:root.dark-mode {
  --backgroundcolor: #222222;
  --tekstkleur: white;
  --scroll: #3b3b3b;
  --scrollhover: #c5b6735d;
  --Goud: #c5b673;
  --Rood: #CC231E;
  --Groen: #34A65F;
  --Donkergroen: #0F8A5F;
}

/* Smooth transitions for theme switching */
body, 
header, 
main, 
section, 
article, 
aside, 
footer,
.box,
.theme-toggle,
.faq-link,
.nav-link,
#banner,
#sponsor {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Dark mode specific adjustments */
:root.dark-mode .theme-toggle {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: var(--Goud);
}

:root.dark-mode .theme-toggle:hover {
  box-shadow: 0 4px 15px rgba(197, 182, 115, 0.4);
}

:root.dark-mode .box:hover {
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
}

:root.dark-mode .faq-link {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

:root.dark-mode .faq-link:hover {
  box-shadow: 0 12px 35px rgba(197, 182, 115, 0.4) !important;
}

/* Dark mode sponsor section adjustments */
:root.dark-mode #sponsor1,
:root.dark-mode #sponsor2,
:root.dark-mode #sponsor3,
:root.dark-mode #sponsor4,
:root.dark-mode #sponsor5,
:root.dark-mode #sponsor6,
:root.dark-mode #sponsor7,
:root.dark-mode #sponsor8,
:root.dark-mode #sponsor9,
:root.dark-mode #sponsor10 {
  background-color: white;
  border: 2px solid #333333;
}

:root.dark-mode #sponsor1:hover,
:root.dark-mode #sponsor2:hover,
:root.dark-mode #sponsor3:hover,
:root.dark-mode #sponsor4:hover,
:root.dark-mode #sponsor5:hover,
:root.dark-mode #sponsor6:hover,
:root.dark-mode #sponsor7:hover,
:root.dark-mode #sponsor8:hover,
:root.dark-mode #sponsor9:hover,
:root.dark-mode #sponsor10:hover {
  box-shadow: 0px 0px 15px 0px rgba(197, 182, 115, 0.6);
}

/* Dark mode navigation adjustments */
:root.dark-mode .nav-link {
  background: var(--backgroundcolor);
  border: 3px solid var(--Goud);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

:root.dark-mode .nav-link:hover {
  box-shadow: 0 15px 40px rgba(197, 182, 115, 0.4);
  background: rgba(197, 182, 115, 0.1);
}

/* Dark mode form elements */
:root.dark-mode #email,
:root.dark-mode textarea {
  background-color: #2a2a2a;
  border: 2px solid #444444;
  color: var(--tekstkleur);
}

:root.dark-mode #email:focus,
:root.dark-mode textarea:focus {
  border-color: var(--Goud);
  outline: none;
}

/* Dark mode button adjustments */
:root.dark-mode section a {
  background-color: var(--Goud);
  color: var(--backgroundcolor);
  border-color: var(--Goud);
}

:root.dark-mode section a:hover {
  background-color: var(--tekstkleur);
  color: var(--backgroundcolor);
}

:root.dark-mode article a button {
  background-color: var(--Goud);
  color: var(--backgroundcolor);
  border-color: var(--Goud);
}

:root.dark-mode article a button:hover {
  background-color: var(--tekstkleur);
  color: var(--backgroundcolor);
}

/* Dark mode banner text adjustments */
:root.dark-mode #bannerText {
  color: var(--Goud);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: var(--scroll);
  border-radius: 10px;
  /* height: 2px; */
}

/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollhover);
}
/* Volledige pagina */
body {
  background-color: var(--backgroundcolor);
  font-family: "Akaya Telivigala", cursive;
  color: var(--tekstkleur);
}
/* H1 titels */
h1,
header p {
  font-family: "Dancing Script", cursive;
}

/*opmaak header*/
header {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.logo {
  width: 110px;
  height: 110px;
  top: 50px;
  margin: 0 auto;
  margin-bottom: 50px;
  margin-top: 10px;
}
header figure:nth-of-type(1) img {
  width: 100%;
}

header div {
  width: 100%;
  height: 120px;
  border-bottom-style: solid;
  border-bottom-color: var(--Goud);
  border-bottom-width: 3px;
  margin-bottom: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Theme toggle button - Enhanced positioning */
.theme-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--Goud);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1001;
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(197, 182, 115, 0.4);
}

.theme-toggle:focus {
  outline: 2px solid var(--Goud);
  outline-offset: 2px;
}

.theme-icon {
  transition: transform 0.3s ease;
  line-height: 1;
}

/* Responsive adjustments for theme toggle */
@media screen and (max-width: 821px) {
  .theme-toggle {
    top: 10px;
    right: 10px;
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
}
.banner {
  margin: 0 auto;
  margin-top: 30px;
  width: 100%;
  background-image: url(../images/banner_holidays.png);
  height: 1000px;
  background-size: cover;
  background-position: center;
  background-position-y: bottom;
}
/* .front {
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-image: url(../images/banner_holidays.png);
  background-size: cover;
  background-position: center;
  z-index: 5;
  position: absolute;
  scroll-padding-block-start: 100px;
} */
header h1 {
  position: absolute;
  top: 440px;
  left: 100px;
  color: var(--backgroundcolor);
  font-size: 4rem;
  font-weight: lighter;
}
header span {
  font-weight: bold;
  color: var(--Goud);
}
header p {
  position: absolute;
  top: 640px;
  left: 100px;
  color: var(--backgroundcolor);
  font-size: 1.5rem;
}

/* opmaak section */

main {
  width: 95%;
  margin: 0 auto;
  margin-top: 200px;
}
main section {
  width: 75%;
  margin: 0 auto;
  font-size: 1.3rem;
}
section h2 {
  text-align: center;
  color: var(--Goud);
  padding-bottom: 75px;
  font-family: "Dancing Script", cursive;
  font-size: 3rem;
}
section h2:nth-of-type(2) {
  padding-top: 75px;
}
#container1 {
  display: flex;
  justify-content: space-around;
  /* place it in the center */
  /* margin: 0 auto; */

  margin-bottom: 75px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
}
#container2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 75px;
  border-radius: 12px;
  border-style: inset;
  border-color: var(--Goud);
  border-width: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 25px;
  padding-right: 25px;
  min-width: 700px;
}

@keyframes christmas {
  0% {
    box-shadow: 0px 0px 20px 0px var(--Rood);
  }
  33.33% {
    /* box-shadow: 0px 0px 15px 0px var(--tekstkleur); */
  }
  50% {
    box-shadow: 0px 0px 20px 0px var(--Groen);
  }
  100% {
    box-shadow: 0px 0px 20px 0px var(--Rood);
  }
}

#containerholiday {
  display: flex;
  justify-content: space-between;
  margin-bottom: 75px;
  border-radius: 12px;
  border-style: double;
  border-color: black;
  border-width: 5px;
  /* border-color: white;
  border-width: 1px; */
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 25px;
  padding-right: 25px;
  min-width: 700px;
  animation: christmas 3s infinite;
}
#feestfolder {
  display: flex;
  justify-content: space-between;
  margin-bottom: 75px;
  /* width: 50%; */
 /* height: auto; */
}
#feestfolder img {
  width: 50%;
  height: 50%;
  height: 90vh;
  border-radius: 10px;
  transition: 500ms;
  margin-left: 15px;
  margin-right: 15px;
  border-style: inset;
  border-color: var(--Goud);
  border-width: 4px;
}
#feestfolder img:hover {
  transform: scale(1.04);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
  border-color: white;
}
#folderdownload {
  width: 100%;
  margin: 0 auto;
  margin-left: 15px;
}
/* #stars {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
} */
aside img {
  width: 35px;
  height: 35px;
  margin-right: 0px;
  transition: 500ms;
}
aside figure {
  margin: auto;
}
aside figure img:hover {
  transform: scale(1.4);
  transition: 500ms;
}
#box1 {
  background-image: url("../images/onsaanbod/vanilla.png");
  background-size: 130px;
  background-repeat: no-repeat;
  min-width: 135px;
  width: 175px;
  background-position: 50% 8%;
  transition: 0.5s;
  border-radius: 10px;
  margin-right: 10px;
  margin-left: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  margin-top: 20px;
}
#box1:hover {
  transform: scale(1.1);
  transition: 0.5s;
  box-shadow: 0px 0px 15px 0px var(--tekstkleur);
  cursor: pointer;
}
#box1 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box2 {
  background-image: url("../images/onsaanbod/mokka1.png");
  background-size: 120px;
  min-width: 135px;
  width: 175px;
  background-repeat: no-repeat;
  background-position: 50% 8%;
  border-radius: 10px;
  transition: 0.5s;
  margin-left: 10px;
  margin-right: 10px;
  margin-left: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  margin-top: 20px;
}
#box2:hover {
  transform: scale(1.1);
  transition: 0.5s;
  box-shadow: 0px 0px 15px 0px var(--tekstkleur);
  cursor: pointer;
}
#box2 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box3 {
  background-image: url("../images/onsaanbod/straciatella.png");
  background-size: 110px;
  min-width: 135px;
  width: 175px;
  background-repeat: no-repeat;
  background-position: 50% 8%;
  border-radius: 10px;
  transition: 0.5s;
  /* margin-left: 10px; */
  margin-right: 10px;
  /* margin-top: -4px; */
  margin-left: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  margin-top: 15px;
}
/* #stracciatella {
  margin-top: -15px;
  margin-bottom: 15px;
} */
#box3:hover {
  transform: scale(1.1);
  transition: 0.5s;
  box-shadow: 0px 0px 15px 0px var(--tekstkleur);
  cursor: pointer;
}
#box3 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box4 {
  background-image: url("../images/onsaanbod/milkyChoc1.avif");
  background-size: 105px;
  min-width: 135px;
  width: 175px;
  background-repeat: no-repeat;
  background-position: 50% 14%;
  border-radius: 10px;
  transition: 0.5s;
  margin-left: 10px;
  margin-left: 15px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  margin-top: 15px;
  margin-right: 15px;
}
#box4 figure {
  padding-top: 4px;
}
#box4:hover {
  transform: scale(1.1);
  transition: 0.5s;
  box-shadow: 0px 0px 15px 0px var(--tekstkleur);
  cursor: pointer;
}
#box4 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box5 {
  background-image: url("../images/hot_items/pralines.png");
  background-size: 130px;
  background-repeat: no-repeat;
  background-position: top;
  width: 230px;
  transition: 0.5s;
  padding-left: 20px;
  padding-right: 7px;
  border-radius: 10px;
}
#box5:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--Goud); */
  cursor: pointer;
  background-size: 145px;
  background-position: 50% -5%;
}
#box5 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box6 {
  background-image: url("../images/hot_items/taart4_clean.png");
  background-size: 130px;
  background-repeat: no-repeat;
  background-position: top;
  width: 230px;
  transition: 0.5s;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 10px;
}
#box6:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--Goud); */
  cursor: pointer;
  background-size: 145px;
  background-position: 50% -5%;
}
#box6 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box7 {
  background-image: url("../images/hot_items/frisco3_clean_CROPPED_ROUNDED.png");
  background-size: 130px;
  background-repeat: no-repeat;
  background-position: 50% 12%;
  width: 230px;
  transition: 0.5s;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 10px;
}
#box7:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--Goud); */
  cursor: pointer;
  background-size: 145px;
  background-position: 50% 5%;
}
#box7 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#box8 {
  background-image: url("../images/onsaanbod/speculoos.png");
  background-size: 175px;
  background-repeat: no-repeat;
  background-position: 50% 10%;
  width: 230px;
  min-width: 175px;
  transition: 0.5s;
  padding-left: 7px;
  padding-right: 20px;
  border-radius: 10px;
}
#box8:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--tekstkleur); */
  cursor: pointer;
  background-size: 190px;
  background-position: 50% 5%;
}
#box8 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#holiday1 {
  background-image: url("../images/holiday_specials/vanilla_gold.png");
  background-size: 140px;
  background-repeat: no-repeat;
  background-position: 50% 12%;
  width: 190px;
  transition: 0.5s;
  padding-left: 7px;
  padding-right: 15px;
  border-radius: 10px;
  margin-left: -5px;
}
#holiday1:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--Goud); */
  cursor: pointer;
  background-size: 155px;
  background-position: 50% 5%;
}
#holiday1 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#holiday2 {
  background-image: url("../images/holiday_specials//tropicalberry.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: 50% 12%;
  width: 190px;
  transition: 0.5s;
  padding-left: 15px;
  padding-right: 7px;
  border-radius: 10px;
  margin-left: -15px;
}
#holiday2:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--Goud); */
  cursor: pointer;
  background-size: 165px;
  background-position: 50% 5%;
}
#holiday2 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#holiday3 {
  background-image: url("../images/holiday_specials/pistachhio.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: 50% 12%;
  width: 190px;
  transition: 0.5s;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 10px;
}
#holiday3:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--Goud); */
  cursor: pointer;
  background-size: 165px;
  background-position: 50% 5%;
}
#holiday3 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#holiday4 {
  background-image: url("../images/holiday_specials/yspralines_mix.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: 50% 12%;
  width: 300px;
  transition: 0.5s;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 10px;
}
#holiday4:hover {
  /* transform: scale(1.1); */
  transition: 0.5s;
  /* box-shadow: 0px 0px 15px 0px var(--Goud); */
  cursor: pointer;
  background-size: 165px;
  background-position: 50% 5%;
}
#holiday4 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

section h3 {
  font-weight: bold;
  border-bottom: 1px solid var(--Goud);
  padding-top: 40px;
  padding-bottom: 20px;
  color: var(--Goud);
}
h4:nth-of-type(1) {
  font-weight: bold;
  color: var(--tekstkleur);
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 2rem;
}
h4 {
  font-weight: bold;
  color: var(--Goud);
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.5rem;
}
section p {
  text-align: center;
}
section a {
  text-decoration: none;
  color: var(--backgroundcolor);
  background-color: var(--Goud);
  padding: 8px 15px;
  transition: 500ms;
  margin: 30px;
  border-radius: 5px;
  border-color: var(--Goud);
  border-style: solid;
  font-size: 1.2rem;
}
section a:hover {
  background-color: var(--backgroundcolor);
  color: var(--Goud);
  border-style: inset;
}

.faq-container {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 2rem;
}

.faq-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 180px !important;
  height: 180px !important;
  background-color: var(--backgroundcolor) !important;
  border: 3px solid var(--Goud) !important;
  border-radius: 15px !important;
  color: var(--Goud) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
  padding: 1rem !important;
}

.faq-link:hover {
  background-color: var(--Goud) !important;
  color: var(--backgroundcolor) !important;
  border-color: var(--Goud) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 35px rgba(197, 182, 115, 0.4) !important;
}

.faq-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.faq-link span {
  font-size: 1rem;
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
}



/* opmaak article */

article {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 200px;
}
article figure {
  flex-basis: 50%;
  text-align: center;
}
article div {
  flex-basis: 50%;
}
article div h2 {
  font-size: 3rem;
  font-family: "Dancing Script", cursive;
  color: var(--Goud);
  margin-top: 0px;
  margin-bottom: 45px;
}
article div p {
  width: 75%;
  font-size: 1.2rem;
  line-height: 2rem;
}
article a button {
  border: none;
  background-color: var(--Goud);
  padding: 9px 15px;
  color: var(--backgroundcolor);
  font-family: "Akaya Telivigala", cursive;
  font-size: 1.2rem;
  transition: 500ms;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--Goud);
}
article a button:hover {
  background-color: var(--backgroundcolor);
  color: var(--Goud);
  border-style: inset;
  cursor: pointer;
}

.foto > a > img{
  /* width: 45%; */
  width: 400px;
  border-radius: 7px;
  transition: 500ms;
  margin-top: -50px;
}
.foto > a > img:hover{
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}
/* opmaak aside */

.aside {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 200px;
}
aside iframe {
  flex-basis: 50%;
  border-style: inset;
  border-color: var(--Goud);
  border-radius: 10px;
  border-width: 4px;
}
aside div {
  margin: 0 auto;
  flex-basis: 25%;
  text-align: center;
  margin-top: 35px;
}
aside div p {
  color: var(--Goud);
  font-size: 1.3rem;
}
aside div h3 {
  color: var(--tekstkleur);
  font-family: "Dancing Script", cursive;
  border-bottom: 1px solid var(--Goud);
  padding-bottom: 20px;
  font-size: 2rem;
}
aside div h3:nth-of-type(3) {
  border: none;
}

/* opmaak banner */

#banner {
  margin-top: 200px;
  width: 100%;
  background-image: url(../images/Homepage_banner_bottom-transformed.png);
  background-repeat: contain;
  background-size: cover;
  background-position-y: center;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-family: "Dancing Script", cursive;
  color: black;
}

#bannerText {
  font-size: 3.5rem;
  color: var(--Goud);
  font-family: "Akaya Telivigala", cursive;
  text-align: center;
  margin-top: 45%;
}

/* opmaak sponsor */

#sponsor {
  width: 100%;
  margin-top: 200px;
}
#sponsor h2 {
  text-align: center;
  color: var(--Goud);
  padding-bottom: 75px;
  font-family: "Dancing Script", cursive;
  font-size: 3rem;
}
#sponsorcontainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  gap: 15px;
}
.sponsors p {
  font-size: 1.1rem;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 30px;
  width: 100%;
}
.sponsors {
  width: calc(20% - 12px);
  margin: 0 auto;
  min-width: 140px;
}
#sponsor1 {
  width: 120px;
  height: 120px;
  background-image: url(../images/sponsor\ 2.png);
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor1:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor2 {
  width: 120px;
  height: 120px;
  background-image: url(../images/Sponsor1.png);
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor2:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor3 {
  width: 120px;
  height: 120px;
  background-image: url(../images/Sponsor3.png);
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor3:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor4 {
  width: 120px;
  height: 120px;
  background-image: url(../images/limoncello.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
  transform: rotate(-90deg);
}
#sponsor4:hover {
  transform: scale(1.1) rotate(-90deg);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor5 {
  width: 120px;
  height: 120px;
  background-image: url(../images/sponsor5.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor5:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor6 {
  width: 120px;
  height: 120px;
  background-image: url(../images/soeptrien.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor6:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor7 {
  width: 120px;
  height: 120px;
  background-image: url(../images/sponsor6.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor7:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor8 {
  width: 120px;
  height: 120px;
  background-image: url(../images/combi.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor8:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor9 {
  width: 120px;
  height: 120px;
  background-image: url(../images/stationneke.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor9:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsor10 {
  width: 120px;
  height: 120px;
  background-image: url(../images/waasmarkt.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f8f8;
  border-radius: 50%;
  transition: 500ms;
}
#sponsor10:hover {
  transform: scale(1.1);
  transition: 500ms;
  box-shadow: 0px 0px 15px 0px var(--Goud);
}

#sponsorcontainer div div {
  margin: 0 auto;
}

/* opmaak footer */

footer {
  width: 95%;
  margin: 0 auto;
  margin-top: 200px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}
footer form {
  width: 75%;
}
footer div:nth-of-type(1) h2 {
  font-size: 2rem;
  font-family: "Dancing Script", cursive;
  margin-bottom: 50px;
}
#email {
  border: none;
  margin-bottom: 50px;
  padding: 20px;
  width: 100%;
  font-family: "Akaya Telivigala", cursive;
}

textarea {
  padding: 20px;
  width: 100%;
  scroll-behavior: auto;
  font-family: "Akaya Telivigala", cursive;
  margin-bottom: 50px;
}
textarea::placeholder,
input:nth-of-type(1)::placeholder {
  font-size: 1.1rem;
  color: var(--Goud);
}

footer div:nth-of-type(1) {
  flex-basis: 50%;
}

#footer_buttons {
  display: flex;
  width: 100%;
}
#submit {
  padding: 10px 20px;
  text-align: center;
  border: none;
  background-color: var(--Goud);
  color: var(--backgroundcolor);
  transition: 500ms;
  margin-right: 50px;
  font-family: "Akaya Telivigala", cursive;
  font-size: 1rem;
}
#submit:hover {
  background-color: var(--tekstkleur);
  color: var(--Goud);
  cursor: pointer;
}
#reset {
  padding: 10px 20px;
  text-align: center;
  border: none;
  background-color: var(--tekstkleur);
  color: var(--Goud);
  transition: 500ms;
  font-family: "Akaya Telivigala", cursive;
  font-size: 1rem;
}
#reset:hover {
  background-color: var(--Goud);
  color: var(--tekstkleur);
  cursor: pointer;
}

footer div:nth-of-type(2) {
  flex-basis: 45%;
  text-align: center;
  font-family: "Dancing Script", cursive;
  font-size: 1rem;
}
footer div:nth-of-type(2) div {
  width: 50%;
  margin: 0 auto;
}
footer h3 {
  border-bottom: 1px solid var(--Goud);
  padding-bottom: 20px;
  font-size: 1.6rem;
  /* font-family: "Dancing Script", cursive; */
  font-weight: lighter;
}
footer h3:nth-of-type(4) {
  border: none;
}
footer p {
  color: var(--Goud);
  font-family: "Akaya Telivigala", cursive;
  font-size: 1.2rem;
  font-weight: bold;
}

/* opmaak social */

body > figure {
  display: flex;
  width: 15%;
  margin: 0 auto;
  justify-content: space-between;
  margin-bottom: 100px;
}
body > figure img {
  width: 70px;
  height: 70px;
}

/* ---------------------------------------- */
@media screen and (max-width: 821px) {
  /* complete this media screen to make the whole page responsive */
  /* 1. remove the banner when you open the site on your phone
    2. the sponsors set them under each other
    3. center the text in the footer
    4. make the footer responsive
    5. make the header responsive
    6. make the section responsive
    7. make the article responsive
    8. make the aside responsive
    9. make the social media responsive
    10. make the banner responsive
   */
   .banner {
    display: none;
  }
  #banner {
    display: none;
  }
  #sponsorcontainer {
    flex-direction: column;
    gap: 30px;
    width: 90%;
  }
  #sponsorcontainer div p {
    width: 100%;
    margin-bottom: 30px;
  }
  
  .sponsors {
    width: 60%;
    max-width: 200px;
    margin: 0 auto;
  }

  #container1 {
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-left: 10px;
    /* padding-right: 10px; */
  }
  #container2 {
    /* overflow-x: scroll; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0%;
    width: 60%;
    margin-left: 10px;
    margin-left: auto;
    margin-right: auto;
    /* padding-right: 10px; */
  }
  h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px;
  }
  h4:nth-of-type(1) {
    font-size: 2rem;
    margin-bottom: 3px;
  }
  #feestfolder {
    flex-direction: column;
  }
  #feestfolder img {
    width: 90%;
    height: auto;
    margin-bottom: 15px;
  }
  #feestfolder img:hover {
    transform: none;
    transition: 500ms;
    box-shadow: 0px 0px 15px 0px var(--Goud);
  }
  #folderdownload {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: -50px;
  }
  #containerholiday {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0%;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    /* padding-right: 10px; */
  }
  #holiday1 {
    width: 230px;
    padding-left: 20px;
  }
  #holiday2 {
    width: 230px;
    padding-left: 20px;
  }
  #holiday3 {
    width: 230px;
  }
  #holiday4 {
    width: 230px;
  }
  #holiday4 h3 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #box1 {
    background-size: 100px;
    margin-left: -10px;
  }
  #box2 {
    background-size: 100px;
  }
  #box3 {
    background-size: 95px;
  }
  #box4 {
    background-size: 90px;
    /* margin-right: 10px; */
  }
  #box5 {
    width: 230px;
    padding-left: 7px;
    background-size: 110px;
  }
  #box6 {
    width: 230px;
    background-size: 110px;
  }
  #box7 {
    width: 230px;
    background-size: 110px;
  }
  #box8 {
    width: 230px;
    padding-left: 20px;
    background-size: 155px;
  }
  footer div {
    text-align: center;
  }
  footer {
    flex-direction: column;
  }

  header p {
    font-size: 1rem;
    top: 400px;
    left: 10px;
  }
  .logo {
    width: 110px;
    height: 110px;
  }
  /* main {
    overflow-y: hidden;
  } */
  main section {
    width: 100%;
    font-size: 1rem;
    margin-top: -100px;
  }
  
  article {
    flex-direction: column;
  }

  article figure {
    flex-basis: 100%;
  }

  article div {
    flex-basis: 100%;
    margin-top: 50px;
  }

  article div h2 {
    font-size: 2.5rem;
  }

  article div p {
    width: 100%;
    font-size: 1rem;
  }
  aside {
    flex-direction: column;
  }
  /* #map {
    flex-basis: 100%;
    height: 500px;
  } */
  body > figure {
    width: 50%;
  }
  .foto > a > img{
    width: 100%;
  }
  section {
    overflow-x: hidden;
  }

}

/* Navigation Section Styles */
.navigation-section {
  background-color: var(--backgroundcolor);
  padding: 4rem 2rem;
  margin: 3rem auto;
  border-radius: 20px;
  border: 5px solid var(--Goud);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  max-width: 1200px;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.navigation-section h2 {
  color: var(--Goud);
  font-family: "Dancing Script", cursive;
  font-size: 3rem;
  margin-bottom: 3rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.nav-links {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.nav-link {
  background: var(--backgroundcolor);
  border: 3px solid var(--Goud);
  border-radius: 15px;
  padding: 2.5rem;
  text-decoration: none;
  color: var(--tekstkleur);
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 350px;
  min-height: 200px;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(197, 182, 115, 0.2), transparent);
  transition: left 0.5s ease;
}

.nav-link:hover::before {
  left: 100%;
}

.nav-link:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(197, 182, 115, 0.3);
  border-color: var(--tekstkleur);
  background: rgba(197, 182, 115, 0.05);
}

.nav-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
  line-height: 1;
}

.nav-link h3 {
  font-family: "Dancing Script", cursive;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--Goud);
  font-weight: 700;
  margin-top: 0;
}

.nav-link p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--tekstkleur);
  margin: 0;
  flex-grow: 1;
}

/* Responsive design for navigation */
@media (max-width: 768px) {
  .navigation-section {
    padding: 2rem 1rem;
    margin: 2rem 0;
  }
  
  .navigation-section h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  
  .nav-links {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .nav-link {
    padding: 1.5rem;
  }
  
  .nav-link h3 {
    font-size: 1.5rem;
  }
  
  .nav-icon {
    font-size: 2.5rem;
  }
}

/* Medium screens (tablets) */
@media screen and (max-width: 1200px) and (min-width: 822px) {
  #sponsorcontainer {
    gap: 10px;
  }
  
  .sponsors {
    width: calc(25% - 10px);
    min-width: 120px;
  }
  
  .sponsors p {
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 25px;
  }
}

/* Small screens adjustments */
@media screen and (max-width: 600px) {
  .sponsors {
    width: 80%;
    max-width: 150px;
  }
  
  #sponsor h2 {
    font-size: 2.5rem;
    padding-bottom: 50px;
  }
}