@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metal:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/*
  RESET
 */
html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;  -webkit-font-smoothing: antialiased;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption {  margin: 0;  padding: 0;}button {  background-color: transparent;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;  color: inherit;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}pre {  white-space: normal;}input {  padding: 2px 4px;}img {  display: block;}details {  display: block;  margin: 0;  padding: 0;}summary::-webkit-details-marker {  display: none;}[data-thq="accordion"] [data-thq="accordion-content"] {  max-height: 0;  overflow: hidden;  transition: max-height 0.3s ease-in-out;  padding: 0;}[data-thq="accordion"] details[data-thq="accordion-trigger"][open] + [data-thq="accordion-content"] {  max-height: 1000vh;}details[data-thq="accordion-trigger"][open] summary [data-thq="accordion-icon"] {  transform: rotate(180deg);}html { scroll-behavior: smooth  }

html {
  font-family: Inter;
  font-size: 16px;
}

body {
  font-weight: 400;
  font-style:normal;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.15;
  color: var(--dl-color-theme-neutral-dark);
  background: var(--dl-color-theme-neutral-light);

  fill: var(--dl-color-theme-neutral-dark);
}

/* 
  HOME & NAV
*/

.home-container1 {
  width: 100%;
  margin: 0px auto;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 
.home-navigation-bar {
  width: 100%;
  height: 165px;
  margin: 0px auto;
  display: block;
  text-align: center;
  overflow: hidden;
  position: relative;
  background-image: image-set(
    url("/hires/header-1200.png") 1x,
    url("/hires/header-2400.png") 2x,
    url("/hires/header-2400.png") 3x
  );
  background-size: 1628px auto;
  background-position: top center;
  z-index: 100;
}



.home-navigation-bar .nav-left, .home-navigation-bar .nav-right {
  position: absolute;
  bottom: 25px;
}

.nav-mobile {
  width: 100%;
  background-image: url('/external/rectangle2i2490-5ul-300h.png');
  z-index: 10;
}

.nav-mobile-top {
  position: absolute;
  top: -170px;
}

.nav-mobile a {
  display: block;
  padding: 20px 10px;
}

.nav-hamburger {
  position: absolute;
  display: inline-block;
  top: 17px;
  right: 17px;
  width: 36px;
  height: 36px;
  z-index: 200;
}

.nav-hamburger:hover {
  cursor: pointer;
}

.nav-hamburger img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 300px) and (max-width: 480px) {

  .home-navigation-bar {
    height: 71px;
  }

  .logo-mobile {
    display: inline-block;
    top: 15px;
    left: 15px;
    width: auto;
    height: 41px;
    position: absolute;
  }

  .logo {
    display: none;
  }

  .home-navigation-bar .nav-left,
  .home-navigation-bar .nav-right,
  .nav-footer {
    display: none;
  }

  .hero {
    height: 465px;
  }

  .home-hero {
      height: 568px;
  }

  .nav-mobile {
    display: block;
  }

  .nav-hamburger {
    display: block;
  }

  .nav-footer-contact {
    display: none;
  }

  .nav-footer-contact-mobile {
    display: block;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {

  .home-navigation-bar {
    height: 71px;
  }

  .logo-mobile {
    display: inline-block;
    top: 15px;
    left: 15px;
    width: auto;
    height: 41px;
    position: absolute;
  }

  .logo {
    display: none;
  }

  .home-navigation-bar .nav-left,
  .home-navigation-bar .nav-right,
  .nav-footer {
    display: none;
  }

  .hero {
    height: 465px;
  }

  .home-hero {
      height: 568px;
  }

  .nav-mobile {
    display: block;
  }

  .nav-hamburger {
    display: block;
  }

  .nav-footer-contact {
    display: none;
  }

  .nav-footer-contact-mobile {
    display: block;
  }
}

@media screen and (min-width: 930px) and (max-width: 1024px) {

  .home-navigation-bar {
    height: 165px;
  }

  .logo {
    top: 35px;
    width: 206px;
    height: 104px;
    position: relative;
    display: inline-block;
    margin: 0px auto;
  }

  .logo-mobile {
    display: none;
  }

  .home-navigation-bar .nav-left, .home-navigation-bar .nav-right {
    display: inline-block;
    top: 120px;
  }

  .home-navigation-bar .nav-left {
    margin-left: -500px;
    text-align: right;
  }

  .home-navigation-bar .nav-right {
    margin-left: 50px;
    text-align: left;
  }

  .nav-footer {
    display: block;
  }

  .nav-mobile {
    display: none;
  }

  .nav-hamburger {
    display: none;
  }

  .nav-footer-contact {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 100px;
  }

  .nav-footer-contact-mobile {
    display: none;
  }
}

@media screen and (min-width: 1025px) {

  .home-navigation-bar {
    height: 165px;
  }

  .logo {
    top: 35px;
    width: 206px;
    height: 104px;
    position: relative;
    display: inline-block;
    margin: 0px auto;
  }

  .logo-mobile {
    display: none;
  }

  .home-navigation-bar .nav-left, .home-navigation-bar .nav-right {
    display: inline-block;
    top: 120px;
  }

  .home-navigation-bar .nav-left {
    margin-left: -500px;
    text-align: right;
  }

  .home-navigation-bar .nav-right {
    margin-left: 50px;
    text-align: left;
  }

  .nav-footer {
    display: block;
  }

  .nav-mobile {
    display: none;
  }

  .nav-hamburger {
    display: none;
  }

  .nav-footer-contact {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 100px;
  }

  .nav-footer-contact-mobile {
    display: none;
  }
}

.home-navigation-bar .nav-left a, .home-navigation-bar .nav-right a, .nav-mobile a {
  color: rgba(169, 155, 92, 1);
  margin: 0 20px;
  height: auto;
  position: relative;
  font-size: 16px;
  font-style: Bold;
  text-align: left;
  font-family: Inter;
  font-weight: 700;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
  white-space: nowrap;
}

.home-navigation-bar a:hover, .nav-mobile a:hover {
  color: rgba(255, 255, 255, 1);
}
 
.home-clippathgroup1 {
  top: -42px;
  left: 0px;
  height: 242px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 1;
}
 
.home-clippath1 {
  top: 0px;
  left: 0px;
  height: 242px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 1;
}
 
.home-vector1 {
  top: 0px;
  left: -2.2737367544323206e-13px;
  width: auto;
  height: 242px;
  position: absolute;
}
 
.home-group1 {
  top: -711.0040893554688px;
  left: -0.016017913818359375px;
  height: 1706.00390625px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 1;
}
 
.home-vector2 {
  top: 0.004016766790300608px;
  left: 0.016071904450654984px;
  width: auto;
  height: 1706px;
  position: absolute;
}
 
.home-vector3 {
  top: 0px;
  left: 0px;
  width: auto;
  height: 1706px;
  position: absolute;
}
 
.home-text10 {
  top: 118px;
  left: 507px;
  color: rgba(169, 155, 92, 1);
  height: auto;
  position: absolute;
  font-size: 16px;
  font-style: Bold;
  text-align: left;
  font-family: Inter;
  font-weight: 700;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text11 {
  top: 118px;
  left: 1014px;
  color: rgba(169, 155, 92, 1);
  height: auto;
  position: absolute;
  font-size: 16px;
  font-style: Bold;
  text-align: left;
  font-family: Inter;
  font-weight: 700;
  line-height: 16px;
  font-stretch: normal;
  text-decoration: none;
}

/*
  HERO
 */
 
.hero {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background-position: center;
  background-repeat: no-repeat;
  animation: hero-animation-reset 0.75s ease-in-out forwards;
}

.hero-text {
  color: rgba(255, 255, 255, 1);
  height: auto;
  font-style: Regular;
  text-align: center;
  font-family: Metal;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
  text-shadow: 0px 4px 4px rgba(0,0,0,0.67);
}

@media screen and (min-width: 300px) and (max-width: 480px) {
  .hero {
    height: 380px;
    background-size: auto 103%;
  }

  .home-hero {
      height: 380px;
      background-size: 120% auto !important;
  }

  .hero-text {
    font-size: 50px;
    line-height: 50px;
  }

  .home-hero {
    background-image: url("/hires/hero-mobile-home.png");
  }

  .home-text29 {
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {
  .hero {
    height: 380px;
    background-size: auto 103%;
  }

  .home-hero {
      height: 380px;
      background-size: 100% auto !important;
  }

  .hero-text {
    font-size: 50px;
    line-height: 50px;
  }

  .home-hero {
    background-image: url("/hires/hero-mobile-home.png");
  }

  .home-text29 {
    font-size: 14px;
    line-height: 20px;
  }

}

@media screen and (min-width: 930px) and (max-width: 1024px) {
  .hero {
    height: 565px;
    background-size: auto 103%;
  }

  .home-hero {
      height: 668px;
  }

  .hero-text {
    font-size: 75px;
    line-height: 16px;
  }

  .home-hero .button-black {
    margin-top: 50px;
  }

  .home-hero {
    background-image: url("/external/img795612018-wdph-600h.png");
  }

  .home-text29 {
    font-size: 18px;
    line-height: 30px;
  }
}

@media screen and (min-width: 1025px) {
  .hero {
    height: 565px;
    background-size: auto 103%;
  }

  .home-hero {
      height: 668px;
  }

  .hero-text {
    font-size: 75px;
    line-height: 16px;
  }

  .home-hero .button-black {
    margin-top: 50px;
  }

  .home-hero {
    background-image: url("/external/img795612018-wdph-600h.png");
  }

  .home-text29 {
    font-size: 18px;
    line-height: 30px;
  }
}

/*
  HOME
 */
 
.home-cta {
  top: 402px;
  left: 764px;
  width: 200px;
  height: 45px;
  display: flex;
}
 
.home-rectangle1 {
  top: 0px;
  left: 0px;
  width: 200px;
  height: 45px;
  position: absolute;
}
 
.button-black {
  color: rgba(255, 255, 255, 1);
  height: auto;
  font-size: 18px;
  font-style: Medium;
  text-align: center;
  font-family: Montserrat;
  font-weight: 500;
  line-height: 30px;
  font-stretch: normal;
  padding: 10px 50px;
  margin: 0px auto;
  background-color: #000;
  text-decoration: none;
}
 
.home-text13 {
  color: rgba(255, 255, 255, 1);
  height: auto;
  font-size: 75px;
  margin-top: 100px;
  /*box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.6700000166893005) ;*/
  font-style: Regular;
  text-align: center;
  font-family: Metal;
  font-weight: 400;
  line-height: 75px;
  font-stretch: normal;
  text-decoration: none;
  text-shadow: 0px 4px 4px rgba(0,0,0,0.3);
}
 
.home-img79561 {
  top: 0px;
  left: 0px;
  height: 568px;
}

/*
  HOME SALSA PRODUCTS
 */
 
.home-salsa-products {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home-salsa-products-text {
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
  font-style: Regular;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 30px;
  font-stretch: normal;
  text-decoration: none;
}

@media screen and (min-width: 300px) and (max-width: 480px) {
  .home-salsa-products {
    padding: 20px 20px;
  }

  .home-salsa-products-text {
    text-align: left;
    width: auto;
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {
  .home-salsa-products {
    padding: 20px 20px;
  }

  .home-salsa-products-text {
    text-align: left;
    width: auto;
    font-size: 14px;
    line-height: 20px;
  }

}

@media screen and (min-width: 930px) and (max-width: 1024px) {
  .home-salsa-products {
    padding: 20px;
  }

  .home-salsa-products-text {
    text-align: center;
    width: 70%;
    font-size: 18px;
    line-height: 30px;
  }
}

@media screen and (min-width: 1025px) {
  .home-salsa-products {
    padding: 20px;
  }

  .home-salsa-products-text {
    text-align: center;
    width: 70%;
    font-size: 18px;
    line-height: 30px;
  }
}

.home-salsa-products h2 {
  margin: 20px;
}

.salsa-products {
  width: 90%;
  margin: 0px auto;  
}

.salsa-products::after {
  content: "";
  flex-grow: 0.5; 
}

@media screen and (min-width: 300px) and (max-width: 480px) {
  .salsa-products {
    display: block;
    text-align: center;
  }

  .salsa-product-pic {
    display: block;
    margin: 0px auto;
    text-align: center;
  }

  .salsa-product-pic img {
    margin: 0px auto;
    width: 260px;
    height: auto;
  }

  .salsa-product-taquera img {
    margin-left: 0px;
  }
  .salsa-product-molroja img {
    margin-left: 0px;
  }
  .salsa-product-chile img {
    margin-left: 10px;
  }
  .salsa-product-avocado img {
    margin-left: -5px;
  }
  .salsa-product-molverde img {
    margin-left: 25px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {
  .salsa-products {
    display: block;
    text-align: center;
  }

  .salsa-product-pic {
    display: block;
    margin: 0px auto;
    text-align: center;
  }

  .salsa-product-pic img {
    margin: 0px auto;
    width: 260px;
    height: auto;
  }

  .salsa-product-taquera img {
    margin: 0px auto;
  }
  .salsa-product-molroja img {
    margin: 0px auto;
  }
  .salsa-product-chile img {
    margin: 0px auto;
  }
  .salsa-product-avocado img {
    margin: 0px auto;
  }
  .salsa-product-molverde img {
    margin: 0px auto;
  }
}

@media screen and (min-width: 930px) and (max-width: 1024px) {
  .salsa-products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 75px 75px;
  }

  .salsa-product {
    width: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .salsa-product-pic {
    display: flex;
  }
}

@media screen and (min-width: 1025px) {
  .salsa-products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 75px 75px;
  }

  .salsa-product {
    width: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .salsa-product-pic {
    display: flex;
  }

  .salsa-product-molverde, {
    margin-left: -85px;
  }

  .salsa-product-taquera img {
    margin: 0px auto;
  }
  .salsa-product-molroja img {
    margin: 0px auto;
  }
  .salsa-product-chile img {
    margin: 0px auto;
  }
  .salsa-product-avocado img {
    margin: 0px auto;
  }
  .salsa-product-molverde img {
    margin: 0px auto;
  }
}

.salsa-product:hover {
  animation: salsa-animation 0.3s ease-in-out forwards;
}

.hero:hover {
  animation: hero-animation 0.75s ease-in-out forwards;
}

.salsa-product h3 {
  position: relative;
  margin: 10px auto;
  font-size: 20px;
  font-style: Bold;
  text-align: center;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 30px;
  font-stretch: normal;
  text-decoration: none;
}

.salsa-product-pic {
  position: relative;
}

.home-salsa-image {
  position: relative;
  z-index: 100;
  top: 20px;
  left: 28px;
  height: 255px;
  width: auto;
}

.home-salsa-shadow {
  position: absolute;
  z-index: 10;
  /*top: 19px;
  left: 38px;
  width: 372px;
  height: 237px;*/
}
 
.text-header {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-style: Bold;
  text-align: left;
  font-family: Inter;
  font-weight: 700;
  font-stretch: normal;
  text-decoration: none;
}

@media screen and (min-width: 300px) and (max-width: 480px) {
  .text-header {
    font-size: 20px;
    line-height: 20px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {
  .text-header {
    font-size: 20px;
    line-height: 20px;
  }
}

@media screen and (min-width: 930px) and (max-width: 1024px) {
  .text-header {
    font-size: 30px;
    line-height: 30px;
  }
}

@media screen and (min-width: 1025px) {
  .text-header {
    font-size: 30px;
    line-height: 30px;
  }
}
 
.home-text16 {
  top: 787px;
  left: 619px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-size: 20px;
  font-style: Bold;
  text-align: center;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 30px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text17 {
  top: 817px;
  left: 512px;
  color: rgba(0, 0, 0, 1);
  width: 367px;
  height: auto;
  position: absolute;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text18 {
  top: 817px;
  left: 4px;
  color: rgba(0, 0, 0, 1);
  width: 367px;
  height: auto;
  position: absolute;
  font-size: 15px;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 22px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text19 {
  top: 1237px;
  left: 612px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: absolute;
  font-size: 20px;
  font-style: Bold;
  text-align: center;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 30px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text20 {
  top: 1267px;
  left: 512px;
  color: rgba(0, 0, 0, 1);
  width: 367px;
  height: auto;
  position: absolute;
  font-size: 15px;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 22px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text21 {
  top: 787px;
  left: 81px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: absolute;
  font-size: 20px;
  font-style: Bold;
  text-align: center;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 30px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text22 {
  top: 1267px;
  left: 4px;
  color: rgba(0, 0, 0, 1);
  width: 367px;
  height: auto;
  position: absolute;
  font-size: 15px;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 22px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-component5 {
  top: 518px;
  left: 528px;
  width: 380px;
  height: 263.1500244140625px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
}
 
.home-img8041shadow11 {
  top: 17.100000381469727px;
  left: 23.750001907348633px;
  width: 359px;
  height: 229px;
  position: absolute;
}
 
.home-molcajeterojatub021 {
  /*top: 17.100000381469727px;
  left: 23.750001907348633px;*/
  width: 305px;
  height: 229px;
  /*position: absolute;*/
}
 
.home-component6 {
  top: 511px;
  left: 0px;
  width: 400px;
  height: 277px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
}
 
.home-img8041shadow12 {
  top: 20px;
  left: 28px;
  width: 372px;
  height: 237px;
  position: absolute;
}
 
.home-taqueraconpepitastub021 {
  /*top: 20px;
  left: 28px;*/
  width: 316px;
  height: 237px;
  /*position: absolute;*/
}
 
.home-text23 {
  top: 817px;
  left: 1022px;
  color: rgba(0, 0, 0, 1);
  width: 367px;
  height: auto;
  position: absolute;
  font-size: 15px;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 22px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text24 {
  top: 787px;
  left: 1131px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: absolute;
  font-size: 20px;
  font-style: Bold;
  text-align: center;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 30px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text25 {
  top: 1237px;
  left: 113px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: absolute;
  font-size: 20px;
  font-style: Bold;
  text-align: center;
  font-family: Montserrat;
  font-weight: 700;
  line-height: 30px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-molcajeteverde {
  top: 961px;
  left: 528px;
  width: 430px;
  height: 275px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
}
 
.home-img8041shadow13 {
  top: 13px;
  left: 17.999969482421875px;
  width: 372px;
  height: 244px;
  position: absolute;
}
 
.home-molcajeteverdetub021 {
  top: 13px;
  left: 18px;
  width: 372px;
  height: 244px;
  position: absolute;
}
 
.home-avocado-salsa {
  top: 974px;
  left: 28px;
  width: 372px;
  height: 246px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
}
 
.home-img8041shadow14 {
  top: 0px;
  left: 0px;
  width: 372px;
  height: 246px;
  position: absolute;
}
 
.home-img8041mask1 {
  /*top: 0px;
  left: 0px;*/
  width: 372px;
  height: 246px;
  /*position: absolute;*/
}
 
.home-chiledearbol {
  top: 514px;
  left: 1034px;
  width: 425px;
  height: 272px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
}
 
.home-img8041shadow15 {
  top: 11.869091033935547px;
  left: 21.760000228881836px;
  width: 368px;
  height: 234px;
  /*position: absolute;*/
}
 
.home-imag-echiledearboltub021 {
  /*top: 11.869091033935547px;
  left: 21.760000228881836px;*/
  width: 368px;
  height: 241px;
  /*position: absolute;*/
}
 
.home-oursalsa {
  width: 100%;
  /*height: 605px;
  align-items: center;*/
  overflow: hidden;
  position: relative;
  background-image: image-set(
    url("/hires/header-1200.png") 1x,
    url("/hires/header-2400.png") 2x,
    url("/hires/header-2400.png") 3x
  );
  background-size: auto 100%;
  background-position: top center;
  gap:60px;
}

.home-fromourfamily {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.home-fromourfamily-image {
  overflow: hidden;
}

.home-fromourfamily-image img {
  position: relative;
}

.home-fromourfamily-text {
  display: block;
  margin: 0px auto;
}

.home-fromourfamily-text span {
  margin: 20px 0;
}

@media screen and (min-width: 300px) and (max-width: 480px) {
  .text-header {
    font-size: 20px;
    line-height: 20px;
  }

  .home-oursalsa {
    display: block;
    text-align: center;
  }

  .home-fromourfamily {
    display: block;
  }

  .home-oursalsa-text {
    display: block;
    padding: 20px 40px;
  }

  .home-oursalsa-text .home-text26 {
    font-size: 35px;
    line-height: 35px;
  }

  .home-oursalsa-image  {
    margin: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .home-fromourfamily {
    display: block;
    text-align: center;
  }

  .home-fromourfamily-text {
    display: block;
    padding: 20px 40px;
  }

  .home-fromourfamily-image {
    margin: 0;
    width: 100%;
    overflow: hidden;
  }

  .home-fromourfamily-text .home-text28 {
    font-size: 35px;
    line-height: 35px;
  }

  .home-fromourfamily-image img {
    width: 100%;
    height: auto;
  }

  .home-text29 {
    width: auto;
    text-align: center;
  }

  .home-text27 {
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {
  .text-header {
    font-size: 20px;
    line-height: 20px;
  }

  .home-oursalsa {
    display: block;
    text-align: center;
  }

  .home-fromourfamily {
    display: block;
  }

  .home-oursalsa-text {
    display: block;
    padding: 20px 40px;
  }

  .home-oursalsa-text .home-text26 {
    font-size: 35px;
    line-height: 35px;
  }

  .home-oursalsa-image  {
    margin: 0;
    width: 100%x;
    height: auto;
    overflow: hidden;
  }

  .home-fromourfamily {
    display: block;
    text-align: center;
  }

  .home-fromourfamily-text {
    display: block;
    padding: 20px 40px;
  }

  .home-fromourfamily-image {
    margin: 0;
    width: 100%;
    overflow: hidden;
  }

  .home-fromourfamily-text .home-text28 {
    font-size: 35px;
    line-height: 35px;
  }

  .home-fromourfamily-image img {
    width: 100%;
    height: auto;
  }

  .home-text29 {
    width: auto;
    text-align: center;
  }

  .home-text27 {
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 930px) and (max-width: 1024px) {
  .home-oursalsa {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
  }

  .home-oursalsa-text {
    flex-basis: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .home-oursalsa-text .home-text26 {
    font-size: 75px;
    line-height: 75px;
  }

  .home-oursalsa-image {
    margin: 0 20px;
    width: 515px;
    height: 515px;
    overflow: hidden;
  }

  .home-fromourfamily {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .home-fromourfamily-text .home-text28 {
    font-size: 75px;
    line-height: 75px;
  }

  .home-fromourfamily-image img {
    margin-left: -160px;
  }

  .home-text29 {
    width: 400px;
    text-align: left;
  }

  .home-text27 {
    font-size: 18px;
    line-height: 30px;
  }
}

@media screen and (min-width: 1025px) {
  .home-oursalsa {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
  }

  .home-oursalsa-text {
    flex-basis: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .home-oursalsa-text .home-text26 {
    font-size: 75px;
    line-height: 75px;
  }

  .home-oursalsa-image {
    margin: 0 20px;
    width: 515px;
    height: 515px;
    overflow: hidden;
  }

  .home-fromourfamily {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .home-fromourfamily-text .home-text28 {
    font-size: 75px;
    line-height: 75px;
  }

  .home-fromourfamily-image img {
    margin-left: -160px;
  }

  .home-text29 {
    width: 400px;
    text-align: left;
  }

  .home-text27 {
    font-size: 18px;
    line-height: 30px;
  }
}


/*.home-oursalsa-text {
  margin: 0 20px;
  min-width: 300px;
  max-width: 500px;
}*/

.home-oursalsa-image {
  overflow: hidden;
}

.home-oursalsa-image img{
  width: 100%;
  height: auto;
}
 
.home-clippathgroup2 {
  top: -79px;
  left: 0px;
  height: 684px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
}
 
.home-clippath2 {
  top: 0px;
  left: 0px;
  height: 684px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
}
 
.home-vector4 {
  top: 0px;
  left: 0px;
  height: 684px;
}
 
.home-group2 {
  top: -712.1038208007812px;
  left: -11.016161918640137px;
  width: 1750.0205078125px;
  height: 1726.6202392578125px;
  display: flex;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 1;
}
 
.home-vector5 {
  top: 0.004016766790300608px;
  left: 0.016071904450654984px;
  width: 1750px;
  height: 1727px;
  position: absolute;
}
 
.home-vector6 {
  top: 0px;
  left: 0px;
  width: 1750px;
  height: 1727px;
  position: absolute;
}
 
.home-text26 {
  color: rgba(235, 218, 177, 1);
  height: auto;
  font-style: Regular;
  text-align: left;
  font-family: Metal;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text27 {
  color: rgba(255, 255, 255, 1);
  width: 451px;
  height: auto;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-img79681 {
  top: 0px;
  left: 0px;
  width: 515px;
  height: 515px;
}
 
.home-img8166 {
  top: -44.351898193359375px;
  left: -13.566669464111328px;
  width: 571px;
  height: 575px;
}
 
.home-text28 {
  flex-direction: column;
  width: 400px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-style: Regular;
  text-align: left;
  font-family: Metal;
  font-weight: 400;
  line-height: 65px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text29, .story-text29 {
  display: flex;
  flex-direction: column;
  color: rgba(1, 6, 6, 1);
  height: auto;
  font-style: Regular;
  /*text-align: left;*/
  font-family: Montserrat;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-image22 {
  top: 0px;
  left: 0px;
  width: 805px;
  height: 605px;
  display: flex;
  overflow: hidden;
  align-items: flex-start;
  flex-shrink: 0;
}
 
.home-rectangle8 {
  top: 0px;
  left: 0px;
  width: 805px;
  height: 605px;
  position: absolute;
}
 
.home-gemini-generated-imageiwk1yeiwk1yeiwk11 {
  top: -82px;
  left: -219px;
  width: 1242px;
  height: 710px;
}
 
.home-footer {
  width: 100%;
  position: relative;
  background-image: url('/external/rectangle2i2490-5ul-300h.png');
  text-align: center;
  padding-bottom: 40px;
}
 
.home-rectangle2 {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 225px;
  position: absolute;
}

.nav-footer-contact, .nav-footer-contact-mobile {
  color: rgba(140, 140, 140, 1);
  font-size: 14px;
  font-style: Medium;
  text-align: left;
  font-family: Inter;
  font-weight: 500;
  line-height: 18px;
  font-stretch: normal;
  text-decoration: none;
}
 
.nav-footer-contact span {
  width: 145px;
  height: auto;
}

.nav-footer-contact-mobile div {
  margin: 15px;
}
 
.home-text36 {
  top: 85px;
  left: 805px;
  color: rgba(140, 140, 140, 1);
  width: 185px;
  height: auto;
  position: absolute;
  font-size: 14px;
  font-style: Medium;
  text-align: left;
  font-family: Inter;
  font-weight: 500;
  line-height: 18px;
  font-stretch: normal;
  text-decoration: none;
}
 
.home-text37 {
  color: rgba(140, 140, 140, 1);
}
 
.home-text39 {
  color: rgba(140, 140, 140, 1);
}
 
.home-text41 {
  color: rgba(140, 140, 140, 1);
}
 
.home-text42 {
  color: rgba(255, 198, 0, 1);
  text-decoration: NONE;
}
 
.home-text44 {
  top: 85px;
  left: 1084px;
  color: rgba(140, 140, 140, 1);
  width: 118px;
  height: auto;
  position: absolute;
  font-size: 14px;
  font-style: Medium;
  text-align: left;
  font-family: Inter;
  font-weight: 500;
  line-height: 18px;
  font-stretch: normal;
  text-decoration: none;
}

.nav-footer {
  width: 100%;
  margin: 40px auto;
  text-align: center;
}
 
.nav-footer a {
  color: rgba(169, 155, 92, 1);
  height: auto;
  margin: 0 15px;
  font-size: 16px;
  font-style: Bold;
  text-align: center;
  font-family: Inter;
  font-weight: 700;
  line-height: 18px;
  font-stretch: normal;
  text-decoration: none;
}

.footerlink {
  color: rgba(169, 155, 92, 1);
}

.nav-footer a:hover, .footerlink:hover {
  color: rgba(255, 255, 255, 1);
}
 
.home-link {
  display: contents;
}
 
.home-container2 {
  right: 50px;
  border: 1px solid #ffffff5c;
  bottom: 30px;
  display: flex;
  z-index: 22;
  position: fixed;
  box-shadow: 5px 5px 10px 0px rgba(31, 31, 31, 0.4);
  min-height: auto;
  align-items: center;
  padding-top: 8px;
  padding-left: 12px;
  border-radius: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  backdrop-filter: blur(6px);
  background-color: rgba(41, 41, 41, 0.41);
}
 
.home-icon1 {
  width: 24px;
  margin-right: 4px;
}
 
.home-text51 {
  color: white;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/*
  OUR STORY
 */

.story-hero {
  background-image: url("/hires/header-story.png");
}

@media screen and (min-width: 300px) and (max-width: 480px) {
  .story-hero {
    height: 380px;
  }

  .story {
    display: block;
    width: 100%;
  }

  .story-text {
    padding: 40px 20px;
    text-align: center;
  }

  .story-text29 {
    width: auto;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }

  .story-image img {
    width: 100%;
    height: auto;
    margin: 0px auto;
  }

  .success {
    padding: 40px 20px;
  }

  .success h3 {
    font-size: 35px;
  }

  .success-text {
    width: auto;
    padding: auto;
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {
  .story-hero {
    height: 380px;
  }

  .story {
    display: block;
    width: 100%;
  }

  .story-text {
    padding: 40px 20px;
    text-align: center;
  }

  .story-text29 {
    width: auto;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }

  .story-image img {
    width: 100%;
    height: auto;
    margin: 0px auto;
  }

  .success {
    padding: 40px 20px;
  }

  .success h3 {
    font-size: 35px;
  }

  .success-text {
    width: auto;
    padding: auto;
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 930px) and (max-width: 1024px) {
  .story-hero {
    height: 465px;
  }

  .story {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 40px;
  }

  .story-text {
    padding: auto;
  }

  .story-text29 {
    width: 500px;
    font-size: 18px;
    line-height: 30px;
  }

  .story-image img {
    width: 400px;
    height: auto;
    margin: 0px auto;
  }

  .success {
    padding: 50px;
  }

  .success h3 {
    font-size: 50px;
  }

  .success-text {
    width: 70%;
    padding: 20px;
    font-size: 18px;
    line-height: 30px;
  }
}

@media screen and (min-width: 1025px) {
  .story-hero {
    height: 465px;
  }

  .story {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 40px;
  }

  .story-text {
    padding: auto;
  }

  .story-text29 {
    width: 500px;
    font-size: 18px;
    line-height: 30px;
  }

  .story-image img {
    width: 400px;
    height: auto;
    margin: 0px auto;
  }

  .success {
    padding: 50px;
  }

  .success h3 {
    font-size: 50px;
  }

  .success-text {
    width: 70%;
    padding: 20px;
    font-size: 18px;
    line-height: 30px;
  }
}

/*.story {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 40px;
}*/

.story-image {
  flex-basis: 40%;
  justify-content: center;
  margin: 0px auto;
}

.story-text {
  flex-basis: 60%;
  flex: 1;
}

.success {
  display: block;
  text-align: center;
  width: 100%;
  min-height: 200px;
  background-image: url("/hires/success-bg.png");
  background-size: auto 110%;
  background-position: center;
  background-repeat: no-repeat;
}

.success h3 {
  color: rgba(255, 255, 255, 1);
  height: auto;
  font-style: Regular;
  text-align: center;
  font-family: Metal;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
}

.success-text {
  margin: 0px auto;
  color: rgba(255, 255, 255, 1);
  height: auto;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  text-decoration: none;
}

/*
  FOOD SERVICE
 */
.food-hero {
  background-image: url("/hires/header-foodservice.png");
}

.food {
  display: block;
  text-align: center;
}

.food-text {
  text-align: left;
  margin: 0px auto;
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-style: Regular;
  text-align: left;
  font-family: Montserrat;
  font-weight: 400;
  text-decoration: none;
}

.food-text ul {
  margin: 0 25px;
}

.food h3 {
  color: rgba(255, 255, 255, 1);
  height: auto;
  font-size: 50px;
  font-style: Regular;
  text-align: center;
  font-family: Metal;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
}

.food-header {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-style: Bold;
  text-align: center;
  font-family: Inter;
  font-weight: 700;
  font-stretch: normal;
  text-decoration: none;
}

/*
  FOOD SERVICE - BREAKPOINTS
 */

@media screen and (min-width: 300px) and (max-width: 480px) {

  .food {
    display: block;
    width: 100%;
    padding: 40px 20px;
  }

  .food-hero {
    height: 380px;
  }

  .food-header {
    font-size: 20px;
    line-height: 20px;
  }

  .food-text {
    width: auto;
    padding: auto;
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {

  .food {
    display: block;
    width: 100%;
    padding: 40px 20px;
  }
  
  .food-hero {
    height: 380px;
  }

  .food-header {
    font-size: 20px;
    line-height: 20px;
  }

  .food-text {
    width: auto;
    padding: auto;
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (min-width: 930px) and (max-width: 1024px) {

  .food {
    padding: 50px;
    width: 70%;
  }
  
  .food-hero {
    height: 465px;
  }

  .food-header {
    font-size: 30px;
    line-height: 30px;
  }

  .food-text {
    width: 90%;
    padding: 30px;
    font-size: 18px;
    line-height: 30px;
  }
}

@media screen and (min-width: 1025px) {

  .food {
    padding: 50px;
    width: 70%;
  }

  .food-hero {
    height: 465px;
  }

  .food-header {
    font-size: 30px;
    line-height: 30px;
  }

  .food-text {
    width: 90%;
    padding: 30px;
    font-size: 18px;
    line-height: 30px;
  }
}

/*
  CONTACT US
 */
.contact-hero {
  background-image: url("/hires/header-contact.png");
}

@media screen and (min-width: 300px) and (max-width: 480px) {

  .contact-hero {
    height: 380px;
  }

  .contact-header {
    font-size: 20px;
    line-height: 20px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {
  
  .contact-hero {
    height: 380px;
  }

  .contact-header {
    font-size: 20px;
    line-height: 20px;
  }

}

@media screen and (min-width: 930px) and (max-width: 1024px) {
  
  .contact-hero {
    height: 465px;
  }

  .contact-header {
    font-size: 30px;
    line-height: 30px;
  }

}

@media screen and (min-width: 1025px) {

  .contact-hero {
    height: 465px;
  }
  
  .contact-header {
    font-size: 30px;
    line-height: 30px;
  }

}

.contact {
  display: block;
  text-align: left;
  width: 70%;
}

.contact-header {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-style: Bold;
  text-align: center;
  font-family: Inter;
  font-weight: 700;
  font-stretch: normal;
  text-decoration: none;
}

.contact-text {
  margin: 0px auto;
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-size: 18px;
  font-style: Regular;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 35px;
  text-decoration: none;
}

#contact-form input, #contact-form textarea {
  padding: 16px;
  background-color: #eee;
}

#contact-form input::placeholder, #contact-form textarea::placeholder {
  font-size: 12px; /* Or use em, rem, or other units */
}

#contact-form #phone, #contact-form #message {
  width: 100%;
  margin: 16px;
}

#contact-form button {
  margin: 0px auto;
}

.contact-required {
  width: 100%;
  margin: 16px;
}

.alert {
  width: 100%;
  padding: 16px;
  margin: 16px;
}

.alert-success {
  background-color: #eee;
  color: #000;
}

.alert-error {
  background-color: #FFC700;
  color: #fff;
}

@media screen and (min-width: 300px) and (max-width: 480px) {
  
  .contact {
    padding: 50px 0px;
  }

  .contact-text {
    padding: auto;
    width: auto;
  }

  .contact-required {
    display: block;
    margin-bottom: 0px;
  }

  .contact-required input {
    margin: 20px 0 0 -20px;
  }

  #contact-form #name, #contact-form #email {
    display: block;
    width: 100%;
  }

  #contact-form #phone, #contact-form #message {
    width: 100%;
    margin: 16px 16px 16px 0px;
  }
}

@media screen and (min-width: 481px) and (max-width: 929px) {

  .contact {
    padding: 50px 0px;
  }

  .contact-text {
    padding: auto;
    width: auto;
  }

  .contact-required {
    display: block;
    margin-bottom: 0px;
  }

  .contact-required input {
    margin: 20px 0 0 -20px;
  }

  #contact-form #name, #contact-form #email {
    display: block;
    width: 100%;
  }

  #contact-form #phone, #contact-form #message {
    width: 100%;
    margin: 16px 16px 16px 0px;
  }
}

@media screen and (min-width: 930px) and (max-width: 1024px) {

  .contact {
    padding: 50px;
  }

  .contact-text {
    padding: 30px;
    width: 90%;
  }

  .contact-required {
    display: flex;
    gap: 16px;
    justify-content: space-between;
  }

  #contact-form #name, #contact-form #email {
    flex-basis: 50%;
    width: auto;
  }

  #contact-form #phone, #contact-form #message {
    width: 100%;
    margin: 16px;
  }
}

@media screen and (min-width: 1025px) {
  
  .contact {
    padding: 50px;
  }

  .contact-text {
    padding: 30px;
    width: 90%;
  }

  .contact-required {
    display: flex;
    gap: 16px;
    justify-content: space-between;
  }

  #contact-form #name, #contact-form #email {
    flex-basis: 50%;
    width: auto;
  }

  #contact-form #phone, #contact-form #message {
    width: 100%;
    margin: 16px;
  }
}

/*
  ANIMATIONS
 */
@keyframes salsa-animation {
  0% {
    transform: scale(1); /* Start with no size */
  }
  100% {
    transform: scale(1.025); /* Grow to its original size */
  }
}

@keyframes hero-animation {
  from {
    background-size: auto 103%; /* Starting position */
  }
  to {
    background-size: auto 106%; /* Ending position (e.g., moves horizontally) */
  }
}

@keyframes hero-animation-reset {
  from {
    background-size: auto 106%; /* Starting position */
  }
  to {
    background-size: auto 103%; /* Ending position (e.g., moves horizontally) */
  }
}