@import url(config.css);

main{
    padding: 7rem 4rem;
}

/* Custom Keyframe for Entrance Animation (Slide Up) */
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Utility class to apply the animation with an initial delay */
.animate-entrance {
    animation: slideInUp 0.7s ease-out forwards;
    opacity: 0; /* Start invisible */
}

/* Custom Keyframe for Card Hover Animation */
.product-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.05);
}

.product-card h4{
    font-family: var(--heading);
    text-align: center;
}
.text-sm{
    font-family: var(--p);
}
.mb-3{
    text-align: center;
}

button.mt-4.w-full.py-2.bg-blue-100.text-blue-700.font-semibold.rounded-lg.hover\:bg-blue-200.transition.duration-300{
    border-radius: 25px;
}


h2.text-4xl.sm\:text-5xl.font-extrabold.text-gray-900.mb-3.leading-tight{
    font-family: var(--heading);
}
h3.text-3xl.font-bold.text-gray-900.mb-6.border-l-4.border-blue-500.pl-3{
    font-family: var(--heading);
}


p.text-xl.text-blue-600.font-semibold.mb-6{
    font-family: var(--p);
}

p.text-gray-600.mb-8{
    font-family: var(--p);
}
ul.space-y-3.mb-8.text-gray-700{
    font-family: var(--p);
}

/* S
et different delays for staggered effect on listing page */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* Custom scrollbar styling (optional but clean) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: #90b3e7;
    border-radius: 4px;
}

/* Hide pages by default, JS will show the current one */
.page-content {
    display: none;
}

h2.text-4xl.font-extrabold.text-gray-900.mb-8.animate-entrance{
    font-family: var(--heading);
}
p.text-lg.text-gray-600.mb-10.animate-entrance.delay-100{
    font-family: var(--p);
}

/* Custom loading spinner */
.spinner {
    border-top-color: #3b82f6;
    border-left-color: #3b82f6;
    animation: spin 1s infinite linear;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
    main{
        padding: 100px 30px;
    }    
}