#carbon-calculator {
    padding: 20px;
    background: #f9f9f9;
}

.method-selection {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to a new row */
    gap: 20px; /* Space between items */
}


.method-card {
    text-align: center;
    cursor: pointer;
    flex: 1 1 calc(33.333% - 20px); /* Each item takes up 1/3 of the width, minus the gap */
    box-sizing: border-box; /* Ensures padding/margins are included in width */
    padding: 20px; /* Adds padding inside the card */
    background-color: #fff; /* Set a white background for better contrast with the shadow */
    border: 1px solid #ccc; /* Adds a light border */
    box-shadow: 0 4px 8px rgba(0, 128, 0, 0.2); /* Greenish box shadow */
	border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Adds transition for smoother hover effects */
}
.method-card:hover {
    transform: translateY(-5px); /* Lifts the card slightly on hover */
    box-shadow: 0 8px 16px rgba(0, 128, 0, 0.3); /* Makes the shadow more pronounced on hover */
}
.method-card img {
    max-width: 100px;
}