/* Smooth Scrolling */
html { scroll-behavior: smooth; }

/* Gradient Text */
.gradient-text {
    background: linear-gradient(to right, #FFFC00, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Brand Colors */
.snap-yellow { background-color: #FFFC00; color: black; }
.snap-yellow:hover { background-color: #e6e300; }

/* Loader Animation */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #FFFC00;
    border-radius: 50%;
    width: 30px; height: 30px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Fade In Animation */
.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #FFFC00; }

/* Read More Fade Effect */
.read-more-fade {
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Heart Animation */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.heart-animate { animation: heartbeat 1.5s infinite ease-in-out; }

/* Hide Scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile Menu */
#mobile-menu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform-origin: top;
}
.menu-open { transform: scaleY(1); opacity: 1; pointer-events: auto; }
.menu-closed { transform: scaleY(0); opacity: 0; pointer-events: none; }

/* Star Rating Animation */
.star-btn svg { transition: transform 0.2s, fill 0.2s; }
.star-btn:hover svg { transform: scale(1.2); }
.star-btn:active svg { transform: scale(0.9); }

.mt-2{margin-top:0.1rem !important;}