.ast-blog-featured-section {
	width: 250px;
	margin-right: 10px;
}

.entry-content a, .entry-meta a {
	color: #4169e1 !important;
	font-weight: bold;
}

body {
            background-color: #e3f0c7;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
    grid-template-rows: auto;
    gap: 15px;
    align-items: start;
    justify-items: center;

    margin: auto;
}

/* Grid Items */
.about {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.about-us {
	    background-color: #AFCBC6;
	margin:0;
	padding:0;
}

.card {
    position: relative; /* Needed for absolute positioning of plus icon */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    min-height: 150px;
}


/* Clickable Plus Sign */
.plus-icon {
    position: absolute;
    top: 10px;  /* Position near the top */
    right: 10px; /* Position near the right */
    background-color: white; /* Background color */
    color: black; /* Text color */
    font-size: 20px; /* Size of the plus sign */
    font-weight: bold;
    width: 25px; /* Circle size */
    height: 25px; /* Circle size */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Makes it a perfect circle */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Light shadow */
    cursor: pointer; /* Show pointer on hover */
    text-decoration: none; /* Remove underline */
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Add the plus sign using ::before */
.plus-icon::before {
    content: "+"; /* The plus symbol */
    font-size: 18px;
    font-weight: bold;
}

/* Hover effect */
.plus-icon:hover {
    background-color: #FFD700; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge */
}



.meetings { background-color: #fdf3dd; grid-column: 2 / 3; }
.charity { background-color: #e9b149; grid-column: 3 / 4; }
.books { background-color: #fdf3dd; grid-column: 4 / 5; }
.donations { background-color: #ef601e; grid-column: 2 / 3; grid-row: 2 / 3; }
.kids-youth { background-color: #fdf3dd; grid-column: 3 / 4; grid-row: 2 / 3; }
.extra-box {
	background-color: #C2D9F0; grid-column: 4 / 5; 
	grid-row: 2 / 4;}

/* Tablet (2 Columns) */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about {
        grid-column: 1 / span 2; /* Take up both columns */
        grid-row: auto;
    }
}

/* Mobile (1 Column) */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Stack elements vertically */
    }
    
    .about {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}


.bg-sky {
	color: #00000d;
	padding: 20px;
	padding-top: 10px;
	background-image: url(https://vibrantsouls.sssandiego.org/wp-content/uploads/2025/03/bg-message-sky-1.jpg);
}

.frontpage-square {
	width: 100%;
}

.grayscale100 {
	-webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}