/* Reset standaard marges en paddings */
body, h1, h2, h3, h4, h5, h6, p, ul, li {
   margin: 0;
   padding: 0;
}


/* Algemene stijlen */
body {
   font-family: 'Roboto', sans-serif;
   color: #000000;
   line-height: 1.6;
   width: 100%;
}


.container {
   max-width: 100%;
   margin: 0 auto;
   padding: 0;
}

/* Header sectie */
.header {
   background-color: #000000;
   color: #fff;
   text-align: center;
   border-bottom: 4px solid #fa0000;
   width:100%;
   display:flex;
   flex-direction: column;
}

#logo{
   width: 40%;
   margin:auto;
}


.header nav ul {
   list-style: none;
   padding: 0;
   display: flex;
   justify-content: center;
   margin-top: 20px;
}

.header nav ul li {
   margin: 0 15px;
}

.header nav ul li a {
   text-decoration: none;
   color: #fff;
   font-weight: bold;
   letter-spacing: 1px;
   position: relative;
   font-size: 1.3rem;
}

.header nav ul li a:before {
   content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #fa0000;
   opacity: 0;
   transform: scaleX(0);
   transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .header nav ul li a:hover:before {
   opacity: 1;
   transform: scaleX(1);
 }
 .header nav ul li a:hover {
   color: #fa0000;
   transition: color 0.3s ease;
 }

/* Hero sectie */
.hero {
   display: flex;
   align-items: center;
   background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.9)), url('/images/pexels-david-bartus-690779.jpg') center/cover no-repeat;
   padding: 100px 0;
   justify-content: space-around;
}

.hero-content {
   flex: 1;
   padding: 5%;
   max-width: 800px;
   display: flex;
   flex-direction: column;
}

.hero-content h2 {
   font-size: 2.5rem;
   color: #fa0000;
   margin-bottom: 20px;
   
}

.hero-content p {
   font-size: 1.4rem;
   color: #f4f4f4;
}
/* Diensten sectie */
.services {
   width:80%;
   margin:auto;
   height: 50vh;
   padding:0;
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.services-content{
   display:flex;
   flex-direction: column;
}


.services h2 {
   font-size: 2.5rem;
   color: #000000;
   width:100%;
   margin:auto;
}

.services p {
   font-size: 1.4rem;
   color: #666;
   width:100%;
}

.steps {
   display: flex;
   width:100%;
   justify-content: center;
   align-items: space-around;
   text-align: center;  
   margin-top: 20px; 
}

.step {
   text-align: center;
   flex: 1;
   display: flex;
   flex-direction: column;
   height: 150px;
   
}

.step i {
   font-size: 3.5rem;
   color: #fa0000;
   padding:20px;
}

.step p {
   font-size: 1.4rem;
   color: #666;
}

/* Over sectie */
.about{
   background-color: #000000;
   padding: 0;
   filter: drop-shadow(2px 0px 10px black);
   width:100%;
}
.about-style {
  
   display:flex;
   justify-content: center;
   align-items: center;
   width:80%;
   margin:auto;
}
.about-image img{
width: 600px;   
}
.about h2 {
   font-size: 2.5rem;
   color: white;
   margin-bottom: 20px;
   width:100%;
}

.about p {
   font-size: 1.4rem;
   color: white;
   width:100%;
}


.associations {
   background-color: #000000;
   padding: 100px 0;
   text-align: center;
   box-shadow: 2px 2px 10px gray;
   margin: 0 0 20rem 0;
   width:100%;
}
.associations-style{
   width:80%;
   margin:auto;
}

.associations h2 {
   font-size: 2.5rem;
   color: #f4f4f4;
   margin-bottom: 20px;
}

.association-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin: 0;
   align-items: center;
   justify-items: center;
}

.association {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.association img {
   max-width: 70%;
   margin-bottom: 10px;
}

.spotify {
   background-color: #f4f4f4; /* Zachte achtergrondkleur */
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
   height:80vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
  
}
.spotify-examples{
   width: 90%;
   margin:0 auto;
   
}

.spotify h2 {
   font-size: 2.5rem;
   text-align: center;
   margin-bottom: 15px;
}

.spotify iframe {
   border-radius: 12px; /* Afgeronde hoeken */
   transition: transform 0.3s ease; /* Zachte hover animatie */
   height: 50vh;
   display:flex;
   align-items: center;
   justify-content: center;
}

.spotify iframe:hover {
   transform: scale(1.05); /* Lichte vergroting bij hover */
}

/* Algemene Sectie Styling */
.youtube-carousel { 
   background-color: #f4f4f4;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
   padding: 20px;
   border-radius: 10px;
   height: 80vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* Slider Styling */
.swiper-container {
   width: 100%;
   height:auto;
   position: relative;
   overflow:hidden;
}

/* Slide Styling */
.swiper-slide {
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   max-width: 100%;
}

.swiper-slide iframe {
   border-radius: 8px; /* Afgeronde hoeken */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
   

}

/* Navigatie Elementen */
.swiper-button-prev, .swiper-button-next {
   color: black; /* Kleur van de pijlen */
   background-color: rgba(255, 255, 255, 0.8); /* Licht transparante achtergrond */
   border-radius: 50%; /* Cirkelvormige pijlen */
   padding: 10px;
}

.swiper-button-prev:hover, .swiper-button-next:hover {
   background-color: rgba(255, 255, 255, 1); /* Meer opvallende achtergrond bij hover */
}

.swiper-pagination-bullet {
   background-color: black; /* Kleur van de paginering */
}

.swiper-pagination-bullet-active {
   background-color: #333; /* Kleur van de actieve paginering */
}



/* Contact sectie */
.contact {
   background-color: #000000;
   color: #fff;
   padding: 100px 0;
   text-align: center;
   width:100%;
}

.contact h2 {
   font-size: 2.5rem;
   margin-bottom: 20px;
   width:80%;
   margin:auto;
}

.contact p {
   font-size: 1.4rem;
   margin-bottom: 30px;
   width:80%;
   margin:auto;
}

.cta-button {
   display: inline-block;
   background-color: #fa0000;
   color: #fff;
   padding: 10px 20px;
   border-radius: 5px;
   text-decoration: none;
   transition: background-color 0.3s ease;
   margin-top: 50px;
}

.cta-button:hover {
   background-color: #fff;
   color:#fa0000
}

/* Footer sectie */
.footer {
   background-color: #000000;
   color: #fff;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-top: 4px solid #fa0000;
   position: relative;
   width:100%;
}

.footer h2 {
   margin: 0;
   font-size: 2.5rem;
   letter-spacing: 2px;
}

.footer .social-icons {
   list-style: none;
   padding: 0;
   display: flex;
   justify-content: center;
   margin-top: 20px;
}

.footer .social-icons li {
   margin: 0 15px;
}

.footer .social-icons li a {
   text-decoration: none;
   color: #fff;
   font-size: 1.5rem;
   transition: color 0.3s ease;
   position:relative;
}

.footer .social-icons li a:before {
   content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #fa0000;
   opacity: 0;
   transform: scaleX(0);
   transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .footer .social-icons li a:hover:before {
   opacity: 1;
   transform: scaleX(1);
 }
 .footer .social-icons li a:hover {
   color: #fa0000;
   transition: color 0.3s ease;
 }

.footer .important-links {
   list-style: none;
   padding: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 20px 0 0 0;
   letter-spacing: 0.25em;
   font-size: 1rem;
   text-align: center;
   width: 38%;
   
}

.footer .important-links li {
   margin: 0;
}

.footer .important-links li a {
   text-decoration: none;
   color: #fff;
   font-weight: bold;
   position: relative;
   
}

.footer .important-links li a:before {
   content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #fa0000;
   opacity: 0;
   transform: scaleX(0);
   transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .footer .important-links li a:hover:before {
   opacity: 1;
   transform: scaleX(1);
 }
 .footer .important-links li a:hover {
   color: #fa0000;
   transition: color 0.3s ease;
 }
 .footer p{
   font-size: 0.8rem;
 }
 .footer a{
   color: #f0f0f0;
}
.footer a:hover{
color: #007BFF
}
 .logo{
   width:40%;
 }

 /* Algemene stijl voor de inhoud van privacybeleid en algemene voorwaarden */
.privacy-content {
   max-width: 800px;
   margin: 0 auto;
   padding: 40px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.privacy-content h1{
   font-size: 2.5rem;
}

.privacy-content h2 {
   font-size: 2rem;
   margin-bottom: 20px;
}

.privacy-content p {
   font-size: 1.2rem;
   line-height: 1.6;
   margin-bottom: 15px;
}

.privacy-content ul {
   list-style: disc;
   margin-left: 20px;
   margin-bottom: 15px;
}

.privacy-content li {
   margin-bottom: 5px;
}

/* Algemene stijl voor titels */
.privacy-title {
   text-align: center;
   margin-bottom: 40px;
}

/* Opmaak voor links */
.privacy-content a {
   color: #007BFF;
   text-decoration: underline;
}

.privacy-content a:hover {
   color: #0056b3;
}

/* Opmaak voor footer */
.privacy-footer {
   text-align: center;
   margin-top: 40px;
   font-size: 1rem;
   color: #777;
}


.contact-form {
   background-color: #f0f0f0;
   padding: 50px;
   text-align: center;
   display:flex;
   flex-direction: column;
   width:80%;
   margin:auto;
   border-radius: 20px;
   margin-top: 200px;
   margin-bottom: 200px;
   height: 50vh;
}

.contact-form h2 {
   font-size: 2.5rem;
   margin-bottom: 20px;
   color: #000000;
}

.contact-form form {
   max-width: 600px;
   margin: 0 auto;
   text-align: left;
}

.contact-form label {
   display: block;
   font-size: 1.2rem;
   margin-bottom: 5px;
   color: #666;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
   width: 100%;
   padding: 10px;
   margin-bottom: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 1rem;
}

.contact-form textarea {
   resize: vertical;
}

.contact-form button {
   background-color: #fa0000;
   color: #fff;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   font-size: 1.2rem;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.contact-form button:hover {
   background-color: #fa0000;
}

.bedankt-melding {
   background-color: #4CAF50;
   color: white;
   text-align: center;
   padding: 10px;
}
.visible {
   opacity: 1;
   transition: opacity 0.3s ease;
 }
 
 .hidden {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0s ease;
 }
/* Mediaquery voor mobiel en tablet */
@media only screen and (max-width: 1024px) {
   #logo, .logo{
      width:80%;
      margin:auto;
   }

   .hero{
      height:100%;
   }
   .hero-content{
      height:100%;
   }
   .hero-content p{
      width:90%;
      margin:auto;
      padding:0;
      font-size: 1.2rem;
   }
   .hero-content h2{
      width:90%;
      margin:auto;
      padding:0;
      font-size: 1.8rem;;
   }
   .services{
      margin:0;
      height:100%;
      width:100%;
   }
   .services-content{
      margin:1rem auto;
      width:90%;
   }
    
   .about-style{
      width:80%;
      flex-direction: column;
      margin:0 auto;
      padding: 10px 0;
   }
   .about-image img{
      width:100%;
   }
   .youtube-slider,
   .spotify-examples {
       display: flex;
       flex-direction: column; /* Stapel de items op elkaar */
       margin:auto;
       width:95%;
   }
   .spotify h2{
      width:95%;
      margin:auto;
   }

   .youtube-slide {
          width: 100%; /* Volledige breedte voor mobiel en tablet */
          margin: 0px auto; /* Voeg ruimte toe tussen video's */
          padding:0;
   }
   
    
   .hero-content{
         width:100%;
   }
   
   .services {
     
         padding: 5% 0;
         display:flex;
         flex-direction: column;
         
   }
  
   .services h2 {
         font-size: 1.5rem;
         color: #000000;
         margin-bottom: 20px;
         width:90%;
         margin:auto;
   }
      
   .services p {
         font-size: 1.4rem;
         color: #666;
         width:90%;
         margin:auto;
   }
      
   .steps {
         display: grid;
         grid-template-rows: repeat(2, 1fr); 
         grid-template-columns: repeat(2, 1fr); 
         gap: 20px; 
         width:100%;
      }
       
       .step:nth-child(1) {
         grid-row: 1 / 2;
         grid-column: 1 / 2;
       }
       
       .step:nth-child(2) {
         grid-row: 1 / 2;
         grid-column: 2 / 3;
       }
       
       .step:nth-child(3) {
         grid-row: 2 / 3;
         grid-column: 1 / 2;
       }
       
       .step:nth-child(4) {
         grid-row: 2 / 3;
         grid-column: 2 / 3;
       }
      
      .step {
         text-align: center;
         flex: 1;
         padding:0;
         display: flex;
         flex-direction: column;
         justify-content: center; /* Voeg deze regel toe */
      }
      
      .step i {
         font-size: 2.5rem;
         color: #fa0000;
         margin-bottom: 10px;
      }
      
      .step p {
         font-size: 1.1rem;
         color: #666;
      }
      .associations{
         margin:10rem 0;
         padding:5rem 0;
      }
      .contact{
         display:flex;
         flex-direction: column;
         text-align: justify;
         align-items: center;
      }
      .cta-button{
         width:150px;
         text-align: center;
      }
	    .footer .important-links{
		     letter-spacing:1px;
		     font-size: 0.8rem;
           text-align: center;
           width: 90%;
	}

}


/* Mediaquery voor 4K-schermen */
@media only screen and (min-width: 2560px) {
   .spotify-examples {
      display: grid;
      grid-template-columns: repeat(5, 1fr); 
      gap: 20px; /* Ruimte tussen de kolommen en rijen */
      
  }
  
   .youtube-slide {
       width: 100%; /* Aangepaste breedte voor 4K-schermen */
       height:100%;
   }
   .youtube-slider {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 50px;
      overflow: hidden;
      margin: auto;
      width:90%;
   }

}