@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
@import url("banners.css");
@import url("/Sam-test-template/styles.css");

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/


/*****************************************/
/* Start your style declarations here    */
/*****************************************/
*, body {
  margin:0;
  padding:0;
  box-sizing: border-box;
  color:var(--IBF-green);
  /* text-align: center; */
}

html {
  scroll-behavior: smooth;
}


/*****************************************/
/* Root                                  */
/*****************************************/
:root {
  --IBF-pink: #E01983;
  --IBF-light-pink: #F7F0F2;
  --IBF-extra-light-pink: #FEFBFD;
  --IBF-dark-pink: #B3166A;

  --IBF-green: #0C331F;
  --IBF-medium-green: #365C54;
  --IBF-soft-green: #3E6B62;
  --IBF-light-green: #E9F1EF;

  --IBF-white: white;
  --IBF-medium-grey: #D9D9D9;

  --IBF-cream: #f8f6f5;
  --col-12: 1296px;
  --col-11: 1186px;
  --col-10: 1076px;
  --col-9: 966px;
  --col-8: 856px;
  --col-7: 746px;
  --col-6: 636px;
  --col-5: 526px;
  --col-4: 416px;
  --col-3: 306px;
  --col-2: 196px;
  --col-1-25: calc(var(--col-1) * 1.25);
  --col-1: 86px;

  /* Spacing */
  --container-padding: 1rem;

  /* Fonts */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-120: 1.2;
  --line-height-150: 1.5;
}


/*****************************************/
/* Body                                  */
/*****************************************/
body {
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  color: var(--IBF-green);
  width:100vw;
  margin:0em!important;
}


/*****************************************/
/* Nav Bar                               */
/*****************************************/

/* align logo on ipad */
#hs-link-dnd_area-module-1_hs_logo_widget {
  text-align: left;
}


/*****************************************/
/* Fonts stylings                        */
/*****************************************/
h1,
h2,
h3,
h4 {
  font-family: "Noto Serif", serif;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-120);
  font-variation-settings: "wdth" 75;
  transition: 0.3s;
}

/* Head text size styling */
h1,
h2.large {
  font-size: 40px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 28px;
}

h2.white,
h3.white {
  color: white;
}

h4 {
  font-size: 22px;
  color: var(--IBF-pink);
}

h4.small {
  font-size: 18px;
}

p {
  margin:0;
  line-height: 150%;
}

.small-text {
  font-size: 16px;
}

.t-pink {
  color: var(--IBF-pink)!important;
}

/* Link styling                          */
/*****************************************/
a, a h4 {
  color:var(--IBF-green);
  text-decoration: none;
  transition: 0.3s ease;
}

a:hover {
  /*     color: var(--IBF-pink); */
  cursor: pointer;
}

a:hover h4 {
  color: var(--IBF-soft-green) !important;
}

a:hover p {
  color: var(--IBF-soft-green) !important;
}


.categories-card {
  align-items: center;
}

a > .categories-card img {
  transition: 0.3s ease;
} 
a:hover .categories-card img {
  transform: scale(1.1); /* Slightly increase the size of the image */
}

.inline-text-link {
  text-decoration: underline;
  color: var(--IBF-pink);
}

.inline-text-link:hover {
  color: var(--IBF-dark-pink);
}

/*****************************************/
/* Banner styling                        */
/*****************************************/
#banner {
  width: 100vw;
  height: 500px;
  overflow: hidden;
}

#banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*****************************************/
/* Tags.                                 */
/*****************************************/

.tags > a {
  color:grey;
}

.tags > a:hover {
  color:var(--IBF-green);
}


/*****************************************/
/* Socials.                              */
/*****************************************/

.social-share {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction:row;
  gap: 10px;
  align-items: center;
}

.social-share li {
  display: inline-block;
}

.social-share svg {
  width: 24px;
  height: 24px;
  fill: #333;
  transition: fill 0.3s;
}

.social-share a:hover svg {
  fill:var(--IBF-pink);
}

/*****************************************/
/* Breadcrumbs                           */
/*****************************************/

#hs_cos_wrapper_post_body > nav {
  display:none;
}

#postContent > span {
  display:flex;
  flex-direction:column;
  /*   gap:1em; */
}

#postContent .img-wrapper {
  border-radius: 0.5em;
  overflow: hidden;
}

#postContent .img-wrapper--landscape img {
  width: 100%;
  height: auto;
  max-height: 700px;
  object-fit: cover;
}


#postContent .img-wrapper--portrait {
  background-color: var(--IBF-light-pink);
  padding: 0 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#postContent .img-wrapper--portrait img {
  height: auto;
  width: auto;
  max-height: 700px;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 600px) {
  #postContent .img-wrapper--portrait {
    padding: 0 40px;
  }

  #postContent .img-wrapper--portrait img {
    max-height: 400px;
  }
}

#postContent #text {
  width:90%;
}

.about-author-sec {
  padding: 1.5rem;
  background:#FCF7F8;
  border-radius:1rem;
}

.about-author-sec > p {
  font-size:14px;
}

/*****************************************/
/* Related Blogs                         */
/*****************************************/

.blog-recent-posts > .content-wrapper {
  display:flex;
  flex-direction:column;
  gap:.5em;
}

.blog-index__post {
  display:flex;
  flex-direction:row;
  gap:1em;
  width:100%;
  padding:1em;
  background:var(--IBF-light-green);
  text-align:left;
  border-radius:.5em;
}

@media (max-width: 500px) {
  .blog-index__post {
    flex-direction:column;
  }
  .blog-index__post-image {
    max-width:100% !important;
  }
}

.blog-index__post h2 > span {
  display:none;
}

.blog-index__post a.hs-button  {
  color:var(--IBF-pink);
}

.blog-index__post-content {
  display:flex;
  flex-direction:column;
  gap:.5em;
  width:100%;
  justify-content:space-between;
}

.blog-index__post-image {
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  background-size:cover;
  background-position:center center;
  max-width:25vw;
  border-radius:.25em;
}

.blog-recent-posts__item {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  background-color: #f9f9f9;
  padding: 1em;
  border-radius: 8px;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .blog-recent-posts__item {
    align-items:center !important;
    flex-direction: column;
    text-align:center;
  }
}

.blog-recent-posts__item img 
width: 100%;
max-width: 300px;
height: auto;
border-radius: 6px;
object-fit: cover;
aspect-ratio: 1/1;
}

.blog-post__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/*****************************************/
/* Button stylings                       */
/*****************************************/
.btn {
  display: inline-block;
  padding: 0.8em 1.5em;
  font-size: 16px;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  transition: 0.3s ease;
  z-index:10;
  width: auto;
  width: fit-content;
  white-space: nowrap;
}
.btn:hover {
  cursor:pointer;
}

.btn-primary {
  color: var(--IBF-white);
  background: var(--IBF-pink);
}
.btn-primary:hover {
  color: var(--IBF-white);
  background: var(--IBF-dark-pink);
}

.btn-secondary {
  color: var(--IBF-pink);
  background: none;
  border: 1px solid var(--IBF-pink);
}
.btn-secondary:hover {
  color: var(--IBF-white);
  background: var(--IBF-pink);
}

.btn-tertiary {
  color: var(--IBF-green);
  background: none;
  border: 1px solid var(--IBF-green);
}
.btn-tertiary:hover {
  color: var(--IBF-white);
  background: var(--IBF-green);
}

.btn-confirmed {
  background-color: var(--IBF-green); /* Green background */
  color: white;
}
.btn-confirmed:hover {
  background-color: var(--IBF-green); /* Green background */
  color: white;
  border: none;
  cursor: default!important;
}

/*****************************************/
/* Flex styling                          */
/*****************************************/
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.flex-column {
  display: flex;
  flex-direction: column;
}



.between {
  justify-content: space-between;
}

.a-i-start{
  align-items: start;
}

.a-i-center {
  align-items: center;
}

.j-c-start{
  justify-content: start;
}

.j-c-center {
  justify-content: center;
}

.t-left {
  text-align: left;
}

.t-center {
  text-align: center;
}

.pointer {
  cursor:pointer;
}

/*****************************************/
/* Grid styling                          */
/*****************************************/
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 1em; /* Space between items */
}

.grid-4 > .content-card {
  max-width: none;
}

@media (max-width: 1320px) {
  .grid-4 {
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns for smaller screens */
  }
}

@media (max-width: 1020px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr); /* 2 equal columns for mobile */
  }
}

@media (max-width: 660px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr); /* 2 equal columns for mobile */
  }

  #regular-banner-with-cards > div > div > a:nth-child(1) > div {
    min-width: none;
  }
}

/*****************************************/
/* Section                               */
/*****************************************/
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: 1px solid pink; */
  padding:3em 2em;
}
/* Section spanning the full viewport width */
.full-width-section {
  width: 100%;
}

/*****************************************/
/* Tags.                                 */
/*****************************************/
article > div:last-of-type > a {
  color:grey;
}

article img {
  mix-blend-mode: multiply;
  border-radius:.25rem;
}

nav img {
  width:100%;
  height:auto;
}


/*****************************************/
/* Containers                            */
/*****************************************/
.container {
  width: 100%;
  height: auto;
  max-width: 100%; /* Ensures no overflow beyond its parent */
  margin: 0;
  padding: 0em;
  box-sizing: border-box;
  /* border: 1px solid blue; */
}

/* Grid Widths */
.max-12 { max-width: var(--col-12); }
.max-11 { max-width: var(--col-11); }
.max-10 { max-width: var(--col-10); }
.max-9  { max-width: var(--col-9); }
.max-8  { max-width: var(--col-8); }
.max-7  { max-width: var(--col-7); }
.max-6  { max-width: var(--col-6); }
.max-5  { max-width: var(--col-5); }
.max-4  { max-width: var(--col-4); }
.max-3  { max-width: var(--col-3); }
.max-2  { max-width: var(--col-2); }
.max-1  { max-width: var(--col-1); }

.min-12 { min-width: var(--col-12); }
.min-11 { min-width: var(--col-11); }
.min-10 { min-width: var(--col-10); }
.min-9  { min-width: var(--col-9); }
.min-8  { min-width: var(--col-8); }
.min-7  { min-width: var(--col-7); }
.min-6  { min-width: var(--col-6); }
.min-5  { min-width: var(--col-5); }
.min-4  { min-width: var(--col-4); }
.min-3  { min-width: var(--col-3); }
.min-2  { min-width: var(--col-2); }
.min-1-25  { min-width: var(--col-1-25); }
.min-1  { min-width: var(--col-1); }

/*****************************************/
/* Z-index                               */
/*****************************************/
.z-10 {
  z-index: 10;
}

/*****************************************/
/* Form styling                          */
/*****************************************/
label, input {
  text-align: left;
}

input {
  padding: 1em 1em;
  border-radius: .25em;
  border: 1px solid #909090;
  font-size: 18px;
  box-sizing: border-box;
}

input:focus {
  border: 1px solid gold;
}

fieldset {
  border: none!important;
}

/*****************************************/
/* List styling                          */
/*****************************************/
ul, ol {
  padding: 0;
  margin: 0;
  list-style-position: inside;
}

li {
  text-align: left;
}

/*****************************************/
/* IMG styling                           */
/*****************************************/
.img-round {
  border-radius:100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.img-square {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.img-hd {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

.img-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  max-width: 64px;
}

.recent-post-image {
  width:200px;
  aspect-ratio:1/1;
  object-fit: cover;
  border-radius:.5em;
}


/* Cards get Hover effect on image       */
/*****************************************/

/* Content card image container */
.img-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.25em; /* Adjust if needed */
  width: 100%; /* Matches the card width */
  aspect-ratio: 1/1; /* Ensures a square container */
}

/* Ensure the image fits inside the container */
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* Smooth scaling effect */
}

#rich-text-with-categories .img-container {
  background:rgba(0,0,0,.05);
}



/* Scale up the image on hover */
a:hover .img-container img {
  transform: scale(1.1); /* Adjust scale factor as needed */
}



.aspect-ratio-container {
  position: relative;
  aspect-ratio:16/9;
  width: 100%;
  overflow: hidden; /* Ensures the image does not overflow the container */
}

.aspect-ratio-container img {
  width: 100%;
  height: 100%;
  object-position: center center;
  object-fit: cover; /* Ensures the image covers the container without stretching */
}

/*****************************************/
/* Video styling                         */
/*****************************************/

iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: .5em;
}



/*****************************************/
/* Backgrounds                           */
/*****************************************/
.bg-green {
  background: var(--IBF-light-green);
}

.bg-pink {
  background: var(--IBF-light-pink);
}

.bg-cream {
  background: var(--IBF-cream);
}

.bg-light-pink {
  background: var(--IBF-light-pink);
}

.bg-extra-light-pink {
  background: var(--IBF-extra-light-pink);
}

.bg-image {
  background: url(/images/banner_vday.jpg) center / cover;
  height: 600px;
  width: auto;
}

.hidden-image {
  display:none;
  border-radius: .5em;
}

.review-stars {
  width: 25%;
}

/* Styling for the heart container */
.heart-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Heart styling */
.heart {
  position: absolute;
  bottom: -50px; /* Start below the visible area */
  width: 32px;
  height: 32px;
  opacity: 0; /* Initially hidden */
}



/*****************************************/
/* UL Styling.                           */
/*****************************************/
ul {
  display:flex;
  flex-direction:column;
  gap:0.5em;
}




/*****************************************/
/* Content Card New                      */
/*****************************************/
.content-card-new {
  width: 100%;
  height: 100%;

  min-width: var(--col-2);
  max-width: var(--col-3);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border: 1px solid var(--IBF-medium-grey);
  border-radius: .25em;

  overflow: hidden;

  background: white;
}

.content-card-new .img-container {
  overflow: hidden;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.05)
}

.content-card-new .img-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05); /* Subtle black overlay */
  pointer-events: none; /* Ensure overlay doesn't block interactions */
  z-index: 1; /* Place overlay on top of image */
}

.content-card-new .img-container img {
  width: 102%;
}

.content-card-new .text-container {
  padding: 1em;
}



/*****************************************/
/* Product Card New                      */
/*****************************************/
.product-card-new {
  width: 100%;
  height: 100%;

  min-width: var(--col-2);
  max-width: var(--col-3);

  display: flex;
  flex-direction: column;

  border-radius: .25em;
}

.product-card-new .img-container {
  overflow: hidden;
  border-radius: 0;
  display: flex;
  justify-content: center;
}

.product-card-new h4 {
  text-align: left;
}

.product-card-new .img-container img {
  width: 102%;
}

/*****************************************/
/* Clean-up this mess                    */
/*****************************************/

summary::marker {
  margin-right: auto;
}

.padding-1em {
  padding: 1em;
}

.padding-1_5em {
  padding: 1.5em;
}

.padding-2em {
  padding: 2em;
}

.order-1 {
  order: -1;
}

.border-4px {
  border-radius: .25em;
}

.border-8px {
  border-radius: .5em;
}

.border-16px {
  border-radius: 1em;
}

.border-100 {
  border-radius: 100%;
}

.content-card > img {
  border-radius: .25em;
}

.gap-3 {
  gap: 3em;
}

.gap-2-5 {
  gap:2.5em
}

.gap-2 {
  gap:2em;
}

.gap-15 {
  gap:1.5em;
}

.gap-1 {
  gap:1em;
}

.gap-5 {
  gap:.5em;
}

.gap-25 {
  gap:.25em;
}

.gap-24px {
  gap:24px;
}

.height {
  height: 100%;
}

.fit-height {
  height: fit-content;
}




/*****************************************/


/* Desktop view */
@media (min-width: 768px) {
  .custom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 20px; /* Adjust gap between items */
  }

}


/* Mobile view */
@media (max-width: 767px) {

  .about-author-sec {
    flex-direction: column;
    gap:1em;
    align-items:center;
    text-align:center;
  }

  section {
    padding: 2em 1em;
  }
  .container {
    width: 100%;
    /* gap: 1em; */
  }

  .btn {
    white-space: nowrap;
  }

  #spotlight-banner {
    padding-top: 0em;
  }

  .content-card
  {
    min-width:var(--col-2) ;
  }

  .categories-card
  {
    min-width:var(--col-1-25) ;
  }

  .flex-row {
    /*     flex-direction: column; */
  }

  .bg-image {
    background: none!important;
    height: auto;
  }

  .hidden-image {
    display: block;
    width: 100%;
  }

  .banner-image {
    order: -1;
  }

  .order-1-mobile {
    order: -1;
  }


  .between {
    /*     align-items: flex-start; */
    align-content:center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
  }

  /* padding fix of details on mobile */
  .details {
    padding: 0em 1em 1em 1em;
  }


  /* row reverse naar column op mobile */
  .flex-row-reverse {
    display: flex;
    flex-direction: column;
  }

  /*****************************************/
  /* Logo fix on mobile                    */
  /*****************************************/
  #hs-link-dnd_area-module-1_hs_logo_widget > img {
    width: 120px!important;
  }

}