.booom-hero-small .absolute {
    position: absolute
}
.booom-hero-small .relative {
    position: relative
}
.booom-hero-small .inset-0 {
    inset: 0px
}
.booom-hero-small .mb-10 {
    margin-bottom: 2.5rem
}
.booom-hero-small .mb-12 {
    margin-bottom: 3rem
}
.booom-hero-small .flex {
    display: flex
}
.booom-hero-small .inline-flex {
    display: inline-flex
}
.booom-hero-small .grid {
    display: grid
}
.booom-hero-small .size-\[60px\] {
    width: 60px;
    height: 60px
}
.booom-hero-small .h-\[260px\] {
    height: 260px
}
.booom-hero-small .h-full {
    height: 100%
}
.booom-hero-small .w-full {
    width: 100%
}
.booom-hero-small .max-w-\[460px\] {
    max-width: 460px
}
.booom-hero-small .shrink-0 {
    flex-shrink: 0
}
.booom-hero-small .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.booom-hero-small .items-start {
    align-items: flex-start
}
.booom-hero-small .items-center {
    align-items: center
}
.booom-hero-small .justify-center {
    justify-content: center
}
.booom-hero-small .gap-1 {
    gap: 0.25rem
}
.booom-hero-small .gap-10 {
    gap: 2.5rem
}
.booom-hero-small .gap-5 {
    gap: 1.25rem
}
.booom-hero-small .overflow-hidden {
    overflow: hidden
}
.booom-hero-small .rounded-corner-sm {
    border-radius: 5px
}
.booom-hero-small .rounded-full {
    border-radius: 9999px
}
.booom-hero-small .rounded-br-corner-sm {
    border-bottom-right-radius: 5px
}
.booom-hero-small .bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(27 91 84 / var(--tw-bg-opacity, 1))
}
.booom-hero-small .bg-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(233 198 164 / var(--tw-bg-opacity, 1))
}
.booom-hero-small .object-cover {
    -o-object-fit: cover;
       object-fit: cover
}
.booom-hero-small .pb-24 {
    padding-bottom: 6rem
}
.booom-hero-small .pt-16 {
    padding-top: 4rem
}
.booom-hero-small .font-mulish {
    font-family: Mulish, sans-serif
}
.booom-hero-small .text-\[13px\] {
    font-size: 13px
}
.booom-hero-small .text-\[16px\] {
    font-size: 16px
}
.booom-hero-small .text-\[20px\] {
    font-size: 20px
}
.booom-hero-small .text-\[34px\] {
    font-size: 34px
}
.booom-hero-small .font-bold {
    font-weight: 700
}
.booom-hero-small .font-light {
    font-weight: 300
}
.booom-hero-small .leading-\[1\.2\] {
    line-height: 1.2
}
.booom-hero-small .leading-\[1\.6\] {
    line-height: 1.6
}
.booom-hero-small .text-primary {
    --tw-text-opacity: 1;
    color: rgb(27 91 84 / var(--tw-text-opacity, 1))
}
.booom-hero-small .text-secondary {
    --tw-text-opacity: 1;
    color: rgb(233 198 164 / var(--tw-text-opacity, 1))
}
.booom-hero-small .text-surface {
    --tw-text-opacity: 1;
    color: rgb(249 250 248 / var(--tw-text-opacity, 1))
}
.booom-hero-small .text-surface\/50 {
    color: rgb(249 250 248 / 0.5)
}
.booom-hero-small .text-surface\/70 {
    color: rgb(249 250 248 / 0.7)
}
.booom-hero-small .underline {
    text-decoration-line: underline
}
.booom-hero-small .no-underline {
    text-decoration-line: none
}
.booom-hero-small .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.booom-hero-small .hover\:text-surface:hover {
    --tw-text-opacity: 1;
    color: rgb(249 250 248 / var(--tw-text-opacity, 1))
}
.booom-hero-small :is(.group:hover .group-hover\:scale-105) {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@media (min-width: 640px) {
    .booom-hero-small .sm\:h-\[340px\] {
        height: 340px
    }
    .booom-hero-small .sm\:text-\[42px\] {
        font-size: 42px
    }
}
@media (min-width: 1024px) {
    .booom-hero-small .lg\:col-span-5 {
        grid-column: span 5 / span 5
    }
    .booom-hero-small .lg\:col-span-7 {
        grid-column: span 7 / span 7
    }
    .booom-hero-small .lg\:-mb-44 {
        margin-bottom: -11rem
    }
    .booom-hero-small .lg\:h-\[410px\] {
        height: 410px
    }
    .booom-hero-small .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }
    .booom-hero-small .lg\:pb-32 {
        padding-bottom: 8rem
    }
    .booom-hero-small .lg\:pt-24 {
        padding-top: 6rem
    }
    .booom-hero-small .lg\:pt-6 {
        padding-top: 1.5rem
    }
    .booom-hero-small .lg\:text-\[24px\] {
        font-size: 24px
    }
}