.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.mb-16 {
    margin-bottom: 4rem;
}

.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.5rem\)\] {
    font-size: 40px;
}
.gap-8 {
    gap: 2rem;
}










.animate-fadeIn {
    animation: fadeIn 0.8s ease-in-out;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover-scale {
    transition: transform 0.3s ease;
}

.h-64 {
    height: 350px;
}

.h-full {
    height: 100%;
}
.w-full {
    width: 100%;
}
.object-cover {
    object-fit: cover;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-500 {
    transition-duration: 500ms;
}

.p-6 {
    padding: 1.5rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-primary {
    --tw-text-opacity: 1;
    color: #ff6b00;
}


.h-8 {
    height: 2rem;
}

.w-8 {
    width: 2rem;
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}


.hover\:text-white:hover{
    --tw-text-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:bg-primary:hover{
    --tw-bg-opacity: 1;
    background-color: #ff6b00;
}
























@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}