diff --git a/account.html b/account.html
index 0d7c1ba..a2b4c63 100644
--- a/account.html
+++ b/account.html
@@ -8,6 +8,7 @@
Account Details
+
+
Follow Us
}
}
const ball = document.querySelector(".toggle-ball");
+
+ const items = document.querySelectorAll(".row,body,.cartIcon,.page-btn,.menu-icon,.container,.navbar,.header,.toggle");
+
const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
const cartImage = document.querySelector('.cart-image');
+
ball.addEventListener("click",()=>{
items.forEach(item=>{
diff --git a/cart.html b/cart.html
index 139c220..c3500f6 100644
--- a/cart.html
+++ b/cart.html
@@ -9,7 +9,15 @@
+
+
+
+
+
+
+
+
@@ -239,6 +268,22 @@
Follow Us
)}
Total Rs. ${Number(
(subTotal + subTotal / 7.78).toFixed(2)
)} `;
+
+ }
+ renderItemsAndCosts(); //rendering the cart items and the costs initially
+ // to remove the row of item
+ function removeItem() {
+ const idNumber = event.target.id.split("-")[1]; //eg. if remove-3 btn is clicked, idNumber = 3
+ retrievedUser.cart.splice(idNumber,1); //removing the item from the cart array, whose 'remove' button is clicked
+ let updatedCart = {cart:retrievedUser.cart} //saving the new cart array to a new variable in the format how cart items are saved
+ // console.log(updatedCart)
+ localStorage.setItem("user",JSON.stringify(updatedCart)) //updating the localStorage cart items
+ renderItemsAndCosts();
+ }
+ const ball = document.querySelector(".toggle-ball");
+ const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+ ball.addEventListener("click",()=>{
+
}
renderItemsAndCosts(); //rendering the cart items and the costs initially
// to remove the row of item
@@ -257,6 +302,7 @@
Follow Us
const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
ball.addEventListener("click", () => {
+
items.forEach(item => {
item.classList.toggle("active")
})
diff --git a/contact.html b/contact.html
index 479b6ed..081dda9 100644
--- a/contact.html
+++ b/contact.html
@@ -12,6 +12,7 @@
+
-->
@@ -57,7 +58,11 @@
+
+
@@ -105,20 +110,27 @@
}
}
const ball = document.querySelector(".toggle-ball");
+
+ const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+
const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
const cartImage = document.querySelector(".cart-image");
const formTitle = document.querySelector(".form-title");
console.log(formTitle);
// const menuItems = document.querySelector('#menuItems');
+
ball.addEventListener("click",()=>{
items.forEach(item=>{
item.classList.toggle("active")
})
ball.classList.toggle("active")
+
+
MenuItems.classList.toggle("active")
cartImage.classList.toggle("bgm-change")
formTitle.classList.toggle("active")
+
})
diff --git a/index.html b/index.html
index 900a21c..4811295 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
+
Account
-
+
+
Follow Us
const ball = document.querySelector(".toggle-ball");
+
+ const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+
const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
const cartImage = document.querySelector(".cart-image");
const effects = document.querySelector(".effects");
// const menuItems = document.querySelector('#menuItems');
+
ball.addEventListener("click",()=>{
items.forEach(item=>{
diff --git a/productdetail.html b/productdetail.html
index e422d4f..184b2ec 100644
--- a/productdetail.html
+++ b/productdetail.html
@@ -8,10 +8,19 @@
Product Details
+
+
+
+
+
+
+
+
+
@@ -296,10 +326,16 @@
Follow Us
showToast();
};
+
+ const ball = document.querySelector(".toggle-ball");
+ const items = document.querySelectorAll(".row,body,.cartIcon,.menu-icon,.container,.navbar,.header,.toggle");
+ ball.addEventListener("click",()=>{
+
const ball = document.querySelector(".toggle-ball");
const items = document.querySelectorAll(".row,body,.menu-icon,.container,.navbar,.header,.toggle");
ball.addEventListener("click", () => {
+
items.forEach(item => {
item.classList.toggle("active")
})
diff --git a/style.css b/style.css
index ed1b5a1..cf8a66f 100644
--- a/style.css
+++ b/style.css
@@ -1,1250 +1,7111 @@
-@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
-
-/* Center the loader */
-
-#loader {
- position: fixed;
- width: 100%;
- height: 100vh;
- z-index: 1;
- overflow: visible;
- background: #fff url('shopping.gif') no-repeat center center;
-}
-
-
-/* Add animation to "page content" */
-
-.animate-bottom {
- position: relative;
- -webkit-animation-name: animatebottom;
- -webkit-animation-duration: 1s;
- animation-name: animatebottom;
- animation-duration: 1s
-}
-
-@-webkit-keyframes animatebottom {
- from {
- bottom: -100px;
- opacity: 0
- }
- to {
- bottom: 0px;
- opacity: 1
- }
-}
-
-@keyframes animatebottom {
- from {
- bottom: -100px;
- opacity: 0
- }
- to {
- bottom: 0;
- opacity: 1
- }
-}
-
-#myDiv {
- display: none;
- text-align: center;
-}
-
-.socialbtns-wrapper {
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: center;
-}
-
-.socialbtns-wrapper div {
- width: 100%;
- margin-left: 30%;
-}
-
-.socialbtns-wrapper div ul {
- list-style: none;
- padding: 0;
- margin: 0;
- width: 80%;
-}
-
-.socialbtns-wrapper div ul li {
- display: flex;
- align-items: center;
- width: 100%;
- margin: 0;
- padding: 3px;
- cursor: pointer;
- list-style: none outside none;
-}
-
-.socialbtns-wrapper div ul li a {
- margin-right: 10px;
-}
-
-.socialbtns .fa {
- /*width: 40px;*/
- /*height: 36px;*/
- font-size: 15px;
- color: black;
- background-color: #fff;
- border: 1px solid #000;
- padding-top: 5px;
- padding-bottom: 5px;
- padding-left: 5px;
- padding-right: 5px;
- border-radius: 20px;
- -moz-border-radius: 20px;
- -webkit-border-radius: 20px;
- -o-border-radius: 20px;
-}
-
-.socialbtns .fa:hover {
- color: #fff;
- background-color: #000;
- border: 1px solid #000;
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Poppins', sans-serif;
-}
-
-.navbar {
- display: flex;
- align-items: center;
- padding: 20px 5px;
-}
-
-nav {
- flex: 1;
- text-align: right;
-}
-
-nav li {
- display: inline-block;
- position: relative;
- color: #ff523b;
-}
-
-nav li:after {
- content: '';
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: 0;
- left: 0;
- background-color: #ff523b;
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
-}
-
-nav li:hover:after {
- transform: scaleX(1);
- transform-origin: bottom left;
-}
-
-nav ul {
- display: inline-block;
- list-style-type: none;
-}
-
-nav ul li {
- display: inline-block;
- margin-right: 20px;
-}
-
-a {
- text-decoration: none;
- color: #555;
-}
-
-p {
- color: #555;
-}
-
-.container {
- /* border: 2px solid red; */
- max-width: 1300px;
- margin: auto;
- padding-left: 25px;
- padding-right: 25px;
-}
-
-.row {
- display: flex;
- /* border: 2px solid blue; */
- align-items: center;
- flex-wrap: wrap;
- justify-content: space-around;
-}
-
-
-/* scroll-up button starts */
-
-#btnScrollToTop {
- position: fixed;
- right: 10px;
- bottom: 10px;
- width: 50px;
- height: 50px;
- border-radius: 50%;
- background: #ff523b;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
- color: #FFFFFF;
- border: none;
- outline: none;
- cursor: pointer;
- z-index: 1;
-}
-
-#btnScrollToTop:hover {
- width: 52px;
- height: 52px;
- margin: 2px;
- background: #b41919;
-}
-
-#btnScrollToTop:active {
- background: rgb(12, 214, 12);
-}
-
-
-/* scroll-up button ends */
-
-.col-2 {
- flex-basis: 50%;
- min-width: 280px;
-}
-
-.col-2 img {
- max-width: 76%;
- padding: 50px 0;
-}
-
-.col-2 h1 {
- font-size: 50px;
- line-height: 60px;
- margin: 25px 0;
-}
-
-.btn {
- display: inline-block;
- background-color: #ff523b;
- color: #fff;
- padding: 8px 30px;
- margin: 30px 60px;
- border-radius: 30px;
- transition: background 0.5s;
- border: #ff523b;
- cursor: pointer;
- /* border:2px solid black; */
-}
-
-.btn:hover {
- background: #563434;
-}
-
-.header {
- background: radial-gradient(#fff, #ffd6d6);
- /* radial for gradiancy on basis to radius
-linear for gradiancy on basis to vertically */
-}
-
-.header .row {
- margin: 70px;
- margin-top: 0;
-}
-
-.categories {
- margin: 70px 0;
-}
-
-.col-3 {
- flex-basis: 30%;
- min-width: 250px;
- margin-bottom: 30px;
-}
-
-.col-3 img {
- width: 100%;
- border-radius: 35px;
-}
-
-.small-container {
- max-width: 1080px;
- margin: auto;
- padding-left: 25px;
- padding-right: 25px;
-}
-
-.col-4 {
- flex-basis: 25%;
- padding: 10px;
- min-width: 200px;
- margin-bottom: 50px;
- transition: transform 0.5s;
- cursor: pointer;
-}
-
-.col-4 img {
- width: 100%;
-}
-
-.title {
- text-align: center;
- margin: 0 auto 80px;
- position: relative;
- line-height: 60px;
- color: #555;
-}
-
-.title::after {
- content: '';
- background: #ff523b;
- width: 80px;
- height: 5px;
- border-radius: 5px;
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
-}
-
-h4 {
- color: #555;
- font-weight: normal;
-}
-
-.col-4 p {
- font-size: 14px;
-}
-
-.rating .fa {
- color: #ff523b;
-}
-
-.col-4:hover {
- transform: translateY(20px);
-}
-
-
-/*------ offer------ */
-
-.offer {
- background: radial-gradient(#fff, #ffd6d6);
- margin-top: 80px;
- padding: 0;
-}
-
-.col-2 .offer-img {
- padding: 50px;
-}
-
-small {
- color: #555;
-}
-
-
-/* .testmonial */
-
-.testimonial {
- padding-top: 100px;
-}
-
-.testimonial .col-3 {
- text-align: center;
- padding: 40px 20px;
- box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
- cursor: pointer;
- transition: transform 0.5s;
-}
-
-.testimonial .col-3 img {
- width: 50px;
- margin-top: 20px;
- border-radius: 50%;
-}
-
-.testimonial .col-3:hover {
- transform: translateY(-20px);
-}
-
-.fa.fa-quote-left {
- font-size: 34px;
- color: #ff523b;
-}
-
-.col-3 p {
- font-size: 12px;
- margin: 12px 0;
- color: #777;
-}
-
-.testimonial .col-3 h3 {
- font-weight: 600;
- color: #555;
- font-size: 16px;
-}
-
-
-/* ------------brands ----------*/
-
-.brands {
- margin: 100px auto;
-}
-
-.col-5 {
- width: 160px;
- /* border: 2px solid red; */
-}
-
-.col-5 img {
- width: 100%;
- cursor: pointer;
- filter: grayscale(100);
-}
-
-.col-5 img:hover {
- filter: grayscale(0);
-}
-
-
-/* ----------footer ------------- */
-
-.footer {
- background: #000;
- color: #8a8a8a;
- font-size: 14px;
- padding: 60px 0px 20px;
-}
-
-.footer p {
- color: #8a8a8a;
-}
-
-.footer h3 {
- color: #fff;
- margin-bottom: 20px;
-}
-
-.footer-col-1,
-.footer-col-2,
-.footer-col-3,
-.footer-col-4 {
- min-width: 250px;
- margin-bottom: 20px;
-}
-
-.footer-col-1 {
- flex-basis: 30%;
-}
-
-.footer-col-2 {
- flex: 1;
- /*it uses all the available space */
- text-align: center;
-}
-
-.footer-col-2 img {
- width: 180px;
- margin-bottom: 20px;
-}
-
-.footer-col-3,
-.footer-col-4 {
- flex-basis: 10%;
- text-align: center;
- vertical-align: center;
-}
-
-ul {
- list-style: none;
-}
-
-.app-logo {
- margin-top: 20px;
-}
-
-.app-logo img {
- width: 140px;
-}
-
-.footer hr {
- border: none;
- background: #b5b5b5;
- height: 1px;
- margin: 20px 0;
-}
-
-.copyright {
- text-align: center;
-}
-
-.menu-icon {
- width: 28px;
- margin-left: 10px;
- display: none;
-}
-
-
-/* --------media query for menu----- */
-
-@media only screen and (max-width: 800px) {
- nav ul {
- background: rgba(217, 70, 70, 0.9);
- width: 100%;
- overflow: hidden;
- transition: max-height 1.5s;
- -webkit-backdrop-filter: blur(5px);
- backdrop-filter: blur(5px);
- position: absolute;
- top: 72px;
- left: 0;
- width: 100%;
- z-index: 9999;
- }
- nav ul li {
- display: block;
- margin: 10px 50px 10px 0;
- }
- nav ul li a {
- color: #fff;
- }
- .menu-icon {
- display: block;
- cursor: pointer;
- }
-}
-
-
-/* --------all products page------- */
-
-.row.row-2 {
- justify-content: space-between;
- margin: 100px auto 50px;
-}
-
-select {
- border: 1px solid #ff523b;
- padding: 5px;
- cursor: pointer;
-}
-
-select:focus {
- outline: none;
-}
-
-.page-btn {
- margin: 0 auto 80px;
-}
-
-.page-btn span {
- display: inline-block;
- border: 1px solid #ff523b;
- margin-left: 10px;
- width: 40px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- cursor: pointer;
- border-radius: 20%;
-}
-
-.page-btn span:hover {
- background: #ff523b;
- color: #fff;
-}
-
-
-/* ------single product details-------- */
-
-.single-product {
- margin-top: 80px;
- /* border: 1px solid #3bffbe; */
-}
-
-.single-product .col-2 img {
- /* border: 1px solid #131111; */
- padding: 0;
-}
-
-.single-product .col-2 {
- padding: 20px;
- /* border: 1px solid #ff3bc4; */
-}
-
-.single-product h4 {
- /* border: 1px solid #131111; */
- margin: 20px 0;
- /* ankit */
- font-weight: bold;
- font-size: 20px;
- /* ankit */
-}
-
-.single-product select {
- display: block;
- margin-top: 20px;
- padding: 10px;
-}
-
-.single-product input {
- width: 50px;
- height: 40px;
- padding-left: 10px;
- margin-right: 10px;
- font-size: 20px;
- border: 1px solid #ff523b;
-}
-
-input:focus {
- outline: none;
- /* same color after click ff523b */
-}
-
-.single-product h3 i {
- color: #ff523b;
- margin-left: 10px;
-}
-
-.small-img-row {
- /* width: 70px; */
- display: flex;
- justify-content: space-between;
- /* flex-wrap: wrap; */
- /* flex-direction: row; */
- /* border: 1px solid #1915e4; */
-}
-
-.small-img-col {
- flex-basis: 24%;
- cursor: pointer;
-}
-
-.viewMore--btn {
- transition: border 150ms ease-in-out;
-}
-
-.viewMore--btn:hover {
- /* text-decoration: underline; */
- border-width: 0 0 1.5px 0;
- border-style: solid;
-}
-
-
-/* ---------cart item details---------- */
-
-.cart-page {
- margin: 80px auto;
-}
-
-table {
- width: 100%;
- border-collapse: collapse;
- /*all border in one border*/
-}
-
-.cartinfo {
- display: flex;
- flex-wrap: wrap;
-}
-
-th {
- text-align: left;
- padding: 5px;
- color: #fff;
- background-color: #ff523b;
- font-weight: normal;
-}
-
-td {
- padding: 10px 5px;
-}
-
-td input {
- width: 45px;
- height: 30px;
- padding: 5px;
-}
-
-td .remove-btn {
- color: #ff523b;
- font-size: 12px;
- cursor: pointer;
- transition: color 250ms ease-in-out;
-}
-
-td .remove-btn:hover {
- color: #b3220f;
-}
-
-td img {
- width: 80px;
- height: 80px;
- /* margin-left: 10px; */
- margin: 0px 10px 0px 10px;
-}
-
-.total-price {
- display: flex;
- justify-content: flex-end;
-}
-
-.total-price table {
- border-top: 3px solid #ff523b;
- width: 100%;
- max-width: 400px;
-}
-
-td:last-child {
- text-align: right;
-}
-
-th:last-child {
- text-align: right;
-}
-
-
-/* ----------------Contact-Page ---------- */
-
-.contact-form-container {
- width: 60%;
- margin: 20px auto;
-}
-
-.contact-form-container h1 {
- text-align: center;
-}
-
-.contact-form input {
- font-size: 16px;
- font-family: 'Poppins', sans-serif;
- padding: 20px 10px;
-}
-
-.contact-form {
- margin-top: 20px;
-}
-
-.textarea-container textarea {
- font-size: 16px;
- font-family: 'Poppins', sans-serif;
- margin: 10px 0;
- width: 100%;
- height: 150px;
- padding: 10px 10px;
-}
-
-.textarea-container textarea:focus {
- outline: none;
-}
-
-.submit-btn {
- text-align: center;
-}
-
-.submit-btn button {
- padding: 5px 8px;
- font-size: 16px;
- cursor: pointer;
- font-family: 'Poppins', sans-serif;
- width: 70%;
- color: white;
- background-color: #ff523b;
- border: none;
- border-radius: 20px;
-}
-
-.submit-btn button:hover {
- background-color: #563434;
-}
-
-
-/* ----------------Account-Page ---------- */
-
-.account-page {
- padding: 50px 0;
- background: radial-gradient(#fff, #ffd6d6);
-}
-
-.form-container {
- background: #fff;
- width: 300px;
- height: 400px;
- margin: auto;
- padding: 20px 0;
- box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
- text-align: center;
- position: relative;
- overflow: hidden;
- /* to hide one form login wala */
-}
-
-.form-container span {
- font-weight: bold;
- padding: 0 10px;
- color: #555;
- cursor: pointer;
- width: 100px;
- display: inline-block;
-}
-
-.form-btn {
- display: inline-block;
-}
-
-.form-container form {
- max-width: 300px;
- padding: 0 20px;
- position: absolute;
- top: 130px;
- transition: transform 1s;
-}
-
-form input {
- width: 100%;
- height: 30px;
- margin: 10px 0;
- padding: 0 10px;
- border: 1px solid #999;
-}
-
-form .btn {
- width: 100%;
- border: none;
- cursor: pointer;
- margin: 10px 0;
-}
-
-form .btn:focus {
- outline: none;
- /*focus use when when click on button then border show but outline ::none hide the borderoutlint */
-}
-
-#LoginForm {
- left: -300px;
-}
-
-#RegForm {
- left: 0;
-}
-
-#LoginForm .input-field,
-#RegForm .input-field {
- padding: 10px 5px;
- margin: 15px 0;
- border: none;
- border-bottom: 2px solid #ff523b;
- font-size: 16px;
-}
-
-form a {
- font-size: 12px;
-}
-
-#Indicator {
- width: 100px;
- border: none;
- background: #ff523b;
- height: 3px;
- margin: 9px;
- transform: translateX(100px);
- transition: transform 1s;
-}
-
-
-/* --------media query for less than 600 screen size----- */
-
-@media only screen and (max-width: 600px) {
- .row {
- text-align: center;
- }
- .col-2,
- .col-3,
- .col-4 {
- flex-basis: 100%;
- }
- .col-2 p {
- margin: auto;
- }
- .single-product .row {
- text-align: left;
- }
- .single-product .col-2 {
- padding: 20px 0;
- /* border: 2px solid #2113e4; */
- }
- .single-product h1 {
- font-size: 26px;
- line-height: 32px;
- }
- .cartinfo p {
- /* display: none; */
- font-size: 0.9rem;
- }
-}
-
-
-/* --------- Scroll Bar ---------- */
-
-
-/*
-::-webkit-scrollbar {
- width: 10px;
-}
-
-::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px rgb(102, 102, 102);
- border-radius: 8px;
-}
-
-::-webkit-scrollbar-thumb {
- background: #ff634e;
- border-radius: 9px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: #ff624d;
-}
-*/
-
-::-webkit-scrollbar {
- width: 12px;
- height: 18px;
-}
-
-::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px rgb(102, 102, 102);
- border-radius: 8px;
-}
-
-::-webkit-scrollbar-thumb {
- background: linear-gradient(transparent, #d6926a);
- border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: linear-gradient(transparent, #f33809);
-}
-
-
-/* --------Feature Categories Hover Zoom----- */
-
-.zoom {
- padding: 30px;
- transition: transform 150ms ease-out;
- margin: 0 auto;
- cursor: pointer;
-}
-
-.zoom:hover {
- -ms-transform: scale(1.05);
- -webkit-transform: scale(1.05);
- transform: scale(1.05);
-}
-
-
-/* --------Testimonial Heading----- */
-
-.testimoinial-heading {
- text-align: center;
- padding-bottom: 10px;
-}
-
-.effects {
- position: relative;
- color: #000;
-}
-
-.effects::before {
- content: '';
- position: absolute;
- width: 100%;
- height: 4px;
- border-radius: 4px;
- background-color: #18272f;
- bottom: 0;
- left: 0;
- transform-origin: right;
- transform: scaleX(0);
- transition: transform 0.3s ease-in-out;
-}
-
-.effects:hover::before {
- transform-origin: left;
- transform: scaleX(1);
-}
-
-
-/* HOVER ANIMATION */
-
-
-/* #box:hover {
- transform: scale(1.3);
- z-index: 2;
-} */
-
-
-/* .glassBox {
- width: 100%;
- height: 400px;
- max-width: 300px;
- border-radius: 5px;
- background: rgba(255, 255, 255, 0.05);
- -webkit-backdrop-filter: blur(2px);
- backdrop-filter: blur(2px);
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-right-color: rgba(255, 255, 255, 0.1);
- border-bottom-color: rgba(255, 255, 255, 0.1);
- box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
- padding: 15px;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
- .glassBox, .glassBox * {
- box-sizing: border-box;
- transition: 400ms;
- }
- .glassBox__imgBox img {
- display: block;
- width: 100%;
- height: auto;
- }
- .glassBox__title {
- text-align: center;
- margin-top: 15px;
- color: #FFF;
- font-size: 20px;
- font-weight: 400;
- font-family: "Lato";
- }
- .glassBox__content {
- position: absolute;
- right: 15px;
- bottom: 15px;
- left: 15px;
- text-align: center;
- color: #FFF;
- font-size: 14px;
- font-family: "Lato";
- letter-spacing: 0.1em;
- opacity: 0;
- } */
-
-.glassBox__imgBox:hover {
- transform: scale(1.3);
- z-index: 2;
-}
-
-
-/* HOVER EFFECT */
-
-#box:hover {
- /* transform: scale(1.025); */
- border-radius: 5px;
- box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
- z-index: 2;
- transition: all 250ms;
-}
-
-.zoomForImage {
- border-radius: 3px;
-}
-
-
-/* THEME BUTTON */
-
-.toggle {
- width: 40px;
- height: 22px;
- margin-left: 25px;
- background-color: whitesmoke;
- border-radius: 30px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- position: relative;
-}
-
-.toggle-icon {
- color: goldenrod;
-}
-
-.toggle-ball {
- width: 18px;
- height: 18px;
- background-color: black;
- position: absolute;
- right: 2px;
- border-radius: 50%;
- cursor: pointer;
-}
-
-.header.active {
- background-color: #000;
-}
-
-.container.active {
- background-color: #000;
-}
-
-.navbar.active {
- background-color: #000;
- color: white;
-}
-
-.menu-icon.active {
- color: white;
-}
-
-.row.active {
- background-color: #000;
- color: white;
-}
-
-body.active {
- background-color: #000;
-}
-
-.toggle.active {
- background-color: #000;
-}
-
-.toggle-ball.active {
- background-color: white;
- transform: translateX(-20px);
-}
-
-/* change color of navbar heading to white on toggle */
-
-#MenuItems.active > li > a {
- color: white;
-}
-
-/* change color of contact page heading to white on toggle */
-
-.form-title.active {
- color: white;
-}
-
-/* cart image in dark mode */
-
-.cart-image.bgm-change {
- background-color: white;
- filter: invert(100%);
-}
-
-
-/*footer image mouse style to pointer*/
-
-.footer-img {
- cursor: pointer;
-}
-
-
-/* usefull links */
-
-.useful-links:hover {
- border-bottom: #fff 1px solid;
-}
-
-
-/* toast style */
-
-#toast {
- visibility: hidden;
- min-width: 240px;
- position: fixed;
- z-index: 1;
- left: 50%;
- transform: translate(-50%, 0);
- bottom: 5%;
- background-color: #333;
- color: #fff;
- text-align: center;
- border-radius: 2px;
- padding: 16px;
-}
-
-#toast.showToast {
- visibility: visible;
- -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
- animation: fadein 0.5s, fadeout 0.5s 2.5s;
-}
-
-
-/* Animations to fade the toast in and out */
-
-@-webkit-keyframes fadein {
- from {
- bottom: 0;
- opacity: 0;
- }
- to {
- bottom: 5%;
- opacity: 1;
- }
-}
-
-@keyframes fadein {
- from {
- bottom: 0;
- opacity: 0;
- }
- to {
- bottom: 5%;
- opacity: 1;
- }
-}
-
-@-webkit-keyframes fadeout {
- from {
- bottom: 5%;
- opacity: 1;
- }
- to {
- bottom: 0;
- opacity: 0;
- }
-}
-
-@keyframes fadeout {
- from {
- bottom: 5%;
- opacity: 1;
- }
- to {
- bottom: 0;
- opacity: 0;
- }
-}
-
-.useful-links,
-.socialbtns {
- color: #D3D3D3;
-}
-
-.btn-quantity {
- padding: 2px 12px;
- font-size: 24px;
- border-radius: 5%;
- cursor: pointer;
- background-color: #ff523b;
- color: #fff;
- margin-left: -10px;
- border: 1px solid black;
-}
-.white
-{
- color: #ff523b;
-}
+
+
+
+
+
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+
+
+.socialbtns-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+}
+
+.socialbtns-wrapper div {
+ width: 100%;
+ margin-left: 30%;
+}
+
+.socialbtns-wrapper div ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 80%;
+}
+
+.socialbtns-wrapper div ul li {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 0;
+ padding: 3px;
+ cursor: pointer;
+ list-style: none outside none;
+}
+
+.socialbtns-wrapper div ul li a {
+ margin-right: 10px;
+}
+
+.socialbtns .fa {
+ /*width: 40px;*/
+ /*height: 36px;*/
+ font-size: 15px;
+ color: black;
+ background-color: #fff;
+ border: 1px solid #000;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -o-border-radius: 20px;
+}
+
+.socialbtns .fa:hover {
+ color: #fff;
+ background-color: #000;
+ border: 1px solid #000;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+}
+
+.navbar {
+ display: flex;
+ align-items: center;
+ padding: 20px 5px;
+}
+
+nav {
+ flex: 1;
+ text-align: right;
+}
+
+nav li {
+ display: inline-block;
+ position: relative;
+ color: #ff523b;
+}
+
+nav li:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #ff523b;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+nav li:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+nav ul {
+ display: inline-block;
+ list-style-type: none;
+}
+
+nav ul li {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+a {
+ text-decoration: none;
+ color: #555;
+}
+
+p {
+ color: #555;
+}
+
+.container {
+ /* border: 2px solid red; */
+ max-width: 1300px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.row {
+ display: flex;
+ /* border: 2px solid blue; */
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+/* scroll-up button starts */
+#btnScrollToTop {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: #ff523b;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ color: #FFFFFF;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ z-index: 1;
+}
+
+#btnScrollToTop:hover{
+ width: 52px;
+ height: 52px;
+ margin: 2px;
+ background: #b41919;
+}
+
+#btnScrollToTop:active{
+ background: rgb(12, 214, 12);
+}
+
+/* scroll-up button ends */
+
+.col-2 {
+ flex-basis: 50%;
+ min-width: 280px;
+}
+
+.col-2 img {
+ max-width: 100%;
+ padding: 50px 0;
+}
+
+.col-2 h1 {
+ font-size: 50px;
+ line-height: 60px;
+ margin: 25px 0;
+}
+
+.btn {
+ display: inline-block;
+ background-color: #ff523b;
+ color: #fff;
+ padding: 8px 30px;
+ margin: 30px 0px;
+ border-radius: 30px;
+ transition: background 0.5s;
+ border: #ff523b;
+ cursor: pointer;
+ /* border:2px solid black; */
+}
+
+.btn:hover {
+ background: #563434;
+}
+
+.header {
+ background: radial-gradient(#fff, #ffd6d6);
+ /* radial for gradiancy on basis to radius
+linear for gradiancy on basis to vertically */
+}
+
+.header .row {
+ margin: 70px;
+ margin-top: 0;
+}
+
+.categories {
+ margin: 70px 0;
+}
+
+.col-3 {
+ flex-basis: 30%;
+ min-width: 250px;
+ margin-bottom: 30px;
+}
+
+.col-3 img {
+ width: 100%;
+ border-radius: 35px;
+}
+
+.small-container {
+ max-width: 1080px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.col-4 {
+ flex-basis: 25%;
+ padding: 10px;
+ min-width: 200px;
+ margin-bottom: 50px;
+ transition: transform 0.5s;
+ cursor: pointer;
+}
+
+.col-4 img {
+ width: 100%;
+}
+
+.title {
+ text-align: center;
+ margin: 0 auto 80px;
+ position: relative;
+ line-height: 60px;
+ color: #555;
+}
+
+.title::after {
+ content: '';
+ background: #ff523b;
+ width: 80px;
+ height: 5px;
+ border-radius: 5px;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+h4 {
+ color: #555;
+ font-weight: normal;
+}
+
+.col-4 p {
+ font-size: 14px;
+}
+
+.rating .fa {
+ color: #ff523b;
+}
+
+.col-4:hover {
+ transform: translateY(20px);
+}
+
+/*------ offer------ */
+.offer {
+ background: radial-gradient(#fff, #ffd6d6);
+ margin-top: 80px;
+ padding: 30px 0;
+}
+
+.col-2 .offer-img {
+ padding: 50px;
+}
+
+small {
+ color: #555;
+}
+
+/* .testmonial */
+.testimonial {
+ padding-top: 100px;
+}
+
+.testimonial .col-3 {
+ text-align: center;
+ padding: 40px 20px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ cursor: pointer;
+ transition: transform 0.5s;
+}
+
+.testimonial .col-3 img {
+ width: 50px;
+ margin-top: 20px;
+ border-radius: 50%;
+}
+
+.testimonial .col-3:hover {
+ transform: translateY(-20px);
+}
+
+.fa.fa-quote-left {
+ font-size: 34px;
+ color: #ff523b;
+}
+
+.col-3 p {
+ font-size: 12px;
+ margin: 12px 0;
+ color: #777;
+}
+
+.testimonial .col-3 h3 {
+ font-weight: 600;
+ color: #555;
+ font-size: 16px;
+}
+
+/* ------------brands ----------*/
+.brands {
+ margin: 100px auto;
+}
+
+.col-5 {
+ width: 160px;
+ /* border: 2px solid red; */
+}
+
+.col-5 img {
+ width: 100%;
+ cursor: pointer;
+ filter: grayscale(100);
+}
+
+.col-5 img:hover {
+ filter: grayscale(0);
+}
+
+/* ----------footer ------------- */
+.footer {
+ background: #000;
+ color: #8a8a8a;
+ font-size: 14px;
+ padding: 60px 0px 20px;
+}
+
+.footer p {
+ color: #8a8a8a;
+}
+
+.footer h3 {
+ color: #fff;
+ margin-bottom: 20px;
+}
+
+.footer-col-1,
+.footer-col-2,
+.footer-col-3,
+.footer-col-4 {
+ min-width: 250px;
+ margin-bottom: 20px;
+}
+
+.footer-col-1 {
+ flex-basis: 30%;
+}
+
+.footer-col-2 {
+ flex: 1;
+ /*it uses all the available space */
+ text-align: center;
+}
+
+.footer-col-2 img {
+ width: 180px;
+ margin-bottom: 20px;
+}
+
+.footer-col-3,
+.footer-col-4 {
+ flex-basis: 10%;
+ text-align: center;
+ vertical-align: center;
+}
+
+ul {
+ list-style: none;
+}
+
+.app-logo {
+ margin-top: 20px;
+}
+
+.app-logo img {
+ width: 140px;
+}
+
+.footer hr {
+ border: none;
+ background: #b5b5b5;
+ height: 1px;
+ margin: 20px 0;
+}
+
+.copyright {
+ text-align: center;
+}
+
+.menu-icon {
+ width: 28px;
+ margin-left: 10px;
+ display: none;
+}
+
+/* --------media query for menu----- */
+
+@media only screen and (max-width: 800px) {
+ nav ul {
+ background: rgba(217, 70, 70, 0.9);
+ width: 100%;
+ overflow: hidden;
+ transition: max-height 1.5s;
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ position: absolute;
+ top: 72px;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+ }
+
+ nav ul li {
+ display: block;
+ margin: 10px 50px 10px 0;
+ }
+
+ nav ul li a {
+ color: #fff;
+ }
+
+ .menu-icon {
+ display: block;
+ cursor: pointer;
+ }
+}
+
+/* --------all products page------- */
+.row.row-2 {
+ justify-content: space-between;
+
+ margin: 100px auto 50px;
+}
+
+select {
+ border: 1px solid #ff523b;
+ padding: 5px;
+ cursor: pointer;
+}
+
+select:focus {
+ outline: none;
+}
+
+.page-btn {
+ margin: 0 auto 80px;
+}
+
+.page-btn span {
+ display: inline-block;
+ border: 1px solid #ff523b;
+ margin-left: 10px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ cursor: pointer;
+ border-radius: 20%;
+}
+
+.page-btn span:hover {
+ background: #ff523b;
+ color: #fff;
+}
+
+/* ------single product details-------- */
+.single-product {
+ margin-top: 80px;
+ /* border: 1px solid #3bffbe; */
+}
+
+.single-product .col-2 img {
+ /* border: 1px solid #131111; */
+ padding: 0;
+}
+
+.single-product .col-2 {
+ padding: 20px;
+ /* border: 1px solid #ff3bc4; */
+}
+
+.single-product h4 {
+ /* border: 1px solid #131111; */
+ margin: 20px 0;
+ /* ankit */
+ font-weight: bold;
+ font-size: 20px;
+ /* ankit */
+}
+
+.single-product select {
+ display: block;
+ margin-top: 20px;
+ padding: 10px;
+}
+
+.single-product input {
+ width: 50px;
+ height: 40px;
+ padding-left: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ border: 1px solid #ff523b;
+}
+
+input:focus {
+ outline: none;
+ /* same color after click ff523b */
+}
+
+.single-product h3 i {
+ color: #ff523b;
+ margin-left: 10px;
+}
+
+.small-img-row {
+ /* width: 70px; */
+ display: flex;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+ /* flex-direction: row; */
+ /* border: 1px solid #1915e4; */
+}
+
+.small-img-col {
+ flex-basis: 24%;
+ cursor: pointer;
+}
+.viewMore--btn{
+ transition: border 150ms ease-in-out;
+}
+.viewMore--btn:hover{
+ /* text-decoration: underline; */
+ border-width: 0 0 1.5px 0;
+ border-style: solid;
+}
+/* ---------cart item details---------- */
+.cart-page {
+ margin: 80px auto;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ /*all border in one border*/
+}
+
+.cartinfo {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+th {
+ text-align: left;
+ padding: 5px;
+ color: #fff;
+ background-color: #ff523b;
+ font-weight: normal;
+}
+
+td {
+ padding: 10px 5px;
+}
+
+td input {
+ width: 45px;
+ height: 30px;
+ padding: 5px;
+}
+
+td .remove-btn {
+ color: #ff523b;
+ font-size: 12px;
+ cursor: pointer;
+ transition: color 250ms ease-in-out;
+}
+td .remove-btn:hover {
+ color: #b3220f;
+}
+
+td img {
+ width: 80px;
+ height: 80px;
+ margin-left: 10px;
+}
+
+.total-price {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.total-price table {
+ border-top: 3px solid #ff523b;
+ width: 100%;
+ max-width: 400px;
+}
+
+td:last-child {
+ text-align: right;
+}
+
+th:last-child {
+ text-align: right;
+}
+
+/* ----------------Contact-Page ---------- */
+
+.contact-form-container {
+ width: 60%;
+ margin: 20px auto;
+}
+.contact-form-container h1 {
+ text-align: center;
+}
+.contact-form input {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ padding: 20px 10px;
+}
+.contact-form {
+ margin-top: 20px;
+}
+.textarea-container textarea {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ margin: 10px 0;
+ width: 100%;
+ height: 150px;
+ padding: 10px 10px;
+}
+.textarea-container textarea:focus {
+ outline: none;
+}
+
+.submit-btn {
+ text-align: center;
+}
+.submit-btn button {
+ padding: 5px 8px;
+ font-size: 16px;
+ cursor: pointer;
+ font-family: 'Poppins', sans-serif;
+ width: 70%;
+ color: white;
+ background-color: #ff523b;
+ border: none;
+ border-radius: 20px;
+}
+.submit-btn button:hover {
+ background-color: #563434;
+}
+
+/* ----------------Account-Page ---------- */
+.account-page {
+ padding: 50px 0;
+ background: radial-gradient(#fff, #ffd6d6);
+}
+
+.form-container {
+ background: #fff;
+ width: 300px;
+ height: 400px;
+ margin: auto;
+ padding: 20px 0;
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ /* to hide one form login wala */
+}
+
+.form-container span {
+ font-weight: bold;
+ padding: 0 10px;
+ color: #555;
+ cursor: pointer;
+ width: 100px;
+ display: inline-block;
+}
+
+.form-btn {
+ display: inline-block;
+}
+
+.form-container form {
+ max-width: 300px;
+ padding: 0 20px;
+ position: absolute;
+ top: 130px;
+ transition: transform 1s;
+}
+
+form input {
+ width: 100%;
+ height: 30px;
+ margin: 10px 0;
+ padding: 0 10px;
+ border: 1px solid #999;
+}
+
+form .btn {
+ width: 100%;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0;
+}
+
+form .btn:focus {
+ outline: none;
+ /*focus use when when click on button then border show but outline ::none hide the borderoutlint */
+}
+
+#LoginForm {
+ left: -300px;
+}
+
+#RegForm {
+ left: 0;
+}
+
+#LoginForm .input-field,
+#RegForm .input-field {
+ padding: 10px 5px;
+ margin: 15px 0;
+ border: none;
+ border-bottom: 2px solid #ff523b;
+ font-size: 16px;
+}
+
+form a {
+ font-size: 12px;
+}
+
+#Indicator {
+ width: 100px;
+ border: none;
+ background: #ff523b;
+ height: 3px;
+ margin: 9px;
+ transform: translateX(100px);
+ transition: transform 1s;
+}
+
+/* --------media query for less than 600 screen size----- */
+@media only screen and (max-width: 600px) {
+ .row {
+ text-align: center;
+ }
+
+ .col-2,
+ .col-3,
+ .col-4 {
+ flex-basis: 100%;
+ }
+
+ .col-2 p {
+ margin: auto;
+ }
+
+ .single-product .row {
+ text-align: left;
+ }
+
+ .single-product .col-2 {
+ padding: 20px 0;
+ /* border: 2px solid #2113e4; */
+ }
+
+ .single-product h1 {
+ font-size: 26px;
+ line-height: 32px;
+ }
+
+ .cartinfo p {
+ /* display: none; */
+ font-size: 0.9rem;
+ }
+}
+
+/* --------- Scroll Bar ---------- */
+
+/*
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #ff634e;
+ border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #ff624d;
+}
+*/
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 18px;
+}
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(transparent, #d6926a);
+ border-radius: 6px;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(transparent, #f33809);
+}
+
+/* --------Feature Categories Hover Zoom----- */
+.zoom {
+ padding: 30px;
+ transition: transform 150ms ease-out;
+ margin: 0 auto;
+ cursor: pointer;
+}
+.zoom:hover {
+ -ms-transform: scale(1.05);
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+/* --------Testimonial Heading----- */
+.testimoinial-heading {
+ text-align: center;
+ padding-bottom: 10px;
+}
+.effects {
+ position: relative;
+ color: #000;
+}
+
+.effects::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #18272f;
+ bottom: 0;
+ left: 0;
+ transform-origin: right;
+ transform: scaleX(0);
+ transition: transform 0.3s ease-in-out;
+}
+
+.effects:hover::before {
+ transform-origin: left;
+ transform: scaleX(1);
+}
+
+
+/* HOVER ANIMATION */
+
+/* #box:hover {
+ transform: scale(1.3);
+ z-index: 2;
+} */
+
+/* .glassBox {
+ width: 100%;
+ height: 400px;
+ max-width: 300px;
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.05);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-right-color: rgba(255, 255, 255, 0.1);
+ border-bottom-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .glassBox, .glassBox * {
+ box-sizing: border-box;
+ transition: 400ms;
+ }
+ .glassBox__imgBox img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+ .glassBox__title {
+ text-align: center;
+ margin-top: 15px;
+ color: #FFF;
+ font-size: 20px;
+ font-weight: 400;
+ font-family: "Lato";
+ }
+ .glassBox__content {
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+ left: 15px;
+ text-align: center;
+ color: #FFF;
+ font-size: 14px;
+ font-family: "Lato";
+ letter-spacing: 0.1em;
+ opacity: 0;
+ } */
+
+.glassBox__imgBox:hover {
+ transform: scale(1.3);
+ z-index: 2;
+}
+
+/* HOVER EFFECT */
+#box:hover {
+ /* transform: scale(1.025); */
+ border-radius: 5px;
+ box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ transition: all 250ms;
+}
+.zoomForImage{
+ border-radius: 3px;
+}
+/* THEME BUTTON */
+
+
+.toggle{
+ width: 40px;
+ height: 22px;
+ margin-left: 25px;
+ background-color: whitesmoke;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+
+}
+
+
+.toggle-icon{
+ color: goldenrod;
+}
+
+
+
+.toggle-ball{
+
+ width: 18px;
+ height: 18px;
+ background-color: black;
+ position: absolute;
+ right: 1px;
+ border-radius: 50%;
+ cursor: pointer;
+
+}
+
+
+.header.active{
+ background-color: #000;
+}
+.container.active{
+ background-color: #000;
+}
+
+.navbar.active{
+ background-color: #000;
+ color: white;
+
+}
+
+
+.menu-icon.active{
+ color: white;
+}
+
+
+.row.active{
+ background-color: #000;
+ color: white;
+}
+
+
+body.active{
+ background-color: #000;
+}
+
+
+.toggle.active{
+ background-color: #000;
+}
+
+.toggle-ball.active{
+ background-color: white;
+ transform: translateX(-20px);
+
+
+
+
+}
+
+.cartIcon.active{
+ color: white;
+}
+.page-btn.active{
+ color: white;
+}
+
+/*footer image mouse style to pointer*/
+.footer-img{
+ cursor: pointer;
+}
+/* usefull links */
+.useful-links:hover{
+ border-bottom: #fff 1px solid;
+}
+
+.useful-links,.socialbtns{
+ color:#D3D3D3;
+}
+
+
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+.socialbtns-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+}
+
+.socialbtns-wrapper div {
+ width: 100%;
+ margin-left: 30%;
+}
+
+.socialbtns-wrapper div ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 80%;
+}
+
+.socialbtns-wrapper div ul li {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 0;
+ padding: 3px;
+ cursor: pointer;
+ list-style: none outside none;
+}
+
+.socialbtns-wrapper div ul li a {
+ margin-right: 10px;
+}
+
+.socialbtns .fa {
+ /*width: 40px;*/
+ /*height: 36px;*/
+ font-size: 15px;
+ color: black;
+ background-color: #fff;
+ border: 1px solid #000;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -o-border-radius: 20px;
+}
+
+.socialbtns .fa:hover {
+ color: #fff;
+ background-color: #000;
+ border: 1px solid #000;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+}
+
+.navbar {
+ display: flex;
+ align-items: center;
+ padding: 20px 5px;
+}
+
+nav {
+ flex: 1;
+ text-align: right;
+}
+
+nav li {
+ display: inline-block;
+ position: relative;
+ color: #ff523b;
+}
+
+nav li:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #ff523b;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+nav li:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+nav ul {
+ display: inline-block;
+ list-style-type: none;
+}
+
+nav ul li {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+a {
+ text-decoration: none;
+ color: #555;
+}
+
+p {
+ color: #555;
+}
+
+.container {
+ /* border: 2px solid red; */
+ max-width: 1300px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.row {
+ display: flex;
+ /* border: 2px solid blue; */
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+
+/* scroll-up button starts */
+
+#btnScrollToTop {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: #ff523b;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ color: #FFFFFF;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ z-index: 1;
+}
+
+#btnScrollToTop:hover {
+ width: 52px;
+ height: 52px;
+ margin: 2px;
+ background: #b41919;
+}
+
+#btnScrollToTop:active {
+ background: rgb(12, 214, 12);
+}
+
+
+/* scroll-up button ends */
+
+.col-2 {
+ flex-basis: 50%;
+ min-width: 280px;
+}
+
+.col-2 img {
+ max-width: 100%;
+ padding: 50px 0;
+}
+
+.col-2 h1 {
+ font-size: 50px;
+ line-height: 60px;
+ margin: 25px 0;
+}
+
+.btn {
+ display: inline-block;
+ background-color: #ff523b;
+ color: #fff;
+ padding: 8px 30px;
+ margin: 30px 0px;
+ border-radius: 30px;
+ transition: background 0.5s;
+ border: #ff523b;
+ cursor: pointer;
+ /* border:2px solid black; */
+}
+
+.btn:hover {
+ background: #563434;
+}
+
+.header {
+ background: radial-gradient(#fff, #ffd6d6);
+ /* radial for gradiancy on basis to radius
+linear for gradiancy on basis to vertically */
+}
+
+.header .row {
+ margin: 70px;
+ margin-top: 0;
+}
+
+.categories {
+ margin: 70px 0;
+}
+
+.col-3 {
+ flex-basis: 30%;
+ min-width: 250px;
+ margin-bottom: 30px;
+}
+
+.col-3 img {
+ width: 100%;
+ border-radius: 35px;
+}
+
+.small-container {
+ max-width: 1080px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.col-4 {
+ flex-basis: 25%;
+ padding: 10px;
+ min-width: 200px;
+ margin-bottom: 50px;
+ transition: transform 0.5s;
+ cursor: pointer;
+}
+
+.col-4 img {
+ width: 100%;
+}
+
+.title {
+ text-align: center;
+ margin: 0 auto 80px;
+ position: relative;
+ line-height: 60px;
+ color: #555;
+}
+
+.title::after {
+ content: '';
+ background: #ff523b;
+ width: 80px;
+ height: 5px;
+ border-radius: 5px;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+h4 {
+ color: #555;
+ font-weight: normal;
+}
+
+.col-4 p {
+ font-size: 14px;
+}
+
+.rating .fa {
+ color: #ff523b;
+}
+
+.col-4:hover {
+ transform: translateY(20px);
+}
+
+
+/*------ offer------ */
+
+.offer {
+ background: radial-gradient(#fff, #ffd6d6);
+ margin-top: 80px;
+ padding: 30px 0;
+}
+
+.col-2 .offer-img {
+ padding: 50px;
+}
+
+small {
+ color: #555;
+}
+
+
+/* .testmonial */
+
+.testimonial {
+ padding-top: 100px;
+}
+
+.testimonial .col-3 {
+ text-align: center;
+ padding: 40px 20px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ cursor: pointer;
+ transition: transform 0.5s;
+}
+
+.testimonial .col-3 img {
+ width: 50px;
+ margin-top: 20px;
+ border-radius: 50%;
+}
+
+.testimonial .col-3:hover {
+ transform: translateY(-20px);
+}
+
+.fa.fa-quote-left {
+ font-size: 34px;
+ color: #ff523b;
+}
+
+.col-3 p {
+ font-size: 12px;
+ margin: 12px 0;
+ color: #777;
+}
+
+.testimonial .col-3 h3 {
+ font-weight: 600;
+ color: #555;
+ font-size: 16px;
+}
+
+
+/* ------------brands ----------*/
+
+.brands {
+ margin: 100px auto;
+}
+
+.col-5 {
+ width: 160px;
+ /* border: 2px solid red; */
+}
+
+.col-5 img {
+ width: 100%;
+ cursor: pointer;
+ filter: grayscale(100);
+}
+
+.col-5 img:hover {
+ filter: grayscale(0);
+}
+
+
+/* ----------footer ------------- */
+
+.footer {
+ background: #000;
+ color: #8a8a8a;
+ font-size: 14px;
+ padding: 60px 0px 20px;
+}
+
+.footer p {
+ color: #8a8a8a;
+}
+
+.footer h3 {
+ color: #fff;
+ margin-bottom: 20px;
+}
+
+.footer-col-1,
+.footer-col-2,
+.footer-col-3,
+.footer-col-4 {
+ min-width: 250px;
+ margin-bottom: 20px;
+}
+
+.footer-col-1 {
+ flex-basis: 30%;
+}
+
+.footer-col-2 {
+ flex: 1;
+ /*it uses all the available space */
+ text-align: center;
+}
+
+.footer-col-2 img {
+ width: 180px;
+ margin-bottom: 20px;
+}
+
+.footer-col-3,
+.footer-col-4 {
+ flex-basis: 10%;
+ text-align: center;
+ vertical-align: center;
+}
+
+ul {
+ list-style: none;
+}
+
+.app-logo {
+ margin-top: 20px;
+}
+
+.app-logo img {
+ width: 140px;
+}
+
+.footer hr {
+ border: none;
+ background: #b5b5b5;
+ height: 1px;
+ margin: 20px 0;
+}
+
+.copyright {
+ text-align: center;
+}
+
+.menu-icon {
+ width: 28px;
+ margin-left: 10px;
+ display: none;
+}
+
+
+/* --------media query for menu----- */
+
+@media only screen and (max-width: 800px) {
+ nav ul {
+ background: rgba(217, 70, 70, 0.9);
+ width: 100%;
+ overflow: hidden;
+ transition: max-height 1.5s;
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ position: absolute;
+ top: 72px;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+ }
+ nav ul li {
+ display: block;
+ margin: 10px 50px 10px 0;
+ }
+ nav ul li a {
+ color: #fff;
+ }
+ .menu-icon {
+ display: block;
+ cursor: pointer;
+ }
+}
+
+
+/* --------all products page------- */
+
+.row.row-2 {
+ justify-content: space-between;
+ margin: 100px auto 50px;
+}
+
+select {
+ border: 1px solid #ff523b;
+ padding: 5px;
+ cursor: pointer;
+}
+
+select:focus {
+ outline: none;
+}
+
+.page-btn {
+ margin: 0 auto 80px;
+}
+
+.page-btn span {
+ display: inline-block;
+ border: 1px solid #ff523b;
+ margin-left: 10px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ cursor: pointer;
+ border-radius: 20%;
+}
+
+.page-btn span:hover {
+ background: #ff523b;
+ color: #fff;
+}
+
+
+/* ------single product details-------- */
+
+.single-product {
+ margin-top: 80px;
+ /* border: 1px solid #3bffbe; */
+}
+
+.single-product .col-2 img {
+ /* border: 1px solid #131111; */
+ padding: 0;
+}
+
+.single-product .col-2 {
+ padding: 20px;
+ /* border: 1px solid #ff3bc4; */
+}
+
+.single-product h4 {
+ /* border: 1px solid #131111; */
+ margin: 20px 0;
+ /* ankit */
+ font-weight: bold;
+ font-size: 20px;
+ /* ankit */
+}
+
+.single-product select {
+ display: block;
+ margin-top: 20px;
+ padding: 10px;
+}
+
+.single-product input {
+ width: 50px;
+ height: 40px;
+ padding-left: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ border: 1px solid #ff523b;
+}
+
+input:focus {
+ outline: none;
+ /* same color after click ff523b */
+}
+
+.single-product h3 i {
+ color: #ff523b;
+ margin-left: 10px;
+}
+
+.small-img-row {
+ /* width: 70px; */
+ display: flex;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+ /* flex-direction: row; */
+ /* border: 1px solid #1915e4; */
+}
+
+.small-img-col {
+ flex-basis: 24%;
+ cursor: pointer;
+}
+
+.viewMore--btn {
+ transition: border 150ms ease-in-out;
+}
+
+.viewMore--btn:hover {
+ /* text-decoration: underline; */
+ border-width: 0 0 1.5px 0;
+ border-style: solid;
+}
+
+
+/* ---------cart item details---------- */
+
+.cart-page {
+ margin: 80px auto;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ /*all border in one border*/
+}
+
+.cartinfo {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+th {
+ text-align: left;
+ padding: 5px;
+ color: #fff;
+ background-color: #ff523b;
+ font-weight: normal;
+}
+
+td {
+ padding: 10px 5px;
+}
+
+td input {
+ width: 45px;
+ height: 30px;
+ padding: 5px;
+}
+
+td .remove-btn {
+ color: #ff523b;
+ font-size: 12px;
+ cursor: pointer;
+ transition: color 250ms ease-in-out;
+}
+
+td .remove-btn:hover {
+ color: #b3220f;
+}
+
+td img {
+ width: 80px;
+ height: 80px;
+ margin-left: 10px;
+}
+
+.total-price {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.total-price table {
+ border-top: 3px solid #ff523b;
+ width: 100%;
+ max-width: 400px;
+}
+
+td:last-child {
+ text-align: right;
+}
+
+th:last-child {
+ text-align: right;
+}
+
+
+/* ----------------Contact-Page ---------- */
+
+.contact-form-container {
+ width: 60%;
+ margin: 20px auto;
+}
+
+.contact-form-container h1 {
+ text-align: center;
+}
+
+.contact-form input {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ padding: 20px 10px;
+}
+
+.contact-form {
+ margin-top: 20px;
+}
+
+.textarea-container textarea {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ margin: 10px 0;
+ width: 100%;
+ height: 150px;
+ padding: 10px 10px;
+}
+
+.textarea-container textarea:focus {
+ outline: none;
+}
+
+.submit-btn {
+ text-align: center;
+}
+
+.submit-btn button {
+ padding: 5px 8px;
+ font-size: 16px;
+ cursor: pointer;
+ font-family: 'Poppins', sans-serif;
+ width: 70%;
+ color: white;
+ background-color: #ff523b;
+ border: none;
+ border-radius: 20px;
+}
+
+.submit-btn button:hover {
+ background-color: #563434;
+}
+
+
+/* ----------------Account-Page ---------- */
+
+.account-page {
+ padding: 50px 0;
+ background: radial-gradient(#fff, #ffd6d6);
+}
+
+.form-container {
+ background: #fff;
+ width: 300px;
+ height: 400px;
+ margin: auto;
+ padding: 20px 0;
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ /* to hide one form login wala */
+}
+
+.form-container span {
+ font-weight: bold;
+ padding: 0 10px;
+ color: #555;
+ cursor: pointer;
+ width: 100px;
+ display: inline-block;
+}
+
+.form-btn {
+ display: inline-block;
+}
+
+.form-container form {
+ max-width: 300px;
+ padding: 0 20px;
+ position: absolute;
+ top: 130px;
+ transition: transform 1s;
+}
+
+form input {
+ width: 100%;
+ height: 30px;
+ margin: 10px 0;
+ padding: 0 10px;
+ border: 1px solid #999;
+}
+
+form .btn {
+ width: 100%;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0;
+}
+
+form .btn:focus {
+ outline: none;
+ /*focus use when when click on button then border show but outline ::none hide the borderoutlint */
+}
+
+#LoginForm {
+ left: -300px;
+}
+
+#RegForm {
+ left: 0;
+}
+
+#LoginForm .input-field,
+#RegForm .input-field {
+ padding: 10px 5px;
+ margin: 15px 0;
+ border: none;
+ border-bottom: 2px solid #ff523b;
+ font-size: 16px;
+}
+
+form a {
+ font-size: 12px;
+}
+
+#Indicator {
+ width: 100px;
+ border: none;
+ background: #ff523b;
+ height: 3px;
+ margin: 9px;
+ transform: translateX(100px);
+ transition: transform 1s;
+}
+
+
+/* --------media query for less than 600 screen size----- */
+
+@media only screen and (max-width: 600px) {
+ .row {
+ text-align: center;
+ }
+ .col-2,
+ .col-3,
+ .col-4 {
+ flex-basis: 100%;
+ }
+ .col-2 p {
+ margin: auto;
+ }
+ .single-product .row {
+ text-align: left;
+ }
+ .single-product .col-2 {
+ padding: 20px 0;
+ /* border: 2px solid #2113e4; */
+ }
+ .single-product h1 {
+ font-size: 26px;
+ line-height: 32px;
+ }
+ .cartinfo p {
+ /* display: none; */
+ font-size: 0.9rem;
+ }
+}
+
+
+/* --------- Scroll Bar ---------- */
+
+
+/*
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #ff634e;
+ border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #ff624d;
+}
+*/
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 18px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(transparent, #d6926a);
+ border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(transparent, #f33809);
+}
+
+
+/* --------Feature Categories Hover Zoom----- */
+
+.zoom {
+ padding: 30px;
+ transition: transform 150ms ease-out;
+ margin: 0 auto;
+ cursor: pointer;
+}
+
+.zoom:hover {
+ -ms-transform: scale(1.05);
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+
+
+/* --------Testimonial Heading----- */
+
+.testimoinial-heading {
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.effects {
+ position: relative;
+ color: #000;
+}
+
+.effects::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #18272f;
+ bottom: 0;
+ left: 0;
+ transform-origin: right;
+ transform: scaleX(0);
+ transition: transform 0.3s ease-in-out;
+}
+
+.effects:hover::before {
+ transform-origin: left;
+ transform: scaleX(1);
+}
+
+
+/* HOVER ANIMATION */
+
+
+/* #box:hover {
+ transform: scale(1.3);
+ z-index: 2;
+} */
+
+
+/* .glassBox {
+ width: 100%;
+ height: 400px;
+ max-width: 300px;
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.05);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-right-color: rgba(255, 255, 255, 0.1);
+ border-bottom-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .glassBox, .glassBox * {
+ box-sizing: border-box;
+ transition: 400ms;
+ }
+ .glassBox__imgBox img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+ .glassBox__title {
+ text-align: center;
+ margin-top: 15px;
+ color: #FFF;
+ font-size: 20px;
+ font-weight: 400;
+ font-family: "Lato";
+ }
+ .glassBox__content {
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+ left: 15px;
+ text-align: center;
+ color: #FFF;
+ font-size: 14px;
+ font-family: "Lato";
+ letter-spacing: 0.1em;
+ opacity: 0;
+ } */
+
+.glassBox__imgBox:hover {
+ transform: scale(1.3);
+ z-index: 2;
+}
+
+
+/* HOVER EFFECT */
+
+#box:hover {
+ /* transform: scale(1.025); */
+ border-radius: 5px;
+ box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ transition: all 250ms;
+}
+
+.zoomForImage {
+ border-radius: 3px;
+}
+
+
+/* THEME BUTTON */
+
+.toggle {
+ width: 40px;
+ height: 22px;
+ margin-left: 25px;
+ background-color: whitesmoke;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+}
+
+.toggle-icon {
+ color: goldenrod;
+}
+
+.toggle-ball {
+ width: 18px;
+ height: 18px;
+ background-color: black;
+ position: absolute;
+ right: 1px;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.header.active {
+ background-color: #000;
+}
+
+.container.active {
+ background-color: #000;
+}
+
+.navbar.active {
+ background-color: #000;
+ color: white;
+}
+
+.menu-icon.active {
+ color: white;
+}
+
+.row.active {
+ background-color: #000;
+ color: white;
+}
+
+body.active {
+ background-color: #000;
+}
+
+.toggle.active {
+ background-color: #000;
+}
+
+.toggle-ball.active {
+ background-color: white;
+ transform: translateX(-20px);
+}
+
+
+/*footer image mouse style to pointer*/
+
+.footer-img {
+ cursor: pointer;
+}
+
+
+/* usefull links */
+
+.useful-links:hover {
+ border-bottom: #fff 1px solid;
+}
+
+
+/* toast style */
+
+#toast {
+ visibility: hidden;
+ min-width: 240px;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ transform: translate(-50%, 0);
+ bottom: 5%;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+}
+
+#toast.showToast {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+
+/* Animations to fade the toast in and out */
+
+@-webkit-keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+.useful-links,
+.socialbtns {
+ color: #D3D3D3;
+}
+
+
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+.socialbtns-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+}
+
+.socialbtns-wrapper div {
+ width: 100%;
+ margin-left: 30%;
+}
+
+.socialbtns-wrapper div ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 80%;
+}
+
+.socialbtns-wrapper div ul li {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 0;
+ padding: 3px;
+ cursor: pointer;
+ list-style: none outside none;
+}
+
+.socialbtns-wrapper div ul li a {
+ margin-right: 10px;
+}
+
+.socialbtns .fa {
+ /*width: 40px;*/
+ /*height: 36px;*/
+ font-size: 15px;
+ color: black;
+ background-color: #fff;
+ border: 1px solid #000;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -o-border-radius: 20px;
+}
+
+.socialbtns .fa:hover {
+ color: #fff;
+ background-color: #000;
+ border: 1px solid #000;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+}
+
+.navbar {
+ display: flex;
+ align-items: center;
+ padding: 20px 5px;
+}
+
+nav {
+ flex: 1;
+ text-align: right;
+}
+
+nav li {
+ display: inline-block;
+ position: relative;
+ color: #ff523b;
+}
+
+nav li:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #ff523b;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+nav li:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+nav ul {
+ display: inline-block;
+ list-style-type: none;
+}
+
+nav ul li {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+a {
+ text-decoration: none;
+ color: #555;
+}
+
+p {
+ color: #555;
+}
+
+.container {
+ /* border: 2px solid red; */
+ max-width: 1300px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.row {
+ display: flex;
+ /* border: 2px solid blue; */
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+
+/* scroll-up button starts */
+
+#btnScrollToTop {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: #ff523b;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ color: #FFFFFF;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ z-index: 1;
+}
+
+#btnScrollToTop:hover {
+ width: 52px;
+ height: 52px;
+ margin: 2px;
+ background: #b41919;
+}
+
+#btnScrollToTop:active {
+ background: rgb(12, 214, 12);
+}
+
+
+/* scroll-up button ends */
+
+.col-2 {
+ flex-basis: 50%;
+ min-width: 280px;
+}
+
+.col-2 img {
+ max-width: 76%;
+ padding: 50px 0;
+}
+
+.col-2 h1 {
+ font-size: 50px;
+ line-height: 60px;
+ margin: 25px 0;
+}
+
+.btn {
+ display: inline-block;
+ background-color: #ff523b;
+ color: #fff;
+ padding: 8px 30px;
+ margin: 30px 60px;
+ border-radius: 30px;
+ transition: background 0.5s;
+ border: #ff523b;
+ cursor: pointer;
+ /* border:2px solid black; */
+}
+
+.btn:hover {
+ background: #563434;
+}
+
+.header {
+ background: radial-gradient(#fff, #ffd6d6);
+ /* radial for gradiancy on basis to radius
+linear for gradiancy on basis to vertically */
+}
+
+.header .row {
+ margin: 70px;
+ margin-top: 0;
+}
+
+.categories {
+ margin: 70px 0;
+}
+
+.col-3 {
+ flex-basis: 30%;
+ min-width: 250px;
+ margin-bottom: 30px;
+}
+
+.col-3 img {
+ width: 100%;
+ border-radius: 35px;
+}
+
+.small-container {
+ max-width: 1080px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.col-4 {
+ flex-basis: 25%;
+ padding: 10px;
+ min-width: 200px;
+ margin-bottom: 50px;
+ transition: transform 0.5s;
+ cursor: pointer;
+}
+
+.col-4 img {
+ width: 100%;
+}
+
+.title {
+ text-align: center;
+ margin: 0 auto 80px;
+ position: relative;
+ line-height: 60px;
+ color: #555;
+}
+
+.title::after {
+ content: '';
+ background: #ff523b;
+ width: 80px;
+ height: 5px;
+ border-radius: 5px;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+h4 {
+ color: #555;
+ font-weight: normal;
+}
+
+.col-4 p {
+ font-size: 14px;
+}
+
+.rating .fa {
+ color: #ff523b;
+}
+
+.col-4:hover {
+ transform: translateY(20px);
+}
+
+
+/*------ offer------ */
+
+.offer {
+ background: radial-gradient(#fff, #ffd6d6);
+ margin-top: 80px;
+ padding: 0;
+}
+
+.col-2 .offer-img {
+ padding: 50px;
+}
+
+small {
+ color: #555;
+}
+
+
+/* .testmonial */
+
+.testimonial {
+ padding-top: 100px;
+}
+
+.testimonial .col-3 {
+ text-align: center;
+ padding: 40px 20px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ cursor: pointer;
+ transition: transform 0.5s;
+}
+
+.testimonial .col-3 img {
+ width: 50px;
+ margin-top: 20px;
+ border-radius: 50%;
+}
+
+.testimonial .col-3:hover {
+ transform: translateY(-20px);
+}
+
+.fa.fa-quote-left {
+ font-size: 34px;
+ color: #ff523b;
+}
+
+.col-3 p {
+ font-size: 12px;
+ margin: 12px 0;
+ color: #777;
+}
+
+.testimonial .col-3 h3 {
+ font-weight: 600;
+ color: #555;
+ font-size: 16px;
+}
+
+
+/* ------------brands ----------*/
+
+.brands {
+ margin: 100px auto;
+}
+
+.col-5 {
+ width: 160px;
+ /* border: 2px solid red; */
+}
+
+.col-5 img {
+ width: 100%;
+ cursor: pointer;
+ filter: grayscale(100);
+}
+
+.col-5 img:hover {
+ filter: grayscale(0);
+}
+
+
+/* ----------footer ------------- */
+
+.footer {
+ background: #000;
+ color: #8a8a8a;
+ font-size: 14px;
+ padding: 60px 0px 20px;
+}
+
+.footer p {
+ color: #8a8a8a;
+}
+
+.footer h3 {
+ color: #fff;
+ margin-bottom: 20px;
+}
+
+.footer-col-1,
+.footer-col-2,
+.footer-col-3,
+.footer-col-4 {
+ min-width: 250px;
+ margin-bottom: 20px;
+}
+
+.footer-col-1 {
+ flex-basis: 30%;
+}
+
+.footer-col-2 {
+ flex: 1;
+ /*it uses all the available space */
+ text-align: center;
+}
+
+.footer-col-2 img {
+ width: 180px;
+ margin-bottom: 20px;
+}
+
+.footer-col-3,
+.footer-col-4 {
+ flex-basis: 10%;
+ text-align: center;
+ vertical-align: center;
+}
+
+ul {
+ list-style: none;
+}
+
+.app-logo {
+ margin-top: 20px;
+}
+
+.app-logo img {
+ width: 140px;
+}
+
+.footer hr {
+ border: none;
+ background: #b5b5b5;
+ height: 1px;
+ margin: 20px 0;
+}
+
+.copyright {
+ text-align: center;
+}
+
+.menu-icon {
+ width: 28px;
+ margin-left: 10px;
+ display: none;
+}
+
+
+/* --------media query for menu----- */
+
+@media only screen and (max-width: 800px) {
+ nav ul {
+ background: rgba(217, 70, 70, 0.9);
+ width: 100%;
+ overflow: hidden;
+ transition: max-height 1.5s;
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ position: absolute;
+ top: 72px;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+ }
+ nav ul li {
+ display: block;
+ margin: 10px 50px 10px 0;
+ }
+ nav ul li a {
+ color: #fff;
+ }
+ .menu-icon {
+ display: block;
+ cursor: pointer;
+ }
+}
+
+
+/* --------all products page------- */
+
+.row.row-2 {
+ justify-content: space-between;
+ margin: 100px auto 50px;
+}
+
+select {
+ border: 1px solid #ff523b;
+ padding: 5px;
+ cursor: pointer;
+}
+
+select:focus {
+ outline: none;
+}
+
+.page-btn {
+ margin: 0 auto 80px;
+}
+
+.page-btn span {
+ display: inline-block;
+ border: 1px solid #ff523b;
+ margin-left: 10px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ cursor: pointer;
+ border-radius: 20%;
+}
+
+.page-btn span:hover {
+ background: #ff523b;
+ color: #fff;
+}
+
+
+/* ------single product details-------- */
+
+.single-product {
+ margin-top: 80px;
+ /* border: 1px solid #3bffbe; */
+}
+
+.single-product .col-2 img {
+ /* border: 1px solid #131111; */
+ padding: 0;
+}
+
+.single-product .col-2 {
+ padding: 20px;
+ /* border: 1px solid #ff3bc4; */
+}
+
+.single-product h4 {
+ /* border: 1px solid #131111; */
+ margin: 20px 0;
+ /* ankit */
+ font-weight: bold;
+ font-size: 20px;
+ /* ankit */
+}
+
+.single-product select {
+ display: block;
+ margin-top: 20px;
+ padding: 10px;
+}
+
+.single-product input {
+ width: 50px;
+ height: 40px;
+ padding-left: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ border: 1px solid #ff523b;
+}
+
+input:focus {
+ outline: none;
+ /* same color after click ff523b */
+}
+
+.single-product h3 i {
+ color: #ff523b;
+ margin-left: 10px;
+}
+
+.small-img-row {
+ /* width: 70px; */
+ display: flex;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+ /* flex-direction: row; */
+ /* border: 1px solid #1915e4; */
+}
+
+.small-img-col {
+ flex-basis: 24%;
+ cursor: pointer;
+}
+
+.viewMore--btn {
+ transition: border 150ms ease-in-out;
+}
+
+.viewMore--btn:hover {
+ /* text-decoration: underline; */
+ border-width: 0 0 1.5px 0;
+ border-style: solid;
+}
+
+
+/* ---------cart item details---------- */
+
+.cart-page {
+ margin: 80px auto;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ /*all border in one border*/
+}
+
+.cartinfo {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+th {
+ text-align: left;
+ padding: 5px;
+ color: #fff;
+ background-color: #ff523b;
+ font-weight: normal;
+}
+
+td {
+ padding: 10px 5px;
+}
+
+td input {
+ width: 45px;
+ height: 30px;
+ padding: 5px;
+}
+
+td .remove-btn {
+ color: #ff523b;
+ font-size: 12px;
+ cursor: pointer;
+ transition: color 250ms ease-in-out;
+}
+
+td .remove-btn:hover {
+ color: #b3220f;
+}
+
+td img {
+ width: 80px;
+ height: 80px;
+ margin-left: 10px;
+}
+
+.total-price {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.total-price table {
+ border-top: 3px solid #ff523b;
+ width: 100%;
+ max-width: 400px;
+}
+
+td:last-child {
+ text-align: right;
+}
+
+th:last-child {
+ text-align: right;
+}
+
+
+/* ----------------Contact-Page ---------- */
+
+.contact-form-container {
+ width: 60%;
+ margin: 20px auto;
+}
+
+.contact-form-container h1 {
+ text-align: center;
+}
+
+.contact-form input {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ padding: 20px 10px;
+}
+
+.contact-form {
+ margin-top: 20px;
+}
+
+.textarea-container textarea {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ margin: 10px 0;
+ width: 100%;
+ height: 150px;
+ padding: 10px 10px;
+}
+
+.textarea-container textarea:focus {
+ outline: none;
+}
+
+.submit-btn {
+ text-align: center;
+}
+
+.submit-btn button {
+ padding: 5px 8px;
+ font-size: 16px;
+ cursor: pointer;
+ font-family: 'Poppins', sans-serif;
+ width: 70%;
+ color: white;
+ background-color: #ff523b;
+ border: none;
+ border-radius: 20px;
+}
+
+.submit-btn button:hover {
+ background-color: #563434;
+}
+
+
+/* ----------------Account-Page ---------- */
+
+.account-page {
+ padding: 50px 0;
+ background: radial-gradient(#fff, #ffd6d6);
+}
+
+.form-container {
+ background: #fff;
+ width: 300px;
+ height: 400px;
+ margin: auto;
+ padding: 20px 0;
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ /* to hide one form login wala */
+}
+
+.form-container span {
+ font-weight: bold;
+ padding: 0 10px;
+ color: #555;
+ cursor: pointer;
+ width: 100px;
+ display: inline-block;
+}
+
+.form-btn {
+ display: inline-block;
+}
+
+.form-container form {
+ max-width: 300px;
+ padding: 0 20px;
+ position: absolute;
+ top: 130px;
+ transition: transform 1s;
+}
+
+form input {
+ width: 100%;
+ height: 30px;
+ margin: 10px 0;
+ padding: 0 10px;
+ border: 1px solid #999;
+}
+
+form .btn {
+ width: 100%;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0;
+}
+
+form .btn:focus {
+ outline: none;
+ /*focus use when when click on button then border show but outline ::none hide the borderoutlint */
+}
+
+#LoginForm {
+ left: -300px;
+}
+
+#RegForm {
+ left: 0;
+}
+
+#LoginForm .input-field,
+#RegForm .input-field {
+ padding: 10px 5px;
+ margin: 15px 0;
+ border: none;
+ border-bottom: 2px solid #ff523b;
+ font-size: 16px;
+}
+
+form a {
+ font-size: 12px;
+}
+
+#Indicator {
+ width: 100px;
+ border: none;
+ background: #ff523b;
+ height: 3px;
+ margin: 9px;
+ transform: translateX(100px);
+ transition: transform 1s;
+}
+
+
+/* --------media query for less than 600 screen size----- */
+
+@media only screen and (max-width: 600px) {
+ .row {
+ text-align: center;
+ }
+ .col-2,
+ .col-3,
+ .col-4 {
+ flex-basis: 100%;
+ }
+ .col-2 p {
+ margin: auto;
+ }
+ .single-product .row {
+ text-align: left;
+ }
+ .single-product .col-2 {
+ padding: 20px 0;
+ /* border: 2px solid #2113e4; */
+ }
+ .single-product h1 {
+ font-size: 26px;
+ line-height: 32px;
+ }
+ .cartinfo p {
+ /* display: none; */
+ font-size: 0.9rem;
+ }
+}
+
+
+/* --------- Scroll Bar ---------- */
+
+
+/*
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #ff634e;
+ border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #ff624d;
+}
+*/
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 18px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(transparent, #d6926a);
+ border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(transparent, #f33809);
+}
+
+
+/* --------Feature Categories Hover Zoom----- */
+
+.zoom {
+ padding: 30px;
+ transition: transform 150ms ease-out;
+ margin: 0 auto;
+ cursor: pointer;
+}
+
+.zoom:hover {
+ -ms-transform: scale(1.05);
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+
+
+/* --------Testimonial Heading----- */
+
+.testimoinial-heading {
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.effects {
+ position: relative;
+ color: #000;
+}
+
+.effects::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #18272f;
+ bottom: 0;
+ left: 0;
+ transform-origin: right;
+ transform: scaleX(0);
+ transition: transform 0.3s ease-in-out;
+}
+
+.effects:hover::before {
+ transform-origin: left;
+ transform: scaleX(1);
+}
+
+
+/* HOVER ANIMATION */
+
+
+/* #box:hover {
+ transform: scale(1.3);
+ z-index: 2;
+} */
+
+
+/* .glassBox {
+ width: 100%;
+ height: 400px;
+ max-width: 300px;
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.05);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-right-color: rgba(255, 255, 255, 0.1);
+ border-bottom-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .glassBox, .glassBox * {
+ box-sizing: border-box;
+ transition: 400ms;
+ }
+ .glassBox__imgBox img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+ .glassBox__title {
+ text-align: center;
+ margin-top: 15px;
+ color: #FFF;
+ font-size: 20px;
+ font-weight: 400;
+ font-family: "Lato";
+ }
+ .glassBox__content {
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+ left: 15px;
+ text-align: center;
+ color: #FFF;
+ font-size: 14px;
+ font-family: "Lato";
+ letter-spacing: 0.1em;
+ opacity: 0;
+ } */
+
+.glassBox__imgBox:hover {
+ transform: scale(1.3);
+ z-index: 2;
+}
+
+
+/* HOVER EFFECT */
+
+#box:hover {
+ /* transform: scale(1.025); */
+ border-radius: 5px;
+ box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ transition: all 250ms;
+}
+
+.zoomForImage {
+ border-radius: 3px;
+}
+
+
+/* THEME BUTTON */
+
+.toggle {
+ width: 40px;
+ height: 22px;
+ margin-left: 25px;
+ background-color: whitesmoke;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+}
+
+.toggle-icon {
+ color: goldenrod;
+}
+
+.toggle-ball {
+ width: 18px;
+ height: 18px;
+ background-color: black;
+ position: absolute;
+ right: 1px;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.header.active {
+ background-color: #000;
+}
+
+.container.active {
+ background-color: #000;
+}
+
+.navbar.active {
+ background-color: #000;
+ color: white;
+}
+
+.menu-icon.active {
+ color: white;
+}
+
+.row.active {
+ background-color: #000;
+ color: white;
+}
+
+body.active {
+ background-color: #000;
+}
+
+.toggle.active {
+ background-color: #000;
+}
+
+.toggle-ball.active {
+ background-color: white;
+ transform: translateX(-20px);
+}
+
+
+/*footer image mouse style to pointer*/
+
+.footer-img {
+ cursor: pointer;
+}
+
+
+/* usefull links */
+
+.useful-links:hover {
+ border-bottom: #fff 1px solid;
+}
+
+
+/* toast style */
+
+#toast {
+ visibility: hidden;
+ min-width: 240px;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ transform: translate(-50%, 0);
+ bottom: 5%;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+}
+
+#toast.showToast {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+
+/* Animations to fade the toast in and out */
+
+@-webkit-keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+.useful-links,
+.socialbtns {
+ color: #D3D3D3;
+}
+
+
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+
+/* Center the loader */
+#loader {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ z-index: 1;
+ overflow: visible;
+ background: #fff url('shopping.gif') no-repeat center center;
+ }
+
+/* Add animation to "page content" */
+.animate-bottom {
+ position: relative;
+ -webkit-animation-name: animatebottom;
+ -webkit-animation-duration: 1s;
+ animation-name: animatebottom;
+ animation-duration: 1s
+}
+
+@-webkit-keyframes animatebottom {
+ from { bottom:-100px; opacity:0 }
+ to { bottom:0px; opacity:1 }
+}
+
+@keyframes animatebottom {
+ from{ bottom:-100px; opacity:0 }
+ to{ bottom:0; opacity:1 }
+}
+
+#myDiv {
+ display: none;
+ text-align: center;
+}
+
+.socialbtns-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+}
+
+.socialbtns-wrapper div {
+ width: 100%;
+ margin-left: 30%;
+}
+
+.socialbtns-wrapper div ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 80%;
+}
+
+.socialbtns-wrapper div ul li {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 0;
+ padding: 3px;
+ cursor: pointer;
+ list-style: none outside none;
+}
+
+.socialbtns-wrapper div ul li a {
+ margin-right: 10px;
+}
+
+.socialbtns .fa {
+ /*width: 40px;*/
+ /*height: 36px;*/
+ font-size: 15px;
+ color: black;
+ background-color: #fff;
+ border: 1px solid #000;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -o-border-radius: 20px;
+}
+
+.socialbtns .fa:hover {
+ color: #fff;
+ background-color: #000;
+ border: 1px solid #000;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+}
+
+.navbar {
+ display: flex;
+ align-items: center;
+ padding: 20px 5px;
+}
+
+nav {
+ flex: 1;
+ text-align: right;
+}
+
+nav li {
+ display: inline-block;
+ position: relative;
+ color: #ff523b;
+}
+
+nav li:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #ff523b;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+nav li:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+nav ul {
+ display: inline-block;
+ list-style-type: none;
+}
+
+nav ul li {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+a {
+ text-decoration: none;
+ color: #555;
+}
+
+p {
+ color: #555;
+}
+
+.container {
+ /* border: 2px solid red; */
+ max-width: 1300px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.row {
+ display: flex;
+ /* border: 2px solid blue; */
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+
+/* scroll-up button starts */
+
+#btnScrollToTop {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: #ff523b;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ color: #FFFFFF;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ z-index: 1;
+}
+
+#btnScrollToTop:hover {
+ width: 52px;
+ height: 52px;
+ margin: 2px;
+ background: #b41919;
+}
+
+#btnScrollToTop:active {
+ background: rgb(12, 214, 12);
+}
+
+
+/* scroll-up button ends */
+
+.col-2 {
+ flex-basis: 50%;
+ min-width: 280px;
+}
+
+.col-2 img {
+ max-width: 76%;
+ padding: 50px 0;
+}
+
+.col-2 h1 {
+ font-size: 50px;
+ line-height: 60px;
+ margin: 25px 0;
+}
+
+.btn {
+ display: inline-block;
+ background-color: #ff523b;
+ color: #fff;
+ padding: 8px 30px;
+ margin: 30px 60px;
+ border-radius: 30px;
+ transition: background 0.5s;
+ border: #ff523b;
+ cursor: pointer;
+ /* border:2px solid black; */
+}
+
+.btn:hover {
+ background: #563434;
+}
+
+.header {
+ background: radial-gradient(#fff, #ffd6d6);
+ /* radial for gradiancy on basis to radius
+linear for gradiancy on basis to vertically */
+}
+
+.header .row {
+ margin: 70px;
+ margin-top: 0;
+}
+
+.categories {
+ margin: 70px 0;
+}
+
+.col-3 {
+ flex-basis: 30%;
+ min-width: 250px;
+ margin-bottom: 30px;
+}
+
+.col-3 img {
+ width: 100%;
+ border-radius: 35px;
+}
+
+.small-container {
+ max-width: 1080px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.col-4 {
+ flex-basis: 25%;
+ padding: 10px;
+ min-width: 200px;
+ margin-bottom: 50px;
+ transition: transform 0.5s;
+ cursor: pointer;
+}
+
+.col-4 img {
+ width: 100%;
+}
+
+.title {
+ text-align: center;
+ margin: 0 auto 80px;
+ position: relative;
+ line-height: 60px;
+ color: #555;
+}
+
+.title::after {
+ content: '';
+ background: #ff523b;
+ width: 80px;
+ height: 5px;
+ border-radius: 5px;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+h4 {
+ color: #555;
+ font-weight: normal;
+}
+
+.col-4 p {
+ font-size: 14px;
+}
+
+.rating .fa {
+ color: #ff523b;
+}
+
+.col-4:hover {
+ transform: translateY(20px);
+}
+
+
+/*------ offer------ */
+
+.offer {
+ background: radial-gradient(#fff, #ffd6d6);
+ margin-top: 80px;
+ padding: 0;
+}
+
+.col-2 .offer-img {
+ padding: 50px;
+}
+
+small {
+ color: #555;
+}
+
+
+/* .testmonial */
+
+.testimonial {
+ padding-top: 100px;
+}
+
+.testimonial .col-3 {
+ text-align: center;
+ padding: 40px 20px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ cursor: pointer;
+ transition: transform 0.5s;
+}
+
+.testimonial .col-3 img {
+ width: 50px;
+ margin-top: 20px;
+ border-radius: 50%;
+}
+
+.testimonial .col-3:hover {
+ transform: translateY(-20px);
+}
+
+.fa.fa-quote-left {
+ font-size: 34px;
+ color: #ff523b;
+}
+
+.col-3 p {
+ font-size: 12px;
+ margin: 12px 0;
+ color: #777;
+}
+
+.testimonial .col-3 h3 {
+ font-weight: 600;
+ color: #555;
+ font-size: 16px;
+}
+
+
+/* ------------brands ----------*/
+
+.brands {
+ margin: 100px auto;
+}
+
+.col-5 {
+ width: 160px;
+ /* border: 2px solid red; */
+}
+
+.col-5 img {
+ width: 100%;
+ cursor: pointer;
+ filter: grayscale(100);
+}
+
+.col-5 img:hover {
+ filter: grayscale(0);
+}
+
+
+/* ----------footer ------------- */
+
+.footer {
+ background: #000;
+ color: #8a8a8a;
+ font-size: 14px;
+ padding: 60px 0px 20px;
+}
+
+.footer p {
+ color: #8a8a8a;
+}
+
+.footer h3 {
+ color: #fff;
+ margin-bottom: 20px;
+}
+
+.footer-col-1,
+.footer-col-2,
+.footer-col-3,
+.footer-col-4 {
+ min-width: 250px;
+ margin-bottom: 20px;
+}
+
+.footer-col-1 {
+ flex-basis: 30%;
+}
+
+.footer-col-2 {
+ flex: 1;
+ /*it uses all the available space */
+ text-align: center;
+}
+
+.footer-col-2 img {
+ width: 180px;
+ margin-bottom: 20px;
+}
+
+.footer-col-3,
+.footer-col-4 {
+ flex-basis: 10%;
+ text-align: center;
+ vertical-align: center;
+}
+
+ul {
+ list-style: none;
+}
+
+.app-logo {
+ margin-top: 20px;
+}
+
+.app-logo img {
+ width: 140px;
+}
+
+.footer hr {
+ border: none;
+ background: #b5b5b5;
+ height: 1px;
+ margin: 20px 0;
+}
+
+.copyright {
+ text-align: center;
+}
+
+.menu-icon {
+ width: 28px;
+ margin-left: 10px;
+ display: none;
+}
+
+
+/* --------media query for menu----- */
+
+@media only screen and (max-width: 800px) {
+ nav ul {
+ background: rgba(217, 70, 70, 0.9);
+ width: 100%;
+ overflow: hidden;
+ transition: max-height 1.5s;
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ position: absolute;
+ top: 72px;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+ }
+ nav ul li {
+ display: block;
+ margin: 10px 50px 10px 0;
+ }
+ nav ul li a {
+ color: #fff;
+ }
+ .menu-icon {
+ display: block;
+ cursor: pointer;
+ }
+}
+
+
+/* --------all products page------- */
+
+.row.row-2 {
+ justify-content: space-between;
+ margin: 100px auto 50px;
+}
+
+select {
+ border: 1px solid #ff523b;
+ padding: 5px;
+ cursor: pointer;
+}
+
+select:focus {
+ outline: none;
+}
+
+.page-btn {
+ margin: 0 auto 80px;
+}
+
+.page-btn span {
+ display: inline-block;
+ border: 1px solid #ff523b;
+ margin-left: 10px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ cursor: pointer;
+ border-radius: 20%;
+}
+
+.page-btn span:hover {
+ background: #ff523b;
+ color: #fff;
+}
+
+
+/* ------single product details-------- */
+
+.single-product {
+ margin-top: 80px;
+ /* border: 1px solid #3bffbe; */
+}
+
+.single-product .col-2 img {
+ /* border: 1px solid #131111; */
+ padding: 0;
+}
+
+.single-product .col-2 {
+ padding: 20px;
+ /* border: 1px solid #ff3bc4; */
+}
+
+.single-product h4 {
+ /* border: 1px solid #131111; */
+ margin: 20px 0;
+ /* ankit */
+ font-weight: bold;
+ font-size: 20px;
+ /* ankit */
+}
+
+.single-product select {
+ display: block;
+ margin-top: 20px;
+ padding: 10px;
+}
+
+.single-product input {
+ width: 50px;
+ height: 40px;
+ padding-left: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ border: 1px solid #ff523b;
+}
+
+input:focus {
+ outline: none;
+ /* same color after click ff523b */
+}
+
+.single-product h3 i {
+ color: #ff523b;
+ margin-left: 10px;
+}
+
+.small-img-row {
+ /* width: 70px; */
+ display: flex;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+ /* flex-direction: row; */
+ /* border: 1px solid #1915e4; */
+}
+
+.small-img-col {
+ flex-basis: 24%;
+ cursor: pointer;
+}
+
+.viewMore--btn {
+ transition: border 150ms ease-in-out;
+}
+
+.viewMore--btn:hover {
+ /* text-decoration: underline; */
+ border-width: 0 0 1.5px 0;
+ border-style: solid;
+}
+
+
+/* ---------cart item details---------- */
+
+.cart-page {
+ margin: 80px auto;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ /*all border in one border*/
+}
+
+.cartinfo {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+th {
+ text-align: left;
+ padding: 5px;
+ color: #fff;
+ background-color: #ff523b;
+ font-weight: normal;
+}
+
+td {
+ padding: 10px 5px;
+}
+
+td input {
+ width: 45px;
+ height: 30px;
+ padding: 5px;
+}
+
+td .remove-btn {
+ color: #ff523b;
+ font-size: 12px;
+ cursor: pointer;
+ transition: color 250ms ease-in-out;
+}
+
+td .remove-btn:hover {
+ color: #b3220f;
+}
+
+td img {
+ width: 80px;
+ height: 80px;
+ margin-left: 10px;
+}
+
+.total-price {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.total-price table {
+ border-top: 3px solid #ff523b;
+ width: 100%;
+ max-width: 400px;
+}
+
+td:last-child {
+ text-align: right;
+}
+
+th:last-child {
+ text-align: right;
+}
+
+
+/* ----------------Contact-Page ---------- */
+
+.contact-form-container {
+ width: 60%;
+ margin: 20px auto;
+}
+
+.contact-form-container h1 {
+ text-align: center;
+}
+
+.contact-form input {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ padding: 20px 10px;
+}
+
+.contact-form {
+ margin-top: 20px;
+}
+
+.textarea-container textarea {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ margin: 10px 0;
+ width: 100%;
+ height: 150px;
+ padding: 10px 10px;
+}
+
+.textarea-container textarea:focus {
+ outline: none;
+}
+
+.submit-btn {
+ text-align: center;
+}
+
+.submit-btn button {
+ padding: 5px 8px;
+ font-size: 16px;
+ cursor: pointer;
+ font-family: 'Poppins', sans-serif;
+ width: 70%;
+ color: white;
+ background-color: #ff523b;
+ border: none;
+ border-radius: 20px;
+}
+
+.submit-btn button:hover {
+ background-color: #563434;
+}
+
+
+/* ----------------Account-Page ---------- */
+
+.account-page {
+ padding: 50px 0;
+ background: radial-gradient(#fff, #ffd6d6);
+}
+
+.form-container {
+ background: #fff;
+ width: 300px;
+ height: 400px;
+ margin: auto;
+ padding: 20px 0;
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ /* to hide one form login wala */
+}
+
+.form-container span {
+ font-weight: bold;
+ padding: 0 10px;
+ color: #555;
+ cursor: pointer;
+ width: 100px;
+ display: inline-block;
+}
+
+.form-btn {
+ display: inline-block;
+}
+
+.form-container form {
+ max-width: 300px;
+ padding: 0 20px;
+ position: absolute;
+ top: 130px;
+ transition: transform 1s;
+}
+
+form input {
+ width: 100%;
+ height: 30px;
+ margin: 10px 0;
+ padding: 0 10px;
+ border: 1px solid #999;
+}
+
+form .btn {
+ width: 100%;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0;
+}
+
+form .btn:focus {
+ outline: none;
+ /*focus use when when click on button then border show but outline ::none hide the borderoutlint */
+}
+
+#LoginForm {
+ left: -300px;
+}
+
+#RegForm {
+ left: 0;
+}
+
+#LoginForm .input-field,
+#RegForm .input-field {
+ padding: 10px 5px;
+ margin: 15px 0;
+ border: none;
+ border-bottom: 2px solid #ff523b;
+ font-size: 16px;
+}
+
+form a {
+ font-size: 12px;
+}
+
+#Indicator {
+ width: 100px;
+ border: none;
+ background: #ff523b;
+ height: 3px;
+ margin: 9px;
+ transform: translateX(100px);
+ transition: transform 1s;
+}
+
+
+/* --------media query for less than 600 screen size----- */
+
+@media only screen and (max-width: 600px) {
+ .row {
+ text-align: center;
+ }
+ .col-2,
+ .col-3,
+ .col-4 {
+ flex-basis: 100%;
+ }
+ .col-2 p {
+ margin: auto;
+ }
+ .single-product .row {
+ text-align: left;
+ }
+ .single-product .col-2 {
+ padding: 20px 0;
+ /* border: 2px solid #2113e4; */
+ }
+ .single-product h1 {
+ font-size: 26px;
+ line-height: 32px;
+ }
+ .cartinfo p {
+ /* display: none; */
+ font-size: 0.9rem;
+ }
+}
+
+
+/* --------- Scroll Bar ---------- */
+
+
+/*
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #ff634e;
+ border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #ff624d;
+}
+*/
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 18px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(transparent, #d6926a);
+ border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(transparent, #f33809);
+}
+
+
+/* --------Feature Categories Hover Zoom----- */
+
+.zoom {
+ padding: 30px;
+ transition: transform 150ms ease-out;
+ margin: 0 auto;
+ cursor: pointer;
+}
+
+.zoom:hover {
+ -ms-transform: scale(1.05);
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+
+
+/* --------Testimonial Heading----- */
+
+.testimoinial-heading {
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.effects {
+ position: relative;
+ color: #000;
+}
+
+.effects::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #18272f;
+ bottom: 0;
+ left: 0;
+ transform-origin: right;
+ transform: scaleX(0);
+ transition: transform 0.3s ease-in-out;
+}
+
+.effects:hover::before {
+ transform-origin: left;
+ transform: scaleX(1);
+}
+
+
+/* HOVER ANIMATION */
+
+
+/* #box:hover {
+ transform: scale(1.3);
+ z-index: 2;
+} */
+
+
+/* .glassBox {
+ width: 100%;
+ height: 400px;
+ max-width: 300px;
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.05);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-right-color: rgba(255, 255, 255, 0.1);
+ border-bottom-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .glassBox, .glassBox * {
+ box-sizing: border-box;
+ transition: 400ms;
+ }
+ .glassBox__imgBox img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+ .glassBox__title {
+ text-align: center;
+ margin-top: 15px;
+ color: #FFF;
+ font-size: 20px;
+ font-weight: 400;
+ font-family: "Lato";
+ }
+ .glassBox__content {
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+ left: 15px;
+ text-align: center;
+ color: #FFF;
+ font-size: 14px;
+ font-family: "Lato";
+ letter-spacing: 0.1em;
+ opacity: 0;
+ } */
+
+.glassBox__imgBox:hover {
+ transform: scale(1.3);
+ z-index: 2;
+}
+
+
+/* HOVER EFFECT */
+
+#box:hover {
+ /* transform: scale(1.025); */
+ border-radius: 5px;
+ box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ transition: all 250ms;
+}
+
+.zoomForImage {
+ border-radius: 3px;
+}
+
+
+/* THEME BUTTON */
+
+.toggle {
+ width: 40px;
+ height: 22px;
+ margin-left: 25px;
+ background-color: whitesmoke;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+}
+
+.toggle-icon {
+ color: goldenrod;
+}
+
+.toggle-ball {
+ width: 18px;
+ height: 18px;
+ background-color: black;
+ position: absolute;
+ right: 2px;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.header.active {
+ background-color: #000;
+}
+
+.container.active {
+ background-color: #000;
+}
+
+.navbar.active {
+ background-color: #000;
+ color: white;
+}
+
+.menu-icon.active {
+ color: white;
+}
+
+.row.active {
+ background-color: #000;
+ color: white;
+}
+
+body.active {
+ background-color: #000;
+}
+
+.toggle.active {
+ background-color: #000;
+}
+
+.toggle-ball.active {
+ background-color: white;
+ transform: translateX(-20px);
+}
+
+
+/*footer image mouse style to pointer*/
+
+.footer-img {
+ cursor: pointer;
+}
+
+
+/* usefull links */
+
+.useful-links:hover {
+ border-bottom: #fff 1px solid;
+}
+
+
+/* toast style */
+
+#toast {
+ visibility: hidden;
+ min-width: 240px;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ transform: translate(-50%, 0);
+ bottom: 5%;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+}
+
+#toast.showToast {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+
+/* Animations to fade the toast in and out */
+
+@-webkit-keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+.useful-links,
+.socialbtns {
+ color: #D3D3D3;
+}
+
+
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+
+/* Center the loader */
+
+#loader {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ z-index: 1;
+ overflow: visible;
+ background: #fff url('shopping.gif') no-repeat center center;
+}
+
+
+/* Add animation to "page content" */
+
+.animate-bottom {
+ position: relative;
+ -webkit-animation-name: animatebottom;
+ -webkit-animation-duration: 1s;
+ animation-name: animatebottom;
+ animation-duration: 1s
+}
+
+@-webkit-keyframes animatebottom {
+ from {
+ bottom: -100px;
+ opacity: 0
+ }
+ to {
+ bottom: 0px;
+ opacity: 1
+ }
+}
+
+@keyframes animatebottom {
+ from {
+ bottom: -100px;
+ opacity: 0
+ }
+ to {
+ bottom: 0;
+ opacity: 1
+ }
+}
+
+#myDiv {
+ display: none;
+ text-align: center;
+}
+
+.socialbtns-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+}
+
+.socialbtns-wrapper div {
+ width: 100%;
+ margin-left: 30%;
+}
+
+.socialbtns-wrapper div ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 80%;
+}
+
+.socialbtns-wrapper div ul li {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 0;
+ padding: 3px;
+ cursor: pointer;
+ list-style: none outside none;
+}
+
+.socialbtns-wrapper div ul li a {
+ margin-right: 10px;
+}
+
+.socialbtns .fa {
+ /*width: 40px;*/
+ /*height: 36px;*/
+ font-size: 15px;
+ color: black;
+ background-color: #fff;
+ border: 1px solid #000;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -o-border-radius: 20px;
+}
+
+.socialbtns .fa:hover {
+ color: #fff;
+ background-color: #000;
+ border: 1px solid #000;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+}
+
+.navbar {
+ display: flex;
+ align-items: center;
+ padding: 20px 5px;
+}
+
+nav {
+ flex: 1;
+ text-align: right;
+}
+
+nav li {
+ display: inline-block;
+ position: relative;
+ color: #ff523b;
+}
+
+nav li:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #ff523b;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+nav li:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+nav ul {
+ display: inline-block;
+ list-style-type: none;
+}
+
+nav ul li {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+a {
+ text-decoration: none;
+ color: #555;
+}
+
+p {
+ color: #555;
+}
+
+.container {
+ /* border: 2px solid red; */
+ max-width: 1300px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.row {
+ display: flex;
+ /* border: 2px solid blue; */
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+
+/* scroll-up button starts */
+
+#btnScrollToTop {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: #ff523b;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ color: #FFFFFF;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ z-index: 1;
+}
+
+#btnScrollToTop:hover {
+ width: 52px;
+ height: 52px;
+ margin: 2px;
+ background: #b41919;
+}
+
+#btnScrollToTop:active {
+ background: rgb(12, 214, 12);
+}
+
+
+/* scroll-up button ends */
+
+.col-2 {
+ flex-basis: 50%;
+ min-width: 280px;
+}
+
+.col-2 img {
+ max-width: 76%;
+ padding: 50px 0;
+}
+
+.col-2 h1 {
+ font-size: 50px;
+ line-height: 60px;
+ margin: 25px 0;
+}
+
+.btn {
+ display: inline-block;
+ background-color: #ff523b;
+ color: #fff;
+ padding: 8px 30px;
+ margin: 30px 60px;
+ border-radius: 30px;
+ transition: background 0.5s;
+ border: #ff523b;
+ cursor: pointer;
+ /* border:2px solid black; */
+}
+
+.btn:hover {
+ background: #563434;
+}
+
+.header {
+ background: radial-gradient(#fff, #ffd6d6);
+ /* radial for gradiancy on basis to radius
+linear for gradiancy on basis to vertically */
+}
+
+.header .row {
+ margin: 70px;
+ margin-top: 0;
+}
+
+.categories {
+ margin: 70px 0;
+}
+
+.col-3 {
+ flex-basis: 30%;
+ min-width: 250px;
+ margin-bottom: 30px;
+}
+
+.col-3 img {
+ width: 100%;
+ border-radius: 35px;
+}
+
+.small-container {
+ max-width: 1080px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.col-4 {
+ flex-basis: 25%;
+ padding: 10px;
+ min-width: 200px;
+ margin-bottom: 50px;
+ transition: transform 0.5s;
+ cursor: pointer;
+}
+
+.col-4 img {
+ width: 100%;
+}
+
+.title {
+ text-align: center;
+ margin: 0 auto 80px;
+ position: relative;
+ line-height: 60px;
+ color: #555;
+}
+
+.title::after {
+ content: '';
+ background: #ff523b;
+ width: 80px;
+ height: 5px;
+ border-radius: 5px;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+h4 {
+ color: #555;
+ font-weight: normal;
+}
+
+.col-4 p {
+ font-size: 14px;
+}
+
+.rating .fa {
+ color: #ff523b;
+}
+
+.col-4:hover {
+ transform: translateY(20px);
+}
+
+
+/*------ offer------ */
+
+.offer {
+ background: radial-gradient(#fff, #ffd6d6);
+ margin-top: 80px;
+ padding: 0;
+}
+
+.col-2 .offer-img {
+ padding: 50px;
+}
+
+small {
+ color: #555;
+}
+
+
+/* .testmonial */
+
+.testimonial {
+ padding-top: 100px;
+}
+
+.testimonial .col-3 {
+ text-align: center;
+ padding: 40px 20px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ cursor: pointer;
+ transition: transform 0.5s;
+}
+
+.testimonial .col-3 img {
+ width: 50px;
+ margin-top: 20px;
+ border-radius: 50%;
+}
+
+.testimonial .col-3:hover {
+ transform: translateY(-20px);
+}
+
+.fa.fa-quote-left {
+ font-size: 34px;
+ color: #ff523b;
+}
+
+.col-3 p {
+ font-size: 12px;
+ margin: 12px 0;
+ color: #777;
+}
+
+.testimonial .col-3 h3 {
+ font-weight: 600;
+ color: #555;
+ font-size: 16px;
+}
+
+
+/* ------------brands ----------*/
+
+.brands {
+ margin: 100px auto;
+}
+
+.col-5 {
+ width: 160px;
+ /* border: 2px solid red; */
+}
+
+.col-5 img {
+ width: 100%;
+ cursor: pointer;
+ filter: grayscale(100);
+}
+
+.col-5 img:hover {
+ filter: grayscale(0);
+}
+
+
+/* ----------footer ------------- */
+
+.footer {
+ background: #000;
+ color: #8a8a8a;
+ font-size: 14px;
+ padding: 60px 0px 20px;
+}
+
+.footer p {
+ color: #8a8a8a;
+}
+
+.footer h3 {
+ color: #fff;
+ margin-bottom: 20px;
+}
+
+.footer-col-1,
+.footer-col-2,
+.footer-col-3,
+.footer-col-4 {
+ min-width: 250px;
+ margin-bottom: 20px;
+}
+
+.footer-col-1 {
+ flex-basis: 30%;
+}
+
+.footer-col-2 {
+ flex: 1;
+ /*it uses all the available space */
+ text-align: center;
+}
+
+.footer-col-2 img {
+ width: 180px;
+ margin-bottom: 20px;
+}
+
+.footer-col-3,
+.footer-col-4 {
+ flex-basis: 10%;
+ text-align: center;
+ vertical-align: center;
+}
+
+ul {
+ list-style: none;
+}
+
+.app-logo {
+ margin-top: 20px;
+}
+
+.app-logo img {
+ width: 140px;
+}
+
+.footer hr {
+ border: none;
+ background: #b5b5b5;
+ height: 1px;
+ margin: 20px 0;
+}
+
+.copyright {
+ text-align: center;
+}
+
+.menu-icon {
+ width: 28px;
+ margin-left: 10px;
+ display: none;
+}
+
+
+/* --------media query for menu----- */
+
+@media only screen and (max-width: 800px) {
+ nav ul {
+ background: rgba(217, 70, 70, 0.9);
+ width: 100%;
+ overflow: hidden;
+ transition: max-height 1.5s;
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ position: absolute;
+ top: 72px;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+ }
+ nav ul li {
+ display: block;
+ margin: 10px 50px 10px 0;
+ }
+ nav ul li a {
+ color: #fff;
+ }
+ .menu-icon {
+ display: block;
+ cursor: pointer;
+ }
+}
+
+
+/* --------all products page------- */
+
+.row.row-2 {
+ justify-content: space-between;
+ margin: 100px auto 50px;
+}
+
+select {
+ border: 1px solid #ff523b;
+ padding: 5px;
+ cursor: pointer;
+}
+
+select:focus {
+ outline: none;
+}
+
+.page-btn {
+ margin: 0 auto 80px;
+}
+
+.page-btn span {
+ display: inline-block;
+ border: 1px solid #ff523b;
+ margin-left: 10px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ cursor: pointer;
+ border-radius: 20%;
+}
+
+.page-btn span:hover {
+ background: #ff523b;
+ color: #fff;
+}
+
+
+/* ------single product details-------- */
+
+.single-product {
+ margin-top: 80px;
+ /* border: 1px solid #3bffbe; */
+}
+
+.single-product .col-2 img {
+ /* border: 1px solid #131111; */
+ padding: 0;
+}
+
+.single-product .col-2 {
+ padding: 20px;
+ /* border: 1px solid #ff3bc4; */
+}
+
+.single-product h4 {
+ /* border: 1px solid #131111; */
+ margin: 20px 0;
+ /* ankit */
+ font-weight: bold;
+ font-size: 20px;
+ /* ankit */
+}
+
+.single-product select {
+ display: block;
+ margin-top: 20px;
+ padding: 10px;
+}
+
+.single-product input {
+ width: 50px;
+ height: 40px;
+ padding-left: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ border: 1px solid #ff523b;
+}
+
+input:focus {
+ outline: none;
+ /* same color after click ff523b */
+}
+
+.single-product h3 i {
+ color: #ff523b;
+ margin-left: 10px;
+}
+
+.small-img-row {
+ /* width: 70px; */
+ display: flex;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+ /* flex-direction: row; */
+ /* border: 1px solid #1915e4; */
+}
+
+.small-img-col {
+ flex-basis: 24%;
+ cursor: pointer;
+}
+
+.viewMore--btn {
+ transition: border 150ms ease-in-out;
+}
+
+.viewMore--btn:hover {
+ /* text-decoration: underline; */
+ border-width: 0 0 1.5px 0;
+ border-style: solid;
+}
+
+
+/* ---------cart item details---------- */
+
+.cart-page {
+ margin: 80px auto;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ /*all border in one border*/
+}
+
+.cartinfo {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+th {
+ text-align: left;
+ padding: 5px;
+ color: #fff;
+ background-color: #ff523b;
+ font-weight: normal;
+}
+
+td {
+ padding: 10px 5px;
+}
+
+td input {
+ width: 45px;
+ height: 30px;
+ padding: 5px;
+}
+
+td .remove-btn {
+ color: #ff523b;
+ font-size: 12px;
+ cursor: pointer;
+ transition: color 250ms ease-in-out;
+}
+
+td .remove-btn:hover {
+ color: #b3220f;
+}
+
+td img {
+ width: 80px;
+ height: 80px;
+ /* margin-left: 10px; */
+ margin: 0px 10px 0px 10px;
+}
+
+.total-price {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.total-price table {
+ border-top: 3px solid #ff523b;
+ width: 100%;
+ max-width: 400px;
+}
+
+td:last-child {
+ text-align: right;
+}
+
+th:last-child {
+ text-align: right;
+}
+
+
+/* ----------------Contact-Page ---------- */
+
+.contact-form-container {
+ width: 60%;
+ margin: 20px auto;
+}
+
+.contact-form-container h1 {
+ text-align: center;
+}
+
+.contact-form input {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ padding: 20px 10px;
+}
+
+.contact-form {
+ margin-top: 20px;
+}
+
+.textarea-container textarea {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ margin: 10px 0;
+ width: 100%;
+ height: 150px;
+ padding: 10px 10px;
+}
+
+.textarea-container textarea:focus {
+ outline: none;
+}
+
+.submit-btn {
+ text-align: center;
+}
+
+.submit-btn button {
+ padding: 5px 8px;
+ font-size: 16px;
+ cursor: pointer;
+ font-family: 'Poppins', sans-serif;
+ width: 70%;
+ color: white;
+ background-color: #ff523b;
+ border: none;
+ border-radius: 20px;
+}
+
+.submit-btn button:hover {
+ background-color: #563434;
+}
+
+
+/* ----------------Account-Page ---------- */
+
+.account-page {
+ padding: 50px 0;
+ background: radial-gradient(#fff, #ffd6d6);
+}
+
+.form-container {
+ background: #fff;
+ width: 300px;
+ height: 400px;
+ margin: auto;
+ padding: 20px 0;
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ /* to hide one form login wala */
+}
+
+.form-container span {
+ font-weight: bold;
+ padding: 0 10px;
+ color: #555;
+ cursor: pointer;
+ width: 100px;
+ display: inline-block;
+}
+
+.form-btn {
+ display: inline-block;
+}
+
+.form-container form {
+ max-width: 300px;
+ padding: 0 20px;
+ position: absolute;
+ top: 130px;
+ transition: transform 1s;
+}
+
+form input {
+ width: 100%;
+ height: 30px;
+ margin: 10px 0;
+ padding: 0 10px;
+ border: 1px solid #999;
+}
+
+form .btn {
+ width: 100%;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0;
+}
+
+form .btn:focus {
+ outline: none;
+ /*focus use when when click on button then border show but outline ::none hide the borderoutlint */
+}
+
+#LoginForm {
+ left: -300px;
+}
+
+#RegForm {
+ left: 0;
+}
+
+#LoginForm .input-field,
+#RegForm .input-field {
+ padding: 10px 5px;
+ margin: 15px 0;
+ border: none;
+ border-bottom: 2px solid #ff523b;
+ font-size: 16px;
+}
+
+form a {
+ font-size: 12px;
+}
+
+#Indicator {
+ width: 100px;
+ border: none;
+ background: #ff523b;
+ height: 3px;
+ margin: 9px;
+ transform: translateX(100px);
+ transition: transform 1s;
+}
+
+
+/* --------media query for less than 600 screen size----- */
+
+@media only screen and (max-width: 600px) {
+ .row {
+ text-align: center;
+ }
+ .col-2,
+ .col-3,
+ .col-4 {
+ flex-basis: 100%;
+ }
+ .col-2 p {
+ margin: auto;
+ }
+ .single-product .row {
+ text-align: left;
+ }
+ .single-product .col-2 {
+ padding: 20px 0;
+ /* border: 2px solid #2113e4; */
+ }
+ .single-product h1 {
+ font-size: 26px;
+ line-height: 32px;
+ }
+ .cartinfo p {
+ /* display: none; */
+ font-size: 0.9rem;
+ }
+}
+
+
+/* --------- Scroll Bar ---------- */
+
+
+/*
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #ff634e;
+ border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #ff624d;
+}
+*/
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 18px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(transparent, #d6926a);
+ border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(transparent, #f33809);
+}
+
+
+/* --------Feature Categories Hover Zoom----- */
+
+.zoom {
+ padding: 30px;
+ transition: transform 150ms ease-out;
+ margin: 0 auto;
+ cursor: pointer;
+}
+
+.zoom:hover {
+ -ms-transform: scale(1.05);
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+
+
+/* --------Testimonial Heading----- */
+
+.testimoinial-heading {
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.effects {
+ position: relative;
+ color: #000;
+}
+
+.effects::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #18272f;
+ bottom: 0;
+ left: 0;
+ transform-origin: right;
+ transform: scaleX(0);
+ transition: transform 0.3s ease-in-out;
+}
+
+.effects:hover::before {
+ transform-origin: left;
+ transform: scaleX(1);
+}
+
+
+/* HOVER ANIMATION */
+
+
+/* #box:hover {
+ transform: scale(1.3);
+ z-index: 2;
+} */
+
+
+/* .glassBox {
+ width: 100%;
+ height: 400px;
+ max-width: 300px;
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.05);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-right-color: rgba(255, 255, 255, 0.1);
+ border-bottom-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .glassBox, .glassBox * {
+ box-sizing: border-box;
+ transition: 400ms;
+ }
+ .glassBox__imgBox img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+ .glassBox__title {
+ text-align: center;
+ margin-top: 15px;
+ color: #FFF;
+ font-size: 20px;
+ font-weight: 400;
+ font-family: "Lato";
+ }
+ .glassBox__content {
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+ left: 15px;
+ text-align: center;
+ color: #FFF;
+ font-size: 14px;
+ font-family: "Lato";
+ letter-spacing: 0.1em;
+ opacity: 0;
+ } */
+
+.glassBox__imgBox:hover {
+ transform: scale(1.3);
+ z-index: 2;
+}
+
+
+/* HOVER EFFECT */
+
+#box:hover {
+ /* transform: scale(1.025); */
+ border-radius: 5px;
+ box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ transition: all 250ms;
+}
+
+.zoomForImage {
+ border-radius: 3px;
+}
+
+
+/* THEME BUTTON */
+
+.toggle {
+ width: 40px;
+ height: 22px;
+ margin-left: 25px;
+ background-color: whitesmoke;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+}
+
+.toggle-icon {
+ color: goldenrod;
+}
+
+.toggle-ball {
+ width: 18px;
+ height: 18px;
+ background-color: black;
+ position: absolute;
+ right: 2px;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.header.active {
+ background-color: #000;
+}
+
+.container.active {
+ background-color: #000;
+}
+
+.navbar.active {
+ background-color: #000;
+ color: white;
+}
+
+.menu-icon.active {
+ color: white;
+}
+
+.row.active {
+ background-color: #000;
+ color: white;
+}
+
+body.active {
+ background-color: #000;
+}
+
+.toggle.active {
+ background-color: #000;
+}
+
+.toggle-ball.active {
+ background-color: white;
+ transform: translateX(-20px);
+}
+
+/* change color of navbar heading to white on toggle */
+
+#MenuItems.active > li > a {
+ color: white;
+}
+
+/* change color of contact page heading to white on toggle */
+
+.form-title.active {
+ color: white;
+}
+
+/* cart image in dark mode */
+
+.cart-image.bgm-change {
+ background-color: white;
+}
+
+
+/*footer image mouse style to pointer*/
+
+.footer-img {
+ cursor: pointer;
+}
+
+
+/* usefull links */
+
+.useful-links:hover {
+ border-bottom: #fff 1px solid;
+}
+
+
+/* toast style */
+
+#toast {
+ visibility: hidden;
+ min-width: 240px;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ transform: translate(-50%, 0);
+ bottom: 5%;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+}
+
+#toast.showToast {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+
+/* Animations to fade the toast in and out */
+
+@-webkit-keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+.useful-links,
+.socialbtns {
+ color: #D3D3D3;
+}
+
+.btn-quantity {
+ padding: 2px 12px;
+ font-size: 24px;
+ border-radius: 50%;
+ cursor: pointer;
+ background-color: #ff523b;
+ color: #fff;
+ margin-left: -10px;
+ border: 1px solid black;
+}
+
+
+@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
+
+/* Center the loader */
+
+#loader {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ z-index: 1;
+ overflow: visible;
+ background: #fff url('shopping.gif') no-repeat center center;
+}
+
+
+/* Add animation to "page content" */
+
+.animate-bottom {
+ position: relative;
+ -webkit-animation-name: animatebottom;
+ -webkit-animation-duration: 1s;
+ animation-name: animatebottom;
+ animation-duration: 1s
+}
+
+@-webkit-keyframes animatebottom {
+ from {
+ bottom: -100px;
+ opacity: 0
+ }
+ to {
+ bottom: 0px;
+ opacity: 1
+ }
+}
+
+@keyframes animatebottom {
+ from {
+ bottom: -100px;
+ opacity: 0
+ }
+ to {
+ bottom: 0;
+ opacity: 1
+ }
+}
+
+#myDiv {
+ display: none;
+ text-align: center;
+}
+
+.socialbtns-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+}
+
+.socialbtns-wrapper div {
+ width: 100%;
+ margin-left: 30%;
+}
+
+.socialbtns-wrapper div ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ width: 80%;
+}
+
+.socialbtns-wrapper div ul li {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 0;
+ padding: 3px;
+ cursor: pointer;
+ list-style: none outside none;
+}
+
+.socialbtns-wrapper div ul li a {
+ margin-right: 10px;
+}
+
+.socialbtns .fa {
+ /*width: 40px;*/
+ /*height: 36px;*/
+ font-size: 15px;
+ color: black;
+ background-color: #fff;
+ border: 1px solid #000;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ -o-border-radius: 20px;
+}
+
+.socialbtns .fa:hover {
+ color: #fff;
+ background-color: #000;
+ border: 1px solid #000;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+}
+
+.navbar {
+ display: flex;
+ align-items: center;
+ padding: 20px 5px;
+}
+
+nav {
+ flex: 1;
+ text-align: right;
+}
+
+nav li {
+ display: inline-block;
+ position: relative;
+ color: #ff523b;
+}
+
+nav li:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #ff523b;
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+nav li:hover:after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+nav ul {
+ display: inline-block;
+ list-style-type: none;
+}
+
+nav ul li {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+a {
+ text-decoration: none;
+ color: #555;
+}
+
+p {
+ color: #555;
+}
+
+.container {
+ /* border: 2px solid red; */
+ max-width: 1300px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.row {
+ display: flex;
+ /* border: 2px solid blue; */
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+
+/* scroll-up button starts */
+
+#btnScrollToTop {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: #ff523b;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ color: #FFFFFF;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ z-index: 1;
+}
+
+#btnScrollToTop:hover {
+ width: 52px;
+ height: 52px;
+ margin: 2px;
+ background: #b41919;
+}
+
+#btnScrollToTop:active {
+ background: rgb(12, 214, 12);
+}
+
+
+/* scroll-up button ends */
+
+.col-2 {
+ flex-basis: 50%;
+ min-width: 280px;
+}
+
+.col-2 img {
+ max-width: 76%;
+ padding: 50px 0;
+}
+
+.col-2 h1 {
+ font-size: 50px;
+ line-height: 60px;
+ margin: 25px 0;
+}
+
+.btn {
+ display: inline-block;
+ background-color: #ff523b;
+ color: #fff;
+ padding: 8px 30px;
+ margin: 30px 60px;
+ border-radius: 30px;
+ transition: background 0.5s;
+ border: #ff523b;
+ cursor: pointer;
+ /* border:2px solid black; */
+}
+
+.btn:hover {
+ background: #563434;
+}
+
+.header {
+ background: radial-gradient(#fff, #ffd6d6);
+ /* radial for gradiancy on basis to radius
+linear for gradiancy on basis to vertically */
+}
+
+.header .row {
+ margin: 70px;
+ margin-top: 0;
+}
+
+.categories {
+ margin: 70px 0;
+}
+
+.col-3 {
+ flex-basis: 30%;
+ min-width: 250px;
+ margin-bottom: 30px;
+}
+
+.col-3 img {
+ width: 100%;
+ border-radius: 35px;
+}
+
+.small-container {
+ max-width: 1080px;
+ margin: auto;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+
+.col-4 {
+ flex-basis: 25%;
+ padding: 10px;
+ min-width: 200px;
+ margin-bottom: 50px;
+ transition: transform 0.5s;
+ cursor: pointer;
+}
+
+.col-4 img {
+ width: 100%;
+}
+
+.title {
+ text-align: center;
+ margin: 0 auto 80px;
+ position: relative;
+ line-height: 60px;
+ color: #555;
+}
+
+.title::after {
+ content: '';
+ background: #ff523b;
+ width: 80px;
+ height: 5px;
+ border-radius: 5px;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+h4 {
+ color: #555;
+ font-weight: normal;
+}
+
+.col-4 p {
+ font-size: 14px;
+}
+
+.rating .fa {
+ color: #ff523b;
+}
+
+.col-4:hover {
+ transform: translateY(20px);
+}
+
+
+/*------ offer------ */
+
+.offer {
+ background: radial-gradient(#fff, #ffd6d6);
+ margin-top: 80px;
+ padding: 0;
+}
+
+.col-2 .offer-img {
+ padding: 50px;
+}
+
+small {
+ color: #555;
+}
+
+
+/* .testmonial */
+
+.testimonial {
+ padding-top: 100px;
+}
+
+.testimonial .col-3 {
+ text-align: center;
+ padding: 40px 20px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ cursor: pointer;
+ transition: transform 0.5s;
+}
+
+.testimonial .col-3 img {
+ width: 50px;
+ margin-top: 20px;
+ border-radius: 50%;
+}
+
+.testimonial .col-3:hover {
+ transform: translateY(-20px);
+}
+
+.fa.fa-quote-left {
+ font-size: 34px;
+ color: #ff523b;
+}
+
+.col-3 p {
+ font-size: 12px;
+ margin: 12px 0;
+ color: #777;
+}
+
+.testimonial .col-3 h3 {
+ font-weight: 600;
+ color: #555;
+ font-size: 16px;
+}
+
+
+/* ------------brands ----------*/
+
+.brands {
+ margin: 100px auto;
+}
+
+.col-5 {
+ width: 160px;
+ /* border: 2px solid red; */
+}
+
+.col-5 img {
+ width: 100%;
+ cursor: pointer;
+ filter: grayscale(100);
+}
+
+.col-5 img:hover {
+ filter: grayscale(0);
+}
+
+
+/* ----------footer ------------- */
+
+.footer {
+ background: #000;
+ color: #8a8a8a;
+ font-size: 14px;
+ padding: 60px 0px 20px;
+}
+
+.footer p {
+ color: #8a8a8a;
+}
+
+.footer h3 {
+ color: #fff;
+ margin-bottom: 20px;
+}
+
+.footer-col-1,
+.footer-col-2,
+.footer-col-3,
+.footer-col-4 {
+ min-width: 250px;
+ margin-bottom: 20px;
+}
+
+.footer-col-1 {
+ flex-basis: 30%;
+}
+
+.footer-col-2 {
+ flex: 1;
+ /*it uses all the available space */
+ text-align: center;
+}
+
+.footer-col-2 img {
+ width: 180px;
+ margin-bottom: 20px;
+}
+
+.footer-col-3,
+.footer-col-4 {
+ flex-basis: 10%;
+ text-align: center;
+ vertical-align: center;
+}
+
+ul {
+ list-style: none;
+}
+
+.app-logo {
+ margin-top: 20px;
+}
+
+.app-logo img {
+ width: 140px;
+}
+
+.footer hr {
+ border: none;
+ background: #b5b5b5;
+ height: 1px;
+ margin: 20px 0;
+}
+
+.copyright {
+ text-align: center;
+}
+
+.menu-icon {
+ width: 28px;
+ margin-left: 10px;
+ display: none;
+}
+
+
+/* --------media query for menu----- */
+
+@media only screen and (max-width: 800px) {
+ nav ul {
+ background: rgba(217, 70, 70, 0.9);
+ width: 100%;
+ overflow: hidden;
+ transition: max-height 1.5s;
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ position: absolute;
+ top: 72px;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+ }
+ nav ul li {
+ display: block;
+ margin: 10px 50px 10px 0;
+ }
+ nav ul li a {
+ color: #fff;
+ }
+ .menu-icon {
+ display: block;
+ cursor: pointer;
+ }
+}
+
+
+/* --------all products page------- */
+
+.row.row-2 {
+ justify-content: space-between;
+ margin: 100px auto 50px;
+}
+
+select {
+ border: 1px solid #ff523b;
+ padding: 5px;
+ cursor: pointer;
+}
+
+select:focus {
+ outline: none;
+}
+
+.page-btn {
+ margin: 0 auto 80px;
+}
+
+.page-btn span {
+ display: inline-block;
+ border: 1px solid #ff523b;
+ margin-left: 10px;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 40px;
+ cursor: pointer;
+ border-radius: 20%;
+}
+
+.page-btn span:hover {
+ background: #ff523b;
+ color: #fff;
+}
+
+
+/* ------single product details-------- */
+
+.single-product {
+ margin-top: 80px;
+ /* border: 1px solid #3bffbe; */
+}
+
+.single-product .col-2 img {
+ /* border: 1px solid #131111; */
+ padding: 0;
+}
+
+.single-product .col-2 {
+ padding: 20px;
+ /* border: 1px solid #ff3bc4; */
+}
+
+.single-product h4 {
+ /* border: 1px solid #131111; */
+ margin: 20px 0;
+ /* ankit */
+ font-weight: bold;
+ font-size: 20px;
+ /* ankit */
+}
+
+.single-product select {
+ display: block;
+ margin-top: 20px;
+ padding: 10px;
+}
+
+.single-product input {
+ width: 50px;
+ height: 40px;
+ padding-left: 10px;
+ margin-right: 10px;
+ font-size: 20px;
+ border: 1px solid #ff523b;
+}
+
+input:focus {
+ outline: none;
+ /* same color after click ff523b */
+}
+
+.single-product h3 i {
+ color: #ff523b;
+ margin-left: 10px;
+}
+
+.small-img-row {
+ /* width: 70px; */
+ display: flex;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+ /* flex-direction: row; */
+ /* border: 1px solid #1915e4; */
+}
+
+.small-img-col {
+ flex-basis: 24%;
+ cursor: pointer;
+}
+
+.viewMore--btn {
+ transition: border 150ms ease-in-out;
+}
+
+.viewMore--btn:hover {
+ /* text-decoration: underline; */
+ border-width: 0 0 1.5px 0;
+ border-style: solid;
+}
+
+
+/* ---------cart item details---------- */
+
+.cart-page {
+ margin: 80px auto;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ /*all border in one border*/
+}
+
+.cartinfo {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+th {
+ text-align: left;
+ padding: 5px;
+ color: #fff;
+ background-color: #ff523b;
+ font-weight: normal;
+}
+
+td {
+ padding: 10px 5px;
+}
+
+td input {
+ width: 45px;
+ height: 30px;
+ padding: 5px;
+}
+
+td .remove-btn {
+ color: #ff523b;
+ font-size: 12px;
+ cursor: pointer;
+ transition: color 250ms ease-in-out;
+}
+
+td .remove-btn:hover {
+ color: #b3220f;
+}
+
+td img {
+ width: 80px;
+ height: 80px;
+ /* margin-left: 10px; */
+ margin: 0px 10px 0px 10px;
+}
+
+.total-price {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.total-price table {
+ border-top: 3px solid #ff523b;
+ width: 100%;
+ max-width: 400px;
+}
+
+td:last-child {
+ text-align: right;
+}
+
+th:last-child {
+ text-align: right;
+}
+
+
+/* ----------------Contact-Page ---------- */
+
+.contact-form-container {
+ width: 60%;
+ margin: 20px auto;
+}
+
+.contact-form-container h1 {
+ text-align: center;
+}
+
+.contact-form input {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ padding: 20px 10px;
+}
+
+.contact-form {
+ margin-top: 20px;
+}
+
+.textarea-container textarea {
+ font-size: 16px;
+ font-family: 'Poppins', sans-serif;
+ margin: 10px 0;
+ width: 100%;
+ height: 150px;
+ padding: 10px 10px;
+}
+
+.textarea-container textarea:focus {
+ outline: none;
+}
+
+.submit-btn {
+ text-align: center;
+}
+
+.submit-btn button {
+ padding: 5px 8px;
+ font-size: 16px;
+ cursor: pointer;
+ font-family: 'Poppins', sans-serif;
+ width: 70%;
+ color: white;
+ background-color: #ff523b;
+ border: none;
+ border-radius: 20px;
+}
+
+.submit-btn button:hover {
+ background-color: #563434;
+}
+
+
+/* ----------------Account-Page ---------- */
+
+.account-page {
+ padding: 50px 0;
+ background: radial-gradient(#fff, #ffd6d6);
+}
+
+.form-container {
+ background: #fff;
+ width: 300px;
+ height: 400px;
+ margin: auto;
+ padding: 20px 0;
+ box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ /* to hide one form login wala */
+}
+
+.form-container span {
+ font-weight: bold;
+ padding: 0 10px;
+ color: #555;
+ cursor: pointer;
+ width: 100px;
+ display: inline-block;
+}
+
+.form-btn {
+ display: inline-block;
+}
+
+.form-container form {
+ max-width: 300px;
+ padding: 0 20px;
+ position: absolute;
+ top: 130px;
+ transition: transform 1s;
+}
+
+form input {
+ width: 100%;
+ height: 30px;
+ margin: 10px 0;
+ padding: 0 10px;
+ border: 1px solid #999;
+}
+
+form .btn {
+ width: 100%;
+ border: none;
+ cursor: pointer;
+ margin: 10px 0;
+}
+
+form .btn:focus {
+ outline: none;
+ /*focus use when when click on button then border show but outline ::none hide the borderoutlint */
+}
+
+#LoginForm {
+ left: -300px;
+}
+
+#RegForm {
+ left: 0;
+}
+
+#LoginForm .input-field,
+#RegForm .input-field {
+ padding: 10px 5px;
+ margin: 15px 0;
+ border: none;
+ border-bottom: 2px solid #ff523b;
+ font-size: 16px;
+}
+
+form a {
+ font-size: 12px;
+}
+
+#Indicator {
+ width: 100px;
+ border: none;
+ background: #ff523b;
+ height: 3px;
+ margin: 9px;
+ transform: translateX(100px);
+ transition: transform 1s;
+}
+
+
+/* --------media query for less than 600 screen size----- */
+
+@media only screen and (max-width: 600px) {
+ .row {
+ text-align: center;
+ }
+ .col-2,
+ .col-3,
+ .col-4 {
+ flex-basis: 100%;
+ }
+ .col-2 p {
+ margin: auto;
+ }
+ .single-product .row {
+ text-align: left;
+ }
+ .single-product .col-2 {
+ padding: 20px 0;
+ /* border: 2px solid #2113e4; */
+ }
+ .single-product h1 {
+ font-size: 26px;
+ line-height: 32px;
+ }
+ .cartinfo p {
+ /* display: none; */
+ font-size: 0.9rem;
+ }
+}
+
+
+/* --------- Scroll Bar ---------- */
+
+
+/*
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #ff634e;
+ border-radius: 9px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #ff624d;
+}
+*/
+
+::-webkit-scrollbar {
+ width: 12px;
+ height: 18px;
+}
+
+::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgb(102, 102, 102);
+ border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(transparent, #d6926a);
+ border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(transparent, #f33809);
+}
+
+
+/* --------Feature Categories Hover Zoom----- */
+
+.zoom {
+ padding: 30px;
+ transition: transform 150ms ease-out;
+ margin: 0 auto;
+ cursor: pointer;
+}
+
+.zoom:hover {
+ -ms-transform: scale(1.05);
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+
+
+/* --------Testimonial Heading----- */
+
+.testimoinial-heading {
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.effects {
+ position: relative;
+ color: #000;
+}
+
+.effects::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background-color: #18272f;
+ bottom: 0;
+ left: 0;
+ transform-origin: right;
+ transform: scaleX(0);
+ transition: transform 0.3s ease-in-out;
+}
+
+.effects:hover::before {
+ transform-origin: left;
+ transform: scaleX(1);
+}
+
+
+/* HOVER ANIMATION */
+
+
+/* #box:hover {
+ transform: scale(1.3);
+ z-index: 2;
+} */
+
+
+/* .glassBox {
+ width: 100%;
+ height: 400px;
+ max-width: 300px;
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.05);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-right-color: rgba(255, 255, 255, 0.1);
+ border-bottom-color: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .glassBox, .glassBox * {
+ box-sizing: border-box;
+ transition: 400ms;
+ }
+ .glassBox__imgBox img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+ .glassBox__title {
+ text-align: center;
+ margin-top: 15px;
+ color: #FFF;
+ font-size: 20px;
+ font-weight: 400;
+ font-family: "Lato";
+ }
+ .glassBox__content {
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+ left: 15px;
+ text-align: center;
+ color: #FFF;
+ font-size: 14px;
+ font-family: "Lato";
+ letter-spacing: 0.1em;
+ opacity: 0;
+ } */
+
+.glassBox__imgBox:hover {
+ transform: scale(1.3);
+ z-index: 2;
+}
+
+
+/* HOVER EFFECT */
+
+#box:hover {
+ /* transform: scale(1.025); */
+ border-radius: 5px;
+ box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ transition: all 250ms;
+}
+
+.zoomForImage {
+ border-radius: 3px;
+}
+
+
+/* THEME BUTTON */
+
+.toggle {
+ width: 40px;
+ height: 22px;
+ margin-left: 25px;
+ background-color: whitesmoke;
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+}
+
+.toggle-icon {
+ color: goldenrod;
+}
+
+.toggle-ball {
+ width: 18px;
+ height: 18px;
+ background-color: black;
+ position: absolute;
+ right: 2px;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.header.active {
+ background-color: #000;
+}
+
+.container.active {
+ background-color: #000;
+}
+
+.navbar.active {
+ background-color: #000;
+ color: white;
+}
+
+.menu-icon.active {
+ color: white;
+}
+
+.row.active {
+ background-color: #000;
+ color: white;
+}
+
+body.active {
+ background-color: #000;
+}
+
+.toggle.active {
+ background-color: #000;
+}
+
+.toggle-ball.active {
+ background-color: white;
+ transform: translateX(-20px);
+}
+
+/* change color of navbar heading to white on toggle */
+
+#MenuItems.active > li > a {
+ color: white;
+}
+
+/* change color of contact page heading to white on toggle */
+
+.form-title.active {
+ color: white;
+}
+
+/* cart image in dark mode */
+
+.cart-image.bgm-change {
+ background-color: white;
+ filter: invert(100%);
+}
+
+
+/*footer image mouse style to pointer*/
+
+.footer-img {
+ cursor: pointer;
+}
+
+
+/* usefull links */
+
+.useful-links:hover {
+ border-bottom: #fff 1px solid;
+}
+
+
+/* toast style */
+
+#toast {
+ visibility: hidden;
+ min-width: 240px;
+ position: fixed;
+ z-index: 1;
+ left: 50%;
+ transform: translate(-50%, 0);
+ bottom: 5%;
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ border-radius: 2px;
+ padding: 16px;
+}
+
+#toast.showToast {
+ visibility: visible;
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+
+/* Animations to fade the toast in and out */
+
+@-webkit-keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@keyframes fadein {
+ from {
+ bottom: 0;
+ opacity: 0;
+ }
+ to {
+ bottom: 5%;
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ bottom: 5%;
+ opacity: 1;
+ }
+ to {
+ bottom: 0;
+ opacity: 0;
+ }
+}
+
+.useful-links,
+.socialbtns {
+ color: #D3D3D3;
+}
+
+.btn-quantity {
+ padding: 2px 12px;
+ font-size: 24px;
+ border-radius: 5%;
+ cursor: pointer;
+ background-color: #ff523b;
+ color: #fff;
+ margin-left: -10px;
+ border: 1px solid black;
+}
+.white
+{
+ color: #ff523b;
+}
+
+
+
+
+
+
+
+