body {
    background: linear-gradient(to right, #d4f1f4, #e9f8f9); /* Soft spring colors */
    font-family: 'Poppins', sans-serif;
    color: #333;
}

h1 {
    color: #2d6a4f;  /* Spring Green */
    font-size: 3rem;
    text-align: center;
}

p {
    color: #9a4e0c;  /* Soft greenish text */
    font-size: 1.2rem;
    text-align: center;
}

.box {
    padding: 15px; 
    text-align: center;
    font-size: 1.1rem; /* Slightly smaller font helps with longer words */
    font-weight: bold;
    border-radius: 15px;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px; 
    
    /* THE FIX: Remove height: 150px and use these instead */
    min-height: 180px;  /* Minimum height so they look uniform */
    height: auto;       /* Allows the box to expand if text grows */
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* Keeps text centered vertically */
    
    border: 2px solid #000;
}

/* Specific styles for each box */
#box1 {
    background-color: #ef9fb1; /* Darker pink for flowers */
}

#box2 {
    background-color: #fdd835; /* Stronger yellow for fresh air */
}

#box3 {
    background-color: #457948; /* Stronger green for grass */
}

#box4 {
    background-color: #269de8; /* Stronger blue for spring showers */
}

/* Hover effect for boxes */
.box:hover {
    transform: scale(1.05); /* Slightly enlarges on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
}

/* Adjusting column width to make the boxes more compact */
.row {
    display: flex;
    justify-content: center;  /* Center align the boxes */
}

.col-md-3 {
    flex: 0 0 22%;  /* Adjust width to 22% of the container */
    max-width: 22%;
    margin: 10px;  /* Adding space between columns */
}

/* Small screen responsiveness: stack the boxes vertically */
@media (max-width: 768px) {
    .col-md-3 {
        flex: 0 0 45%;  /* Adjust for mobile devices (45% width) */
        max-width: 45%;
    }
}

@media (max-width: 480px) {
    .col-md-3 {
        flex: 0 0 90%;  /* Adjust for very small screens (90% width) */
        max-width: 90%;
    }
}

.dropdown {
    display: inline-block;
}

.dropdown-toggle {
    background-color: #dd77a0;
    color: rgb(249, 249, 249);
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
}