/* General Styles */
body {
    font-family: 'Open Sans', 'Montserrat', Arial, sans-serif; /* Added Open Sans and Montserrat fonts */
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    font-size: 16px;
}

/* Airco Calculator Styles */
#airco-calculator {
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    max-width: 100%; /* Adjusted width for the calculator */
    font-size: 16px;
    color: aliceblue;
}

#airco-calculator h3 {
    color: aliceblue;
}

/* Form Styles */
#airco-calculator input,
#airco-calculator button {
    font-size: 16px;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* Ensure inputs are less wide */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition */
}

#airco-calculator input:focus {
    border-color: #00bad3; /* Change border color on focus */
    box-shadow: 0 0 5px rgba(0, 186, 211, 0.5); /* Add shadow on focus */
}

#airco-calculator button {
    background-color: #00bad3;
    width: 100%; /* Adjust width for button */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

#airco-calculator button:hover {
    background-color: #008c9e; /* Darker shade on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Results Styles */
#airco-results {
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    width: 100%; /* Set to full width */
}

/* Product Box Styles */
.product-box {
    color: aliceblue;
    display: flex; /* Use flexbox for layout */
    align-items: center;  /*Center items horizontally */
    /*justify-content: center;  Center items vertically */
    flex-wrap: wrap; /* Allow wrapping of items */
    margin: 0; /* Remove negative margin */
    width: 100%; /* Ensure full width */
}

/* Product Item Styles */
.product-item {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    margin: 10px; /* Adjust margin for spacing */
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center;
    transition: transform 0.1s; /* Less prominent hover effect */
    width: 275px; /* Set width to allow three items per row */
    height: 400px; /* Increased height for uniformity */
    overflow: hidden; /* Prevent overflow of content */
}

.product-item img {
    width: 250px; /* Make image responsive */
    height: 250px; /* Fixed height for images */
    object-fit: cover; /* Ensure the image covers the card area */
    margin-bottom: 10px; /* Space between image and text */
}

.product-item h2 {
    font-size: 1.2em;
    margin: 0;
}

/* Hover Effect */
.product-item:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
}

/* Responsive Styles */
@media (max-width: 600px) {
    .product-item {
        flex-direction: column;
        align-items: flex-start;
        width: 100%; /* Full width on smaller screens */
    }

    .product-item img {
        margin-bottom: 10px;
    }
}

/* Dimensions Display */
#airco-results h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: aliceblue;
}
.product-box h3 {
    margin: 0; /* Remove default margin */
    padding: 5px 0; /* Add some padding for spacing */
    font-size: 1.5em; /* Adjust font size for prominence */
    text-align: center; /* Center the title */
    border: none; /* Remove any border */
    background: none; /* Remove background */
    color: aliceblue;
}
#airco-header h3{
    color: aliceblue;
}