/* Define the grid container */
.px-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 12-column grid system */
	gap: 10px; /* Adjust gap between columns */
	width: 100%;
	box-sizing: border-box;
}

/* Define classes for column spans */
.px-col-1 { grid-column: span 1; }
.px-col-2 { grid-column: span 2; }
.px-col-3 { grid-column: span 3; }
.px-col-4 { grid-column: span 4; }
.px-col-5 { grid-column: span 5; }
.px-col-6 { grid-column: span 6; }
.px-col-7 { grid-column: span 7; }
.px-col-8 { grid-column: span 8; }
.px-col-9 { grid-column: span 9; }
.px-col-10 { grid-column: span 10; }
.px-col-11 { grid-column: span 11; }
.px-col-12 { grid-column: span 12; }

/* Add some basic styling for columns */
.px-column {
	background-color: none;
	padding: 20px;
	text-align: left;
	border: none;
}

.px-column:first-child {
padding-left: 0px;
}
.px-column:last-child {
	padding-right: 0px;
	}

/* Media query for mobile devices */
@media (max-width: 768px) {
	.px-container {
					grid-template-columns: 1fr; /* Single column layout */
	}
	.px-column {
					grid-column: span 12; /* Full width for all columns */
	}

	/* Reorder classes */
	.px-order-first {
		order: -1; /* Move to the first position */
	}
}


.green-text{
	color: rgb(32, 156, 32) !important;
}

.bold-text{
	font-weight: bold !important;
}

.large-text{
	font-size: 18pt;;
}

.green-promo{
	background-color     : #18561de1;
	padding-top          : 40px !important;
	color                : #fff;
	margin-bottom        : 40px;

	
 background     : linear-gradient(0deg, rgb(58 119 84 / 73%), rgb(37 97 37 / 69%)), url(../images/background/vecteezy-1.jpg);
 background-size: cover;
}

.green-promo *:not(.default-color){
	color           : #fff !important;
}

.px-border-box{
	height:400px;
}

  /* Media query for mobile devices */
@media (max-width: 768px) {
	.px-border-box{
		height:auto;
	}
}

.green-border-box{

	border    : 2px solid #b4b4b4;
	padding   : 20px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 72%, rgba(232,232,232,1) 100%);
	border-radius: 20px;
}

.golden-border-box{

	border    : 2px solid #cccc56;
	padding   : 20px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 72%, rgba(245,239,150,1) 100%);
	border-radius: 20px;
}

.platinum-border-box{

	border    : 2px solid #e6ceb2;
	padding   : 20px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 72%, rgba(255,237,220,1) 100%);
	border-radius: 20px;
}

.px-image-container {
	position: relative;
	width: 100%;
	height: 300px;
}

.px-stylized-image {
	width: 80%;
	margin-left: 10%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, filter 0.3s ease;
	z-index: 2;
	position: absolute;
}

/* Background green square */
.px-background-square {
	position: absolute;
	top: 34px;
	left: 50%;
	width: 90%;
	height: 100px;
	background-color: rgb(32, 156, 32);
	opacity: 0.7;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}

/* Hover effect */
.px-image-container:hover .px-stylized-image {
	transform: scale(1.1); /* Zoom in image on hover */
	filter: brightness(1.1) contrast(1.2); /* Brightness and contrast adjustment */
}

.px-image-container:hover .px-background-square {
	transform: translate(-50%, -50%) scale(0.9); /* Zoom out background square on hover */
}


.donation {
	background-image: url('http://www.arunispiritualliving.com/images/statue1.jpg') !important;
	background-repeat: no-repeat;
	background-position: center center;
}