/* Container for the whole section */
.elementor-widget-nb-product-grid .nb-product-grid-section {
    /* These properties make it act like a .container */
    width: 100%;
    max-width: 1200px; /* Standard container width */
    margin-left: auto;
    margin-right: auto;
    padding: 80px 15px; /* 80px top/bottom, 15px left/right for gutters */
    box-sizing: border-box; /* Ensures padding is included in width */
}

/* This is the h1 title for the section */
.elementor-widget-nb-product-grid h1.nb-product-grid-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    color: #1A124C;
    font-size: 2.5rem;
    line-height: 1.3;
    max-width: 700px;
    
    /* These two lines are what center it */
    text-align: center; /* Centers the text inside the block */
    margin: 0 auto 20px auto; /* Centers the block itself */
}

/* This is the p description for the section */
.elementor-widget-nb-product-grid .nb-product-grid-description {
    font-family: 'IBM Plex Sans', sans-serif;
    color: #1A124C;
    /*font-size: 1.2rem;*/
    line-height: 1.7;
    max-width: 800px;
    
    /* These two lines are what center it */
    text-align: center; /* Centers the text inside the block */
    margin: 0 auto 40px auto; /* Centers the block itself */
}

/*
 * Styles for Product Grid
 */

.elementor-widget-nb-product-grid .product-grid {
	display: grid;
	gap: 20px;
    /* grid-template-columns is set by the Elementor control */
}

.elementor-widget-nb-product-grid .product-card {
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.elementor-widget-nb-product-grid .product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}

.elementor-widget-nb-product-grid .product-card-image {
	height: 200px;
	background-size: cover;
	background-position: center;
	background-color: #fff;
}

.elementor-widget-nb-product-grid .product-card h4 {
	color: #0d1b3f;
	margin: 0;
	padding: 15px 10px;
	background: #DBDBDD;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: 'IBM Plex Sans', sans-serif;
	text-transform: uppercase;
}

/*
 * Responsive Media Queries for Grid
 */

/* Tablet - 2 columns */
@media (max-width: 1024px) {
	.elementor-widget-nb-product-grid .product-grid {
		/* We use !important to override Elementor's inline style */
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Mobile - 1 column */
@media (max-width: 767px) {
	.elementor-widget-nb-product-grid .product-grid {
		grid-template-columns: 1fr !important;
	}
}