@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@400..700&family=Great+Vibes&family=Meie+Script&family=Oleo+Script:wght@400;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

        @keyframes textAnimation {
            to {
                background-position: 150%;
            }
        }
        @keyframes wiggle {
            5% {transform: rotate(-5deg)}
            10% {transform: rotate(5deg)}
            15% {transform: rotate(-5deg)}
            20% {transform: rotate(5deg)}
            25% {transform: rotate(-5deg)}
            30% {transform: rotate(5deg)}
            35% {transform: rotate(-5deg)}
            40% {transform: rotate(5deg)}
        }
        .social .facebook:hover {
            animation: wiggle 3s linear infinite
        }
        .social .tiktok:hover {
            animation: wiggle 3s linear infinite
        }
        .social .instagram:hover {
            animation: wiggle 3s linear infinite
        }
        .younique {
          background: linear-gradient(45deg,#ff72e1,#F61BC7,#ff41a3,#F258FF,#9e00ff,#F258FF,#ff41a3,#F61BC7,#ff72e1);
          background-size: 200%;
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
           /* keep gradient fill visible */
          -webkit-text-stroke: 1px #ffffff; 
            /* background-size: 150%; */
            animation: textAnimation 3s linear infinite;
        }
        @keyframes textAnimation {
            to{
              background-position: 200%;
            }
        }
        body {
            margin: 0;
            padding: 0;
        }.note{
            font-family: "Oleo Script", system-ui;
            font-weight: 800;
            font-style: normal;

        }.sec3{
            font-family: "Bebas Neue";
        }.keyTitle{
            font-family: "Roboto";
        }.name{
            font-family: "Playfair Display", serif;
        }model-viewer{
            width: 100%;
            height: 100%;
            display: block;
        }.chat-widget{
            transition: none;
        }.sidebar {
            transition: width 0.3s ease; /* Adds a smooth transition for the width change */
        }

        .sidebar.collapsed {
            width: 5rem; /* Collapses the sidebar to a smaller width */
        }

        .ml-64 {
            transition: margin-left 0.3s ease; /* Adds a smooth transition for the margin change */
        }

        .ml-20 {
            margin-left: 5rem; /* Moves the main content to the left to match the collapsed sidebar */
        }
        @keyframes fadeOut{
            from{
                opacity:100;
            }
            to{
                opacity:0;
            }
        }.product-saved{
            animation: fadeOut 5s forwards;
        }body {
            font-family: 'Poppins', sans-serif;
            background-color: #fef6f6;
        }
        .hero-bg {
            background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
        }
        .btn-primary {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255, 154, 158, 0.3);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        }
        .testimonial-card {
            background: linear-gradient(135deg, #fff 0%, #fff9f9 100%);
        }
        .crochet-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff9a9e' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        /* Hide default scrollbar for product carousel on WebKit */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        /* Explicitly hide for product carousel as well */
        .product-carousel::-webkit-scrollbar { height: 0; background: transparent; }
        .product-carousel::-webkit-scrollbar-thumb { background: transparent; }
        .product-carousel::-webkit-scrollbar-track { background: transparent; }
        .product-carousel {
            -ms-overflow-style: none;
            scrollbar-width: none; /* Firefox */
            /* Visually hide any remaining track area on some Windows setups */
            padding-bottom: 0.75rem;
            margin-bottom: -0.75rem;
            overflow-y: hidden;
        }
        
        /* Responsive tweaks */
        @media (max-width: 768px) {
            /* tighten hero spacing on small screens */
            .content-container { padding-left: 1rem; padding-right: 1rem; }
        }

        /* Mobile drawer animation */
        .mobile-drawer {
            transform: translateX(100%);
            transition: transform 0.28s ease-in-out;
        }
        .mobile-drawer.open {
            transform: translateX(0);
        }