diff --git a/ecommerce-website/README.md b/ecommerce-website/README.md
new file mode 100644
index 0000000..1107e41
--- /dev/null
+++ b/ecommerce-website/README.md
@@ -0,0 +1,44 @@
+# Anon - An eCommerce Website
+
+![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/anon-ecommerce-website)
+![GitHub stars](https://img.shields.io/github/stars/codewithsadee/anon-ecommerce-website?style=social)
+![GitHub forks](https://img.shields.io/github/forks/codewithsadee/anon-ecommerce-website?style=social)
+[![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
+[![YouTube Video Views](https://img.shields.io/youtube/views/3l8Lob4ysI0?style=social)](https://youtu.be/3l8Lob4ysI0)
+
+Anon is a fully responsive ecommerce website, maximum compatiblities in all mobile devices, built using HTML, CSS, and JavaScript.
+
+## Demo
+
+![Anon Desktop Demo](./website-demo-image/desktop.png "Desktop Demo")
+![Anon Mobile Demo](./website-demo-image/mobile.png "Mobile Demo")
+
+## Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+* [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
+
+## Installing Anon
+
+To install **Anon**, follow these steps:
+
+Linux and macOS:
+
+```bash
+sudo git clone https://github.com/codewithsadee/anon-ecommerce-website.git
+```
+
+Windows:
+
+```bash
+git clone https://github.com/codewithsadee/anon-ecommerce-website.git
+```
+
+## Contact
+
+If you want to contact me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
+
+## License
+
+This project is **free to use** and does not contains any license.
diff --git a/ecommerce-website/assests/css/images/banner-1.jpg b/ecommerce-website/assests/css/images/banner-1.jpg
new file mode 100644
index 0000000..c619c68
Binary files /dev/null and b/ecommerce-website/assests/css/images/banner-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/banner-2.jpg b/ecommerce-website/assests/css/images/banner-2.jpg
new file mode 100644
index 0000000..affd6f5
Binary files /dev/null and b/ecommerce-website/assests/css/images/banner-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/banner-3.jpg b/ecommerce-website/assests/css/images/banner-3.jpg
new file mode 100644
index 0000000..7baf7b5
Binary files /dev/null and b/ecommerce-website/assests/css/images/banner-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/blog-1.jpg b/ecommerce-website/assests/css/images/blog-1.jpg
new file mode 100644
index 0000000..775574f
Binary files /dev/null and b/ecommerce-website/assests/css/images/blog-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/blog-2.jpg b/ecommerce-website/assests/css/images/blog-2.jpg
new file mode 100644
index 0000000..aa605fa
Binary files /dev/null and b/ecommerce-website/assests/css/images/blog-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/blog-3.jpg b/ecommerce-website/assests/css/images/blog-3.jpg
new file mode 100644
index 0000000..ddfbd5b
Binary files /dev/null and b/ecommerce-website/assests/css/images/blog-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/blog-4.jpg b/ecommerce-website/assests/css/images/blog-4.jpg
new file mode 100644
index 0000000..6c31d04
Binary files /dev/null and b/ecommerce-website/assests/css/images/blog-4.jpg differ
diff --git a/ecommerce-website/assests/css/images/cta-banner.jpg b/ecommerce-website/assests/css/images/cta-banner.jpg
new file mode 100644
index 0000000..50315a9
Binary files /dev/null and b/ecommerce-website/assests/css/images/cta-banner.jpg differ
diff --git a/ecommerce-website/assests/css/images/electronics-banner-1.jpg b/ecommerce-website/assests/css/images/electronics-banner-1.jpg
new file mode 100644
index 0000000..184e201
Binary files /dev/null and b/ecommerce-website/assests/css/images/electronics-banner-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/electronics-banner-2.jpg b/ecommerce-website/assests/css/images/electronics-banner-2.jpg
new file mode 100644
index 0000000..bd744b0
Binary files /dev/null and b/ecommerce-website/assests/css/images/electronics-banner-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/icons b/ecommerce-website/assests/css/images/icons
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/ecommerce-website/assests/css/images/icons
@@ -0,0 +1 @@
+
diff --git a/ecommerce-website/assests/css/images/mens-banner.jpg b/ecommerce-website/assests/css/images/mens-banner.jpg
new file mode 100644
index 0000000..dea6467
Binary files /dev/null and b/ecommerce-website/assests/css/images/mens-banner.jpg differ
diff --git a/ecommerce-website/assests/css/images/newsletter.png b/ecommerce-website/assests/css/images/newsletter.png
new file mode 100644
index 0000000..2c0606c
Binary files /dev/null and b/ecommerce-website/assests/css/images/newsletter.png differ
diff --git a/ecommerce-website/assests/css/images/payment.png b/ecommerce-website/assests/css/images/payment.png
new file mode 100644
index 0000000..4bef5a7
Binary files /dev/null and b/ecommerce-website/assests/css/images/payment.png differ
diff --git a/ecommerce-website/assests/css/images/products/1.jpg b/ecommerce-website/assests/css/images/products/1.jpg
new file mode 100644
index 0000000..fad8b8f
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/2.jpg b/ecommerce-website/assests/css/images/products/2.jpg
new file mode 100644
index 0000000..b66aa70
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/3.jpg b/ecommerce-website/assests/css/images/products/3.jpg
new file mode 100644
index 0000000..3644255
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/3.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/4.jpg b/ecommerce-website/assests/css/images/products/4.jpg
new file mode 100644
index 0000000..10b488d
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/4.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/belt.jpg b/ecommerce-website/assests/css/images/products/belt.jpg
new file mode 100644
index 0000000..5817627
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/belt.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/clothes-1.jpg b/ecommerce-website/assests/css/images/products/clothes-1.jpg
new file mode 100644
index 0000000..70626b2
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/clothes-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/clothes-2.jpg b/ecommerce-website/assests/css/images/products/clothes-2.jpg
new file mode 100644
index 0000000..74dd347
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/clothes-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/clothes-3.jpg b/ecommerce-website/assests/css/images/products/clothes-3.jpg
new file mode 100644
index 0000000..f045851
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/clothes-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/clothes-4.jpg b/ecommerce-website/assests/css/images/products/clothes-4.jpg
new file mode 100644
index 0000000..c18dbc2
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/clothes-4.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jacket-1.jpg b/ecommerce-website/assests/css/images/products/jacket-1.jpg
new file mode 100644
index 0000000..b0b77b6
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jacket-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jacket-2.jpg b/ecommerce-website/assests/css/images/products/jacket-2.jpg
new file mode 100644
index 0000000..7f5a28d
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jacket-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jacket-3.jpg b/ecommerce-website/assests/css/images/products/jacket-3.jpg
new file mode 100644
index 0000000..2a658ce
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jacket-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jacket-4.jpg b/ecommerce-website/assests/css/images/products/jacket-4.jpg
new file mode 100644
index 0000000..79a0172
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jacket-4.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jacket-5.jpg b/ecommerce-website/assests/css/images/products/jacket-5.jpg
new file mode 100644
index 0000000..5ccab27
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jacket-5.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jacket-6.jpg b/ecommerce-website/assests/css/images/products/jacket-6.jpg
new file mode 100644
index 0000000..59b4ebb
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jacket-6.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jewellery-1.jpg b/ecommerce-website/assests/css/images/products/jewellery-1.jpg
new file mode 100644
index 0000000..c5fee8c
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jewellery-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jewellery-2.jpg b/ecommerce-website/assests/css/images/products/jewellery-2.jpg
new file mode 100644
index 0000000..c3eeafd
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jewellery-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/jewellery-3.jpg b/ecommerce-website/assests/css/images/products/jewellery-3.jpg
new file mode 100644
index 0000000..be9ab5f
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/jewellery-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/party-wear-1.jpg b/ecommerce-website/assests/css/images/products/party-wear-1.jpg
new file mode 100644
index 0000000..7fc581c
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/party-wear-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/party-wear-2.jpg b/ecommerce-website/assests/css/images/products/party-wear-2.jpg
new file mode 100644
index 0000000..d407f2e
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/party-wear-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/perfume.jpg b/ecommerce-website/assests/css/images/products/perfume.jpg
new file mode 100644
index 0000000..3e34232
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/perfume.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shampoo.jpg b/ecommerce-website/assests/css/images/products/shampoo.jpg
new file mode 100644
index 0000000..11e066d
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shampoo.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shirt-1.jpg b/ecommerce-website/assests/css/images/products/shirt-1.jpg
new file mode 100644
index 0000000..24d8bb1
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shirt-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shirt-2.jpg b/ecommerce-website/assests/css/images/products/shirt-2.jpg
new file mode 100644
index 0000000..93c79eb
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shirt-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shoe-1.jpg b/ecommerce-website/assests/css/images/products/shoe-1.jpg
new file mode 100644
index 0000000..9822790
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shoe-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shoe-1_1.jpg b/ecommerce-website/assests/css/images/products/shoe-1_1.jpg
new file mode 100644
index 0000000..b60c952
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shoe-1_1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shoe-2.jpg b/ecommerce-website/assests/css/images/products/shoe-2.jpg
new file mode 100644
index 0000000..fc79a5b
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shoe-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shoe-2_1.jpg b/ecommerce-website/assests/css/images/products/shoe-2_1.jpg
new file mode 100644
index 0000000..f4f0230
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shoe-2_1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shoe-3.jpg b/ecommerce-website/assests/css/images/products/shoe-3.jpg
new file mode 100644
index 0000000..7470221
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shoe-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shoe-4.jpg b/ecommerce-website/assests/css/images/products/shoe-4.jpg
new file mode 100644
index 0000000..873c104
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shoe-4.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shoe-5.jpg b/ecommerce-website/assests/css/images/products/shoe-5.jpg
new file mode 100644
index 0000000..fab3992
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shoe-5.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shorts-1.jpg b/ecommerce-website/assests/css/images/products/shorts-1.jpg
new file mode 100644
index 0000000..3f379cb
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shorts-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/shorts-2.jpg b/ecommerce-website/assests/css/images/products/shorts-2.jpg
new file mode 100644
index 0000000..6b8749b
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/shorts-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/sports-1.jpg b/ecommerce-website/assests/css/images/products/sports-1.jpg
new file mode 100644
index 0000000..47299b9
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/sports-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/sports-2.jpg b/ecommerce-website/assests/css/images/products/sports-2.jpg
new file mode 100644
index 0000000..e1adc1d
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/sports-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/sports-3.jpg b/ecommerce-website/assests/css/images/products/sports-3.jpg
new file mode 100644
index 0000000..ee95440
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/sports-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/sports-4.jpg b/ecommerce-website/assests/css/images/products/sports-4.jpg
new file mode 100644
index 0000000..cf24aeb
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/sports-4.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/sports-5.jpg b/ecommerce-website/assests/css/images/products/sports-5.jpg
new file mode 100644
index 0000000..216f73e
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/sports-5.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/sports-6.jpg b/ecommerce-website/assests/css/images/products/sports-6.jpg
new file mode 100644
index 0000000..ad7f678
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/sports-6.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/watch-1.jpg b/ecommerce-website/assests/css/images/products/watch-1.jpg
new file mode 100644
index 0000000..e2e440f
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/watch-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/watch-2.jpg b/ecommerce-website/assests/css/images/products/watch-2.jpg
new file mode 100644
index 0000000..48166f0
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/watch-2.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/watch-3.jpg b/ecommerce-website/assests/css/images/products/watch-3.jpg
new file mode 100644
index 0000000..15463a4
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/watch-3.jpg differ
diff --git a/ecommerce-website/assests/css/images/products/watch-4.jpg b/ecommerce-website/assests/css/images/products/watch-4.jpg
new file mode 100644
index 0000000..5c5e029
Binary files /dev/null and b/ecommerce-website/assests/css/images/products/watch-4.jpg differ
diff --git a/ecommerce-website/assests/css/images/testimonial-1.jpg b/ecommerce-website/assests/css/images/testimonial-1.jpg
new file mode 100644
index 0000000..b8defbe
Binary files /dev/null and b/ecommerce-website/assests/css/images/testimonial-1.jpg differ
diff --git a/ecommerce-website/assests/css/images/womens-banner.jpg b/ecommerce-website/assests/css/images/womens-banner.jpg
new file mode 100644
index 0000000..eade24b
Binary files /dev/null and b/ecommerce-website/assests/css/images/womens-banner.jpg differ
diff --git a/ecommerce-website/assests/css/js/script.js b/ecommerce-website/assests/css/js/script.js
new file mode 100644
index 0000000..8ec1f6f
--- /dev/null
+++ b/ecommerce-website/assests/css/js/script.js
@@ -0,0 +1,88 @@
+'use strict';
+
+// modal variables
+const modal = document.querySelector('[data-modal]');
+const modalCloseBtn = document.querySelector('[data-modal-close]');
+const modalCloseOverlay = document.querySelector('[data-modal-overlay]');
+
+// modal function
+const modalCloseFunc = function () { modal.classList.add('closed') }
+
+// modal eventListener
+modalCloseOverlay.addEventListener('click', modalCloseFunc);
+modalCloseBtn.addEventListener('click', modalCloseFunc);
+
+
+
+
+
+// notification toast variables
+const notificationToast = document.querySelector('[data-toast]');
+const toastCloseBtn = document.querySelector('[data-toast-close]');
+
+// notification toast eventListener
+toastCloseBtn.addEventListener('click', function () {
+ notificationToast.classList.add('closed');
+});
+
+
+
+
+
+// mobile menu variables
+const mobileMenuOpenBtn = document.querySelectorAll('[data-mobile-menu-open-btn]');
+const mobileMenu = document.querySelectorAll('[data-mobile-menu]');
+const mobileMenuCloseBtn = document.querySelectorAll('[data-mobile-menu-close-btn]');
+const overlay = document.querySelector('[data-overlay]');
+
+for (let i = 0; i < mobileMenuOpenBtn.length; i++) {
+
+ // mobile menu function
+ const mobileMenuCloseFunc = function () {
+ mobileMenu[i].classList.remove('active');
+ overlay.classList.remove('active');
+ }
+
+ mobileMenuOpenBtn[i].addEventListener('click', function () {
+ mobileMenu[i].classList.add('active');
+ overlay.classList.add('active');
+ });
+
+ mobileMenuCloseBtn[i].addEventListener('click', mobileMenuCloseFunc);
+ overlay.addEventListener('click', mobileMenuCloseFunc);
+
+}
+
+
+
+
+
+// accordion variables
+const accordionBtn = document.querySelectorAll('[data-accordion-btn]');
+const accordion = document.querySelectorAll('[data-accordion]');
+
+for (let i = 0; i < accordionBtn.length; i++) {
+
+ accordionBtn[i].addEventListener('click', function () {
+
+ const clickedBtn = this.nextElementSibling.classList.contains('active');
+
+ for (let i = 0; i < accordion.length; i++) {
+
+ if (clickedBtn) break;
+
+ if (accordion[i].classList.contains('active')) {
+
+ accordion[i].classList.remove('active');
+ accordionBtn[i].classList.remove('active');
+
+ }
+
+ }
+
+ this.nextElementSibling.classList.toggle('active');
+ this.classList.toggle('active');
+
+ });
+
+}
diff --git a/ecommerce-website/assests/css/style-prefix.css b/ecommerce-website/assests/css/style-prefix.css
new file mode 100644
index 0000000..2b21dad
--- /dev/null
+++ b/ecommerce-website/assests/css/style-prefix.css
@@ -0,0 +1,3210 @@
+/*-----------------------------------*\
+ #style.css
+\*-----------------------------------*/
+
+/**
+ * copyright 2022 @codewithsadee
+ */
+
+
+
+
+
+/*-----------------------------------*\
+ #CUSTOM PROPERTY
+\*-----------------------------------*/
+
+:root {
+
+ /**
+ * colors
+ */
+
+ --spanish-gray: hsl(0, 0%, 60%);
+ --sonic-silver: hsl(0, 0%, 47%);
+ --eerie-black: hsl(0, 0%, 13%);
+ --salmon-pink: hsl(353, 100%, 78%);
+ --sandy-brown: hsl(29, 90%, 65%);
+ --bittersweet: hsl(0, 100%, 70%);
+ --ocean-green: hsl(152, 51%, 52%);
+ --davys-gray: hsl(0, 0%, 33%);
+ --cultured: hsl(0, 0%, 93%);
+ --white: hsl(0, 100%, 100%);
+ --onyx: hsl(0, 0%, 27%);
+
+ /**
+ * typography
+ */
+
+ --fs-1: 1.563rem;
+ --fs-2: 1.375rem;
+ --fs-3: 1.25rem;
+ --fs-4: 1.125rem;
+ --fs-5: 1rem;
+ --fs-6: 0.938rem;
+ --fs-7: 0.875rem;
+ --fs-8: 0.813rem;
+ --fs-9: 0.75rem;
+ --fs-10: 0.688rem;
+ --fs-11: 0.625rem;
+
+ --weight-300: 300;
+ --weight-400: 400;
+ --weight-500: 500;
+ --weight-600: 600;
+ --weight-700: 700;
+
+ /**
+ * border-radius
+ */
+
+ --border-radius-md: 10px;
+ --border-radius-sm: 5px;
+
+ /**
+ * transition
+ */
+
+ --transition-timing: 0.2s ease;
+
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #RESET
+\*-----------------------------------*/
+
+*, *::before, *::after {
+ margin: 0;
+ padding: 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+a { text-decoration: none; }
+
+li { list-style: none; }
+
+button {
+ background: none;
+ font: inherit;
+ border: none;
+ cursor: pointer;
+}
+
+img, ion-icon, button, a { display: block; }
+
+span { display: inline-block; }
+
+html {
+ font-family: "Poppins", sans-serif;
+ -ms-scroll-chaining: none;
+ overscroll-behavior: contain;
+}
+
+input {
+ display: block;
+ width: 100%;
+ font: inherit;
+}
+
+input::-webkit-input-placeholder { font: inherit; }
+
+input::-moz-placeholder { font: inherit; }
+
+input:-ms-input-placeholder { font: inherit; }
+
+input::-ms-input-placeholder { font: inherit; }
+
+input::placeholder { font: inherit; }
+
+body { background: var(--white); }
+
+/**
+ * scrollbar style
+ */
+
+body::-webkit-scrollbar { width: 15px; }
+
+body::-webkit-scrollbar-track {
+ background: var(--white);
+ border-left: 1px solid var(--cultured);
+}
+
+body::-webkit-scrollbar-thumb {
+ background: hsl(0, 0%, 80%);
+ border: 3px solid var(--white);
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+}
+
+body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); }
+
+
+
+
+
+/*-----------------------------------*\
+ #REUSED STYLE
+\*-----------------------------------*/
+
+.container { padding: 0 15px; }
+
+.has-scrollbar { padding-bottom: 5px; }
+
+.has-scrollbar::-webkit-scrollbar {
+ width: 12px; /* for vertical scroll */
+ height: 12px; /* for horizontal scroll */
+}
+
+.has-scrollbar::-webkit-scrollbar-thumb {
+ background: transparent;
+ border: 3px solid var(--white);
+ -webkit-border-radius: 20px;
+ border-radius: 20px;
+}
+
+.has-scrollbar:hover::-webkit-scrollbar-thumb { background: hsl(0, 0%, 90%); }
+
+.has-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 80%); }
+
+.title {
+ color: var(--eerie-black);
+ font-size: var(--fs-5);
+ font-weight: var(--weight-600);
+ letter-spacing: 0.4px;
+ text-transform: capitalize;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--cultured);
+ margin-bottom: 30px;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #MAIN
+\*-----------------------------------*/
+
+/**
+ * overlay
+ */
+
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: hsla(0, 0%, 0%, 0.5);
+ opacity: 0;
+ pointer-events: none;
+ z-index: 15;
+ -webkit-transition: 0.5s ease;
+ -o-transition: 0.5s ease;
+ transition: 0.5s ease;
+}
+
+.overlay.active {
+ opacity: 1;
+ pointer-events: all;
+}
+
+
+
+/**
+ * MODAL
+ */
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: hsla(0, 0%, 0%, 0.5);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ z-index: 10;
+ -webkit-animation: popup 1s ease-in-out 5s forwards;
+ animation: popup 1s ease-in-out 5s forwards;
+}
+
+@-webkit-keyframes popup {
+
+ 0% {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ }
+
+ 100% {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+ }
+
+}
+
+@keyframes popup {
+
+ 0% {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ }
+
+ 100% {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+ }
+
+}
+
+.modal.closed { display: none; }
+
+.modal-close-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+.newsletter-img { display: none; }
+
+.modal-content {
+ position: relative;
+ max-width: 350px;
+ margin: 20px;
+ background: var(--white);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ z-index: 2;
+ -webkit-animation: scaleUp 0.5s ease-in-out 5s forwards;
+ animation: scaleUp 0.5s ease-in-out 5s forwards;
+}
+
+@-webkit-keyframes scaleUp {
+
+ 0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
+ 100% { -webkit-transform: scale(1); transform: scale(1); }
+
+}
+
+@keyframes scaleUp {
+
+ 0% { -webkit-transform: scale(0.9); transform: scale(0.9); }
+ 100% { -webkit-transform: scale(1); transform: scale(1); }
+
+}
+
+.modal-close-btn {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background: var(--salmon-pink);
+ color: var(--white);
+ font-size: 16px;
+ padding: 5px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+}
+
+.modal-close-btn:hover { opacity: 0.9; }
+
+.modal-close-btn ion-icon { --ionicon-stroke-width: 70px; }
+
+.newsletter {
+ padding: 50px 30px;
+ text-align: center;
+}
+
+.newsletter-header { margin-bottom: 20px; }
+
+.newsletter-title {
+ color: var(--onyx);
+ font-size: var(--fs-2);
+ font-weight: var(--weight-600);
+ margin-bottom: 10px;
+}
+
+.newsletter-desc {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ line-height: 1.6;
+}
+
+.email-field {
+ font-size: var(--fs-7);
+ padding: 8px 16px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ border: 1px solid var(--cultured);
+ margin-bottom: 16px;
+}
+
+.btn-newsletter {
+ background: var(--eerie-black);
+ color: var(--white);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ padding: 10px 15px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ margin: auto;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.btn-newsletter:hover { background: var(--salmon-pink); }
+
+
+
+
+
+/**
+ * NOTIFICATION TOAST
+ */
+
+.notification-toast {
+ position: fixed;
+ bottom: 80px;
+ left: 20px;
+ right: 20px;
+ background: var(--white);
+ max-width: 300px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ gap: 15px;
+ padding: 15px;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ -webkit-box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15);
+ box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15);
+ -webkit-transform: translateX(-webkit-calc(-100% - 40px));
+ -ms-transform: translateX(calc(-100% - 40px));
+ transform: translateX(calc(-100% - 40px));
+ -webkit-transition: 0.5s ease-in-out;
+ -o-transition: 0.5s ease-in-out;
+ transition: 0.5s ease-in-out;
+ z-index: 5;
+ -webkit-animation: slideInOut 10s ease-in-out infinite;
+ animation: slideInOut 10s ease-in-out infinite;
+}
+
+@-webkit-keyframes slideInOut {
+
+ 0%,
+ 45%,
+ 100% {
+ -webkit-transform: translateX(-webkit-calc(-100% - 40px));
+ transform: translateX(calc(-100% - 40px));
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ 50%,
+ 95% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ opacity: 1;
+ visibility: visible;
+ }
+
+}
+
+@keyframes slideInOut {
+
+ 0%,
+ 45%,
+ 100% {
+ -webkit-transform: translateX(-webkit-calc(-100% - 40px));
+ transform: translateX(calc(-100% - 40px));
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ 50%,
+ 95% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ opacity: 1;
+ visibility: visible;
+ }
+
+}
+
+.notification-toast.closed { display: none; }
+
+.toast-close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ color: var(--sonic-silver);
+}
+
+.toast-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.toast-banner {
+ width: 70px;
+ height: 70px;
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+}
+
+.toast-banner img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: contain;
+ object-fit: contain;
+ -o-object-position: center;
+ object-position: center;
+}
+
+.toast-detail {
+ width: -webkit-calc(100% - 85px);
+ width: calc(100% - 85px);
+ padding-right: 10px;
+}
+
+.toast-message {
+ font-size: var(--fs-10);
+ color: var(--sonic-silver);
+ margin-bottom: 8px;
+}
+
+.toast-title {
+ font-size: var(--fs-7);
+ font-weight: var(--weight-500);
+ color: var(--onyx);
+}
+
+.toast-meta {
+ font-size: var(--fs-10);
+ color: var(--sonic-silver);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #HEADER
+\*-----------------------------------*/
+
+.header-top,
+.header-user-actions,
+.desktop-navigation-menu { display: none; }
+
+.header-main {
+ padding: 20px 0;
+ border-bottom: 1px solid var(--cultured);
+}
+
+.header-logo { margin-bottom: 20px; }
+
+.header-logo img { margin: auto; }
+
+.header-search-container { position: relative; }
+
+.header-search-container .search-field {
+ font-size: var(--fs-7);
+ color: var(--onyx);
+ padding: 10px 15px;
+ padding-right: 50px;
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+}
+
+.search-field::-webkit-search-cancel-button { display: none; }
+
+.search-btn {
+ background: var(--white);
+ position: absolute;
+ top: 50%;
+ right: 2px;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ color: var(--onyx);
+ font-size: 18px;
+ padding: 8px 15px;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ -webkit-transition: color var(--transition-timing);
+ -o-transition: color var(--transition-timing);
+ transition: color var(--transition-timing);
+}
+
+.search-btn:hover { color: var(--salmon-pink); }
+
+.mobile-bottom-navigation {
+ background: var(--white);
+ position: fixed;
+ bottom: 0;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+ width: 100%;
+ max-width: 500px;
+ margin: auto;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-justify-content: space-around;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 5px 0;
+ -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25);
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25);
+ z-index: 5;
+}
+
+.mobile-bottom-navigation .action-btn {
+ position: relative;
+ font-size: 26px;
+ color: var(--eerie-black);
+ padding: 10px;
+}
+
+.mobile-bottom-navigation .count {
+ background: var(--bittersweet);
+ color: var(--white);
+ position: absolute;
+ top: 0;
+ right: 0;
+ font-size: 12px;
+ font-weight: var(--weight-500);
+ line-height: 1;
+ padding: 2px 4px;
+ -webkit-border-radius: 20px;
+ border-radius: 20px;
+}
+
+.mobile-navigation-menu {
+ background: var(--white);
+ position: fixed;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ max-width: 320px;
+ height: 100vh;
+ padding: 20px;
+ -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+ overflow-y: scroll;
+ -ms-scroll-chaining: none;
+ overscroll-behavior: contain;
+ visibility: hidden;
+ -webkit-transition: 0.5s ease;
+ -o-transition: 0.5s ease;
+ transition: 0.5s ease;
+ z-index: 20;
+}
+
+.mobile-navigation-menu.active {
+ left: 0;
+ visibility: visible;
+}
+
+.menu-top {
+ padding-bottom: 15px;
+ margin-bottom: 10px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-bottom: 2px solid var(--cultured);
+}
+
+.menu-top .menu-title {
+ color: var(--salmon-pink);
+ font-size: var(--fs-4);
+ font-weight: var(--weight-600);
+}
+
+.menu-close-btn {
+ color: var(--eerie-black);
+ font-size: 22px;
+}
+
+.menu-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.mobile-menu-category-list { margin-bottom: 30px; }
+
+.menu-category .accordion-menu {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.mobile-menu-category-list .menu-category { border-bottom: 1px solid var(--cultured); }
+
+.mobile-menu-category-list .menu-title {
+ color: var(--onyx);
+ font-size: var(--fs-6);
+ font-weight: var(--weight-500);
+ padding: 12px 0;
+}
+
+.accordion-menu > div { font-size: 14px; }
+
+.accordion-menu ion-icon {
+ color: var(--onyx);
+ --ionicon-stroke-width: 90px;
+}
+
+.accordion-menu.active .add-icon,
+.accordion-menu .remove-icon { display: none; }
+
+.accordion-menu .add-icon,
+.accordion-menu.active .remove-icon { display: block; }
+
+.menu-category .submenu-category-list { margin-left: 10px; }
+
+.submenu-title {
+ padding: 6px 0;
+ font-size: var(--fs-6);
+ color: var(--sonic-silver);
+ font-weight: var(--weight-300);
+}
+
+.submenu-title:hover { color: var(--davys-gray); }
+
+.submenu-category-list {
+ max-height: 0;
+ overflow: hidden;
+ visibility: hidden;
+ -webkit-transition: 0.5s ease-in-out;
+ -o-transition: 0.5s ease-in-out;
+ transition: 0.5s ease-in-out;
+}
+
+.submenu-category-list.active {
+ max-height: 148px;
+ visibility: visible;
+}
+
+.menu-bottom .menu-category-list { margin-bottom: 20px; }
+
+.menu-bottom .menu-category { border-bottom: none; }
+
+.menu-bottom .menu-title {
+ font-size: var(--fs-6);
+ font-weight: var(--weight-500);
+ color: var(--eerie-black);
+ padding: 12px 0;
+}
+
+.accordion-menu.active .caret-back { -webkit-transform: rotate(-0.25turn); -ms-transform: rotate(-0.25turn); transform: rotate(-0.25turn); }
+
+.menu-bottom .submenu-category-list {
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ padding: 0 15px;
+ margin-left: 0;
+ -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
+}
+
+.menu-bottom .submenu-category:not(:last-child) { border-bottom: 1px solid var(--cultured); }
+
+.menu-social-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.menu-social-container .social-link {
+ background: var(--cultured);
+ color: var(--eerie-black);
+ font-size: 20px;
+ padding: 10px;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #BANNER
+\*-----------------------------------*/
+
+.banner { margin: 30px 0; }
+
+.slider-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ overflow: auto hidden;
+ -webkit-scroll-snap-type: inline mandatory;
+ -ms-scroll-snap-type: inline mandatory;
+ scroll-snap-type: inline mandatory;
+ overscroll-behavior-inline: contain;
+}
+
+.slider-item {
+ position: relative;
+ min-width: 100%;
+ max-height: 450px;
+ aspect-ratio: 1 / 1;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ scroll-snap-align: start;
+}
+
+.slider-item .banner-img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ -o-object-position: right;
+ object-position: right;
+}
+
+.banner-content {
+ background: hsla(0, 0%, 100%, 0.8);
+ position: absolute;
+ bottom: 25px;
+ left: 25px;
+ right: 25px;
+ padding: 20px 25px;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+}
+
+.banner-subtitle {
+ color: var(--salmon-pink);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-500);
+ text-transform: capitalize;
+ letter-spacing: 2px;
+ margin-bottom: 10px;
+}
+
+.banner-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-1);
+ text-transform: uppercase;
+ line-height: 1;
+ margin-bottom: 10px;
+}
+
+.banner-text { display: none; }
+
+.banner-btn {
+ background: var(--salmon-pink);
+ color: var(--white);
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ font-size: var(--fs-11);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ padding: 4px 10px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.banner-btn:hover { background: var(--eerie-black); }
+
+
+
+
+
+/*-----------------------------------*\
+ #CATEGORY
+\*-----------------------------------*/
+
+.category { margin-bottom: 30px; }
+
+.category-item-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+ overflow: auto hidden;
+ -webkit-scroll-snap-type: inline mandatory;
+ -ms-scroll-snap-type: inline mandatory;
+ scroll-snap-type: inline mandatory;
+ overscroll-behavior-inline: contain;
+}
+
+.category-item {
+ min-width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+ padding: 15px;
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ scroll-snap-align: start;
+}
+
+.category-img-box {
+ background: var(--cultured);
+ border: 1px solid hsl(0, 0%, 80%);
+ padding: 10px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+}
+
+.category-content-box { width: 100%; }
+
+.category-content-flex {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.category-item-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+}
+
+.category-item-amount {
+ color: var(--sonic-silver);
+ font-size: var(--fs-11);
+}
+
+.category-btn {
+ color: var(--salmon-pink);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-500);
+ text-transform: capitalize;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #SIDEBAR
+\*-----------------------------------*/
+
+.sidebar {
+ background: var(--white);
+ position: fixed;
+ top: 0;
+ left: -100%;
+ bottom: 0;
+ width: 100%;
+ max-width: 320px;
+ padding: 30px;
+ overflow-y: scroll;
+ -ms-scroll-chaining: none;
+ overscroll-behavior: contain;
+ visibility: hidden;
+ -webkit-transition: 0.5s ease;
+ -o-transition: 0.5s ease;
+ transition: 0.5s ease;
+ z-index: 20;
+}
+
+.sidebar.active {
+ left: 0;
+ visibility: visible;
+}
+
+.sidebar-category {
+ margin-bottom: 15px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid var(--cultured);
+}
+
+.sidebar-top {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.sidebar-title {
+ color: var(--onyx);
+ font-size: var(--fs-5);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ font-weight: var(--weight-600);
+}
+
+.sidebar-close-btn {
+ color: var(--eerie-black);
+ font-size: 22px;
+ font-weight: var(--weight-600);
+}
+
+.sidebar-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.sidebar-accordion-menu {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 7px 0;
+}
+
+.sidebar .menu-title-flex {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.sidebar .menu-title {
+ font-size: var(--fs-5);
+ color: var(--sonic-silver);
+ font-weight: var(--weight-500);
+}
+
+.sidebar-accordion-menu ion-icon {
+ color: var(--sonic-silver);
+ font-size: 14px;
+ --ionicon-stroke-width: 70px;
+}
+
+.sidebar-submenu-category-list {
+ border-top: 1px solid var(--cultured);
+ max-height: 0;
+ overflow: hidden;
+ visibility: hidden;
+ -webkit-transition: 0.5s ease-in-out;
+ -o-transition: 0.5s ease-in-out;
+ transition: 0.5s ease-in-out;
+}
+
+.sidebar-submenu-category-list.active {
+ padding: 13px 0 8px;
+ max-height: 122px;
+ visibility: visible;
+}
+
+.sidebar-submenu-title {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ padding: 2px 0;
+}
+
+.sidebar-submenu-title:hover { color: var(--eerie-black); }
+
+.sidebar .product-name { text-transform: capitalize; }
+
+.sidebar-accordion-menu.active .add-icon,
+.sidebar-accordion-menu .remove-icon { display: none; }
+
+.sidebar-accordion-menu .add-icon,
+.sidebar-accordion-menu.active .remove-icon { display: block; }
+
+.sidebar .showcase-heading {
+ font-size: var(--fs-5);
+ font-weight: var(--weight-600);
+ color: var(--onyx);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ margin-bottom: 15px;
+}
+
+.sidebar .showcase {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 15px;
+}
+
+.sidebar .showcase:not(:last-child) { margin-bottom: 15px; }
+
+.sidebar .showcase-img { -webkit-border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm); }
+
+.sidebar .showcase-content { width: -webkit-calc(100% - 90px); width: calc(100% - 90px); }
+
+.sidebar .showcase-title {
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-400);
+ text-transform: capitalize;
+ overflow: hidden;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ letter-spacing: 0.5px;
+}
+
+.sidebar .showcase-rating {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: var(--sandy-brown);
+ font-size: 13px;
+ padding: 4px 0;
+}
+
+.sidebar .price-box {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 15px;
+}
+
+.sidebar .price-box del {
+ color: var(--sonic-silver);
+ font-size: 13px;
+}
+
+.sidebar .price-box .price {
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ color: var(--davys-gray);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PRODUCT MINIMAL
+\*-----------------------------------*/
+
+.product-minimal { margin-bottom: 30px; }
+
+.product-minimal .product-showcase { margin-bottom: 10px; }
+
+.product-minimal .showcase-wrapper {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ -webkit-scroll-snap-type: inline mandatory;
+ -ms-scroll-snap-type: inline mandatory;
+ scroll-snap-type: inline mandatory;
+}
+
+.product-minimal .showcase-container {
+ min-width: 100%;
+ padding: 0 5px;
+ scroll-snap-align: start;
+}
+
+.product-minimal .showcase {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 15px;
+ border: 1px solid var(--cultured);
+ padding: 15px;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+}
+
+.product-minimal .showcase:not(:last-child) { margin-bottom: 15px; }
+
+.product-minimal .showcase-content { width: -webkit-calc(100% - 85px); width: calc(100% - 85px); }
+
+.product-minimal .showcase-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: capitalize;
+ white-space: nowrap;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ margin-bottom: 2px;
+}
+
+.product-minimal .showcase-category {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ color: var(--davys-gray);
+ font-size: var(--fs-8);
+ text-transform: capitalize;
+ margin-bottom: 3px;
+}
+
+.product-minimal .showcase-category:hover { color: var(--salmon-pink); }
+
+.product-minimal .price-box {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.product-minimal .price {
+ font-size: var(--fs-7);
+ font-weight: var(--weight-700);
+ color: var(--salmon-pink);
+}
+
+.product-minimal .price-box del {
+ font-size: var(--fs-9);
+ color: var(--sonic-silver);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PRODUCT FEATURED
+\*-----------------------------------*/
+
+.product-featured { margin-bottom: 30px; }
+
+.product-featured .showcase-wrapper {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 20px;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ -webkit-scroll-snap-type: inline mandatory;
+ -ms-scroll-snap-type: inline mandatory;
+ scroll-snap-type: inline mandatory;
+}
+
+.product-featured .showcase-container {
+ min-width: 100%;
+ padding: 30px;
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ scroll-snap-align: start;
+}
+
+.product-featured .showcase-img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.product-featured .showcase-content { margin-top: 30px; }
+
+.product-featured .showcase-rating {
+ color: var(--sandy-brown);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 16px;
+ margin-bottom: 15px;
+}
+
+.product-featured .showcase-title {
+ font-size: var(--fs-7);
+ color: var(--eerie-black);
+ overflow: hidden;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ text-transform: uppercase;
+ margin-bottom: 3px;
+}
+
+.product-featured .showcase-desc {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-300);
+ margin-bottom: 10px;
+}
+
+.product-featured .price-box {
+ font-size: var(--fs-3);
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+}
+
+.product-featured .price {
+ color: var(--salmon-pink);
+ font-weight: var(--weight-700);
+}
+
+.product-featured del {
+ color: var(--sonic-silver);
+ font-weight: var(--weight-300);
+}
+
+.product-featured .add-cart-btn {
+ background: var(--salmon-pink);
+ padding: 8px 15px;
+ color: var(--white);
+ font-weight: var(--fs-9);
+ font-weight: var(--weight-700);
+ text-transform: uppercase;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ margin-bottom: 15px;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.product-featured .add-cart-btn:hover {
+ background: var(--eerie-black);
+ color: var(--white);
+}
+
+.product-featured .showcase-status { margin-bottom: 15px; }
+
+.product-featured .showcase-status .wrapper {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ color: var(--eerie-black);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-400);
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.product-featured .showcase-status-bar {
+ background: var(--cultured);
+ position: relative;
+ height: 10px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+
+.product-featured .showcase-status-bar::before {
+ position: absolute;
+ content: '';
+ top: 3px;
+ left: 3px;
+ height: 4px;
+ width: 40%;
+ background: var(--salmon-pink);
+ -webkit-border-radius: 4px;
+ border-radius: 4px;
+}
+
+.product-featured .countdown-desc {
+ color: var(--eerie-black);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.product-featured .countdown {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ gap: 5px;
+}
+
+.product-featured .countdown-content {
+ padding: 5px;
+ background: var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ text-align: center;
+}
+
+.product-featured .display-number {
+ color: var(--eerie-black);
+ font-size: var(--fs-5);
+ font-weight: var(--weight-500);
+ min-width: 40px;
+}
+
+.product-featured .display-text {
+ color: var(--davys-gray);
+ font-size: var(--fs-11);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PRODUCT GRID
+\*-----------------------------------*/
+
+.product-main { margin-bottom: 30px; }
+
+.product-grid {
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: 1fr;
+ grid-template-columns: 1fr;
+ gap: 25px;
+}
+
+.product-grid .showcase {
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.product-grid .showcase:hover { -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); }
+
+.product-grid .showcase-banner { position: relative; }
+
+.product-grid .product-img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.product-grid .product-img.default {
+ position: relative;
+ z-index: 1;
+}
+
+.product-grid .product-img.hover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ opacity: 0;
+}
+
+.product-grid .showcase:hover .product-img.hover { opacity: 1; }
+
+.product-grid .showcase:hover .product-img.default { opacity: 0; }
+
+.product-grid .showcase:hover .product-img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
+
+.product-grid .showcase-badge {
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ background: var(--ocean-green);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-500);
+ color: var(--white);
+ padding: 0 8px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ z-index: 3;
+}
+
+.product-grid .showcase-badge.angle {
+ top: 8px;
+ left: -29px;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ text-transform: uppercase;
+ font-size: 11px;
+ padding: 5px 40px;
+}
+
+.product-grid .showcase-badge.black { background: var(--eerie-black); }
+
+.product-grid .showcase-badge.pink { background: var(--salmon-pink); }
+
+.product-grid .showcase-actions {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 20px;
+ -webkit-transform: translateX(50px);
+ -ms-transform: translateX(50px);
+ transform: translateX(50px);
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ z-index: 3;
+}
+
+.product-grid .showcase:hover .showcase-actions { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
+
+.product-grid .btn-action {
+ background: var(--white);
+ color: var(--sonic-silver);
+ margin-bottom: 5px;
+ border: 1px solid var(--cultured);
+ padding: 5px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.product-grid .btn-action:hover {
+ background: var(--eerie-black);
+ color: var(--white);
+ border-color: var(--eerie-black);
+}
+
+.product-grid .showcase-content { padding: 15px 20px 0; }
+
+.product-grid .showcase-category {
+ color: var(--salmon-pink);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-500);
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.product-grid .showcase-title {
+ color: var(--sonic-silver);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-300);
+ text-transform: capitalize;
+ letter-spacing: 1px;
+ margin-bottom: 10px;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.product-grid .showcase-title:hover { color: var(--eerie-black); }
+
+.product-grid .showcase-rating {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ color: var(--sandy-brown);
+ margin-bottom: 10px;
+}
+
+.product-grid .price-box {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ gap: 10px;
+ font-size: var(--fs-7);
+ color: var(--eerie-black);
+ margin-bottom: 10px;
+}
+
+.product-grid .price { font-weight: var(--weight-700); }
+
+.product-grid del { color: var(--sonic-silver); }
+
+
+
+
+
+/*-----------------------------------*\
+ #TESTIMONIAL
+\*-----------------------------------*/
+
+.testimonials-box { margin-bottom: 50px; }
+
+.testimonial-card {
+ padding: 30px 20px;
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ text-align: center;
+ margin-bottom: 25px;
+}
+
+.testimonial-banner {
+ margin: auto;
+ margin-bottom: 20px;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+}
+
+.testimonial-name {
+ font-weight: var(--weight-700);
+ text-transform: uppercase;
+ color: var(--sonic-silver);
+ margin-bottom: 5px;
+}
+
+.testimonial-title {
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ margin-bottom: 15px;
+}
+
+.quotation-img {
+ margin: auto;
+ margin-bottom: 10px;
+}
+
+.testimonial-desc {
+ max-width: 70%;
+ margin: auto;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #CTA
+\*-----------------------------------*/
+
+.cta-container {
+ position: relative;
+ aspect-ratio: 5 / 6;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ margin-bottom: 25px;
+}
+
+.cta-banner {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.cta-content {
+ background: hsla(0, 0%, 100%, 0.7);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ padding: 15px 20px;
+ text-align: center;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+}
+
+.cta-content .discount {
+ background: var(--eerie-black);
+ color: var(--white);
+ font-size: var(--fs-11);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ margin: auto;
+ padding: 0 5px;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ margin-bottom: 5px;
+}
+
+.cta-title {
+ color: var(--onyx);
+ font-size: var(--fs-5);
+ text-transform: capitalize;
+ margin-bottom: 5px;
+}
+
+.cta-text {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ margin-bottom: 5px;
+}
+
+.cta-btn {
+ font-size: var(--fs-9);
+ color: var(--sonic-silver);
+ text-transform: uppercase;
+ font-weight: var(--weight-700);
+ margin: auto;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #SERVICE
+\*-----------------------------------*/
+
+.service-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ gap: 30px;
+ padding: 30px 15px;
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+}
+
+.service-item {
+ min-width: 190px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 15px;
+}
+
+.service-icon {
+ font-size: 35px;
+ color: var(--salmon-pink);
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.service-icon ion-icon { --ionicon-stroke-width: 25px; }
+
+.service-item:hover .service-icon { color: var(--eerie-black); }
+
+.service-title {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: capitalize;
+ margin-bottom: 5px;
+}
+
+.service-desc {
+ color: var(--sonic-silver);
+ font-size: var(--fs-9);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #BLOG
+\*-----------------------------------*/
+
+.blog { margin-bottom: 30px; }
+
+.blog-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ gap: 15px;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ -webkit-scroll-snap-type: inline mandatory;
+ -ms-scroll-snap-type: inline mandatory;
+ scroll-snap-type: inline mandatory;
+}
+
+.blog-card {
+ min-width: 100%;
+ scroll-snap-align: start;
+}
+
+.blog-banner {
+ width: 100%;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ margin-bottom: 20px;
+}
+
+.blog-category {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ color: var(--salmon-pink);
+ font-size: var(--fs-8);
+}
+
+.blog-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-5);
+ font-weight: var(--weight-600);
+ line-height: 1.4;
+ margin-bottom: 5px;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.blog-title:hover { color: var(--salmon-pink); }
+
+.blog-meta {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+}
+
+.blog-meta cite {
+ font-style: normal;
+ color: var(--davys-gray);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #FOOTER
+\*-----------------------------------*/
+
+footer {
+ background: var(--eerie-black);
+ padding: 30px 0;
+}
+
+.footer-category {
+ margin-bottom: 30px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid var(--onyx);
+}
+
+.footer-category-title {
+ color: var(--salmon-pink);
+ font-size: var(--fs-6);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ margin-bottom: 15px;
+}
+
+.footer-category-box {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-column-gap: 20px;
+ -moz-column-gap: 20px;
+ column-gap: 20px;
+ row-gap: 3px;
+ margin-bottom: 15px;
+}
+
+.category-box-title {
+ color: var(--spanish-gray);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+}
+
+.footer-category-link {
+ position: relative;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.footer-category-link:hover { color: var(--spanish-gray); }
+
+.footer-category-link:not(:last-child)::after {
+ position: absolute;
+ content: '';
+ top: 3px;
+ right: -10px;
+ background: var(--sonic-silver);
+ width: 1px;
+ height: 15px;
+}
+
+
+/**
+ * footer nav
+ */
+
+.footer-nav {
+ border-bottom: 1px solid var(--onyx);
+ padding-bottom: 30px;
+ margin-bottom: 30px;
+}
+
+.footer-nav-list:not(:last-child) { margin-bottom: 20px; }
+
+.footer-nav .nav-title {
+ position: relative;
+ color: var(--white);
+ font-size: var(--fs-7);
+ text-transform: uppercase;
+ margin-bottom: 15px;
+ padding-bottom: 5px;
+}
+
+.footer-nav .nav-title::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: var(--salmon-pink);
+ width: 60px;
+ height: 1px;
+}
+
+.footer-nav-item { padding: 3px 0; }
+
+.footer-nav-link,
+.footer-nav-item .content {
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+}
+
+.footer-nav-link:hover { color: var(--salmon-pink); }
+
+.footer-nav-item.flex {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ gap: 10px;
+}
+
+.footer-nav-item .content {
+ font-style: normal;
+ margin-bottom: 5px;
+}
+
+.footer-nav-item .icon-box {
+ color: var(--sonic-silver);
+ font-size: 25px;
+}
+
+.footer-nav-item .icon-box ion-icon { --ionicon-stroke-width: 30px; }
+
+.footer-nav .social-link {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.social-link .footer-nav-link { font-size: 25px; }
+
+.footer-bottom {
+ margin-bottom: 50px;
+ text-align: center;
+}
+
+.payment-img {
+ max-width: 335px;
+ width: 100%;
+ margin: auto;
+ margin-bottom: 15px;
+}
+
+.copyright {
+ color: var(--sonic-silver);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-500);
+ text-transform: capitalize;
+ letter-spacing: 1.2px;
+}
+
+.copyright a {
+ display: inline;
+ color: inherit;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #RESPONSIVE
+\*-----------------------------------*/
+
+
+/**
+ * responsive larger than 480px screen
+ */
+
+@media (min-width: 480px) {
+
+ /**
+ * #CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * typography
+ */
+
+ --fs-1: 1.875rem;
+
+ }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .header-top {
+ display: block;
+ padding: 10px 0;
+ border-bottom: 1px solid var(--cultured);
+ }
+
+ .header-social-container,
+ .header-top-actions { display: none; }
+
+ .header-alert-news {
+ color: var(--sonic-silver);
+ font-size: var(--fs-9);
+ text-transform: uppercase;
+ }
+
+ .header-alert-news b { font-weight: var(--weight-500); }
+
+ .header-main { padding: 25px 0; }
+
+ .mobile-bottom-navigation {
+ -webkit-border-top-left-radius: var(--border-radius-md);
+ border-top-left-radius: var(--border-radius-md);
+ -webkit-border-top-right-radius: var(--border-radius-md);
+ border-top-right-radius: var(--border-radius-md);
+ }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item { aspect-ratio: 5 / 3; }
+
+ .banner-content {
+ top: 50%;
+ right: auto;
+ bottom: auto;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ max-width: 320px;
+ }
+
+ .banner-subtitle { --fs-7: 1rem; }
+
+ .banner-text {
+ display: block;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-500);
+ margin-bottom: 10px;
+ }
+
+ .banner-text b { font-size: var(--fs-2); }
+
+ .banner-btn { padding: 7px 20px; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-grid {
+ -ms-grid-columns: 1fr 30px 1fr;
+ grid-template-columns: 1fr 1fr;
+ gap: 30px;
+ }
+
+
+
+ /**
+ * #CTA
+ */
+
+ .cta-content { padding: 40px; }
+
+ .cta-content .discount {
+ --fs-11: 0.875rem;
+ padding: 5px 10px;
+ }
+
+ .cta-title { --fs-5: 1.5rem; }
+
+ .cta-text { --fs-7: 1rem; }
+
+ .cta-btn { --fs-9: 1rem; }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ .copyright { --fs-8: 0.875rem; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 570px screen
+ */
+
+@media (min-width: 570px) {
+
+ /**
+ * #HEADER
+ */
+
+ .header-top .container,
+ .header-main .container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ }
+
+ .header-logo { margin-bottom: 0; }
+
+ .header-top-actions {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .header-top-actions select {
+ border: none;
+ display: block;
+ min-width: 80px;
+ padding: 5px 0;
+ font: inherit;
+ color: var(--sonic-silver);
+ font-size: var(--fs-8);
+ text-transform: uppercase;
+ cursor: pointer;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ }
+
+ .header-top-actions select:hover { color: var(--eerie-black); }
+
+ .header-search-container { min-width: 300px; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item { aspect-ratio: 4 / 2; }
+
+ .banner-content { background: none; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-item-container { gap: 30px; }
+
+ .category-item { min-width: -webkit-calc(50% - 15px); min-width: calc(50% - 15px); }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-minimal .showcase-container { min-width: 50%; }
+
+ .product-featured .showcase-img {
+ max-width: 450px;
+ margin: auto;
+ }
+
+ .product-featured .countdown { gap: 20px; }
+
+
+
+ /**
+ * #CTA
+ */
+
+ .cta-container { aspect-ratio: 6 / 5; }
+
+
+
+ /**
+ * #BLOG
+ */
+
+ .blog-container { gap: 30px; }
+
+ .blog-card { min-width: -webkit-calc(50% - 15px); min-width: calc(50% - 15px); }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 768px screen
+ */
+
+@media (min-width: 768px) {
+
+ /**
+ * #CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * typography
+ */
+
+ --fs-1: 2.375rem;
+
+ }
+
+
+
+ /**
+ * #BASE
+ */
+
+ html { font-size: 17px; }
+
+
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container {
+ max-width: 750px;
+ margin: auto;
+ }
+
+
+
+ /**
+ * #MODAL
+ */
+
+ .modal-content {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ max-width: 750px;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+ }
+
+ .newsletter-img { display: block; }
+
+ .newsletter { text-align: left; }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .header-main .container { gap: 80px; }
+
+ .header-search-container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item {
+ aspect-ratio: auto;
+ height: 350px;
+ }
+
+ .banner-content { max-width: 380px; }
+
+ .banner-subtitle { --fs-7: 1.25rem; }
+
+ .banner-text { --fs-7: 1.125rem; }
+
+ .banner-text b { --fs-2: 1.875rem; }
+
+ .banner-btn { --fs-11: 0.75rem; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-img-box { padding: 20px; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-minimal {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ gap: 20px;
+ }
+
+ .product-minimal .product-showcase {
+ min-width: -webkit-calc(50% - 10px);
+ min-width: calc(50% - 10px);
+ width: -webkit-calc(50% - 10px);
+ width: calc(50% - 10px);
+ }
+
+ .product-minimal .showcase-container { min-width: 100%; }
+
+ .product-featured .showcase {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 20px;
+ }
+
+ .product-featured .showcase-img { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
+
+ .product-featured .showcase-content {
+ margin-top: 0;
+ min-width: -webkit-calc(100% - 345px);
+ min-width: calc(100% - 345px);
+ }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ .footer-nav .container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ row-gap: 50px;
+ -webkit-column-gap: 20px;
+ -moz-column-gap: 20px;
+ column-gap: 20px;
+ }
+
+ .footer-nav-list {
+ min-width: -webkit-calc(33.33% - 15px);
+ min-width: calc(33.33% - 15px);
+ width: -webkit-calc(33.33% - 15px);
+ width: calc(33.33% - 15px);
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ }
+
+ .footer-nav-list:not(:last-child) { margin-bottom: 0; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1024px screen
+ */
+
+@media (min-width: 1024px) {
+
+ /**
+ * #CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * typography
+ */
+
+ --fs-1: 2.625rem;
+ --fs-2: 1.125rem;
+
+ }
+
+
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container { max-width: 980px; }
+
+
+
+ /**
+ * #NOTIFICATION TOAST
+ */
+
+ .notification-toast { bottom: 30px; }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .header-social-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 5px;
+ }
+
+ .header-social-container .social-link {
+ padding: 5px;
+ background: hsl(0, 0%, 95%);
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ color: var(--sonic-silver);
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ }
+
+ .header-social-container .social-link:hover {
+ background: var(--salmon-pink);
+ color: var(--white);
+ }
+
+ .header-user-actions {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 15px;
+ }
+
+ .header-user-actions .action-btn {
+ position: relative;
+ font-size: 35px;
+ color: var(--onyx);
+ padding: 5px;
+ }
+
+ .header-user-actions .count {
+ position: absolute;
+ top: -2px;
+ right: -3px;
+ background: var(--bittersweet);
+ color: var(--white);
+ font-size: 12px;
+ font-weight: var(--weight-500);
+ line-height: 1;
+ padding: 2px 4px;
+ -webkit-border-radius: 20px;
+ border-radius: 20px;
+ }
+
+ .desktop-navigation-menu { display: block; }
+
+ .desktop-menu-category-list {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 30px;
+ }
+
+ .desktop-menu-category-list .menu-category:not(:nth-child(2)) { position: relative; }
+
+ .desktop-menu-category-list .menu-category > .menu-title {
+ position: relative;
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ padding: 15px 0;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ }
+
+ .desktop-menu-category-list .menu-category > .menu-title:hover { color: var(--salmon-pink); }
+
+ .desktop-menu-category-list .menu-category > .menu-title::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: var(--salmon-pink);
+ -webkit-transform: scaleX(0);
+ -ms-transform: scaleX(0);
+ transform: scaleX(0);
+ -webkit-transform-origin: left;
+ -ms-transform-origin: left;
+ transform-origin: left;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ }
+
+ .desktop-menu-category-list .menu-category > .menu-title:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
+
+ .dropdown-panel {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background: var(--white);
+ width: 100%;
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 30px;
+ padding: 30px;
+ border: 1px solid var(--cultured);
+ -webkit-box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1);
+ box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ -webkit-transform: translateY(50px);
+ -ms-transform: translateY(50px);
+ transform: translateY(50px);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ z-index: 5;
+ }
+
+ .desktop-menu-category-list .menu-category:hover > .dropdown-panel {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+ }
+
+ .dropdown-panel-list .menu-title a {
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--cultured);
+ margin-bottom: 10px;
+ }
+
+ .panel-list-item a {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ }
+
+ .panel-list-item a:hover { color: var(--salmon-pink); }
+
+ .panel-list-item:not(:last-child) a { padding: 4px 0; }
+
+ .panel-list-item:last-child { margin-top: 20px; }
+
+ .panel-list-item img {
+ width: 100%;
+ height: auto;
+ -webkit-border-radius: var(--border-radius-sm);
+ border-radius: var(--border-radius-sm);
+ }
+
+ .dropdown-list {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 200px;
+ background: var(--white);
+ padding: 20px 0;
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ border: 1px solid var(--cultured);
+ -webkit-box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1);
+ box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1);
+ -webkit-transform: translateY(50px);
+ -ms-transform: translateY(50px);
+ transform: translateY(50px);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ z-index: 5;
+ }
+
+ .desktop-menu-category-list .menu-category:hover > .dropdown-list {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+ }
+
+ .dropdown-list .dropdown-item a {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ padding: 4px 20px;
+ -webkit-transition: var(--transition-timing);
+ -o-transition: var(--transition-timing);
+ transition: var(--transition-timing);
+ }
+
+ .dropdown-list .dropdown-item a:hover { color: var(--salmon-pink); }
+
+ .mobile-bottom-navigation { display: none; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .banner { margin-top: 0; }
+
+ .slider-item { height: 380px; }
+
+ .banner-content {
+ left: 75px;
+ max-width: 400px;
+ }
+
+ .banner-subtitle { --fs-7: 1.625rem; }
+
+ .banner-text { --fs-7: 1.375rem; }
+
+ .banner-btn { --fs-11: 0.875rem; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-item { min-width: -webkit-calc(33.33% - 20px); min-width: calc(33.33% - 20px); }
+
+ .category-img-box { padding: 10px; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-container .container {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+ gap: 30px;
+ margin-bottom: 30px;
+ }
+
+ .sidebar {
+ --fs-5: 0.941rem;
+
+ position: -webkit-sticky;
+
+ position: sticky;
+ top: 30px;
+ left: 0;
+ padding: 0;
+ min-width: -webkit-calc(25% - 15px);
+ min-width: calc(25% - 15px);
+ margin-bottom: 30px;
+ visibility: visible;
+ overflow-y: auto;
+ -ms-scroll-chaining: chained;
+ overscroll-behavior: auto;
+ z-index: 0;
+ }
+
+ .sidebar-category {
+ padding: 20px;
+ margin-bottom: 30px;
+ border: 1px solid var(--cultured);
+ -webkit-border-radius: var(--border-radius-md);
+ border-radius: var(--border-radius-md);
+ }
+
+ .sidebar-close-btn { display: none; }
+
+ .product-box { min-width: -webkit-calc(75% - 15px); min-width: calc(75% - 15px); }
+
+ .product-minimal { margin-bottom: 20px; }
+
+ .product-minimal .product-showcase {
+ min-width: -webkit-calc(33.33% - 14px);
+ min-width: calc(33.33% - 14px);
+ width: -webkit-calc(33.33% - 14px);
+ width: calc(33.33% - 14px);
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ }
+
+ .product-minimal .showcase-wrapper { gap: 10px; }
+
+ .product-minimal .showcase-container { padding: 2px; }
+
+ .product-featured .countdown-content { padding: 5px 10px; }
+
+ .product-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
+
+
+
+ /**
+ * #TESTIMONIALS, CTA & SERVICE
+ */
+
+ .testimonials-box {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-align: stretch;
+ -webkit-align-items: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ gap: 30px;
+ }
+
+ .testimonial-card { margin-bottom: 0; }
+
+ .testimonial, .cta-container {
+ min-width: -webkit-calc(50% - 15px);
+ min-width: calc(50% - 15px);
+ width: -webkit-calc(50% - 15px);
+ width: calc(50% - 15px);
+ margin-bottom: 0;
+ }
+
+ .service { width: 100%; }
+
+ .service-container { gap: 0; }
+
+ .service-item {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ text-align: center;
+ min-width: 20%;
+ }
+
+
+
+ /**
+ * #BLOG
+ */
+
+ .blog-card { min-width: -webkit-calc(33.33% - 20px); min-width: calc(33.33% - 20px); }
+
+ .blog-title { --fs-5: 1rem; }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ .footer-nav-list {
+ min-width: -webkit-calc(20% - 16px);
+ min-width: calc(20% - 16px);
+ width: -webkit-calc(20% - 16px);
+ width: calc(20% - 16px);
+ }
+
+ .footer-nav-list:last-child { display: none; }
+
+ .footer-bottom { margin-bottom: 0; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1200px screen
+ */
+
+@media (min-width: 1200px) {
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container { max-width: 1200px; }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .desktop-menu-category-list { gap: 45px; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item:last-child .banner-img { -o-object-position: top; object-position: top; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-item { min-width: -webkit-calc(25% - 22.5px); min-width: calc(25% - 22.5px); }
+
+ .category-item-title { --fs-9: 0.824rem; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-featured .showcase > div { min-width: -webkit-calc(50% - 10px); min-width: calc(50% - 10px); }
+
+ .product-featured .display-number { --fs-5: 1.125rem; }
+
+ .product-grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
+
+
+
+ /**
+ * #TESTIMONIALS, CTA, SERVICE
+ */
+
+ .testimonial, .service {
+ min-width: -webkit-calc(25% - 20px);
+ min-width: calc(25% - 20px);
+ width: -webkit-calc(25% - 20px);
+ width: calc(25% - 20px);
+ }
+
+ .cta-container {
+ min-width: -webkit-calc(50% - 20px);
+ min-width: calc(50% - 20px);
+ width: -webkit-calc(50% - 20px);
+ width: calc(50% - 20px);
+ aspect-ratio: unset;
+ }
+
+ .service-container {
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ gap: 16px;
+ padding: 30px;
+ }
+
+ .service-item {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ text-align: left;
+ }
+
+
+
+ /**
+ * #BLOG
+ */
+
+ .blog { margin-bottom: 50px; }
+
+ .blog-card { min-width: -webkit-calc(25% - 22.5px); min-width: calc(25% - 22.5px); }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ footer { padding-top: 50px; }
+
+ .footer-category {
+ margin-bottom: 50px;
+ padding-bottom: 35px;
+ }
+
+ .footer-nav { padding-bottom: 50px; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1400px screen
+ */
+
+@media (min-width: 1400px) {
+
+ /**
+ * #BASE
+ */
+
+ html { font-size: 18px; }
+
+
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container { max-width: 1350px; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item { height: 450px; }
+
+ .banner-content {
+ left: 110px;
+ max-width: 460px;
+ }
+
+}
\ No newline at end of file
diff --git a/ecommerce-website/assests/css/style.css b/ecommerce-website/assests/css/style.css
new file mode 100644
index 0000000..73a78e1
--- /dev/null
+++ b/ecommerce-website/assests/css/style.css
@@ -0,0 +1,2631 @@
+/*-----------------------------------*\
+ #style.css
+\*-----------------------------------*/
+
+/**
+ * copyright 2022 @codewithsadee
+ */
+
+
+
+
+
+/*-----------------------------------*\
+ #CUSTOM PROPERTY
+\*-----------------------------------*/
+
+:root {
+
+ /**
+ * colors
+ */
+
+ --spanish-gray: hsl(0, 0%, 60%);
+ --sonic-silver: hsl(0, 0%, 47%);
+ --eerie-black: hsl(0, 0%, 13%);
+ --salmon-pink: hsl(353, 100%, 78%);
+ --sandy-brown: hsl(29, 90%, 65%);
+ --bittersweet: hsl(0, 100%, 70%);
+ --ocean-green: hsl(152, 51%, 52%);
+ --davys-gray: hsl(0, 0%, 33%);
+ --cultured: hsl(0, 0%, 93%);
+ --white: hsl(0, 100%, 100%);
+ --onyx: hsl(0, 0%, 27%);
+
+ /**
+ * typography
+ */
+
+ --fs-1: 1.563rem;
+ --fs-2: 1.375rem;
+ --fs-3: 1.25rem;
+ --fs-4: 1.125rem;
+ --fs-5: 1rem;
+ --fs-6: 0.938rem;
+ --fs-7: 0.875rem;
+ --fs-8: 0.813rem;
+ --fs-9: 0.75rem;
+ --fs-10: 0.688rem;
+ --fs-11: 0.625rem;
+
+ --weight-300: 300;
+ --weight-400: 400;
+ --weight-500: 500;
+ --weight-600: 600;
+ --weight-700: 700;
+
+ /**
+ * border-radius
+ */
+
+ --border-radius-md: 10px;
+ --border-radius-sm: 5px;
+
+ /**
+ * transition
+ */
+
+ --transition-timing: 0.2s ease;
+
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #RESET
+\*-----------------------------------*/
+
+*, *::before, *::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+a { text-decoration: none; }
+
+li { list-style: none; }
+
+button {
+ background: none;
+ font: inherit;
+ border: none;
+ cursor: pointer;
+}
+
+img, ion-icon, button, a { display: block; }
+
+span { display: inline-block; }
+
+html {
+ font-family: "Poppins", sans-serif;
+ overscroll-behavior: contain;
+}
+
+input {
+ display: block;
+ width: 100%;
+ font: inherit;
+}
+
+input::placeholder { font: inherit; }
+
+body { background: var(--white); }
+
+/**
+ * scrollbar style
+ */
+
+body::-webkit-scrollbar { width: 15px; }
+
+body::-webkit-scrollbar-track {
+ background: var(--white);
+ border-left: 1px solid var(--cultured);
+}
+
+body::-webkit-scrollbar-thumb {
+ background: hsl(0, 0%, 80%);
+ border: 3px solid var(--white);
+ border-radius: 10px;
+}
+
+body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); }
+
+
+
+
+
+/*-----------------------------------*\
+ #REUSED STYLE
+\*-----------------------------------*/
+
+.container { padding: 0 15px; }
+
+.has-scrollbar { padding-bottom: 5px; }
+
+.has-scrollbar::-webkit-scrollbar {
+ width: 12px; /* for vertical scroll */
+ height: 12px; /* for horizontal scroll */
+}
+
+.has-scrollbar::-webkit-scrollbar-thumb {
+ background: transparent;
+ border: 3px solid var(--white);
+ border-radius: 20px;
+}
+
+.has-scrollbar:hover::-webkit-scrollbar-thumb { background: hsl(0, 0%, 90%); }
+
+.has-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 80%); }
+
+.title {
+ color: var(--eerie-black);
+ font-size: var(--fs-5);
+ font-weight: var(--weight-600);
+ letter-spacing: 0.4px;
+ text-transform: capitalize;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--cultured);
+ margin-bottom: 30px;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #MAIN
+\*-----------------------------------*/
+
+/**
+ * overlay
+ */
+
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: hsla(0, 0%, 0%, 0.5);
+ opacity: 0;
+ pointer-events: none;
+ z-index: 15;
+ transition: 0.5s ease;
+}
+
+.overlay.active {
+ opacity: 1;
+ pointer-events: all;
+}
+
+
+
+/**
+ * MODAL
+ */
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: hsla(0, 0%, 0%, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ z-index: 10;
+ animation: popup 1s ease-in-out 5s forwards;
+}
+
+@keyframes popup {
+
+ 0% {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ }
+
+ 100% {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+ }
+
+}
+
+.modal.closed { display: none; }
+
+.modal-close-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+.newsletter-img { display: none; }
+
+.modal-content {
+ position: relative;
+ max-width: 350px;
+ margin: 20px;
+ background: var(--white);
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ z-index: 2;
+ animation: scaleUp 0.5s ease-in-out 5s forwards;
+}
+
+@keyframes scaleUp {
+
+ 0% { transform: scale(0.9); }
+ 100% { transform: scale(1); }
+
+}
+
+.modal-close-btn {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background: var(--salmon-pink);
+ color: var(--white);
+ font-size: 16px;
+ padding: 5px;
+ border-radius: var(--border-radius-sm);
+}
+
+.modal-close-btn:hover { opacity: 0.9; }
+
+.modal-close-btn ion-icon { --ionicon-stroke-width: 70px; }
+
+.newsletter {
+ padding: 50px 30px;
+ text-align: center;
+}
+
+.newsletter-header { margin-bottom: 20px; }
+
+.newsletter-title {
+ color: var(--onyx);
+ font-size: var(--fs-2);
+ font-weight: var(--weight-600);
+ margin-bottom: 10px;
+}
+
+.newsletter-desc {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ line-height: 1.6;
+}
+
+.email-field {
+ font-size: var(--fs-7);
+ padding: 8px 16px;
+ border-radius: var(--border-radius-sm);
+ border: 1px solid var(--cultured);
+ margin-bottom: 16px;
+}
+
+.btn-newsletter {
+ background: var(--eerie-black);
+ color: var(--white);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ padding: 10px 15px;
+ border-radius: var(--border-radius-sm);
+ margin: auto;
+ transition: var(--transition-timing);
+}
+
+.btn-newsletter:hover { background: var(--salmon-pink); }
+
+
+
+
+
+/**
+ * NOTIFICATION TOAST
+ */
+
+.notification-toast {
+ position: fixed;
+ bottom: 80px;
+ left: 20px;
+ right: 20px;
+ background: var(--white);
+ max-width: 300px;
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+ padding: 15px;
+ border-radius: var(--border-radius-md);
+ box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15);
+ transform: translateX(calc(-100% - 40px));
+ transition: 0.5s ease-in-out;
+ z-index: 5;
+ animation: slideInOut 10s ease-in-out infinite;
+}
+
+@keyframes slideInOut {
+
+ 0%,
+ 45%,
+ 100% {
+ transform: translateX(calc(-100% - 40px));
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ 50%,
+ 95% {
+ transform: translateX(0);
+ opacity: 1;
+ visibility: visible;
+ }
+
+}
+
+.notification-toast.closed { display: none; }
+
+.toast-close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ color: var(--sonic-silver);
+}
+
+.toast-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.toast-banner {
+ width: 70px;
+ height: 70px;
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-sm);
+}
+
+.toast-banner img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ object-position: center;
+}
+
+.toast-detail {
+ width: calc(100% - 85px);
+ padding-right: 10px;
+}
+
+.toast-message {
+ font-size: var(--fs-10);
+ color: var(--sonic-silver);
+ margin-bottom: 8px;
+}
+
+.toast-title {
+ font-size: var(--fs-7);
+ font-weight: var(--weight-500);
+ color: var(--onyx);
+}
+
+.toast-meta {
+ font-size: var(--fs-10);
+ color: var(--sonic-silver);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #HEADER
+\*-----------------------------------*/
+
+.header-top,
+.header-user-actions,
+.desktop-navigation-menu { display: none; }
+
+.header-main {
+ padding: 20px 0;
+ border-bottom: 1px solid var(--cultured);
+}
+
+.header-logo { margin-bottom: 20px; }
+
+.header-logo img { margin: auto; }
+
+.header-search-container { position: relative; }
+
+.header-search-container .search-field {
+ font-size: var(--fs-7);
+ color: var(--onyx);
+ padding: 10px 15px;
+ padding-right: 50px;
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+}
+
+.search-field::-webkit-search-cancel-button { display: none; }
+
+.search-btn {
+ background: var(--white);
+ position: absolute;
+ top: 50%;
+ right: 2px;
+ transform: translateY(-50%);
+ color: var(--onyx);
+ font-size: 18px;
+ padding: 8px 15px;
+ border-radius: var(--border-radius-md);
+ transition: color var(--transition-timing);
+}
+
+.search-btn:hover { color: var(--salmon-pink); }
+
+.mobile-bottom-navigation {
+ background: var(--white);
+ position: fixed;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ max-width: 500px;
+ margin: auto;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 5px 0;
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.25);
+ z-index: 5;
+}
+
+.mobile-bottom-navigation .action-btn {
+ position: relative;
+ font-size: 26px;
+ color: var(--eerie-black);
+ padding: 10px;
+}
+
+.mobile-bottom-navigation .count {
+ background: var(--bittersweet);
+ color: var(--white);
+ position: absolute;
+ top: 0;
+ right: 0;
+ font-size: 12px;
+ font-weight: var(--weight-500);
+ line-height: 1;
+ padding: 2px 4px;
+ border-radius: 20px;
+}
+
+.mobile-navigation-menu {
+ background: var(--white);
+ position: fixed;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ max-width: 320px;
+ height: 100vh;
+ padding: 20px;
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
+ overflow-y: scroll;
+ overscroll-behavior: contain;
+ visibility: hidden;
+ transition: 0.5s ease;
+ z-index: 20;
+}
+
+.mobile-navigation-menu.active {
+ left: 0;
+ visibility: visible;
+}
+
+.menu-top {
+ padding-bottom: 15px;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 2px solid var(--cultured);
+}
+
+.menu-top .menu-title {
+ color: var(--salmon-pink);
+ font-size: var(--fs-4);
+ font-weight: var(--weight-600);
+}
+
+.menu-close-btn {
+ color: var(--eerie-black);
+ font-size: 22px;
+}
+
+.menu-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.mobile-menu-category-list { margin-bottom: 30px; }
+
+.menu-category .accordion-menu {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.mobile-menu-category-list .menu-category { border-bottom: 1px solid var(--cultured); }
+
+.mobile-menu-category-list .menu-title {
+ color: var(--onyx);
+ font-size: var(--fs-6);
+ font-weight: var(--weight-500);
+ padding: 12px 0;
+}
+
+.accordion-menu > div { font-size: 14px; }
+
+.accordion-menu ion-icon {
+ color: var(--onyx);
+ --ionicon-stroke-width: 90px;
+}
+
+.accordion-menu.active .add-icon,
+.accordion-menu .remove-icon { display: none; }
+
+.accordion-menu .add-icon,
+.accordion-menu.active .remove-icon { display: block; }
+
+.menu-category .submenu-category-list { margin-left: 10px; }
+
+.submenu-title {
+ padding: 6px 0;
+ font-size: var(--fs-6);
+ color: var(--sonic-silver);
+ font-weight: var(--weight-300);
+}
+
+.submenu-title:hover { color: var(--davys-gray); }
+
+.submenu-category-list {
+ max-height: 0;
+ overflow: hidden;
+ visibility: hidden;
+ transition: 0.5s ease-in-out;
+}
+
+.submenu-category-list.active {
+ max-height: 148px;
+ visibility: visible;
+}
+
+.menu-bottom .menu-category-list { margin-bottom: 20px; }
+
+.menu-bottom .menu-category { border-bottom: none; }
+
+.menu-bottom .menu-title {
+ font-size: var(--fs-6);
+ font-weight: var(--weight-500);
+ color: var(--eerie-black);
+ padding: 12px 0;
+}
+
+.accordion-menu.active .caret-back { transform: rotate(-0.25turn); }
+
+.menu-bottom .submenu-category-list {
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+ padding: 0 15px;
+ margin-left: 0;
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
+}
+
+.menu-bottom .submenu-category:not(:last-child) { border-bottom: 1px solid var(--cultured); }
+
+.menu-social-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.menu-social-container .social-link {
+ background: var(--cultured);
+ color: var(--eerie-black);
+ font-size: 20px;
+ padding: 10px;
+ border-radius: var(--border-radius-md);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #BANNER
+\*-----------------------------------*/
+
+.banner { margin: 30px 0; }
+
+.slider-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ border-radius: var(--border-radius-md);
+ overflow: auto hidden;
+ scroll-snap-type: inline mandatory;
+ overscroll-behavior-inline: contain;
+}
+
+.slider-item {
+ position: relative;
+ min-width: 100%;
+ max-height: 450px;
+ aspect-ratio: 1 / 1;
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ scroll-snap-align: start;
+}
+
+.slider-item .banner-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: right;
+}
+
+.banner-content {
+ background: hsla(0, 0%, 100%, 0.8);
+ position: absolute;
+ bottom: 25px;
+ left: 25px;
+ right: 25px;
+ padding: 20px 25px;
+ border-radius: var(--border-radius-md);
+}
+
+.banner-subtitle {
+ color: var(--salmon-pink);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-500);
+ text-transform: capitalize;
+ letter-spacing: 2px;
+ margin-bottom: 10px;
+}
+
+.banner-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-1);
+ text-transform: uppercase;
+ line-height: 1;
+ margin-bottom: 10px;
+}
+
+.banner-text { display: none; }
+
+.banner-btn {
+ background: var(--salmon-pink);
+ color: var(--white);
+ width: max-content;
+ font-size: var(--fs-11);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ padding: 4px 10px;
+ border-radius: var(--border-radius-sm);
+ transition: var(--transition-timing);
+}
+
+.banner-btn:hover { background: var(--eerie-black); }
+
+
+
+
+
+/*-----------------------------------*\
+ #CATEGORY
+\*-----------------------------------*/
+
+.category { margin-bottom: 30px; }
+
+.category-item-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ overflow: auto hidden;
+ scroll-snap-type: inline mandatory;
+ overscroll-behavior-inline: contain;
+}
+
+.category-item {
+ min-width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 15px;
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+ scroll-snap-align: start;
+}
+
+.category-img-box {
+ background: var(--cultured);
+ border: 1px solid hsl(0, 0%, 80%);
+ padding: 10px;
+ border-radius: var(--border-radius-sm);
+}
+
+.category-content-box { width: 100%; }
+
+.category-content-flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.category-item-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+}
+
+.category-item-amount {
+ color: var(--sonic-silver);
+ font-size: var(--fs-11);
+}
+
+.category-btn {
+ color: var(--salmon-pink);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-500);
+ text-transform: capitalize;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #SIDEBAR
+\*-----------------------------------*/
+
+.sidebar {
+ background: var(--white);
+ position: fixed;
+ top: 0;
+ left: -100%;
+ bottom: 0;
+ width: 100%;
+ max-width: 320px;
+ padding: 30px;
+ overflow-y: scroll;
+ overscroll-behavior: contain;
+ visibility: hidden;
+ transition: 0.5s ease;
+ z-index: 20;
+}
+
+.sidebar.active {
+ left: 0;
+ visibility: visible;
+}
+
+.sidebar-category {
+ margin-bottom: 15px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid var(--cultured);
+}
+
+.sidebar-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.sidebar-title {
+ color: var(--onyx);
+ font-size: var(--fs-5);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ font-weight: var(--weight-600);
+}
+
+.sidebar-close-btn {
+ color: var(--eerie-black);
+ font-size: 22px;
+ font-weight: var(--weight-600);
+}
+
+.sidebar-close-btn ion-icon { --ionicon-stroke-width: 50px; }
+
+.sidebar-accordion-menu {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 7px 0;
+}
+
+.sidebar .menu-title-flex {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.sidebar .menu-title {
+ font-size: var(--fs-5);
+ color: var(--sonic-silver);
+ font-weight: var(--weight-500);
+}
+
+.sidebar-accordion-menu ion-icon {
+ color: var(--sonic-silver);
+ font-size: 14px;
+ --ionicon-stroke-width: 70px;
+}
+
+.sidebar-submenu-category-list {
+ border-top: 1px solid var(--cultured);
+ max-height: 0;
+ overflow: hidden;
+ visibility: hidden;
+ transition: 0.5s ease-in-out;
+}
+
+.sidebar-submenu-category-list.active {
+ padding: 13px 0 8px;
+ max-height: 122px;
+ visibility: visible;
+}
+
+.sidebar-submenu-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ padding: 2px 0;
+}
+
+.sidebar-submenu-title:hover { color: var(--eerie-black); }
+
+.sidebar .product-name { text-transform: capitalize; }
+
+.sidebar-accordion-menu.active .add-icon,
+.sidebar-accordion-menu .remove-icon { display: none; }
+
+.sidebar-accordion-menu .add-icon,
+.sidebar-accordion-menu.active .remove-icon { display: block; }
+
+.sidebar .showcase-heading {
+ font-size: var(--fs-5);
+ font-weight: var(--weight-600);
+ color: var(--onyx);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ margin-bottom: 15px;
+}
+
+.sidebar .showcase {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.sidebar .showcase:not(:last-child) { margin-bottom: 15px; }
+
+.sidebar .showcase-img { border-radius: var(--border-radius-sm); }
+
+.sidebar .showcase-content { width: calc(100% - 90px); }
+
+.sidebar .showcase-title {
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-400);
+ text-transform: capitalize;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ letter-spacing: 0.5px;
+}
+
+.sidebar .showcase-rating {
+ display: flex;
+ align-items: center;
+ color: var(--sandy-brown);
+ font-size: 13px;
+ padding: 4px 0;
+}
+
+.sidebar .price-box {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.sidebar .price-box del {
+ color: var(--sonic-silver);
+ font-size: 13px;
+}
+
+.sidebar .price-box .price {
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ color: var(--davys-gray);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PRODUCT MINIMAL
+\*-----------------------------------*/
+
+.product-minimal { margin-bottom: 30px; }
+
+.product-minimal .product-showcase { margin-bottom: 10px; }
+
+.product-minimal .showcase-wrapper {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ scroll-snap-type: inline mandatory;
+}
+
+.product-minimal .showcase-container {
+ min-width: 100%;
+ padding: 0 5px;
+ scroll-snap-align: start;
+}
+
+.product-minimal .showcase {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 15px;
+ border: 1px solid var(--cultured);
+ padding: 15px;
+ border-radius: var(--border-radius-md);
+}
+
+.product-minimal .showcase:not(:last-child) { margin-bottom: 15px; }
+
+.product-minimal .showcase-content { width: calc(100% - 85px); }
+
+.product-minimal .showcase-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: capitalize;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 2px;
+}
+
+.product-minimal .showcase-category {
+ width: max-content;
+ color: var(--davys-gray);
+ font-size: var(--fs-8);
+ text-transform: capitalize;
+ margin-bottom: 3px;
+}
+
+.product-minimal .showcase-category:hover { color: var(--salmon-pink); }
+
+.product-minimal .price-box {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.product-minimal .price {
+ font-size: var(--fs-7);
+ font-weight: var(--weight-700);
+ color: var(--salmon-pink);
+}
+
+.product-minimal .price-box del {
+ font-size: var(--fs-9);
+ color: var(--sonic-silver);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PRODUCT FEATURED
+\*-----------------------------------*/
+
+.product-featured { margin-bottom: 30px; }
+
+.product-featured .showcase-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ scroll-snap-type: inline mandatory;
+}
+
+.product-featured .showcase-container {
+ min-width: 100%;
+ padding: 30px;
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+ scroll-snap-align: start;
+}
+
+.product-featured .showcase-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.product-featured .showcase-content { margin-top: 30px; }
+
+.product-featured .showcase-rating {
+ color: var(--sandy-brown);
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ margin-bottom: 15px;
+}
+
+.product-featured .showcase-title {
+ font-size: var(--fs-7);
+ color: var(--eerie-black);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-transform: uppercase;
+ margin-bottom: 3px;
+}
+
+.product-featured .showcase-desc {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-300);
+ margin-bottom: 10px;
+}
+
+.product-featured .price-box {
+ font-size: var(--fs-3);
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+}
+
+.product-featured .price {
+ color: var(--salmon-pink);
+ font-weight: var(--weight-700);
+}
+
+.product-featured del {
+ color: var(--sonic-silver);
+ font-weight: var(--weight-300);
+}
+
+.product-featured .add-cart-btn {
+ background: var(--salmon-pink);
+ padding: 8px 15px;
+ color: var(--white);
+ font-weight: var(--fs-9);
+ font-weight: var(--weight-700);
+ text-transform: uppercase;
+ border-radius: var(--border-radius-md);
+ margin-bottom: 15px;
+ transition: var(--transition-timing);
+}
+
+.product-featured .add-cart-btn:hover {
+ background: var(--eerie-black);
+ color: var(--white);
+}
+
+.product-featured .showcase-status { margin-bottom: 15px; }
+
+.product-featured .showcase-status .wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: var(--eerie-black);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-400);
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.product-featured .showcase-status-bar {
+ background: var(--cultured);
+ position: relative;
+ height: 10px;
+ border-radius: 5px;
+}
+
+.product-featured .showcase-status-bar::before {
+ position: absolute;
+ content: '';
+ top: 3px;
+ left: 3px;
+ height: 4px;
+ width: 40%;
+ background: var(--salmon-pink);
+ border-radius: 4px;
+}
+
+.product-featured .countdown-desc {
+ color: var(--eerie-black);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.product-featured .countdown {
+ display: flex;
+ gap: 5px;
+}
+
+.product-featured .countdown-content {
+ padding: 5px;
+ background: var(--cultured);
+ border-radius: var(--border-radius-md);
+ text-align: center;
+}
+
+.product-featured .display-number {
+ color: var(--eerie-black);
+ font-size: var(--fs-5);
+ font-weight: var(--weight-500);
+ min-width: 40px;
+}
+
+.product-featured .display-text {
+ color: var(--davys-gray);
+ font-size: var(--fs-11);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #PRODUCT GRID
+\*-----------------------------------*/
+
+.product-main { margin-bottom: 30px; }
+
+.product-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 25px;
+}
+
+.product-grid .showcase {
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ transition: var(--transition-timing);
+}
+
+.product-grid .showcase:hover { box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); }
+
+.product-grid .showcase-banner { position: relative; }
+
+.product-grid .product-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: var(--transition-timing);
+}
+
+.product-grid .product-img.default {
+ position: relative;
+ z-index: 1;
+}
+
+.product-grid .product-img.hover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ opacity: 0;
+}
+
+.product-grid .showcase:hover .product-img.hover { opacity: 1; }
+
+.product-grid .showcase:hover .product-img.default { opacity: 0; }
+
+.product-grid .showcase:hover .product-img { transform: scale(1.1); }
+
+.product-grid .showcase-badge {
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ background: var(--ocean-green);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-500);
+ color: var(--white);
+ padding: 0 8px;
+ border-radius: var(--border-radius-sm);
+ z-index: 3;
+}
+
+.product-grid .showcase-badge.angle {
+ top: 8px;
+ left: -29px;
+ transform: rotate(-45deg);
+ text-transform: uppercase;
+ font-size: 11px;
+ padding: 5px 40px;
+}
+
+.product-grid .showcase-badge.black { background: var(--eerie-black); }
+
+.product-grid .showcase-badge.pink { background: var(--salmon-pink); }
+
+.product-grid .showcase-actions {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 20px;
+ transform: translateX(50px);
+ transition: var(--transition-timing);
+ z-index: 3;
+}
+
+.product-grid .showcase:hover .showcase-actions { transform: translateX(0); }
+
+.product-grid .btn-action {
+ background: var(--white);
+ color: var(--sonic-silver);
+ margin-bottom: 5px;
+ border: 1px solid var(--cultured);
+ padding: 5px;
+ border-radius: var(--border-radius-sm);
+ transition: var(--transition-timing);
+}
+
+.product-grid .btn-action:hover {
+ background: var(--eerie-black);
+ color: var(--white);
+ border-color: var(--eerie-black);
+}
+
+.product-grid .showcase-content { padding: 15px 20px 0; }
+
+.product-grid .showcase-category {
+ color: var(--salmon-pink);
+ font-size: var(--fs-9);
+ font-weight: var(--weight-500);
+ text-transform: uppercase;
+ margin-bottom: 10px;
+}
+
+.product-grid .showcase-title {
+ color: var(--sonic-silver);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-300);
+ text-transform: capitalize;
+ letter-spacing: 1px;
+ margin-bottom: 10px;
+ transition: var(--transition-timing);
+}
+
+.product-grid .showcase-title:hover { color: var(--eerie-black); }
+
+.product-grid .showcase-rating {
+ display: flex;
+ color: var(--sandy-brown);
+ margin-bottom: 10px;
+}
+
+.product-grid .price-box {
+ display: flex;
+ gap: 10px;
+ font-size: var(--fs-7);
+ color: var(--eerie-black);
+ margin-bottom: 10px;
+}
+
+.product-grid .price { font-weight: var(--weight-700); }
+
+.product-grid del { color: var(--sonic-silver); }
+
+
+
+
+
+/*-----------------------------------*\
+ #TESTIMONIAL
+\*-----------------------------------*/
+
+.testimonials-box { margin-bottom: 50px; }
+
+.testimonial-card {
+ padding: 30px 20px;
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+ text-align: center;
+ margin-bottom: 25px;
+}
+
+.testimonial-banner {
+ margin: auto;
+ margin-bottom: 20px;
+ border-radius: 50%;
+}
+
+.testimonial-name {
+ font-weight: var(--weight-700);
+ text-transform: uppercase;
+ color: var(--sonic-silver);
+ margin-bottom: 5px;
+}
+
+.testimonial-title {
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ margin-bottom: 15px;
+}
+
+.quotation-img {
+ margin: auto;
+ margin-bottom: 10px;
+}
+
+.testimonial-desc {
+ max-width: 70%;
+ margin: auto;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #CTA
+\*-----------------------------------*/
+
+.cta-container {
+ position: relative;
+ aspect-ratio: 5 / 6;
+ border-radius: var(--border-radius-md);
+ overflow: hidden;
+ margin-bottom: 25px;
+}
+
+.cta-banner {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.cta-content {
+ background: hsla(0, 0%, 100%, 0.7);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: fit-content;
+ padding: 15px 20px;
+ text-align: center;
+ border-radius: var(--border-radius-sm);
+}
+
+.cta-content .discount {
+ background: var(--eerie-black);
+ color: var(--white);
+ font-size: var(--fs-11);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ width: max-content;
+ margin: auto;
+ padding: 0 5px;
+ border-radius: var(--border-radius-sm);
+ margin-bottom: 5px;
+}
+
+.cta-title {
+ color: var(--onyx);
+ font-size: var(--fs-5);
+ text-transform: capitalize;
+ margin-bottom: 5px;
+}
+
+.cta-text {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ margin-bottom: 5px;
+}
+
+.cta-btn {
+ font-size: var(--fs-9);
+ color: var(--sonic-silver);
+ text-transform: uppercase;
+ font-weight: var(--weight-700);
+ margin: auto;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #SERVICE
+\*-----------------------------------*/
+
+.service-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 30px;
+ padding: 30px 15px;
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+}
+
+.service-item {
+ min-width: 190px;
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.service-icon {
+ font-size: 35px;
+ color: var(--salmon-pink);
+ transition: var(--transition-timing);
+}
+
+.service-icon ion-icon { --ionicon-stroke-width: 25px; }
+
+.service-item:hover .service-icon { color: var(--eerie-black); }
+
+.service-title {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: capitalize;
+ margin-bottom: 5px;
+}
+
+.service-desc {
+ color: var(--sonic-silver);
+ font-size: var(--fs-9);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #BLOG
+\*-----------------------------------*/
+
+.blog { margin-bottom: 30px; }
+
+.blog-container {
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ scroll-snap-type: inline mandatory;
+}
+
+.blog-card {
+ min-width: 100%;
+ scroll-snap-align: start;
+}
+
+.blog-banner {
+ width: 100%;
+ border-radius: var(--border-radius-md);
+ margin-bottom: 20px;
+}
+
+.blog-category {
+ width: max-content;
+ color: var(--salmon-pink);
+ font-size: var(--fs-8);
+}
+
+.blog-title {
+ color: var(--eerie-black);
+ font-size: var(--fs-5);
+ font-weight: var(--weight-600);
+ line-height: 1.4;
+ margin-bottom: 5px;
+ transition: var(--transition-timing);
+}
+
+.blog-title:hover { color: var(--salmon-pink); }
+
+.blog-meta {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+}
+
+.blog-meta cite {
+ font-style: normal;
+ color: var(--davys-gray);
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #FOOTER
+\*-----------------------------------*/
+
+footer {
+ background: var(--eerie-black);
+ padding: 30px 0;
+}
+
+.footer-category {
+ margin-bottom: 30px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid var(--onyx);
+}
+
+.footer-category-title {
+ color: var(--salmon-pink);
+ font-size: var(--fs-6);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ margin-bottom: 15px;
+}
+
+.footer-category-box {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: center;
+ column-gap: 20px;
+ row-gap: 3px;
+ margin-bottom: 15px;
+}
+
+.category-box-title {
+ color: var(--spanish-gray);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+}
+
+.footer-category-link {
+ position: relative;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ transition: var(--transition-timing);
+}
+
+.footer-category-link:hover { color: var(--spanish-gray); }
+
+.footer-category-link:not(:last-child)::after {
+ position: absolute;
+ content: '';
+ top: 3px;
+ right: -10px;
+ background: var(--sonic-silver);
+ width: 1px;
+ height: 15px;
+}
+
+
+/**
+ * footer nav
+ */
+
+.footer-nav {
+ border-bottom: 1px solid var(--onyx);
+ padding-bottom: 30px;
+ margin-bottom: 30px;
+}
+
+.footer-nav-list:not(:last-child) { margin-bottom: 20px; }
+
+.footer-nav .nav-title {
+ position: relative;
+ color: var(--white);
+ font-size: var(--fs-7);
+ text-transform: uppercase;
+ margin-bottom: 15px;
+ padding-bottom: 5px;
+}
+
+.footer-nav .nav-title::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: var(--salmon-pink);
+ width: 60px;
+ height: 1px;
+}
+
+.footer-nav-item { padding: 3px 0; }
+
+.footer-nav-link,
+.footer-nav-item .content {
+ width: max-content;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ transition: var(--transition-timing);
+}
+
+.footer-nav-link:hover { color: var(--salmon-pink); }
+
+.footer-nav-item.flex {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+}
+
+.footer-nav-item .content {
+ font-style: normal;
+ margin-bottom: 5px;
+}
+
+.footer-nav-item .icon-box {
+ color: var(--sonic-silver);
+ font-size: 25px;
+}
+
+.footer-nav-item .icon-box ion-icon { --ionicon-stroke-width: 30px; }
+
+.footer-nav .social-link {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 10px;
+}
+
+.social-link .footer-nav-link { font-size: 25px; }
+
+.footer-bottom {
+ margin-bottom: 50px;
+ text-align: center;
+}
+
+.payment-img {
+ max-width: 335px;
+ width: 100%;
+ margin: auto;
+ margin-bottom: 15px;
+}
+
+.copyright {
+ color: var(--sonic-silver);
+ font-size: var(--fs-8);
+ font-weight: var(--weight-500);
+ text-transform: capitalize;
+ letter-spacing: 1.2px;
+}
+
+.copyright a {
+ display: inline;
+ color: inherit;
+}
+
+
+
+
+
+/*-----------------------------------*\
+ #RESPONSIVE
+\*-----------------------------------*/
+
+
+/**
+ * responsive larger than 480px screen
+ */
+
+@media (min-width: 480px) {
+
+ /**
+ * #CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * typography
+ */
+
+ --fs-1: 1.875rem;
+
+ }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .header-top {
+ display: block;
+ padding: 10px 0;
+ border-bottom: 1px solid var(--cultured);
+ }
+
+ .header-social-container,
+ .header-top-actions { display: none; }
+
+ .header-alert-news {
+ color: var(--sonic-silver);
+ font-size: var(--fs-9);
+ text-transform: uppercase;
+ }
+
+ .header-alert-news b { font-weight: var(--weight-500); }
+
+ .header-main { padding: 25px 0; }
+
+ .mobile-bottom-navigation {
+ border-top-left-radius: var(--border-radius-md);
+ border-top-right-radius: var(--border-radius-md);
+ }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item { aspect-ratio: 5 / 3; }
+
+ .banner-content {
+ top: 50%;
+ right: auto;
+ bottom: auto;
+ transform: translateY(-50%);
+ max-width: 320px;
+ }
+
+ .banner-subtitle { --fs-7: 1rem; }
+
+ .banner-text {
+ display: block;
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-500);
+ margin-bottom: 10px;
+ }
+
+ .banner-text b { font-size: var(--fs-2); }
+
+ .banner-btn { padding: 7px 20px; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-grid {
+ grid-template-columns: 1fr 1fr;
+ gap: 30px;
+ }
+
+
+
+ /**
+ * #CTA
+ */
+
+ .cta-content { padding: 40px; }
+
+ .cta-content .discount {
+ --fs-11: 0.875rem;
+ padding: 5px 10px;
+ }
+
+ .cta-title { --fs-5: 1.5rem; }
+
+ .cta-text { --fs-7: 1rem; }
+
+ .cta-btn { --fs-9: 1rem; }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ .copyright { --fs-8: 0.875rem; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 570px screen
+ */
+
+@media (min-width: 570px) {
+
+ /**
+ * #HEADER
+ */
+
+ .header-top .container,
+ .header-main .container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .header-logo { margin-bottom: 0; }
+
+ .header-top-actions {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .header-top-actions select {
+ border: none;
+ display: block;
+ min-width: 80px;
+ padding: 5px 0;
+ font: inherit;
+ color: var(--sonic-silver);
+ font-size: var(--fs-8);
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: var(--transition-timing);
+ }
+
+ .header-top-actions select:hover { color: var(--eerie-black); }
+
+ .header-search-container { min-width: 300px; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item { aspect-ratio: 4 / 2; }
+
+ .banner-content { background: none; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-item-container { gap: 30px; }
+
+ .category-item { min-width: calc(50% - 15px); }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-minimal .showcase-container { min-width: 50%; }
+
+ .product-featured .showcase-img {
+ max-width: 450px;
+ margin: auto;
+ }
+
+ .product-featured .countdown { gap: 20px; }
+
+
+
+ /**
+ * #CTA
+ */
+
+ .cta-container { aspect-ratio: 6 / 5; }
+
+
+
+ /**
+ * #BLOG
+ */
+
+ .blog-container { gap: 30px; }
+
+ .blog-card { min-width: calc(50% - 15px); }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 768px screen
+ */
+
+@media (min-width: 768px) {
+
+ /**
+ * #CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * typography
+ */
+
+ --fs-1: 2.375rem;
+
+ }
+
+
+
+ /**
+ * #BASE
+ */
+
+ html { font-size: 17px; }
+
+
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container {
+ max-width: 750px;
+ margin: auto;
+ }
+
+
+
+ /**
+ * #MODAL
+ */
+
+ .modal-content {
+ display: flex;
+ align-items: center;
+ max-width: 750px;
+ width: fit-content;
+ }
+
+ .newsletter-img { display: block; }
+
+ .newsletter { text-align: left; }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .header-main .container { gap: 80px; }
+
+ .header-search-container { flex-grow: 1; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item {
+ aspect-ratio: auto;
+ height: 350px;
+ }
+
+ .banner-content { max-width: 380px; }
+
+ .banner-subtitle { --fs-7: 1.25rem; }
+
+ .banner-text { --fs-7: 1.125rem; }
+
+ .banner-text b { --fs-2: 1.875rem; }
+
+ .banner-btn { --fs-11: 0.75rem; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-img-box { padding: 20px; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-minimal {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+ }
+
+ .product-minimal .product-showcase {
+ min-width: calc(50% - 10px);
+ width: calc(50% - 10px);
+ }
+
+ .product-minimal .showcase-container { min-width: 100%; }
+
+ .product-featured .showcase {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ }
+
+ .product-featured .showcase-img { max-width: fit-content; }
+
+ .product-featured .showcase-content {
+ margin-top: 0;
+ min-width: calc(100% - 345px);
+ }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ .footer-nav .container {
+ display: flex;
+ flex-wrap: wrap;
+ row-gap: 50px;
+ column-gap: 20px;
+ }
+
+ .footer-nav-list {
+ min-width: calc(33.33% - 15px);
+ width: calc(33.33% - 15px);
+ flex-grow: 1;
+ }
+
+ .footer-nav-list:not(:last-child) { margin-bottom: 0; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1024px screen
+ */
+
+@media (min-width: 1024px) {
+
+ /**
+ * #CUSTOM PROPERTY
+ */
+
+ :root {
+
+ /**
+ * typography
+ */
+
+ --fs-1: 2.625rem;
+ --fs-2: 1.125rem;
+
+ }
+
+
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container { max-width: 980px; }
+
+
+
+ /**
+ * #NOTIFICATION TOAST
+ */
+
+ .notification-toast { bottom: 30px; }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .header-social-container {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ }
+
+ .header-social-container .social-link {
+ padding: 5px;
+ background: hsl(0, 0%, 95%);
+ border-radius: var(--border-radius-sm);
+ color: var(--sonic-silver);
+ transition: var(--transition-timing);
+ }
+
+ .header-social-container .social-link:hover {
+ background: var(--salmon-pink);
+ color: var(--white);
+ }
+
+ .header-user-actions {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ }
+
+ .header-user-actions .action-btn {
+ position: relative;
+ font-size: 35px;
+ color: var(--onyx);
+ padding: 5px;
+ }
+
+ .header-user-actions .count {
+ position: absolute;
+ top: -2px;
+ right: -3px;
+ background: var(--bittersweet);
+ color: var(--white);
+ font-size: 12px;
+ font-weight: var(--weight-500);
+ line-height: 1;
+ padding: 2px 4px;
+ border-radius: 20px;
+ }
+
+ .desktop-navigation-menu { display: block; }
+
+ .desktop-menu-category-list {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+ }
+
+ .desktop-menu-category-list .menu-category:not(:nth-child(2)) { position: relative; }
+
+ .desktop-menu-category-list .menu-category > .menu-title {
+ position: relative;
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ text-transform: uppercase;
+ padding: 15px 0;
+ transition: var(--transition-timing);
+ }
+
+ .desktop-menu-category-list .menu-category > .menu-title:hover { color: var(--salmon-pink); }
+
+ .desktop-menu-category-list .menu-category > .menu-title::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: var(--salmon-pink);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: var(--transition-timing);
+ }
+
+ .desktop-menu-category-list .menu-category > .menu-title:hover::after { transform: scaleX(1); }
+
+ .dropdown-panel {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background: var(--white);
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 30px;
+ padding: 30px;
+ border: 1px solid var(--cultured);
+ box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1);
+ border-radius: var(--border-radius-md);
+ transform: translateY(50px);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition: var(--transition-timing);
+ z-index: 5;
+ }
+
+ .desktop-menu-category-list .menu-category:hover > .dropdown-panel {
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+ }
+
+ .dropdown-panel-list .menu-title a {
+ color: var(--onyx);
+ font-size: var(--fs-7);
+ font-weight: var(--weight-600);
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--cultured);
+ margin-bottom: 10px;
+ }
+
+ .panel-list-item a {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ transition: var(--transition-timing);
+ }
+
+ .panel-list-item a:hover { color: var(--salmon-pink); }
+
+ .panel-list-item:not(:last-child) a { padding: 4px 0; }
+
+ .panel-list-item:last-child { margin-top: 20px; }
+
+ .panel-list-item img {
+ width: 100%;
+ height: auto;
+ border-radius: var(--border-radius-sm);
+ }
+
+ .dropdown-list {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 200px;
+ background: var(--white);
+ padding: 20px 0;
+ border-radius: var(--border-radius-md);
+ border: 1px solid var(--cultured);
+ box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.1);
+ transform: translateY(50px);
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ transition: var(--transition-timing);
+ z-index: 5;
+ }
+
+ .desktop-menu-category-list .menu-category:hover > .dropdown-list {
+ transform: translateY(0);
+ opacity: 1;
+ visibility: visible;
+ pointer-events: all;
+ }
+
+ .dropdown-list .dropdown-item a {
+ color: var(--sonic-silver);
+ font-size: var(--fs-7);
+ text-transform: capitalize;
+ padding: 4px 20px;
+ transition: var(--transition-timing);
+ }
+
+ .dropdown-list .dropdown-item a:hover { color: var(--salmon-pink); }
+
+ .mobile-bottom-navigation { display: none; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .banner { margin-top: 0; }
+
+ .slider-item { height: 380px; }
+
+ .banner-content {
+ left: 75px;
+ max-width: 400px;
+ }
+
+ .banner-subtitle { --fs-7: 1.625rem; }
+
+ .banner-text { --fs-7: 1.375rem; }
+
+ .banner-btn { --fs-11: 0.875rem; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-item { min-width: calc(33.33% - 20px); }
+
+ .category-img-box { padding: 10px; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-container .container {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ gap: 30px;
+ margin-bottom: 30px;
+ }
+
+ .sidebar {
+ --fs-5: 0.941rem;
+
+ position: sticky;
+ top: 30px;
+ left: 0;
+ padding: 0;
+ min-width: calc(25% - 15px);
+ margin-bottom: 30px;
+ visibility: visible;
+ overflow-y: auto;
+ overscroll-behavior: auto;
+ z-index: 0;
+ }
+
+ .sidebar-category {
+ padding: 20px;
+ margin-bottom: 30px;
+ border: 1px solid var(--cultured);
+ border-radius: var(--border-radius-md);
+ }
+
+ .sidebar-close-btn { display: none; }
+
+ .product-box { min-width: calc(75% - 15px); }
+
+ .product-minimal { margin-bottom: 20px; }
+
+ .product-minimal .product-showcase {
+ min-width: calc(33.33% - 14px);
+ width: calc(33.33% - 14px);
+ flex-grow: 1;
+ }
+
+ .product-minimal .showcase-wrapper { gap: 10px; }
+
+ .product-minimal .showcase-container { padding: 2px; }
+
+ .product-featured .countdown-content { padding: 5px 10px; }
+
+ .product-grid { grid-template-columns: repeat(3, 1fr); }
+
+
+
+ /**
+ * #TESTIMONIALS, CTA & SERVICE
+ */
+
+ .testimonials-box {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+ gap: 30px;
+ }
+
+ .testimonial-card { margin-bottom: 0; }
+
+ .testimonial, .cta-container {
+ min-width: calc(50% - 15px);
+ width: calc(50% - 15px);
+ margin-bottom: 0;
+ }
+
+ .service { width: 100%; }
+
+ .service-container { gap: 0; }
+
+ .service-item {
+ flex-direction: column;
+ text-align: center;
+ min-width: 20%;
+ }
+
+
+
+ /**
+ * #BLOG
+ */
+
+ .blog-card { min-width: calc(33.33% - 20px); }
+
+ .blog-title { --fs-5: 1rem; }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ .footer-nav-list {
+ min-width: calc(20% - 16px);
+ width: calc(20% - 16px);
+ }
+
+ .footer-nav-list:last-child { display: none; }
+
+ .footer-bottom { margin-bottom: 0; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1200px screen
+ */
+
+@media (min-width: 1200px) {
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container { max-width: 1200px; }
+
+
+
+ /**
+ * #HEADER
+ */
+
+ .desktop-menu-category-list { gap: 45px; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item:last-child .banner-img { object-position: top; }
+
+
+
+ /**
+ * #CATEGORY
+ */
+
+ .category-item { min-width: calc(25% - 22.5px); }
+
+ .category-item-title { --fs-9: 0.824rem; }
+
+
+
+ /**
+ * #PRODUCT
+ */
+
+ .product-featured .showcase > div { min-width: calc(50% - 10px); }
+
+ .product-featured .display-number { --fs-5: 1.125rem; }
+
+ .product-grid { grid-template-columns: repeat(4, 1fr); }
+
+
+
+ /**
+ * #TESTIMONIALS, CTA, SERVICE
+ */
+
+ .testimonial, .service {
+ min-width: calc(25% - 20px);
+ width: calc(25% - 20px);
+ }
+
+ .cta-container {
+ min-width: calc(50% - 20px);
+ width: calc(50% - 20px);
+ aspect-ratio: unset;
+ }
+
+ .service-container {
+ justify-content: flex-start;
+ gap: 16px;
+ padding: 30px;
+ }
+
+ .service-item {
+ flex-direction: row;
+ text-align: left;
+ }
+
+
+
+ /**
+ * #BLOG
+ */
+
+ .blog { margin-bottom: 50px; }
+
+ .blog-card { min-width: calc(25% - 22.5px); }
+
+
+
+ /**
+ * #FOOTER
+ */
+
+ footer { padding-top: 50px; }
+
+ .footer-category {
+ margin-bottom: 50px;
+ padding-bottom: 35px;
+ }
+
+ .footer-nav { padding-bottom: 50px; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1400px screen
+ */
+
+@media (min-width: 1400px) {
+
+ /**
+ * #BASE
+ */
+
+ html { font-size: 18px; }
+
+
+
+ /**
+ * #REUSED STYLE
+ */
+
+ .container { max-width: 1350px; }
+
+
+
+ /**
+ * #BANNER
+ */
+
+ .slider-item { height: 450px; }
+
+ .banner-content {
+ left: 110px;
+ max-width: 460px;
+ }
+
+}
diff --git a/ecommerce-website/index.html b/ecommerce-website/index.html
new file mode 100644
index 0000000..4a2de16
--- /dev/null
+++ b/ecommerce-website/index.html
@@ -0,0 +1,3596 @@
+
+
+
+
+
+
+
+ Anon - eCommerce Website
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Someone in new just bought
+
+
+
+ Rose Gold Earrings
+
+
+
+ ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Deal of the day
+
+
+
+
+
+
+
+
+
+
+
+
New Products
+
+
+
+
+
+
+
+
+
+
+
15%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
sale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
shirt
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jacket
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
new
+
+
+
+
+
+
+
+
+
+
+
+
+
+
skirt
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
casual
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
sale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
watches
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
watches
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
sale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
party wear
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
jacket
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
sale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
sports
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
formal
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
sale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
shorts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
testimonial
+
+
+
+
+
+
Alan Doe
+
+
CEO & Founder Invision
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur Lorem ipsum
+ dolor dolor sit amet.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Clothes
+
+
+
+
+ By Mr Robin /
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Shoes
+
+
+
+
+ By Mr Selsa /
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Electronics
+
+
+
+
+ By Mr Pawar /
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+