.hover\:scale-105:hover {
    transform: scale(1.05);
}
.transition-all {
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-behavior: normal;
    transition-property: all;
}
.duration-300 {
    transition-duration: 300ms;
}
.transform {
    transform: translateZ(0px);
}
#heroCanvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background-image: none;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: rgb(241, 241, 241);
}
::-webkit-scrollbar-thumb {
    background-image: none;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: rgb(136, 136, 136);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-image: none;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: rgb(85, 85, 85);
}
html {
    scroll-behavior: smooth;
}
img {
    max-width: 100%;
    height: auto;
}
.shadow-xl {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.hover\:-translate-y-2:hover {
    transform: translateY(-8px);
}
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-8.max-w-4xl.mx-auto {
    text-align: center;
}
.text-center.p-6.bg-blue-700.rounded-lg {
    text-align: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-8.max-w-4xl.mx-auto {
    text-align: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 300px;
}
@media (max-width: 768px) {
    .pt-20 {
        padding-top: 5rem;
    }
    .text-4xl {
        font-size: 2rem;
    }
    .text-6xl {
        font-size: 3rem;
    }
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
    }
    .min-h-screen {
        min-height: 100vh;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
    }
}
@media (min-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0px, 1fr));
    }
}