/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 06 2026 | 20:22:52 */
/* Set background color for the entire visible area of single blog posts */
body.single-post .container-wrap {
  background-color: #FAF9F4 !important;
}

body.single-post {
  background-color: #FAF9F4 !important;
}

/* ============================================
   = Max Width Wrapper for Headings           =
   = Centers content, max width: 1200px       =
   ============================================ */
.heading-width {
  max-width: 1200px;       /* Maximum width of the element */
  width: 100%;             /* Full width on smaller screens */
  margin-left: auto;       /* Center horizontally */
  margin-right: auto;      /* Center horizontally */
}

/* ============================================
   = Responsive 2-Column Image (FRONTPAGE) =
   = Maintains aspect ratio: 860x471         =
   ============================================ */
.responsive-image {
  width: 100%;
  max-width: 860px;
  aspect-ratio: 860 / 471;
  height: auto;
  display: block;
}
/* ============================================
   = Responsive 2-Column Image (FRONTPAGE) =
   = Maintains aspect ratio: 860x471         =
   ============================================ */
.responsive-image-higher {
  width: 100% !important;
  max-width: 860px !important;
  aspect-ratio: 860 / 565 !important;
  height: auto;
  display: block;
}
/* ===========================================
   = Full-width image without distortion     =
   = Maintains aspect ratio, max height 399px =
   =========================================== */
.fullwidth-image-container {
  width: 100%;                 /* Full container width */
  max-width: 100%;             /* Responsive container */
  overflow: hidden;            /* Hide anything spilling out */
}

.fullwidth-image-container img {
  width: 100%;                 /* Fill container width */
  height: auto;                /* Maintain aspect ratio */
  max-height: 399px;           /* Prevent it from becoming too tall */
  display: block;
  object-fit: none;            /* No cropping or fitting — image shown as-is */
}

/* Responsive tweak for small screens */
@media screen and (max-width: 767px) {
  .fullwidth-image-container {
    max-height: none;         /* Allow height to scale naturally on small devices */
    aspect-ratio: 16 / 9;     /* Still maintain aspect ratio */
  }
}

/* ============================================
   = Responsive 2-Column Image (NEWS ITEM) =
   = Maintains aspect ratio: 710x400         =
   ============================================ */
.foto-container {
  width: 100%;               /* vult de beschikbare breedte van de kolom */
  max-width: 710px;          /* max breedte van de foto-container */
  aspect-ratio: 16 / 9;      /* vaste beeldverhouding */
  overflow: hidden;
  position: relative;
  margin-left: 0;            /* optioneel, uitlijnen links */
  margin-right: auto;        /* optioneel, voorkomt centreren */
}

.foto-container img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Responsief: kleiner op kleine schermen */
@media screen and (max-width: 767px) {
  .foto-container {
    max-width: 100%;         /* op mobiel altijd volle breedte */
    aspect-ratio: 16 / 9;    /* zelfde ratio behouden */
  }
}



/* Outer container: maintains fixed aspect ratio */
.background-ratio-16by9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden; /* prevent layout shifts */
}

/* Optional: Mobile ratio */
@media (max-width: 768px) {
  .background-ratio-16by9 {
    aspect-ratio: 4 / 3; /* bijvoorbeeld voor mobiel */
  }
}

/* Make sure inner content doesn't affect height */
.background-ratio-16by9 > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


/* =====================================
   ====== TOP BAR MENU / SUBMENU =======
   ===================================== */
 @media screen and (min-width: 767px) {
    .page-submenu-custom .container {
        max-width: 1920px !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 80px;
        padding-right: 80px;
        box-sizing: border-box;
    }

    body #top {
        padding-left: 80px !important;
        padding-right: 80px !important;
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}


/* =====================================
   ========== HERO SECTION =============
   ===================================== */

/* Full-height hero row for proper vertical layout */
.hero-row {
  min-height: 100vh;
  position: relative;
}

/* Centered scroll indicator position */
.scroll-indicator-wrap {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: auto;
}

/* Fade scroll indicator in/out on scroll */
.nectar-next-section-wrap {
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: auto;
}

.nectar-next-section-wrap.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Hide scroll indicator on mobile */
@media only screen and (max-width: 767px) {
  .nectar-next-section-wrap {
    display: none !important;
  }
}

/* Ivory color for hero text */
.hero-text * {
  color: #fbf7e9 !important;
}

/* Responsive hero subheading */
.hero-text h3 {
  font-size: clamp(20px, 4vw, 42px);
  line-height: 1.3;
  margin-bottom: 20px;
}

/* Hero CTA button styling */
.hero-text .nectar-button {
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 4px;
  border: 1.5px solid rgba(251, 247, 233, 0.75) !important;
  color: #fbf7e9;
  background-color: transparent;
}

.hero-text .nectar-button:hover {
  background-color: rgba(251, 247, 233, 0.2);
  color: #fbf7e9 !important;
  border-color: #fbf7e9 !important;
}

/* Responsive image size in hero */
.hero-text img {
  max-width: 80%;
  height: auto;
  margin-bottom: 30px;
}
/* =====================================
   ========== MOBILE STYLES ============
   ===================================== */

@media (max-width: 767px) {
  .hero-text {
    padding: 40px 20px;
    text-align: center;
  }

  .hero-text img {
    max-width: 70%;
    margin-bottom: 20px;
  }

  .hero-text h3 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .hero-text .nectar-button {
    font-size: 14px;
    padding: 12px 20px;
    border: 1.5px;
  }
}
/* =====================================
   ========== ANIMATIONS ===============
   ===================================== */

/* Simple scroll animation */
@keyframes scroll {
  0% { opacity: 1; top: 10px; }
  100% { opacity: 0; top: 25px; }
}
/* =====================================
   ========== NECTAR SLIDER STYLES =====
   ===================================== */

.swiper-slide .content h1, .swiper-slide .content .ns-heading-el {
    color: #fff !important;
}

/* =====================================
   ========== MAX TEXT BLOCK HEIGHT ============
   ===================================== */

.textblok {
  height: 80px;
  overflow-y: auto;
}

@media (min-width: 999px) {
  .textblok {
    height: 162px;
  }
}

/* end  */

input:-webkit-autofill {
  box-shadow: 0 0 0 70px white inset !important;
  -webkit-text-fill-color: #a99261 !important;
}