@font-face {
  font-family: "Montserrat-Bold";
  src: url("../../base/fonts/Montserrat/Montserrat-Bold.ttf");
}

@font-face {
  font-family: "Montserrat-Light";
  src: url("../../base/fonts/Montserrat/Montserrat-Light.ttf");
}

@font-face {
  font-family: "Montserrat-Medium";
  src: url("../../base/fonts/Montserrat/Montserrat-Medium.ttf");
}

@font-face {
  font-family: "Montserrat-Regular";
  src: url("../../base/fonts/Montserrat/Montserrat-Regular.ttf");
}

@font-face {
  font-family: "Montserrat-SemiBold";
  src: url("../../base/fonts/Montserrat/Montserrat-SemiBold.ttf");
}

.nav-link {
  font-family: "Montserrat-Medium", sans-serif;
  font-family: 14px;
}

.dropdown-item {
  font-family: "Montserrat-Regular", sans-serif;
  font-family: 14px;
}

:root {
  --clr-primary: #d6a1a1;
  --clr-secondary: #707070;
  --clr-accent: #260d0d;
  --clr-dark: #0a0a0a;
  --clr-light: #f8f8ff;
  --clr-gray: #707070;
  --clr-success: #8bc34a;
}

.c-main {
  padding: 2rem 1rem 2rem;
}

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

p,
li {
  font-family: "Montserrat-Regular", sans-serif;
}

.text-yellow,
.text-yellow:hover {
  font-family: "Montserrat-Medium", sans-serif;
  color: var(--clr-primary);
}

.accordion .card .card-header[aria-expanded="true"] h6,
.accordion .card .card-header:hover h6 {
  color: var(--clr-primary);
}

.navbar-nav .nav-item.active .nav-link {
  color: var(--clr-accent) !important;
  font-weight: 700;
}

.c-sidebar-nav-item .media,
.c-sidebar-nav-item .media .media-body .title {
  color: var(--clr-accent);
}

.c-sidebar-nav-item .media .media-body .title {
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 15px;
}

.box-sidebar .box-content > a.box-item {
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 13px;
  color: var(--clr-accent);
}

.box-sidebar .box-content > div.box-item .prefix {
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 13px;
  color: var(--clr-accent);
  text-transform: capitalize;
}

.box-sidebar .box-content > div.box-item a {
  font-family: "Montserrat-Regular", sans-serif;
  font-size: 13px;
  color: var(--clr-accent);
}

.btn-canarymute {
  font-family: "Montserrat-Bold", sans-serif;
  font-size: 14px;
  border-radius: 14px;
  background-color: var(--clr-primary);
  color: var(--clr-light);
  padding-inline: 1.25rem;
}

.btn-canarymute:hover,
.btn-harvestfill:hover {
  color: var(--clr-light);
}

.btn-harvestfill {
  font-family: "Montserrat-Bold", sans-serif;
  font-size: 14px;
  border-radius: 14px;
  border: 1px solid var(--clr-primary);
  background-color: var(--clr-primary);
  color: var(--clr-light);
  padding-inline: 1.25rem;
}

.btn-harvestoutline {
  font-family: "Montserrat-Bold", sans-serif;
  font-size: 14px;
  border-radius: 14px;
  border: 1px solid var(--clr-primary);
  background-color: var(--clr-light);
  color: var(--clr-primary);
  padding-inline: 1.25rem;
}

.btn-harvestoutline.btn-prev,
.btn-harvestoutline.btn-prev:hover {
  color: var(--clr-primary);
  background-color: #ffffff;
}

.btn-preview {
  font-family: "Montserrat-Bold", sans-serif;
  font-size: 14px;
  border-radius: 14px;
  color: var(--clr-gray);
  padding-inline: 1.25rem;
}

.btn-submit,
.btn-submit:hover {
  font-family: "Montserrat-Bold", sans-serif;
  font-size: 14px;
  border-radius: 14px;
  border: 1px solid var(--clr-success);
  background-color: var(--clr-success);
  color: var(--clr-light);
  padding-inline: 1.25rem;
}

.c-sidebar-nav,
.footer {
  background-color: var(--clr-primary);
}

.footer-label,
.footer-text {
  font-family: "Montserrat-Medium", sans-serif;
  font-size: 13px;
  color: var(--clr-dark);
}

.footer-text a {
  color: var(--clr-dark);
}

@media screen and (min-width: 992px) {
  .navbar {
    position: relative;
    min-height: 60px;
  }

  .btn-canarymute {
    font-size: 16px;
    border-radius: 14px;
  }

  .btn-harvestfill {
    font-size: 16px;
  }
}

.hero-image-container {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-container .image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-image-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 1025px) {
  .hero-image-container {
    float: right;
    width: auto;
    height: 450px;
    shape-outside: circle(55%);
    border-radius: 10px;
    padding: 0 0 12px 12px;
    overflow: hidden;
  }

  .hero-image-container .image {
    object-fit: contain;
  }
}

.main-title {
  font-family: "Montserrat-Bold", sans-serif;
  color: var(--clr-accent);
  white-space: wrap;
  padding-top: 1.8rem;
}

.main-title.home-title {
  font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
  .main-title.home-title {
    font-size: 3.3rem;
  }
}

@media screen and (min-width: 992px) {
  .main-title.home-title {
    font-size: 4rem;
  }
}

.c-main {
  padding: 2rem 2rem 4rem 2rem;
  position: relative;
}

.c-main .ornament-1 {
  background-image: url("../img/ornament-4.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 130px;
  width: 130px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.c-main .ornament-2 {
  background-image: url("../img/ornament-3.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 130px;
  width: 130px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -30;
}

.webform-title {
  font-family: "Montserrat-Bold", sans-serif;
  color: var(--clr-accent);
}

.webform-label,
.step-name {
  font-family: "Montserrat-Medium", sans-serif;
}

.custom-control-label,
.webform-errormessage,
.form-text.text-info,
.error-message {
  font-family: "Montserrat-Regular", sans-serif;
}

.webform-steppers .stepper-item.complete .step-dot,
.webform-steppers .stepper-item.active .step-dot {
  background-color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
}
.webform-steppers .stepper-item.complete .step-name,
.webform-steppers .stepper-item.active .step-name {
  color: var(--clr-primary);
}

.webform-steppers .stepper-item.complete:not(:first-child)::before,
.webform-steppers .stepper-item.active:not(:first-child)::before {
  background-color: var(--clr-primary);
}

.form-control:focus {
  border-color: var(--clr-primary);
}

.form-control:focus,
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--clr-primary);
  background-color: var(--clr-primary);
}