/* Apply hover effect only to the button with the class "custom-button-1" */
.custom-button-1 {
    background-color: #E91E63; 
    color: white; /* Text color is white */
    padding: 12px 24px; 
    text-decoration: none; 
    border-radius: 5px; 
    font-size: 16px; 
    font-weight: bold; 
    font-family: 'Nunito', sans-serif; 
    display: inline-block; 
    transition: all 0.3s ease; 
    border: 2px solid transparent;
}

.custom-button-1:hover {
    background-color: transparent; /* Background turns transparent on hover */
    color: #ffffff; /* Text color changes to #ffffff on hover */
    border: 2px solid #E91E63; /* Border color changes to #E91E63 on hover */
}


.square-container {
    width: 100%; /* Full width of parent */
    max-width: 300px; /* Adjust as needed */
    aspect-ratio: 1 / 1; /* Maintains square shape */
    overflow: hidden; /* Prevents extra space */
    display: flex;
    justify-content: center;
    align-items: center;
}

.square-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures proper cropping */
    display: block;
}