/**************************************************************************
***************** Master Stylesheet for Sophia ecommerce************************
***************************************************************************
=========================== Content Index =================================
* 1. General styles
* 2. HOME-1 STYLES
     - Info bar styles
     - Header-1 styles
     - Shopping widget styles
     - Home product section styles
     - Home baners section styles
     - Home vertical-product section styles
     - Home footer section styles
* 3. HOME-2 STYLES
     - Carousel styles
     - Header-2 styles
     - Info bar styles
     - Shopping widget styles
     - Home-2 product section styles
* 4. HOME-3 STYLES
     - Carousel styles
     - Header-2 styles
     - Info bar styles
     - Shopping widget styles
     - Home-2 product section styles
* 4. HOME-4 STYLES
     - Carousel styles
     - Header-2 styles
     - Info bar styles
     - Shopping widget styles
     - Home-2 product section styles
* 3. Menu-1 styles
* 4. Menu-2 styles
* 5. Products left sidebar page styles
* 6. Popular product page styles
* 7. My account page styles
* 8. Blog- column page styles
* 9. Blog- details page styles
* 10. Blog- list page styles
* 11. Price slider styles
* 12. Product dialog styles
* 13. Popular products styles

***************************************************************************
**************************************************************************/
/***************************************/
@-webkit-keyframes rotation {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(359deg);
  }
}
.color-options{
  width: 60px;
  height: 300px;
  position: fixed;
  top: 414px;
  right: -62px;
  z-index: 9999;
  .options-icon{
      padding: 0;
      position: absolute;
      top: 12px;
      left: -46px;
    min-width: 49px;
      z-index: 1;
      box-shadow: -2px 3px 1px -2px rgba(0,0,0,.2), 
                  -2px 2px 2px 0 rgba(0,0,0,.14), 
                  -2px 1px 5px 0 rgba(0,0,0,.12) !important;
                  padding-right: 15px;
                  
                  .mat-icon {
                    -webkit-animation: rotation 2s infinite linear;
                  }
  }
  .mat-card{
      position: absolute;
      padding: 14px;
      width: 100%;
      height: 100%;
  }
  &.show{
      right: -2px;
      -webkit-transition: max-height 0.25s ease-in;
      -moz-transition: max-height 0.25s ease-in;
      transition: max-height 0.25s ease-in;
  }
  .skin-icon{
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;        
      &.green{
          background-color: #438807;
      }
      &.blue{
          background-color: #0087d4;
      }
      &.red{
          background-color: #d32f2f;
      }
      &.pink{
          background-color: #c2185b;
      }
      &.purple{
          background-color: #7b1fa2;
      }
      &.grey{
          background-color: #455a64;
      }
  }
}


/***************************************
* 1. General styles
****************************************/
.mat-warn .mat-slider-thumb, .mat-warn .mat-slider-thumb-label, .mat-warn .mat-slider-track-fill {
  background-color: #ff7e00 !important;
}
.mat-primary .mat-slider-thumb, .mat-primary .mat-slider-thumb-label, .mat-primary .mat-slider-track-fill {
  background-color: #ff7e00 !important;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Roboto",Arial,Helvetica,sans-serif;
  position: relative;
  font-size: 1rem;
 color: $font-color !important;
}

h1 {
  font-size: 60px;
  color: $theme-main-dark;
  font-weight: 700;
  font-family: 'Gelasio', serif;
  text-transform: uppercase;
}

h2 {
  font-size: 33px;
  color: $theme-main-dark;
  text-transform: capitalize;
  font-family: 'Gelasio', serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

h3 {
  font-size: 28px;
  text-align: left;
  color: $theme-main-dark;
  margin: 0;
  font-weight: 600;
  font-family: 'Gelasio', serif;
}

h4 {
  font-size: 21px;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 1;
  font-family: 'Gelasio', serif;
}

h5 {
  font-size: 16px;
  font-weight: 400;
  color: $theme-main-dark;
  line-height: 24px;
  letter-spacing: 0.05em;
  font-family: "Gelasio", serif;
}

h6 {
  font-size: 14px;
  font-weight: 400;
  color: $theme-main-dark;
  line-height: 24px;
}
.mat-menu-content {
  width: 221px;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 4px solid $theme-main !important;
}
.btn-project {
  padding: 5px 32px!important;
  color: $white !important;
  border-radius: 0 !important;
  
  transition: .3s;

}
* {
  margin: 0;
  padding: 0;
}
.mat-raised-button:not([class*=mat-elevation-z]) {
  box-shadow: none;
}
.mat-slider-track-fill {
  background-color: $theme-main;
}
.mat-primary .mat-slider-thumb {
  background-color: $theme-main;
}
.mat-raised-button.mat-warn {
  background-color: $theme-main-red;
}
.mat-card:not([class*=mat-elevation-z]) {
  box-shadow: none !important;

}
// .overlay {
//   background-color: rgba(255, 193, 17, 0.8) !important;
//   position: fixed;
// }
.mat-form-field.mat-focused .mat-form-field-label{color:$theme-main}
.mat-form-field.mat-focused .mat-form-field-ripple{background-color:$theme-main}
.mat-expansion-indicator::after, .mat-expansion-panel-header-description {
  color:$grey4;
}
.sophia-app .mat-drawer-container {
background: #fff;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  display: block;
  overflow: hidden;

}
.mat-menu-panel {
  min-width: 100% !important;
  max-width: 100% !important;

}
.mat-mini-fab.mat-accent {
  background-color: $theme-main;
}
a {
  text-decoration: none;
}
.text-center {
  text-align: center !important;
}
li {
  list-style-type: none;
}
.mat-snack-bar-container.error {
  background: $theme-main-red !important;
}
.mat-drawer-backdrop {
  background-color: rgba(0,0,0,.6);
}
.mat-drawer-container {
  color: $font-color;
}
.mat-radio-label-content {
  color: $grey7;
  font-weight: 400;
  }
  .mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
    background-color: $theme-main-red;
  }
  .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background: $theme-main-red !important;
  }
  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: $theme-main-red !important;
}
.mat-raised-button.mat-primary {
 
  padding: 3px 32px;
  color: $white;
  border-radius: 0;
  transition: .3s;
 
}
.mat-input-element {
  caret-color: $theme-main !important;;
}
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 15px !important;
}
.divider {
  border-top: 1px solid $grey3;
}
.bg {
  background: $background;
}
.ml-10 {
  margin-left: 10px;
}
.mb-5 {
  margin-bottom: 5px !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.w-50 {
  width: 50%;
}
.mr-10 {
  margin-right: 10px !important;
}
.ml-10 {
  margin-left: 10px !important;
}

.mt-20 {
  margin-top: 20px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mt-40 {
  margin-top: 40px !important;
}
.mt-15 {
  margin-top: 15px;
}
.mt-10 {
  margin-top: 10px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.mr-7 {
  margin-right: 7px !important;
}
.ml-7 {
  margin-left: 7px !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pl-15 {
  padding-left: 15px;
}
.pr-15 {
  padding-right: 15px;
}
.no-pdn {
  padding: 0 !important;
}
.pt-20 {
padding-top: 20px !important;
}
.pl-5 {
  padding-left: 5px !important;
}
.pr-5 {
  padding-right: 5px !important;
}
.pr-50 {
  padding-right: 50px !important;
}
.pt-40 {
  padding-top: 40px !important;
  }
  .pt-60 {
    padding-top: 60px !important;
    }
    .devider {
      padding-top: 15px;
    padding-bottom: 20px;
    border-top: 1px dashed $grey;
    }
    .w-100 {
width: 100% !important;
    }
.text-muted {
  color: $grey !important;
}
.sec-padding {
  padding: 60px 0;
}

.btn-project {
  
  padding: 3px 32px;
  color: $white;
 
  border-radius: 0;
  transition: .3s;
 
  }


  .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: $theme-main;
}

    /***************************************
    ***************************************
    ***************************************
*  HOME-1 STYLES
****************************************
****************************************
****************************************/
/***************************************
*  Carousel-1 styles
****************************************/
.main-slider{
  height: 760px;
  .sl-wrap {
    position: relative;
    height: 100%;
    .content{
      height: 100%;
      position: relative;
      z-index: 9;
      /* padding-left: 294px; */
      vertical-align: middle;
      position: relative;
      text-align: center;
      /* top: 58%; */
      button {
        background: $theme-main;
        // color: $white;
        // border: 2px solid $white;
        border-radius: 0;
        padding: 5px 33px;
        width: 200px;
        margin: 0 auto;
        margin-top: 20px;
        span {
          font-size: 14px;
      font-weight: 700;
          text-transform: uppercase;
        }
      }
      h1{
        font-size: 48px;
        text-align: center;
        color: $white;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 0;
        // color: $white;
    }
    p{
        font-size: 19px;
        text-align: center;
        color: $white;
        margin-bottom: 30px;
        font-weight: 400;
         width: 756px;
         margin: 0 auto;
         line-height: 35px;
    }
    }
  }

  .slide-item{
    height: 100%;
    background-size: cover;
    background-position: center;
  }

}


.swiper-pagination-bullet-active {
  background: $white !important;
}




      /* .mask{
          opacity: 0.6;
          width: 100%;
          height: 100%;
          position: absolute;
          overflow: hidden;
          z-index: 0;
          background-color: rgba(0,0,0,0.8);
      } */

  .swiper-lazy-preloader{
      top: 18%;
  }



.h-100 {
  height: 100%;
}
    /***************************************
*  Topbar styles
****************************************/

.main-topbar {
  background: $sec-color ;
  min-height: 49px;
    max-height: 55px;
 .top-bar {
     .widget-text {
       a {
         color: $white;
         text-decoration: none;
         font-size: 13px;
         transition: .4s;
         .mat-icon {
           vertical-align: middle;
           margin-right: 1px !important;
           font-size: 23px;
         }
         &:hover {
           color: $theme-main;
         }
       }
       &:not(:last-child) {
         margin: 0 20px 0 0;
       }
       .mat-button-wrapper {
         img {
           margin-right: 3px;
         }
       }
     }

   .welcome-message {
     p {
       color: $grey7;
       font-size: 13.5px;
       font-weight: 400;
     }
   }
   span {
     .mat-icon {
       color: $theme-main;
     }
   }
   .cur-icon {
     color: $white !important;
   }
  }
}
    /***************************************
*  Header-1 styles
****************************************/


.header {
  position: relative;
  .header-wrapper {
    position: absolute;
    top: 20px;
    z-index: 9999;
    left: 0;
    right: 0;
    .main-menu {
      a {
        text-transform: uppercase;
        color: $white;
      }
    }
  }
}

.mat-menu-content {
  width: 221px;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 4px solid $grey3 !important;
}




    /***************************************
*  Menu styles
****************************************/
.widgets {
  width: 30px;
  margin-left: 0;
  position: relative;
  padding-top: 10px;
   .bucket {
     .mat-button-wrapper {
      width: 30px;

      svg {
        max-height: 40px;
        fill: $white;
      }
      .mat-badge {
        margin-left: -10px;
      }
      .cart-count-wrapper {
       position: absolute;
       text-align: center;
       top: -3px;
       left: 37px;
       background: $white;
       height: 18px;
       width: 18px;
       line-height: 18px;
       border-radius: 50%;
       font-size: 11px;
       color: $theme-main;
       font-weight: 700;
      }
     }
.top-cart {
  span {
    color: $white;
  }
}
   }

}
.spCard-main {
  width: 100%;
  .mat-menu-content {
    width: 239px !important;

}
  .spCard-dropdown {
    background-color: $white;
      padding: 15px 10px;
      max-width: 300px;
      z-index: 400;
      .card-list-title {
       padding: 0 0 10px 0;
      }
      h4 {
        padding-bottom: 10px;
      }
      .new-product {
        .product {
          img {
            width: 70px;
          }
        }
        .close-circle {
          flex: 1;
          a{
            cursor: pointer;
            color: $grey3;
            transition: .3s;
            float: right;
            &:hover {
              color: $theme-main;
            }
            i {
              font-size: 20px;
            }
          }
        }
        .item {
          padding: 10px 0;
          .product {
            margin-right: 7px;
            background: #ffffff;
            /* border-radius: 3px; */
            border: 1px solid #e7e7e7;
          }
          .desc {
            p {
              font-weight: 500;
             }
             span {
              color: $grey;
                font-size: 15px;
                margin-top: 5px;
                /* padding-top: 7px; */
                display: block;
            }
          }
        }
        .total {
          padding-top: 15px;
          p {
            font-size: 15px;
          }
          span {
            font-weight: 500;
            font-size: 16px;
          }
        }
      }
      .card-list-title {
        a{
          color: $grey4;
          font-size: 14px;
          font-weight: 500;
         }
         p{
          color: $grey4;
          font-size: 14px;
          font-weight: 500;
         }
      }

  .woo-message {
    text-align: center;
      padding: 0;
      margin: 1.5em 0 0 0;
  }
  }
}

    /***************************************
*  Shopping widget styles
****************************************/





.card-list-title2 {
  padding: 5px 0 15px 0;
}


/***************************************
* Products styles
****************************************/
.product-section {

  position: relative;
  top: -15px;
  background-size: auto 75px;
  background-repeat: repeat-x;
  background-position: center 0;
  z-index: 989;
  .back-img1 {
    position: absolute;
    left: 0;
    top: 56px;
  }
  .back-img2 {
    position: absolute;
    left: 0;
    bottom: 56px; 
  }
  .back-img3 {
    position: absolute;
    right: 0;
    bottom: 235px;
  }
  .head-title {
    text-align: center;

    h3 {
      text-align: center;
      margin-bottom: 15px;
    }
    p{
      line-height: 28px;
      margin-top: 0px;
    }

  }
  .prod-menu {
    margin-top: 45px;
    margin-bottom: 45px;
    ul {
      li {
        cursor: pointer;
        transition: .3s;
        .icon {
          height: 50px;
          svg {
            max-height: 38px;
            fill: $grey4 !important;
            .cls-1 {
              stroke: $grey4 !important;
            }



          }
        }
        .text {
          p {
            color: $grey;
            margin: 0;
          }
        }
        &:hover {
          transition: .3s;
          .icon {
            svg {
              color: $theme-main;
            }
          }
          .text {
            p {
               transition: .3s;
              color: $theme-main;
            }
          }
        }
      }
    }
  }
  .product-wrapper {
    display: grid;
    // grid-template-rows: 150px 150px;
     grid-template-rows: repeat(2, auto);
     grid-template-columns: repeat(4, 1fr);
    // grid-template-columns: 150px 150px 150px;
     grid-row-gap: 20px;
     grid-column-gap: 20px;
    .product-box {


      .product-item {
        position: relative;
        overflow: hidden;

        // transition: all .5s ease;
        mat-card {
          padding: 0;
          box-shadow: none;
          border: 1px solid $grey6;
          .product-img {
            text-align: center;
            cursor: pointer;
            img {
            max-width: 180px;
            }
          }
          .product-info-wrapper {
            background: #f9f9f9;
            padding: 15px;
                .category {
                 text-align: left;
                 font-weight: 400;
                  color: $grey7;
                }
                .title-wrap {
                  margin: 7px 0;
                  h4 {
           font-size: 21px;
           margin: 0;
                  }
                  p {
                    font-size: 21px;
                    font-family: 'Gelasio', serif;
                    font-weight: 600;
                    margin: 0;
                  }
                }
                .stars {
                 .mat-icon {
                   font-size: 20px;
                 height: 22px;
                 width: 22px;
                  color: $theme-main;
                 }
                }
                .btn-wrap {
                  margin-top: 10px;
                  .view-more {
                    font-weight: 500;
                    color: $grey7;
                    cursor: pointer;
                    }
                    a {
                      cursor: pointer;
                    }
                  .bucket {
                   width: 38px;
                    height:38px;
                    border-radius: 50%;
                    background: #dedede;
                  text-align: center;
                   vertical-align: middle;
                   line-height: 49px;
                    //   box-shadow: none;
                    //   cursor: pointer;
                    a {

                      mat-icon {
                      
                      }
                    }
                  }

                }
                .details-products {

                    .more-info {
                      margin-top: 15px;
                      overflow: hidden;
                      p {
                        line-height: 24px;
                      }
                    }
                }
                .icons {
                  position: absolute;
                  top: 30px;
                  right: -10px;
                  opacity: 0;
                  // transition: all .6s ease;
                  mat-icon {
                    color: $grey4;
                    cursor: pointer;
                  }
                }

          }
          &:hover {
            .icons {
              opacity: 1;
              transition: all .4s ease;
              transform: translateX(-20px);
             .ic-1 {
              animation-delay: 2s;
            }
            .ic-2  {
              animation: .5s ease-in-out fadeInRight;
            }
            .ic-3  {
              animation: .7s ease-in-out fadeInRight;
            }
            }
           }
        }

      }
    }
  }

}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);

  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}
/***************************************
* Popular recipes
****************************************/
.popular-recipes-box {
  padding: 90px 0 0 0;

  background-size: cover;
    position: relative;
    .recipes-contain {
      .head-title {
        text-align: center;
        color: $white;
        margin-bottom: 60px;
        h3 {

          text-align: center;
    margin-bottom: 15px;
          color: $white;
        }
        p {
          line-height: 28px;
          margin-top: 0px;
          margin-bottom: 20px;
        }
      }
      .gallery {
        .gallery-section {
          grid-column: full-start / full-end;
          display: grid;
          /*grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(7, 5vw);*/
          grid-template: repeat(5, 5vw)/repeat(8, 1fr);
          grid-gap: 1.5rem;
          padding: 1.5rem; 
          img {
            max-width: 100%;
            height: auto;
            -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    will-change: transform;
        }
        .gallery__item {
          overflow: hidden;
          cursor: pointer;
          &:nth-child(1) {
            overflow: hidden;
            grid-row: 1 / span 2;
            grid-column: 1 / span 2; }
            &:nth-child(2) {
              grid-row: 1 / span 3;
              grid-column: 3 / span 3; }
              &:nth-child(3) {
            grid-row: 1/span 2;
            grid-column: 8/8; }
          
            &:nth-child(4) {
              grid-row: 3 / span 3;
              grid-column: 1 / span 2; }
              &:nth-child(5) {
                grid-row: 4 / span 2;
                grid-column: 3 / span 2; }
                &:nth-child(6) {
              grid-row: 4/6;
              grid-column: 5/8;}
              &:nth-child(7) {
              grid-row: 1/4;
              grid-column: 6/span 2; }
              &:nth-child(8) {
                grid-row: 3 / span 3;
                grid-column: 8 / -1;
        }
         &:hover {
img {
  -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}
         }
          
               }
        
          .gallery__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 0px;
        }
        }
      }
    }
}

/***************************************
* About products
****************************************/
.about-products {
  padding: 90px 0;
  background: $background;
  .about-products-wrap {
  .left {
   .text {
     text-align: center;
     padding: 0 50px;
   h3 {
    text-align: center;
    margin-bottom: 10px;
   }
   span {
    font-weight: 500;
    line-height: 26px;
    margin-top: 10px;
   }
   p {
    line-height: 26px;
   }
   .btn-project {
     margin-top: 20px;
   }
   }
  }
  .right {
   .img-wrap {
     img {
       max-width: 100%;
       height: auto;
     }
   }
  }
  }
}

/***************************************
* Vertical products
****************************************/
.vertical-products {
  .widget-column {
    .title {
      margin-bottom: 15px;
      position: relative;
      padding-bottom: 1.25rem;
      .widget-title {
        font-size: 21px;
        font-weight: 500;
        margin: 0;
        &::before {
          content: "";
          left: 0;
          position: absolute;
          width: 100%;
          height: 0.0625rem;
          bottom: 0.34375rem;
          background-color:$gray-lighter;
        }
        &::after {
          content: "";
          left: 0;
          position: absolute;
          width: 2.5rem;
          height: 0.125rem;
          background-color:$dark-font;
          bottom: 0.3125rem;
        }
      }
    }
    .media-image {
      background: $gray-lighter;
      margin-right: 20px;
      width: 80px;
     height: 80px;
     border-radius: 3px;
      .small {
        width: 100%;
      }
    }
    .media-body {
      a {
        text-decoration: none;
        span {
          font-size: 17px;
      text-transform: capitalize;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1;
      color: $font-color;
        }
      }

      .stars {
        mat-icon {
          color: $theme-main;
          font-size: 17px;
          line-height: 17px;
          height: 17px;
          width: 17px;
          vertical-align: middle;
      }
      }
      p.price {
        margin-top: 5px;
      }
    }
    .product-list {
      padding: 0;
      li:not(:last-child){
        margin-bottom: 20px;
      }
    }
  }
  .product-panel:not(:last-child) {
    padding-right: 30px;
  }
}

/***************************************
*  Home footer section styles
****************************************/
.footer {
  background-position: center;
  background-repeat: no-repeat;
  // background-size: cover;
  .footer-widget {
    padding-right: 15px;
    text-align: center;
    .social {
      margin-top: 20px;
      li {
        width: 33px;
        height: 33px;
        border: 1px solid $grey4;
        border-radius: 50%;
        text-align: center;
        margin-right: 5px;
        a {

          i {
            color: $white;
          }
        }

      }
    }
    .ped-btn-footer {
      border: 1px solid $theme-main;
      color: $white !important;
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      font-weight: 700;
      margin-top: 20px;
      padding: 0px 10px;
      text-align: center;
      text-transform: uppercase;
      transition: all 0.4s ease 0s;
      z-index: 222;
      background: $theme-main;
      width: 100%;
      border-radius: 3px;
      line-height: 45px;
    }
    .title {
      margin-bottom: 10px;
      h5 {
        color: $white;
        font-size: 18px;
        font-weight: 600;
      }
      }

      a {
        text-decoration: none;
        font-size: 15px;
        line-height: 32px;
        color: $white;
      }


        .newsletter-widget {
          position: relative;
          margin: 15px 0 20px 0;
        }

        p {
          line-height: 24px;
          color: $white;
          font-weight: 300;
          font-size: 15px;
        }
        ul {
          list-style-type: none;
        }
        .about-widget {
          .logo {
            img {
              max-width: 240px;
            }
          }
        }
        .tel-box {
          .icon {
            i {
              color: $white;
              display: block;
              line-height: 27px;
              vertical-align: middle;
              margin-right: 5px;
              width: 18px;
              text-align: center;
              font-size: 18px;
            }
          }
          .text {
            p {
              a {
                line-height: 22px;
              }

            }
          }
        }
  }

  .subscribe-widget {
    input {
      height: 45px;
      background: $white;
      font-size: 15px;
      line-height: 45px;
      border: 1px solid $white-dark;
      border-radius: 4px;
      padding: 0 65px 0 20px;
      color: $grey;
    }
  }
}




/***************************************
*  Sidebar styles
****************************************/


.mat-drawer {
  width: 240px;
  padding: 8px 14px;
  position: fixed;
  margin-left: 0px;
}
.toggle-header {
  height: 64px;
  background: $theme-main-red;
}
.sidebar-menu {
  margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid $grey2;
  .menu-item {
    a {
      color: $theme-main-dark;
      padding: 8px 15px;
    font-size: 16px;
    display: block;
    }
  }
}


/***************************************
*  Products left sidebar page styles
****************************************/


  .left-sidebar-wrapper mat-sidenav.filter-sidenav.mat-drawer.mat-sidenav.ng-tns-c15-4.ng-trigger.ng-trigger-transform.ng-tns-c13-3.ng-star-inserted.mat-drawer-over {
    padding-right: 10px;
  }

  .left-sidebar-wrapper {
    .header-title {

    padding: 130px 0;
    position: relative;
      .title {
        text-align: center;
        h2 {
          color: $white;
          font-size: 52px;
          margin: 0;
        }
        p {
          color: $white;
          line-height: 26px;
        margin: 0;
        }
      }
    }
    .sidebar {

      position: relative;
      top: -15px;
      background-size: auto 75px;
      background-repeat: repeat-x;
      background-position: center 0;
      .mat-expansion-panel {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border: 1px solid $grey-light;
        box-shadow: none !important;
        margin-bottom: 20px;
        .mat-expansion-panel-header-title span {
          font-size: 17px;
          text-transform: capitalize;
          font-weight: 500;

          line-height: 1;
        }
        .mat-expansion-panel-header {

        }
        .mat-expansion-panel-content {
          // border-top: 1px solid $grey-light;
          // padding-top: 17px;
        }
      }

      .filter-sidenav {
        width: 280px;
        border: 0 !important;
        .brands {

          .title-header {
            margin-bottom: 15px;
            position: relative;
            padding-bottom: 1.25rem;
            h4 {
              &::before {
                content: "";
                left: 0;
                position: absolute;
                width: 100%;
                height: 0.0625rem;
                bottom: 0.34375rem;
                background-color: $grey6;
              }
              &::after {
                content: "";
                left: 0;
                position: absolute;
                width: 2.5rem;
                height: 0.125rem;
                background-color: $font-color;
                bottom: 0.3125rem;
              }
            }
          }
          .brand-logos {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-row-gap: 1em;
            grid-column-gap: 1em;
            .brand-item {
              display: inline-block;
              text-align: center;
              vertical-align: top;
              overflow: hidden;
              position: relative;
              margin-right: 10px;
              a {
                img {
                  width: 100%;
                }
              }
            }
          }

        }
        .popular-products {
          margin-top: 20px;
        }
      }
      .filter-row {
        padding: 8px 25px;
        background: $white;
        margin-bottom: 0px;
        box-shadow: none !important;
      }
      .all-products {
        padding-left: 17px;
      background: $white;
      select {
        /* margin: 50px; */
        width: 150px;
        padding: 5px 35px 5px 5px;
        color: $grey7;
        font-size: 16px;
        border: none;
        height: 34px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: transparent;

        cursor: pointer;
        background: url(/assets/images/dropdown.png) no-repeat 90%;
      }
        .col {
          padding: 9px 0 9px 0px;

          .product-item {
            position: relative;
            overflow: hidden;
            padding: 26px 5px 5px 5px;
            // transition: all .5s ease;
            mat-card {
              padding: 0;
              box-shadow: none;
              border: 1px solid $grey6;
              .product-img {
                text-align: center;
                cursor: pointer;
                img {
                max-width: 180px;
                }
              }
              .product-info-wrapper {
                background: #f9f9f9;
                padding: 15px;
                    .category {
                     text-align: left;
                     font-weight: 400;
                      color: $grey7;
                    }
                    .title-wrap {
                      margin: 7px 0;
                      h4 {
               font-size: 21px;
               margin: 0;
                      }
                      p {
                        font-size: 21px;
                        font-family: 'Gelasio', serif;
                        font-weight: 600;
                        margin: 0;
                      }
                    }
                    .stars {
                     .mat-icon {
                       font-size: 20px;
                     height: 22px;
                     width: 22px;
                      color: $theme-main;
                     }
                    }
                    .btn-wrap {
                      margin-top: 10px;
                      .view-more {
                      font-weight: 500;
                      color: $grey7;
                      cursor: pointer;
                      }
                      .bucket {
                        background: #dedede;
                          width: 38px;
                          height:38px;
                          border-radius: 50%;
                          text-align: center;
                          vertical-align: middle;
                          line-height: 49px;
                          cursor: pointer;
                        a {

                          mat-icon {
                           
                           font-size: 21px;
                          }
                        }
                      }
                    }
                    .details-products {
                      .more-info {
                        margin-top: 15px;
                        overflow: hidden;

                    }
                    }
                    .icons {
                      position: absolute;
                      top: 30px;
                      right: -10px;
                      opacity: 0;
                      // transition: all .6s ease;
                      mat-icon {
                        color: $grey4;
                        cursor: pointer;
                      }
                    }

              }
              &:hover {
                .icons {
                  opacity: 1;
                  transition: all .4s ease;
                  transform: translateX(-20px);
                 .ic-1 {
                  animation-delay: 2s;
                }
                .ic-2  {
                  animation: .5s ease-in-out fadeInRight;
                }
                .ic-3  {
                  animation: .7s ease-in-out fadeInRight;
                }
                }
               }
            }

          }
        }
      }
      .no-shadow {
        box-shadow: none !important;
      }
    }

  }


/***************************************
*  Categories menu styles
****************************************/
.categories-menu-wrap {
  .category-contant {
    ul {
      background-color: #403f3f;
    li {
      width: 14.285%;
      transition: .3s;
      a {
        display: flex;
        flex-direction: column;
    line-height: 16px;
    letter-spacing: -.13px;
    color: #fff;
    padding: 15px 16px 18px 16px;
    justify-content: center;
    text-align: center;
    transition: .3s;
    i {
      margin-bottom: 5px;
    }
    &:hover {
      color: $dark-font !important;
        }
      }
      &:hover {
    background: $theme-main;
    color: $dark-font !important;
      }
    }
    }
  }
}
/***************************************
*  Products styles
****************************************/
.home-5-wrap {
  .products {
    position: relative;
    h3 {
      margin-bottom: 0;
      display: inline-block;
      font-size: 22px;
      font-weight: 500;
      position: absolute;
      top: 69px;
    }
    .mat-tab-labels {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}

/***************************************
*  Categories section styles
****************************************/

.home-5-wrap {
  .categories {
    background: $background;
    .title {
      position: relative;
      margin-bottom: 15px;
    padding-bottom: 1.25rem;
      h3 {
        margin-bottom: 0;
      display: inline-block;
      font-size: 22px;
      font-weight: 500;
      &::before {
        content: "";
        left: 0;
        position: absolute;
        width: 100%;
        height: 0.0625rem;
        bottom: 0.34375rem;
        background-color: #e4e4e4;
      }
      &::after {
        content: "";
    left: 0;
    position: absolute;
    width: 2.5rem;
    height: 0.125rem;
    background-color: #222222;
    bottom: 0.3125rem;
      }
      }
    }

      .left-section {
        padding-right: 7px;
        .item {
          background: $white;
          height: 100%;
          padding: 20px;
          border: 1px solid $grey2;
          .product {
            text-align: center;
            img {
              max-width: 40%;
            }
          }
          .product-info {
            display: flex;
            flex-direction: row;
            justify-content: center;
            h4 {
              margin-right: 15px;
              a {
                color: $font-color;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
            ul {
              margin-left: 15px;
              li {
                a {
                  color: $grey;
                  font-size: 15px;
                  &:hover {
                    text-decoration: underline;
                  }
                }
              }
            }
          }
        }
      }
      .right-section {
        padding-left: 7px;
        .item {
          background: $white;
          height: 100%;
          padding: 20px;
          border: 1px solid $grey2;
          .product {
            text-align: center;
            img {
              max-width: 40%;
            }
          }
          .product-info {
            display: flex;
            flex-direction: row;
            justify-content: center;
            h4 {
              margin-right: 15px;
              a {
                color: $font-color;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
            li {
              a {
                color: $grey;
                font-size: 15px;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
  }
}
/***************************************
*  Home footer-2 section styles
****************************************/
.footer-two {
  background-color: $theme-main-dark;

  .footer-widget {
    padding-right: 15px;
    .social {
      margin-top: 20px;
      li {
        width: 33px;
        height: 33px;
        border: 1px solid $grey3;
        border-radius: 50%;
        text-align: center;
        margin-right: 5px;
        a {
              color: $grey-light;
          i {
            color: $theme-main;
          }
        }

      }
    }
    .ped-btn-footer {
      border: 1px solid $theme-main;
      color: $theme-main-dark !important;
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      font-weight: 700;
      margin-top: 20px;
      padding: 0px 10px;
      text-align: center;
      text-transform: uppercase;
      transition: all 0.4s ease 0s;
      z-index: 222;
      background: $theme-main;
      width: 100%;
      border-radius: 3px;
      line-height: 45px;
    }
    .title {
      margin-bottom: 10px;
      h5 {
        font-size: 18px;
        font-weight: 600;
        color: $white;
      }
      }

      a {
        text-decoration: none;
        font-size: 15px;
        line-height: 32px;
        color: $grey-light;
      }


        .newsletter-widget {
          position: relative;
          margin: 15px 0 20px 0;
        }

        p {
          line-height: 24px;
          color: $grey-light;
        }
        ul {
          list-style-type: none;
        }
        .about-widget {
          .logo {
            img {
              max-width: 240px;
            }
          }
        }
        .tel-box {
          .icon {
            i {
              color: $theme-main;
              display: block;
              line-height: 27px;
              vertical-align: middle;
              margin-right: 5px;
              width: 18px;
              text-align: center;
              font-size: 18px;
            }
          }
          .text {
            p {
              a {
                line-height: 22px;
              }

            }
          }
        }
  }

  .subscribe-widget {
    input {
      height: 45px;
      background: $white;
      font-size: 15px;
      line-height: 45px;
      border: 1px solid $white-dark;
      border-radius: 4px;
      padding: 0 65px 0 20px;
      color: $grey;
    }
  }
}








/***************************************
*  Popular product page styles
****************************************/

.popular-products {
  .reviews {
    .content {
      height: auto;
     margin-bottom: 10px;
     margin-left: -15px !important;
      .media {
        margin-right: 7px;
        background: #ffffff;
        border-radius: 0;
        border: 1px solid #e1e1e1;
        img {
          max-width: 80px;
          margin-right: 8px;
        }
      }
      .info {
        h5  {
          color: rgba(0,0,0,.87);
          text-decoration: none;
          font-size: 17px;
          font-weight: 600;
          -webkit-transition: color .4s ease;
          transition: color .4s ease;
        }
        .price {
          font-weight: 400;
        }
      }
    }
  }
  .title-header {
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 1.25rem;
    h4 {
      &::before {
        content: "";
        left: 0;
        position: absolute;
      width: 100%;
      height: 0.0625rem;
      bottom: 0.34375rem;
      background-color: $grey6;
      }
      &::after {
        content: "";
        left: 0;
        position: absolute;
      width: 2.5rem;
      height: 0.125rem;
      background-color: $font-color;
      bottom: 0.3125rem;
      }
    }
  }

}





/***************************************
*  My account page styles
****************************************/
.my-account {
  .header-title {
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .my-acc {
    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
    .my-account-wrap {
      .title {
        margin-bottom: 15px;
        position: relative;
        padding-bottom: 1.25rem;
         > h2 {

         }
         &:before {
          content: "";
          left: 0;
          position: absolute;
          width: 100%;
          height: 0.0625rem;
          bottom: 0.34375rem;
          background-color: $grey6;
         }
         &:after {
          content: "";
      left: 0;
      position: absolute;
      width: 2.5rem;
      height: 0.125rem;
      background-color: $font-color;
      bottom: 0.3125rem;
         }
      }
      form {
        .mat-form-field {
          width: 100%;
          margin-bottom: 10px;
        }

      }
      .register-wrapper {
        .register-body {
          .mat-form-field {
            width: 100%;
            margin-bottom: 10px;
            margin-top: 10px;
          }
          p {
            font-size: 15px;
        font-weight: 400;
        line-height: 26px;
          }
          .button-wrap {
            margin-top: 20px;
          }
        }

      }
    }
  }





}
/***************************************
*  Blog- column page styles
****************************************/

.blog-column {
  .header-title {
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .blog-column-wrapper {
    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
    .blog-list-wrapper {
      .main-blog-panel {
          .single-blog-list {
                  margin-bottom: 80px;
              .image-box {
                overflow: hidden;
                padding-right: 10px;
                img {
                    width: 100%;
                }
               }
               .text-box {
                  margin-top: 10px;
                   h4 {
                       font-size: 24px;
                       margin-bottom: 7px;
                   }
                   p {
                      line-height: 26px;
                      margin-top: 16px;
                   }
                   ul {

                       li {
                           margin-right: 7px;
                           font-size: 14px;
                         mat-icon {
                             font-size: 20px;
                             line-height: 23px;
                             vertical-align: middle;
                             
                         }
                       }
                   }
               }
          }
      }
      .sidebar {
        padding-left: 15px;
          .blog-sidebar {
            .search {
              position: relative;
               input {
                width: 100%;
                height: 54px;
                border: none;
                border: 1px solid $grey6;
                padding: 0 56px 0 12px;
                color: $grey;
                &:focus {
                  outline: none;
                }
               }
               button {
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                color: $white;
                border: none;
                outline: none;
                box-shadow: none
               }
            }
            .single-sidebar-widget {
              .post-widget {
                .title {
                  margin-bottom: 15px;
                  position: relative;
                  padding-bottom: 1.25rem;
                  h4 {
                    font-size: 17px;
                    font-weight: 600;

                    text-transform: uppercase;
                    margin-top: 10px;
                    &::before {
                      content: "";
                        left: 0;
                        position: absolute;
                        width: 100%;
                        height: 0.0625rem;
                        bottom: 0.34375rem;
                        background-color: $baners-background;
                    }
                    &::after {
                      content: "";
                      left: 0;
                      position: absolute;
                      width: 2.5rem;
                      height: 0.125rem;
                      background-color: $dark-font;
                      bottom: 0.3125rem;
                    }
                  }
                }
                ul {
                  li {
                    margin-top: 20px;
                    .icon-box {
                      width: 110px;
                      img {
                        width: 100%;
                        height: auto;
                      }
                    }
                    .text-box {
                      padding-left: 15px;
                      h5 {
                        font-weight: 500;
                        a {
                          color: $font-color;
                        }
                      }
                    }
                  }
                }
                p {
                  font-size: 14.5px;
                  line-height: 25px;
                  margin-bottom: 0;
                }
              }
              .tags-widget {
                ul {
                  li {
                    display: inline-block;
                    padding-left: 5px;
                    padding-right: 5px;
                    a {
                      padding: 6px 0;
                      display: block;
                      font-size: 12px;
                      border: 1px solid $grey6;
                      border-radius: 16px;
                      padding-left: 25px;
                      padding-right: 25px;
                      text-transform: uppercase;
                      color: $grey7;
                      font-weight: 600;
                      -webkit-transition: all .4s ease;
                      transition: all .4s ease;
                      &:hover {
                        background: $theme-main;
                        border-color: $theme-main;
                        color: $white;
                      }
                    }
                  }
                }
              }
            }
          }
      }
  }
  }

  }
/***************************************
*  Blog-details page styles
****************************************/

.blog-details {
  .header-title {
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .blog-details-wrapper {
    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
    .blog-list-wrapper {
      .main-blog-panel {
        padding-right: 15px;
          .single-blog-list {

              .image-box {
                overflow: hidden;
                padding-right: 10px;
                img {
                    width: 100%;
                }
               }
               .text-box {
                  margin-top: 10px;

                   h4 {
                       font-size: 24px;
                       margin-bottom: 7px;
                   }
                   p {
                      line-height: 26px;
                      margin-top: 16px;
                   }
                   ul.post-info {

                       li {
                           margin-right: 7px;
                           font-size: 14.5px;
                         mat-icon {
                             font-size: 20px;
                             line-height: 23px;
                             vertical-align: middle;
                             
                         }
                       }
                   }
                   .share-box {
                    margin: 25px 0 25px 0;
                    display: block;
                    /* clear: both; */
                    overflow: hidden;

                     .tag-box {
                       li {
                        display: inline-block;
                        margin-right: 4px;
                        a {
                          color: $dark-font;

                        }
                       }
                     }
                     .social-box {
                       .social {
                         li {
                          display: inline-block;

                          margin: 0;
                          padding: 0;
                          a {
                            width: 40px;
                            border-radius: 50%;
                            height: 40px;
                            color: $grey4;
                            text-align: center;
                            margin: 0 3px;
                            border: 1px solid $grey2;
                            display: block;
                            line-height: 41px;
                            transition: all 0.5s ease;
                          }
                         }

                       }
                     }
                   }

               }
               .author-box {
                 .post-author {
                   .inner {
                    position: relative;
                    padding: 30px 0px 25px;
                    border-top: 1px solid $grey6;
                    border-bottom: 1px solid $grey6;
                     .img-box {
                      width: 100px;
                      height: 100px;
                      overflow: hidden;
                      float: left;
                      margin-right: 10px;
                      img {
                        width: 100%;
                        height: auto;
                      }
                     }
                     .text-box {
                      padding: 0 10px;
                      line-height: 24px;
                      border-bottom: none;
                      margin: 0;
                      h5 {
                        color: $grey4;
                        font-size: 18px;
                        margin-bottom: 5px;
                        font-weight: 500;
                      }
                      p {
                        margin: 0;
                      }
                     }
                   }
                 }
               }
               .comments-area {
                margin-top: 40px;
                .group-title {
                  margin-bottom: 20px;
                }
                     .comment-box {
                      position: relative;
                      margin-bottom: 35px;
                      -webkit-transition: all 300ms ease;
                      -ms-transition: all 300ms ease;
                      -o-transition: all 300ms ease;
                      -moz-transition: all 300ms ease;
                      transition: all 300ms ease;
                       .comment {
                        position: relative;
                        font-size: 14px;
                        padding: 0px 0px 0px 80px;
                         .author-thumb {
                          position: absolute;
                          left: 0px;
                          top: 0px;
                          margin-bottom: 20px;
                          img {
                            width: 60px;
                            display: block;
                          }
                         }
                         .comment-inner {
                          position: relative;
                          padding: 15px 20px;
                          border: 1px solid $grey6;
                           .comment-info {
                            position: relative;
                            color: $grey4;
                            line-height: 24px;
                            font-size: 16px;
                            font-weight: 500;
                           }
                           .rating {
                            position: absolute;
                            right: 15px;
                            top: 15px;
                            span {
                              display: inline-block;
                              color: $theme-main;
                              font-size: 14px;
                            }
                           }
                           .text {
                            color: $grey;
                            font-size: 15px;
                            margin-top: 12px;
                            font-weight: 400;
                            line-height: 1.6em;
                            margin-bottom: 0px;
                           }
                         }
                       }
                     }
                     .reply-comment {
                       margin-left: 30px;
                     }
              }
              .contact-form {
                margin-top: 40px;
              }
          }
      }
      .sidebar {
        padding-left: 15px;
          .blog-sidebar {
            .search {
              position: relative;
               input {
                width: 100%;
                height: 54px;
                border: none;
                border: 1px solid $grey6;
                padding: 0 56px 0 12px;
                color: $grey;;
                &:focus {
                  outline: none;
                }
               }
               button {
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                color: $white;
                border: none;
                outline: none;
                box-shadow: none
               }
            }
            .single-sidebar-widget {
              .post-widget {
                .title {
                  margin-bottom: 15px;
                  position: relative;
                  padding-bottom: 1.25rem;
                  h4 {
                    font-size: 17px;
                    font-weight: 600;

                    text-transform: uppercase;
                    margin-top: 10px;
                    &::before {
                      content: "";
                        left: 0;
                        position: absolute;
                        width: 100%;
                        height: 0.0625rem;
                        bottom: 0.34375rem;
                        background-color: $baners-background;
                    }
                    &::after {
                      content: "";
                      left: 0;
                      position: absolute;
                      width: 2.5rem;
                      height: 0.125rem;
                      background-color: $dark-font;
                      bottom: 0.3125rem;
                    }
                  }
                }
                ul {
                  li {
                    margin-top: 20px;
                    .icon-box {
                      width: 110px;
                      img {
                        width: 100%;
                        height: auto;
                      }
                    }
                    .text-box {
                      padding-left: 15px;
                      h5 {
                        font-weight: 500;
                        a {
                          color: $font-color;
                        }
                      }
                    }
                  }
                }
                p {
                  font-size: 14.5px;
                  line-height: 25px;
                  margin-bottom: 0;
                }
              }
              .tags-widget {
                ul {
                  li {
                    display: inline-block;
                    padding-left: 5px;
                    padding-right: 5px;
                    a {
                      padding: 6px 0;
                      display: block;
                      font-size: 12px;
                      border: 1px solid $grey6;
                      border-radius: 16px;
                      padding-left: 25px;
                      padding-right: 25px;
                      text-transform: uppercase;
                      color: $grey7;
                      font-weight: 600;
                      -webkit-transition: all .4s ease;
                      transition: all .4s ease;
                      &:hover {
                        background: $theme-main;
                        border-color: $theme-main;
                        color: $white;
                      }
                    }
                  }
                }
              }
            }
          }
      }
  }
  }

  }


/***************************************
*  Blog-list page styles
****************************************/
  .blog-list {
    .header-title {
    padding: 130px 0;
    position: relative;
      .title {
        text-align: center;
        h2 {
          color: $white;
          font-size: 52px;
          margin: 0;
        }
        p {
          color: $white;
          line-height: 26px;
        margin: 0;
        }
      }
    }
    .blog-list-wrap {
      position: relative;
      top: -15px;
      background-size: auto 75px;
      background-repeat: repeat-x;
      background-position: center 0;
      .blog-list-wrapper {
        .main-blog-panel {
            padding-right: 15px;
            .single-blog-list {

                    margin-bottom: 20px;

                .image-box {
                  overflow: hidden;
                  padding-right: 10px;
                  img {
                      width: 100%;
                  }
                 }
                 .text-box {
                     padding: 0 10px;
                     a {
                        h4 {
                            font-size: 24px;
                            margin-bottom: 7px;
                            color: $theme-main-dark;
                        }
                     }

                     p {
                        line-height: 26px;
                        margin-top: 16px;
                     }
                     ul {

                         li {
                             margin-right: 7px;
                             font-size: 14px;
                           mat-icon {
                             
                               font-size: 20px;
                               line-height: 23px;
                               vertical-align: middle;
                               margin-right: 0px;
                           }
                         }
                     }
                 }
            }
        }
        .sidebar {
          padding-left: 15px;
            .blog-sidebar {
              .search {
                position: relative;
                 input {
                  width: 100%;
                  height: 54px;
                  border: none;
                  border: 1px solid $grey6;
                  padding: 0 56px 0 12px;
                  color: $grey;;
                  &:focus {
                    outline: none;
                  }
                 }
                 button {
                  
                  height: 100%;
                  position: absolute;
                  top: 0;
                  right: 0;
                  color: $white;
                  border: none;
                  outline: none;
                  box-shadow: none
                 }
              }
              .single-sidebar-widget {
                .post-widget {
                  .title {
                    margin-bottom: 15px;
                    position: relative;
                    padding-bottom: 1.25rem;
                    h4 {
                      font-size: 17px;
                      font-weight: 600;

                      text-transform: uppercase;
                      margin-top: 10px;
                      &::before {
                        content: "";
                          left: 0;
                          position: absolute;
                          width: 100%;
                          height: 0.0625rem;
                          bottom: 0.34375rem;
                          background-color: $baners-background;
                      }
                      &::after {
                        content: "";
                        left: 0;
                        position: absolute;
                        width: 2.5rem;
                        height: 0.125rem;
                        background-color: $dark-font;
                        bottom: 0.3125rem;
                      }
                    }
                  }
                  ul {
                    li {
                      margin-top: 20px;
                      .icon-box {
                        width: 110px;
                        img {
                          width: 100%;
                          height: auto;
                        }
                      }
                      .text-box {
                        padding-left: 15px;
                        h5 {
                          font-weight: 500;
                          a {
                            color: $font-color;
                          }
                        }
                      }
                    }
                  }
                  p {
                    font-size: 14.5px;
                    line-height: 25px;
                    margin-bottom: 0;
                  }
                }
                .tags-widget {
                  ul {
                    li {
                      display: inline-block;
                      padding-left: 5px;
                      padding-right: 5px;
                      a {
                        padding: 6px 0;
                        display: block;
                        font-size: 12px;
                        border: 1px solid $grey6;
                        border-radius: 16px;
                        padding-left: 25px;
                        padding-right: 25px;
                        text-transform: uppercase;
                        color: $grey7;
                        font-weight: 600;
                        -webkit-transition: all .4s ease;
                        transition: all .4s ease;
                        &:hover {
                          background: $theme-main;
                          border-color: $theme-main;
                          color: $white;
                        }
                      }
                    }
                  }
                }
              }
            }
        }
    }
    }

    }

/***************************************
*  Price slider styles
****************************************/

    .price-slider {
      .filter-price {
        .mat-slider-horizontal {
          min-width: 110px;
        }
      }
    }

/***************************************
*  Product dialog styles
****************************************/

.product-dialog {
  .mat-dialog-container {
    overflow: visible;
  }
  .swiper-container {
    .swiper-wrapper {
      img.img-fluid {
        margin:0 auto;
        max-width: 100%;
      }
    }
  }
  .swiper-wrapper {
    width: 84%;
    height: auto;
  }

  .product-right {
    padding: 0 30px;
    .product-details {
      h2 {
        margin: 0;
      }
      .stars {
        mat-icon {
          color: $theme-main;
          font-size: 18px;
    width: 21px;
        }
      }
      .prices {
        margin-top: 15px;
        h4 {
          margin-top: 7px;
          margin-right: 10px;
          span {
            padding-left: 5px;
            color: $theme-main-red;
            font-size: 25px;
          }
          del {
            color: $grey;
            font-size: 18px;
          }
        }
        h3.price {
          font-size: 26px;
          font-weight: 400;
          margin: 0;
        }
      }
      .discription {
        padding-top: 15px;
        padding-bottom: 20px;
        border-top: 1px dashed $grey-light;
        border-bottom: 1px dashed $grey-light;

          .bold {
            font-weight: 600;
            margin-top: 0;
          }
          p.productDescription {
            line-height: 24px;
            margin-top: 5px;
            margin-bottom: 0;
          }

      }

    }
    .quantity {
      padding-top: 20px;
      .counter {
        position: relative;
        margin-right: 10px;
        input {
          width: 71px;
          text-align: center;
          background-color: $gray-lighter;
          height: 50px;
          border: none;
          padding-right: 24px;
        }

          .add {
            background-color: #e0e0e0;
            border-left: 0;
            cursor: pointer;
            font-size: 20px;
            height: 24px;
            line-height: 21px;
            position: absolute;
            right: 0;
            -webkit-transition: background-color .2s ease-out;
            -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
            width: 25px;
            border-radius: 0;
          }
          .remove {
            background-color: #e0e0e0;
            border-left: 0;
            cursor: pointer;
            font-size: 20px;
            height: 24px;
            line-height: 21px;
             position: absolute;
            right: 0px;
            -webkit-transition: background-color 0.2s ease-out;
            transition: background-color 0.2s ease-out;
            width: 25px;
            bottom: 0px;
            border-radius: 0;
            z-index: 99;
          }


      }

      span {
        margin-bottom: 5px;
       }
    }
    .avalibility {
      .red {
        color: $theme-main-red;
        font-weight: 500;
      }
    }
  }
  .mat-dialog-container {
    .close-btn-outer button {
      position: absolute;
      right: -44px;
      top: -42px;
    }
  }
  .product-dialog {
    .close-btn-outer {
      position: relative;
    }
  }
}



.product-pagination .ngx-pagination {
  margin-left: 0;
  margin-bottom: 1rem;
  text-align: center;
  padding: 10px 5px;
  font-size: 14px;
}
.product-pagination .ngx-pagination .current {
  padding: 4px 12px;
  background: $grey4;
  color: $white;
  cursor: default;
  border-radius: 2px;
  line-height: 22px;
}

.product-dialog .mat-dialog-content {
  max-width: 52vw;
}


/***************************************
*  Popular products styles
****************************************/
.popular-products {

    .reviews {
      .stars {
        color: $theme-main;
        margin: 0px 0 5px 0;
        span {
          color: $grey3;
          font-size: 13px;
          margin-left: 10px;
        }
        mat-icon{
          font-size: 17px;
            line-height: 17px;
            height: 17px;
            width: 17px;
            vertical-align: middle;
        }
      }
    }

}
.mega-menu-pane {
  .mat-menu-panel{
    width: 668px !important;
    .mat-menu-content {
      width: 100% !important;
    }
  }
}

/***************************************
*  Error page styles
****************************************/
.error {
  text-align: center;
  .page404 {
    font-size: 67px;
    font-weight: 700;
    color: $grey;
   margin-bottom: 30px;
  }
  .not-found {
    font-size: 39px;
    font-weight: 700;
    color: $font-color;
    margin-bottom: 30px;
  }
  .error_description {
    margin-bottom: 30px;
    p {
      font-weight: 600;
    }
  }
  button {
    background: $theme-main;
    color: $font-color;
    padding: 5px 33px;
    width: 200px;
  }
}
/***************************************
*  FAQ page styles
****************************************/

.faq {
  .header-title {
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .faq-wrapper {
    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
  }
  .questions {
    padding-right: 15px;
    .faq-wrap {
      .mat-expansion-panel {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border: 1px solid $grey-light;
        box-shadow: none;
        margin-bottom: 20px;
        .mat-expansion-panel-header-title {
          span {
            font-size: 17px;
            text-transform: capitalize;
            font-weight: 500;
            line-height: 1;
        }
        }
        .mat-expansion-panel-body {
          p {
            line-height: 24px;
          }
        }
    }
    }
  }
  .faq-form {
    padding-left: 15px;
   .text-wrap {
     p {
       line-height: 26px;
     }
   }
   form {
     margin: 30px 0;
   }
  }
}
/***************************************
*  About us page styles
****************************************/

.about-us-wrapper {
  .header-title {
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .about-section {
    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
    .left-info-panel {
      overflow: hidden;
      .about-us-intro {
        h2 {
          margin-bottom: 20px;
        }
        p {
          line-height: 26px;
          }
          .accordions {
            margin-top: 20px;
            .mat-expansion-panel {
             margin-bottom: 10px;
             box-shadow: none;
             border: 1px solid $grey6;
             border-radius: 5px;
             h4 {
               font-weight: 500;
             }
            }
          }
      }
    }

  }
  .our-values {
    background: $baners-background;

    .box-wraper {
      .box {
        padding-left: 15px;
        padding-right: 15px;
       .content {
        padding: 41px 20px 31px;
        background: $white;
        .icon-box {
          i {
            font-size: 55px;
            color: $theme-main;
          }
        }
        h4 {
          font-weight: 500;
          font-size: 22px;
          margin-bottom: 5px;
          margin-bottom: 10px;
        }
        p {
          line-height: 26px;
        }
       }
      }
    }

  }
  .title-wrapper {
    text-align: center;
    margin-bottom: 35px;
    h2 {
      margin-bottom: 10px;
    }
    p {
      color: $grey;
    }
  }
  .our-team {
    .team-members {
      .item {
        padding-left: 15px;
        padding-right: 15px;
            .single-team-member {
              transition: .3s;

              .img-box {
                position: relative;
                img {
                  width: 100%;
        -webkit-transition: opacity .4s ease;
        transition: opacity .4s ease;

                }
                .overlay {
                  position: absolute;
                  top: 0;
                  left: 0;
                   right: 0;
                   bottom: 0;
                  .box {
                    display: table;
                    width: 100%;
                    height: 100%;
                    .content {
                      display: table-cell;
                      vertical-align: bottom;
                      overflow: hidden;
                      ul {
                        background: $theme-main;
                        margin: 0;
                        margin-left: -12px;
                        margin-right: -12px;
                        -webkit-transform: translate3d(0, 35px, 0);
                         transform: translate3d(0, 35px, 0);
                         -webkit-transition: -webkit-transform .4s ease, visibility .4s ease, opacity .4s ease;
                         transition: transform .4s ease, visibility .4s ease, opacity .4s ease;
                         visibility: hidden;
                         li {
                          padding: 0 12px;
                           i {
                            color: $font-color;
                            font-size: 16px;
                            line-height: 35px;
                            display: block;
                           }
                         }
                      }
                    }
                  }
                }
              }

              .text-box {
                border: 1px solid $gray-lighter;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        -webkit-transition: .4s ease;
        transition: .4s ease;
              }
              &:hover {
                .img-box {
                  img {
                    opacity: .4;
                  }
                  .overlay {
                    .box {
                      .content {
                        .social {
                          opacity: 1;
                         visibility: visible;
                        -webkit-transform: translate3d(0, 0px, 0);
                        transform: translate3d(0, 0px, 0);
                        }
                      }
                    }
                   }
                }
                .text-box {
                  background: #18191d;
                  h4 {
                    color: $white;
                  }
                  p {
                    color: $white;
                  }
                }
            }



      }



    }
  }
}


}




/***************************************
*  Checkout page styles
****************************************/
.checkout-wrapper {
  .header-title {
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .checkout {
    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
    .billing-details {
      .mat-form-field {
        width: 100%;
      }
      .add-info {
        margin-top: 15px;
        }
    }


    .mainOrder-wrapper {
      .main-order {
        border: 1px solid $grey8;
        padding: 30px;
        .order-box {
          .title-box {
            position: relative;
            padding-bottom: 25px;
            color: $grey4;
            font-weight: 500;
            font-size: 20px;
            border-bottom: 1px solid $grey6;
            margin-bottom: 20px;
            span.tl-amount {
              position: relative;
              width: 35%;
              float: right;
              line-height: 1.2em;
            }
          }
          ul.price-list {
            position: relative;
            border-bottom: 1px solid $grey6;
            margin-bottom: 30px;
            padding-bottom: 20px;
            li {
              line-height: 44px;
              span {
                position: relative;
                width: 35%;
                float: right;
                font-size: 20px;

              }
            }
          }
        }
        ul.total-amount {
          position: relative;
          border-bottom: 1px solid $grey6;
          margin-bottom: 30px;
          padding-bottom: 20px;
          .shipping {
            width: 35%;
            float: right;
            .shopping-option {
              line-height: 30px;
            }
          }
          li {
            position: relative;
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            color: $font-color;
            line-height: 20px;
            margin-bottom: 20px;
            width: 100%;
            span.amount{
              position: relative;
              font-size: 20px;
              line-height: 20px;
              color: $theme-main-red;
              font-weight: 400;
              width: 35%;
              float: right;
            }
          }
        }
        ul.quantity {
          position: relative;
          border-bottom: 1px solid $grey6;
          margin-bottom: 30px;
          padding-bottom: 20px;
          li {
            span.total{
              position: relative;
              font-size: 20px;
              line-height: 20px;
              color: $theme-main-red;
              font-weight: 400;
              width: 35%;
              float: right;
            }
          }
        }
        ul.total {
          position: relative;
          border-bottom: 1px solid $grey6;
          margin-bottom: 30px;
          padding-bottom: 20px;
          li {
            position: relative;
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            color: $font-color;
            line-height: 20px;
            margin-bottom: 20px;
            width: 100%;
            span.count {
              position: relative;
                font-size: 20px;
                line-height: 20px;
                color: $theme-main-red;
                font-weight: 400;
                width: 35%;
                float: right;
            }
          }
        }
        .paymentFinal {
          margin-bottom: 20px;
          line-height: 34px;
        }
      }
    }
  }
}










.mat-radio-label-content {
color: $grey5;
font-weight: 400;
}


/***************************************
*  Cart page styles
****************************************/
.cart-wrapper {
  .header-title {
  padding: 130px 0;
  position: relative;

  .title {
    text-align: center;
    h2 {
      color: $white;
      font-size: 52px;
      margin: 0;
    }
    p {
      color: $white;
      line-height: 26px;
    margin: 0;
    }
  }
}
.cart {
  position: relative;
  top: -15px;
  background-size: auto 75px;
  background-repeat: repeat-x;
  background-position: center 0;
    .mat-card {
      text-align: center;
      .cart-table.mat-table {
        display: block;
        overflow-x:auto;
        .mat-row{
          min-height: 100px;
          min-height: 100px;
    border-bottom: 1px solid $grey2;
          .product-name{
            color: inherit;
            text-decoration: none;
            font-weight: 500;
        }
        .grand-total{
          font-weight: 500;

      }
      span:nth-child(3){
        font-size: 16px;
    }

    input {
      width: 80px;
      text-align: center;
      background-color: $grey2;
      height: 35px;
      border: 1px solid $grey6;
    }
    .price {
      font-size: 21px;
        font-weight: 500;
    }
    .total {
      font-size: 21px;
        font-weight: 500;
        color: $theme-main-red;
    }
      }
      .mat-cell, .mat-header-cell {
        flex: 1;
        overflow: hidden;
        word-wrap: break-word;
        font-size: 14px;
        mat-icon {
          cursor: pointer;
        }

        img{
          width: 100px;

      }
    }
      }
      }


}
}
/***************************************
*  Wishlist page styles
****************************************/
.wishlist-wrapper {
  .header-title {
  padding: 130px 0;
  position: relative;

  .title {
    text-align: center;
    h2 {
      color: $white;
      font-size: 52px;
      margin: 0;
    }
    p {
      color: $white;
      line-height: 26px;
    margin: 0;
    }
  }
}
.wishlist {
  position: relative;
  top: -15px;
  background-size: auto 75px;
  background-repeat: repeat-x;
  background-position: center 0;
  .cart-wrapper {
    .mat-card {
      text-align: center;
      .cart-table.mat-table {
        display: block;
        overflow-x:auto;
        .mat-row{
          min-height: 100px;
          min-height: 100px;
    border-bottom: 1px solid $grey2;
          .product-name{
            color: inherit;
            text-decoration: none;
            font-weight: 500;
        }
        .grand-total{
          font-weight: 500;

      }
      span:nth-child(3){
        font-size: 16px;
    }

    input {
      width: 80px;
      text-align: center;
      background-color: $grey2;
      height: 35px;
      border: 1px solid $grey6;
    }
    .price {
      font-size: 21px;
        font-weight: 500;
    }
    .total {
      font-size: 21px;
        font-weight: 500;
        color: $theme-main-red;
    }
      }
      .mat-cell, .mat-header-cell {
        flex: 1;
        overflow: hidden;
        word-wrap: break-word;
        font-size: 14px;
        mat-icon {
          cursor: pointer;
        }

        img{
          width: 100px;

      }
    }
      }
      }

  }
}

}



.mat-row, .mat-header-row {
  display: flex;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  min-width: 870px;
}


/***************************************
*  Compare page styles
****************************************/
.compare-component {
  .table-responsive {
    display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
    table {
      width: 100%;
      border: 1px solid $grey2;
      thead {
        .th-compare {
          td {
            padding: 15px;
            vertical-align: top;
            border-bottom: 1px solid $grey2;
            border-top: 1px solid $grey2;
            border-right: 1px solid $grey2;
            background: $gray-lighter;
            font-weight: 600;
              font-size: 14px;
          }
          a {
            cursor: pointer;
          }
        }
      }
      tbody {
        tr {
          th {
            padding: 15px;
            vertical-align: top;
            border-bottom: 1px solid $grey2;
            border-top: 1px solid $grey2;
            border-right: 1px solid $grey2;
            background: $gray-lighter;
            text-align: left;
          }
          .product-name {
            width: 15%;
            font-size: 14px;
          }
          td {
            .description-compare {
              font-size: 14px;
              line-height: 22px;
            }
          }
        }
      }
    }
  }
  img.img-fluid.mb-4 {
    max-width: 100px;
  }
  .empty-cart-cls {
    h4 {
      font-weight: 500;
      color: $grey5;
    }
    h3 {
      text-align: center;
      }
  }
}


.compare-component .table-responsive .table tbody tr td, .compare-component .table-responsive .table tbody tr th {
  padding: 15px;
  vertical-align: top;
  border-top: 1px solid $grey2;
}



/***************************************
*  Details page styles
****************************************/
.main-details-wrap {
  .header-title {
  background-size: cover;
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .details-wrapper {

    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
    .product-image {
      box-shadow: none !important;
      border: 1px solid $grey8;
      border-radius: 0;
      img {
        max-width: 100%;
      }
      a {
        cursor: pointer;
      }
    }
    .product-right {
      padding: 0 30px 0 25px;
      .product-details {
        padding-bottom: 15px;
          border-bottom: 1px dashed $grey-light;
        h2 {
          margin-bottom: 10px;
        }
        h4 {
          del {
            color: $grey;
            font-size: 17px;
          }
          span {
            padding-left: 5px;
            color: $theme-main-red;
            font-size: 24px;
          }
        }
        .avalibility {
          padding-bottom: 15px;
          span {
            color: $theme-main-red;
            font-weight: 500;
          }
        }
        p.description {
          line-height: 26px;
        }
        h3.price {
          font-size: 26px;
          font-weight: 400;
          margin: 10px 0;
        }


      }
      .py-1 {
        .red {
          font-weight: 600;
          color:$theme-main;
        }
      }
      .quantity {
        margin-top: 10px;

        span {
          margin-bottom: 0;
          display: block;
          .mat-icon {
            font-weight: 300;
            font-size: 20px;
          }

        }

        .quantity-box {
          border: 1px solid $grey8;
          margin-right: 10px;
          input {
            width: 48px;
            text-align: center;
            background-color: #fff;
            height: 100%;
            border: none;
            border-left: 1px solid $grey8;
            border-right: 1px solid $grey8;
          }
          button {
            line-height: 44px;
          }
        }
      }
      .social-icons {
        padding-top: 15px;
    border-top: 1px dashed $grey-light;

        ul {
          li {
            width: 33px;
            height: 33px;
            border: 1px solid $grey3;
            border-radius: 50%;
            text-align: center;
            margin-right: 5px;
            a {
              text-decoration: none;
              font-size: 15px;
              line-height: 32px;
              color: $grey-light;
              i {
                color: $grey4;
              }
            }
          }
        }
      }
    }
    .info-bar {
      border: 1px solid $grey-light;
      padding: 0 20px;
      margin-top: 0px !important;
      .mat-icon{
        color: $font-color;
        font-size: 41px;
        margin-right: 15px;
        line-height: 23px;
      }
      .content {
        p {
          text-transform: capitalize;
          font-weight: 500;
        }
      }
      .mat-card {
        box-shadow: none !important;
        padding: 20px 0;
        border-bottom: 1px solid $grey-light;

     }
     .mat-card.no-border {
      border-bottom: none;
    }
    }
    .review-wrapper {
      padding-right: 30px;
      margin-top: 30px;
      .mat-tab-label {
        color: #333333 !important;
        height: 48px;
        padding: 0 24px;
        cursor: pointer;
        box-sizing: border-box;
        /* opacity: 0.1; */
        min-width: 33%;
        text-align: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        position: relative;
        background: #f4f4f4;
        margin: 0 2px;
        .mat-tab-label-content {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          white-space: nowrap;
          color: #333333 !important;
          font-family: "Gelasio", serif;
          font-weight: 600;
          font-size: 15px;
      }
    }
      .full-desc {
        padding: 20px;
        p {
          line-height: 24px;
        }
        ul {
          margin-top: 15px;
          padding-left: 20px;
          li {
            margin-bottom: 7px;
          }
        }
      }
      .Reviews {
        .reviews {
          .name {
            font-weight: 500;
           }
           p {
            line-height: 22px;
            white-space: normal;
          }
          .text {
            margin-top: 10px;
            }
            .mat-list-item {
              .mat-list-item-content {
                align-items: start !important;
              }
            }
        }

      }
      .writte-reviews {
        .mat-form-field {
          width: 100%;
         }
         .rating {
           h3 {
            font-size: 22px;
            margin-top: 20px;
           }
         }
         .btn-project {
          background: $theme-main;
          padding: 3px 32px;
          color: #ffffff;
          border: 2px solid $theme-main;
          border-radius: 0;
          transition: 0.3s;
          &:hover {
            background: $white;
            color: $theme-main;
            border: 2px solid $theme-main;
         }
      }
    }
    .products {
      padding-right: 30px;
      .title {
        margin-bottom: 15px;
      position: relative;
      padding-bottom: 1.25rem;
      &::before {
        content: "";
        left: 0;
        position: absolute;
        width: 100%;
        height: 0.0625rem;
        bottom: 0.34375rem;
        background-color: #f6f6f6;
    }
    &::after {
      content: "";
      left: 0;
      position: absolute;
      width: 2.5rem;
      height: 0.125rem;
      background-color: #222222;
      bottom: 0.3125rem;
    }
      }
    }


  }

  .sale-widget {
    padding: 15px 20px;
    background: $grey4;
    text-align: center;
    margin-bottom: 25px;
    margin-top: 25px;
    .sale-widget1 {
      color: $white;
      font-size: 36px;
       font-weight: 600;
       display: block;
       letter-spacing: .5;
    }
    .sale-widget2 {
      color: $white;
      font-size: 18px;
       font-weight: 600;
       display: block;
       letter-spacing: .5;
    }
    .discount {
      display: inline-block;
      color: $white;
      font-size: 77px;
      font-weight: 600;
      position: relative;
      letter-spacing: .5;
    }
    .percent {
      display: inline-block;
      line-height: 31px;
      color: $white;
      span {
        display: block;
        font-size: 3.067em;
        font-weight: 500;
        color: $white;
      }
    }
    p {
      color: $white;
      line-height: 24px;
      font-weight: 300;
      font-size: 15px;
    }
  }
  .small-carousel {
    .swiper-slide {
      mat-card {
        img {
          max-width: 110px;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
        }
      }
    }
  }
  .small-carousel {
    position: relative;
    margin-top: 10px;
    .swiper-container {
      height: 180px;
      .swiper-slide {
        mat-card {
          max-height: 120px;
          min-height: 120px;
        }
      }
      .swiper-button-prev {
      position: absolute;
      top: 32%;
      left: 0px;;
      }
      .swiper-button-next {
        position: absolute;
      top: 32%;
      right: 0px;;
      }
    }


  }
  .product-item {
    position: relative;
    overflow: hidden;

    // transition: all .5s ease;
    mat-card {
      padding: 0;
      box-shadow: none;
      border: 1px solid $grey6;
      .product-img {
        text-align: center;
        cursor: pointer;
        img {
        max-width: 180px;
        }
      }
      .product-info-wrapper {
        background: #f9f9f9;
        padding: 15px;
            .category {
             text-align: left;
             font-weight: 400;
              color: $grey7;
            }
            .title-wrap {
              margin: 7px 0;
              h4 {
       font-size: 21px;
       margin: 0;
              }
              p {
                font-size: 21px;
                font-family: 'Gelasio', serif;
                font-weight: 600;
                margin: 0;
              }
            }
            .stars {
             .mat-icon {
               font-size: 20px;
             height: 22px;
             width: 22px;
              color: $theme-main;
             }
            }
            .btn-wrap {
              margin-top: 10px;
              .view-more {
              font-weight: 500;
              color: $grey7;
              cursor: pointer;
              }
              .bucket {
                background: #dedede;
                  width: 38px;
                  height:38px;
                  border-radius: 50%;
                  text-align: center;
                  vertical-align: middle;
                  line-height: 49px;
                  cursor: pointer;
                a {

                  mat-icon {
                    
                   font-size: 21px;
                  }
                }
              }
            }
            .details-products {
              .more-info {
                margin-top: 15px;
                overflow: hidden;
              }
            }
            .icons {
              position: absolute;
              top: 30px;
              right: -10px;
              opacity: 0;
              // transition: all .6s ease;
              mat-icon {
                color: $grey4;
                cursor: pointer;
              }
            }

      }
      &:hover {
        .icons {
          opacity: 1;
          transition: all .4s ease;
          transform: translateX(-20px);
         .ic-1 {
          animation-delay: 2s;
        }
        .ic-2  {
          animation: .5s ease-in-out fadeInRight;
        }
        .ic-3  {
          animation: .7s ease-in-out fadeInRight;
        }
        }
       }
    }

  }
  .title {
    margin-bottom: 22px;
  }
}
.no-bg {
  background: transparent !important;
  .title {
    h4 {
      font-size: 22px;
    }
  }

}
}

.product-slick.product-zoom.slick-initialized.slick-slider {
  z-index: 1;
}


.mat-list-base .mat-list-item.mat-3-line, .mat-list-base .mat-list-option.mat-3-line {
  height: 100% !important;
  margin-bottom: 20px;
}


/***************************************
*  Brands page styles
****************************************/

.brands-items {
  .mat-radio-button {
    margin-bottom: 15px;
  }
  .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background: $theme-main-red !important;
  }
}


/***************************************
*  Categorie page styles
****************************************/

.category-contant {
  ul {
    li {
      a {
        color: $grey;
        padding-bottom: 10px;
        display: block;
        font-size: 15px;
      }
    }
  }
}

/***************************************
*  Contact us page styles
****************************************/

.contact-page {
  .header-title {
  padding: 130px 0;
  position: relative;
    .title {
      text-align: center;
      h2 {
        color: $white;
        font-size: 52px;
        margin: 0;
      }
      p {
        color: $white;
        line-height: 26px;
      margin: 0;
      }
    }
  }
  .contact-wrap {
    position: relative;
    top: -15px;
    background-size: auto 75px;
    background-repeat: repeat-x;
    background-position: center 0;
    .left-info-panel {
      padding-right: 100px;
      .get-in-touch {
        .title {
          margin-bottom: 15px;
          h3 {
            font-size: 24px;
          }
        }
        p {
          line-height: 26px;
          color: $grey7;
        }
      }
      .address {
        .title {
          margin-bottom: 15px;
          h3 {
            font-size: 24px;
          }
        }
        ul {
          list-style-type: none;
          padding: 0;
          > *:not(:last-child) {
            padding-bottom: 10px;
          }
          li {

            .icon {
              width: 35px;
        height: 35px;
        background: #dedede;
        border-radius: 50%;
        text-align: center;
        margin-right: 7px;
              i {
                font-size: 21px;
                line-height: 34px;
                margin-right: 0;
                text-align: center;
          color: $grey4;
              }
            }

            h4{
              display: inline-block;
                font-size: 20px;
            }
          }
        }
      }
      .hours {
        .title {
          margin-bottom: 15px;
          h3 {
            font-size: 24px;
          }
        }
        ul {
          list-style-type: none;
          padding: 0;
          > *:not(:last-child) {
            padding-bottom: 10px;
          }
          li {

            .icon {

        text-align: center;
        margin-right: 7px;
              i {
                font-size: 21px;
                line-height: 33px;
                margin-right: 0;
                text-align: center;
          color: $grey-dark;
              }
            }

            h4{
              display: inline-block;
                font-size: 20px;
            }
          }
        }
      }
      }
  }

.devider {
  padding: 0px; margin: 20px 0;
}
.contact-form {
  .title {
    margin-bottom: 15px;
    h3 {
      font-size: 24px;
    }
  }
  .w-100 {
    width: 100% !important;
  }
  .mat-form-field {
    caret-color: $theme-main !important;
    font-size: 14px !important;

    .mat-input-element {
      caret-color: $theme-main !important;
    }
  }
  .px-1 {
    margin-bottom: 15px;
    }

}
.button-wrap {
  .btn-project {
   background: $theme-main;
   padding: 3px 32px;
   color: $white;
   border-radius: 0;
   transition: 0.3s;

  }
     }
     .map {
      agm-map {
        height: 400px;
      }
      margin-bottom: 15px;
     }

  }



@media screen and (max-width: 599px) {
  .contact-page {
    .left-info-panel {
      padding-right: 0px;
      width: 100%;
    }
  }
}
.sidenav  {
  .divider {
margin: 10px 0;
  }

}
:host {
  display: flex;
  flex-direction: column;
  outline: none;
  width: 100%;

  .mat-list-item.active {
    background-color: mat-color($theme-main, 50);
  }
  &:hover,
  &:focus {
    >.mat-list-item:not(.expanded) {
      background-color: mat-color($theme-main, 100) !important;
    }
  }
}

.mat-list-item {
  padding: 10px 0;
  display: flex;
  width: auto;
  .mat-list-item-content {
    width: 100%;
  }

  .routeIcon {
    margin-right: 40px;
  }
}

