body {
    background-color: rgb(66, 66, 66);
    /* white-space: nowrap; */
    margin: 0;
    display: inline; 
    justify-content: center;
}
html, body {
    height: 100%;
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
}
section {
    /*border: 1px solid rgba(255, 0, 0, 0.486);*/
    text-align: center;
    align-items: center;
    width: 400px;
    padding: 10px 40px 10px 40px;
    display: flex; /* Center content vertically */
    margin: auto;
    
}

.section1-content {
    background-color: rgb(29, 29, 29);
    width: 400px;
    justify-content: center;
}

.section2-content {
    background-color: rgb(29, 29, 29);
    justify-content: center;
}
.section2-content p {
    font-family: 'Acumin Variable Concept', sans-serif; /* Specify a fallback font in case Acumin is not available */
    font-weight: 100; /* Use 100 for the 'Thin' weight */
    text-transform: uppercase;
    color: rgb(105, 105, 105);
    font-size: 17px;
}


.section3-content {
    background-color: rgb(29, 29, 29);
    width: 392px;
    text-align: center;
    display: block;
    align-items: center;
    justify-content: center;
    overflow-x: scroll;
    height: 646px;
    padding: 0 44px 44px 44px;
    margin-top: 137px;
}

.logo {
    width: 80px;
    height: 80px;
    /*border: 1px solid black;*/
}
.pagename-content{
    text-align: right;
}
.section2-content p {
    margin: 0;
}

.card-title {
    position: absolute;
    top: 0px;
    left: 20px;
    color: white;
    font-size: 21px;
    text-transform: uppercase;
    max-width: 180px;
    white-space: normal;
    font-family: 'Acumin Variable Concept', sans-serif;
    font-weight: 600;
}

.card-P1 {
    position: relative;
    width: 100%; 
    margin: 22px auto;
    text-align: left;
    border-radius: 30px;
    margin-bottom: 30px; 
}
.card-P1 img {
    width: 100%; 
    border-radius: 21px;
    height: auto; 
}
.card-P1 a {
    display: block; 
}

.card-P2 {
    margin: 20px;
    text-align: left;
    border-radius: 15px;
    overflow: hidden;
}

.card-P2 a {
    display: block; 
}

.card-P2 img {
    width: 100%; 
    border-radius: 15px;
    height: auto; 
}
.card-P2 p {
    font-family: 'Acumin Variable Concept', sans-serif; /* Specify a fallback font in case Acumin is not available */
    font-weight: 800; /* Use a value around 800 for 'Black' */
    text-transform: uppercase;
    text-align: center;
    color: white;
    font-size: 13px;
    font-style: italic;
	width: 157px;
}

.card2 {
    /*border: 1px solid black;*/
    width: 100%; 
    margin: 7px; 
    text-align: left; 
}

.Show-card{
    /*border: 1px solid black;*/
    margin: 0px 30px 30px 30px; /* Add margin for spacing between cards */
    overflow: scroll;
    height: 575px;
}
.Show-card .title{
    color: #fff;
    text-align: left;
    font-family: 'Acumin Variable Concept', sans-serif; /* Specify a fallback font in case Acumin is not available */
    font-weight: 800; /* Use a value around 800 for 'Black' */
    text-transform: uppercase;
}
.Show-card .prix-produit-show{
    color: #fff;
    text-align: right;
    font-family: 'Acumin Variable Concept', sans-serif; /* Specify a fallback font in case Acumin is not available */
    font-weight: 800; /* Use a value around 800 for 'Black' */
    text-transform: uppercase;
}
.Show-card .description-produit-show {
    text-align: left;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    max-width: 380px; 
    white-space: normal;
}

.Show-card .description-produit-show p {
    flex: 1;
    margin: 0; 
    word-wrap: break-word;
    font-family: 'Acumin Variable Concept', sans-serif; /* Specify a fallback font in case Acumin is not available */
    font-weight: 400; /* Use the default or around 400 for 'Regular' */
    color: white; 
}



.Show-card .image-produit-show{
    border-radius: 10px;
}
.Show-card .image-produit-show img{
    width: 100%;
    border-radius: 10px;
    height: 250px;
}    
.cards-section{
    height: auto;
}
.cards-section .step{
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}

.section4-content .back {
    color: white;
}

.breadcrumb-item {
    margin-right: 5px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}
.breadcrumb-item a {
    color: white; /* Color for parent items */
    text-decoration: none; 
}

.breadcrumb-item::before {
    content: '-';
    margin: 0 1px; 
}

/* To remove the '-' before the first breadcrumb */
.breadcrumb-item:first-child::before {
    content: none;
}

.breadcrumb-item:last-child:not(:only-child) a {
    color: rgb(168, 168, 168); /* Color for the current page */
}

.section4-content {
    margin: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background-color: rgb(29, 29, 29);
    width: 450px;
    overflow-x: hidden;
    padding: 10px 15px 10px 15px;
}

.back {
    display: flex;
    align-items: center;
}

.back-content {
    display: flex;
    align-items: center;
}
.back-content2 {
    display: flex;
    align-items: center;
}

.back p {
    font-family: 'Acumin Variable Concept', sans-serif;
    font-weight: 750;
    color: white;
    margin-left: -15px;
    cursor: pointer;
    text-transform: uppercase;
}

.back img {
    height: 40px;
    width: 40px;
}

.page-name {
    color: white;
    display: flex;
    align-items: center;
}

.page-name ul li a {
    font-family: 'Acumin Variable Concept', sans-serif;
    font-weight: 600;
    color: white;
    margin: 0;
    cursor: pointer;
    text-transform: uppercase;
}


.section5-content {
    background-color: rgb(29, 29, 29);
    text-align: center;
    display: flex;
    align-items: center; 
    margin-top: 210px;
}
.section6-content {
    background-color: rgb(29, 29, 29);
    text-align: center;
    display: flex;
    align-items: center;
    margin-top: 168px;
    justify-content: center;
}

.chois-container {
    overflow: hidden;
    white-space: nowrap;
    width: 480px;
    margin-bottom: 20px;
    background-color: rgb(29, 29, 29);
    margin: auto;
    height: 50px;
}

.chois {
    overflow: scroll;
    display: flex;
    gap: 5px;
    user-select: none;
    margin: auto 23px;
}
::-webkit-scrollbar {
    display: none;
  }
.chois label {
    user-select: none;
    font-family: 'Acumin Variable Concept', sans-serif; 
    font-weight: 600; /* Set the desired font weight */
    border: 1px solid white;
    border-radius: 10px;
    margin: auto 5px;
    display: inline-block;
    padding: 12px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    word-wrap: break-word; /* Allow the word to break and wrap to the next line */
    font-size: 10px;
    text-transform: uppercase;
}

input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.chois label {
    display: inline-block; /* Make labels behave like block elements */
    /* ... (other styles) */
}

input[type="radio"]:checked + a label {
    background-color: #d32a24;
    border: 0px solid white;
}

a{
    text-decoration: none;
}

.container{
    /*border: 1px solid rgb(87, 87, 87);*/
    margin-left: -42px;
    margin-right: -42px;
    width: auto;
    overflow-x: scroll;
    /*height: 400px;*/   
}
.containershow{
    margin-left: -42px;
    margin-right: -42px;
    width: auto;
    overflow-x: scroll;
}

.logo-loadPage{
    height: 764px;
    width: 400px;
    background-color: rgb(29, 29, 29);
    justify-content: center;
}
.logo-loadPage .logo{
    height: 110px;
    width: 110px;
    background-color: rgb(29, 29, 29);
    justify-content: center;
}

::-webkit-scrollbar {
    width: 0px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: rgb(78, 31, 31); /* Change this to your desired color */
  }



@media (max-width: 425px) {
    .container {
        width: -webkit-fill-available;
        margin-left: 0px; 
        margin-right: 0px;
    }
    section {
        text-align: center;
        align-items: center;
        width: auto;
        padding: 10px 40px 10px 40px;
        display: flex; /* Center content vertically */
        margin: 0;  
    }
    .section1-content{
        width: auto;
        padding-bottom: 0px;
    }
    .section2-content {
        width: auto;
    }
    .section3-content {
        width: auto;
        height: auto;
        padding: 0 33px 0 33px;
        margin-top: 117px;
    }
    .section4-content{
        margin: auto;
        width:auto;
        justify-content: space-between;
        padding: 0px 15px 2px 15px
    }
    .section5-content{
        width: auto;    
        padding: 0px;
        height: auto;
        
    
    }
    .section6-content{
        width: auto;    
        padding: 0px;
        height: auto;
    }
    .chois-container {
        width: auto;
    }
    .chois {
        margin: auto 13px !important;
    }
    .breadcrumb-item {
        font-size: 15px;
    }
    .logo {
        width: 70px;
        height: 70px;
        /*border: 1px solid black;*/
    }
    .chois {
        margin: auto 10px !important; 
    }
    .fixed-header {
        background-color: rgb(29, 29, 29);
    }
    body{
        background-color: rgb(29, 29, 29);
    }
}
@media (max-width: 375px) {
    .container {
        width: -webkit-fill-available;
        margin-left: 0px; 
        margin-right: 0px;
    }
    section {
        text-align: center;
        align-items: center;
        width: auto;
        padding: 10px 40px 10px 40px;
        display: flex; /* Center content vertically */
        margin: 0;  
    }
    .section1-content{
        width: auto;
        padding-bottom: 0px;
    }
    .section2-content {
        width: auto;
    }
    .section3-content {
        width: auto;
        height: auto;
        padding: 0 33px 0 33px;
        margin-top: 100px;
    }
    .section4-content{
        margin: auto;
        width:auto;
        justify-content: space-between;
        padding: 0px 15px 2px 15px
    }
    .section5-content{
        width: auto;
        padding: 0px;
        height: auto;

    }
    .section6-content{
        width: auto;
        padding: 0px;
        height: auto;
    }
    .chois-container {
        width: auto;
        margin-right: 8px;
    }
    .breadcrumb-item {
        font-size: 13px;
    }
    .Show-card .image-produit-show img {
        width: auto;
        height: 215px;
    }
    .card-title {
        top: -5px;
        left: 16px;
        font-size: 17px;
    }
    .section2-content p {
        font-size: 14px;
    }
    .logo {
        width: 60px;
        height: 60px;
        /*border: 1px solid black;*/
    }
    .chois {
        margin: auto 10px !important; 
    }
    .fixed-header {
        background-color: rgb(29, 29, 29);
    }
    body{
        background-color: rgb(29, 29, 29);
    }
}
@media (max-width: 320px) {
    .container {
        width: -webkit-fill-available;
        margin-left: 0px; 
        margin-right: 0px;
    }
    section {
        text-align: center;
        align-items: center;
        width: auto;
        padding: 10px 40px 10px 40px;
        display: flex; /* Center content vertically */
        margin: 0;  
    }
    .section1-content{
        width: auto;
        padding-bottom: 0px;
    }
    .section2-content p {
        font-size: 14px;
        width: auto;
    }
    .section3-content {
        width: auto;
        height: auto;
        padding: 0 33px 0 33px;
        margin-top: 92px;
    }
    .section4-content{
        margin: auto;
        width:auto;
        justify-content: space-between;
        padding: 0px 15px 2px 15px;
    }
    .section5-content{
        width: auto;
        padding: 0px;
        height: auto;
    }
    .section6-content{
        width: auto;
        padding: 0px;
        height: auto;
    }
    .chois-container {
        width: auto;
        margin-right: 3px;
    }
    .page-name ul li a {
        font-size: 12px !important;
    }
    h1{
        font-size: 16px;
    }
    .Show-card .image-produit-show img {
        height: 200px;
    }
    .card-P1 img {
        border-radius: 15px;
    }
    .card-title {
       font-size: 17px;
       top: -12px;
       max-width: 140px; 
    }
    .chois label {
        font-weight: 500; /* Set the desired font weight */
        border-radius: 8px;
        margin: auto 3px;
        padding: 10px;
        font-size: 8px;
    }
    .card-P2 p {
        font-size: 11px;
    }
    .card-P2 {
        margin: 15px;
        border-radius: 14px;
    }
    .breadcrumb-item {
        font-size: 11px;
    }
    .back p{
        font-size: 13px;
        margin-left: -12px;
    }
    
    .back img{
        width: 35px;
        height: 35px;
    }
    .Show-card .image-produit-show img {
        height: 170px;
    }
    .card-title {
        top: -9px;
        left: 13px;
        font-size: 15px;
    }
    .logo {
        width: 50px;
        height: 50px;
        /*border: 1px solid black;*/
    }
    .chois {
        margin: auto 10px !important; 
    }
    .fixed-header {
        background-color: rgb(29, 29, 29);
    }
    body{
        background-color: rgb(29, 29, 29);
    }
    .back-content {
        margin: 5px auto;
    }
    .back-content2 {
        margin: 5px;
    }
}