body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}



nav {
    display: flex; /* Use flexbox to align items */
    justify-content: center; /* Center-align items horizontally */
    align-items: center; /* Center-align items vertically */
    background-color: #000000; /* Background color of the navigation bar */
    color: #fff; /* Text color */
    padding: 10px; /* Padding around the navigation items */
}

nav .logo {
    margin-right: auto; /* Push logo to the left */
    margin-left: auto; /* Push logo to the right */
}

nav .logo img {
    width: 250px; /* Set the width of the logo */
    height: auto; /* Maintain aspect ratio */
}

nav ul {
    list-style-type: none; /* Remove default list styles */
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline; /* Display list items horizontally */
}

nav ul li a {
    display: inline-block; /* Make anchor tags behave as blocks */
    color: #fff; /* Text color for navigation links */
    text-decoration: none; /* Remove underlines from links */
    padding: 10px; /* Padding around each link */
    width: 100px;
}

nav ul li a:hover {
    background-color: #555; /* Background color on hover */
}

.login button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 20px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
    background-color: #f4f4f4; /* Light gray */
    border-radius: 10px;
}

/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #f70303, #b1250d); /* Gradient from pink to orange */
    border-radius: 10px;
}

/* Hover effect */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #ff4b2b, #fd023c); /* Gradient from orange to pink */
    transition: all 0.3s ease;
}

/* Scrollbar corner */
::-webkit-scrollbar-corner {
    background: #f4f4f4; /* Match scrollbar track background */
}


header {
    background-color: #000000;
    color: #fff;
    text-align: center;
    padding: 1px 0;
}

header  h1 {
    font-size: 1em; /* Larger heading size */
    color: #FF151D;
}

main {
    padding: 20px; /* Add padding around the main content */
    background-image: url('/img/bg_product-selector.webp'); /* Set background image */
    background-size: cover; /*Cover the entire background*/
    background-position: center; /* Center the background image */
    background-repeat:no-repeat; /* Prevent the background image from repeating */

}

.wrap-container1 {
    display: flex; /* Use flexbox to arrange items */
    justify-content: space-between; /* Add space between items */
    padding: 25px; /* Add padding around the container */
}


.wrap-container2 {
    display: flex; /* Use flexbox to arrange items */
    justify-content: space-between; /* Add space between items */
    padding: 25px; /* Add padding around the container */
}


.wrap-container3 {
    display: flex; /* Use flexbox to arrange items */
    justify-content: space-between; /* Add space between items */
    padding: 25px; /* Add padding around the container */
}


.wrap-container4 {
    display: flex; /* Use flexbox to arrange items */
    justify-content: space-between; /* Add space between items */
    padding: 25px; /* Add padding around the container */
}


.wrap-container5 {
    display: flex; /* Use flexbox to arrange items */
    justify-content: space-between; /* Add space between items */
    padding: 25px; /* Add padding around the container */
}


.wrap-container6 {
    display: flex; /* Use flexbox to arrange items */
    justify-content: space-between; /* Add space between items */
    padding: 25px; /* Add padding around the container */
}

.big-container {
    width: calc(50% - 30px); /* Set width for each big container */
    padding: 20px; /* Add padding inside the container */
    background-image: url('/img/bg_product-selector.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    border: 0.5px solid rgba(0, 0, 0, 0.1); /* Add 0.5px border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    margin-right: 20px; /* Increase margin between big containers for more space */
}


.content-container {
    padding: 20px; /* Add padding inside the container */
    background-color: rgba(255, 255, 255, 0.6); /* Set background color with transparency */
    border-radius: 16px; /* Add rounded corners to the container */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    backdrop-filter: blur(8px); /* Apply background blur */
}

.content-container h1 {
    color: #FF151D; /* Set text colour */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    transform: skew(-10deg); /* Add a skew transform for a 3D effect */
}

section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px; /* Add margin to separate from the header */
}

.qr-container,
.model-container {
    flex-basis: 45%; /* Set width of containers */
}

.qr-container {
    background-color: transparent; /* Darken the background of the QR container */
    padding: 20px; /* Add padding for spacing */
    margin-left: auto; /* Move the QR container to the right */
    margin-right: 20px; /* Add additional margin for spacing */
    text-align: center; /* Center-align content */
    flex: 1; /* Allow the QR container to expand */
}

.model-container {
    flex: 1; /* Allow the model container to expand */
    display: block; /* Use flexbox to align items */
    justify-content: center; /* Center-align the model */
    margin-bottom: 20px;
}

.button-container {
    display: block;
    margin-top: 20px; /* Adjust as needed */
}

.model-container #model-viewer {
    max-width: 500px; /* Limit the maximum width */
    height: 400px; /* Set height of the model */
}

.content {
    display: flex; /* Use flexbox to align items */
    justify-content: space-between; /* Space items evenly */
    align-items: center; /* Center-align items vertically */
}

.qr-code {
    width: 200px; /* Adjust width of the QR code */
    height: auto; /* Maintain aspect ratio */
}

.icon {
    width: 20px; /* Adjust width as needed */
    height: 20px; /* Adjust height as needed */
}

.icon-container {
    position: relative; /* Use relative positioning */
    left: -300px; /* Adjust the left position to move the icon to the left */
    top: 50px; /* Adjust the top position to align the icon vertically */
    margin-top: 280px;
}



footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 
}

/* Styles for mobile view */
@media only screen and (max-width: 767px) {
    .wrap-container1,
    .wrap-container2,
    .wrap-container3,
    .wrap-container4,
    .wrap-container5,
    .wrap-container6 {
        flex-direction: column; /* Arrange containers in a column for mobile view */
        align-items: center; /* Center-align items horizontally */
        padding: 15px; /* Reduce padding for better spacing in mobile view */
    }

    .big-container {
        width: 100%; /* Set width to 100% for full width on mobile */
        margin-bottom: 20px; /* Add margin bottom between big containers for spacing */
    }

    .content-container {
        width: 100%; /* Set width to 100% for full width on mobile */
        margin-bottom: 20px; /* Add margin bottom for spacing between content containers */
    }

    .qr-container,
    .model-container {
        width: 100%; /* Set width to 100% for full width on mobile */
    }

    .icon-container {
        left: 0; /* Reset left position */
        top: 0; /* Reset top position */
        margin-top: 330px; /* Adjust margin top for spacing */
    }

    .icon-container img {
        width: 20px; /* Adjust icon width for better visibility on mobile */
        height: 20px; /* Adjust icon height for better visibility on mobile */
    }

    .model-container #model-viewer {
        max-width: 150%; /* Set max-width to 100% for full width on mobile */
        height: auto; /* Allow height to adjust according to the width */
    }

    .qr-code {
        width: 105px; /* Adjust QR code width for better visibility on mobile */
    }

    .qr-container p {
        font-size: 11px; /* Decrease font size for better display on mobile */
    }
}