.promo-section{
    margin-top: 250px;
}

.promo-section .top-section{
    padding: 0px 100px;
}

.promo-section .right-side .navigator-left{
    height: fit-content;
    padding: 12px;
    border-radius:8px ;
    border: 2px solid var(--brandPrimary500);
}

.promo-section .right-side .navigator-left #arrow-left{
    filter: invert(57%) sepia(87%) saturate(2822%) hue-rotate(346deg) brightness(105%) contrast(81%);

}

.navigator-left:hover{
    background-color: var(--brandPrimary500);
}
.promo-section .right-side .navigator-left:hover #arrow-left{
    filter: none;
}

.promo-section .right-side .navigator-right{
    height: fit-content;
    padding: 12px;
    border-radius:8px ;
    border: 2px solid var(--brandPrimary500);
}

.promo-section .right-side .navigator-right #arrow-right{
    filter: invert(57%) sepia(87%) saturate(2822%) hue-rotate(346deg) brightness(105%) contrast(81%);
}

.navigator-right:hover{
    background-color: var(--brandPrimary500);
}

.promo-section .right-side .navigator-right:hover #arrow-right{
    filter: none;
}

.promo-section .title{
    font-size: 72px;
    color: var(--primaryNeutral900);
    font-weight: bold;
}

.promo-section .top-section{
    margin-bottom: 80px;
}

.promo-section .promo-carousel{
    padding-bottom: 100px;
}

.promo-section .promo-item{
    width: 300px;
    height: 100%;
}

@media (max-width: 720px) {
    .promo-section{
        margin-top: 200px;
    }

    .promo-section .top-section{
        padding: 0px 80px;
    }

    .promo-section .title{
        font-size: 32px;
    }

    .promo-section .promo-carousel{
        padding-bottom: 80px;
    }

    .promo-section .promo-item{
        width: 250px;
        height: 100%;
    }
}

@media (max-width: 576px) {
    .promo-section{
        margin-top: 180px;
    }

    .promo-section .top-section{
        padding: 0px 40px;
    }

    .promo-section .title{
        font-size: 22px;
    }

    .promo-section .promo-carousel{
        padding-bottom:40px;
    }

    .promo-section .promo-item{
        width: 200px;
        height: 100%;
        padding: 20px;
    }
}

/* produk section */
.produk-section{
    padding: 100px;
}

.produk-section .kategori-nav .title-wrap{
    padding: 12px 24px;
    border-radius: 12px 12px 0 0;
    border: 1px solid var(--primaryNeutral200);
}

.produk-section .kategori-nav .title-wrap .title{
    color: var(--primaryNeutral900);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
}

.produk-section .kategori-nav .item-wrap{
    padding: 12px 24px;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--primaryNeutral200);
}

.produk-section .kategori-nav .item-wrap .item{
    color: var(--primaryNeutral500);
    cursor: pointer;
}

.produk-section .kategori-nav .item-wrap .active{
    color: var(--brandPrimary500);
}

.produk-section .card-produk{
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--primaryNeutral200);
}

.produk-section .card-produk .title{
    color: var(--primaryNeutral900);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.produk-section .card-produk .ingredients{
    color: var(--primaryNeutral500);
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 12px;
}

.produk-section .card-produk .size-text{
    color: var(--primaryNeutral500);
    font-size: 12px;
    font-weight: normal;
}

.produk-section .card-produk .gambar-produk{
    height: 200px;
    background-color: #FAFAFA;
    border-radius: 8px;
    margin-bottom: 12px;
}

.produk-section .card-produk .gambar-produk .produk-img{
    width: fit-content;
    height: 70%;
}

@media (max-width: 720px) {
    .produk-section{
        padding: 80px;
    }
}

@media (max-width: 576px) {
    .produk-section{
        padding: 40px;
    }
}

/* CTA SECTION */

.cta-section{
    padding: 80px 100px;
}

.cta-section .cta-wrapper{
    padding: 80px 0;
    width: 100%;
    border-radius: 40px;
}

.cta-section .cta-wrapper .title{
    color: white;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 24px;
}

.cta-section .cta-wrapper .description{
    font-size: 16px;
    font-weight: bold;
    color: white;
    margin-bottom: 40px;
}

@media (max-width: 720px) {
    .cta-section{
        padding: 60px 80px;
    }

    .cta-section .cta-wrapper .title{
        font-size: 34px;

    }
    
    .cta-section .cta-wrapper .description{
        font-size: 14px;
    }
}
@media (max-width: 576px) {
    .cta-section{
        padding: 40px 60px;
    }

    .cta-section .cta-wrapper .title{
        font-size: 32px;

    }
    
    .cta-section .cta-wrapper .description{
        font-size: 12px;
    }
}