body {
    background: #F5F5F5 ;
}

.receitas-banner-desktop {
    width: 100%;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receitas-banner-desktop .banner-gradient {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.receitas-banner-desktop .banner-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 2.72%, rgba(0, 0, 0, 0.75) 127.36%);
    z-index: 1;
}

.receitas-banner-desktop img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 290px;
    object-fit: cover;
    z-index: 0;
}

.banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.breadcrumb {
    color: #FFF;
    font-family: "space-grotesk";
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: absolute;
    top: 24px; /* Posição vertical fixa */
    left: 315px; /* Distância do lado esquerdo até 1440px */
    transform: translateY(-50%);
    z-index: 3;
}

.breadcrumb a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}

.breadcrumb a:hover {
    text-decoration: underline;
    opacity: 1;
}

.bread-crumb {
    display: flex;
    justify-content: center;
  
    position: relative;
    z-index: 10;
    column-gap: 5px;
    
  
    a {
      color: #fff;
      text-align: center;
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      text-decoration: none;
    }
  
    p {
      line-height: 5px;
      color: #FFF;
    }
  }

  .bread-crumb {
    align-self: baseline;
/*     padding-left: calc(6.2% + 219px); */
	  padding-left: calc(10.416% + 160px);
    bottom: 121px;
  }

  .bread-crumb-category {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
    align-self: baseline;
    padding-left: calc(6.2% + 220px); /* Apenas ajustando o padding-left */
    bottom: 72px;

    column-gap: 5px;
}

.bread-crumb-category a {
    color: #fff;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
}

.bread-crumb-category p {
    line-height: 5px;
    color: #FFF;
}
  


.banner-title {
    color: #FFF;
    text-align: center;
    font-family: Lobster, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 50px;
    z-index: 3;
    position: absolute;
    bottom: 55px;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-subtitle {
    color: #F49811;
    text-align: center;
    font-family: "space-grotesk";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;
    margin-top: 45px;
}

.banner-line {
    width: 60px;
    height: 3px;
    background-color: #FFF;
    position: absolute;
    bottom: 35px; /* 30px de distância do bottom */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajuste para centralização exata */
    z-index: 3;
}

.italy-flag-bar {
    display: flex;
    width: 100%;  /* Ocupa a largura total da tela */
    height: 5px;  /* Altura de 5px */
}

.flag-color {
    flex: 1; /* Cada parte ocupa 1/3 da largura */
}

.flag-color.green {
    background-color: #008B44; /* Verde */
}

.flag-color.white {
    background-color: #FFF; /* Branco */
}

.flag-color.red {
    background-color: #CE0E2D; /* Vermelho */
}

.search-categories-section {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.search-categories-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #F5F5F5;
    width: 100%;
    max-width: 1000px;
}

.categories {
    width: 100%;
    max-width: 840px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 30px;
    background: #F49811;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #F7F7F7;
    text-align: center;
    font-family: "space-grotesk";
    font-size: 16px;
    font-weight: 700;
}

.category-list {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.category-list-item {
    cursor: pointer;
    white-space: nowrap;
    color: #FFF;
    text-decoration: none;
}

.category-list-selected {
    cursor: pointer;
    white-space: nowrap;
    color: #004378;
    text-decoration: none;
}

.category-list-item:hover {
    color: #004378;
}

.search-field {
    width: 100%;
    max-width: 840px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 30px;
    border: 1px solid #B0B0B0;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

.search-input {
    width: 90%;
    border: none;
    outline: none;
    font-family: "space-grotesk";
    font-size: 16px;
    padding-left: 19px;
}

.search-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    fill: #707070;
}

.total-recipes-indicator {
    width: 100%;
    height: 15px;
    color: #707070;
    text-align: center;
    font-family: 'space-grotesk';
    font-size: 12px;
    font-weight: 700;
    align-content: center;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 40px;
}
.single-receita-ingredients-section strong,
.single-receita-ingredients-section b {
    color: #094DA4 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.single-receita-ingredients-section p strong,
.single-receita-ingredients-section p b,
.single-receita-ingredients-section li strong,
.single-receita-ingredients-section li b {
    color: #094DA4 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}


/* Media query para telas menores */
@media (max-width: 768px) {
    .banner-title {
        font-size: 34px;
        bottom: 45px;
    }

    .banner-subtitle {
        font-size: 12px;
        line-height: normal;
        margin-top: 80px;
    }

    .bread-crumb {
        align-self: center;
        justify-content: center;
        padding-left: calc(5.2% + -36px);
        top: calc(5.2% + -100px)
      }

      .bread-crumb-category {
        align-self: center;
        justify-content: center;
        padding-left: calc(5.2% + -36px);
        top: calc(5.2% + -51px)
    }

    .banner-line {
        bottom: 30px;
    }

    .search-categories-container {
        padding: 10px;
    }

    .categories {
        font-size: 16px;
        padding: 10px;
        max-width: 313px;
        justify-content: normal;
        padding-left: 30px;
    }

    .category-list {
        display: flex;
        gap: 23px;
        padding-left: 10px;
        margin: 0;
        justify-content: flex-start; /* Alinha os itens à esquerda */
        overflow-x: auto; /* Habilita o scroll horizontal */
        -webkit-overflow-scrolling: touch; /* Suporte para touch no iOS */
        scroll-behavior: smooth; /* Scroll suave */
        white-space: nowrap; /* Evita que os itens quebrem linha */
    }

    /* Oculta a barra de rolagem no navegador */
    .category-list::-webkit-scrollbar {
        display: none; /* Oculta a barra de rolagem no WebKit (Chrome, Safari) */
    }

    /* Para navegadores que não suportam o WebKit */
    .category-list {
        -ms-overflow-style: none; /* Oculta a barra de rolagem no IE e Edge */
        scrollbar-width: none; /* Oculta a barra de rolagem no Firefox */
    }

    /* Certifique-se de que os links de categoria não quebrem linha */
    .category-list-item,
    .category-list-selected {
        white-space: nowrap;
    }

    .search-field {
        width: 100%;
        max-width: 313px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 30px;
        border: 1px solid #B0B0B0;
        background: #FFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    .search-input {
        width: 90%;
        border: none;
        outline: none;
        font-family: "space-grotesk";
        font-size: 16px;
        padding-left: 19px;
    }
    
    .search-icon {
        width: 25px;
        height: 25px;
        flex-shrink: 0;
        fill: #707070;
    }

    .category-list {
        gap: 10px;
    }

    .search-input {
        padding-left: 13px;
    }

    .total-recipes-indicator {
        padding-bottom: 40px;
    }
}


.recipe-highlight-section {
    padding-top: 34px;
  }
  
  .recipe-highlight-list-title {
    color: #F49811;
    font-size: 30px;
    width: fit-content;
    position: relative;
    padding-bottom: 15px;
  }
  
  .recipe-highlight-list-title::after {
    position: absolute;
    display: block;
    content: "";
    top: calc(auto + 10px);
    bottom: 0;
    left: 5%;
    right: auto;
    width: 60px;
    height: 3px;
    background-color: #F49811;
  }
  
  .recipe-highlight-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 30px;
  
    position: relative;
  
    padding-bottom: 75px;
  
    overflow: hidden;
  }
  
  .recipe-highlight-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 310px);
    justify-content: center;
    gap: 75px;
    padding-left: 20px;
    padding-right: 20px;
  
    width: 100%;
    max-width: 1050px;
  
    position: relative;
    z-index: 10;
  }

  /* .all-recipes-section {
    padding-top: 34px;
  } */

  .all-recipes-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 310px);
    justify-content: center;
    gap: 75px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 1050px;
    position: relative;
    z-index: 10;
}

.home-recipe-list-title {
    color: #F49811;
    font-size: 30px;
    width: fit-content;
    position: relative;
    padding-bottom: 15px;
  }
  
  .home-recipe-list-title::after {
    position: absolute;
    display: block;
    content: "";
    top: calc(auto + 10px);
    bottom: 0;
    left: 25%;
    right: auto;
    width: 60px;
    height: 3px;
    background-color: #F49811;
  }

.pagination-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 40px;
}

.pagination-number {
    width: 30.7px;  
    height: 30.7px;
    flex-shrink: 0;
    border-radius: 30px;
    background: #FFF;
    border: 1px solid #B0B0B0;
    color: #707070;
    text-align: center;
    font-family: "space-grotesk";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30.7px;
    text-decoration: none;
}

.pagination-number.selected {
    background: #F49811;
    color: #FFF;
    border: none;
}

.pagination-arrow-right {
    background-image: url("../assets/images/arrow-right.svg");
    width: 30.7px;
    height: 30.7px; 
    flex-shrink: 0;
    border-radius: 30px;
    border: 1px solid #B0B0B0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.pagination-arrow-left {
    background-image: url("../assets/images/arrow-left.svg");
    width: 30.7px;
    height: 30.7px; 
    flex-shrink: 0;
    border-radius: 30px;
    border: 1px solid #B0B0B0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.recipes-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 40px;
}

.recipes-button {
    width: 180px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 30px;
    background: #F49811;
    color: #FFF;
    text-align: center;
    font-family: "space-grotesk";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    /* transition: background 0.1s, color 0.1s, border 0.1s; */
}
  
  @media screen and (min-width: 768px) {
    .recipe-products-category-container {
      row-gap: 60px;
      padding-bottom: 60px;
    }
  
    .recipe-products-category-container-left-image {
      right: 75vw;
      top: 180px;
    
      width: 471.2px;
      height: 311.4px;
    }
    
    .recipe-products-category-container-right-image {
      left: 80vw;
      top: 120px;
    
      width: 376.19px;
      height: 415px;
    }
  
    .recipe-highlight-section {
      padding-top: 44px;
    }
  
    .recipe-highlight-list-container {
      grid-template-columns: repeat(auto-fill, 622px);
      gap: 40px;
      row-gap: 90px;
      max-width: 1440px;
    }

    .recipe-highlight-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 30px;
      
        position: relative;
      
        padding-bottom: 90px;
      
        overflow: hidden;
      }
  
    .recipe-highlight-list-title {
      font-size: 36px;
    }
  
    .recipe-highlight-list-title::after {
      left: 12%;
    }

    .all-recipes-list-container {
        grid-template-columns: repeat(auto-fill, 400px);
        gap: 40px;
        row-gap: 90px;
        max-width: 1440px;
        padding-bottom: 40px ;    
        /* padding-top: 50px; */
    }

    .home-recipe-list-title {
        color: #F49811;
        font-size: 30px;
        width: fit-content;
        position: relative;
        padding-bottom: 15px;
      }
      
      .home-recipe-list-title::after {
        position: absolute;
        display: block;
        content: "";
        top: calc(auto + 10px);
        bottom: 0;
        left: 25%;
        right: auto;
        width: 60px;
        height: 3px;
        background-color: #F49811;
      }

      .pagination-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-top: 20px;
    }
    
    .pagination-number {
        width: 41px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 30px;
        background: #FFF;
        border: 1px solid #B0B0B0;
        color: #707070;
        text-align: center;
        font-family: "space-grotesk";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        cursor: pointer;
    }
    
    .pagination-number.selected {
        background: #F49811;
        color: #FFF;
        border: none;
    }

    .pagination-arrow-right {
        background-image: url("../assets/images/arrow-right.svg");
        width: 41px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 30px;
        border: 1px solid #B0B0B0;
        color: #707070;
        text-align: center;
        font-family: "space-grotesk";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        cursor: pointer;
        background-size: contain;
    }

    .pagination-arrow-left {
        background-image: url("../assets/images/arrow-left.svg");
        width: 41px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 30px;
        border: 1px solid #B0B0B0;
        color: #707070;
        text-align: center;
        font-family: "space-grotesk";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        cursor: pointer;
        background-size: contain;
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-top: 20px;
    }
    
    .pagination-number {
        width: 41px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 30px;
        background: #FFF;
        border: 1px solid #B0B0B0;
        color: #707070;
        text-align: center;
        font-family: "space-grotesk";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        cursor: pointer;
        text-decoration: none;
    }


    .recipes-button-container {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
    
    .recipes-button {
        width: 180px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 30px;
        background: #F49811;
        color: #FFF;
        text-align: center;
        font-family: "space-grotesk";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        cursor: pointer;
        text-decoration: none;
        /* transition: background 0.1s, color 0.1s, border 0.1s; */
    }

    .recipes-button:hover {
        border: 1px solid #F49811;
        background: #FFF;
        color: #F49811;
    }
  }