/* =========================================
   1. FIX THE TOP BANNER (Black Background, White Text)
   ========================================= */
/* Targets the specific outer div holding the main heading */
.main-content > div.bg-light.text-center {
    background-color: #000000 !important;
    border: none !important;
}

/* Forces the heading and paragraph inside it to be white */
.main-content > div.bg-light.text-center h1,
.main-content > div.bg-light.text-center p {
    color: #ffffff !important;
}

/* =========================================
   2. FIX THE SELECTED PLAN ROW (Blue Highlight, White Text)
   ========================================= */
/* Turns the selected DIV row blue based on the radio button being checked */
div.plan-row:has(input[type="radio"]:checked) {
    background-color: #0056b3 !important; 
}

/* Strips away the injected white/light backgrounds from the columns inside 
   the selected row and forces all text to be white */
div.plan-row:has(input[type="radio"]:checked) * {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* (Optional) Prevents the radio button dot from disappearing */
input[type="radio"]:checked {
    background-color: transparent !important;
}

/* Replace the image URL with the actual path to your asset */
.main-content > div.bg-light.text-center {
    background-image: url('https://ecomdevtech.com/images/hostingimg.jpg') !important;
    background-size: cover !important;       /* Ensures the image covers the whole box */
    background-position: center !important;  /* Keeps the image centered */
    background-repeat: no-repeat !important; /* Prevents the image from tiling */
    border: none !important;
}

/* Create the dark, rounded box behind the text */
.main-content > div.bg-light.text-center > div.col-md-5 {
    background-color: rgba(0, 0, 0, 0.8) !important; /* 80% opaque black */
    border-radius: 15px !important;                  /* Smooth rounded corners */
    padding: 2rem 1.5rem !important;                 /* Breathing room inside the box */
    
    /* Optional: Add a subtle shadow to lift the box off the background image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; 
}