/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #FFFFFF;
  --primary-color:                #c141a8;
  --secondary-color:              #66BD30;
  --section-bg-color:             #f9f9f9;
  --dark-color:                   #000000;
  --grey-color:                   #fcfeff;
  --text-secondary-white-color:   rgba(255, 255, 255, 0.98);
  --title-color:                  #565758;
  --p-color:                      #717275;
  --plum-color:                   #8a2c79;
  --plum-light-color:             #EAA7D6;
  --celadon-color:                #B8EBA0;
  --silver-color:                 #A8A8A8;
  --charcoal-color:               #36454F;
  --eerie-black-color:            #212529;
  --mulberry-color:               #B65999;
  --tea-green-color:              #D5F4BC;
  --mimi-pink-color:              #F6D5EC;
  --lavander-pink-color:          #EBA9D5;
  --flax-color:                   #E3D888;
  --light-sea-green-color:        #00B9AE;
  --yellow-green-color:           #B6C454;
  --walnut-brown-color:           #544B3D;
  --tiffany-blue-color:           #A6ECE0;
  --aquamarine-color:             #7ADFBB;
  --atomic-tangerine-color:       #FAAA8D;
  --red-important-color:          #CD5656;
  --dark-blue-nothardy-color:     #27548A;

  --body-font-family:           'Noto Sans JP', sans-serif;

  --h1-font-size:               62px;
  --h2-font-size:               42px;
  --h3-font-size:               36px;
  --h4-font-size:               32px;
  --h5-font-size:               24px;
  --h6-font-size:               22px;
  --p-font-size:                20px;
  --copyright-text-font-size:   14px;
  --custom-link-font-size:      12px;

  --font-weight-light:          300;
  --font-weight-normal:         400;
  --font-weight-bold:           700;
  --font-weight-black:          900;
}

.bg-boeks-primary {
  background-color: var(--primary-color)!important;
}
.bg-boeks-darkgray {
  background-color: var(--eerie-black-color)!important;
}
.bg-boeks-secondary::after {
  background-color: var(--secondary-color)!important;
}


/*---------------------------------------
  FLORAPACK COLORS
-----------------------------------------*/
.bg-florapack1 {
  background-color: #392567!important;
}
.bg-florapack2 {
  background-color: #965C81!important;
}
.bg-florapack3 {
  background-color: #FE988B!important;
}

.bg-florapack1-pops::after {
  background-color: #FE988B!important;
}
.bg-florapack2-pops::after {
  background-color: #392567!important;
}
.bg-florapack3-pops::after {
  background-color: #965C81!important;
}

/*---------------------------------------
  STRUCTURE STYLES
-----------------------------------------*/

body,
html {
  height: 100%;
}

body {
    background: var(--white-color);
    font-family: var(--body-font-family);    
    position: relative;
}


/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
  line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1,
h2 {
  font-weight: var(--font-weight-black);
}

h1 {
  font-size: var(--h1-font-size);
  line-height: normal;
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
}

.text-secondary-white-color {
  color: var(--text-secondary-white-color);
}

a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  color: var(--p-color);
  text-decoration: none;
}

a:hover {
  color: var(--primary-color);
}

::selection {
  background: var(--dark-color);
  color: var(--white-color);
}

.custom-underline {
  border-bottom: 2px solid var(--white-color);
  color: var(--white-color);
  padding-bottom: 4px;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  z-index: -100;
}

.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  background: linear-gradient(to top, #000, transparent 90%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.prevent-select {
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
}

/*---------------------------------------
  STYLE FOR FIRST LETTER
-----------------------------------------*/

#capital_letter::first-letter  {
  
    font-size: 4em;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    float: left;
    line-height: 1;
    padding-right: 0.1em;
    font-weight: bolder;
  }

#capital_letter {
  text-align: justify;
  max-width: 600px;
  margin: 20 auto;
}

/*---------------------------------------
  STYLE FOR UNFOLD BUTTON
-----------------------------------------*/

#unfold {
  background: var(--secondary-color);
  border: none;
  border-radius: 100px;
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  padding: 16px;
  transition: all 0.6s ease-out;
}

#unfold:hover {
  background: var(--primary-color);
}

#about_titles {
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#about_titles:hover {
  color: #c141a8; 
  transform: scale(1.1); 
  transform-origin: bottom left; 
}


/*---------------------------------------
  TRANSLUCENT B-FFECT
-----------------------------------------*/

.field-validation-area {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}




/*---------------------------------------
  CARDS FOR SMILES
-----------------------------------------*/

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* 3D effect */
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #FFFFFF;
  color: #00B9AE;
}

.flip-box-back {
  vertical-align: middle;
  background-color: #212529;
  color: white;
  transform: rotateY(180deg);
}

.flip-box-back h3 {
  color: #00B9AE;
}

.card-font-size {
  font-size: 16px;
}


/*---------------------------------------
  LEAVES EFFECT
-----------------------------------------*/
#leaves {position:relative;top:-50px;width:100%;text-align: right;}

#leaves i {
    display: inline-block;
    width: 200px;
    height: 150px;
    background: linear-gradient(to bottom right, #309900, #005600);
    transform: skew(20deg);
    border-radius: 5% 40% 70%;
    box-shadow: inset 0px 0px 1px #222;
    border: 1px solid #333;
    z-index: 1;
    -webkit-animation: falling 5s 0s infinite;
}

#leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; }
#leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; }

#leaves i:before {
  position: absolute;
  content: '';
  top: 117px;
  right: 9px;
  height: 27px;
  width: 32px;
  transform: rotate(49deg);
  border-radius: 0% 15% 15% 0%;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  border-left: 0px solid #222;
  border-right: 1px solid #222;
  background: linear-gradient(to right, rgba(0,100,0,1), #005600);
  z-index: 1;
}

#leaves i:after {
  content: '';
  height: 125px;
  width: 10px;
  background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0));
  display: block;
  transform: rotate(125deg);
  position: absolute;
  left: 85px;
  border-radius:50%;
}


#leaves i:nth-of-type(n)    { height:23px; width:30px; }
#leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; }
#leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; }

#leaves i:nth-of-type(2n+1)    { height:11px; width:16px; }
#leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; }
#leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; }

#leaves i:nth-of-type(3n+2)  { height:17px; width:23px; }
#leaves i:nth-of-type(3n+2):before  { height:4px; width:4px; top:12px; right:1px; }
#leaves i:nth-of-type(3n+2):after  { height:10px; width:2px; top:1px; left:8px; }

#leaves i:nth-of-type(n)   { -webkit-animation-delay: 1.9s;}
#leaves i:nth-of-type(2n)  { -webkit-animation-delay: 3.9s;}
#leaves i:nth-of-type(3n)  { -webkit-animation-delay: 2.3s;}
#leaves i:nth-of-type(4n)  { -webkit-animation-delay: 4.4s;}
#leaves i:nth-of-type(5n)  { -webkit-animation-delay: 5s;  }
#leaves i:nth-of-type(6n)  { -webkit-animation-delay: 3.5s;}
#leaves i:nth-of-type(7n)  { -webkit-animation-delay: 2.8s;}
#leaves i:nth-of-type(8n)  { -webkit-animation-delay: 1.5s;}
#leaves i:nth-of-type(9n)  { -webkit-animation-delay: 3.3s;}
#leaves i:nth-of-type(10n) { -webkit-animation-delay: 2.5s;}
#leaves i:nth-of-type(11n) { -webkit-animation-delay: 1.2s;}
#leaves i:nth-of-type(12n) { -webkit-animation-delay: 4.1s;}
#leaves i:nth-of-type(13n) { -webkit-animation-delay: 1s;  }
#leaves i:nth-of-type(14n) { -webkit-animation-delay: 4.7s;}
#leaves i:nth-of-type(15n) { -webkit-animation-delay: 3s;  }

#leaves i:nth-of-type(n)    { background: linear-gradient(to bottom right, #309900, #005600); }
#leaves i:nth-of-type(2n+2)  { background: linear-gradient(to bottom right, #5e9900, #2b5600); }
#leaves i:nth-of-type(4n+1)  { background: linear-gradient(to bottom right, #990, #564500); }

#leaves i:nth-of-type(n)    { opacity: .7;}
#leaves i:nth-of-type(3n+1)  { opacity: .5;}
#leaves i:nth-of-type(3n+2)  { opacity: .3;}

#leaves i:nth-of-type(n)    {transform: rotate(180deg);}


#leaves i:nth-of-type(n) { -webkit-animation-timing-function:ease-in-out;}

@-webkit-keyframes falling {
    
    0% {
        -webkit-transform:
            translate3d(300,0,0)
            rotate(0deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-350px,700px,0)
            rotate(90deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling3 {
     0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotate(-20deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-230px,640px,0)
            rotate(-70deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling2 {
     0% {
        -webkit-transform:
            translate3d(0,0,0)
            rotate(90deg);
    }
    
    100% {
        -webkit-transform:
            translate3d(-400px,680px,0)
            rotate(0deg);
        opacity: 0;
    }
}

/*---------------------------------------
  CUSTOM LINK               
-----------------------------------------*/

.custom-links {
  max-width: 230px;
}

.custom-link {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-block;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
}

.custom-link::after {
  content: "";
  width: 0;
  height: 2px;
  bottom: 0;
  position: absolute;
  left: auto;
  right: 0;
  z-index: -1;
  transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
  background: currentColor;
}

.custom-link:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

.custom-link:hover,
.custom-link:hover::after {
  color: var(--white-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

/*---------------------------------------
  NAVIGATION               
-----------------------------------------*/

.navbar {
  z-index: 11;
  right: 0;
  left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-brand {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 15px;
  padding-left: 15px;
}

.navbar-nav .nav-link::after {
  content: "\f140";
  font-family: bootstrap-icons;
  display: inline-block;
  margin-left: 10px;
  color: var(--primary-color);
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  transform: translateY(10px);
}

.navbar-nav .nav-link:hover::after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}

.navbar-nav .nav-link {
  color: var(--p-color);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  position: relative;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.active .nav-link::after {
  color: var(--primary-color);
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}

.navbar-nav .nav-item.active .nav-link,
.nav-link:focus, 
.nav-link:hover {
  color: var(--white-color);
}

.nav-link:focus {
  color: var(--p-color);
}

.navbar-toggler {
  border: 0;
  padding: 0;
  cursor: pointer;
  margin: 0;
  width: 30px;
  height: 35px;
  outline: none;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
  top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
  background: var(--dark-color);
  transition: background 10ms 300ms ease;
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
  position: absolute;
  right: 0;
  left: 0;
  background: var(--dark-color);
  width: 30px;
  height: 2px;
  content: '';
}

.navbar-toggler .navbar-toggler-icon:before {
  top: -8px;
}

.navbar-toggler .navbar-toggler-icon:after {
  top: 8px;
}
/*
#secondaryNavbarc {
  li
}
*/

/*---------------------------------------
  BOEK INDEX             
-----------------------------------------*/
.boek {
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 992px) {
  .boek {
    height: 100vh;
  }

  .custom-video,
  .news-detail-image {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
  }

  .sticky-wrapper {
    position: relative;
    bottom: 76px;
  }
}

.boekText {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
}

@media screen and (max-width: 991px) {
  .boekText {
    width: 100vw;
    font-size: 18px; /* Adjust font size for smaller screens */
    padding: 0 10px; /* Add padding for better spacing */
  }
}

@media screen and (max-width: 767px) {
  .boekText {
    font-size: 16px; /* Further reduce font size for smaller devices */
    line-height: 1.4; /* Adjust line height for readability */
  }
}

@media screen and (max-width: 480px) {
  .boekText {
    font-size: 14px; /* Smallest font size for very small screens */
    width: 95%; /* Increase width for better fit */
  }
}

/*---------------------------------------
  ABOUT & TEAM MEMBERS               
-----------------------------------------*/
.about-image,
.team-image {
  width: 100%;
  height: 100%;
  max-height: 635px;
  min-height: 475px;
  object-fit: cover;
}

.team-thumb {
  background: var(--white-color);
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%;
  padding: 22px 32px 32px 32px;
}

.carousel-control-next, 
.carousel-control-prev {
  top: auto;
  bottom: 2.5rem;
}

.carousel-control-prev {
  right: 4rem;
  left: auto;
}

.carousel-control-next-icon, 
.carousel-control-prev-icon {
  background-color: var(--dark-color);
  background-size: 50% 50%;
  border-radius: 100px;
  width: 3rem;
  height: 3rem;
}

/*---------------------------------------
  PORTFOLIO               
-----------------------------------------*/
.portfolio-thumb {
  position: relative;
  overflow: hidden;
}

.portfolio-info {
  margin: 20px;
}

/*---------------------------------------
  LINKS OF INTEREST           
-----------------------------------------*/

.news,
.related-news {
  background: var(--section-bg-color);
}

.news-thumb {
  position: relative;
}

.news-category {
  background: var(--white-color);
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  padding: 4px 12px;
  display: inline-block;
}

.news-text-info {
  margin: 0 20px;
}

.news-title {
  margin-top: 15px;
  margin-bottom: 15px;
}

.news-title-link {
  color: var(--title-color);
  display: inline-block;
}

.news-title-link:hover {
  color: var(--dark-color);
}

.portfolio-image,
.news-image {
  display: block;
  transition: transform 0.6s ease-out;
}

.news-image-hover {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  padding-bottom: 4px;
  height: 100%;
}

.news-image-hover::after {
  content: "";
  width: 0;
  height: 4px;
  bottom: 0;
  position: absolute;
  left: auto;
  right: 0;
  z-index: -1;
  transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
  background: #198754;
}

.news-image-hover-warning::after {
  background: #ffc107;
}

.news-image-hover-primary::after {
  background: #0d6efd;
}

.news-image-hover-success::after {
  background: #198754;
}

.news-image-hover:hover::after {
  width: 100%;
  left: 0;
  right: auto;
  z-index: 9;
}

.image-popup:hover .portfolio-image,
.news-image-hover:hover .news-image {
  transform: scale(1.02);
}

.news-two-column {
  min-height: 199px;
  margin-bottom: 16px;
}

.news-two-column .news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-share-link,
.social-share-link + span {
  color: rgba(255, 255, 255, 0.65);
}

.care-tag-name {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.care-tag-info {
  margin: 0 10px!important;
}

.care-tags-title {
  font-size: 20px!important;
  margin-top: 10px!important;
  margin-bottom: 10px!important;
}

.care-tag-text {
  font-size: 16px!important;
}

/*---------------------------------------
  SECTIONS               
-----------------------------------------*/
.section-padding {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/*---------------------------------------
  CONTACT FORMS              
-----------------------------------------*/
.contact-info {
  padding: 40px;
}

.contact-form .form-control {
  border-radius: 0;
  font-weight: var(--font-weight-normal);
  padding-top: 12px;
  padding-bottom: 12px;
}

.contact-form button[type='submit'] {
  background: var(--secondary-color);
  border: none;
  border-radius: 100px;
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  padding: 16px;
  transition: all 0.6s ease-out;
}

.contact-form button[type='submit']:hover {
  background: var(--primary-color);
}

.form-label {
  color: var(--p-color);
  font-weight: var(--font-weight-bold);
}

.map-iframe {
  display: block;
  filter: grayscale(100);
}

/*---------------------------------------
  SITE FOOTER               
-----------------------------------------*/
.site-footer {
  background: var(--dark-color);
  padding-top: 4.5rem;
  padding-bottom: 0rem;

}

.site-footer .custom-link {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--p-font-size);

}

.site-footer .custom-link:hover,
.site-footer .social-icon-link:hover {
  color: var(--white-color);

}

.copyright-text {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--copyright-text-font-size);
  
}

/*---------------------------------------
  CURSOR THING OVER LOGO               
-----------------------------------------*/

#container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
}

.a-title {
  position: absolute;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: conic-gradient(#ed0101, blue);
  /* pointer-events: none; */
  mix-blend-mode: difference;
  filter: drop-shadow(2px 4px 6px black);
}
.a-second-title {
  position: absolute;
  margin-top: 20vh;
  /* pointer-events: none; */
  -webkit-text-stroke: 1.3px white;
  -webkit-text-fill-color: white;
  letter-spacing: 1.125px;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 900;
  mix-blend-mode: color-dodge;
}

canvas {
  width: 100%;
  height: 100%;
}

/*---------------------------------------
  FLOAT SHADOW
----------------------------------------*/

.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/*---------------------------------------
  SCENES
-----------------------------------------*/


/* scenes (the good stuff) */

@keyframes scene-transition {
  25% {
    filter: brightness(100%);
  }
  100% {
    filter: brightness(100%);
    -webkit-mask-size: 1800%;
  }
}

.scenes {
  position: relative;
  aspect-ratio: 2.4 / 1;
  outline: 2px solid #ccc;
}

.scene-1, .scene-2 {
  position: absolute;
  inset: 0;
  background-size: cover;
}

.scene-1 {
  background-image:
    radial-gradient(circle, #fff3 10%, transparent 20%),
    url('/images/inside/boom.jpg');
}

.scene-2 {
  background-image: url('/images/inside/cooler.jpg.');
  filter: brightness(0%);
  -webkit-mask-image: url('/images/florapack_logo_mini.svg');
  -webkit-mask-size: 10%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

.scenes:is(:hover, :focus) .scene-2 {
  animation: scene-transition 4s cubic-bezier(1, 0, 1, 1) forwards;
}

.scene-title {
  position: absolute;
  max-width: 45%;
  margin: min(40px, 4vw);
  font-size: 1.25em;
}

.scene-1 .scene-title {
  bottom: 0;
  left: 0;
  color: #fff;
  text-align: left;
}

.scene-2 .scene-title {
  top: 0;
  left: 0;
  color: #fff;
  text-align: left;
}

/* everything else */

@keyframes visual-transition {
  25% {
    background-color: #808080;
  }
  100% {
    background-color: #808080;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}


.wrapper {
  display: grid;
  gap: 30px;
  width: min(1000px, 100%);
}

.intro {
  text-align: center;
}

.heading {
  margin: 0;
  font-size: 2.5em;
}

.heading::before, .heading::after {
  content: ' — ';
}

.nudge {
  margin: 0;
  color: #888;
  font-size: 1.25em;
}

.visualizer {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.visualizer-frame-1, .visualizer-frame-2 {
  position: relative;
  width: min(150px, 25vw);
  aspect-ratio: 2.4 / 1;
  outline: 2px solid #ccc;
  background-color: #333;
  background-image:
    linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%),
    linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%);
  background-size:
    16px 16px,
    16px 16px;
  background-position:
    0 0,
    8px 8px;
}

.visualizer-mask {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px #111;
}

.visualizer-frame-1 .visualizer-mask {
  background-color: #000;
}

.visualizer-frame-2 .visualizer-mask {
  background-image: url(https://assets.codepen.io/77020/sw-jedi-crest.svg);
  background-size: 10%;
  background-position: center;
  background-repeat: no-repeat;
}

.scenes:is(:hover, :focus) + .visualizer .visualizer-frame-1 .visualizer-mask {
  animation: visual-transition 4s cubic-bezier(1, 0, 1, 1) forwards;
}

.scenes:is(:hover, :focus) + .visualizer .visualizer-frame-2 .visualizer-mask {
  background-size: 1800%;
  transition: background-size 4s cubic-bezier(1, 0, 1, 1);
}

.operator {
  display: grid;
  place-items: center;
  font-size: 1.25em;
}


/*---------------------------------------
  CIRCLE NAVIGATION ZOOM IN EFFECT
-----------------------------------------*/
.circle-nav-link:hover,
.circle-nav-link:focus {
  transform: scale(1.5);
  z-index: 2;
}
.circle-nav-link {
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.circle-nav-img, 
.zoom-hover {
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.circle-nav-link:hover .zoom-hover,
.circle-nav-link:focus .zoom-hover {
  transform: scale(1.15);
}


.circle-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 80px;
}
.circle-nav-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #66BD30;
    box-shadow: 0 2px 8px #212529;
    transition: border-color 0.2s;
    background: #fff;
    margin-bottom: 6px;
}
.circle-nav-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.circle-nav-link:hover .circle-nav-img,
.circle-nav-link:focus .circle-nav-img {
    border-color: #C141A8;
}
.circle-nav-label {
    font-size: 0.85rem;
    margin-top: 2px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .circle-nav-link { width: 60px; }
    .circle-nav-img { width: 48px; height: 48px; }
    .circle-nav-label { font-size: 0.75rem; }
}
@media (min-width: 601px) {
    .circle-nav-img {
        width: 69px !important;
        height: 69px !important;
    }
    .circle-nav-link {
        width: 110px !important;
    }
}
@media (max-width: 600px) {
    .circle-nav-img {
        width: 53px !important;
        height: 53px !important;
    }
    .circle-nav-link {
        width: 65px !important;
    }
}



/*---------------------------------------
  SHINE EFFECT
-----------------------------------------*/

.btn-shine {

  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 12px 48px;
  color: #ffffff;
  background: linear-gradient(to right, #4d4d4d 0, white 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}   
@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
}

}

/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
  margin: 0;
  padding: 0;
}

.social-icon li {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.social-icon-link {
  color: rgba(255, 255, 255, 0.45);
  font-size: 1rem;
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 15px;
}

.social-icon-link:hover {
  color: var(--primary-color);
}

/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (min-width: 1600px) {
  .news-two-column {
    min-height: 232.5px;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: clamp(1.375rem, 1.06rem + 2vw, 2.25rem); }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .team-thumb {
    left: 0;
    width: auto;
  }

  .news-two-column {
    height: auto !important;
    min-height: inherit;
  }

  .news .col-12 .news-two-column:first-child {
    margin-bottom: 38px;
  }
}

@media screen and (max-width: 767px) {
  .news-detail-title {
    font-size: 36px;
  }
}

/*---------------------------------------
  RESPONSIVE STYLES ESPECIFICALLY FOR MOBILE              
-----------------------------------------*/

@media screen and (max-width: 480px) {
  h1 {
    font-size: clamp(1.375rem, 1.06rem + 2vw, 2.25rem);
  }
   h2 {
    font-size: 26px;
  }
   h3 {
    font-size: 24px;
  }
  h5 {
    font-size: 16px;
  }

  .boekResponsive p {
    font-size: 16px;
  }

  .boekText p {
    font-size: 14px;
  }
}

@media screen and (max-width: 360px) {
  h1 {
    font-size: clamp(1.375rem, 1.06rem + 2vw, 2.25rem);
  }
   h2 {
    font-size: 26px;
  }
   h3 {
    font-size: 24px;
  }
  h5 {
    font-size: 16px;
  }

  .boekResponsive p {
    font-size: 16px;
  }

  .boekText p {
    font-size: 14px;
  }
}

@media screen and (max-width: 359px) {
  .news-detail-title {
    font-size: clamp(1.375rem, 1.06rem + 2vw, 2.25rem);
  }
}


/* =========================================================================
   "You may be interested in" - make the three stacked cards on the right
   occupy exactly the same vertical space as the large image on the left.
   Added 2026-08-18.

   Both columns are col-lg-6 so they are the same width. The large image
   (florapack_2023.jpg) is 1673x1920 and fills its column, so its rendered
   height is always contentWidth x 1920/1673. Giving the inner wrapper that
   same aspect ratio makes it exactly as tall as the image beside it - no
   JavaScript, and it stays correct at every window size.

   The ratio sits on .news-side-stack-inner rather than on the column itself
   because aspect-ratio measures the border box, and the Bootstrap column
   carries 12px of gutter padding on each side which would make it too tall.

   The three cards then divide that height equally with flex: 1.
   ========================================================================= */
@media screen and (min-width: 992px) {

    .news-side-stack { align-self: flex-start; }   /* do not stretch to row height */

    .news-side-stack-inner {
        aspect-ratio: 1673 / 1920;   /* matches the large image beside it */
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .news-side-stack-inner .news-two-column {
        flex: 1 1 0;                 /* three equal thirds */
        min-height: 0;               /* allow shrinking past min-height */
        height: auto !important;     /* ignore any inline height from JS */
        margin-bottom: 0;            /* spacing is handled by gap */
        overflow: hidden;
    }

    /* Let each image fill its share of the height and crop rather than stretch. */
    .news-side-stack-inner .news-top          { height: 100%; min-height: 0; overflow: hidden; }
    .news-side-stack-inner .news-image-hover  { display: block; height: 100%; }
    .news-side-stack-inner .news-image        { width: 100%; height: 100%; object-fit: cover; }
    .news-side-stack-inner .news-bottom       { display: flex; align-items: center; }
}

/* =========================================================================
   "See the new build" photo carousel.  Added 2026-08-18.

   Replaces the old two-column grid. One large photo centred with the next
   and previous peeking at the edges, moving with a long ease so it reads
   like turning a page rather than snapping.

   No extra library - the motion is a CSS transform driven by
   js/portfolio-carousel.js. Clicking a photo still opens the existing
   magnific-popup lightbox.
   ========================================================================= */

.pf-carousel {
    position: relative;
    padding: 0 0 8px;
}

.pf-viewport {
    overflow: hidden;
    padding: 8px 0 24px;      /* room for the lifted active slide's shadow */
}

.pf-track {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
    /* Reserve horizontal gestures for the carousel and leave vertical panning to
       the browser. Without this, Chrome on Android claims the sideways swipe as a
       page scroll and fires pointercancel, so dragging never starts. */
    touch-action: pan-y;
    /* The page-turn easing: quick to leave, long slow settle. */
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-track.is-dragging {
    transition: none;         /* follow the finger 1:1 while dragging */
    cursor: grabbing;
}

.pf-slide {
    touch-action: pan-y;
    flex: 0 0 auto;
    width: 68%;               /* leaves the neighbours visible at the edges */
    margin: 0;
}

.pf-link {
    display: block;
    touch-action: pan-y;              /* overrides the site-wide a{touch-action:manipulation} */
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    overflow: hidden;
    border-radius: 6px;
    background: #1c1c1c;      /* shows only for a moment before the photo paints */
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.pf-image {
    display: block;
    touch-action: pan-y;
    -webkit-user-drag: none;
    user-select: none;
    width: 100%;
    aspect-ratio: 3 / 2;      /* one fixed frame for portrait and landscape alike */
    height: auto;
    object-fit: cover;        /* crop rather than stretch */
    object-position: center;
    /* Neighbours sit back; the active slide comes forward. */
    transform: scale(1.06);
    opacity: .45;
    filter: saturate(.75);
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity   700ms ease,
                filter    700ms ease;
}

.pf-slide.is-active .pf-image {
    transform: scale(1);
    opacity: 1;
    filter: none;
}

.pf-slide.is-active .pf-link {
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------ arrows ---- */
.pf-arrow {
    position: absolute;
    top: calc(50% - 12px);
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #222;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
    transition: background .25s ease, transform .25s ease, opacity .25s ease;
}

.pf-arrow:hover  { background: #fff; transform: translateY(-50%) scale(1.08); }
.pf-arrow:focus-visible { outline: 3px solid #66bd30; outline-offset: 3px; }
.pf-arrow[disabled] { opacity: .28; cursor: default; pointer-events: none; }

.pf-prev { left: 18px; }
.pf-next { right: 18px; }
.pf-arrow span { position: relative; top: -3px; }

/* -------------------------------------------------------------- dots ---- */
.pf-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.pf-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c9c9c9;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.pf-dot.is-active { background: #66bd30; transform: scale(1.35); }
.pf-dot:focus-visible { outline: 2px solid #66bd30; outline-offset: 3px; }

.pf-hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: #8a8a8a;
}

/* ------------------------------------------------------- small screens -- */
@media screen and (max-width: 991px) {
    .pf-slide  { width: 82%; }
    .pf-track  { gap: 16px; }
    .pf-arrow  { width: 44px; height: 44px; font-size: 26px; }
    .pf-prev   { left: 8px; }
    .pf-next   { right: 8px; }
}

@media screen and (max-width: 575px) {
    .pf-slide  { width: 88%; }
    .pf-image  { aspect-ratio: 4 / 3; }   /* a little taller suits a phone */
    .pf-hint   { font-size: 12px; }
}

/* Respect the visitor's motion preference. */
@media (prefers-reduced-motion: reduce) {
    .pf-track,
    .pf-image { transition-duration: 1ms !important; }
}