/* Importação da fonte CirceSlabA-Medium */
@font-face {
    font-family: 'CirceSlabA-Medium';
    src: url('../fonts/CirceSlabA-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'CirceSlabB-Bold';
    src: url('../fonts/CirceSlabB-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'CirceSlabB-BoldItalic';
    src: url('../fonts/CirceSlabB-BoldItalic.otf') format('opentype');
}

@font-face {
    font-family: 'CirceSlabB-Italic';
    src: url('../fonts/CirceSlabB-Italic.otf') format('opentype');
}

@font-face {
    font-family: 'CirceSlabC-Black';
    src: url('../fonts/CirceSlabC-Black.otf') format('opentype');
}

@font-face {
    font-family: 'CirceSlabC-Bold';
    src: url('../fonts/CirceSlabC-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'MuseoSans-700';
    src: url('../fonts/Museo700-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'MuseoSans-900';
    src: url('../fonts/Museo900-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'CirceSlabA-ExtraLight';
    src: url('../fonts/CirceSlab-A-Extra-Light.otf') format('opentype');
}


:root {
    --light-background: #F9E1B9;
    --white-background: #FFF7E8;
    --font-orange: #E7A032;
    --font-dark-green: #245539;
    --font-semidark-green: #3A6B4F;
    --button-orange: #D79B2B;

}

/* Reset de estilos para garantir a consistência entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--white-background);
}

/* Estilo para o header */
header {
    background-color: #245539;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

/* Estilo para o logo */
.logo img {
    max-width: 400px; /* Ajuste o tamanho do seu logotipo conforme necessário */
}

/* Estilo para o full banner */
.full-banner {
    position: relative;
    overflow: hidden;
}

.banner-images {
    display: flex;
    transition: transform 2s ease-in-out;
}

.banner-images img {
    width: 100%;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

.banner-content h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.banner-content p {
    font-size: 18px;
    margin-bottom: 20px;
}

.banner-content .btn {
    display: inline-block;
    background-color: #ff6600;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
}

/* Estilo para a seção de conteúdo */
.content-section {
    background-color: #F9E1B9;   
}

.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    padding: 30px 0;
}

.icon-left, .icon-right {
    display: inline-block;
}

.icon-left img, .icon-right img {
    width: 90%;
    margin: 0;
}

.text {
    width: 100%;
}

.title-with-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-with-icons h2 {
    font-size: 24px;
    font-family: 'MuseoSans-700';
    margin: 10px 0;
    color: var(--font-dark-green);
}

.text p {
    font-size: 18px;
    margin: 10px 0;
}

.item-list {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
}

.item-list li {
    text-align: center;
    margin: 0 20px;
}

.item-list p {
    font-family: 'CirceSlabA-Medium';
    font-size: 16px;
    color: var(--font-dark-green);
}

.item-list img {
    height: 60px;
    margin-bottom: 10px;
}

.subtitle-section{
    font-size: 23px;
    font-family: 'MuseoSans-900';
    font-weight: bold;
    color: var(--font-orange);
    margin-bottom: 50px;
}

.packaging-section {
    padding: 50px 0;
    text-align: center;
}

.packaging-section h2 {
    font-family: 'MuseoSans-900';
    font-size: 24px;
    color: var(--font-dark-green);
    margin-bottom: 30px;
}

.packaging-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
}

.packaging-section {
    padding: 50px 0;
    text-align: center;
}

.packaging-section h2 {
    font-family: 'MuseoSans-900';
    font-size: 24px;
    color: var(--font-dark-green);
    margin-bottom: 30px;
}

.packaging-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
}

.packaging-item {
    flex: 1;
    margin: 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    transition: transform 0.2s;
    display: flex;
    flex-direction: row;
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: space-between; /* Separa imagem e conteúdo */
}

.packaging-item-content {
    flex: 1; /* Permite que o conteúdo ocupe todo o espaço disponível */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaçamento entre os elementos do conteúdo */
}

.packaging-item:hover {
    transform: scale(1.05);
}

.packaging-text-content {
    flex: 1; /* Permite que o conteúdo ocupe todo o espaço disponível */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaçamento entre os elementos do conteúdo */
}

.packaging-image {
    flex-basis: 34%; /* Atribui um valor base para a largura da imagem */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px; /* Espaçamento entre a imagem e o conteúdo de texto */
}


.packaging-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 0; /* Remove margem inferior da imagem */
}

.packaging-item h3 {
    font-family: 'MuseoSans-700';
    font-size: 20px;
    color: var(--font-dark-green);
    margin-bottom: 10px;
}

.packaging-item p {
    font-size: 16px;
    margin-bottom: 10px;
}

.packaging-item strong {
    font-weight: bold;
    display: block; /* Faz o texto em negrito aparecer em sua própria linha */
    margin-bottom: 10px;
}

.packaging-item button {
    padding: 13px 40px;
    background-color: var(--font-dark-green);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 20px;
    font-family: 'CirceSlabB-Italic';
    cursor: pointer;
    transition: background-color 0.2s;
    align-self: flex-start; /* Alinha o botão à esquerda, mas ainda na sua própria linha */
}

.packaging-item button:hover {
    background-color: var(--font-semidark-green);
}

.packaging-item .packaging-title {
    font-size: 50px;
    font-family: 'CirceSlabB-Italic';
}

.packaging-item .packaging-title-bold {
    font-size: 50px;
    font-family: 'CirceSlabB-BoldItalic';
    color: var(--font-dark-green);
}

.packaging-item .packaging-text {
    font-size: 22px;
    font-family: 'CirceSlabA-ExtraLight';
}

.packaging-item .packaging-advise {
    font-size: 18px;
    font-family: 'CirceSlabA-Medium';
    font-style: bold;
}

.flavors-section {
    background-color: var(--white-background);
    text-align: center;
    padding: 50px 0;
}

.flavors-section h2 {
    font-size: 32px;
    margin-bottom: 30px;
    font-family: 'MuseoSans-700';
}

.flavors-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    text-align: center;
}

.flavor-item {
    position: relative;
}

.flavor-item img {
    max-width: 90%;
}

.flavor-label {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #008040;
    color: white;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
}

.flavor-item.mix .flavor-label {
    background-color: transparent;
    transform: none;
    left: 0;
    right: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flavor-item.mix .flavor-label p {
    background-color: #008040;
    color: white;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
    margin-top: 10px;
}

footer {
    background-color: var(--font-dark-green);
    color: white;
    padding: 20px 40px;
    display: flex;
    flex-wrap: wrap;
    font-family: 'CirceSlabA-ExtraLight';
}

.newsletter {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 50px;
}

.newsletter input {
    padding: 10px;
    width: 250px;
}

.newsletter button {
    padding: 10px;
    width: 200px;
    margin: none;
    background-color: var(--button-orange);
    border: none;
}

.footer-links h4 {
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    gap: 60px;
}

.footer-links div {
    margin-right: 30px;
}

.footer-links .logo {
    margin-top: -65px;
}

.footer-links .institutional {
    margin-top: 50px;
}

.footer-links .support {
    margin-top: 50px;
}

.footer-links .contacts {
    margin-top: 50px;
}

.footer-links ul {
    list-style-type: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 20px;
}

.footer-links .logo img{
    max-width: 110px;
}

.social-media {
    margin-bottom: 20px;
}

.awards img {
    max-width: 200px;
}

.awards .pegn {
    max-width: 200px;
}

.social-media a {
    margin-right: 10px;
    text-decoration: none;
    color: #fff;
}

.social-media img {
    max-width: 25px;
}

.awards img {
    margin-right: 10px;
}

.awards .peng {
    max-width: 100px;
}

@media only screen and (max-width: 480px) {
    /* Redimensiona o logotipo para caber em dispositivos menores */
    .logo img {
        max-width: 150px;
    }

    /* Ajusta o tamanho do texto do banner para uma melhor leitura em dispositivos menores */
    .banner-content h1 {
        font-size: 24px;
    }

    .banner-content p {
        font-size: 14px;
    }

    /* Ajusta o tamanho e o espaçamento dos botões para toque mais fácil */
    .banner-content .btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Altera a disposição do conteúdo para uma única coluna */
    .content-wrapper,
    .packaging-options {
        flex-direction: column;
    }

    /* Ajusta a largura do texto para melhor leitura */
    .text,
    .packaging-item-content,
    .packaging-text-content {
        padding: 0 20px;
    }

    /* Reduz o tamanho das imagens para se encaixarem na tela */
    .icon-left img, .icon-right img {
        width: 80%;
    }

    /* Reduz o tamanho do texto para melhor ajuste */
    .title-with-icons h2,
    .packaging-section h2,
    .packaging-item h3 {
        font-size: 20px;
    }

    .text p,
    .packaging-item p {
        font-size: 14px;
    }

    /* Reduz o tamanho da lista de itens para se adequar a telas menores */
    .item-list li {
        margin: 0 10px;
    }

    .item-list img {
        height: 50px;
    }

    /* Ajusta os itens de embalagem para serem mais compactos */
    .packaging-item {
        flex-direction: column;
        padding: 15px;
        text-align: center;
    }

    .packaging-item img {
        width: 100%; /* Faz com que a imagem ocupe toda a largura disponível */
    }

    /* Reduz o tamanho dos botões e ajusta o alinhamento */
    .packaging-item button {
        padding: 10px 60px;
        font-size: 16px;
        align-self: center; /* Centraliza o botão */
    }

    /* Adapta o tamanho do título da embalagem para dispositivos menores */
    .packaging-item .packaging-title {
        font-size: 30px;
    }

    footer {
        display: none;
    }

    .icon-left {
        display: none;
    }
    .icon-right {
        display: none;
    }

    .item-list {
        list-style: none;
        display: flex;
        justify-content: center;
        padding: 0;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    .options-desktop {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .packaging-item .packaging-title {
        font-size: 40px;
    }

    footer {
        display: none;
    }

    .icon-left {
        display: none;
    }
    .icon-right {
        display: none;
    }

    .item-list {
        list-style: none;
        display: flex;
        justify-content: center;
        padding: 0;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    .options-desktop {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .packaging-item .packaging-title {
        font-size: 40px;
    }

    footer {
        display: none;
    }

    .icon-left {
        display: none;
    }
    .icon-right {
        display: none;
    }

    .item-list {
        list-style: none;
        display: flex;
        justify-content: center;
        padding: 0;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    .options-desktop {
        display: none;
    }
}

@media only screen and (min-width: 1280px) {
    .packaging-item .packaging-title {
        font-size: 40px;
    }

    footer {
        display: none;
    }

    .icon-left {
        display: none;
    }
    .icon-right {
        display: none;
    }

    .item-list {
        list-style: none;
        display: flex;
        justify-content: center;
        padding: 0;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    .options-mobile {
        display: none;
    }
}