/*Common Section*/
 @font-face {
     font-family: 'ProductSans Regular';
     src: url(../fonts/google-sans/ProductSans-Regular.ttf);
 }

 body {

     transition: .9s ease-in;
     margin: 0px;
     background-color: white;
     padding: 0px;
 }

 html {
     scroll-behavior: smooth;
 }

 :root {
     --themeColor: #38282C;
     --secondaryColor: #2DAA9E;
     --bgColor: #FFF8F9;
     --primaryTextColor: #34312C;
     --secondaryTextColor: #535558;
     --font-family: 'ProductSans Regular';
     --font-weight-bold: 700;
     --font-weight-regular: 400;
     --line-height: 1.5;
     --color-white: white;
     --line-height-titles: 1.2;
     --grid-gap: 40px 60px;
     --box-shadow10: 1px 2px 15px 0px #d5d8dc;
     --box-shadow20: 1px 10px 30px 0px #8E8E8E;
     --box-shadow40: 0 .5rem 2rem rgba(0, 0, 0, .1);
     --box-shadow50: 0 .5rem 2rem rgba(0, 0, 0, .2);
     --Approved: #239B56;
     --New: #B03A2E;
     --InProgress: #F39C12;
     --OnHold: #FF5733;
     --Closed: #2ECC71;
     --Assigned: #0096CC;
     --themeColorRGBA01: rgba(56, 40, 44, 0.1);
     --themeColorRGBA02: rgba(56, 40, 44, 0.2);
     --themeColorRGBA03: rgba(56, 40, 44, 0.3);
     --themeColorRGBA04: rgba(56, 40, 44, 0.4);
     --themeColorRGBA05: rgba(56, 40, 44, 0.5);
     --themeColorRGBA06: rgba(56, 40, 44, 0.6);
     --themeColorRGBA07: rgba(56, 40, 44, 0.7);
     --themeColorRGBA08: rgba(56, 40, 44, 0.8);
     --themeColorRGBA09: rgba(56, 40, 44, 0.9);

 }

 h1,
 h2,
 h3 {
     color: var(--primary-text-color);
     font-family: var(--font-family);
 }

 h4,
 h5,
 h6,
 p {
     color: var(--secondary-text-color);
     font-family: var(--font-family);
     font-size: 1.1em;
     line-height: 22px;
     font-weight: lighter;
     letter-spacing: 0px;
 }

 a {
     color: var(--secondaryColor);
     text-decoration: none;
 }

 a:hover {
     color: var(--secondaryColor);
     text-decoration: none;
 }


 .setNavHead {
     height: 90px;
     background-color: red;
     margin-bottom: 30px;
 }



 .breadCrum h5 {
     font-size: 0.9em;
     letter-spacing: 0.5px;
     font-weight: normal;

 }

 .breadCrum h6 {
     font-size: 0.9em;
     text-align: right;
     margin: 0px;
     padding-top: 10px;
     font-weight: lighter;
     letter-spacing: 0.5px;

 }

 .updateCartComp {
     position: absolute;
     z-index: 555;
     color: white;
     background-color: var(--secondaryColor);
     padding: 10px 25px;
     border-radius: 5px;
 }

 /*Common Section*/

 /* NAVBAR SECTION STARTS */
 .navbar {

     margin-bottom: 0;
     background-color: var(--bgColor);
     box-shadow: var(--box-shadow10);
     z-index: 9999;
     border: 0;
     font-size: 1em;
     line-height: 1.42857143 !important;
     letter-spacing: 1.2px;
     border-radius: 0;
 }

 nav.navbar {
     position: fixed;
     width: 100%;
 }

 .topMenu .container-fluid {
     padding: 0% 6% 0% 3.5%;
 }

 .topMenu ul li {
     float: right;
     padding: 10px 7px;
 }


 .topMenu .count {
     width: 19px;
     height: 19px;
     color: white;
     border-radius: 50%;
     padding-top: 1px;
     padding-left: 6px;
     font-size: 1em;
     background-color: #FE8F17;
     margin-top: -40px;
     margin-left: 24px;
 }

 .topLogo {
     margin-top: 15px;
     margin-left: 40px;
 }

 .topLogo img {
     height: 40px;
 }

 .searchForm {
     padding-top: 13px;
 }

 .searchForm input {
     border: 1px solid rgba(45, 170, 158, 0.4);
     padding: 20px 15px;
     border-radius: 0px;
     border-radius: 5px;
     width: 100%;
     box-shadow: none;
     background-color: rgba(45, 170, 158, 0.1);
     font-size: 0.9em;
 }



 .buttonSearch {
     border-radius: 0px 20px 20px 0px;
     padding: 9px 15px 9px 15px;
     top: 0px;
     font-size: 1.2em;
     color: var(--themeColor);
     position: absolute;
     right: 20px;
     border: none;
     background-color: transparent;
 }


 .topMenuAction ul li a {
     color: var(--themeColor);
 }

 .topMenuAction ul li a i {
     font-size: 1.1em;
     margin: 17px 5px 10px 0px;
 }

 .topMenuAction ul li a span {
     font-size: 1em;
     letter-spacing: 0px;
 }

 .CartCount {
     background-color: var(--secondaryColor);
     border-radius: 15px;
     color: white;
     font-size: 0.6em;
     height: 18px;
     letter-spacing: 0px;
     padding: 4px 4px 3px 4px;
     position: absolute;
     top: 12px;
     margin-left: 7px;
 }

 /*for small screen starts*/
 #smallScreen .navbar {
     background-color: var(--bgColor);
     padding: 10px 20px 10px 20px;
 }

 .sidenav {
     height: 100%;
     width: 0%;
     border-radius: 0px 0px 0px 0px;
     position: fixed;
     z-index: 555555;
     top: 0;
     left: 0;
     background-color: var(--bgColor);
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 15px;
     text-align: left;
 }

 .sidenav::-webkit-scrollbar {
     display: none;
 }

 .sidenav a {
     padding: 5px 0px 8px 20px;
     text-decoration: none;
     color: #818181;
     font-weight: bold;
     display: block;
     transition: 0.3s;
 }

 .sidenav a:hover {
     color: #f1f1f1;
 }

 .sidenav .closebtn {
     margin-top: -10px;
     margin-right: 35px;
     font-size: 4em;
     color: var(--themeColor);
 }

 @media screen and (max-height: 450px) {
     .sidenav {
         padding-top: 15px;
     }

     .sidenav a {
         font-size: 18px;
     }
 }

 .iconBox {
     height: 40px;
     width: 40px;
     background-color: rgba(254, 0, 2, 0.1);
     border-radius: 50%;
     overflow: hidden;
     padding: 7px;
 }

 #mySidenav h4 {
     font-size: 1.1em;
     font-weight: 400;
     padding: 15px 0px 0px 0px;
     margin: 0px;
     color: var(--primaryTextColor);
 }

 .loginHeader {
     padding-bottom: 15px;
 }

 .iconLoginBox {
     height: 50px;
     width: 50px;
     background-color: var(--themeColorRGBA01);
     border-radius: 50%;
     overflow: hidden;
     padding: 7px;
     margin-top: 10px;
     margin-left: 20px;
 }

 .loginContent {
     padding-left: 15px;
     padding-top: 0px;
 }




 .navLowerComp {
     overflow-y: scroll;
     height: 650px;
     padding: 15px 0px 15px 0px;
     overflow-x: hidden;
 }

 .navLowerComp::-webkit-scrollbar {
     display: none;
 }

 .shopInComp {
     padding-bottom: 12px;
 }

 .shopInComp h3 {
     text-transform: uppercase;
     font-weight: 400;
     font-size: 1em;
     width: 100px;
     background-color: white;
     color: var(--secondaryTextColor);
     margin: -8px 0px 15px 0px;
     padding: 0px 0px 0px 15px;
 }

 .navMenuShopInDivider {
     height: 1px;
     background-color: rgba(254, 0, 2, 0.1);
     width: 80%;
     margin: 10px 10px 0px 10px;
 }

 .navMenuDivider {
     height: 1px;
     background-color: var(--themeColorRGBA01);
     width: 80%;
     margin: 10px 10px 0px 10px;
 }

 .myaccountComp {
     padding: 0px;
 }



 .myaccountComp .contactSupport h5 {
     font-size: 1.2em;
     padding: 0px 0px 15px 25px;
     margin: 0px;
     color: var(--secondaryTextColor);
 }

 .myaccountComp h3 {
     text-transform: uppercase;
     font-size: 1.2em;
     width: 120px;
     font-weight: bold;
     background-color: var(--bgColor);
     color: var(--primaryTextColor);
     margin: -8px 0px 15px 0px;
     padding: 0px 0px 0px 15px;
 }

 .myaccountComp .accountDescpName h5 {
     font-size: 1.3em;
     color: var(--primaryTextColor);
     margin: 0px;
     padding: 10px 10px 10px 20px;
     text-align: left;
 }

 .myProfileInner {
     padding: 0px 10px 25px 10px;
 }

 .accountBox {
     height: 70px;
     aspect-ratio: 1;
     margin-left: 15px;
     border-radius: 45px;
     background-color: var(--themeColorRGBA01);
     border: 1px solid var(--themeColorRGBA01);
 }

 .accountBox img {
     margin-left: -10px;
     margin-top: 5px;

 }

 .brandImage img {
     position: absolute;
     overflow: hidden;
     height: 27px;
     top: 15px;
     left: 60px;
 }

 .iconCompHeader {
     display: flex;
     justify-content: end;
     width: 100px;
     position: absolute;
     right: 15px;
     top: 13px;
 }

 .iconCompHeader img {
     height: 40px;
     margin-top: -5px;
 }

 .iconCompHeader a {
     font-size: 1.5em;
     padding: 3px 20px 5px 00px;
     color: var(--themeColor);
 }

 /*for small screen ends*/
 /*NAVBAR SECTION ENDS */

 /* AUTHENTICATE COMPONENT STARTS*/

 .setNavHeadLogin {
     height: 90px;
 }

 .loginCrum .container-fluid {
     padding: 0%;
     margin: 0%;
 }



 .loginContent {
     padding: 0% 10% 2% 10%;
 }

 .loginContent h5 {
     margin: 0px;
     font-size: 1.2em;
     font-weight: 600;
     color: var(--secondaryTextColor);
     padding: 15px 0px 0px 0px;
 }

 .loginContent h6 {
     padding-left: 0px;
     font-size: 1.2em;
     font-weight: normal;
     margin: 0px;
     color: var(--primaryTextColor);
     padding: 0px 0px 0px 0px;
 }

 .loginContent h6 a {
     padding: 0px;
     font-weight: normal;
 }

 .LoginContent .authWelcomeComp h1 {
     font-size: 1.2em;
     letter-spacing: 1px;
     font-weight: bold;
     padding-top: 5%;
     text-transform: uppercase;
 }

 .LoginContent .authWelcomeComp h2 {
     font-size: 2em;
     font-weight: normal;
     color: var(--themeColor);
     line-height: 45px;
 }

 .checkbox h4 {
     font-size: 1em;
     font-weight: bold;
     padding-top: 25px;
 }

 .checkbox h5 {
     font-size: 1em;
 }

 .formLoginWell .well h5 {
     text-align: center;
     padding-top: 7.5%;
 }

 .authWelcomeComp h2 span {
     font-weight: bold;
     font-size: 1.5em;
 }

 .authImageComp {
     overflow: hidden;
     height: 100%;
 }

 .formLoginWell .well {
     padding: 7% 10% 2% 10%;
     background-color: white;
     box-shadow: var(--box-shadow10);
     border: 1px solid rgba(56, 40, 44, 0.2);
     border-radius: 10px;
 }

 .formLoginWell .buttonAuthenticate {
     padding: 10px;
     font-size: 1em;
     margin-top: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .formLoginWell a.forgotPassword {
     float: left;
     padding-top: 20px;
 }

 .formLoginWell h6 {
     text-align: center;
     line-height: 20px;
     padding-top: 5%;
     font-size: 1em;
 }

 .formLoginWell h6 a {
     color: var(--secondaryColor);
 }

 .formLoginWell .well span {
     color: red;
 }

 .formLoginWell .well label {
     font-weight: 100;
 }

 .formLoginWell .well input {
     border-radius: 5px;
     font-size: 1em;
     border: 1px solid var(--themeColorRGBA03);
     padding: 25px 15px;
 }

 .formLoginWell .well select {
     border-radius: 5px;
     font-size: 1em;
     border: 1px solid var(--themeColorRGBA03);
     height: 50px;
 }

 .formLoginWell .well span.required {
     color: red;
     font-size: 1.2em;
 }



 .authWelcomeComp h1 {
     font-size: 1em;
     letter-spacing: 1px;
     font-weight: bold;
     padding-top: 5%;
     text-transform: uppercase;
 }

 .authWelcomeComp h2 {
     font-size: 1.5em;
     text-align: center;
     font-weight: normal;
     color: var(--themeColor);
     line-height: 30px;
 }

 .checkbox h4 {
     font-size: 1em;
     font-weight: bold;
     padding-top: 25px;
 }

 .checkbox h5 {
     font-size: 1em;
 }



 .authWelcomeComp h2 span {
     font-weight: bold;
     font-size: 1.5em;
 }

 .authImageComp {
     overflow: hidden;
     height: 100%;
 }

 .formRegisWell .well {
     background-color: white;
     box-shadow: var(--box-shadow10);
     border: 1px solid var(--themeColorRGBA02);
     border-radius: 10px;
 }

 .formRegisWell .buttonAuthenticate {
     padding: 10px;
     font-size: 1em;
     margin-top: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .formRegisWell a.forgotPassword {
     float: left;
     padding-top: 20px;
 }

 .formRegisWell h6 {
     text-align: center;
     line-height: 20px;
     padding-top: 0%;
     font-size: 1em;
 }

 .formRegisWell h6 a {
     color: var(--secondaryColor);
 }

 .formRegisWell .well span {
     color: red;
 }

 .formRegisWell .well label {
     font-weight: 100;
 }

 .formRegisWell .well input {
     border-radius: 5px;
     font-size: 1em;
     border: 1px solid var(--themeColorRGBA03);
     padding: 25px 15px;
 }

 .formRegisWell .well select {
     border-radius: 5px;
     font-size: 1em;
     border: 1px solid var(--themeColorRGBA03);
     height: 50px;
 }

 .formRegisWell .well span.required {
     color: red;
     font-size: 1.2em;
 }


 /* AUTHENTICATE COMPONENT ENDS*/

 /* CONFIRM ADDRESS STARTS*/
 .AccountConfirmTab .well {
     padding: 15px 15px 4px 15px;
     border-radius: 10px;
     background-color: white;
     border: 1px solid var(--themeColorRGBA02);
     margin-bottom: 10px;
     box-shadow: var(--box-shadow10);
 }

 .AccountConfirmTab .well label {
     font-weight: 100;
 }

 .AccountConfirmTab .well input {
     border-radius: 5px;
     border: 1px solid var(--themeColorRGBA03);
     padding: 20px 15px;
     margin-bottom: -5px;
 }

 .AccountConfirmTab .well select {
     border-radius: 5px;
     font-size: 1em;
     border: 1px solid var(--themeColorRGBA03);
     height: 40px;
 }

 .AccountConfirmTab .well span {
     color: red;
     font-size: 1.1em;
 }

 .AccountConfirmTab .buttonProfileUpdate {
     background-color: var(--themeColor);
     border-radius: 5px;
     padding: 10px 25px;
     border: 1px solid var(--themeColor);
     color: white;
     font-size: 1em;
     letter-spacing: 0.2px;
     width: 100%;
 }

 .AccountConfirmTab .well h4 {
     background-color: var(--themeColorRGBA01);
     padding: 5px 15px;
     border-radius: 5px;
     margin: 0px 0px 10px 0px;
     text-align: left;
 }

 .ConfirmCheckOut .well h2 {
     font-size: 1.1em;
     margin: 0px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 1px;
     padding: 5px 0px 15px 0px;
     color: var(--themeColor);
 }

 .ConfirmCheckOut .well h3 {
     font-size: 1.4em;
     margin: 0px;
     text-align: right;
     color: var(--themeColor);
     padding: 17px 0px 0px 0px;
 }

 .ConfirmCheckOut .well h4 {
     font-size: 1.2em;
     margin: 0px;
     text-align: left;
     padding: 15px 0px 0px 0px;
 }

 .ConfirmCheckOut .well h5 {
     font-size: 1em;
     margin: 0px;
     padding: 10px 0px 0px 0px;
 }

 .ConfirmCheckOut .well .free {
     margin: 0px;
     padding-bottom: 15px;
     line-height: 23px;
     font-size: 1em;
     padding-left: 5px;
 }

 .ConfirmCheckOut .well {
     background-color: white;
     border: 1px solid var(--themeColorRGBA01);
     border-radius: 10px;
     padding: 15px;
     box-shadow: var(--box-shadow10);
 }

 .dottedLine {
     height: 1px;
     border-bottom-style: dotted;
     padding: 10px 0px;
     opacity: 0.4;
 }

 .ConfirmCheckOut .well .buttonCheckout {
     background-color: var(--themeColor);
     border-radius: 5px;
     padding: 10px 25px;
     border: 1px solid var(--themeColor);
     color: white;
     font-size: 1em;
     letter-spacing: 0.2px;
     margin-top: -25px;
     width: 100%;
 }

 .AccountTab .well h4 {
     background-color: var(--themeColorRGBA01);
     padding: 5px 15px;
     border-radius: 5px;
     margin: 0px 0px 10px 0px;
     text-align: left;
 }

 .ConfirmCheckOut .well .verticalLine {
     height: 0.5px;
     background-color: var(--themeColorRGBA02);
     width: 100%;
     margin: 25px 0px 10px 0px;
 }

 /* CONFIRM ADDRESS ENDS*/

 /* PRODUCT CATEGORY SUB-CATEGORY BOX COMP STARTS*/

 /* Center the loader */
 #loader {
     position: fixed;
     left: 55%;
     top: 40%;
     z-index: 1;
     width: 50px;
     height: 50px;
     margin: 0px 0 0 0px;
     border: 5px solid #f3f3f3;
     border-radius: 50%;
     border-top: 5px solid var(--secondaryColor);
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
 }

 @-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
     }
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* 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: -50px;
         opacity: 0
     }

     to {
         bottom: 0px;
         opacity: 1
     }
 }

 @keyframes animatebottom {
     from {
         bottom: -30px;
         opacity: 0
     }

     to {
         bottom: 0;
         opacity: 1
     }
 }

 #myDiv {
     display: none;
     text-align: center;
 }

 #myDiv h5 {
     text-align: left;
     font-size: 1em;
     margin: 0px;
     padding: 0px;
 }

 .bodyContent .shopByCategory {
     padding: 0% 0%;
 }





 .productImage .image {
     position: relative;
     width: 360px;
     /* can be omitted for a regular non-lazy image */
     max-width: 100%;
 }

 .productImage .image img.Sirv.image-hover {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     object-fit: contain;
     opacity: 0;
     transition: opacity .4s;
 }

 .productImage .image :hover img.Sirv.image-hover {
     opacity: 1;
     background-color: white;
 }



 /*PRODUCT CATEGROY SUB-CATEGORY BOX COMP ENDS*/

 /*  INDEX STARTS */

 .categorySlider {
     display: flex;
     height: 110px;
     overflow-x: scroll;
     overflow-y: hidden;
     justify-content: space-between;
 }

 .categorySlider::-webkit-scrollbar {
     display: none;
 }

 .categoryComp {
     height: 80px;
     width: 80px;
     border-radius: 0px;
     padding: 10px;
     margin-right: 20px;
     background-color: #D3F6F6;
 }

 .categorySlider a h4 {
     margin-top: 8px;
     padding-left: 10px;
     display: flex;
     justify-content: space-between;
     font-size: 0.9em;
     font-weight: 600;
     color: var(--primaryTextColor);
 }

 .mySwiper {
     width: 100%;
     height: 100%;
     padding: 5px 0px 20px 0px;
 }

 .swiper-slide {
     text-align: center;
     background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .swiper-slide img {
     display: block;
     width: 100%;
     height: 100%;
     margin-bottom: -15px;
     border-radius: 0px;
     object-fit: cover;
 }

 .autoplay-progress {
     position: absolute;
     right: 20px;
     bottom: 35px;
     z-index: 10;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--themeColor);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     color: white;
 }

 .autoplay-progress svg {
     --progress: 0;
     position: absolute;
     left: 0;
     top: 0px;
     z-index: 10;
     width: 100%;
     height: 100%;
     stroke-width: 4px;
     stroke: white;
     fill: none;
     stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
     stroke-dasharray: 125.6;
     transform: rotate(-90deg);
 }

 #smallScreenSlider {}

 #smallScreenSlider .slideshow-container {

     position: relative;
     margin: auto;
 }


 #smallScreenSlider .dot {
     height: 10px;
     width: 10px;
     margin: 0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.6s ease;
 }

 #smallScreenSlider .active {
     background-color: white;
 }

 /* Fading animation */
 #smallScreenSlider .fade {
     animation-name: fade;
     animation-duration: 4s;
 }

 @keyframes fade {
     from {
         opacity: 0.8
     }

     to {
         opacity: 1
     }
 }

 /* On smaller screens, decrease text size */
 @media only screen and (max-width: 300px) {
     .text {
         font-size: 11px
     }
 }


 .shopByCategory {
     padding: 2% 0%;
 }

 .productCategoryContainer .categoryImgComp {


     transition: 0.3s ease-in;
 }

 .productCategoryContainer .categoryImgComp img {

     transform: scale(1.2);
     margin-top: 25px;
     transition: 0.3s ease-in;
 }

 .shopByCategory h3 {
     text-align: center;
     font-size: 2em;
     letter-spacing: 2px;
     padding-bottom: 25px;
     text-transform: uppercase;
 }

 .productCategoryComp .well {
     margin-right: 10px;
     padding: 10px;
     background-color: rgba(45, 170, 158, 0.5);
     cursor: pointer;
     border-radius: 50%;
     overflow: hidden;
     transition: 0.3s ease-in;
     cursor: pointer;
 }

 .productCategoryComp .well:hover .categoryImgComp img {
     transform: scale(1.3);
     transition: 0.1s ease-in;
 }

 .productCategoryComp h4 {
     color: var(--themeColor);
     text-align: center;
     font-size: 1.1em;
     font-weight: bold;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin: -10px 0px 0px 0px;
     padding: 0px 0px;
 }

 .productCategoryComp .well a {
     color: var(--themeColor);
 }



 .productContainer {
     display: flex;
     justify-content: left;
     flex-wrap: wrap;
 }

 .categoryProduct .productsCategory .well {
     background-color: white;
     padding: 5px 0px 0px 0px;
     overflow: hidden;
     box-shadow: none;
     cursor: pointer;
     border: 1px solid rgba(45, 170, 158, 1.0);
     transition: 0.2s ease-in;
 }

 .categoryProduct .productsCategory .well:hover {
     box-shadow: var(--box-shadow20);
     transition: 0.2s ease-in;
     border: 1px solid var(--themeColorRGBA02);
 }

 .categoryProduct .productImage .image img {
     background-color: white;
     margin-left: 0px;
     margin-top: 15px;
     transition: 0.2s ease-in;
     position: relative;
     max-width: 100%;
 }

 .categoryProduct .productImage .image img.Sirv.image-hover {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     object-fit: contain;
     opacity: 0;
     transition: opacity .4s;
 }

 .categoryProduct .productImage .image :hover img.Sirv.image-hover {
     opacity: 1;
     background-color: white;
     transition: 0.3s ease-in;
 }

 .categoryProduct .productsCategory .well .productInfo h3 {
     font-size: 1em;
     line-height: 20px;
     padding: 2px 10px 0px 10px;
     height: 40px;
     text-align: center;
 }

 .categoryProduct .productsCategory .well h3 a {
     color: var(--primaryTextColor);
 }

 .categoryProduct .productsCategory .well .productInfo {
     background-color: white;
     position: relative;
     margin-top: 0px;
     width: 100%;
     padding-bottom: 15px;
     transition: 0.1s ease-in;
 }



 .categoryProduct .productsCategory .well h6.loginTopRated {
     text-align: center;
     font-size: 0.9em;
     margin-bottom: 0px;
 }

 .categoryProduct .productsCategory .well .buttonAddCart {
     background-color: white;
     color: var(--primaryTextColor);
     border: 1px solid var(--themeColor);
     padding: 7px;
     width: 100%;
     font-size: 0.9em;
     margin: 0px 0px 0px 0px;
 }

 .productCompTopRated .ZoomIndexButton {
     position: absolute;
     top: 0px;
     margin-top: 00px;
     right: 5px;
     color: rgba(45, 170, 158, 1.0);
     border: none;
     font-size: 1em;
     padding: 5px 10px;
     border-radius: 5px;
     background-color: rgba(45, 170, 158, 0.2);
     font-weight: normal;
     z-index: 55;
 }

 .categoryProduct .productsCategory .well .productPrice span.priceTag {
     font-size: 1.2em;
     font-weight: bold;
     padding-top: 5px;
     color: var(--themeColor);
 }

 .categoryProduct .productsCategory .well span.strike {
     color: grey;
     font-size: 1.1em;
     font-weight: bold;
 }

 .categoryProduct .productsCategory .well span.priceBeforeDiscount {
     color: green;
     font-weight: bold;
     background-color: rgba(45, 170, 158, 0.2);
     padding: 5px 10px;
     font-size: 0.9em;
     float: right;
     margin-top: 0px;
     border-radius: 5px;
 }

 .smallScrCateCollapse h4 {
     font-size: 1.3em;
     margin: 0px;
     padding: 0px;
 }

 .CollapseSlider {
     background-color: white;
     color: var(--themeColor);
     font-size: 1.7em;
     margin-top: -4px;
     border: none;
 }

 .productCategoryContainer .productCategoryComp .well {
     margin-right: 10px;
     padding: 10px;
     background-color: white;
     cursor: pointer;
     border: 1px solid var(--themeColorRGBA02);
     border-radius: 10px;
     overflow: hidden;
     transition: 0.3s ease-in;
     cursor: pointer;
     box-shadow: var(--box-shadow40);
 }

 span#totalPriceString {
     font-size: 1.3em;
     padding: 0px;
     font-weight: bold;
     margin: 0px;
 }

 .productCategoryContainer .productCategoryComp .well:hover {

     transition: 0.3s ease-in;
 }

 .productCategoryContainer .categoryImgComp img {
     transition: 0.2s ease-in;
 }

 .productCategoryContainer .productCategoryComp .well:hover .categoryImgComp img {
     transform: scale(1.3);
     transition: 0.3s ease-in;
 }

 .shopByCategory .categoryBox h4 {
     color: var(--themeColor);
     text-align: center;
     font-size: 1.1em;
     font-weight: bold;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin: -10px 0px 10px 0px;
     padding: 0px 0px;
 }

 .shopByCategory .productPaggHead h3 {
     text-align: left;
     font-size: 1.5em;
     margin: 0px;
     font-weight: bold;
     letter-spacing: 2px;
     padding-bottom: 10px;
     text-transform: uppercase;
 }

 .shopByCategory .productPaggHead h4 {
     text-align: right;
     font-size: 0.9em;
     margin: 0px;
     letter-spacing: 0px;
     padding-bottom: 25px;
 }

 /* INDEX ENDS */

 /*FOOTER LANDING */
 .iconUp {
     background-color: white;
     height: 40px;
     width: 40px;
     border-radius: 50%;
     position: fixed;
     scroll-behavior: smooth;
 }

 .iconUp i {
     font-size: 1.3em;
     padding-top: 10px;
     padding-left: 12px;
     color: var(--themeColor);
     scroll-behavior: smooth;
 }

 .whatsappIcon {
     padding: 5px;
     background-color: transparent;
     border: none;
     position: fixed;
     overflow: hidden;
     z-index: 1;
 }

 .whatsIcon {
     font-size: 1.7em;
     height: 40px;
     width: 40px;
     background-color: #25D366;
     color: white;
     border-radius: 50%;
     padding-top: 2px;
     padding-left: 8px;
     z-index: 1;
     border: none;
 }

 #sectionFooter {
     padding-top: 00px;
     padding-bottom: 0px;
     color: #fff;
     background-color: var(--themeColor);
     margin-top: 0px;
     background-image: url(img/smokeFooter.png);
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
 }


 .addressCard .brandLogo img {
     height: 40px;
     margin: 10% 0%;
 }

 .addressCard .paymentOption h3 {
     font-size: 1.1em;
     font-weight: normal;
 }

 .addressCard .paymentOption img {
     height: 20px;
 }

 .addressCard h3 {
     font-size: 2.5em;
     font-weight: bold;
 }

 .addressCard h5 {
     font-size: 1.1em;
     margin-top: -10px;
     padding-left: 3px;
 }

 .addressCard h4 {
     line-height: 25px;
 }

 .addressCard p {
     font-size: 1.2em;
     margin-top: -15px;
     padding-bottom: 15px;
     line-height: 25px;
 }

 .addressIcon {
     background-color: var(--secondaryColor);
     height: 40px;
     width: 40px;
     border-radius: 50%;
 }

 .addressIcon i {
     padding-top: 12px;
     padding-left: 12px;
 }

 
 .helpCard h1 {
     text-align: center;
     font-size: 2.5em;
     letter-spacing: 1px;
     font-weight: bold;
 }

 .helpCard h4 {
     text-align: center;
 }

 .helpCard a {
     color: white;
     letter-spacing: 1px;
 }



 .icons ul a {
     color: var(--secondaryColor);
 }

 .icons ul {
     margin: 0;
     padding: 0;
     color: var(--secondaryColor);
     display: flex;
     margin-top: 20px;
 }

 .icons ul li {
     list-style: none;
     position: relative;
     width: 50px;
     height: 60px;
     line-height: 50px;
     text-align: center;
     background-color: transparent;
     color: var(--secondaryColor);
     transition: .5s;
     font-size: 24px;
     cursor: pointer;
 }

 .icons ul li a:hover {
     color: white;
 }

 .icons ul li span {
     position: absolute;
     top: -20px;
     left: 50%;
     transform: translateX(-50%) translateY(-20px);
     width: 120px;
     height: 24px;
     line-height: 24px;
     background-color: white;
     color: var(--secondaryColor);
     font-size: 10px;
     border-radius: 4px;
     letter-spacing: 1px;
     transition: 0.5s;
     opacity: 0;
     visibility: hidden;
 }

 .icons ul li:hover span {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0px);
 }

 .icons ul li span:before {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 50%;
     transform: rotate(45deg) translateX(-50%);
     width: 10px;
     height: 10px;
     background-color: white;
     z-index: -1;
 }

 .footerCopyRightComp {
     background-color: transparent;
     border-radius: 15px;
 }

 .createdBy a {
     color: white;
 }

 .createdBy span {
     color: white;
 }

 .createdBy h6 {
     font-size: 0.8em;
     text-align: right;
     padding-left: 0px;
 }

 .copyright h6 {
     font-size: 0.9em;
     text-align: left;
 }

 .policyLinks h6 {
     display: flex;
     justify-content: space-evenly;
 }

 .policyLinks h6 {
     font-size: 1em;
 }

 .policyLinks a {
     color: white;
 }

 /*FOOTER LANDING*/