.container-detail{
    display: flex;
    padding-top: var(--32, 32px);
    flex-direction: column;
    align-items: center;
    gap: var(--72, 72px);
    align-self: stretch;
}
body{
    margin: 0;
    background-color: white;
}
.detail-section{
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}

.buttons-container-detail2 {
    display: none !important;
}
.buttons-container-detail1{
    display: none !important;
}
.activedz{
    display: flex !important;
    
}
.info-block{
    display: flex;
    padding: 24px 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 20px;
    border: 1px solid var(--alpha-gray-200, rgba(31, 34, 56, 0.20));
    background: var(--white, #FFF);
}
.content-detail{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--64, 64px);
    align-self: stretch;
}
.breadcrumbs-detail{
    display: flex;
    padding: 0px var(--16, 16px);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.breadcrumbs-detail-container{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--4, 4px) var(--8, 8px);
    align-self: stretch;
    flex-wrap: wrap;
}
.black-breadcrumbs-detail{
    color: var(--black, #1F2238);
    font-feature-settings: 'liga' off, 'clig' off;
    /* control/16-20-500 */
    font-family: "NunitoSans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
}
.grey-breadcrumbs-detail{
    overflow: hidden;
    color: var(--alpha-gray-400, rgba(31, 34, 56, 0.40));
    font-feature-settings: 'liga' off, 'clig' off;
    text-overflow: ellipsis;

    /* control/16-20-500 */
    font-family: "NunitoSans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
}
.header-page{
    display: flex;
    padding: 0px var(--16, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--32, 32px);
    align-self: stretch;
}
.heading-detail{
    color: var(--black, #1F2238);
    font-feature-settings: 'liga' off, 'clig' off;
    /* mob/h1 30-36-600 */
    font-family: "Dela Gothic One";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 120% */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.info-container-detail{
    display: flex;
    padding: 0px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}
.line-info-detail{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    color: var(--gray-900, #35384C);
    font-family: "NunitoSans";
    font-size: 18px;
    line-height: 24px; /* 133.333% */
}
b{
    font-weight: 600;
    color: var(--gray-900, #aeb2c1);
}
.price-detail{
    color: #316650;
    font-family: "NunitoSans";
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 123.077% */
}
.favorite{
    /* position: absolute;
    right: 16px;
    top: 16px; */
    display: flex;
    padding: var(--8, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--4, 4px);
    border-radius: var(--sm, 12px);
    border: 1px solid var(--alpha-gray-200, rgba(31, 34, 56, 0.20));
    background: var(--alpha-gray-200, rgba(31, 34, 56, 0.20));
    cursor: pointer;
    background-color: white;
    width: 40px;
}
.order-button-detail{
    border: 0px;
    overflow: hidden;
color: var(--white, #FFF);
font-feature-settings: 'liga' off, 'clig' off;
text-overflow: ellipsis;
width: 100%;

/* control/18-24-500 */
font-family: "NunitoSans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 133.333% */
    display: flex;
    height: 48px;
    padding: 0px var(--16, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--8, 8px);
    align-self: stretch;
    border-radius: var(--sm, 12px);
    background: var(--primary-500, #316650);
}
.detail-images{
    margin-top: 10px;
}
.buttons-container-detail{
    gap: 24px;
    display: flex;
    width: 100%;
}
.description-detail{
    display: flex;
    padding: 0px var(--16, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--32, 32px);
    align-self: stretch;
}
.title-description{
    color: var(--black, #1F2238);
    /* mob/h3 26-32-600 */
    font-family: "NunitoSans";
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 123.077% */
}
.text-description{
    color: var(--gray-900, #35384C);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "NunitoSans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
}
@media (min-width: 375px){
    .breadcrumbs-detail-container{
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: var(--4, 4px) var(--8, 8px);
        flex: 1 0 0;
        flex-wrap: wrap;
    }
}
@media (min-width: 576px){
    .breadcrumbs-detail{
        display: flex;
        width: 512px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .breadcrumbs-detail-container{
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: var(--4, 4px) var(--8, 8px);
        align-self: stretch;
        flex-wrap: wrap;
    }
    .header-page{
        display: flex;
        width: 512px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--32, 32px);
    }
}
@media (min-width: 768px){
    .detail-images{
        margin-top: unset;
    }
    .description-detail{
       width: 696px;
    }
    .detail-section img{
        position: absolute;
        margin-top: 300px;
        margin-right: 30px;
    }
    .detail-section {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-end;
    }
    .content-detail{
        gap: var(--72, 72px);
    }
    .breadcrumbs-detail{
        display: flex;
        width: 696px;
        flex-direction: column;
        align-items: center;
        gap: 8px;       
    }
    .header-page{
        display: flex;
        width: 396px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--32, 32px);
    }
    .heading-detail{
        color: var(--black, #1F2238);
        font-feature-settings: 'liga' off, 'clig' off;
        /* mob/h1 30-36-600 */
        font-family: "Dela Gothic One";
        font-size: 36px;
        font-style: normal;
        font-weight: 600;
        line-height: 42px; /* 116.667% */
    }
}
@media (min-width: 1024px){
    .breadcrumbs-detail{
        display: flex;
        width: 936px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .description-detail{
        width: 836px;
     }
    .header-page{
        display: flex;
        width: 436px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--32, 32px);
    }
    .detail-section img{
        position: absolute;
        margin-top: 300px;
        margin-right: 10%;
    }
}
@media (min-width: 1400px){
    .breadcrumbs-detail{
        display: flex;
        width: 1128px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .description-detail{
        width: 1136px;
    }
    .header-page{
        display: flex;
        width: 728px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--32, 32px);
    }
    .detail-section img{
        position: absolute;
        margin-top: 300px;
        margin-right: 10%;
    }
    .heading-detail{
        color: var(--black, #1F2238);
        font-feature-settings: 'liga' off, 'clig' off;
        /* mob/h1 30-36-600 */
        font-family: "Dela Gothic One";
        font-size: 44px;
        font-style: normal;
        font-weight: 600;
        line-height: 50px; /* 113.636% */
    }
    .buttons-container-detail{
        /* gap: 64px; */
        display: flex;
        width: 100%;
    }
}
@media (min-width: 1600px){
    .content-detail{
        gap: var(--72, 80px);
    }
    .description-detail{
        width: 1236px;
    }
    .breadcrumbs-detail{
        display: flex;
        width: 1320px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .header-page{
        display: flex;
        width: 728px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--32, 32px);
    }
    .detail-section img{
        position: absolute;
        margin-top: 300px;
        margin-right: 15%;
    }
    .header-page{
        display: flex;
        width: 728px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--32, 32px);
    }
}
@font-face {
    font-family: "NunitoSans"; 
    src: url("../fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
  } 
  @font-face {
    font-family: "Dela Gothic One"; 
    src: url("../fonts/Dela_Gothic_One/DelaGothicOne-Regular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal; 
}