/* GRID */
.trusted-grid {
	display: grid;
	grid-template-columns: 424px 424px 424px;
	grid-auto-rows: minmax(200px, auto);
	gap: 24px;
	grid-template-columns: repeat(3, 424px);
	grid-template-rows: 237.5px 237.5px 234px;
}

/* CARD BASE */
.trusted-grid .card {
	padding: 24px;
	background: #141516;
	border-radius: 12px;
	border: 1px solid #1B1C1D;
	position: relative;
	z-index: 1;
	overflow: hidden;
	height: 100%;
	display: flex;
}

.ourService__card--bgimg {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
}

/* Glow */
.icon img {
    position: relative;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}

/* ICON (top-right) */
.icon {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 6px;
	background: #1B1C1D;
	filter: drop-shadow(0px 0px 14.4px #000000);
}

.content {
    position: relative;   
    width: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: auto;
}

/* TEXT */
.content h3 {
	font-size: 20px;
	line-height:28px;
	margin-bottom: 8px;
	color: var(--color-text-primary);
	line-height: 24px;
}

.content p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
}
.card.wide.top .content p {
    width: 80%;
}
/* ===== GRID POSITIONING ===== */

/* Left Tall */
.tall {
	grid-row: 1 / 3;
	grid-column: 1 / 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Top Wide */
.top {
	grid-column: 2 / 4;
	grid-row: 1;
}

/* Middle */
.mid-left {
	grid-column: 2;
	grid-row: 2;
}

.mid-right {
	grid-column: 3;
	grid-row: 2;
}

/* Bottom */
.bottom-left {
	grid-column: 1 / 3;
	grid-row: 3;
}

.bottom-right {
	grid-column: 3;
	grid-row: 3;
}

/* HOVER */
.trusted-grid .card:hover {
	transform: translateY(-5px);
	transition: 0.3s;
	border-color: rgba(255, 255, 255, 0.1);
}
@media (max-width: 1500px){
	.trusted-grid {
		display: grid;
		grid-template-columns: 1.1fr 1fr 1fr;
		grid-template-rows: 200px 250px 240px; 
		gap: 24px;
		
	}
}
@media (max-width:991px) {
	.trusted-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	/* Reset all custom positioning */
	.tall,
	.top,
	.mid-left,
	.mid-right,
	.bottom-left,
	.bottom-right {
		grid-column: auto;
		grid-row: auto;
	}

	/* Optional: better spacing */
	.trusted-grid .card {
		min-height: 180px;
	}

	.icon {
		right: auto;
        position: relative;
        top: 0;
        margin-bottom: 16px;
	}
	.content {
		position: relative;
		bottom: 0;
		left: 0;
		width: auto;
	}

	.content p br {
		display: none;
	}
}
@media (max-width: 575px) {
	.trusted-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.trusted-grid .card {
		grid-column: auto;
		grid-row: auto;
		height: auto;
		width: 100%;
		padding: 16px;
	}
	html, body {
        overflow-x: unset;
    }	
}
@media (max-width: 480px) {
	br{
		display:none;
	}
}