section.allcoursesBanner {
display: flex;
width: 100%;
}
.allCourseBannerImg {
width: 57%;
background-color: #55220a;
overflow: hidden;
display: flex;
align-items: end;
}
.allCourseBannerText {
width: 43%;
background-color: #ff671f;
align-items: center;
display: flex;
padding-top: 40px;
padding-bottom: 40px;
justify-content: center;
}
.allCourseBannerTitle {
padding: 0px 18px 0px !important;
}
.allCourseBannerTitle h1 {
font-family: var(--vulf-regular);
margin: 0 auto;
max-width: 465px;
font-size: 48px;
color: #fff;
font-weight: 400;
line-height: 110%;
letter-spacing: -0.96px;
}
.allCourseBannerTitle p {
font-family: var(--public-regular);
margin: 0 auto;
max-width: 465px;
padding-top: 14px;
font-size: 18px;
color: #fff;
font-weight: 400;
line-height: 110%;
letter-spacing: -0.96px;
}
.allCourseBannerImg svg {
width: 100%;
height: 100%;
object-fit: cover;
transform: translateX(-10%);
} .allCourseBannerImg img:nth-child(1) {
display: block;
}
.allCourseBannerImg img:nth-child(2) {
display: none;
}  @media (max-width: 1280px) {
.allCourseBannerTitle h1 {
font-size: 44px;
}
} @media (max-width: 1024px) {
.allCourseBannerTitle h1 {
font-size: 40px;
}
} @media (max-width: 992px) {
section.allcoursesBanner {
display: block;
}
.allCourseBannerText {
width: 100%;
justify-content: start;
}
.allCourseBannerImg {
width: 100%;
}
.allCourseBannerTitle h1 {
margin: 0;
font-size: 48px;
max-width: 90%;
}
.allCourseBannerImg img:nth-child(1) {
display: none;
}
.allCourseBannerImg img:nth-child(2) {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.allCourseBannerTitle {
padding: 0px 18px 0px !important;
}
} @media (max-width: 762px) {
.allCourseBannerTitle h1 {
font-size: 48px;
}
} @media (max-width: 392px) {
.allCourseBannerTitle h1 {
font-size: 32px;
}
} .courseTabbing {
padding-top: 60px;
}
.courseTabLink svg {
margin: 0px 5px;
}
.courseTabLinkActiveButton {
color: #ff8044 !important;
background-color: #55220a !important;
}
.courseTabLink h2 > button {
font-family: var(--public-regular);
font-size: 32.505px;
font-style: normal;
font-weight: 400;
line-height: 110%;
color: #4f4a48;
background-color: transparent;
border-radius: 0;
border: none;
padding: 3px 15px;
box-shadow: none;
text-transform: capitalize;
}
.tags-buttons h2 {
margin: 0;
display: inline-flex;
}
.courseTabLink svg:last-of-type {
display: none;
}
.dsplyAllCourse {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 60px;
padding: 90px 0 100px;
} .product-fiters {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.product-searchBar {
width: 50%;
}
.product-filter-by-category-and-duration {
width: 40%;
display: flex;
align-items: center;
} .filter-byCategory {
width: 50%;
margin: 0px 15px;
}
.filter-by-duration {
width: 50%;
}
select#categorySelect {
background: #d6e5f9;
padding: 6px 19px;
height: 42px;
color: #184071;
font-size: 16px;
font-weight: 400;
line-height: normal;
font-family: var(--public-regular);
appearance: none; -webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2219%22 height=%2212%22 viewBox=%220 0 19 12%22 fill=%22none%22%3E%3Cpath d=%22M1.18311 1.77979L9.265 9.86184L17.347 1.77979%22 stroke=%22%23184071%22 stroke-width=%223%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
select#tagSelectChange {
background: #ddf3e3;
padding: 6px 19px;
height: 42px;
color: #184071;
font-size: 16px;
font-weight: 400;
line-height: normal;
font-family: var(--public-regular);
appearance: none; -webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2219%22 height=%2212%22 viewBox=%220 0 19 12%22 fill=%22none%22%3E%3Cpath d=%22M1.18311 1.77979L9.265 9.86184L17.347 1.77979%22 stroke=%22%23184071%22 stroke-width=%223%22/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.categorySelect select {
-moz-appearance: none; -webkit-appearance: none; appearance: none;
}
@media (max-width: 393px) {
select#tagSelectChange {
font-size: 14px;
padding: 6px 10px;
}
select#categorySelect {
font-size: 14px;
padding: 6px 10px;
}
}
@media (max-width: 992px) {
.dsplyAllCourse {
grid-template-columns: repeat(2, 1fr);
padding: 40px 0 100px;
}
.allCourseBannerTitle {
padding: 70px 18px 56px;
}
.courseTabLink h2 > button {
font-size: 16px;
padding: 3px 6px;
} .product-fiters {
display: block;
padding-top: 40px;
}
.product-searchBar {
width: 100%;
}
.product-filter-by-category-and-duration {
width: 100%;
margin-top: 22px;
}
.filter-byCategory {
margin: 0px 15px 0 0;
}
.courseTabbing {
padding-top: 57px;
}
.tags-buttons {
display: flex;
align-items: center;
padding: 0px 0px 0px 0px;
}
}
@media (max-width: 834px) {
.dsplyAllCourse {
grid-template-columns: repeat(1, 1fr);
}
}