.booom-hero .pointer-events-none {
    pointer-events: none
}
.booom-hero .absolute {
    position: absolute
}
.booom-hero .relative {
    position: relative
}
.booom-hero .inset-0 {
    inset: 0px
}
.booom-hero .-right-40 {
    right: -10rem
}
.booom-hero .-top-40 {
    top: -10rem
}
.booom-hero .m-0 {
    margin: 0px
}
.booom-hero .mb-10 {
    margin-bottom: 2.5rem
}
.booom-hero .mb-4 {
    margin-bottom: 1rem
}
.booom-hero .block {
    display: block
}
.booom-hero .flex {
    display: flex
}
.booom-hero .inline-flex {
    display: inline-flex
}
.booom-hero .grid {
    display: grid
}
.booom-hero .size-\[60px\] {
    width: 60px;
    height: 60px
}
.booom-hero .h-6 {
    height: 1.5rem
}
.booom-hero .h-\[900px\] {
    height: 900px
}
.booom-hero .w-6 {
    width: 1.5rem
}
.booom-hero .w-\[900px\] {
    width: 900px
}
.booom-hero .max-w-\[1100px\] {
    max-width: 1100px
}
.booom-hero .max-w-\[420px\] {
    max-width: 420px
}
.booom-hero .shrink-0 {
    flex-shrink: 0
}
.booom-hero .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}
.booom-hero .items-center {
    align-items: center
}
.booom-hero .justify-center {
    justify-content: center
}
.booom-hero .gap-10 {
    gap: 2.5rem
}
.booom-hero .gap-5 {
    gap: 1.25rem
}
.booom-hero .overflow-hidden {
    overflow: hidden
}
.booom-hero .rounded-full {
    border-radius: 9999px
}
.booom-hero .rounded-br-corner-sm {
    border-bottom-right-radius: 5px
}
.booom-hero .border-t {
    border-top-width: 1px
}
.booom-hero .border-white\/20 {
    border-color: rgb(255 255 255 / 0.2)
}
.booom-hero .bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(27 91 84 / var(--tw-bg-opacity, 1))
}
.booom-hero .bg-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(233 198 164 / var(--tw-bg-opacity, 1))
}
.booom-hero .py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}
.booom-hero .py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
}
.booom-hero .pl-11 {
    padding-left: 2.75rem
}
.booom-hero .font-mulish {
    font-family: Mulish, sans-serif
}
.booom-hero .text-\[16px\] {
    font-size: 16px
}
.booom-hero .text-\[20px\] {
    font-size: 20px
}
.booom-hero .text-\[42px\] {
    font-size: 42px
}
.booom-hero .font-bold {
    font-weight: 700
}
.booom-hero .font-extralight {
    font-weight: 200
}
.booom-hero .font-light {
    font-weight: 300
}
.booom-hero .leading-\[1\.4\] {
    line-height: 1.4
}
.booom-hero .leading-\[1\.6\] {
    line-height: 1.6
}
.booom-hero .leading-none {
    line-height: 1
}
.booom-hero .text-primary {
    --tw-text-opacity: 1;
    color: rgb(27 91 84 / var(--tw-text-opacity, 1))
}
.booom-hero .text-surface {
    --tw-text-opacity: 1;
    color: rgb(249 250 248 / var(--tw-text-opacity, 1))
}
.booom-hero .underline {
    text-decoration-line: underline
}
.booom-hero .no-underline {
    text-decoration-line: none
}
.booom-hero .opacity-10 {
    opacity: 0.1
}
.booom-hero .opacity-90 {
    opacity: 0.9
}
.booom-hero .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.booom-hero :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 .sm\:text-\[64px\] {
        font-size: 64px
    }
}
@media (min-width: 768px) {
    .booom-hero .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}
@media (min-width: 1024px) {
    .booom-hero .lg\:py-28 {
        padding-top: 7rem;
        padding-bottom: 7rem
    }
    .booom-hero .lg\:text-\[100px\] {
        font-size: 100px
    }
    .booom-hero .lg\:text-\[24px\] {
        font-size: 24px
    }
}