.visionmission-modal_content {        
    border-radius: 16px !important; 
    background-color: #7B983B !important;
    opacity: 1 !important; 
    padding: 10px 30px 30px 30px !important;
    overflow: auto; 
}


/* Assign a specific class to the unordered list you want to modify */
.visionmission-list-image {
  /* 1. Remove the default bullet */
  list-style-type: none; 
  /* CRUCIAL: Ensure enough space is reserved for the bullet */
  padding-left: 30px;
}

/* Assign a specific class to the unordered list you want to modify */
.visionmission-list-image {
    /* 1. Remove the default bullet */
    list-style-type: none; 
    /* CRUCIAL: Ensure enough space is reserved for the bullet */
    padding-left: 30px;
}

/* Optional: Fallback for browsers that don't load the image */
.visionmission-list-image li {
  position: relative;
  padding-left: 40px !important; /* Adds a bit of space between a fallback bullet and text */
}
.visionmission-list-image li::before {
    /* 4. Define the content (the custom bullet) */
    content: ""; /* Must be defined, but empty */
    
    /* 5. Set the image as a background */
    background-image: url('../../../images/homepage/visionmission/bullet.png');
    
    /* 6. CRUCIAL: Set the fixed size */
    height: 22px; /* <-- Fixed height */
    width: 22px; /* <-- Fixed width */
    
    /* 7. Positioning */
    position: absolute;
    left: 10px; /* Align to the left edge of the list item */
    top: 50%; /* Start at the vertical center of the list item */
    transform: translateY(-50%); /* Shift up by half its height to perfect the vertical center */
    
    /* 8. Ensure the background image fits the new size */
    background-size: contain; /* Scales the image down to fit the 22x22 box */
    background-repeat: no-repeat;

    z-index: 10; /* Ensure it's on top */
    display: block; /* Ensure it behaves like a block element */
}

/* Optional: Fallback for browsers that don't load the image */
.visionmission-list-image li {
  padding-left: 5px; /* Adds a bit of space between a fallback bullet and text */
}

/* Hover Effect */
.visionmission-list-image li:hover {
  color: #e02121; /* Turns the font red on hover */
}

/* Optional: Make the custom bullet red on hover too */
.visionmission-list-image li:hover::before {
  color: #e02121;
}

/* Target the anchor tag inside the list item */
.visionmission-list-image li a {
  text-decoration: none; /* Removes the underline */
  color: inherit;        /* Ensures the link inherits the text color from the parent <li> */
}

/* Ensure the hover effect still works on the link text */
.visionmission-list-image li:hover a {
  color: e02121; /* Link text turns red when the LI is hovered */
}

.modal_visionmission_title {  
  font-size: 3rem;
}

.modal_visionmission_text {
  font-size: 1.2em; line-height: 1.6; color: #3e4a2f"
}

.visionmission-verse-ref {  
  font-size: 2rem;
}
.visionmission-verse-num {
  color: white; 
  /* Raises the text to the superscript position */
  vertical-align: super;
  /* Makes the number smaller */
  font-size: 0.7em; /* You can adjust this value (e.g., 60% or 75%) */
  /* Ensures the number is slightly bold to stand out against the smaller size */
  font-weight: bold;
}



.biblicalfoundation-corner-radius {
  border-radius: 15px 15px 15px 0px;
  background-color: #1C489F;
  background-image: url(../../../images/homepage/visionmission/sun-stars-yellow.png); 
  background-repeat: no-repeat; 
  background-position: bottom left;
}

/* Medium Resolution ad smaller */
@media (max-width: 991.98px) { 
    .modal_visionmission_title {
        font-size: 1.3rem; /*2rem;*/
    }

    .ministryconvergence-subtitle {
        font-size: 1.1rem;
    }

    .modal_visionmission_text {
        font-size: 0.7rem; /*1.5rem;*/
    }

    .visionmission-verse-ref {
        font-size: 0.7rem; /*1.5rem;*/
    }

    .ministryconvergence-modal-content .modal-body ul li {
        font-size: 0.7rem; 
    }

    .biblicalfoundation-corner-radius {
      background-size: 150px auto;
      /* This applies the 15px radius to the bottom-left corner on mobile */
      border-radius: 15px !important;
      background-clip: padding-box;
    }
}