/*Saerch Page*/
.course-header{padding: 70px 0 40px 0; display:flex; flex-direction: column; gap:30px; position: relative; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50%; right: 50%; margin-left: -50vw; 
	margin-right: -50vw; overflow: hidden;}
.course-header::before{content: ""; height:1800px; width: 1800px; background: #f0f8fa; border-radius: 100%; position: absolute; top: -1425px; left: calc(50%);
	transform: translateX(-50%); z-index: -1;}
.course-header > div{}
.course-header > div > div:first-child{text-align: center; width: 100%;}

.course-search-bar{background: #BE0177; border: 1px solid #8E055B; padding: 30px 50px; border-radius: 5px; display: flex; gap:20px;}
.course-search-bar form{display: flex; width: calc(50% - 10px);}
.course-search-bar form > div{width: 100%; display: flex; flex-direction: column; gap:5px;}
.course-search-bar form > div > div{width: 100%; display: flex; align-content: center;}
.course-search-bar label{color: #fff; padding: 0; margin: 0;}
.course-search-bar input{height: 60px; width: calc(100% - 60px); padding: 0 15px; border-radius: 5px 0 0 5px; border: 0; outline: none;}
.course-search-bar input::placeholder{color: inherit; font-style: italic;}
.course-search-bar button{height: 60px; width: 60px; background: url(../images/search.svg) center no-repeat #097C93; border: 0; outline: none; padding: 0;
	border-radius: 0 5px 5px 0;}

.course-search-bar select{height: 60px; border-radius: 5px; text-indent: 15px;}

.course-list{display: flex; gap:30px; flex-wrap: wrap;}

.course-pagination{display: flex; margin: 20px 0;}
.course-pagination ul{list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap:15px; justify-content: center; width: 100%;}
.course-pagination ul li{list-style: none; padding: 0; margin: 0;}
.course-pagination ul li a{color: #000; font-size: 1rem;}
.course-pagination ul li span.current{color: #BE0177; font-size: 1.125rem}

/*Block*/
.course-block{height: auto; width: calc(50% - 15px); display: flex; flex-direction: column; gap:15px; border: 1px solid #C3C3C3; 
	color: var(--text-colour); padding: 20px 25px;}
.course-block .cb-image{height: 285px; width: 100%; background-size:cover; background-repeat:no-repeat; background-position:center; 
	flex-shrink: 0; background-color: #e1e1e1;}
.course-block .cb-info{display: flex; flex-direction: column; gap:10px; flex-grow: 1;}
.course-block .cb-title{font-family: var(--secondary-font); font-weight: 600; font-size: 2rem;}
.course-block .cb-description{max-height: 100px; color: #0D3E48; overflow:hidden; }
.course-block .cb-details{display: flex; flex-direction: column; gap:10px; padding: 15px; border: 1px solid #E2ECED; background: #F1F8F9;}
.course-block .cb-footer{display: flex; justify-content: space-between; margin-top: auto; align-items: center; padding: 20px 0 10px 0; border-top: 1px solid #E8EAEE;}
.course-block .cb-footer a{font-family: var(--secondary-font); font-weight: 600; font-size: 1.063rem; }
.course-block .view-course{display: flex; align-items: center; gap: 10px; color: var(--text-colour);}
.course-block .view-course::after{content: ""; height: 8px; width: 8px; transform: rotate(45deg); border: solid #097C93; border-width: 3px 3px 0 0;}
.course-block .register-course{color:#fff; background: #097C93; padding: 10px 20px;}

/*Details Page*/
.course-details-page{padding:20px 0 40px 0; display: flex; flex-direction: column; gap:15px;}
.course-details-header{display: flex; gap:30px; padding: 30px; background: #fff; border: 1px solid #E5E5E5; width: 100%; border-radius: 10px;}
.course-image{height: 380px; max-width: 440px; flex-shrink: 0;}
.course-details{display: flex; flex-direction: column; gap:10px; flex-grow: 1;}
.course-title{margin: 0; font-size: 2rem; font-weight: 600; color: var(--text-colour);}
.course-short-description{font-size: 1rem; color: #101010;}
.course-start-date{display: flex; flex-direction: column; padding: 10px 20px; border-radius: 5px; background: var(--secondary-colour); width: 100%;
	color: #fff;}
.course-start-date strong{font-weight: 600; font-family: var(--secondary-font);}
.course-info{padding: 15px 20px; border: 1px solid #CDE3E6; background: #F1F8F9; border-radius: 5px; display: flex; flex-direction: column; 
	gap:10px; color: var(--text-colour); font-family: var(--secondary-font);}
.course-info span{font-weight: 600;  font-size: 1.188rem;}
.course-info > div{display: flex; gap:10px;}
.course-info > div > div{width: 50%;}
.course-register{display: flex;}
.course-register a{padding: 20px 25px; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 10px; background: var(--fourth-colour);}
.course-register a:hover{color: #fff;}
.course-register a::after{content:""; height: 8px; width: 8px; border: solid #fff; border-width:2px 2px 0 0; transform: rotate(45deg);}

.course-description{padding: 30px; border-radius: 10px; background: #fff; border: 1px solid #E5E5E5; display: flex; flex-direction: column; gap:15px;}
.course-description h2{margin: 0; color: var(--text-colour); font-size: 2rem; font-weight: 600;}
.course-description p{padding: 0; margin: 0; font-size: 1rem; color: var(--text-colour);}

/*Course Module*/
.course-module{padding: 20px 0;}
.course-module > div{display: flex; gap:30px; flex-wrap:wrap; padding: 0;}

@media (min-width:992px) and (max-width:1199px) {
	
	/*Details Page*/
	.course-info > div{flex-direction: column;}
	.course-info > div > div{width: 100%;}

}


@media (min-width:768px) and (max-width:991px) {

	/*Search Page*/
	.course-list{gap:10px;}

	/*Course Block*/
	.course-block{width: calc(50% - 5px); padding: 15px;}
	.course-block .cb-image{height: 230px;}
	.course-block .cb-title{font-size: 1.5rem;}
	.course-block .cb-description{font-size: 1rem;}
	.course-block .cb-details, .course-block .cb-footer a{font-size: 0.875rem;}
	.course-block .view-course{gap:5px;}
	.course-block .register-course{padding: 10px;}

	/*Details Page*/
	.course-details-header{padding: 15px; gap:15px;}
	.course-image{height: 250px; max-width: 250px;}
	.course-info > div{flex-direction: column;}
	.course-info > div > div{width: 100%;}
	.course-description{padding: 15px;}

	/*Course Module*/
    .course-module > div{gap:10px;}
	.course-block .cb-details{padding: 10px 5px;}

}

@media (max-width:767px) {

	/*Search Page*/
	.course-header{padding: 30px 0;}
	.course-header::before {top: -1500px;}
	.course-header h1{font-size: 1.5rem;}
	.course-header p{font-size: 0.875rem;}
	.course-search-bar{padding: 30px 10px; gap:10px; flex-direction: column;}
	.course-search-bar form{width: 100%;}
	.course-search-bar label{font-size: 0.875rem;}
	.course-search-bar input{height: 50px; width: calc(100% - 50px);}
	.course-search-bar button{height: 50px; width: 50px;}
	.course-search-bar select{height: 50px;}

	.course-list{ flex-direction:column; gap:20px; }

	/*Course Block*/
	.course-block{width: 100%; padding: 10px;}
	.course-block .cb-image{height: 200px;}
	.course-block .cb-title{font-size: 1.25rem;}
	.course-block .cb-details{font-size: 0.75rem;}
	.course-block .cb-footer{flex-direction: column; gap:5px; border: 0; padding: 0;}
	.course-block .cb-footer a{width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; height: 50px;}
	.course-block .cb-footer a.view-course{padding: 10px; border: 1px solid #097C93;}

	/*Details Page*/
	.course-details-page{padding: 15px 0;}
	.course-details-header{flex-direction: column;}
	.course-image{width: 100%; height: auto; max-width: 100%; display: flex; justify-content: center; }
	.course-details-header{padding:10px; gap:10px;}
	.course-title{font-size:1.25rem;}
	.course-start-date {padding: 10px;}
	.course-info{padding: 10px; font-size:0.875rem; }
	.course-info span{font-size: 1rem;}
	.course-info > div {flex-direction: column;}
	.course-info > div > div{width: 100%;}
	.course-register a{width: 100%; background: var(--secondary-colour);justify-content: center;}
	.course-description{padding: 10px; gap:10px;}
	.course-description h2{font-size: 1.25rem;}
	.course-description p{font-size: 0.875rem;}

	/*Course Module*/
    .course-module > div{flex-direction: column; gap: 20px;}
	.course-block .cb-details{padding: 10px 5px;}
    

}