body{
    font-family: Arial, sans-serif; /* Set a default font for the body */
    background-color: #000; /* Set a black background for the body */
    color: #fff; /* Set text color to white for better contrast */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.product-image {
    display: block; /* Make the shirt design image a block-level element */
    margin: 20px auto; /* Center the image horizontally and add space above */
    width: 70%; /* Set width to 100% of the container */
    max-width: 100%; /* Ensure the image scales properly */
    height: auto; /* Maintain aspect ratio */
    z-index: 2; /* Ensure it appears above other elements if needed */
}

.description {
    display: block; /* Ensure the description is a block-level element */
    margin: 20px auto; /* Center the description horizontally */
    width: 300px; /* Reduce the maximum width for a more condensed look */
    padding: 15px; /* Adjust padding for better readability */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background for contrast */
    border-radius: 10px; /* Rounded corners for the description section */
    text-align: center; /* Center the text inside the description */
    font-size: 14px; /* Reduce font size for a more compact look */
    line-height: 1.5; /* Adjust line height for better readability */
    color: #fff; /* Ensure the text color is white for contrast */
}

h1 {
    text-align: center; /* Center the heading text */
    font-size: 36px; /* Set font size for the heading */
    margin: 20px 0; /* Add space above and below the heading */
    color: #fff; /* Set heading color to white */
}

.price {
    display: block; /* Make the price a block-level element */
    margin: 20px auto; /* Center the price horizontally and add space above */
    font-size: 24px; /* Set font size for the price */
    color: #fff; /* Set price color to white */
    text-align: center; /* Center the text inside the price section */
}

.logo {
    display: block; /* Ensure the logo is displayed as a block-level element */
    margin: 20px auto; /* Center the logo horizontally and add space above */
    max-width: 450px; /* Set a reasonable size for the logo */
    height: auto; /* Maintain aspect ratio */
    position: relative; /* Ensure it doesn't overlap with other elements */
    z-index: 3; /* Ensure it appears above other elements */
}

.quantity {
    display: block; /* Make the quantity input a block-level element */
    margin: 20px auto; /* Center the input horizontally and add space above */
    padding: 10px; /* Add padding for better readability */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background for contrast */
    border-radius: 5px; /* Rounded corners for the input */
    color: #fff; /* Set text color to white for better contrast */
    font-size: 18px; /* Set font size for the input text */
    width: 200px; /* Set a fixed width for the input */
    z-index: 2; /* Ensure it appears above other elements if needed */
}
.order-form {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack form elements vertically */
    align-items: center; /* Center form elements horizontally */
    justify-content: center; /* Center form elements vertically */
    margin: 0 auto; /* Center the form horizontally */
    width: 50%; /* Set width to 50% of the container */
    max-width: 600px; /* Set a maximum width for the form */
    padding: 20px; /* Add padding for better readability */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background for contrast */
    border-radius: 10px; /* Rounded corners for the form */
    z-index: 2; /* Ensure it appears above other elements if needed */
}

.order-form label {
    margin-bottom: 5px; /* Add space below labels */
    color: #fff; /* Set label text color to white */
    font-size: 16px; /* Set font size for labels */
}

.order-form select,
.order-form input[type="number"] {
    margin-bottom: 15px; /* Add space below inputs */
    padding: 10px; /* Add padding for better readability */
    border-radius: 5px; /* Rounded corners for inputs */
    border: 1px solid #ccc; /* Add a border to inputs */
    font-size: 16px; /* Set font size for inputs */
    width: 100%; /* Make inputs take full width of the form */
    max-width: 300px; /* Limit the width of inputs */
}

.order-button {
    display: block; /* Make the button a block-level element */
    margin: 20px auto; /* Center the button horizontally and add space above */
    padding: 10px 20px; /* Add padding to the button */
    background-color: rgb(241, 228, 228); /* Background color for the button */
    color: black; /* Text color for the button */
    text-align: center; /* Center the text inside the button */
    text-decoration: none; /* Remove underline from links */
    border-radius: 5px; /* Rounded corners for the button */
    font-size: 18px; /* Font size for the button text */
    width: 200px; /* Set a fixed width for the button */
    z-index: 2; /* Ensure it appears above other elements if needed */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.order-button:hover {
    background-color: rgb(52, 47, 47); /* Change background color on hover */
}

.carousel {
    position: relative;
    width: 500px; /* Set the width of the carousel */
    height: 500px; /* Set the height of the carousel */
    margin: 20px auto; /* Center the carousel horizontally */
    overflow: hidden; /* Hide the other images */
    border: 2px solid #fff; /* Optional: Add a white border */
    border-radius: 10px; /* Optional: Add rounded corners */
    display: flex; /* Ensure the carousel container uses flexbox */
    justify-content: center; /* Center the images horizontally */
    align-items: center; /* Center the images vertically */
}
.carousel-images {
    display: flex; /* Align images side by side */
    transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */
    width: 200%; /* Ensure enough space for all images (adjust for the number of images) */
    height: 100%; /* Match the height of the carousel */
}

.carousel-image {
    width: 100%; /* Each image takes up the full width of the carousel */
    height: 100%; /* Ensure the image fills the height of the carousel */
    object-fit: cover; /* Ensure the image scales properly without distortion */
    flex-shrink: 0; /* Prevent images from shrinking */
}

button.prev,
button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
    border-radius: 50%; /* Optional: Make buttons circular */
}

button.prev {
    left: 10px; /* Position the "previous" button on the left */
}

button.next {
    right: 10px; /* Position the "next" button on the right */
}

button.prev:hover,
button.next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darker background on hover */
}

@media screen and (max-width: 768px) {
    .logo {
        max-width: 80%; /* Adjust logo size for smaller screens */
    }
    .product-image {
        width: 70%; /* Make the image responsive on smaller screens */
    }
    .description {
        max-width: 90%; /* Allow more space on smaller screens */
    }
    .order-form {
        width: 90%; /* Make the form responsive on smaller screens */
    }
    .order-button {
        width: 100%; /* Make the button responsive on smaller screens */
    }
    .carousel {
        width: 70%; /* Make carousel full width on smaller screens */
        height: auto; /* Adjust height for smaller screens */
    }
    
}