/* The grid: Three equal columns that float next to each other */
.column-block {
    float: left;
    width: 33.33%;
    padding: 50px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    color: white;
    
    /* Add a box-shadow for the drop shadow effect */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    
    /* Smooth transition for hover effects */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for column blocks */
.column-block:hover {
    /* Slightly scale up the block for interactivity */
    transform: scale(1.05);
    
    /* Add a deeper shadow to indicate focus */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

/* Container tab styles for the expanding sections */
.containerTab-block {
    padding: 20px;
    color: white;
    margin-top: 20px;
    
    /* Add a subtle shadow for consistency with the column blocks */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    
    /* Transition for smooth visibility changes */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Close button for container tabs */
.closebtn {
    float: right;
    color: white;
    font-size: 35px;
    cursor: pointer;
    
    /* Hover effect for close button */
    transition: color 0.2s ease;
}

/* Close button hover effect */
.closebtn:hover {
    color: #ff0000; /* Highlighted color on hover (red) */
}

/* Additional hover effect for container tabs (if needed) */
.containerTab-block:hover {
    /* Slight elevation on hover */
    transform: scale(1.01);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
}

/* Optional: Add transition for row items when the tab opens */
.row {
    transition: opacity 0.3s ease-in-out;
}