:root {
	--feedback-color: #6F6F6F;
}

.grid-container {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(4, 300px);
	grid-template-rows: repeat(2, 377px);
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 1400px;
}

.card {
	width: 300px;
	height: 377px;
	background-color: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.image-placeholder {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 18px;
	font-weight: 500;
	position: relative;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.placeholder-text {
	position: relative;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.85);
	padding: 8px 16px;
	border-radius: 4px;
}

@media (max-width: 1400px) {
	.grid-container {
		grid-template-columns: repeat(3, 300px);
		grid-template-rows: repeat(3, 377px);
	}
}

@media (max-width: 1100px) {
	.grid-container {
		grid-template-columns: repeat(2, 300px);
		grid-template-rows: repeat(4, 377px);
	}
}

@media (max-width: 700px) {
	.grid-container {
		grid-template-columns: 300px;
		grid-template-rows: repeat(8, auto);
		/* grid-auto-rows: 0;  */
	}
}


.zoom-btn {
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 50px;
	height: 50px;
	background-color: rgba(255, 255, 255, 1);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 10;
}

.zoom-btn:hover {
	transform: scale(1.1);
}

.zoom-btn svg {
	width: 18px;
	height: 18px;
}


.popup-overlay_certificates {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(12px);
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

.popup-container {
	position: relative;
	width: 90%;
    height: 90%;
	/* max-width: 70%;
	max-height: 70%; */
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

.popup-close {
	background: white;
	position: absolute;
    top: 1%;
    right: 2%;
	width: 50px;
	height: 50px;
	/* background: transparent; */
	border: 2px solid rgb(0, 0, 0);
	color: rgb(10, 10, 10);
	font-size: 36px;
	font-weight: 300;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
	z-index: 1000;
}


.popup-close:hover {
	background-color: rgb(138, 138, 138);
	color: black;
}

@media (max-width: 768px) {
	.popup-container {
		max-width: 95%;
	}
}

.swiper-wrapper{
	position: relative;
}

.swiper {
	position: relative;
    width: 100%;
    height: 100%;
}

.swiper-slide{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiper-slide img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}


.swiper-button-next, 
.swiper-container-rtl .swiper-button-prev {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"><path d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" fill="orange"/></svg>') !important;
}

.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"><path d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22z" fill="orange"/></svg>')  !important;
}

.swiper-pagination-bullet-active{
	background: #FFAA00 !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets{
	bottom: -30px !important;
}


@media (min-width: 1100px) {
	.swiper-button-next {
		right: calc(50% - 540px) !important;
	}

	.swiper-button-prev {
		left: calc(50% - 540px) !important;
	}
}