@font-face {
  font-family: Montserrat;
  src: url("/fonts/Montserrat-VariableFont_wght.woff2");
}

body {
    background: #E8F4E7;
}

.order-now-modal {
    background: #E8F4E7;
    font-family: Montserrat;
}

.cacique-form, .cacique-form:focus {
    background-color: #E8F4E7;
    border: 1px solid #1C221B;
    border-radius: 8px;
}

a {
    text-decoration: none;
    font-family: Montserrat;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #1C221B;
}

.vr {
    color: white;
    opacity: 1;
}

.ordernow-btn {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0%;
}

.icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-size: cover;
}

.icon-cart {
    background-image: url("/assets/cart-white-664e4dde.svg");
}

.btn-outline-cacique-red {
    border: 1px solid #A30527;
    border-radius: 8px;
    color: #A30527;
}

.btn-cacique-red {
    border: 1px solid #A30527;
    border-radius: 8px;
    background: #A30527;
    color: #FFFFFF;
}

.ordernow-btn:hover,
.ordernow-btn:focus,
.btn-outline-cacique-red:focus,
.btn-outline-cacique-red:hover {
    background: #A30527;
    border: 1px solid #A30527;
    color: #FFFFFF;
}

.btn-cacique-red:focus,
.btn-cacique-red:hover {
    background: #85001C;
    border: 1px solid #85001C;
    color: #FFFFFF;
}

#about-container {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
                      url("/assets/18e18e923749e45ba27c9f4b22739392-1380c4f9.webp");
    background-position: 50% 75%;
    background-repeat: no-repeat;
    background-size: cover;
}

#about {
    max-height: 605px;
    height: 605px;
    gap: 15px;
    border-bottom-width: 1px;
}

.big-heavy {
    font-weight: 700;
    font-size: 60px;
    font-family: Montserrat;
    line-height: 24px;
    letter-spacing: 2px;
    text-align: center;
    color: #ffffff;
}

.big {
    font-weight: 500;
    font-size: 60px;
    font-family: "Montserrat";
    line-height: 24px;
    letter-spacing: 2px;
    text-align: center;
    color: #ffffff;
}

.about-icon {
    width: 58px;
    height: 58px;
}

.about-text {
    font-weight: 500;
    font-size: 16px;
    font-family: "Montserrat";
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #ffffff;
    max-width: 928px;
}

.grow {
    overflow: hidden;
    display: inline-block;
    max-width: 0px;
    white-space: nowrap;
    transition: max-width 0.25s ease-out;
}

.grow, .grow a, .grow a:hover {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #FFFFFF;
}

.nav-item:hover .grow {
    max-width: 500px;
    transition: max-width 0.5s ease-in;
}

.nav-item:hover {
    border-bottom: 2px solid #FFFFFF;
}

.cacique-logo {
    width: 353px;
}

.order-form {
    font-family: Montserrat;
    background: #A30527;
    color: #ffffff;
}

.order-form-bottom {
    font-family: Montserrat;
    background: #E8F4E7;
    color: #1C221B;
}

.order-form-hero-image {
    object-fit: contain;
}

#beans-container {
    background: #A30527;
}

#wholesale-customers {
    background: #A30527;
}

.wholesale-header {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 34px;
    line-height: 52px;
    letter-spacing: -2%;
    color: #FFFFFF;
    text-transform: uppercase;
}

.wholesale-logo:hover {
    filter: brightness(85%)
}

#beans {
    gap: 96px;
    border-bottom-width: 1px;
}

.bean-header {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -2%;
    color: #FFFFFF;
}

.bean-text {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5%;
    color: #FFFFFF;
}

.bean-image-div {
    max-height: 476px;
    position: relative;
    border-radius: 15px;
}

.bean-image {
    position: absolute;
    margin-top: -400px;
    margin-left: -15px;
    width: 760px;
}

#bags-container {
    background: rgba(0, 0, 0, 0.7) url("/assets/33563c9ce50d7fa1dbea1c9fc6bf1b6b-aea562bf.webp");
    background-blend-mode: darken;
    background-position: 50% 75%;
    background-size: cover;
    background-repeat: no-repeat;
}

#bags {
    border-bottom-width: 1px;
    border-bottom: 1px solid #1C221B;
}

.bags-text {
    max-width: 900px;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
}

#roasts-container {
    background: #E8F4E7;
}

#roasts {
    gap: 24px;
    padding-top: 96px;
    padding-right: 50px;
    padding-bottom: 48px;
    padding-left: 50px;
    background: #E8F4E7;
    color: #1C221B;
}

.roast-header {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -2%;
    color: #1C221B;
}

.roast-card-title {
    font-family: Montserrat;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #ffffff;
}

.card-roast {
    max-height: 200px;
    max-width: 400px;
}

.light-roast-bg {
    background: #A30527;
}

.medium-roast-bg {
    background: #85001C;
}

.dark-roast-bg {
    background: #5C0014;
}

.custom-roast-bg {
    background: #367D94;
}

.medium-roast-beans {
    filter: brightness(75%);
}

#roast-description {
    border: 1px solid #A30527;
    border-radius: 16px;
}

.roast-description-p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
}

.roast-description-card {
    height: 168px;;
}

.roast-description-beans {
    width: 150%;
}

#roast-selector {
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: #A30527;
}

.nivel-type {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 12px;
    line-height: 11px;
    letter-spacing: 1px;
    text-align: right;
    color: #A30527;
}

.nivel-type-small {
    font-family: Montserrat;
    font-weight: 300;
    font-size: 10px;
    line-height: 24px;
    letter-spacing: 0.1px;
    color: #A30527;
}

.dot-container {
    /* position: relative; */
    /* width: 50%; */
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.dot {
    height: 14px;
    width: 14px;
    /* background-color: #bbb; */
    border-radius: 50%;
    border: 1px solid #A30527;
    display: inline-block;
}

.dot-2 { border-width: 2px; }
.dot-3 { border-width: 3px; }
.dot-4 { border-width: 4px; }
.dot-5 { border-width: 5px; }

.star-container {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.icon-star {
    width: 41px;
    height: 41px;
    background-image: url("/assets/star-892d0556.svg");
}

.icon-star-sm {
    width: 27.25px;
    height: 27.25px;
    background-image: url("/assets/star-892d0556.svg");
}

.icon-star-sm-sec {
  width: 20px;
  height: 20px;
  background-image: url("/assets/star-892d0556.svg");
}

.rating-container {
    position: relative;
    width: 50%;
}

.rating-container:hover .dot-container,
.star-active .dot-container {
  opacity: 0.5;
}

.rating-container:hover .star-container,
.star-active .star-container {
  opacity: 1;
}

.height-auto {
    height: 100%;
}

.bean-roast {
    border-radius: 16px;
    border: 1px solid #A30527;
    background: #E8F4E7;
    height: 100%;
}

.bean-roast-image-container {
    gap: 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 33vh;
}

.bean-roast-banner-light {
    background: #A30527CC;
}

.bean-roast-banner-medium {
    background: #85001C;
}

.bean-roast-region {
    font-family: Montserrat;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: bottom;
    color: #FFFFFF;
}

.bean-roast-region-small {
    font-family: Montserrat;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: bottom;
    color: #FFFFFF;
}

.bean-roast-border {
    border: 1px solid #A30527;
}

.bean-roast-border-no-right {
    border-right: 0px;
}

.bean-roast-header {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 7px;
    line-height: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #A30527;
}

.bean-roast-text {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.1px;
    vertical-align: middle;
    color: #000000;
}

.stamp {
  transform: rotate(12deg);
	color: #555;
	font-size: 3rem;
	font-weight: 700;
	border: 0.25rem solid #555;
	display: inline-block;
	padding: 0.25rem 1rem;
	text-transform: uppercase;
	border-radius: 1rem;
	font-family: Montserrat;
	-webkit-mask-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png');
  -webkit-mask-size: 944px 604px;
  mix-blend-mode: multiply;
}

.is-nope {
  color: #A30527;
  border: 0.5rem double #A30527;
  transform: rotate(5deg);
	-webkit-mask-position: 2rem 3rem;
  font-size: 3rem;
}

.order-now-image {
    border: 1px solid #000000;
    /* width: 622px; */
    /* height: 485px; */
    max-width:100%;
    max-height:100%;
    object-fit: contain;
    border-radius: 15px;
}

.contain_image {
    border: 1px solid #000000;
    /* width: 622px; */
    /* height: 485px; */
    max-width:100%;
    max-height:100%;
    border-radius: 15px;
    object-fit: contain;
}

.order-header {
    color: #1C221B;
    text-transform: uppercase;

}

.order-text {
    color: #1C221B;
}

.newsletter-header {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #1C221B;
}

.newsletter-text {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #1C221B;
}

.invalid-feedback-text {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0%;
}

.invalid-feedback-text-black {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #1C221B;
}

#contact-container {
    background-image: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66)),
                      url("/assets/IMG_1576-3e2131c9.webp");
    background-position: 0% 64%;
    /* height: 1536px; */
    background-size: cover;
    opacity: 0.8;
    border-bottom-width: 1px;
    background-repeat: no-repeat;
}

.contact-header {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 34px;
    line-height: 40px;
    letter-spacing: -2%;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

.contact-text {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
}

#footer-container {
    border-top: 1px solid black;
    background: #E8F4E7;
}

.footer-logo {
    object-fit: contain;
    /* width: 20vw; */
    max-width: inherit;
    max-height: inherit;
    /* height: inherit; */
    /* width: inherit; */
}

ul {
    list-style-type: none;
}

.claro-text-sm {
    font-family: Montserrat;
    font-weight: 330;
    font-size: 7px;
    /* line-height: 11px; */
    letter-spacing: 0.1px;
    vertical-align: middle;
    color: #A30527;
}

.oscuro-text-sm {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 7px;
    /* line-height: 11px; */
    letter-spacing: 0.1px;
    text-align: right;
    vertical-align: middle;
    color: #A30527;
}

.notice-cacique {
    background: #A30527;
    font-family: Montserrat;
    font-weight: 650;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0%;
    color: #FBFFFA;
}

@media (max-width: 991px) {
    .navbar-rule {
        display: none;
    }

    .grow {
        max-width: 500px;
    }

    .cacique-logo {
        width: 253px;
    }

    .order-margin-top {
        margin-top: 8px;
    }

    .big-heavy, .big {
        line-height: 48px;
    }

    #about {
        max-height: none;
        height: auto;
    }

    .bean-roast-image {
        height: 25vh;
    }
}