* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            width: 100%;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Header Styling */
/* Header Styling */
.headertop {
    width: 100%;
    display: flex;
    align-items: center; /* Vertically center the content */
    background-color: #f8f9fa; /* Light background */
    padding: 20px 0; /* Top and bottom padding */
    border-bottom: 2px solid #ddd; /* Optional bottom border */
}

/* Logo Styling */


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap');

.band {
    width: auto; /* Adapts to parent or screen */
    height: 45px; /* Fixed height */
    background-color: #9b0400; /* Dark red background */
    position: absolute; /* Precise positioning */
    top: 110px; /* 120px from top of the page */
    left: 0; /* Stretch to the left edge */
    right: 0; /* Stretch to the right edge */
    display: flex; /* Flexbox for centering */
    align-items: center; /* Vertical centering */
}

.band-text {
    font-family: 'Open Sans', sans-serif; /* Open Sans font */
    font-size: 16px; /* Adjust size as needed */
    color: white; /* Text color */
    text-transform: uppercase; /* All caps text */
    margin-left: 20px; /* Left margin */
}


.logo {
    width: 200px; /* Fixed width */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure responsiveness */
    margin-left: 35%; /* Left margin of 15% */
    margin-top: 10px;

}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap');

/* White Band Styling */
.white-band {
    width: auto; /* Adapts to parent or screen */
    height: 35px; /* Fixed height */
    background-color: white; /* White background */
    margin-top: 90px; /* Margin from the top */
    margin-bottom: 2px;
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
}

/* Text Styling */
.band-text-dark {
    font-family: 'Open Sans', sans-serif; /* Open Sans font */
    font-size: 24px; /* Adjust size if needed */
    color: #4a4a4a; /* Dark grey font color */
    text-transform: uppercase; /* All caps text */
}


        
        #uploadButton {
            margin-top: 50px;
            cursor: pointer;
            width: 200px;
            height: auto;
        }

        .content {
            display: none;
            width: 100%;
            height: auto;
            padding-bottom: 200px;
            max-width: 1200px;
            gap: 20px;
            margin-top: 30px;
            align-content: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .box {
            flex: 1 1 48%; 
            min-width: 280px;
            background-color: #e0e0e0;
            border: 1px solid black;
            padding: 20px;
        }

        #viewer {
            height: 500px;
            background-color: #d3d3d3;
            border: 1px solid black;
            overflow: hidden;
            padding: 20px;

        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
                align-items: center;
            }

            .box {
                width: 100%;
            }

            #viewer {
                height: 300px;
            }
        }

        .dropdown-group {
            margin-bottom: 15px;
        }

        select, input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border-radius: 5px;
            border: 1px solid #333;
            background-color: #fff;
            font-size: 16px;
        }
        /* File Info Container */


/* Individual Info Group Styling */
/* File Info Container */
.file-info {
    width: 100%; /* 80% width of the parent container */
    height: auto; /* Auto height to fit content */
    background-color: white; /* White background */
    margin-top: 20px; /* Spacing from elements above */
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex; /* Flex layout for alignment */
    justify-content: space-around; /* Evenly distribute the content */
    align-items: center; /* Vertical alignment */
    border: 1px solid #ddd; /* Optional border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow */
}

/* Info Group Styling */
.info-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styling for the Unit Options */
.unit-options {
    display: flex;
    gap: 10px; /* Space between radio buttons */
}

/* Input and Select Styling */
.info-group input {
    width: 100%; /* Full width of the group */
    padding: 8px; /* Padding inside input */
    margin-top: 5px; /* Space between label and input */
    font-size: 16px; /* Font size for text */
}
#checkoutButton {
    width: 175px;
    height: auto;
    
    margin-top: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#checkoutButton:hover {
    opacity: 0.9; /* Slight effect on hover */
}