.welcome-modal-content {        
    /* height: 450px; */

    /* Apply a 16px radius to all four corners */
    border-radius: 16px !important; 
                
    /* Set the image for the overlay */
    background-image: url('../../../images/homepage/welcome_modal/bg_white.png'), 
                      url('../../../images/homepage/welcome_modal/bg_sun.png'), 
                      url('../../../images/homepage/welcome_modal/bg_green5.png');

    /* Ensure the image covers the entire screen */
    background-size: 800px, 300px, cover;
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: left bottom, left bottom, center center;

    /* NOTE: You may need to adjust or remove the default opacity */
    opacity: 1 !important; 

    /* Apply 60px padding to the top, right, bottom, and left of the whole box */
    padding: 20px 45px 60px 45px !important;

    overflow: hidden;
}

@media (max-width: 767.98px) {
  .welcome-modal-content {        
      /* background-size: 90%, 300px, cover; */
      padding: 15px 15px 15px 15px !important;
      margin: 0.5rem !important;
  }

  .welcome-modal-content .img-fluid {
      /* Pushes the image to the left edge of its container */
      float: left;
      
      /* Adds space between the image and the wrapping text */
      margin-right: 30px; 
      
      /* Optional: Adds space below the image if the text is short */
      margin-bottom: 60px; 

      /* Optional: Set a specific width for the image */
      width: auto;
      max-width: 300px; 
      height: auto;    
      max-height: 300px !important;
  }
}






.comeandsee {
    /* Set required positioning and default image */
    position: relative; 
    overflow: hidden;
    min-height: 240px; /* Moved from inline style */
    
    /* Default Background Image (Moved from inline style) */
    background-image: url('../../../images/getinvolved/comeandsee-bg.png'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.comeandsee h3 {
    position: relative; 
    z-index: 10; /* Set a high z-index to ensure visibility */
}
.comeandsee:hover h3 {
  color: #5e381a !important; 
}
.comeandsee::after {
    /* Pseudo-Element Setup (The Hover Layer) */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Apply the Hover Image */
    background-image: url('../../../images/getinvolved/volunteer-bg-hover.png'); /* The new image */
    background-size: cover;
    background-position: center center;
    
    /* Control Opacity and Transition */
    opacity: 0; /* Initially hidden */
    z-index: 0; /* Placed below the text (z-index: 1) */
    
    /* Animate the opacity over 0.5 seconds */
    transition: opacity 0.5s ease-in-out;
}
.comeandsee:hover::after {
  opacity: 1; 
}

.volunteerwithus {
    /* Set required positioning and default image */
    position: relative; 
    overflow: hidden;
    min-height: 240px; /* Moved from inline style */
    
    /* Default Background Image (Moved from inline style) */
    background-image: url('../../../images/getinvolved/volunteer-bg.png'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.volunteerwithus h3 {
    position: relative; 
    z-index: 10; /* Set a high z-index to ensure visibility */
}
.volunteerwithus:hover h3 {
  color: #5e381a !important; 
}
.volunteerwithus::after {
    /* 2. Pseudo-Element Setup (The Hover Layer) */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 3. Apply the Hover Image */
    background-image: url('../../../images/getinvolved/volunteer-bg-hover.png'); /* The new image */
    background-size: cover;
    background-position: center center;
    
    /* 4. Control Opacity and Transition */
    opacity: 0; /* Initially hidden */
    z-index: 0; /* Placed below the text (z-index: 1) */
    
    /* REQUIRED: Animate the opacity over 0.5 seconds */
    transition: opacity 0.5s ease-in-out;
}
.volunteerwithus:hover::after {
  opacity: 1; 
}

.partnerwithus {
    /* Set required positioning and default image */
    position: relative; 
    overflow: hidden;
    min-height: 240px; /* Moved from inline style */
    
    /* Default Background Image (Moved from inline style) */
    background-image: url('../../../images/getinvolved/partnerthrugiving-bg.png'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.partnerwithus h3 {
    position: relative; 
    z-index: 10; /* Set a high z-index to ensure visibility */
}
.partnerwithus:hover h3 {
  color: #5e381a !important; 
}
.partnerwithus::after {
    /* 2. Pseudo-Element Setup (The Hover Layer) */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 3. Apply the Hover Image */
    background-image: url('../../../images/getinvolved/partnerthrugiving-bg-hover.png'); /* The new image */
    background-size: cover;
    background-position: center center;
    
    /* 4. Control Opacity and Transition */
    opacity: 0; /* Initially hidden */
    z-index: 0; /* Placed below the text (z-index: 1) */
    
    /* REQUIRED: Animate the opacity over 0.5 seconds */
    transition: opacity 0.5s ease-in-out;
}
.partnerwithus:hover::after {
  opacity: 1; 
}

.praywithus {
    /* Set required positioning and default image */
    position: relative; 
    overflow: hidden;
    min-height: 240px; /* Moved from inline style */
    
    /* Default Background Image (Moved from inline style) */
    background-image: url('../../../images/getinvolved/praywithus-bg.png'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.praywithus h3 {
    position: relative; 
    z-index: 10; /* Set a high z-index to ensure visibility */
}
.praywithus:hover h3 {
  color: #5e381a !important; 
}
.praywithus::after {
    /* 2. Pseudo-Element Setup (The Hover Layer) */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 3. Apply the Hover Image */
    background-image: url('../../../images/getinvolved/praywithus-bg-hover.png'); /* The new image */
    background-size: cover;
    background-position: center center;
    
    /* 4. Control Opacity and Transition */
    opacity: 0; /* Initially hidden */
    z-index: 0; /* Placed below the text (z-index: 1) */
    
    /* REQUIRED: Animate the opacity over 0.5 seconds */
    transition: opacity 0.5s ease-in-out;
}
.praywithus:hover::after {
  opacity: 1; 
}