/* General Banner Container Styles */
.ba-banner-container {
    display: flex;
    align-items: center;
    position:relative;
    gap: 20px; /* Space between image and content */
    padding: 20px;
    margin: 30px 0; /* Space above and below the banner */
    border: 1px solid #007BFF; /* Light border for subtle styling */
    border-radius: 10px; /* Rounded corners for a modern look */
    background-color: #ffffff; /* White background for a clean look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ba-banner-ad-badge {
    position: absolute;
    left: 15px;
    top: -15px;
    background: #fff;
    padding: 5px;
    color: #007BFF;
    font-size: 13px;
}

/* Hover Effect */
.ba-banner-container:hover {
    transform: translateY(-5px); /* Slight hover effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
}

/* Banner Image Styles */
.ba-banner-container img, .ba-banner {
    flex-shrink: 0; /* Prevent the image from shrinking */
    width: 30%; /* Set a consistent width for desktop */
    max-width: 300px; /* Ensure the image doesn’t grow too large */
    min-width: 150px; /* Ensure the image doesn't get too small */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Match the container's rounded corners */
    object-fit: cover; /* Ensure the image fills the area without distortion */
}

/* Banner Content Styles */
.ba-banner-content {
    flex: 1; /* Content takes the remaining space */
    text-align: left; /* Align text to the left */
    font-family: Arial, sans-serif; /* Clean and modern font */
    color: #333; /* Neutral text color */
}

/* Banner Title */
.ba-banner-content h3 {
    margin: 0; /* Space below the title */
    font-size: 24px; /* Slightly larger font size for emphasis */
    color: #222; /* Darker color for the title */
}

/* Banner Slogan */
.ba-banner-content p {
    margin: 0 0 10px; /* Space below the slogan */
    margin-bottom:10px !important;
    font-size: 16px; /* Standard font size for readability */
    color: #555; /* Slightly lighter color for the slogan */
}

/* Banner USPs (List) */
.ba-banner-content ul {
    list-style: none; /* Remove default list styles */
    padding: 0;
    margin: 0 0 10px; /* Space below the list */
}

.ba-banner-content ul li {
    position: relative;
    padding-left: 18px; /* Space for the icon */
    margin-bottom: 5px; /* Space between list items */
    font-size: 14px; /* Smaller font for the USPs */
    color: #444; /* Neutral text color */
}

.ba-banner-content ul li::before {
    content: '✔'; /* Add a checkmark icon */
    position: absolute;
    left: 0;
    color: #4CAF50; /* Green for positive association */
    font-weight: bold;
}

/* Banner Button */
.ba-banner-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF; /* Bright blue for visibility */
    color: #fff; /* White text for contrast */
    font-size: 14px;
    font-weight: bold;   
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    margin-top:5px;
    transition: background-color 0.3s ease;
}

.ba-banner-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    color:#fff !important;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .ba-banner-container {
        flex-direction: column; /* Stack items vertically */
        text-align: center; /* Center align content */
        gap: 15px; /* Reduce gap for mobile */
    }

    .ba-banner-container img {
        width: 100%; /* Full width for mobile */
        max-width: 100%; /* Allow natural scaling */
    }

    .ba-banner-content {
        text-align: center; /* Center align content on mobile */
    }
}