/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/* Carousel Simple Slider: aangepaste verhouding 3:1 */
.nectar-simple-slider.sizing-aspect-ratio.aspect-3-1 {
    padding-bottom: calc((1 / 3) * 100%) !important;
}

.hero-section--text {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
}
.hero-section--text.hs--t-right{
    align-items: flex-end; 
}

.sg-hero-section .hero-section--text span {
  font-weight: 800;
  font-size: clamp(24px, 4vw, 45px);
  line-height: clamp(40px, 6vw, 70px);
  padding: clamp(3px, 0.5vw, 5px) clamp(12px, 2vw, 25px);
    background-color: #98a1a6;
}
.sg-hero-section .hero-section--text.grey span {
  background-color: #98a1a6;
}
.sg-hero-section .hero-section--text.peach span {
  background-color: #f1885b;
}
.sg-hero-section .hero-section--text.accent span {
  background-color: var(--nectar-accent-color);
}

.sg-overflowing-carousel--image-wrapper {
  position: relative;
}
.sg-overflowing-carousel--image-wrapper span {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #98a1a6;
  color: #fff;
  padding: clamp(3px, 0.5vw, 6px) clamp(6px, 1vw, 10px);
  font-weight: bold;
  font-size: clamp(14px, 2vw, 28px);
  z-index: 10;
  white-space: nowrap;
}



.row .col img.hero-heading-beeldmerk {
  max-width: 125px;
  margin-top: -95px;
  margin-bottom: 0;
}

.wpb_wrapper:has(.sg-cat-carrousel) {
  position: relative;
}

.wpb_wrapper:has(.sg-cat-carrousel)::before,
.wpb_wrapper:has(.sg-cat-carrousel)::after {
  content: "";
  position: absolute;
  top: 0;
  width: clamp(32px, 2vw, 60px);
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.wpb_wrapper:has(.sg-cat-carrousel)::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.wpb_wrapper:has(.sg-cat-carrousel)::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}