.home {
  padding-top: 82px;

  section {
    padding: 1.5rem 0;

    .page-padding {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
  
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 582px;
      }
  
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        ul {
          padding: 0;

          li {
            list-style: none;
            padding: 0.2rem 0;
            width: 100%;

            p {
              a.direct-link {
                font-family: 'Avenir' !important;
                position: relative;
                transition: color .3s ease-in-out;
                
                &::before {
                  content: '';
                  position: absolute;
                  top: 100%;
                  width: 100%;
                  height: 3px;
                  background-color: var(--green-color);
                  transform: scaleX(0);
                  transition: transform .3s ease-in-out;
                }
                
                &:hover {
                  color: var(--green-color);
                }
                
                &:hover::before {
                  transform: scaleX(1);
                }	
              }
            }

          }
        }

  
        .hero-socials {
          padding: 1rem 0;
          display: flex;
          gap: 1rem;
  
          a {
            text-decoration: none;
            background-color: var(--green-color);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover img {
              transform: scale(1.1);
            }
            
            img {
              width: 25px;
              height: 25px;
              transition: .3s;
            }
          }
        }
      }
    }
  }

  section#showreel {
    padding-bottom: 0;
    background: linear-gradient(180deg, #FFF 0%, #FFF 50%, rgba(209, 197, 183, 0.60) 50%, rgba(209, 197, 183, 0.60) 100%);

    .page-padding {
      display: block;
      
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-bottom: 2rem;

      iframe {
        box-sizing: border-box;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        border: none;
        top: -20%;
        max-width: 1200px;
        max-height: 675px;
      }
    }
  }

  section#aanbod {
    background-color: #E2DCD5;
    position: relative;
    
    .page-padding {

      div.services {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        div.service-heading {
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          padding-bottom: 1rem;

          div.icon {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 30px;
            height: 30px;
            cursor: pointer;

            div.line {
              position: absolute;
              width: 30px;
              height: 2px;
              background-color: var(--black-color);
            }
          }
        }

        p {
          overflow: hidden;
          transition: height 0.3s;
          height: 0;

          .direct-link {
            color: var(--green-color);
            font-weight: 900;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  section#samenwerkingen {
    padding: 2rem 0;
    height: 100%;

    h2 {
      text-align: center;
    }

    .page-padding {

      .carousel {
        display: flex;
        width: 100%;
        height: auto;
        align-items: center;
        padding-bottom: 60vh;        
  
        .carousel-desktop-control {
          display: none !important;
        }
  
        .carousel-container {
          display: flex;
          list-style: none;
          position: relative;
          width: 100%;
          height: 100%;
          justify-content: center;
          padding: 0;        
  
          .reel {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0px;
            width: 70%;
            max-width: 420px;
            height: auto;
            border-radius: 12px;
            box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
            position: absolute;
            transition: all .3s ease-in;
            aspect-ratio: 9/16;
            border-radius: 2rem;
  
            .reel-wrapper {
              width: 100%;
              height: auto;
              position: relative;
              background-color: var(--black-color);
              border-radius: 2rem;
              aspect-ratio: 9/16;
  
              video {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: auto;
                object-fit: cover;
                aspect-ratio: 9/16;
                border-radius: 2rem;
              }
  
              .player {
                width: 100%;
                height: 100%;
                aspect-ratio: 9/16;
                background-color: var(--black-color);
                display: flex;
                justify-content: center;
                align-items: center;
              }
  
              .overlay {
                position: absolute;
                width: 100%;
                height: auto;
                display: flex;
                justify-content: center;
                align-items: center;
                pointer-events: none;
                aspect-ratio: 9/16;
  
                .media-control {
                  width: 80px;
                  height: 80px;
                  background-color: rgba(0, 0, 0, 0.5);
                  border-radius: 50%;
                  position: relative; /* allow absolute stacking of children */
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  overflow: hidden;

                  /* Stack the play / pause containers on top of each other */
                  > div {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }

                  img {
                    width: 30px;
                    height: 30px;
                    object-fit: contain;
                    position: relative;
                    display: block;
                    transition: opacity 0.25s ease-in-out;
                    /* Make sure the play/pause svgs render without any background or rounding */
                    background: transparent !important;
                    border-radius: 0 !important;
                    box-shadow: none !important;
                    pointer-events: none; /* clicks handled by media-control wrapper */
                  }

                  /* Use opacity instead of display so JS can animate between play/pause */
                  #pause {
                    opacity: 0;
                  }

                  #play {
                    opacity: 1;
                  }

                  /* Ensure the control can receive pointer events even when overlay has pointer-events:none */
                  pointer-events: auto;
                  transition: opacity 0.25s ease-in-out;
                }
              };
  
              /* Logo that sits at the bottom-left of the reel. Use direct child selector
                 so it doesn't match the play/pause <img> inside .overlay/.media-control */
              > img {
                pointer-events: none;
                padding: 1rem;
                position: absolute;
                background-color: var(--black-color);
                bottom: 0;
                border-radius: 12px;
                left: 0;
                width: 100px;
                object-fit: contain;
                height: 60px;
              }
            }
            
            &[data-pos="0"] {
              z-index: 5;
            }
            
            &[data-pos="-1"],
            &[data-pos="1"] {
              opacity: 0.7;
              filter: blur(1px) grayscale(10%);
            }
            
            &[data-pos="-1"] {
              transform: translateX(-20%) scale(.9);
              z-index: 4;
            }
            
            &[data-pos="1"] {
              transform: translateX(20%) scale(.9);
              z-index: 4;
            }
          }
        } 
      }
  
      .carousel-controls {
        display: flex;
        justify-content: center;
        height: 100%;
        width: 100%;
        gap: 3rem;
  
        .carousel-control {
          cursor: pointer;
          background-color: var(--beige-color);
          width: 70px;
          height: 70px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
  
          img {
            width: 30px;
            height: 30px;
            object-fit: contain;
          }
        }
      }
    }
  }

  section#contact {
    .page-padding {
      gap: 0;

      h3 {
        color: var(--green-color);
      }
  
      .gform_required_legend {
        display: none;
      }
  
      .gform_validation_errors {
        display: none;
      }
  
      .contact-form-ilse {
        width: 100%;  
  
        .gform-field-label--type-sub {
          display: none;
        }
  
        .gfield_label {
          font-size: 1rem;
          color: var(--black-color);
  
          .gfield_required {
            display: none;
          }   
        }
  
        .ginput_counter {
          display: none;
        }
  
        .ginput_container {
          input, textarea {
            box-shadow: none;
            border: none;
            width: 100%;
            border-bottom: 1px solid var(--black-color);
            padding: 0 1rem;
            border-radius: 0;
            font-size: 1rem;
            color: var(--black-color);
            transition: border-color .3s ease-in-out;
  
            &:focus {
              border-color: var(--green-color);
            }
          }
        }
  
        .gform_button {
          background-color: var(--green-color);
          color: white;
          border: none;
          padding: 1rem 2rem;
          font-size: 1rem;
          cursor: pointer;
          border-radius: 2rem;
          transition: background-color .3s ease-in-out;
  
          &:hover {
            background-color: var(--black-color);
          }
        }
      }
    }

  }
}

@media screen and (min-width: 768px) {
  .home {
    section {
      .page-padding {
        flex-direction: row;
        justify-content: space-between;

        img {
          max-width: 500px;
        }

        .content {
          justify-content: center;
          max-width: 600px;
        }
      }
    }

    section#aanbod {
      .page-padding {
          justify-content: space-between;
          .summary {
            max-width: 500px;
          }

          .services {
            max-width: 600px;
          }
      }
    }

    section#samenwerkingen {
      .page-padding {
        .carousel {
          padding-bottom: 0;
          height: 80vh;
  
          .carousel-desktop-control {
            cursor: pointer;
            display: block !important;
            background-color: var(--beige-color);
            width: 70px;
            height: 70px;
            display: flex !important;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            min-width: 70px;
    
            img {
              width: 30px;
              height: 30px;
            }
          }
        }
  
        .carousel-controls {
          display: none;
  
          .carousel-control {
            display: none;
          }
        }
      }
    }

    section#contact {
      .page-padding {
        flex-direction: column;
      }
    }
  }
}