/* ----------------------------------------------------------------
	mtm: DIY
-----------------------------------------------------------------*/
        .containerbg {
            position: relative; /* Allows positioning of child elements */
            width: 300px; /* Set the width of the container */
            height: 200px; /* Set the height of the container */
            border: 1px solid #ccc; /* Optional: Add a border to visualize the container */
        }
        .containerbg img {
            position: absolute; /* Position the image absolutely within the container */
            bottom: 0; /* Align the image to the bottom of the container */
            left: 0; /* Optional: Align the image to the left of the container */
            width: 100%; /* Optional: Make the image span the full width of the container */
            /* Optionally, you can use max-width to keep the image from stretching */
            max-width: 100%;
        }
        .diyfont {
        font-family: "gambado-sans", sans-serif;
		font-weight: 700;
		font-style: normal;
		}
/* Add transparent grey background with rounded corners to text */
.rounded-corners {
    border-radius: 15px;  /* Adjust the corner radius as needed */
    background-color: rgba(0, 0, 0, 0.5);  /* Transparent grey background */
    padding: 20px;
}

/* Ensure the image column stays full height even on mobile */
.image-box {
    border-radius: 15px; /* Same corner radius as text box */
    overflow: hidden;    /* Ensures rounded corners appear properly */
    min-height: 300px;    /* Set a minimum height */
}

/* Make sure the image doesn't cut off vertically on small screens */
@media (max-width: 991px) {
    .image-box {
        background-size: cover;  /* Make sure it covers the container */
        background-position: center;  /* Ensure the focus point is centered */
        min-height: 450px !important;  /* Adjust the minimum height on smaller screens */
    }

}