.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-adc01e4:#0CA7E4;--e-global-color-dbeca87:#FF7B00;--e-global-color-34fe713:#292929;--e-global-color-32d3c42:#F6FCFF;--e-global-color-655b8c1:#F7931F;--e-global-color-9e76d83:#ED1D25;--e-global-color-0dab59d:#00A8DF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */#offerte-knop {
  padding-right: 0; /* Geen padding aan de rechterkant bij de standaardstaat */
  transition: padding-right 0.5s ease; /* Vertraging voor de padding bij hover */
}

#offerte-knop .elementor-button-icon {
  opacity: 0; /* Begin als onzichtbaar */
  transform: translateY(20px); /* Beginpositie voor de slide-up animatie */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Vertraging voor animaties */
}

#offerte-knop:hover {
  padding-right: 20px; /* Padding aan de rechterkant bij hover (pas deze waarde aan naar wens) */
}

#offerte-knop:hover .elementor-button-icon {
  opacity: 1; /* Maak het icoon zichtbaar */
  transform: translateY(0); /* Beweeg het icoon naar de uiteindelijke positie */
}
.hover-block {
    position: relative;
    overflow: hidden;
}
.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: gap 0.5s ease-in-out;
}
.iconlist-knop {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.hover-block:hover .iconlist-knop {
    max-height: 50px; /* Hoogte van de knop, pas aan indien nodig */
    opacity: 1;
}/* End custom CSS */