/* Add this to your CSS file */

section {
    scroll-behavior: smooth;
  }

.hero-section {
    background-image: var(--hero-background-image); /* Background Image dinamis */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    box-sizing: border-box;
  }

  section:not(.hero-section){
    min-height: 800px;
  }
/* 
  section + section {
    margin-top: -20px;
  } */

  section:nth-child(even) {
    background-color: #f2f2f2; /* alternate background color */
  }
  
  section:nth-child(odd) {
    background-color: #fff; /* alternate background color */
  }
  
  .light-bg{
    background-image: url('../pages/kubukami-bg-light.jpg');
    background-size: cover;
    background-position: center;
  }

  .dark-bg{
    background-image: url('../pages/kubukami-bg-dark.jpg');
    background-size: cover;
    background-position: center;
  }

  #particles-js {
    pointer-events: none;
}

    .btn-scroll-down, .img-fluid {
    pointer-events: auto;
    }

  .hero-section img {
    width: 89%; /* adjust the width to your liking */
    height: auto; /* maintain aspect ratio */
    margin: 0 auto; /* center the logo horizontally */
  }

  .hero-button-wrapper {
    position: absolute; /* position the button absolutely */
    bottom: 40px; /* move the button to the bottom of the hero section */
    left: 50%; /* center the button horizontally */
    transform: translateX(-50%);
}

  /* About Section Styles */
.about-section {
    padding: 40px 0;
    width: 100%;
}

:root {
    --text-stroke-width: 1px;
    --light-text-stroke-color: black;
    --dark-text-stroke-color: #fff;
}

.section-heading {
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    color: #fff;
}

.section-highlight {
    color: #333333;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
}

.section-heading:not(.section-highlight) {
    -webkit-text-stroke: var(--text-stroke-width);
    text-stroke: var(--text-stroke-width);
}

.light-section .section-heading:not(.section-highlight) {
    -webkit-text-stroke-color: var(--light-text-stroke-color);
    text-stroke-color: var(--light-text-stroke-color);
}

.dark-section .section-highlight {
    /* color: transparent; */
    -webkit-text-stroke: var(--text-stroke-width);
    text-stroke: var(--text-stroke-width);
    -webkit-text-stroke-color: var(--dark-text-stroke-color);
    text-stroke-color: var(--dark-text-stroke-color);
}

.about-text {
    font-size: calc(0.6vw + 7px);
    color: #ffffff; /* Adjust the text color as per your design */
    margin-top: 20px;
    line-height: 1.6;
}

.img-column {
    position: relative;
}

/* Ensure the images take up the full width */
.about-img1, .about-img2 {
    width: 190%;
    height: auto;
}

.image-wrapper1 {
    top: 0;
    left: 0;
    width: 100%; /* Adjust width as needed */
    height: auto;
    z-index: 1;
}

@media (max-width: 760px) {
    .image-wrapper1 {
        width: 80%; /* Adjust the width as needed */
        height: auto;
    }
}

/* Second image positioning with an offset */
.image-wrapper2 {
    top: 0; 
    left: 0; 
    width: 100%;
    height: auto;
    z-index: 1;
}

.produk-kami-item-text, .produk-kami-item-title {
    color: white;
}

/* Control the spacing and height */
.col-lg-5 .mb-3,
.col-lg-5 div:last-child {
    height: 48%; /* Adjust height as per requirement */
}


.btn-outline-primary {
    border-color: #333333;
    color: #333333;
}

.btn-outline-primary:hover {
    background-color: #333333;
    color: white;
}

        /* Custom media query for smaller text and grid adjustments on mobile */
        @media (max-width: 767.98px) {
            .about-heading {
                font-size: 1.5rem;
            }
            .about-text {
                font-size: 0.9rem;
            }

        }



        .blog-card .card {
            transition: transform 0.3s ease-in-out;
          }
          
          .blog-card .card:hover {
            transform: scale(1.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            z-index: 1;
          }