<div class="container-fluid" style="padding: 0">
	<div class="container" style="padding: 0">
		<h3 class="text-center btn-block " style="background-color:#F3920F;color: #fff;padding: 10px 0 3px;margin: 0;border-radius: 5px;text-transform: uppercase;">
			<i> </i> :
			<small> Mali-Mart official Video Trainings</small>
		</h3>

		<div class="row" style="padding: 0">

			<br>
			<br>
			<br>
			<?php
			if ($trainings) {
				foreach ($trainings as $key => $training) {
			?>
					<div class="col-lg-6">
						<div class="text-left frameBody">
							<h3> Title : <?= $training->title ?></h3>
							<p> Description : <?= $training->description ?></p>
							<div class="iFrame">
								<iframe width="727" height="409" src="<?= $training->embed_link ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
								</iframe>
							</div>
						</div>
					</div>
			<?php
				}
			}
			?>

		</div>

	</div>
	<br>
	<br>
</div>



<style>
	.frameBody {
		margin-top: 10px;
		overflow: hidden;
		padding: 20px;
		border: 2px solid #FFE000;
		border-radius: 5px;
	}

	.iFrame {
		width: 100%;
		height: 250px;
		overflow: hidden;
	}

	.iFrame iframe {
		width: 100%;
		height: 100%;
	}
</style>