body {
    background-color: #000; /* Set a black background for the body */
    color: #fff; /* Set text color to white for better contrast */
    font-family: 'Arial', sans-serif; /* Use a clean, sans-serif font */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}
.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: 40%; /* 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 */
}

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

.shirt-design1 {
    display: flex; /* Make the shirt design image a block-level element */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    padding: 20px; /* Add padding for better readability */
    margin: 20px auto; /* Center the image horizontally and add space above */
    width: 400px; /* 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 */
}

.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 */
}

.description {
    display: flex; /* Make the description a block-level element */
    justify-content: center; /* Center the description horizontally */
    align-items: center; /* Center the description vertically */
    margin: 40px auto; /* Center the description horizontally and add space above */
    width: 300px; /* Set a maximum width for the description section */
    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 description section */
    z-index: 2; /* Ensure it appears above other elements if needed */
}

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

.button {
    display: flex; /* Make the order now button a block-level element */
    justify-content: center; /* Center the button horizontally */
    align-items: center; /* Center the button vertically */
    margin: 20px auto; /* Center the button horizontally and add space above */
    padding: 10px 20px; /* Add padding for better clickability */
    background-color: white; /* Red background for the button */
    color: black; /* White text color for the button */
    font-size: 18px; /* Set font size for the button text */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners for the button */
    cursor: pointer; /* Change cursor to pointer on hover */
    text-align: center; /* Center the text inside the button */
}

.button:hover {
    background-color: grey; /* Darker red on hover */
}


@media screen and (max-width: 768px) {
    .logo {
        max-width: 80%; /* Adjust logo size for smaller screens */
    }
    .shirt-design1-image,
    .shirt-design1,
    .description,
    .button {
        max-width: 90%; /* Adjust other elements for smaller screens */
    }
}