/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* === BASE === */
.tooltipster-base {
  display: none !important;
}

.ti-widget.ti-goog .ti-widget-container * {
    font-size: 12px !important;
}

.drk-btn {
	color: #000;
}

/* === WHITE GLISTEN EFFECT === */
.wbt-hvr {
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* slight scale-up and white transformation */
.wbt-hvr:hover {
  transform: scale(1.05);
  filter: brightness(9.4) contrast(1.4) saturate(0);
}

.invert-css {
  position: relative;
  display: inline-block;
  overflow: visible;
  transform: scale(1);
  transform-origin: center;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* smooth scale */
.invert-css:hover {
  transform: scale(1.04);
	transition: transform 0.1s ease-in-out;
}

/* cool aqua glow overlay */
.invert-css::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  opacity: 0;
  filter: brightness(1.4) saturate(1.4) blur(40px);
  transition: opacity 1.4s ease;
  background: linear-gradient(
    120deg,
    rgba(0,255,255,0.2) 0%,    /* aqua */
    rgba(0,200,255,0.2) 25%,   /* cyan */
    rgba(100,200,255,0.2) 50%, /* soft sky */
    rgba(0,255,230,0.2) 75%,   /* turquoise */
    rgba(255,255,255,0.25) 100%/* white shimmer */
  );
  background-size: 400% 400%;
}

.invert-css:hover::before {
  opacity: 1;
  animation: aquaWave 9s ease-in-out infinite alternate;
}

/* content block */
.invert-css .col-inner {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  transition: box-shadow 1s ease, filter 1s ease;
  box-shadow:
    0 6px 14px rgba(0,255,255,0.15),
    0 0 24px rgba(0,255,255,0.25);
  filter: brightness(1);
}

/* glowing shadow animation */
.invert-css:hover .col-inner {
  animation: shadowFloat 3s cubic-bezier(0.45,0.05,0.55,0.95) infinite both;
  box-shadow:
    0 12px 26px rgba(0,255,255,0.35),
    0 0 45px rgba(0,180,255,0.4);
  filter: brightness(1.25);
  will-change: box-shadow;
}

/* aqua wave overlay motion */
@keyframes aquaWave {
  0%   { background-position: 0% 50%; transform: rotate(0deg) scale(1); }
  50%  { background-position: 100% 50%; transform: rotate(2deg) scale(1.05); }
  100% { background-position: 0% 50%; transform: rotate(-2deg) scale(1); }
}

/* soft breathing shadow */
@keyframes shadowFloat {
  0% {
    box-shadow:
      0 6px 14px rgba(0,255,255,0.15),
      0 0 24px rgba(0,255,255,0.25);
  }
  25% {
    box-shadow:
      0 12px 26px rgba(0,255,255,0.35),
      0 0 45px rgba(0,180,255,0.4);
  }
  50% {
    box-shadow:
      0 4px 10px rgba(0,255,255,0.2),
      0 0 28px rgba(0,255,255,0.25);
  }
  75% {
    box-shadow:
      0 10px 20px rgba(0,255,255,0.25),
      0 0 35px rgba(0,180,255,0.3);
  }
  100% {
    box-shadow:
      0 6px 14px rgba(0,255,255,0.15),
      0 0 24px rgba(0,255,255,0.25);
  }
}

.wbt-bg-up, .wbt-bg-down {
  display: block !important;
  width: 101% !important;
  margin-left: -0.5% !important;
  margin-right: -0.5% !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}

/* === HOVER EFFECTS === */
.link-h:hover a {
  text-decoration: underline;
}

@media (max-width: 768px) { /* adjust breakpoint if needed */
  .icon-box-img {
    width: 70px !important;
  }
}

/* === GRAVITY FORMS === */
body .gform_wrapper .gfield input:not([type="checkbox"]):not([type="radio"]),
body .gform_wrapper .gfield textarea {
  background-color: #ecf6ff;
  border: 0px solid lightgray;
  border-radius: 0px;
  padding: 23px 20px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0%) !important;
}

body .gform_wrapper .gfield {
  margin-bottom: 10px;
}

.gform_wrapper .gform-button,
.gform_wrapper .gform-button--white,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper button.button,
.gform_wrapper input.button  {
  height: 45px !important;
  border-radius: 0px !important;
  padding: 7px 40px !important;
  background-color: #000000 !important;
  color: #f4ea0b !important;
  border: none !important;
  box-shadow: 0 0px 0 rgba(114, 114, 114, 0.0) !important;
		text-transform: uppercase !important;
	font-weight: bold !important;
}
#gform_submit_button_2 {
  margin-top: -20px;
}

/* Hover effect: change background to green */
body .gform_wrapper .gform_footer .gform_button:hover,
body .gform_wrapper .gform_page_footer .gform_button:hover,
body .gform_wrapper .gform_footer .gform_next_button:hover,
body .gform_wrapper .gform_page_footer .gform_next_button:hover,
body .gform_wrapper .gform_footer .gform_previous_button:hover,
body .gform_wrapper .gform_page_footer .gform_previous_button:hover {
  background-color: #f4ea0b !important;
	color: #000 !important;
}

body .gform_wrapper .gform_drop_area {
  padding: 12px !important;
}

body .gform_wrapper .gform_fields {
  grid-row-gap: 4px;
}

/* === GRAVITY FORMS INPUTS, TEXTAREA & DROPDOWNS === */
body .gform_wrapper .gfield select {
  background-color: #ecf6ff;
  border: 1px solid whitesmoke;
  border-radius: 4px;
  padding: 13px 20px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0%) !important;
  height: auto;
  line-height: 1.4;
}

/* Alleen de ingevulde waarden in de samenvatting blauw */
.gf-summary .gf-summary-value {
  color: #008cff;
}

/* Target all placeholders in Gravity Forms */
body .gform_wrapper input::placeholder,
body .gform_wrapper textarea::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

/* === ICON EXPAND === */
.icon-expand::before {
    content: "\f8ce" !important;
    font-family: 'Material Icons' !important;
    margin-left: -2px;
}

/* =========================
   Off-Canvas Navigation
   ========================= */
/* Main nav links */
.off-canvas-center .nav-vertical > li > a {
  font-size: 1.5em;
}

/* Align flyout container */
.mfp-content {
  vertical-align: top !important;
}

.off-canvas-center.mfp-bg.mfp-ready {
    opacity: 0.96;
}

.blk-btn.button {
	color: #111 !important;
}

.rotating-sentence {
    font-size: clamp(1rem, 4vw, 3.0rem); /* min 16px, scales up, max ~40px */
    font-weight: bold;
    color: #f4ea0b;
    text-transform: uppercase;
    white-space: nowrap;
  }

.rotating-word {
    color: #f4ea0b;
    transition: opacity 0.4s ease;
}

.img-animation {
  position: relative;
  display: inline-block;
  animation: imgGlow 6s ease-in-out infinite; /* keep shine looping */
  overflow: hidden;
}

/* dirt spots overlay */
.img-animation::before {
  content: "";
  position: absolute;
  top: 35%; left: 35%;   /* smaller dirty patch */
  width: 30%; height: 30%;
  background-image: 
    radial-gradient(circle, rgba(90,60,30,0.5) 0px, transparent 5px),
    radial-gradient(circle, rgba(80,50,25,0.4) 0px, transparent 6px),
    radial-gradient(circle, rgba(100,70,40,0.45) 0px, transparent 7px),
    radial-gradient(circle, rgba(70,45,20,0.35) 0px, transparent 4px);
  background-size: 40px 40px, 60px 60px, 50px 50px, 70px 70px;
  background-repeat: repeat;
  opacity: 0;
  animation: dirtFade 5s ease-in-out forwards; /* play once */
  pointer-events: none;
  z-index: 2;
}

/* shine/glow animation */
@keyframes imgGlow {
  0%   { filter: brightness(0.85) contrast(1.2) saturate(0.9); }
  50%  { filter: brightness(1.3) contrast(1.2) saturate(1.2) drop-shadow(0 0 15px rgba(255,255,255,0.5)); }
  100% { filter: brightness(0.85) contrast(1.2) saturate(0.9); }
}

/* dirt appears then disappears once */
@keyframes dirtFade {
  0%   { opacity: 0; }
  20%  { opacity: 0.6; }
  60%  { opacity: 0.3; }
  100% { opacity: 0; }
}

/* === FLICKITY SLIDER NAVIGATION === */
.slider-nav-circle .flickity-prev-next-button svg, .slider-nav-circle .flickity-prev-next-button .arrow  {
    border-radius: 100%;
    border:solid #e7e7e7 0px;
    color: #353535;
    background: rgb(255 255 255 / 62%);
	 box-shadow: 1px 1px 10px rgb(0 0 0 / 0%);
	opacity: 0.9;
}

/* Circular navigation buttons in 'slider-nav-circle' style */
.slider-nav-circle .flickity-prev-next-button svg,
.slider-nav-circle .flickity-prev-next-button .arrow {
  border-radius: 100%;
  border: solid 0px #e7e7e7; /* Border defined but set to 0px */
  color: #353535;
  background: rgb(42 167 223); /* Semi-transparent white */
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0); /* Shadow defined but effectively disabled */
}

/* FLICKTY CSS */
.flickity-prev-next-button {
  width: 50px;
  height: 50px;
	margin-top: 30px!important;
	margin-right: -0px;
	margin-left: -0px;
	opacity: 1 !important;
}

/* accordion */
.acc-css .accordion .toggle {
    left: unset!important;
    right: -20px!important;
	font-size: 50px !important;
	margin-top: -35px !important;
	opacity: 1!important;
}

.acc-css .accordion-title {
    border: 1px solid #f3f5f9 !important;
    display: block;
    padding: 1.2em 3.8em 1.2em 1.3em !important;
    position: relative;
    transition: border .2s ease-out, background-color .3s;
    margin-bottom: 15px;
	    background-color: #fff;
	border-radius: 0px;
	text-transform: uppercase;
}

.acc-css .icon-angle-down:before {
    content: "\e5c5" !important;
    font-family: 'Material Icons' !important;
    text-shadow: 
        0px 0px 0 #000,
        0px 0px 0 #000,
        0px 0px 0 #000,
        0px 0px 0 #000,
        0px 0 0 #000,
        0px 0 0 #000,
        0 0px 0 #000,
        0 0px 0 #000;
}

.acc-css .toggle i {
    font-size: 1.9em;
    transition: all .3s;
    color: #000;	
}

.bubble-holder {
  position: fixed;
  inset: 0; /* same as top:0;right:0;bottom:0;left:0 */
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2147483647; /* max safe value */
}
.bubble {
  position: absolute;
  bottom: -100px;
  width: 40px; height: 40px;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(0,191,255,0.7));
  border-radius: 50%;
  opacity: 0.9;
  animation: floatUp 12s infinite ease-in-out;
  filter: drop-shadow(0 0 8px rgba(0,191,255,0.8));
}
.bubble:nth-child(1){ left:15%; width:30px; height:30px; animation-duration:8s; }
.bubble:nth-child(2){ left:35%; width:50px; height:50px; animation-duration:14s; }
.bubble:nth-child(3){ left:55%; width:40px; height:40px; animation-duration:11s; }
.bubble:nth-child(4){ left:75%; width:60px; height:60px; animation-duration:16s; }
.bubble:nth-child(5){ left:90%; width:35px; height:35px; animation-duration:9s; }

@keyframes floatUp {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-120vh) scale(1.2); opacity: 0; }
}


#logo {
  position: relative;
  display: inline-block;
  z-index: 1;
}

#logo img {
  max-height: 240px;
  display: block;
  position: relative;
  z-index: 2;
}

/* bubbles generator with stronger blue and left offset */
#logo::before {
  content: "";
  position: absolute;
  left: 20%;   /* shifted left */
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: rgba(100, 180, 255, 0.8);
  z-index: 0;
  animation: bubble 2.1s infinite linear; /* faster restart */
  box-shadow: 
    -30px 0 rgba(100,180,255,0.7),
    20px 10px rgba(100,180,255,0.6),
    -25px -10px rgba(100,180,255,0.5),
    30px -15px rgba(100,180,255,0.7),
    -12px 20px rgba(100,180,255,0.65),
    15px -25px rgba(100,180,255,0.55);
}

#logo::after {
  content: "";
  position: absolute;
  left: 42%;   
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgba(100, 180, 255, 0.4);
  animation: bubble 3.1s infinite linear 1s; /* slightly longer + delay */
  box-shadow: 
    -25px 5px rgba(100,180,255,0.6),
    22px -8px rgba(100,180,255,0.55),
    -18px -20px rgba(100,180,255,0.7),
    28px -18px rgba(100,180,255,0.65),
    -12px 18px rgba(100,180,255,0.75);
}

/* floating upwards */
@keyframes bubble {
  0%   { transform: translateY(0) scale(1);   opacity: 0.9; }
  50%  { transform: translateY(-80px) scale(1.1); opacity: 0.6; }
  100% { transform: translateY(-160px) scale(1.2); opacity: 0; }
}

/* NAV SPACING XLARGE */
.nav-spacing-xlarge > li {
  padding-left: 5px;
  padding-right: 5px;
}

.wbt-bg-up img {
  background: linear-gradient(
    to bottom,
    #f4ea0b 0%,
    #f4ea0b 95%,
    #2aa7df 95%,
    #2aa7df 100%
  );
}

.wbt-bg-down img {
  background: linear-gradient(
    to bottom,
    #2aa7df 0%,
    #2aa7df 5%,
    #f4ea0b 5%,
    #f4ea0b 100%
  );
}

.wbt-bg-up2 {
	background: linear-gradient(
    to bottom,
    #f4ea0b 0%,
    #f4ea0b 95%,
    #d2f1ff 95%,
    #d2f1ff 100%
  );
}

.footer-ux.dark p , .footer-ux.dark h4, .footer-ux.dark a {
    color: hsl(0deg 0% 94.51% / 85%);
}

/* Close button styling */
button.mfp-close {
  background: #f4ea0b;
  margin: 20px 20px 0 0 !important; /* top/right margin */
  border-radius: 50px !important;
  mix-blend-mode: inherit;
	color: #154461 !important;
}

/* Close button visibility when modal is ready */
.mfp-ready .mfp-close {
  opacity: 1;
	color: #fff;
}

.off-canvas .nav-vertical > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.header .icon-menu:before {
    content: "\e0b8" !important;
    font-family: 'Material Icons' !important;
	font-size: xxx-large;
}

.star-rating span:before, .star-rating:before, .woocommerce-page .star-rating:before {
    color: #f4ea0b !important;
}

.slider-style-container .flickity-slider>:not(.is-selected), .slider-style-focus .flickity-slider>:not(.is-selected), .slider-style-shadow .flickity-slider>:not(.is-selected) {
    opacity: 1;
}

/* === PARALLAX === */
.parallax-active {
  opacity: 1 !important;
}

/* Absolute footer */
.absolute-footer {
  color: #fff !important;
  font-size: small !important;
  padding: 10px 0;
}

/* Footer link spacing */
.sec__footer2 .ux-menu-link__link {
  margin-bottom: -15px;
}

/* Footer menu layout gap */
.sec__footer2 .ux-menu.stack.stack-col.justify-start {
  gap: 7px;
}

.sec__footer2{
	font-size: small;
}

/* === HEADER SHADOW === */
.header-shadow .header-wrapper,
.header-wrapper.stuck,
.layout-shadow #wrapper {
  box-shadow: 1px 1px 10px rgb(0 0 0 / 0%);
}

/* === ICON ENVELOP === */
.icon-envelop:before {
    content: "\e158" !important;
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: larger;
    vertical-align: middle;
}

/* === FADEINUP INITIAL === */
[data-animate="fadeInUp"]:not([data-animated="true"]) {
    transform: translate3d(0, 25px, 0) !important;
    opacity: 0 !important;
}

/* === ANIMATION TRANSITION === */
[data-animate],
.slider [data-animate] {
    transition: 
        filter 0.4s,
        transform 0.4s ease-out,
        opacity 0.25s ease-in,
        -webkit-filter 0.4s,
        -webkit-transform 0.4s ease-out;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
  /* === LOGO & HEADER === */
  #logo {
    max-width: 155px;
  }

  #masthead {
    height: 130px !important;
  }

  /* === OFF-CANVAS PANEL === */
  .off-canvas-left .mfp-content,
  .off-canvas-right .mfp-content {
    background-color: hsl(0deg 0% 100%);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 0%);
    transition: transform 50ms ease 0ms;
  }

  .off-canvas-right .mfp-content,
  .off-canvas-left .mfp-content {
    width: 100% !important;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 0%);
  }

  .nav-sidebar.nav-vertical > li.menu-item.active,
  .nav-sidebar.nav-vertical > li.menu-item:hover {
    background-color: rgb(0 0 0 / 0%);
  }

  /* === FOOTER === */
  .absolute-footer {
    font-size: xx-small;
  }
	
	  /* === FLICKITY === */
  .flickity-prev-next-button {
    opacity: 1 !important;
    display: block !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
  }

}