body { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.bg-gradient-primary { background: linear-gradient(135deg, hsl(174, 84%, 40%) 0%, hsl(186, 85%, 45%) 50%, hsl(256, 67%, 60%) 100%); }
.bg-gradient-premium { background: linear-gradient(135deg, hsl(256, 67%, 55%) 0%, hsl(280, 70%, 50%) 100%); }
.bg-gradient-hero { background: linear-gradient(180deg, hsl(210, 20%, 99%) 0%, hsl(186, 40%, 96%) 100%); }
.text-gradient { background: linear-gradient(135deg, hsl(174, 84%, 40%) 0%, hsl(186, 85%, 45%) 50%, hsl(256, 67%, 60%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shadow-glow { box-shadow: 0 0 40px -10px hsl(174, 84%, 40%, 0.4); }
.shadow-card { box-shadow: 0 4px 20px -4px hsl(222, 47%, 11%, 0.08); }
.hover-lift { transition: all 0.3s ease-out; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 48px -8px hsl(222, 47%, 11%, 0.12); }
.max-w-7xl {max-width: 1400px !important;}
/* Animations */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes bounce { 0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in-down { animation: fadeInDown 0.6s ease-out forwards; }
.animate-fade-in-left { animation: fadeInLeft 0.6s ease-out forwards; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.4s ease-out forwards; }
.animate-pulse-soft { animation: pulse 2s ease-in-out infinite; }
.animate-bounce-slow { animation: bounce 2s infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Page transitions */
.page { display: none; opacity: 0; }
.page.active { display: block; animation: fadeIn 0.4s ease-out forwards; }

/* Modal styles */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 100; display: none; justify-content: center; /*align-items: center;*/ opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-content { background: white; border-radius: 1.5rem; padding: 2rem; max-width: 500px; width: 100%; transform: scale(0.9); opacity: 0; transition: all 0.3s ease; height: fit-content;}
.modal-overlay.active .modal-content { transform: scale(1); opacity: 1; }



/* Mobile menu */
.mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
.mobile-menu.active { transform: translateX(0); }

/* Scroll animations */
.scroll-animate { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }

/* Mobile slider */
.slider-container { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.slider-container::-webkit-scrollbar { display: none; }
.slider-item { scroll-snap-align: start; flex-shrink: 0; }
 /* Checkbox styling */
    input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 2px solid hsl(174, 84%, 40%); border-radius: 4px; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; }
    input[type="checkbox"]:checked { background: hsl(174, 84%, 40%); }
    input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }

    /* Filter button active state */
    .filter-btn { transition: all 0.2s ease; }
    .filter-btn.active { background: linear-gradient(135deg, hsl(174, 84%, 40%) 0%, hsl(186, 85%, 45%) 100%); color: white; }
/* .modal-overlay.active{
    align-items: start !important;
} */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    #10bcab 0%,
    #10bcab var(--value),
    #7c3aed var(--value),
    #7c3aed 100%
  );
}

/* WebKit thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #10bcab;
  border: 2px solid #10bcab;
  box-shadow: 0 0 0 3px hsl(0, 0%, 100%), 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

/* Firefox thumb */
input[type="range"]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #10bcab;
  cursor: pointer;
}
@media (max-width:767px){
    .modal-content{
        border-radius: 0;
        padding: 1.1rem;
    }
    header nav{
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #FFF;
        left: 0;
        right: 0;
        position: absolute;
        top: 65px;
        align-items: start !important;
        padding: 20px;
    }
    .btns{
        flex-direction: column;
        width: 100%;
    }
    .btns button{
        width:100%;
    }
    .slider-container{
        padding-top: 15px;
    }
}