.--marginbottom {margin-bottom: 5em;}

.card {
	position: relative;
	background: transparent;
	border-radius: 20px;
}

.card .card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 30px;
	position: relative;
	z-index: 100;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
}

/* video cooking */
section .card .video {
	border-radius: 30px;
	width: 100%;
}

section .card .video video {
	transition: 0.3s;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

.video:hover video {
	transform: scale(1);
	transform-origin: center;
}

.card .video::before {
	content: "";
	position: absolute;
	height: 35vw;
	max-height: 45vh;
	width: 85%;
	background-position: center;
	background-size: cover;
	border-radius: 30px;
	transition: 300ms;
}

.video:hover:before {opacity: 0;}

/* test */
section#recipes .card .video {
	border-radius: 30px;
	background-color: #000000;
	background-position: center;
	background-size: cover;
}
 
section#recipes .card .video video {
	transition: all 0.3s ease-in-out;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
	opacity: 0;
 }
 
section#recipes .card .video:hover video {opacity: 1;}
/* test */


/* video cooking */
.card .name-profession {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	color: #fff;
}

.name-profession .name {
	font-size: 2rem;
	font-weight: 600;
	text-transform: capitalize;
}

.name-profession .surName {
	font-size: 0.75rem;
	height: 4rem;
}

.card .vdo-button {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 10px 0; 
	/* 27-11-24 */
	display: none;
}

.vdo-button button {
	font-size: 1rem;
	font-weight: 600;
	color: white;
	border-radius: 13px;
	background-color: black;
	padding: 0.5rem 1rem;
	transition: all 0.3s ease-in-out;
}

.vdo-button button:hover {
	border: none;
	background-color: #d3b26b;
	color: black;
}

.card .pd-related {
	display: flex;
	width: 100%;
	flex-direction: column;
}

.pd-related span.related {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.pd-related .pd-rela-ul {display: flex;}

.pd-rela-ul .pd-rela-li {width: 100%;}

.card .rating {
	display: flex;
	align-items: center;
	margin-top: 18px;
}

.card .rating i {
	font-size: 18px;
	margin: 0 2px;
	color: #192459;
}

.card .button {
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
}

.card .button button {
	background: #192459;
	outline: none;
	border: none;
	color: #fff;
	padding: 8px 22px;
	border-radius: 20px;
	font-size: 14px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.button button:hover {background: #192459;}

.swiper-pagination {position: absolute;}

.swiper-pagination-bullet {
	height: 7px;
	width: 26px;
	border-radius: 25px;
	background: #192459;
}

.swiper-button-next,
.swiper-button-prev {
	opacity: 0.7;
	color: #ffffff;
	transition: all 0.3s ease;
	margin: 0 10vw;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
	opacity: 1;
	color: #192459;
}

.sec_pd_related {
	width: 100%;
	display: flex;
	/* 27-11-24 */
	display: none;
}

.img_related {box-shadow: 40px 0 0 -38px;}

.--pd-relate {width: 5em;}


@media screen and (max-width: 1440px) {
	.tabs-in-book-and-vdo.tabs-in-book-and-vdo {padding-top: 5rem;}
	.swiper-button-next,
	.swiper-button-prev {
		margin: 0;
	}

	.swiper-button-next {right: 3vw;}

	.swiper-button-prev {left: 3vw;}

	.name-profession .surName {
		min-height: 5rem;
		height: fit-content;
	}

	.card .card-content {padding: 0 15px;}
}

@media screen and (max-width: 1280px) {
	.name-profession .name {font-size: 1.5rem;}

	.name-profession .surName {
		opacity: 0;
		transition: all 0.6s ease;
	}

	.swiper-backface-hidden .swiper-slide:hover .surName {opacity: 1;}
}

@media screen and (max-width: 1024px) {
	.name-profession .surName {font-size: 1rem;}
}

@media screen and (max-width: 960px) {
	.swiper {width: 750px;}
}

@media screen and (max-width: 768px) {
	.swiper {width: 520px;}
}

@media screen and (max-width: 640px) {
	.swiper {width: 280px;}
}

@media (max-height: 600px) {
	.--marginbottom {margin-bottom: 0;}
}