@charset "UTF-8";
/*
  Template Name: Grocee - Organic Food HTML Template
  Author Name: Hook theme
  Author URL: https://themeforest.net/user/hooktheme
  Version: 1.0.0

  ----------------------------
  [Table of contents CSS]
  ----------------------------

    1. Base CSS
    2. Header css
    3. Slider css
    4. Banner css
    5. Product card css
    6. Blog css
    7. Shipping css
    8. Testimonial css
    9. Brand logo css
    10. Instagram css
    11. Accordion css
    12. Footer css
    13. Quickview css
    14. Product details css
    15. Preloader css
    16. About page css
    17. Breadcrumb css
    18. Cart page css
    19. Checkout page css
    20. Compare page css
    21. Contact page css
    22. Faq page css
    23. My account page css
    24. Portfolio css
    25. Privacy policy css
    26. Shop page css
    27. Blog details css
    28. Login page css
    29. Error 404 page css
    30. Newsletter popup css

*/

/*
  1. Base CSS
*/
:root {
  --secondary-color: #F65005;
  --secondary-color2: #FF7800;
  --theme-color: #3CB815;
  --theme-color2: #35A212;
  --theme-color3: #76A713;
  --theme-color4: #e0f1db;
  --yellow-color: #FFC107;
  --light-color: #707070;
  --light-color2: #AAAAAA;
  --white-color: #FFFFFF;
  --black-color: #000000;
  --dark-color: #242424;
  --sky-color: #647589;
  --border-color: #AEAEBF;
  --border-color2: #E4E4E4;
  --border-dark: #383434;
  --bg-gray-color: #F7F8FC;
  --gray-color: #FAFBFE;
  --gray-color2: #F5F5F5;
  --text-gray-color: #555;
  --font-lato: 'Lato', sans-serif;
  --font-lora: 'Lora', serif;
  --font-poppins: 'Poppins', sans-serif;
  --body-font-size: 1.5rem;
  --body-font-weight: 400;
  --body-line-height: 27px;
  --headings-weight: 700;
  --transition: all 0.3s ease 0s;
  --container-fluid-offset: 10rem;
}

.color-scheme-1 {
  --secondary-color: #F65005;
}

.color-scheme-2 {
  --secondary-color: #3CB815;
}

.color-scheme-3 {
  --secondary-color: #76A713;
}

/* Common Style */
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


.minicart__quantity {
  margin-right: 15px;
}

.quantity__box {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.quantity__value {
  display: inline-block;
  border: 1px solid var(--border-color2);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
  text-align: center;
  padding: 0;
  background: var(--gray-color2);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 700;
}

.quantity__value.decrease {
  margin-right: -4px;
  border-radius: 13px 0 0 13px;
}

.quantity__value.increase {
  margin-left: -4px;
  border-radius: 0 13px 13px 0;
}

input.quantity__number {
  text-align: center;
  border: none;
  border-top: 1px solid var(--border-color2);
  border-bottom: 1px solid var(--border-color2);
  margin: 0px;
  width: 3.3rem;
  height: 3rem;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*
    3. Slider css
*/
.hero__slider--items {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 570px;
}

@media only screen and (min-width: 380px) {
  .hero__slider--items {
    height: 600px;
  }
}

@media only screen and (min-width: 576px) {
  .hero__slider--items {
    height: 645px;
  }
}

@media only screen and (min-width: 768px) {
  .hero__slider--items {
    height: 380px;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--items {
    height: 450px;
  }
}

@media only screen and (min-width: 1200px) {
  .hero__slider--items {
    height: 470px;
  }
}

@media only screen and (min-width: 1600px) {
  .hero__slider--items {
    height: 680px;
  }
}

@media only screen and (max-width: 767px) {
  .hero__slider--items__inner .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__items--container {
    max-width: 1600px;
  }
}

.hero__slider--layer {
  text-align: right;
}

@media only screen and (max-width: 767px) {
  .hero__slider--layer {
    margin-bottom: 20px;
  }
}

.hero__slider--items__inner {
  padding: 30px 0;
}

@media only screen and (max-width: 767px) {
  .hero__slider--items__inner {
    padding: 0 0 30px;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__layer--img {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1366px) {
  .slider__layer--img {
    max-width: 520px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__layer--img {
    max-width: 600px;
  }
}

@media only screen and (min-width: 1800px) {
  .slider__layer--img {
    max-width: 700px;
  }
}

@media only screen and (max-width: 767px) {
  .slider__layer--img {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 479px) {
  .slider__layer--img {
    max-width: 100%;
    padding: 0 30px;
  }
}

@media only screen and (max-width: 379px) {
  .slider__layer--img {
    padding: 0 15px;
  }
}

@media only screen and (max-width: 767px) {
  .home1__slider--layer2__img {
    max-width: 288px;
  }
}

@media only screen and (max-width: 380px) {
  .home1__slider--layer2__img {
    max-width: 100%;
    padding: 0 30px;
  }
}

@media only screen and (max-width: 767px) {
  .slider__content {
    text-align: center;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content--padding__left {
    padding-left: 200px;
  }
}

.slider__content--subtitle {
  font-size: 1.8rem;
  line-height: 2.4rem;
  margin-bottom: 10px;
}

@media only screen and (min-width: 576px) {
  .slider__content--subtitle {
    font-size: 2rem;
    line-height: 2.2rem;
    margin-bottom: 13px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content--subtitle {
    font-size: 2.2rem;
    line-height: 2.5rem;
    margin-bottom: 13px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content--subtitle {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-bottom: 15px;
  }
}

.slider__content--maintitle {
  margin-bottom: 1.4rem;
}

@media only screen and (min-width: 768px) {
  .slider__content--maintitle {
    margin-bottom: 15px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content--maintitle {
    margin-bottom: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content--maintitle {
    margin-bottom: 2.2rem;
  }
}

.slider__content--desc {
  margin-bottom: 18px;
}

@media only screen and (min-width: 768px) {
  .slider__content--desc {
    margin-bottom: 18px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content--desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
    margin-bottom: 25px;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__content--desc {
    font-size: 1.8rem;
    line-height: 3rem;
    margin-bottom: 28px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content--desc {
    font-size: 2rem;
    line-height: 3.3rem;
    margin-bottom: 40px;
  }
}

.slider__layer--img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  display: block;
}

.swiper-slide-active .slider__content > * {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.swiper-slide-active .slider__content--subtitle {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.swiper-slide-active .slider__content--maintitle {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.swiper-slide-active .slider__content--desc {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.swiper-slide-active .slider__btn {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.swiper-slide-active .slider__layer--img {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: 1.4s;
  transition: 1.4s;
}

.btn.slider__btn {
  padding: 0 23px;
  font-size: 15px;
}

@media only screen and (min-width: 768px) {
  .btn.slider__btn {
    padding: 0 28px;
  }
}

@media only screen and (min-width: 992px) {
  .btn.slider__btn {
    padding: 0 30px;
  }
}

@media only screen and (min-width: 1200px) {
  .btn.slider__btn {
    padding: 0 35px;
  }
}

.btn.slider__btn.style4:hover {
  background: var(--black-color);
  color: var(--white-color);
}

.slider__pagination {
  bottom: 20px !important;
}

@media only screen and (min-width: 768px) {
  .slider__pagination {
    bottom: 20px !important;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__pagination {
    bottom: 40px !important;
  }
}

.slider__pagination .swiper-pagination-bullet {
  width: 2.5rem;
  height: 7px;
  background: var(--theme-color);
  opacity: 1;
  border-radius: 2px;
}

.slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--secondary-color);
}

.slider__2--bg {
  background: url(../img/slider/home2-slider1.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
  .slider__2--bg {
    height: 570px;
  }
}

@media only screen and (max-width: 479px) {
  .slider__2--bg {
    height: 510px;
  }
}

@media only screen and (max-width: 379px) {
  .slider__2--bg {
    height: 490px;
  }
}

.swiper-slide-active .slider__content2 > * {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.swiper-slide-active .slider__content2--subtitle {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.swiper-slide-active .slider__content2--maintitle {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.swiper-slide-active .slider__content2--desc {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@media only screen and (max-width: 1365px) {
  .slider__content2 {
    padding-left: 4rem;
  }
}

@media only screen and (max-width: 767px) {
  .slider__content2 {
    text-align: center;
    padding-left: 0;
  }
}

.slider__content2--subtitle {
  font-size: 1.7rem;
  line-height: 2.6rem;
  margin-bottom: 10px;
}

@media only screen and (min-width: 992px) {
  .slider__content2--subtitle {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
}

.slider__content2--maintitle {
  font-size: 2.4rem;
  line-height: 3.2rem;
  margin-bottom: 20px;
}

@media only screen and (min-width: 480px) {
  .slider__content2--maintitle {
    font-size: 2.5rem;
    line-height: 3.2rem;
    margin-bottom: 18px;
  }
}

@media only screen and (min-width: 768px) {
  .slider__content2--maintitle {
    font-size: 3.2rem;
    line-height: 4.2rem;
    margin-bottom: 22px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content2--maintitle {
    font-size: 3.8rem;
    line-height: 5rem;
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__content2--maintitle {
    font-size: 4rem;
    line-height: 5.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content2--maintitle {
    font-size: 4.5rem;
    line-height: 5.8rem;
    margin-bottom: 37px;
  }
}

@media only screen and (max-width: 767px) {
  .home2__slider--layer__img2 {
    max-width: 320px;
  }
}

@media only screen and (max-width: 379px) {
  .home2__slider--layer__img2 {
    max-width: 100%;
  }
}

.slider__3--bg {
  background: url(../img/slider/home3-slider1.png);
  height: 300px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 575px) {
  .slider__3--bg {
    background-position: 25%;
  }
}

@media only screen and (min-width: 768px) {
  .slider__3--bg {
    height: 265px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__3--bg {
    height: 340px;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__3--bg {
    height: 430px;
  }
}

.slider__3--bg.two {
  background: url(../img/slider/home3-slider2.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero__slider--navigation {
  right: 65px;
  bottom: 15px;
  top: inherit;
  left: auto;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  line-height: 3.5rem;
  background: var(--white-color);
  border-radius: 50%;
  color: var(--black-color);
  -webkit-transition: .3s;
  transition: .3s;
}

.hero__slider--navigation::after {
  display: none;
}

.hero__slider--navigation:hover {
  background: var(--theme-color);
  color: var(--white-color);
}

@media only screen and (max-width: 991px) {
  .hero__slider--navigation svg {
    width: 10px;
  }
}

.hero__slider--navigation.swiper-button-next {
  right: 20px;
}

@media only screen and (min-width: 768px) {
  .hero__slider--navigation.swiper-button-next {
    right: 20px;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--navigation.swiper-button-next {
    right: 30px;
  }
}

@media only screen and (min-width: 768px) {
  .hero__slider--navigation {
    right: 68px;
    bottom: 17px;
    width: 3.8rem;
    height: 3.8rem;
    line-height: 3.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .hero__slider--navigation {
    right: 85px;
    bottom: 30px;
    width: 4.5rem;
    height: 4.5rem;
    line-height: 4.5rem;
  }
}

.swiper-slide-active .slider__content3 > * {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.swiper-slide-active .slider__content3--subtitle {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.swiper-slide-active .slider__content3--maintitle {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.swiper-slide-active .slider__content3--subtitle2 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.slider__content3 {
  padding-left: 30px;
}

@media only screen and (max-width: 767px) {
  .slider__content3 {
    padding-left: 30px;
    text-align: center;
    padding-right: 30px;
  }
}

@media only screen and (min-width: 768px) {
  .slider__content3 {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content3 {
    padding-left: 40px;
  }
}

.slider__content3--subtitle {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 400;
  margin-bottom: 4px;
}

@media only screen and (min-width: 768px) {
  .slider__content3--subtitle {
    font-size: 1.7rem;
    line-height: 2.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content3--subtitle {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__content3--subtitle {
    font-size: 2rem;
    line-height: 2.6rem;
  }
}

.slider__content3--maintitle {
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
}

@media only screen and (min-width: 768px) {
  .slider__content3--maintitle {
    font-size: 2.5rem;
    line-height: 3.2rem;
    margin-bottom: 16px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content3--maintitle {
    font-size: 2.8rem;
    line-height: 3.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__content3--maintitle {
    font-size: 3rem;
    line-height: 3.8rem;
  }
}

@media only screen and (min-width: 1366px) {
  .slider__content3--maintitle {
    font-size: 3.5rem;
    line-height: 4.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content3--maintitle {
    font-size: 4rem;
    line-height: 5rem;
  }
}

.slider__content3--subtitle2 {
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 600;
}

@media only screen and (min-width: 768px) {
  .slider__content3--subtitle2 {
    font-size: 1.7rem;
    line-height: 2.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content3--subtitle2 {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__content3--subtitle2 {
    font-size: 2rem;
    line-height: 2.6rem;
  }
}

.slider__4--bg {
  background: url(../img/slider/home4-slider1.png);
  height: 310px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (max-width: 767px) {
  .slider__4--bg {
    background-position: 13%;
  }
}

@media only screen and (max-width: 575px) {
  .slider__4--bg {
    background-position: 25%;
  }
}

@media only screen and (min-width: 576px) {
  .slider__4--bg {
    height: 370px;
  }
}

@media only screen and (min-width: 768px) {
  .slider__4--bg {
    height: 400px;
  }
}

@media only screen and (min-width: 992px) {
  .slider__4--bg {
    height: 470px;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__4--bg {
    height: 515px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__4--bg {
    height: 700px;
  }
}

.slider__4--bg.two {
  background: url(../img/slider/home4-slider2.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
  .slider__4--bg.two {
    background-position: 13%;
  }
}

@media only screen and (max-width: 575px) {
  .slider__4--bg.two {
    background-position: 25%;
  }
}

.slider__4--bg.three {
  background: url(../img/slider/home4-slider3.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
  .slider__4--bg.three {
    background-position: 13%;
  }
}

@media only screen and (max-width: 575px) {
  .slider__4--bg.three {
    background-position: 25%;
  }
}

.swiper-slide-active .slider__content4 > * {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.swiper-slide-active .slider__content4--subtitle {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.swiper-slide-active .slider__content4--maintitle {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.swiper-slide-active .slider__content4--desc {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@media only screen and (max-width: 767px) {
  .slider__content4 {
    text-align: center;
  }
}

.slider__content4--subtitle {
  font-size: 1.6rem;
  line-height: 2rem;
  margin-bottom: 10px;
}

@media only screen and (min-width: 576px) {
  .slider__content4--subtitle {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__content4--subtitle {
    font-size: 2rem;
    line-height: 2.2rem;
    margin-bottom: 1.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content4--subtitle {
    font-size: 2.2rem;
    line-height: 2.5rem;
    margin-bottom: 1.5rem;
  }
}

.slider__content4--maintitle {
  margin-bottom: 18px;
}

@media only screen and (min-width: 576px) {
  .slider__content4--maintitle {
    margin-bottom: 15px;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content4--maintitle {
    margin-bottom: 18px;
  }
}

.slider__content4--desc {
  font-size: 1.5rem;
  line-height: 2.5rem;
  margin-bottom: 1.8rem;
}

@media only screen and (min-width: 768px) {
  .slider__content4--desc {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (min-width: 992px) {
  .slider__content4--desc {
    font-size: 1.7rem;
    line-height: 2.8rem;
    margin-bottom: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .slider__content4--desc {
    font-size: 1.8rem;
    line-height: 3rem;
    margin-bottom: 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .slider__content4--desc {
    font-size: 2rem;
    line-height: 3.3rem;
    margin-bottom: 3.2rem;
  }
}

/*
    5. Product card css
*/
.section__heading--subtitle {
  font-size: 1.5rem;
  color: var(--light-color);
  margin-bottom: 7px;
}

.product__categories--content {
  padding: 18px 20px 25px;
}

@media only screen and (min-width: 1200px) {
  .product__categories--content {
    padding: 20px 25px;
  }
}

@media only screen and (min-width: 992px) {
  .product__categories--content {
    padding: 15px;
  }
}

@media only screen and (max-width: 479px) {
  .product__categories--content {
    padding: 15px 15px 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.product__categories--content__maintitle {
  margin-bottom: 2px;
}

@media only screen and (min-width: 992px) {
  .product__categories--content__maintitle {
    font-size: 2rem;
  }
}

.product__categories--content__subtitle {
  color: var(--light-color);
}

@media only screen and (max-width: 479px) {
  .product__categories--icon {
    margin-top: 8px;
  }
}

.product__categories--icon__link {
  width: 3.5rem;
  height: 3.5rem;
  text-align: center;
  background: var(--theme-color);
  line-height: 3.5rem;
  color: var(--white-color);
  border-radius: 50%;
}

.product__categories--icon__link:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

.swiper:hover .swiper__nav--btn {
  opacity: 1;
  visibility: visible;
}

.swiper__nav--btn {
  width: 4rem;
  height: 4rem;
  background: var(--theme-color);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (max-width: 767px) {
  .swiper__nav--btn {
    width: 3.5rem;
    height: 3.5rem;
  }
}

.swiper__nav--btn:hover {
  background: var(--secondary-color);
}

.swiper__nav--btn::after {
  background: url(../img/icon/left-arrow-angle.png);
  width: 9px;
  height: 17px;
  font-size: 0;
}

.swiper__nav--btn.swiper-button-prev {
  left: 0;
}

.swiper__nav--btn.swiper-button-next {
  right: 0;
}

.swiper__nav--btn.swiper-button-next::after {
  background: url(../img/icon/right-arrow-angle.png);
}

@media only screen and (max-width: 767px) {
  .product__tab--btn {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.product__tab--btn__list {
  font-size: 1.6rem;
  margin-right: 20px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.product__tab--btn__list.active {
  color: var(--secondary-color);
}

.product__tab--btn__list:hover {
  color: var(--secondary-color);
}

.product__tab--btn__list:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 575px) {
  .product__tab--btn__list {
    line-height: 22px;
    margin: 5px 10px;
  }
}

@media only screen and (min-width: 768px) {
  .product__tab--btn__list {
    margin-right: 25px;
  }
}

@media only screen and (min-width: 992px) {
  .product__tab--btn__list {
    margin-right: 35px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__tab--btn__list {
    margin-right: 40px;
  }
}

@media only screen and (min-width: 1600px) {
  .product__tab--btn__list {
    margin-right: 45px;
  }
}

.product__items--thumbnail {
  position: relative;
  overflow: hidden;
}

.product__items--link {
  display: block;
}

.product__items--img {
  display: block;
}

.product__items:hover .product__items--img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.product__items:hover .add__to--cart__btn {
  opacity: 1;
  visibility: visible;
  top: 10px;
}

.product__items:hover .product__items--content__title {
  opacity: 0;
  visibility: hidden;
  top: 20px;
}

.product__items:hover .product__items--action {
  opacity: 1;
  visibility: visible;
  right: 10px;
}

@media only screen and (min-width: 576px) {
  .product__items:hover .product__items--action {
    right: 20px;
  }
}

.product__items:hover .product__secondary--img {
  opacity: 1;
  visibility: visible;
}

.product__secondary--img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.product__items--content {
  position: relative;
  padding: 44px 15px 0;
}

@media only screen and (max-width: 575px) {
  .product__items--content {
    padding: 42px 4px 0;
  }
}

.product__items--content__title {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
}

.add__to--cart__btn {
  color: var(--secondary-color);
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
}

@media only screen and (min-width: 992px) {
  .add__to--cart__btn {
    font-size: 17px;
    line-height: 28px;
  }
}

.product__items--action {
  position: absolute;
  top: 10px;
  right: 0;
  background: var(--white-color);
  padding: 6px;
  border-radius: 25px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

@media only screen and (min-width: 576px) {
  .product__items--action {
    top: 20px;
  }
}

@media only screen and (max-width: 575px) {
  .product__items--action {
    opacity: 1;
    visibility: visible;
    right: 10px;
  }
}

.product__items--action__list {
  margin-bottom: 4px;
}

.product__items--action__list:last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .product__items--action__list {
    margin-bottom: 6px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__items--action__list {
    margin-bottom: 8px;
  }
}

.product__items--action__btn {
  width: 3rem;
  height: 3rem;
  text-align: center;
  border-radius: 50%;
  background: var(--white-color);
  padding: 5px;
  line-height: 2.7rem;
}

.product__items--action__btn:hover {
  background: var(--secondary-color);
  color: var(--white-color);
}

@media only screen and (min-width: 576px) {
  .product__items--action__btn {
    width: 3.2rem;
    height: 3.2rem;
    padding: 5px;
    line-height: 2.7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__items--action__btn {
    width: 3.5rem;
    height: 3.5rem;
    padding: 7px;
    line-height: 2.9rem;
  }
}

.product__badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

@media only screen and (min-width: 576px) {
  .product__badge {
    top: 20px;
    left: 20px;
  }
}

.product__badge--items {
  height: 2rem;
  line-height: 2rem;
  padding: 0 7px;
  font-weight: 300;
  background: var(--theme-color);
  color: var(--white-color);
  border-radius: 6px 0 6px;
}

@media only screen and (max-width: 575px) {
  .product__badge--items {
    font-size: 1.3rem;
  }
}

.product__items--sold__stocks {
  position: relative;
  padding: 5px 0 8px;
}

@media only screen and (max-width: 479px) {
  .product__items--sold__stocks {
    padding: 6px 0 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.product__items--sold__stocks::before {
  width: 100%;
  height: 3px;
  background: #F5F7F7;
  bottom: 0;
  left: 0;
  position: absolute;
  content: "";
  border-radius: 5px;
}

.product__items--sold__stocks::after {
  width: 14px;
  height: 3px;
  background: var(--theme-color);
  left: 0;
  bottom: 0;
  position: absolute;
  content: "";
  border-radius: 5px 0 0 5px;
}

@media only screen and (max-width: 479px) {
  .product__items--sold__stocks--text {
    margin-bottom: 4px;
  }
  .product__items--sold__stocks--text:last-child {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 575px) {
  .section__heading {
    text-align: center;
  }
}

.categories2__product--img {
  margin: 0 auto;
}

.product__categories--content2 {
  margin-top: 15px;
}

.product__categories--content2__maintitle {
  margin-bottom: 0.3rem;
}

@media only screen and (min-width: 768px) {
  .product__categories--content2__maintitle {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .product__categories--content2__maintitle {
    font-size: 1.8rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__categories--content2__maintitle {
    font-size: 2rem;
    line-height: 3rem;
  }
}

.product__banner--thumbnail {
  overflow: hidden;
}

.product__banner--thumbnail:hover .product__banner--thumbnail__img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.product__banner--content {
  position: absolute;
  left: 30px;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}

@media only screen and (min-width: 1200px) {
  .product__banner--content {
    left: 40px;
  }
}

@media only screen and (max-width: 500px) {
  .product__banner--content {
    left: 25px;
  }
}

.product__banner--content__title {
  margin-bottom: 5px;
}

@media only screen and (max-width: 767px) {
  .product__banner--content__title {
    line-height: 30px;
  }
}

@media only screen and (min-width: 992px) {
  .product__banner--content__title {
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__banner--content__title {
    line-height: 3.5rem;
  }
}

.product__banner--content__desc {
  margin-bottom: 22px;
}

@media only screen and (min-width: 1200px) {
  .product__banner--content__desc {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .product__banner--content__desc {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 500px) {
  .product__banner--content__desc {
    margin-bottom: 15px;
  }
}

.product__banner--content__btn {
  line-height: 3.6rem;
  height: 3.8rem;
  padding: 0 17px;
}

@media only screen and (max-width: 767px) {
  .product__section--topbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media only screen and (max-width: 575px) {
  .product__section--topbar {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media only screen and (max-width: 767px) {
  .product__section--topbar .section__heading {
    margin-bottom: 15px;
  }
}

@media only screen and (max-width: 767px) {
  .product__section--topbar .section__heading3 {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .product__section--topbar.mb-50 {
    margin-bottom: 35px;
  }
}

@media only screen and (max-width: 575px) {
  .product__section--topbar .product__tab--btn {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.product__items2 {
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
}

.product__items2--content {
  padding: 37px 15px 12px;
}

.product__items--rating__list {
  margin-right: 3px;
}

.product__items--rating__list:last-child {
  margin-right: 0;
}

.product__items--rating__icon {
  color: var(--yellow-color);
}

.product__items--rating__count--number {
  font-size: 1.4rem;
  color: var(--sky-color);
  margin-left: 6px;
  line-height: 2rem;
}

.deals__product--countdown {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media only screen and (max-width: 767px) {
  .deals__product--countdown {
    bottom: 15px;
  }
}

@media only screen and (min-width: 1200px) {
  .deals__product--countdown {
    bottom: 14px;
  }
}

@media only screen and (max-width: 500px) {
  .deals__product--countdown {
    display: none;
  }
}

.deals__product--countdown .countdown__item {
  text-align: center;
  margin-right: 10px;
  padding-right: 0;
}

.deals__product--countdown .countdown__item:last-child {
  margin-right: 0;
}

.deals__product--countdown .countdown__item::before {
  display: none;
}

@media only screen and (min-width: 768px) {
  .deals__product--countdown .countdown__item {
    margin-right: 8px;
  }
}

@media only screen and (min-width: 992px) {
  .deals__product--countdown .countdown__item {
    margin-right: 6px;
  }
}

@media only screen and (min-width: 1200px) {
  .deals__product--countdown .countdown__item {
    margin-right: 10px;
  }
}

.deals__product--countdown .countdown__item:hover .countdown__number {
  background: var(--secondary-color);
}

.deals__product--countdown .countdown__number {
  width: 4rem;
  height: 3.2rem;
  line-height: 3.2rem;
  font-size: 1.5rem;
  background: var(--theme-color3);
  color: var(--white-color);
  font-weight: 700;
  -webkit-transition: .3s;
  transition: .3s;
  border-radius: 10px 0;
}

@media only screen and (min-width: 768px) {
  .deals__product--countdown .countdown__number {
    width: 4rem;
    height: 3rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .deals__product--countdown .countdown__number {
    width: 4.2rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .deals__product--countdown .countdown__number {
    font-size: 1.6rem;
    width: 4.3rem;
    height: 3.2rem;
    line-height: 3.2rem;
  }
}

.deals__product--countdown .countdown__text {
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-top: 4px;
  line-height: 1.8rem;
}

@media only screen and (min-width: 992px) {
  .deals__product--countdown .countdown__text {
    font-size: 1.2rem;
    margin-top: 4px;
  }
}

@media only screen and (min-width: 1200px) {
  .deals__product--countdown .countdown__text {
    font-size: 1.3rem;
    margin-top: 5px;
  }
}

@media only screen and (max-width: 991px) {
  .product__grid--wrapper {
    margin-bottom: 30px;
  }
}

.product__grid--heading {
  margin-bottom: 25px;
}

@media only screen and (min-width: 992px) {
  .product__grid--heading {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 1600px) {
  .product__grid--heading {
    margin-bottom: 40px;
  }
}

.product__grid--heading__title {
  font-size: 2.2rem;
  line-height: 2.5rem;
  font-weight: 700;
  position: relative;
  padding-bottom: 20px;
}

.product__grid--heading__title::before {
  position: absolute;
  content: "";
  width: 70px;
  height: 4px;
  background: var(--theme-color);
  left: 0;
  bottom: 0;
}

@media only screen and (max-width: 991px) {
  .product__grid--heading__title {
    padding-bottom: 18px;
  }
}

.product__grid--items {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color2);
}

.product__grid--items:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.product__grid--items:hover .product__items--img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.product__grid--items:hover .product__secondary--img {
  opacity: 1;
  visibility: visible;
}

.product__grid--items--thumbnail {
  position: relative;
  width: 81px;
}

.product__grid--items__img {
  display: block;
}

.product__grid--items--content {
  width: calc(100% - 81px);
  padding-left: 18px;
}

.product__grid--items--content__title {
  line-height: 25px;
}

@media only screen and (max-width: 991px) {
  .product__banner2 {
    text-align: center;
    margin-top: 30px;
  }
}

.product__banner2--thumbnail {
  overflow: hidden;
}

@media only screen and (max-width: 575px) {
  .product__banner2--thumbnail {
    width: 100%;
  }
}

.product__banner2--thumbnail:hover .product__banner2--thumbnail__img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

@media only screen and (max-width: 575px) {
  .product__banner2--thumbnail__img {
    width: 100%;
  }
}

.product__banner2--content {
  position: absolute;
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  left: 0;
  right: 0;
  text-align: center;
}

.product__banner2--content__title {
  font-weight: 700;
  margin-bottom: 15px;
}

.product__banner2--content__subtitle {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  margin-bottom: 20px;
}

@media only screen and (min-width: 576px) {
  .product__banner2--content__subtitle {
    font-size: 1.6rem;
    line-height: 2.2rem;
    margin-bottom: 19px;
  }
}

.product__banner2--content__btn {
  line-height: 3.5rem;
  height: 3.8rem;
  padding: 0 15px;
  background: var(--secondary-color2);
}

.product__banner2--content__btn:hover {
  background: var(--theme-color);
}

.section__heading3--maintitle {
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 700;
}

@media only screen and (min-width: 768px) {
  .section__heading3--maintitle {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }
}

@media only screen and (min-width: 992px) {
  .section__heading3--maintitle {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .section__heading3--maintitle {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .section__heading3--maintitle {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

.product__categories--grid__items {
  padding: 10px;
}

@media only screen and (max-width: 499px) {
  .product__categories--grid__items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.product__categories--grid__thumbnail {
  width: 100px;
}

@media only screen and (max-width: 499px) {
  .product__categories--grid__thumbnail {
    width: 100%;
    text-align: center;
  }
}

@media only screen and (min-width: 768px) {
  .product__categories--grid__thumbnail {
    width: 95px;
  }
}

@media only screen and (min-width: 992px) {
  .product__categories--grid__thumbnail {
    width: 125px;
  }
}

@media only screen and (min-width: 1200px) {
  .product__categories--grid__thumbnail {
    width: 135px;
  }
}

.product__categories--grid__content {
  width: calc(100% - 100px);
  padding-left: 20px;
  position: relative;
}

@media only screen and (max-width: 499px) {
  .product__categories--grid__content {
    width: 100%;
    text-align: center;
    padding-left: 0;
  }
}

@media only screen and (min-width: 768px) {
  .product__categories--grid__content {
    width: calc(100% - 95px);
  }
}

@media only screen and (min-width: 992px) {
  .product__categories--grid__content {
    width: calc(100% - 125px);
  }
}

@media only screen and (min-width: 1200px) {
  .product__categories--grid__content {
    width: calc(100% - 135px);
  }
}

.product__categories--grid__content--maintitle {
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 700;
  margin-bottom: 3px;
}

@media only screen and (min-width: 992px) {
  .product__categories--grid__content--maintitle {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .product__categories--grid__content--maintitle {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1366px) {
  .product__categories--grid__content--maintitle {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

.product__categories--grid__content--subtitle {
  color: #B4B4B4;
}

.product__categories--grid__icon {
  position: absolute;
  bottom: -34px;
  right: 20px;
}

@media only screen and (max-width: 991px) {
  .product__categories--grid__icon {
    position: inherit;
    bottom: inherit;
    right: inherit;
    padding: 2px 5px 0 0;
  }
}

@media only screen and (max-width: 991px) and (max-width: 499px) {
  .product__categories--grid__icon {
    padding: 5px 5px 0 0;
  }
}

.product__categories--grid__icon--link {
  width: 3.5rem;
  height: 3.5rem;
  text-align: center;
  background: var(--secondary-color);
  line-height: 3.5rem;
  color: var(--white-color);
  border-radius: 50%;
}

.product__categories--grid__icon--link:hover {
  background: var(--theme-color);
  color: var(--white-color);
}

@media only screen and (max-width: 991px) {
  .product__categories--grid__icon--link {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
  }
}

.product__section--style3__inner .product__items2 {
  -webkit-box-shadow: inherit;
          box-shadow: inherit;
  -webkit-transition: .3s;
  transition: .3s;
}

.product__section--style3__inner .product__items2:hover {
  -webkit-box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
          box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16);
}

.deals3__banner--section__inner {
  background: var(--white-color);
  border: 2px solid var(--secondary-color);
  padding: 30px;
  border-radius: 10px;
}

@media only screen and (min-width: 1200px) {
  .deals3__banner--section__inner {
    max-width: 85%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 991px) {
  .deals3__banner--section__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 20px;
  }
}

@media only screen and (max-width: 575px) {
  .deals3__banner--section__inner {
    padding: 20px;
  }
}

@media only screen and (max-width: 479px) {
  .deals3__banner--section__inner {
    padding: 15px;
  }
}

.deals3__section--heading__maintitle {
  font-size: 2.2rem;
  line-height: 2.8rem;
  font-weight: 700;
}

@media only screen and (min-width: 576px) {
  .deals3__section--heading__maintitle {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
}

@media only screen and (min-width: 768px) {
  .deals3__section--heading__maintitle {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .deals3__section--heading__maintitle {
    font-size: 3.2rem;
    line-height: 3.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .deals3__section--heading__maintitle {
    font-size: 3.5rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .deals3__section--heading__maintitle {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

@media only screen and (max-width: 767px) {
  .deals3__product--tab {
    margin-bottom: 2.5rem;
  }
}

.deals3__product--tab__btn {
  margin-top: 15px;
}

.deals3__product--tab__btn--list {
  background: #f5f5f5;
  margin-right: 10px;
  border: 1px solid transparent;
}

.deals3__product--tab__btn--list:last-child {
  margin-right: 0;
}

.deals3__product--tab__btn--list:hover {
  border-color: var(--theme-color);
}

.deals3__product--tab__btn--list.active {
  border-color: var(--theme-color);
}

.deals3__product--img {
  width: 100%;
}

.deals3__product--countdown {
  margin-bottom: 12px;
}

.deals3__product--countdown .countdown__item {
  text-align: center;
  margin-right: 10px;
  padding-right: 0;
}

.deals3__product--countdown .countdown__item:last-child {
  margin-right: 0;
}

.deals3__product--countdown .countdown__item::before {
  display: none;
}

@media only screen and (min-width: 768px) {
  .deals3__product--countdown .countdown__item {
    margin-right: 8px;
  }
}

@media only screen and (min-width: 992px) {
  .deals3__product--countdown .countdown__item {
    margin-right: 6px;
  }
}

@media only screen and (min-width: 1200px) {
  .deals3__product--countdown .countdown__item {
    margin-right: 10px;
  }
}

.deals3__product--countdown .countdown__number {
  width: 4rem;
  height: 3.2rem;
  line-height: 3.2rem;
  font-size: 1.5rem;
  background: var(--theme-color);
  color: var(--white-color);
  font-weight: 700;
  -webkit-transition: .3s;
  transition: .3s;
  border-radius: 10px 0;
}

.deals3__product--countdown .countdown__number:hover {
  background: var(--secondary-color);
}

@media only screen and (min-width: 992px) {
  .deals3__product--countdown .countdown__number {
    width: 4.2rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .deals3__product--countdown .countdown__number {
    font-size: 1.7rem;
    width: 4.7rem;
    height: 3.5rem;
    line-height: 3.5rem;
  }
}

.deals3__product--countdown .countdown__text {
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-top: 7px;
}

@media only screen and (min-width: 992px) {
  .deals3__product--countdown .countdown__text {
    font-size: 1.2rem;
    margin-top: 2px;
    line-height: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .deals3__product--countdown .countdown__text {
    font-size: 1.3rem;
    margin-top: 5px;
  }
}

@media only screen and (min-width: 1200px) {
  .product3__section--container {
    max-width: 1220px;
  }
}

.product3__section--inner__padding {
  padding: 0 10px 15px;
}