OwlCyberSecurity - MANAGER

Edit File: _single.scss

.ova_sermon_single{
	width: 100%;
	margin-bottom: 110px; 
	@media (max-width: 1024px) {
		margin-bottom: 70px;  
	}

.sermon-media {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
		padding: 40px 70px;
	    border-radius: 20px 20px 0 0;
	    background-color: #fff;
	    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	    @media (max-width: 767px) {
	    	padding: 35px 15px;
	    }
	    .text {
	    	margin-bottom: 6px;  
	    	display: block;
	    	font-size: 14px;
	    	font-weight: 600;
	    	color: var(--heading);
	    	letter-spacing: 1.6px;
	    	text-transform: uppercase;
	    }
	    .download-wrapper {
	    	text-align: right;
	    }
	    .sermon-watch, .sermon-download {
	    	display: inline-flex;
	    	justify-content: center;
	    	align-items: center;
	    	flex-wrap: wrap;
	    	gap: 12px;
			@media (max-width:767px){
				gap: 6px;
			}
	    }
	    .item-media {
	    	transition: all .3s ease;
	    	display: inline-flex;
	    	justify-content: center;
	    	align-items: center;
	    	width: 44px;
	    	height: 44px;
	    	border-radius: 3px;
	    	background-color: var(--primary); 
	    	cursor: pointer;
	    	&.audio {
	    		background-color: #1237A5;
	    	}
	    	&.document {
	    		background-color: #E2BD65;
	    	}
	    	&:hover {
	    		transition: all .3s ease;
	    		background-color: var(--heading);
	    	}
	    	i {
	    		display: inline-flex;
	    		color: #fff;
	    	}
	    }
	}

.sermon-feature-img {
    	position: relative;
    	overflow: hidden;
    	margin-bottom: 65px;
    	@media (max-width: 1024px) {
    		margin-bottom: 35px;
    	}
		img {
			display: block;
			width: 100%; 
			max-height: 600px;
			min-height: 280px;
			border-radius: 0 0 20px 20px;
			object-fit: cover;
		}		
	}

.info{
		display: grid;
		grid-template-columns: 0.3fr 0.7fr;
		grid-column-gap: 70px;
		@media (max-width: 1024px) {
			grid-template-columns: auto;
		}

.summary_info{
			position: relative;
			margin: 0 0 45px 0;
			padding: 50px 40px 45px 40px;
			background: #fff;
			border-bottom: 2px solid #1237A5;
		    border-radius: 15px 15px 4px 4px;
			box-shadow: 0px 19px 20px 0px rgba(72, 72, 72, 0.06);
			height: fit-content;
			@media (max-width: 767px) {
				padding: 40px 30px;
			}

.top-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 15px;
				margin-bottom: 15px;  
				.calendar {
					i {
						display: inline-flex;
						font-size: 16px;
						line-height: 1;
						color: var(--heading);
						padding: 10px 18px;
						background-color: #E2BD65;
					}
					.start-date {
						line-height: 1;
						color: #fff;
						padding: 10px 14px;
						background-color: #1237A5;
					}
				}
			}
			.title {
				margin: 0;
				font-family: var(--primary-font);
				font-size: 26px;
				line-height: 1.4;
				font-weight: 500;
				max-width: 85%;
			}

.info-contact {
				margin: 35px 0 0 0;
				padding: 30px 0 0 0;
				list-style-type: none;
				border-top: 1px solid #efefef;
				li {
					display: flex;
					gap: 5px;
					align-items: baseline;
		    		flex-wrap: wrap;
		    		&:not(:last-child) {
		    			margin-bottom: 14px;
		    		}
				}
				.label {
					display: block;
					font-size: 16px;
					color: var(--heading);
					font-weight: 500;
					line-height: 1.2;
					margin-bottom: 4px;
				}
				.info, a {
					display: inline-block;
					font-size: 16px;
					line-height: 1.2;
					color: var(--text);
				}
				a {
					transition: all .3s ease;
					margin-bottom: 0;
					&:hover {
						transition: all .3s ease;
						color: var(--primary);
					}
				}
			}
		}

/*Main Content*/
		.main_content {
			.title {
				margin: 35px 0;
                font-size: 45px;
                line-height: 1.3; 
                color: var(--heading); 
                @media (max-width: 767px) {
                	font-size: 35px;
                }
			}
		}

}			
	
}