/*
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 *
 * Template Name: Appmyil - App Landing Template   
 * Template URI: https://thememarch.com/demo/html/appmyil/
 * Description: Appmyil is an app landing HTML template which comes with unique and clean design. It helps you to create a beautiful app landing HTML website. It is designed with Bootstrap v4.2.1 the latest bootstrap version. Appmyil is well organized and very easy to customize.
 * Author: Thememarch
 * Author URI: https://thememarch.com
 * Version: 1.0
 *
 * %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 */

.card {
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Add a wrapper div for the image */
.card-img-wrapper {
    background: linear-gradient(145deg, #f6f6f6 0%, #e9e9e9 100%);
    padding: 1.5rem;
    width: 100%;
}

.card-img-top {
    height: 200px;
    width: 200px; /* Set fixed width */
    object-fit: contain; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the image */
    transition: transform 0.3s ease;
    display: block; /* Ensure proper centering */
    max-width: 100%; /* Responsive behavior */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.card-img-top:hover {
    transform: scale(1.05);
}

.card-body {
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.card-text {
    margin-bottom: auto;
}

/* Ensure consistent card heights */
.h-100 {
    height: 100% !important;
}

.btn-primary {
    background-color: #007bff;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    color: #ffffff !important; /* Force white text color */
    margin-top: 1rem;
    align-self: center;
}

.btn-primary:hover {
    background-color: #0056b3;
    color: #ffffff !important;
}

.tm-heroslider-content ul li {
    color: #ffffff !important;
}

.tm-heroslider-content ul li strong {
    color: #ffffff !important;
}