.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_sun.png'), 
                      url('../../../images/homepage/welcome_modal/bg_green4.png');

    /* Ensure the image covers the entire screen */
    background-size: 300px, cover;
    background-repeat: no-repeat, repeat;
    background-position: 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: 10px 90px 60px 45px !important;

    overflow: hidden;
}

.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;
}



.welcome-modal-header {
    /* Set alignment to the start (left) */
    justify-content: flex-start; 
}
/* 2. ADJUSTED: Target the parent close button using your custom header class */
.welcome-modal-header .close {
    /* Set display properties for the button itself */
    display: flex; /* Helps ensure correct alignment of the span */
    align-items: left; 
    justify-content: left;

    /* Push the button to the left edge of the flex container */
    margin-right: auto; 
    margin-left: 0; 

    /* Remove default Bootstrap/AdminLTE styling that adds size/padding */
    padding: 0 !important; 
    line-height: 1; 
    
    /* Optionally define a fixed size for the clickable area */
    width: 36px; 
    height: 36px; 
}

/* 1. Target the icon element inside the close button */
.welcome-modal-header .close span[aria-hidden="true"] {
    /* Hide the default 'x' character */
    color: transparent !important; 
    font-size: 0 !important; 
    line-height: 0 !important; 

    opacity: 1; 
    
    /* Make the span a block/inline-block element and size it for the image */
    display: block; 
    width: 36px;   /* Set desired size for your image */
    height: 36px;  /* Set desired size for your image */
    
    /* Apply the custom image */
    background-image: url('../../../images/homepage/welcome_modal/close.png');

    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}






/* Connect With Us - Custom CSS to enable Full-Screen Modals for AdminLTE */

/* Makes the modal-dialog take full viewport width and height */
.modal-full-width,
.modal-full-height {
  margin: 0;
  width: 100vw; /* Full Viewport Width */
  max-width: none;
  height: 100vh; /* Full Viewport Height */
}

/* Ensures the modal-content fills the modal-dialog */
.modal-full-height .modal-content {
  height: 100%;
}

/* Optional: Adjust modal-body to scroll if content overflows */
.modal-full-height .modal-body {
  overflow-y: auto;
}







.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; 
}