/* Custom Styles and Utility Classes to supplement Tailwind */

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #E01923; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b3121b; 
}

/* Base transitions */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* offset for sticky header */
}

/* Animations */
@keyframes pulse-slow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
}

/* Blob mask for product image to make it look dynamic */
.mask-image-blob {
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23FF0066" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-46.8C87.4,-34.5,90,-20.1,89.3,-6.2C88.6,7.8,84.6,21.2,77.3,33.1C70,45,59.3,55.3,46.8,63.2C34.3,71.1,19.9,76.5,5.2,79.4C-9.5,82.3,-24.1,82.7,-37.2,78.2C-50.3,73.7,-61.8,64.3,-71.5,52.8C-81.2,41.3,-89.1,27.7,-91.1,13.2C-93.1,-1.3,-89.2,-16.6,-81.8,-29.4C-74.4,-42.2,-63.5,-52.4,-51.1,-60.1C-38.7,-67.8,-24.8,-73.1,-10.1,-75.6C4.6,-78.1,19.3,-77.8,31.7,-73.9Z" transform="translate(100 100)" /></svg>');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23FF0066" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-46.8C87.4,-34.5,90,-20.1,89.3,-6.2C88.6,7.8,84.6,21.2,77.3,33.1C70,45,59.3,55.3,46.8,63.2C34.3,71.1,19.9,76.5,5.2,79.4C-9.5,82.3,-24.1,82.7,-37.2,78.2C-50.3,73.7,-61.8,64.3,-71.5,52.8C-81.2,41.3,-89.1,27.7,-91.1,13.2C-93.1,-1.3,-89.2,-16.6,-81.8,-29.4C-74.4,-42.2,-63.5,-52.4,-51.1,-60.1C-38.7,-67.8,-24.8,-73.1,-10.1,-75.6C4.6,-78.1,19.3,-77.8,31.7,-73.9Z" transform="translate(100 100)" /></svg>');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* FAQ Active state rotation */
.faq-item.active i.fa-plus {
    transform: rotate(45deg);
}

/* Navbar blur effect when scrolled */
.navbar-scrolled {
    background-color: rgba(17, 17, 17, 0.95) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}