#courses-categories {
    padding: 0 10px;
    min-width: 295px;
}

#courses-categories ul {
    display: flex;
    align-items: center;
    flex-direction: column;
    list-style-type: none;
}

#courses-categories ul li {
    border-radius: 20px;
    margin: 10px 0;
    box-shadow: 5px 0 10px 1px #f0efef !important;
    background-color: #fff;
    min-width: 227px;
    max-width: 227px;
    position: relative;
}

#courses-categories ul li::before {
    content: "";
    width: 60%;
    position: absolute;
    z-index: -1;
    height: 105%;
    top: -5px;
    left: -15px;
    transition: 0.2s;
    border-radius: 15px;
    background-color: #f69310;
}

#cc-header-content-image {
    width: 100%;
    height: 330px;
    max-height: 330px;
    object-fit: cover;
    border-radius: 250px 0;
    border: 15px solid #f69310;
}

.cc-course-card-body {
    z-index: 1;
    background-color: #fff;
}

#courses-categories ul li .btn {
    max-width: 227px;
    min-width: 227px;
    min-height: 100%;
    padding: 8px 20px;
    border-radius: 20px;
    display: flex;
    text-align: left !important; /* Added by Syed Toheed. */
}

@media (min-width: 1200px) {
    #course-cards-row {
        max-width: 872px;
        min-width: 870px;
    }
}

#courses-categories ul li .btn:focus,
#courses-categories ul li .btn:hover {
    background-color: #f69310;
    border: 1px solid #fff;
    color: #fff;
}

#favorite-icon {
    font-size: 40px;
    color: #4e0000;
    transition: 0.4s;
}

#cc-course-cards-col {
    min-width: 285px;
    max-width: 343px;
}

#card-rating-icon {
    color: #f69310;
    font-size: 20px;
}

.add-cart-icon {
    background-color: #f69310!important;
}

.remove-cart-icon {
    background: #fbd097!important;
}

#course-card {
    border: #f0efef;
    border-radius: 20px 70px 20px 20px;
    box-shadow: 0 0 10px 2px #f0efef !important;
    transition: 0.4s !important;
    overflow: hidden;
}

#course-card-image {
    border-radius: 20px 70px 0 0;
    min-height: 150px;
    object-fit: cover;
    overflow: hidden !important;
    transition: 0.4s;
}

#course-price {
    font-size: 20px;
    font-weight: 500 !important;
}

#course-cart-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    position: absolute;
    background-color: #f69310;
    clip-path: polygon(-130% 0%, 216% 0, 50% 101%);
    border-radius: 5px;
    padding: 10px 0;
    transition: 0.4s;
}

#course-cart-icon i {
    font-size: 35px;
    margin-bottom: 14px;
}

#course-card:hover {
    box-shadow: 5px 5px 10px 0 #b3b3b3 !important;
}

#header-content {
    color: #fff;
    padding: 22px 0;
}

#collaborate-section {
    background-color: #d9d9d9;
    padding: 15px 0;
}

.client-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: grayscale(0%);
}

#collaborators-container .no-pad {
    padding: 0;
    max-height: 135px;
    max-width: 120px;
    align-items: center !important;
}

#collaborators-container .row {
    margin: 10px 0;
}

#cc-cards #cc-course-cards-col a {
    text-decoration: none;
    color: #000;
}

#cc-cards #cc-course-cards-col a .card-body h6:hover {
    text-decoration: underline;
}

#cc-cards #cc-course-cards-col a .card-body h6 {
    display: -webkit-box;
    max-width: 100%;
    min-height: 38px;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* [START] Added by S.Zonair */
#page-wrapper #page {
    padding: 0;
}

#page.drawers .main-inner {
    padding: 0;
    margin-top: 0;
}

#page-header {
    display: none;
}

#page.drawers div[role="main"] {
    padding: 0;
}
/* [END] Added by S.Zonair */

.cc-header {
    width: 100%;
    padding: 0px; /* Added by S.Zonair */
}

.header-container {
    background: url(/local/eshop/img/course-cetalog.png) center center/cover
        no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: inherit;
}

@media (min-width: 1200px) {
	#collaborators-container .no-pad img {
		max-width: 120px;
		min-height: 135px;
		max-height: 136px;
		object-fit: cover;
	}
}

@media (max-width: 1199.98px) {
	#collaborators-container .no-pad {
		padding: 0;
		max-height: 135px;
		max-width: 70px;
		align-items: center !important;
	}
}

#collaborators-container .no-pad img {
	max-height: 136px;
	object-fit: cover;
}

#cc-header-logo {
    width: 180px;
    position: absolute;
    bottom: 8%;
    left: 6%;
}

#course-cart-icon:hover {
    background-color: #920d00 !important;
    color: #fff;
}

#favorite-icon:hover {
    transform: scale(1.2);
}

#course-card:hover img {
    transform: scale(1.1);
    transition: 0.4s;
}

#header-content div:first-child,
#header-content div:nth-child(2) {
    max-width: 664px;
}

#Certificate-one-btn:hover,
#Certificate-two-btn:hover {
    background-color: #920d00 !important;
    color: #fff !important;
    letter-spacing: 1px;
    transition: 0.4s !important;
}

#Certificate-one-btn {
    background-color: #fbd097;
    color: black;
    padding: 5px 20px;
    border-radius: 55px 0px;
    border: #f0efef;
    transition: ease all .4s !important;
	padding: 5px 20px!important;
}

#Certificate-two-btn {
    background-color: black;
    border-radius: 55px 0px;
    padding: 5px 20px;
    border: #f0efef;
    transition: ease all .4s;
	padding: 5px 20px!important;
}



/* Course Card */
.add-to-cart {
	position: absolute;
}

#cc-cards #cc-course-cards-col .card-body {
    background: white;
    overflow: hidden;
    position: relative;
}

/*Heading*/
#cc-cards #course-card .card-body > a {
    display: -webkit-box;
    max-width: 100%;
    min-height: 38px;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*Image*/
#course-card-image {
    max-height: 150px;
}

/* End - Course Card */

/* Start - CSS for Sticky Sidebar */
.container > #catalog-content {
    align-items: start;
	min-width: 100%;

	#courses-categories {
		position: sticky;
		top: 65px;

		.selected {
			background-color: #f69310!important;
			border: 1px solid #fff!important;
			color: #fff!important;
		}
	}
}
/* End - CSS for Sticky Sidebar */


#course-card {
    min-height: 275px;

    .cc-cc-course-card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        a {
            min-height: initial!important;

            h6 {
                margin: 0;
            }
        }
    }
}


@media (max-width: 1080px) {

	#cd-header-row {
		display: none;
	}
}



/* Latest. */
/* Start - Course Catalog*/
#mt-categories-dropdown {
	#mt-categories-btn {
		display: flex;
		align-items: center;
		background-color: #fda430;
		border-radius: 30px 0 0 30px;
		font-weight: 600;
		font-size: 20px;
		padding: 5px 20px;

		[aria-expanded="true"]:after {
			transform: rotate(180deg);
		}

		&:after {
			transition: 0.4s;
			font-size: 20px;
			margin-top: 4px;
			width: 100%;
		}
	}

	#mt-categories-btn[aria-expanded="true"]:after {
		transform: rotate(180deg);
	}

	.dropdown-menu {
		padding-top: 20px;
		padding-left: 40px;
		padding-right: 30px;
		border-radius: 20px;
		border-color: #fff;
		box-shadow: rgba(17, 17, 26, 0.1) 0 0 16px;

		.selected {
			color: #fff !important;
			background-color: #f69310 !important;
			border: 1px solid #fff !important;
		}

		.dropdown-item {
			border-radius: 30px;
			box-shadow: 5px 0 10px 1px #f0efef !important;
			background-color: #fff;
			margin-bottom: 20px;
			padding: 5px 20px;
			border: 1px solid #fff;

			&:before {
				content: "";
				width: 50%;
				position: absolute;
				z-index: -1;
				height: 7%;
				left: 25px;
				transition: 0.2s;
				border-radius: 10px;
				background-color: #f69310;
				margin-top: -13px;
			}

			&:hover {
				background-color: #f69310 !important;
				border: 1px solid #fff !important;
				color: #fff !important;
			}
		}
	}
}

.mt-dropdown-divider {
	height: 5px;
	width: 100%;
	border-top: 2px solid #fda430;
}
/* End - Course Catalog*/

#mt-course-image {
	object-fit: cover;
	border-radius: 50%;
	max-width: 245px;
	max-height: 195px;
	margin-left: 8px;
}
#mt-expression-btn {
	border-radius: 30px 0;
	background-color: #000;
	border: #000;
	padding: 5px 30px;
	transition: 0.4s;
}
#mt-expression-btn:hover {
	background-color: #920d00 !important;
	color: #fff !important;
	letter-spacing: 1px;
	transition: 0.4s !important;
}

#course-header-details {
	display: flex;
	flex-direction: column;
	padding: 40px 0;
}
#img-corner-top-left {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 15%;
}
#mt-row {
	display: flex;
	justify-content: center;
	min-height: 100%;
}
#mt-header-lines {
	position: absolute;
	width: 92%;
	padding-top: 3px;
	min-height: 30px;
	max-height: 30px;
}
#mt-course-image {
	border: 2px solid #f69310;
	box-shadow: rgba(17, 17, 26, 0.1) 0 0 16px;
}

#t-collaborate-heading {
	font-size: x-large;
	display: flex;
	justify-content: center;
    padding-bottom: 10px;
}
#Certificate-one-btn {
	background-color: #fbd097;
	color: #000;
	padding: 5px 20px;
	border-radius: 55px 0;
	border: #f0efef;
	transition: 0.4s !important;

	&:focus {
		outline: none;
	}
}
#Certificate-two-btn {
	background-color: #000;
	border-radius: 55px 0;
	padding: 5px 20px;
	border: #f0efef;
	transition: 0.4s;

	&:focus {
		outline: none;
	}
}
#mt-course-categories {
	display: flex;
	align-items: center;
	min-width: 100%;
	position: sticky;
	top: 60px;
	z-index: 4;
	background-color: rgb(255, 255, 255, .9);
}

#mt-course-img {
	background: url("/local/eshop/img/t-coursedetails-img-background.png")!important;
	background-size: contain!important;
	background-repeat: no-repeat!important;
	background-origin: content-box!important;
	background-position: center!important;
}

#mt-course-catalog-header {
	position: relative;
	background-color: #fbd097;
	border-top: 12px solid #111235;
}

#mh-row {
	position: relative;
	background-color: #fda430;
	border-bottom: 10px solid#920d00;
	display: flex;
	justify-content: center;

	#mh-col1 {
		position: absolute;
		left: 0;

		img {
			min-width: 95px;
		}
	}

	#mh-col-2 {
		position: absolute;
		bottom: 0;
		right: 0
	}

	#mh-col-3 > .row{
		padding: 30px
	}
}

#t-course-catalog-header > .row {
	position: relative
}

#mt-header-top-left-corner-img {
	position: absolute;
	z-index: 10;
	max-height: 70px;
	left: 0;
}

#mt-header-background-img{
	min-height: 100%;
	width: 100%;
	position: absolute;
	z-index: 1;
}

#t-header-logo {
	position: absolute;
	bottom: 30px;
	right: 20px;
	z-index: 1;
	width: 150px;
}

#mt-header-details-col {
	z-index: 1;
	padding-left: 50px;

	#mt-heading {
		font-size: 25px;
	}

	#subheading {
		font-size: 14px !important;
	}
}
#t-course-img-col {
	position: relative;
	z-index: 0;
	padding: 0;

	#t-course-img {
		min-height: 100%;
		min-width: 100%;
		object-fit: cover;
	}
}

#page-footer {
	display: none;
}

#img-corner-bottom-right{
	position: absolute;
}

/* Start - Colleborators*/
	#collaborators-container > section.customers-logos {
		display: flex;
		justify-content: center;
	}

	.slick-slide {
		margin: 0 20px;
	}
	.slick-slide img {
		width: 100%;
		display: block;

	}
	.slick-slider {
		position: relative;
		display: block;
		box-sizing: border-box;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;
		-khtml-user-select: none;
		-ms-touch-action: pan-y;
		touch-action: pan-y;
		-webkit-tap-highlight-color: transparent;
	}
	.slick-list {
		position: relative;
		display: block;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	.slick-list:focus {
		outline: 0;
	}
	.slick-list.dragging {
		cursor: pointer;
		cursor: hand;
	}
	.slick-slider .slick-list,
	.slick-slider .slick-track {
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.slick-track {
		position: relative;
		top: 0;
		left: 0;
		display: block;
	}
	.slick-track:after,
	.slick-track:before {
		display: table;
		content: "";
	}
	.slick-track:after {
		clear: both;
	}
	.slick-loading .slick-slide,
	.slick-loading .slick-track {
		visibility: hidden;
	}
	.slick-slide {
		display: none;
		float: left;
		height: 100%;
		min-height: 1px;
	}
	[dir="rtl"] .slick-slide {
		float: right;
	}
	.slick-slide.slick-loading img {
		display: none;
	}
	.slick-slide.dragging img {
		pointer-events: none;
	}
	.slick-initialized .slick-slide {
		display: block;
	}
	.slick-vertical .slick-slide {
		display: block;
		height: auto;
		border: 1px solid transparent;
	}
	.slick-arrow .fa.fa-caret-left {
		width: 45px;
		border-radius: 30px;
		height: 45px;
		background-color: #d9d9d9;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 30px;
		margin-top: 10px;
		margin-right: 10px;
		transition: 0.4s;
	}
	.slick-arrow .fa.fa-caret-right {
		width: 45px;
		border-radius: 30px;
		height: 45px;
		background-color: #d9d9d9;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 30px;
		margin-bottom: 10px;
		margin-right: 10px;
		transition: 0.4s;
	}
	#trusted-clients-logo-block {
		background-color: #d9d9d9;

		.slick-arrow {
			min-width: 100%;
			display: flex;
			justify-content: end;
			cursor: pointer;
		}
	}
	.slick-arrow .fa.fa-caret-left:hover,
	.slick-arrow .fa.fa-caret-right:hover {
		background-color: #a6a6a6;
	}
/* End - Colleborators*/

@media (max-width: 576px) {
	#tablet-img {
		display: none;
	}
	#img-corner-top-left {
		position: absolute;
		right: 0;
		bottom: 0;
		max-width: 25% !important;
	}
	#img-corner-bottom-right {
		width: 25% !important;
	}

	#mt-course-catalog-heading {
		font-size: 30px;
	}

	#mt-categories-dropdown .dropdown-menu {
		max-height: 80vh;
		overflow: scroll;
	}
}
@media (min-width: 768px) {
	#mt-course-image {
		object-fit: cover;
		border-radius: 50%;
		min-height: 175px;
		max-width: 225px;
		max-height: 164px;
		margin-left: 8px;
	}
	#course-header-details {
		display: flex;
		flex-direction: column;
		align-items: start;
	}
	#mobil-img {
		display: none;
	}
	#img-corner-bottom-right {

		width: 15%;
	}
	#m-header {
		display: none;
	}
}
@media (max-width: 767.98px) {
	#m-heading {
		text-align: center;
		font-size: 25px;
	}
	#course-header-details {
		max-width: 70%;
	}
	#mt-course-img {
		display: none;
	}
	#course-header-details {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
	}
	#m-subheading {
		text-align: center;
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	#certificate-btns {
		display: flex;
		gap: 10px;
		/* margin-left: -50px;
		margin-right: -50px; */
	}
	#img-corner-bottom-right {
        width: 12%;
    }
}
@media (max-width: 991.98px) {
	#certificate-btns {
		gap: 10px;
	}
}

/* Course Catalog */
@media (min-width: 1200px) {
	#t-course-catalog-header {
		display: none;
	}

	#mt-course-categories {
		display: none;
	}
}
@media (max-width: 1199.98px) {
	.cc-header {
		display: none!important;
	}

	#courses-categories {
		display: none;
	}
}

@media (max-width: 767.98px) {
	#t-course-catalog-header {
		display: none;
	}
}
@media (min-width: 768px) {
	#m-header {
		display: none;
	}
}

/* Course Details */
@media (min-width: 1200px) {
	#mt-course-catalog-header {
		display: none;
	}
}
@media (max-width: 1199.98px) {
	#cd-header-row {
		display: none;
	}
}

@media (max-width: 767.98px) {
	#img-corner-bottom-right{
		max-width: 20% !important;
	}
}
@media (min-width: 768px) {}


