/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 27 2026 | 15:28:44 */
p.no-webinars {
    display: flex;
    justify-content: center;
    font-family: 'Archivo';
    font-size: 20px;
    background: #263a5a;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}

.webinars-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.webinar-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: 'Archivo';
	text-decoration: none !important;
	position: relative;
}

.webinar-card .webinar-image {
	height: 220px;
	overflow: hidden;
	border-radius: 10px;
}

.webinars-grid .webinar-card .webinar-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.webinar-card .webinar-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.webinar-card .webinar-content h3.webinar-title {
	font-family: 'Archivo';
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
	margin: 0;
}

.webinar-card .webinar-content h3.webinar-title span{
	text-decoration: none;
	color: #183354;
	display: inline;
	background-image: linear-gradient(to right, #183354 0, #183354 100%);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 2px;
	transition: background-size .80s cubic-bezier(.2, .75, .5, 1);

	
}

.webinar-card:hover .webinar-content h3.webinar-title span{
	background-size: 100% 2px;
}

.webinar-card .webinar-content .webinar-meta {
	font-size: 15px;
	font-weight: 600;
	color: #6D757F;
}

.webinar-card .webinar-content p.webinar-excerpt {
	color: #000;
	margin: 0px;
}

span.webinar-status {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100px;
    color: #fff;
    font-family: Archivo;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 14px;
    position: absolute;
    top: 10px;
    right: 10px;
}
span.webinar-status.status-upcoming {
    background: #f1c40f;
}

span.webinar-status.status-completed {
    background: #27ae60;
}


@media screen and (max-width: 1400px) {
    .webinars-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 999px) {
    .webinars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .webinars-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}