@import "tailwindcss";

.caveat-brush-regular {
    font-family: "Caveat Brush", cursive;
    font-weight: 400;
    font-style: normal;
} 


.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }

  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-image {
    position: relative;
    will-change: transform;
}

.parallax-container-2 {
    position: relative;
    overflow: hidden;
}

.parallax-image-2 {
    position: relative;
    will-change: transform;
}

/* Header shrink effect */
header {
    transition: transform 0.3s ease;
}

header.header-scrolled {
    transform: scaleY(0.95);
    transform-origin: top center;
}

header h4 {
    transition: transform 0.3s ease;
}

header.header-scrolled h4 {
    transform: scale(0.95);
    transform-origin: left center;
}

header img {
    transition: transform 0.3s ease;
}

header.header-scrolled img {
    transform: scale(0.95);
    transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
    .parallax-image {
        transform: translateY(calc(var(--scroll-offset, 0) * 0.5));
    }
    .parallax-image-2 {
        transform: translateY(calc(var(--scroll-offset, 0) * 0.5));
    }
}