:root {
    /* Color Palette - Light Theme */
    --bg-darker: #f8fafc;
    --bg-dark: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.7);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    /* Accents */
    --accent-cyan: #0ea5e9;
    --accent-blue: #2563eb;
    --accent-green: #90c04d;
    --accent-s: #d53582;
    --gradient-primary: linear-gradient(135deg, #90c04d 0%, #70a821 100%);
    --gradient-glow: linear-gradient(135deg, rgb(37 235 67 / 10%) 0%, rgb(58 233 14 / 10%) 100%);
    /* Borders & Glass */
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    /* Metrics */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Base Styles & Overrides
   ========================================================================== */
body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .brand-text {
    font-family: var(--font-heading);
    font-weight: 600;
}

a {
    text-decoration: none;
    transition: var(--transition-fast);
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-cyan {
    color: var(--accent-cyan) !important;
}

.text-muted-premium {
    color: var(--text-secondary);
    line-height: 1.7;
}

.bg-darker {
    background-color: var(--bg-darker);
}

.tracking-wide {
    letter-spacing: 2px;
}

/* ==========================================================================
   Glassmorphism & Cards
   ========================================================================== */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.premium-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%);
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    /* Glossy top edge */
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.premium-card:hover {
    transform: translateY(-5px);
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08), 0 0 20px rgba(14, 165, 233, 0.1);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    border-radius: 50px;
    padding: 16px 33px;
    font-weight: 500;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-premium {
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    font-weight: 500;
    line-height: 1;
}

.btn-premium:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgb(41 233 14 / 30%);
}

.btn-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    z-index: -1;
}

.btn-glass {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

.btn-glass:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    border-color: rgba(0, 0, 0, 0.1);
}

.btn-outline-glass {
    background: transparent;
    color: var(--accent-blue);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.btn-outline-glass:hover {
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.glass-nav {
    background: #ffffff;
    transition: var(--transition-smooth);
    padding: 6px 0;
    --bs-navbar-nav-link-padding-x: 21px;
}

.glass-nav.scrolled {
    background: rgb(255 255 255);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    padding: 5px 0;
}

.nav-logo {
    height: 75px;
    object-fit: contain;
    transition: all 300ms ease;
}

.scrolled .nav-logo {
    height: 65px;
}

.brand-text {
    font-size: 1.25rem;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.navbar-nav .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 20px;
    transition: var(--transition-fast);
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

.custom-toggler {
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.custom-toggler:focus {
    box-shadow: none;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    height: 100vh;
    min-height: 700px;
    position: relative;
    background-color: var(--bg-dark);
}

.heroSwiper {
    width: 100%;
    height: 100%;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 1s ease;
}

/* Gradient overlay for blending images into the light bg */
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000a8 /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%); */ /* background: linear-gradient(90deg, rgb(38 38 38 / 75%) 0%, rgb(13 13 13 / 75%) 100%); */
}

.slide-1-bg {
    background-image: url('../images/hero/slide-1.webp');
}

.slide-2-bg {
    background-image: url('../images/hero/slide-2.webp');
}

.hero-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
    color: #ffffff;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #ffffff;
    max-width: 600px;
    font-weight: 400;
}

.badge-premium {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent-green);
    border: 1px solid rgb(35 233 14 / 20%);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Swiper Nav */
.swiper-button-next, .swiper-button-prev {
    color: var(--text-primary);
    width: 50px;
    height: 50px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    transition: var(--transition-fast);
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

.swiper-button-next::after, .swiper-button-prev::after {
    display: none;
}

.swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.2);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--accent-blue);
    width: 24px;
    border-radius: 8px;
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-image-wrapper {
    position: relative;
}

.floating-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    animation: float 6s ease-in-out infinite;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box-small {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    pointer-events: none;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* ==========================================================================
   Products Grid
   ========================================================================== */
.product-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: var(--transition-smooth);
    text-align: left;
    height: 100%;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(144, 192, 77, 0.3);
    box-shadow: 0 20px 40px -15px rgba(144, 192, 77, 0.15), 0 0 0 1px rgba(144, 192, 77, 0.05);
}

.product-img-wrapper {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Subtle glow behind product images */
.product-img-wrapper::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(144, 192, 77, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.product-img-wrapper img {
    max-height: 82%;
    max-width: 82%;
    object-fit: contain;
    z-index: 1;
    position: relative;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.06));
    transition: transform var(--transition-smooth);
}

.product-card:hover .product-img-wrapper img {
    transform: scale(1.04);
}

.product-meta {
    margin-bottom: 8px;
}

.product-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.75px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Soft color combinations for each form/type */
.badge-tablets {
    background: rgba(144, 192, 77, 0.1);
    color: #5d8a11;
    border: 1px solid rgba(144, 192, 77, 0.15);
}

.badge-capsule {
    background: rgba(213, 53, 130, 0.08);
    color: var(--accent-s);
    border: 1px solid rgba(213, 53, 130, 0.12);
}

.badge-cream {
    background: rgba(14, 165, 233, 0.08);
    color: var(--accent-cyan);
    border: 1px solid rgba(14, 165, 233, 0.12);
}

.badge-gel {
    background: rgba(20, 184, 166, 0.08);
    color: #0d9488;
    border: 1px solid rgba(20, 184, 166, 0.12);
}

.badge-soap {
    background: rgba(139, 92, 246, 0.08);
    color: #6d28d9;
    border: 1px solid rgba(139, 92, 246, 0.12);
}

.badge-shampoo {
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.12);
}

.badge-injection {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.12);
}

.product-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.4;
    font-family: var(--font-heading);
}

.product-action {
    width: 100%;
    margin-top: auto;
}

.btn-product-inquire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-green);
    background: transparent;
    border: 1px solid rgba(144, 192, 77, 0.35);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-product-inquire i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-product-inquire:hover {
    background: var(--gradient-primary);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(144, 192, 77, 0.25);
    text-decoration: none;
}

.btn-product-inquire:hover i {
    transform: translateX(4px);
}

.bg-glow-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.05) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Why Us Section
   ========================================================================== */
.card-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 10px rgba(14, 165, 233, 0.05);
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section {
    background-color: var(--bg-dark);
}

.cta-bg-image {
    background-image: url('https://images.unsplash.com/photo-1551076805-e1869033e561?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.1;
}

.border-accent {
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: inset 0 0 40px rgba(14, 165, 233, 0.05), 0 20px 40px rgba(0,0,0,0.05);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--accent-blue);
    padding-left: 5px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(51 51 51 / 99%);
    color: var(--accent-green) !important;
    margin-right: 10px;
    border: 2px solid rgb(219 219 219);
}

.social-icon:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    transform: translateY(-3px);
}

a.float-whats {
    position: fixed;
    right: 25px;
    overflow: hidden;
    width: 59px;
    height: 59px;
    border-radius: 100px;
    border: 0;
    z-index: 9999;
    color: white;
    transition: .5s ease;
    line-height: 59px;
    background-color: #29c604;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */
/* ==========================================================================
   Accordion Custom Styles
   ========================================================================== */
.accordion-premium {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--glass-border);
    --bs-accordion-btn-bg: var(--bg-darker);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-active-bg: rgba(14, 165, 233, 0.05);
    --bs-accordion-active-color: var(--accent-blue);
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-premium .accordion-item {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    backdrop-filter: blur(10px);
}

.accordion-premium .accordion-button {
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
}

.accordion-premium .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-bottom: 1px solid var(--glass-border);
}

.accordion-premium .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 1.5rem;
    transition: var(--transition-smooth);
}

.accordion-premium .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'%3E%3Cpath d='M5 11V13H19V11H5Z'%3E%3C/path%3E%3C/svg%3E");
    transform: rotate(180deg);
}

.footer {
    background: linear-gradient( 309deg, #22241f, #1d1d1d);
}

.footer a, .footer p, .footer li, .footer span {
    color: #d0d0d0;
}

.footer h5 {
    color: var(--accent-green);
}

.contact-item h6 {
    color: var(--accent-green);
}

.contact__card h5 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--accent-green);
}

.contact__card p {
    line-height: 1.6;
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 2;
}

.zoom-icon-wrapper {
    width: 44px;
    height: 44px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 1.25rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    transform: translateY(12px) scale(0.85);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-link:hover .img-overlay {
    opacity: 1;
}

.product-link:hover .zoom-icon-wrapper {
    transform: translateY(0) scale(1);
}

.nav-pills-premium {
    gap: 12px;
    justify-content: center;
}

.nav-pills-premium .nav-link {
    background: var(--bg-card);
    color: #3c3c3c;
    border: 1px solid rgb(0 0 0 / 21%);
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 500;
    font-family: var(--font-body);
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
    letter-spacing: 0.25px;
    font-size: 1rem;
}

.nav-pills-premium .nav-link:hover {
    background: rgb(233 14 176 / 5%);
    color: var(--accent-s);
    border-color: rgb(233 14 179 / 30%);
}

.nav-pills-premium .nav-link.active {
    background: var(--accent-s);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 20px rgb(192 77 178 / 30%);
}

.tab-content-premium {
    padding-top: 2rem;
}

.product-type-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    --fs: 20px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--accent-s);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-type-icon::before {
    content: '';
    display: inline-block;
    width: var(--fs, 20px);
    height: var(--fs, 20px);
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.product-card:hover .product-type-icon {
    transform: scale(1.05);
    background-color: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.svg-tablets, .fa6-solid--tablets {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='black' d='M614.3 247c-5.2 7.9-16.2 8.5-22.9 1.8L391.2 48.6c-6.7-6.7-6.2-17.8 1.8-22.9C418.1 9.4 447.9 0 480 0c88.4 0 160 71.6 160 160c0 32.1-9.4 61.9-25.7 87M567 294.3c-25 16.3-54.9 25.7-87 25.7c-88.4 0-160-71.6-160-160c0-32.1 9.4-61.9 25.7-87c5.2-7.9 16.2-8.5 22.9-1.8l200.2 200.2c6.7 6.7 6.2 17.8-1.8 22.9M301.5 368c9.5 0 16.9 8.2 15 17.5C301.1 457.8 236.9 512 160 512S18.9 457.8 3.5 385.5c-2-9.3 5.5-17.5 15-17.5h283.1zm0-32h-283c-9.5 0-16.9-8.2-15-17.5C18.9 246.2 83.1 192 160 192s141.1 54.2 156.5 126.5c2 9.3-5.5 17.5-15 17.5'/%3E%3C/svg%3E");
}

.svg-capsule, .bi--capsule {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.828 8.9L8.9 1.827a4 4 0 1 1 5.657 5.657l-7.07 7.071A4 4 0 1 1 1.827 8.9Zm9.128.771l2.893-2.893a3 3 0 1 0-4.243-4.242L6.713 5.429z'/%3E%3C/svg%3E");
}

.svg-cream, .hugeicons--shampoo {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M7 13a5 5 0 0 1 10 0v5c0 1.886 0 2.828-.586 3.414S14.886 22 13 22h-2c-1.886 0-2.828 0-3.414-.586S7 19.886 7 18z'/%3E%3Cpath d='M10 8V7c0-.943 0-1.414.293-1.707S11.057 5 12 5s1.414 0 1.707.293S14 6.057 14 7v1m-2-3V2m0 0h-2m2 0h2.745a3 3 0 0 1 2.041.802L17 3M7 13h10'/%3E%3C/g%3E%3C/svg%3E");
}

.svg-shampoo, .mingcute--shower-gel-fill {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='black' d='M9 2a1 1 0 0 0 0 2h2v2H9.442a3 3 0 0 0-2.847 2.051l-1.236 3.71A7 7 0 0 0 5 13.973V19a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-5.026a7 7 0 0 0-.36-2.214l-1.236-3.709A3 3 0 0 0 14.56 6H13V4a1 1 0 1 0 0-2zm1 11H7.096c.135-.683.405-1.342.625-2H10a1 1 0 1 1 0 2'/%3E%3C/g%3E%3C/svg%3E");
}

.svg-soap, .lucide-lab--soap-bar {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11.3 2.7c.9-.9 2.5-.9 3.4 0l5.6 5.6c.9.9.9 2.5 0 3.4l-8.6 8.6c-.9.9-2.5.9-3.4 0l-5.6-5.6c-.9-.9-.9-2.5 0-3.4Z'/%3E%3Cpath d='m13 7l-6 6l3 3l6-6Z'/%3E%3Ccircle cx='20.5' cy='17.5' r='.5'/%3E%3Ccircle cx='17.5' cy='21.5' r='.5'/%3E%3Cpath d='M22 22h.01'/%3E%3C/g%3E%3C/svg%3E");
}

.svg-injection, .lineicons--injection-1 {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M16.594 2.218a.75.75 0 0 1 1.06 0l1.19 1.19l.002.001l2.958 2.959a.75.75 0 1 1-1.06 1.06l-.66-.66l-1.707 1.706l.707.707a.75.75 0 0 1 0 1.06l-8.276 8.278a2.25 2.25 0 0 1-2.814.298l-.034.036l-1.038 1.038a.75.75 0 0 1-1.06 0l-.335-.335l-2.225 2.225a.75.75 0 1 1-1.06-1.06l2.224-2.226l-.334-.333a.75.75 0 0 1 0-1.061l1.038-1.038l.036-.034a2.25 2.25 0 0 1 .298-2.814l8.277-8.277a.75.75 0 0 1 1.06 0l.708.707l1.706-1.706l-.661-.66a.75.75 0 0 1 0-1.061M18.315 5L16.61 6.706l.708.707l1.706-1.706zm-3.302 2.23l-.701-.7l-7.747 7.746a.75.75 0 0 0 0 1.06l2.121 2.122a.75.75 0 0 0 1.061 0l7.747-7.747l-.702-.701l-.006-.006l-1.768-1.768z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
    .nav-pills-premium {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
    }

    .nav-pills-premium::-webkit-scrollbar {
        height: 4px;
    }

    .nav-pills-premium::-webkit-scrollbar-thumb {
        background: var(--glass-border);
        border-radius: 10px;
    }

    .nav-pills-premium .nav-link {
        white-space: nowrap;
    }
}

.lazy-load {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.lazy-load.loaded {
    opacity: 1;
}

@media (max-width: 991px) {
    .glass-nav {
        background: var(--bg-darker);
        padding: 0px 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .navbar-collapse {
        background: var(--bg-dark);
        padding: 20px;
        border-radius: var(--radius-md);
        margin-top: 15px;
        border: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
    }

    .floating-badge {
        bottom: -20px;
        right: 0px;
    }
}

@media (max-width: 991px) {
    .swiper-button-next, .swiper-button-prev {
        display: none
    }
}