.custom-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100vw !important;
}

.main-image img {
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
}

/* .thumbnail-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
} */

.thumbnail-images {
    display: flex;
    /* justify-content: center; */
    gap: 5%;
    max-width: 100%;
    overflow-x: auto;
    padding: 10px 0;
    box-sizing: border-box;
}

.thumbnail-images img {
    flex-basis: 21.25%;
    max-width: 21.25% !important;
    background-color: white;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.thumbnail-images img:hover,
.thumbnail-images img.active {
    border-color: #0073aa;
}


.condition-aesthetic {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0; /* Remove default margin if any */
    padding: 0; /* Remove default padding if any */
}

.condition-box {
    flex-grow: 1;
    border: 1px solid #00008F;
    padding: 20px;
    text-align: center;
    font-family: "Unbounded", sans-serif;
    font-size: 15px;
    color: #00008F;
    border-radius: 10px;
}

.highlight {
    border: 1px solid #00FF00 !important;
    font-weight: bold;
    background-color: #ffffff;
}

.condition-box p {
    margin: 0;
}

/* Remove extra margin or padding if exists around the first and last box */
.condition-box:first-child {
    margin-left: 0;
}

.condition-box:last-child {
    margin-right: 0;
}

.color-display {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.color-box {
    flex: 1; /* Make each box take an equal amount of space */
    border: 1px solid #00008F;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    font-family: "Unbounded", sans-serif;
    font-size: 15px;
    color: #00008F;
    border-radius: 10px;
    justify-content: center; /* Center the content horizontally */
}

.color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
}

.duration-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.duration-box {
    border: 1px solid #00008F;
    padding: 20px;
    font-family: "Unbounded", sans-serif;
    font-size: 15px;
    color: #00008F;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.duration-box.highlight {
    border: 1px solid #00FF00;
    font-weight: bold;
    background-color: #FFFFFF; /* Ensure the background is white */
}

.storage-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.storage-box {
    border: 1px solid #00008F;
    padding: 20px;
    font-family: "Unbounded", sans-serif;
    font-size: 15px;
    color: #00008F;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.storage-box.highlight {
    border: 1px solid #00FF00;
    font-weight: bold;
    background-color: #FFFFFF; /* Ensure the background is white */
}

.storage-name {
    flex: 1;
}

.storage-cost {
    margin-left: 20px;
}

.keyboard-language-display {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.keyboard-language-select {
    width: 100%;
    padding: 20px;
    font-family: "Unbounded", sans-serif;
    font-size: 15px;
    color: #00008F;
    border: 1px solid #00008F;
    border-radius: 10px;
    appearance: none; /* Remove default arrow */
    background-color: #EFEEEF;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 3l4 4 4-4"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 10px;
    -webkit-appearance: none; /* Remove default arrow in Safari */
    -moz-appearance: none; /* Remove default arrow in Firefox */
}

.pricing-display {
    font-family: "Unbounded", sans-serif;
    color: #00008F;
}

.pricing-display p {
    margin: 5px 0 0 0;
}

.pricing-monthly {
    font-size: 24px;
    font-weight: bold;
}

.pricing-display #apport, 
.pricing-display #option_stockage, 
.pricing-display #engagement {
    font-size: 16px;
}

.form-information-hidden {
    display: none !important;
}

/* Sur mobile, on affiche les informations du formulaire */
@media (max-width: 768px) {
    .pricing-monthly {
        font-size: 18px;
    }
    .pricing-display {
        font-size: 12px;
    }
    .pricing-display p {
        margin: 0;
    }
}