/*
 * @package:    fz3temp-2
 * @author:     Dennis Rougoor - Fervent Digital
 * @copyright:  2018 - 2024
 * --------------
 * Created:     06-03-2024, 15:13:25
 * Modified:    29-10-2025, 14:32:18
 * Modified By: Dennis Rougoor
 */
/* 
Theme Name: Hapklaar
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Bij Hapklaar vinden we dat elke ondernemer, groot of klein, online zichtbaar moet kunnen zijn. Of je nu op zoek bent naar een vette website, een conversiegerichte webshop, professionele fotografie óf het beter inzetten van je social media: Hapklaar is jouw one-stop oplossing voor online zichtbaarheid.
Author: Hapklaar
Author URI: https://www.hapklaar.online/
Template: hello-elementor
Version: 2.0.0
Text Domain: hapklaar
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Improved Animations Stylesheet from https://element.how/elementor-improve-entrance-animations/ , works for the 'fade' animations */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp;
}

.fc {
    width: fit-content !important;
}

.nm,
.nm p {
    margin-bottom: 0px !important;
}

.nl,
.nl a {
    text-decoration: none !important;
}

.pr {
    position: relative;
}

.home-hero::after {
    content: "";
    background: linear-gradient(to bottom,  rgba(0, 0, 0, 0.9) 0%,  rgba(0, 0, 0, 0.61) 18%,  rgba(0, 0, 0, 0) 33%,  #12392C 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.nav-tabs-content .navigatie-tab-homepa {
   opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.nav-tabs-content .navigatie-tab-homepa.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  height: auto;
  overflow: visible;
}

.nav-tab-item .elementor-heading-title {
    cursor: pointer;
    opacity: .3;
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
    transform: translateX(0px);
}

.nav-tab-item.active .elementor-heading-title {
    transform: translateX(32px);
    opacity: 1;
}

.nav-tab-item::before {
    width: 0px;
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
    content: "";
    height: 1px;
    background: #F1ECDF;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.nav-tab-item.active::before {
    width: 16px;
    
}

.nav-tab-item:hover .elementor-heading-title {
    opacity: 1;
}

.img-gradient::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
  to top,
  rgba(18, 57, 44, 1) 0%,
  rgba(18, 57, 44, 0.9) 32%,
  rgba(18, 57, 44, 0) 100%
    );
    height: 66%;
}

.highlighted-text {
    font-family: 'Jonathan Signature';
    font-size: 38px;
    color: #D18F26;
    line-height: 120%;
    position: absolute;
    bottom: -20px;
    right: 120px;
    transform: rotate(-10deg);
    z-index: -1;
}

.kamer-image img {
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.kamer-image:hover img {
    transform: scale(1.04);
}

.main-menu .menu-item a::before {
    content: "";
    height: 1px;
    background: #d18f26;
    position: absolute;
    width: 0px;
    bottom: -4px;
    left: 0 ;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.main-menu .menu-item a:hover:not(.elementor-sub-item)::before,
.main-menu .menu-item a.elementor-item-active:not(.elementor-sub-item)::before {
    width: 100%;
}

.line-animation-wrapper {
    object-fit: fill;
    background-color: #ffffff4d;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.line-animation {
    background-color: #fff;
    animation: moveLine 2s cubic-bezier(0.29, 1.22, 0.68, -0.37) infinite;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

@keyframes moveLine {
    0% {
      bottom:-100%;
    }
    100% {
      bottom:100%;
    }
}

.arrowControlPrevious_1,
.arrowControlForward_1 {
    cursor: pointer;
}

.subpage-hero::after {
    content: "";
    background: #F1ECDF;
    height: 120px;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 0;
}

.kamer-slider-overzicht .swiper-slide {
    width: 100% !important;
}

.kamer-slider-overzicht-links .elementor-widget-image-carousel,
.kamer-slider-overzicht-links .elementor-image-carousel-wrapper,
.kamer-slider-overzicht-links .elementor-image-carousel-wrapper figure,
.kamer-slider-overzicht-links .elementor-image-carousel-wrapper figure img {
    height: 100%;
} 

.kamer-slider-overzicht-links .elementor-image-carousel-wrapper figure img {
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.kamer-slider-overzicht .elementor-swiper-button-prev,
.kamer-slider-overzicht .elementor-swiper-button-next {
    border: solid 1px white;
    border-radius: 100px;
    padding: 10px;
    font-size: 24px !important;
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.kamer-slider-overzicht .elementor-swiper-button-prev:hover,
.kamer-slider-overzicht .elementor-swiper-button-next:hover {
    background: white !important;
}

.kamer-slider-overzicht .elementor-swiper-button-prev path,
.kamer-slider-overzicht .elementor-swiper-button-next  path{
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.kamer-slider-overzicht .elementor-swiper-button-prev:hover path,
.kamer-slider-overzicht .elementor-swiper-button-next:hover path{
    fill: #12392c;
}

form input:not(.button),
form textarea,
form select{
    border-radius: 0px !important;
    height: auto !important;
    background-color: #2C4E43 !important;
    border: solid 1px rgba(241,236,223,.3) !important;
    padding: 12px 32px !important;
    color: white !important;
    box-shadow: none !important;
    stroke: none !important;
}

form input:not(.button)::placeholder,
form textarea::placeholder,
form select {
    color: rgba(255,255,255,.6) !important;
}

form select option {
    color: white !important;
}

form .gform_fields {
    gap: 16px !important;
}

.gform_footer  .button {
    background: #F1ECDF !important;
    border-radius: 100px !important;
    font-family: "Montserrat", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important; 
    color: #12392C !important;
    border-style: solid !important;
    border-width: 1px 1px 1px 1px !important;
    border-radius: 100px 100px 100px 100px !important;
    padding: 16px 32px 16px 32px !important;
    box-shadow: none !important;
}


form#gform_2 input:not(.button),
form#gform_2 textarea {
    background: #ffffff !important;
    color: #12392C !important;
}

form#gform_2 input:not(.button)::placeholder,
form#gform_2 textarea::placeholder{
        color: rgba(18,57,44,.4) !important;
}

form#gform_2 .gform_footer  .button {
    background: #D18F26 !important;
        color: #ffffff !important;
}

.elementor-widget-text-editor ul {
    list-style: none !important;
    padding-left: 0px;
}

.elementor-widget-text-editor ul li {
    position: relative;
    padding-left: 20px;
}

.elementor-widget-text-editor ul li::before {
    content: "";
    background-image: url(images/check-icon-yellow.svg);
    width: 12px !important;
    height: 9px !important;
    display: inline-flex;
    position: absolute;
    position: absolute;
    left: 0;
    top: 11px;
}

.mogelijkheden-three img {
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.mogelijkheden-three:hover img {
    transform: scale(1.04);
}

@media screen and (max-width: 1440px) {
    .loop-slider {
        padding-left: 32px;
    }
}

@media screen and (max-width: 768px) {
    .loop-slider {
        padding-left: 16px;
        padding-right: 16px;
    }

    .kamer-slider-overzicht-links .elementor-image-carousel-wrapper figure img {
        object-fit: cover;
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
        height: 460px;
    }

    .kamer-slider-overzicht .swiper-slide {
        height: 460px !important;
    }
}