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

h2 {
    color: rgb(13, 150, 181);
    font-size: 50px;
    background-color: #1a1a1a;
    border: 0.5rem solid white;
    border-width: 1px;
    border-color: #fff;
    width: 300px;
    margin: 0 auto; /* Center horizontally */
    text-align: center; /* Center the text inside the h2 element */
}

/* Style the container */
body {
    background-color: #1a1a1a;
    color: #fff;
}

.container {
    text-align: center;
    padding: 20px;
}

/* Style the product section */
#products {
    background: rgb(59,10,65);
    background: linear-gradient(90deg, rgba(59,10,65,0.9781162464985994) 0%, rgba(19,10,102,0.9052871148459384) 17%, rgba(27,37,81,1) 38%, rgba(0,0,0,1) 69%, rgba(35,15,56,1) 100%);
    padding: 40px 0;
}

/* Style product rows */
.product-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 20px -10px; /* Adjust margin as needed */
}

/* Style individual product items */
.product {
    flex: 0 0 calc(33.33% - 20px); /* Three products in a row with spacing */
    margin: 10px;
    padding: 15px;
    background-color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform 0.2s ease-in-out;
}

/* Style product images */
.product img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.2s ease-in-out;
}

/* Style product titles */
.product h3 {
    font-size: 1.5rem;
    padding: 0%;
    margin: 30px 30px 30px;
    color:rgb(255, 255, 255)
}

/* Style product descriptions */
.total-price {
    color: #691616;

    font-style: normal;
    
}

.product p {
    font-size: 1.3rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    font-style: italic;
    color: rgb(0, 161, 254);
    margin: 10px;
}

/* Add a hover effect */
.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Improve image hover effect */
.product:hover img {
    transform: scale(1.1);
}

.calculated-price{
    color: #550a9c;
    
}

input{
    font-size: 11px;
    height: 20px;
    width: 140px;
}
footer {
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
    padding: 10px;
    bottom: 0;
    width: 100%;
}

/* Responsive Styles for Smaller Screens */
@media only screen and (max-width: 767px) {
    /* Adjust product rows for smaller screens */
    .product-row {
        flex-direction: column;
        align-items: center;
        margin: 20px 0;
    }

    /* Adjust individual product items for smaller screens */
    .product {
        flex: 0 0 calc(100% - 20px);
        margin: 10px 0;
    }

    /* Keep the original size of the product images on smaller screens */
    .product img {
        max-width: 100%;
    }
}