@import url("https://diettut.org/assets/css/master.css");

#bar-chart {
            width: 100%;
            height: 400px; /* Set height as needed */
        }
.text-start {
    text-align: left !important;
}

.image-container {
    width: 150px; /* Define the size of the image container */
    height: 180px; /* Square container */
    overflow: hidden; /* Crop the overflowing part */
    border-radius: 6px; /* Keep it circular */
    margin: 0.8em 1em 0 1em; /* Center the image container */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image scales and crops properly */
    object-position: center 0%;
}

@media (max-width: 768px) {
    .image-container {
        width: 150px; /* Reduce the size of the image container on tablets */
        height: 180px;
		margin-top: -0px;
    }
    h4 {
        font-size: 1rem !important; /* Reduce the font size of the header */
    }
    h5 {
        font-size: 0.8rem !important; /* Reduce the subtitle size */
    }
}

@media (max-width: 576px) {
    .image-container {
        width: 120px; /* Reduce the size of the image container on smaller devices */
        height: 160px;
    }
    h4 {
        font-size: 0.8rem !important; /* Further reduce the font size on mobile */
    }
    h5 {
        font-size: 0.7rem !important; /* Further reduce the subtitle size */
    }
    p{
        font-size: 0.8rem !important;
    }
	.flip-container{
	position: relative;
	height: 18rem;
}
}



/*flip card*/

.flip-container{
	position: relative;
	height: 20rem;
}

.card-flip {
    position: relative;
    perspective: 1000px;
    width: 100%; /* Ensure the card flip container takes full width */
    height: 100%; /* Ensure the card flip container takes full height */
}

.card {
    position: absolute;
    width: 100%; /* Ensures both cards take full width */
    height: 100%; /* Ensures both cards take full height */
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.front {
    z-index: 2; /* Place the front card on top */
}

.back {
    transform: rotateY(180deg);
}

/* Flip effect on container hover */
.flip-container:hover .card-flip .front {
    transform: rotateY(180deg);
}

.flip-container:hover .card-flip .back {
    transform: rotateY(0);
}

/* No delay for flipping in */
.card-flip .front, .card-flip .back {
    transition: transform 0.6s ease-in-out;
}

.card-body {
    padding: 20px;
}

.contact-info {
    display: flex;
    flex-direction: column; /* Stack address and phone numbers vertically */
    align-items: flex-start; /* Align text to the left */
    width: 100%; /* Make sure it occupies the full width */
}

/* Optional: Add margin for uniform spacing */
.contact-info p {
    margin: 5px 0; /* Adjust the spacing between items */
}