@import url(../css/theme.css);

body {
  font-family: 'Sora', sans-serif;
}

li {
  list-style: none;
}

/* SIGN UP PAGE CSS */

#sign-up .page-bg {
  /* height: calc(100vh - 50px); */
}

#sign-up .wrapper {
  margin-top: 70px;
}

#sign-up .right-section img {
  transform: rotate(9deg);
}

#sign-up .disclamier img {
  object-fit: contain;
}

/* SIGN UP PAGE CSS */

/* LOGIN PAGE CSS */

#login-page .page-bg {
  height: calc(100vh - 50px);
}

#login-page .right-section img {
  transform: rotate(9deg);
}

#login-page input[type="checkbox"] {
  width: 18px;
}

#login-page .page-bg {
  padding-bottom: 0;
}

#login-page .wrapper {
  margin-top: 70px;
}

/* LOGIN PAGE CSS */



/* input[type="checkbox"]:checked::before {
  content: "";
  width: 24px;
  height:24px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
}  */



/* Reset Password */
#resetpassword-page .resetpassword-page.page-bg {
  padding-top: 0;
}

#resetpassword-page .resetpassword-page .wrapper {
  margin: 0 auto;
}

#resetpassword-page .resetpassword-page,
#change-password .resetpassword-page {
  background-image: url(../images/reset-password-bg.png);
  background-size: 100% 125%;
}

#change-password .resetpassword-page {
  padding-top: 0;
}

/* Reset Password */

/* 404 Page */

#error-page .error-page.page-bg {
  background-image: url(../images/404-bg.png);
  padding-top: 40px;
  background-size: 100% 100%;
}

/* terms and condition */
#terms-condition .terms-condition {
  padding: 150px 0 112px;
  /* margin-bottom: -50px; */
  /* height: 100vh; */
}


/* contact us page */

#contact-us .contact-page .right-section img {
  transform: rotate(0deg);
}

#contact-us .contact-page.page-bg {
  background-image: url(../images/contactus-bg.png);
  background-size: 100% 130%;
  padding: 150px 0 112px;
}


#contact-us .wrapper {
  margin: unset;
}


#contact-us .left-section {
  text-align: left;
}

/* Personal-detail Page */

#personal-detail .personal-detail {
  background-image: url(../images/personal-detailbg.png);
  background-size: 100% 125%;
  padding-top: 190px;
}



/* Order-Detail */

#checkout-detail .order-total {
  background-color: var(--Electric-blue);
  border-radius: 16px;
}

#checkout-detail .order-total hr {
  border: 1px solid var(--Medium-electric);
}

#checkout-detail .order-count p:nth-child(3) {
  border: 1px solid var(--Neutral-500);
  height: 48px;
  width: 48px;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Payment-page */

#payment-page .page-bg {
  background-image: url(../images/payment-bg.png);
  background-size: 100% 113%;
  padding-top: 200px;
}

@media (min-width: 1280px) {

  .product-list {
    padding-right: 46px
  }

  .checkout-summary {
    padding-left: 70px;
  }

}

/* End Payment-page */

/* Cart page */

#cart-page .product-count img,
#cart-page .order-section .remove-item img {
  cursor: pointer;
}

#cart-page #checkout-detail .order-detail input {
  border: 1px solid var(--Neutral-500);
  height: 48px;
  width: 48px;
  padding: 12px 17px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#cart-page .page-bg {
  background-image: url(../images/payment-bg.png);
  background-size: 100% 78%;
}

#cart-page .promo-code input {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid #fff;
  color: #F4F4F4;
}

#cart-page .promo-code input::placeholder {
  color: var(--Neutral-400);
}

#cart-page .remove-item {
  position: relative;
}


/* Cart page */


/* Listing Page */


#product-listing .product-detail .product-image img {
  cursor: pointer;
}

#product-listing .page-bg {
  background-image: unset;
}

#product-listing .product-detail img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0px 4px 19px 0px rgba(128, 45, 117, 0.15), -8px -8px 19px 0px rgba(102, 36, 94, 0.05);

}

#product-listing .category-filter .title-section .btn-primary,
#product-listing .price-section .title-section .btn-primary {
  padding: 8px 16px;
}

#product-listing input[type="checkbox"] {
  width: 18px;
}

#product-listing .category-filter {
  border-bottom: 1px solid var(--Neutral-500);
}

#product-listing select {
  border: unset;
  border-bottom: 1px solid var(--Pink);
  /* padding-bottom: 8px; */
}

#product-listing .slider-input input {
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  width: 93px;
  border: none;
  border-radius: 8px;
  border: 1px solid var(--medium-pink);
  background: var(--light-pink-shade);
}

#product-listing .pagination-section .pagination {
  position: relative;
  z-index: 4;
}

#product-listing .pagination-section a.page-link.next-button,
#product-listing .pagination-section a.page-link.prev-button {
  border: unset !important;
}

#product-listing .slider-input {
  display: flex;
  gap: 8px;
  align-items: center;
}

#product-listing .product-wrapper .product-detail {
  width: 100%;
}

#product-listing .product-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 15vw);
  grid-gap: 53px;
}

#product-listing .product-left {
  /* padding-right: 76px; */
  width: 18%;
}

#product-listing .product-right {
  width: 82%;
  padding: 0 0 0 150px;
}

#product-listing .pagination-section .pagination .page-item.active a {
  border-radius: 8px;
  background-color: var(--Pink);
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--pink);
  color: var(--Neutral-White);
}

#product-listing .pagination-section .pagination .page-item a {
  border-radius: 8px;
  background-color: var(--Neutral-White);
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--Neutral-400);
  color: var(--Neutral-NearBlack);
}

#product-listing .pagination-section .pagination {
  gap: 8px;
}

#product-listing .pagination-section .pagination .page-item.disabled a {
  color: var(--Neutral-500) !important;
}

#product-listing .page-bg {
  padding-bottom: 195px;
}

/* Listing Page */

/* product-description */

#product-description .page-bg {
  background-image: unset;
  padding-top: 40px;
}

#product-description .product-points .pointer {
  display: flex;
  gap: 16px;
}

#product-description .product-container .col-md-4 img {
  height: 651px;
  width: 434px;
}


#product-description select {
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid var(--Neutral-500);
}

#product-description .qty-section .btn-primary {
  padding: 12px 16px;
}

#product-description .related-products-section {
  padding: 64px 0 112px;
}

#product-description .related-products-section .product-detail {
  width: 100%;
}

/* #product-description .related-products-card {
  display: grid;
  grid-template-columns: repeat(5, 12.8vw);
  gap: 46px;
} */

#product-description .product-container {
  padding: 0 75px;
}

#product-description .product-right-section {
  padding-left: 46px;
}

#product-description .related-products-section .product-detail img {
  box-shadow: 0px 4px 19px 0px rgba(128, 45, 117, 0.15), -8px -8px 19px 0px rgba(102, 36, 94, 0.05);
  width: 100%;
}

#product-description .product-card {
  margin-right: 20px;
}

/* product-description */


/* slider */

[slider] {
  position: relative;
  height: 14px;
  border-radius: 10px;
  text-align: left;
  margin: 45px 0 10px 0;
}

[slider]>div {
  position: absolute;
  left: 13px;
  right: 15px;
  height: 14px;
}

[slider]>div>[inverse-left] {
  position: absolute;
  left: 0;
  height: 14px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider]>div>[inverse-right] {
  position: absolute;
  right: 0;
  height: 14px;
  border-radius: 10px;
  background-color: #CCC;
  margin: 0 7px;
}

[slider]>div>[range] {
  position: absolute;
  left: 0;
  height: 14px;
  /* border-radius: 14px; */
  background-color: var(--Pink);
}

[slider]>div>[thumb] {
  position: absolute;
  top: -7px;
  z-index: 2;
  height: 28px;
  width: 28px;
  text-align: left;
  margin-left: -11px;
  cursor: pointer;
  /* box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background-color: #FFF;
  border-radius: 50%; */
  outline: none;
  /* width: 0;
  height: 0; */
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 10px solid var(--Pink);
  /* margin: 2rem; */
}

.range-slider .left-arrow {
  /* left: 11% !important; */
  transform: rotate(270deg);
  border-radius: 20px;
  /* position: absolute; */
  /* top: -30px; */
  /* left: 11%; */
  z-index: 2;
}

.range-slider .right-arrow {
  /* left: 42% !important; */
  transform: rotate(90deg);
  /* position: absolute; */
  /* top: -30px; */
  z-index: 2;
  border-radius: 20px;
}


[slider]>input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 3;
  height: 14px;
  top: -2px;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

div[slider]>input[type=range]::-ms-track {
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider]>input[type=range]::-moz-range-track {
  -moz-appearance: none;
  background: transparent;
  color: transparent;
}

div[slider]>input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

div[slider]>input[type=range]:focus {
  outline: none;
}

div[slider]>input[type=range]::-ms-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider]>input[type=range]::-moz-range-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
}

div[slider]>input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
  -webkit-appearance: none;
}

div[slider]>input[type=range]::-ms-fill-lower {
  background: transparent;
  border: 0 none;
}

div[slider]>input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

div[slider]>input[type=range]::-ms-tooltip {
  display: none;
}

[slider]>div>[sign] {
  opacity: 0;
  position: absolute;
  margin-left: -11px;
  top: -39px;
  z-index: 3;
  background-color: #1ABC9C;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  -webkit-border-radius: 28px;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

[slider]>div>[sign]:after {
  position: absolute;
  content: '';
  left: 0;
  border-radius: 16px;
  top: 19px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top-width: 16px;
  border-top-style: solid;
  border-top-color: #1ABC9C;
}

[slider]>div>[sign]>span {
  font-size: 12px;
  font-weight: 700;
  line-height: 28px;
}

[slider]:hover>div>[sign] {
  opacity: 1;
}

/* Slider */


/* Story Page */

#our-story .page-bg {
  background-image: url(../images/Hero-topsec.png);
  background-size: 100% 84%;
  min-height: auto;
  padding-bottom: 0;
}

#our-story .hero-banner {
  width: 39vw;
  /* margin: 0 auto; */
}

#our-story .ourstory-page {
  padding-top: 204px;
  margin-bottom: 0;
}

#our-story .hero-image {
  background-image: url(../images/top-banner-img.png);
  height: 522px;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#our-story .secondary-section {
  padding: 128px 0;
}

#our-story .love-language {
  padding: 64px 0;
}

#our-story .love-language .title {
  width: 34vw;
}

#our-story .card-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 32px;
}

#our-story .main-passion {
  width: 33vw;
}

#our-story .section-body {
  background-color: var(--Neutral-White);
  width: 100%;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0px 4px 64px 0px rgba(57, 57, 57, 0.05), -8px -8px 56px 0px rgba(81, 81, 81, 0.05);

}

#our-story .related-products-section {
  padding: 64px 0;
}

#our-story .related-products-card {
  /* display: grid;
  grid-template-columns: repeat(5, 12.8vw);
  gap: 46px; */
}

#our-story .professional-wrapper p {
  width: 51vw;
  margin: 0 auto;
}

#our-story .nav-tabs .nav-link.active:after {
  top: 86%;
  right: 35%;
}

#our-story .professional-connect {
  background-image: url(../images/story-endsec.png);
  background-repeat: no-repeat;
  padding: 64px 0 169px;
  background-size: 100% 151%;
  margin-bottom: -65px;
}

#our-story .cards-section .card-image img {
  border-radius: 32px;
}

.card-main {
  padding: 32px;
  border-radius: 48px;
  border: unset;
  box-shadow: 0px 4px 64px 0px rgba(57, 57, 57, 0.05), -8px -8px 56px 0px rgba(81, 81, 81, 0.05);
  /* width: 58vw; */
  margin: 0 auto;
}

/* Story Page */


/* Home Page */

#home-page .page-bg {
  background-image: url(../images/home-main.png);
  background-repeat: no-repeat;
  background-size: 100% 101%;
  min-height: auto;
  margin-bottom: 0;
  padding-bottom: 0;
}

#home-page .secondary-section {
  background-image: url(../images/Our\ Story\ Section.png);
  padding: 64px 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#home-page .relationship-ingredients-section {
  background-image: url(../images/Ingredients\ Section.png);
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 64px 0;
}

#home-page .relationship-ingredients-section .sub-title {
  margin: 0 auto;
  width: 35vw;
}

#home-page .relationship-ingredients-section .ingredient-section {
  display: grid;
  grid-template-columns: repeat(5, 13vw);
  grid-gap: 0px;

  justify-content: center;
  margin-left: -13vw;
}

#home-page .relationship-ingredients-section .ingredient-section .ingredient-item img {
  object-fit: cover;
  width: 25vw;
  height: 18vw;
}

#home-page .relationship-ingredients-section .ingredient-section .ingredient-item h3 {
  /* background-color: #1ABC9C; */
  color: var(--Electric-Blue, #6976F5);
  text-align: center;
  text-transform: uppercase;
  width: 10vw;
  margin-left: 8vw;
}

#home-page .related-products-section {
  padding: 64px 0;
  position: relative;
}

/* #home-page .related-products-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 30px;
} */

#home-page .related-products-section .slick-next.slick-arrow img {
  position: absolute;
  top: -400px;
  left: -137px
}

#home-page .related-products-section .slick-prev.slick-arrow img {
  position: absolute;
  top: -400px;
  left: 1245px;
}


#home-page .professional-connect {
  background-image: url(../images/footer-top-bg.png);
  background-repeat: no-repeat;
  padding: 64px 0 169px;
  background-size: 100% 151%;
  margin-bottom: -65px;
}

#home-page .product-detail .product-card .product-image img {
  border-radius: 24px;
  box-shadow: 0px 4px 19px 0px rgba(128, 45, 117, 0.15), -8px -8px 19px 0px rgba(102, 36, 94, 0.05);
  width: 100%;
}

#home-page .related-products-card .product-detail {
  margin-right: 15px;
  margin-left: 15px;
}

#home-page .slider-btn img {
  cursor: pointer;
}

#our-story .product-detail img {
  width: 100%;
}

#our-story .product-card {
  margin-right: 20px;
}

/* Responsive */

@media (min-width: 375px) and (max-width: 767px) {

  #product-listing .product-detail  {
    margin-bottom: 30px;
  }


  .tab-pane .cards-section .card-content .card-body h3 {
    font-size: 18px;
  }

  #home-page .secondary-section {
    padding: 40px 0;
  }

  #home-page .main-banner .text-primary-p-18 {
    font-size: 16px;
  }

  #home-page .related-products-section .related-products-card {
    grid-template-columns: repeat(1, 100%);
  }

  #home-page .related-products-section .related-products-card .product-card .product-image img {
    width: 327px;
    height: 360px;
    object-fit: cover;
    border-radius: 24px;
  }

  #home-page .cards-section .card-main .d-flex {
    flex-direction: column-reverse;
  }

  #home-page .bestsellers-section p.text-main {
    margin-bottom: 8px !important;
  }

  #home-page .bestsellers-section p {
    font-size: 16px;
    margin-bottom: 24px;
  }

  #home-page .bestsellers-section .primary-button .btn-primary {
    margin-top: 0;
  }

  #home-page .page-bg {
    background-image: url(../images/Bg-Mobile.png);
    background-size: 100% 105%;
    padding: 130px 12px 40px 12px;
  }

  #home-page .bestsellers-section .row {
    flex-direction: column-reverse;
  }

  #home-page .bestsellers-section {
    background-image: url(../images/Our-Story-Section-Mobile.png);
  }

  #home-page .bestsellers-section .primary-button .btn-primary,
  #home-page .primary-button .btn-primary,
  #home-page .secondary-btn .btn-secondary {
    width: 100%;
  }

  #home-page .card-body .btn-secondary {
    padding: 16px 10px;
    font-size: 16px;
  }

  #home-page .relationship-ingredients-section {
    background-image: url(../images/Ingredients-Section-Mobile.png);
  }

  #home-page .relationship-ingredients-section .title {
    margin-bottom: 0px;
  }

  #home-page .card-main {
    padding: 24px 16px;
    border-radius: 16px;
  }

  #home-page .related-products-section .related-products-wrapper h2 {
    text-align: center !important;
  }

  #home-page .relationship-ingredients-section {
    padding: 40px 0;
  }

  #home-page .professional-connect {
    padding: 0px 0 169px;
  }

  #home-page .add-product p {
    font-size: 20px;
  }

  #home-page .related-products {
    margin-bottom: 24px;
  }

  #home-page .professional-connect {
    background-image: url(../images/tabs-mobile.png);
    background-size: 100% 100%;
  }

  #home-page .related-products-section .related-products-card {
    display: block;
  }

  #home-page .related-products-card .product-detail {
    margin-bottom: 40px;
  }

  #home-page .professional-connect img {
    max-width: 100%;
  }

  #home-page .professional-connect,
  #home-page .bestsellers-section,
  #home-page .related-products-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .slick-next:before {
    content: unset;
  }
}

@media (min-width: 375px) and (max-width: 1550px) {

  #home-page .banner-section img,
  #home-page .bestsellers-section img,
  #home-page .related-products-section img {
    max-width: 100%;
  }

}

/* Home Page */

.relationship-section .slick-next.slick-arrow {
  /* border: 1px solid #000; */
  position: absolute;
  top: 96%;
  right: 39%;
}

.relationship-section .slick-prev.slick-arrow {
  position: absolute;
  top: 89%;
  left: 39%;
}

.related-cards-wrapper .slick-next.slick-arrow {
  /* border: 1px solid #000; */
  position: absolute;
  top: 100.2%;
  right: 39%;
}

.related-cards-wrapper .slick-prev.slick-arrow {
  position: absolute;
  top: 99%;
  left: 39%;
}

.related-cards-wrapper .slick-next.slick-arrow img,
.related-cards-wrapper .slick-prev.slick-arrow img {
  max-width: none !important;
}

@media (min-width: 375px) and (max-width: 767px){
    .contact-section.d-flex {
        display: block !important;
    }
    .contact-section .g-16 {
        gap: 16px;
        margin-bottom: 20px;
    }
}