html{
            font-family: Jost, sans-serif;
            font-size: 2vw;
        }

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white; /* Set background color to white */
        }
 
       figcaption {
	    font-size: clamp(12px,1rem,20px);
            /*font-style: italic;  Optional: italic style for the caption */
            text-align: center; /* Center the caption text */
        }

        .container {
            width: 100%;
            max-width: 1024px;
            margin: 0 20px;
        }

        .zone {
            padding: 10px;
            text-align: center;
            border-bottom: 0px solid #ccc;
        }

        .title-zone {
            height: auto;
            font-size: clamp(16px,1.8rem,36px);
            font-weight: bold;
        }

        .blahblah {
            font-size: clamp(16px,1.2rem,24px);
            color: #333; /* Dark color for the text */
            text-decoration: none !important; /* Remove the underline */
            font-weight: bold; /* Make the link text bold */
            letter-spacing: 0.1em; /* Add space between the letters */
            letter-spacing: clamp(0.2vw, 0.1rem, 0.5vw); /* Add space between the letters */
            line-height: 1.4;
        }
            
        .zone img {
	    width: clamp(300px, 60vw, 600px); /* Minimum width of 200px, preferred width of 50% of the viewport width, maximum width of 600px */
            height: auto; /* Maintains the aspect ratio */
            border: 2px solid #333; /* Thin dark frame around the image */
            padding: 5px; /* Optional: Adds some spacing between the image and the border */
            border-radius: 5px; /* Optional: Rounded corners for a softer look */
        }

        .image-zone {
            display: flex;
            position: relative; /* Position relative for absolute positioning of the label */
            justify-content: center; /* Center image horizontally */
        }

        .mention-soldout {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: clamp(16px,1.4rem,28px);
            transform: translate(-50%, -50%) rotate(30deg); /* Center and tilt */
            background-color: rgba(255, 0, 0, 0.7); /* Red background with transparency */
            color: white;
            padding: 10px;
            font-weight: bold;
            border-radius: 5px;
            text-align: center;
        }

        .tabs {
            display: flex;
            justify-content: center; /* Center the tabs */
            margin-bottom: 0px;
        }
        .tab {
            padding: 10px 20px;
            border: 1px solid #ccc;
            margin-right: 0px;
            width: 20vw;
            background-color: #f1f1f1;
            transition: background-color 0.3s; /* Smooth transition */
            cursor: pointer;
            display: flex; /* Use flexbox for centering */
            justify-content: center; /* Center the content horizontally */
            align-items: center; /* Center the content vertically */
            font-size: clamp(16px,1.7rem,28px);
        }
        .tab.active {
            background-color: white; /* Highlight color for active tab */
            color: black; /* Text color for active tab */
            font-weight: bold;
            border: 0px;
            display: flex; /* Use flexbox for centering */
            justify-content: center; /* Center the content horizontally */
            align-items: center; /* Center the content vertically */
        }
        .tab-content {
            display: none;
            border: 0px solid #ccc;
            padding: 20px;
            text-align: center; /* Center all content within the tab */
        }
        .active {
            display: block;
        }

        .contact {
            font-size: clamp(16px,1.2rem,24px);
            color: #333; /* Dark color for the text */
            text-decoration: none !important; /* Remove the underline */
            font-weight: bold; /* Make the link text bold */
            letter-spacing: 0.2rem; /* Add space between the letters */
        }

        .contact:hover {
            color: #007BFF; /* Optional: Change color on hover to indicate interactiveness */

        }

        a {
            color: inherit !important; /* Ensure the link doesn't turn blue */
            text-decoration: none !important; /* Remove the underline from all links */
        }

        .button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            z-index: 1;
            opacity: 0; /* Initially hide the buttons */
            transition: opacity 0.3s; /* Smooth transition for opacity */
        }
        .prev {
            left: 20px;
        }
        .next {
            right: 10px;
        }
        .slider-zone:hover .button {
            opacity: 1; /* Show buttons on hover */
        }
        .slider {
            position: relative;
            justify-content: center;
        }
        .slider img {
            width: 100%;
            display: none;
        }
        .slider img.active {
            display: block;
        }
        .slider-zone {
            background-color: white;
            position: relative;
            max-width: 700px; /* Limit the width of the picture zone */
            margin: 20px auto; /* Center the picture zone and add margin */
        }