:root {
  --primary-color: #f8e3ea;
  --secondary-color: #a33660;
  --third-color: #000000;
  --fourth-color: #ffffff;
  --primary-color-light: #fdeff3;
  --primary-color-dark: #a02f5f;
  --secondary-color-light: #f3cbd9;
  --secondary-color-dark: #7d2344;
  --contrast-color: #db7fa4;
  --text-color: #2d2d2d;
  --text-color-2: #c43c72;
  --light-color: #faf6f8;
  --bg-color: #891e45;
}

* {
  transition: 0.2s;
}

html {
  font-size: 20px;
  scroll-padding-top: 92px;
}

body {
  font-family: "Montserrat", sans-serif;
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
}

img {
  width: 100%;
  max-width: -moz-fit-content;
  max-width: fit-content;
  height: auto;
}

figure {
  margin-bottom: 0;
}

.fw-bold,
b {
  font-weight: 800 !important;
}

.caret li {
  position: relative;
  padding-left: 6px;
  list-style: none;
}
.caret li::before {
  content: "\f231";
  font-family: "bootstrap-icons";
  position: absolute;
  top: -0.6em;
  left: -1em;
  color: var(--secondary-color);
  font-size: 1.6em;
  transform: translateY(10px) !important;
}

.item {
  transition: 0.2s;
}
.item:hover {
  scale: 1.025;
}

header {
  background-color: var(--main-color);
}
header .navbar-nav a {
  color: white;
  border-radius: 0.25rem;
  cursor: pointer;
}
header .navbar-nav a:hover {
  color: var(--main-color);
  background-color: white;
}
header .navbar-nav a.btn {
  background-color: white;
  color: var(--main-color);
  transition: 0.2s;
}
header .navbar-nav a.btn:hover {
  box-shadow: 0 0 0 0.25rem #00000033, 0 0 0 0.5rem #00000011;
}
span {
  color: yellow;
}
.logo {
  max-width: 180px;
}
.navbar-toggler {
  color: #ffffff22;
  border-color: white;
}
.navbar-toggler-icon {
  filter: brightness(10);
}
#hero {
  background: linear-gradient(45deg, var(--main-color), var(--side-color));
  color: white;
  text-shadow: 2px 2px 0 #00000020;
}
#hero span {
  font-weight: bold;
}
#about .icon img {
  width: 50px;
  max-width: 50px;
}
#starting {
  background: linear-gradient(45deg, var(--main-color), var(--side-color));
  color: white;
  text-shadow: 2px 2px 0 #00000020;
}
#shipping {
  background-color: white;
  color: var(--main-color);
}
#shipping img {
  filter: brightness(0.45) sepia(1) hue-rotate(40deg) saturate(2);
}
#shipping p {
  color: var(--text-color);
}
#shipping u {
  text-decoration-color: yellow;
}
.products {
  padding: 0 0 3rem;
}
.products span {
  color: black;
}
.products .header span {
  color: white;
}
#ratings img {
  max-width: 38px;
}

#guarantee {
  padding-top: 8rem;
  margin-bottom: 4rem;
}
#guarantee .badges img {
  display: block;
  max-width: 240px;
  margin: -9rem auto 2rem;
}
@media (max-width: 599px) {
  #guarantee .badges img {
    max-width: 70px;
  }
}

/*#faq {
	background: linear-gradient(45deg, var(--main-color), var(--side-color));
	color: white;
}*/
#faq .accordion {
  box-shadow: 0 0 30px #0000002e;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
/*#faq .accordion-item {
	background: none;
	border: 0;
}*/
#faq .accordion-button:not(.collapsed) {
  background-color: white;
}
#faq .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem #8fbc8fb8;
}
/*#faq .accordion-body {
	color: white;
}*/
.box-1 {
  background-color: #f1f1f1;
  border: 2px solid green;
}
.box-1 .box-header {
  background-color: var(--main-color);
  color: white;
}
.box-1 .negative-margin {
  margin-top: -100px;
}
.products-header {
  background-color: var(--main-color);
}
.g-arrow {
  position: relative;
  background-color: var(--main-color);
  top: -1px;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  height: 45px;
  max-width: 100vw;
  width: 100%;
  margin: 0 auto;
  border-top: none !important;
}

#references * {
  font-weight: 700;
  word-break: break-all;
}
@media (max-width: 599px) {
  #references ol {
    font-size: 0.7em;
    padding-left: 2em;
    margin-top: -1em;
  }
}
#references span {
  color: #8f8f8f;
}

.modal.downsell {
  background-color: var(--secondary-color);
  z-index: 9999;
}
.modal.downsell figure {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.modal.downsell figure .guarantee-badge {
  position: absolute;
  max-width: 100px;
  top: 1em;
  right: 2vw;
}
@media (max-width: 599px) {
  .modal.downsell figure .guarantee-badge {
    max-width: 20vw;
    right: 0;
    top: 0;
  }
}
.modal.downsell .per-bottle {
  color: var(--primary-color);
  font-size: 2em;
}
.modal.downsell .savings {
  color: rgb(14, 194, 110);
  font-size: 1.6em;
}
.modal.downsell .modal-dialog {
  max-width: 100%;
}
.modal.downsell .no-thanks {
  font-size: 1em;
}
.modal.downsell#secondDownsell {
  background-color: var(--contrast-color);
}
@media (max-width: 599px) {
  .modal.downsell .button-bg {
    font-size: 1em !important;
  }
  .modal.downsell h2 {
    font-size: 1.4em !important;
  }
  .modal.downsell .per-bottle {
    margin-top: 1em;
    font-size: 1.4em;
  }
  .modal.downsell .savings {
    font-size: 1.2em;
  }
}
.modal .savings {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.modal .savings .badge {
  position: absolute;
  align-content: center;
  height: 110px;
  width: 110px;
  font-size: 0.8em;
  border-radius: 50%;
  top: 1em;
  right: 2em;
  background-color: var(--primary-color);
}
.modal .savings .badge span {
  display: block;
  font-size: 2.25em;
  font-weight: 900;
  letter-spacing: -2px;
}

footer {
  background: linear-gradient(45deg, var(--main-color), var(--side-color));
  color: white;
}
footer a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}
@media (max-width: 767px) {
  .box-1 .box-header {
    padding-bottom: 160px !important;
  }
  .box-1 .negative-margin {
    margin-bottom: 2rem;
    margin-top: -160px;
  }
}
@media (max-width: 500px) {
  .box-1 .icons {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 425px) {
  .logo {
    max-width: 120px;
  }
}