.course_category_page_wrapper{background-color:#f7f7f7;.hero{width: 100%; height: 264px; background-image: url(/build/assets/course-categories-cover.1258c643.svg); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 16px; padding: 24px 16px 16px 16px; overflow: hidden; h1{color: #FFFFFF; font-weight: 700; font-size: 24px; line-height: 32px;} .description{height: 104px; overflow: hidden; position: relative; p{color: #FFFFFF; font-weight: 400; font-size: 14px; line-height: 20px;} h3{color: #FFFFFF; font-weight: 700; font-size: 14px; line-height: 20px;}} .dropdown-icon{z-index: 9999; color: #FFFFFF; width: 100%; display: flex; flex-direction: row; align-items: start; justify-content: center; .icon-tabler-chevron-up{display: none;}}} .hero::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom,#1e008000,#1e0080);} .hero.open{height: auto; .description{height: auto;} .dropdown-icon{.icon-tabler-chevron-up{display: block;} .icon-tabler-chevron-down{display: none;}}} .hero.open::after{display: none;} .breadcrumbs_wrapper{padding: 16px;} .course_list_wrapper{display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding-left: 16px; padding-right: 16px; .header{.title{display: flex; flex-direction: row; align-items: start; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; .icon-tabler-chevron-up{display: none;}} .description{display: none; a{color: #005FF9; text-decoration: underline;}} .btn_wrapper_desktop{display: none;}} .header.open{.icon-tabler-chevron-up{display: block;} .icon-tabler-chevron-down{display: none;} .description{display: flex; flex-direction: column; padding-right: 16px;}} .course_card{max-width: 328px; .checkout{display: none;}}} .btn_wrapper_mobile{a{width: 100%; max-width: 328px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #005FF9; color: white; border-radius: 25px; font-weight: 600; font-size: 16px; line-height: 24px; &:hover{background-color: #084BC5;}}} .course_list_divider{display: flex; background-color: #D1D1D1; padding: .5px; max-width: 1280px; margin: auto; margin-top: 24px; &:last{display: none;}} .page_overview_wrapper{display: flex; flex-direction: column; gap: 48px; padding: 24px 16px 24px 16px; margin-top: 32px; background: #121212; .page_overview_section{display: flex; flex-direction: column; gap: 24px; .content{display: flex; flex-direction: column; gap:16px; h2{font-weight: 700; font-size: 20px; line-height: 28px; color: #FFFFFF; margin: 0px;} p{font-size: 16px; line-height: 24px; color: #FFFFFF; margin: 0px; a{color: #005FF9; text-decoration: underline;}} ol{li{color:#FFFFFF;}}} .img{width: 100%; img{width: 100%; height: auto; border-radius: 8px;}}} .category_overview_section{display: flex; flex-direction: column; gap: 24px; .content{display: flex; flex-direction: column; gap:16px; h2{font-weight: 700; font-size: 20px; line-height: 28px; color: #FFFFFF; margin: 0px;} p{font-size: 16px; line-height: 24px; color: #FFFFFF; margin: 0px; a{color: #005FF9; text-decoration: underline;}} ol{li{color:#FFFFFF;}}}} .overview_list_divider{background-color: #3F3F3F; display: flex; padding: 1px; margin-top: 24px; &:last-child{display: none;}}}}@media (min-width: 768px){.course_category_page_wrapper{padding-bottom:48px;.hero{width: 100%; height: auto; background-image: url(/build/assets/course-categories-cover.1258c643.svg); background-position: center; gap: 48px; padding: 80px 16px; overflow: auto; h1{color: #FFFFFF; font-weight: 700; font-size: 40px; line-height: 48px; margin: 0px; max-width: 1280px; margin: auto; width: 100%;} .description{height: auto; overflow: auto; display: flex; flex-direction: row; align-items: start; justify-content: space-between; gap: 80px; max-width: 1280px; margin: auto; width: 100%; .section_wrapper{display: flex; flex-direction: column; gap: 16px;} p{color: #FFFFFF; font-weight: 400; font-size: 16px; line-height: 24px;} h3{color: #FFFFFF; font-weight: 700; font-size: 16px; line-height: 24px; margin: 0px;}} .dropdown-icon{display: none;}} .hero::after{display: none;} .breadcrumbs_wrapper{padding: 32px 16px; max-width: 1280px; margin: auto; width: 100%; @media (min-width: 1280px) {padding: 32px 0px;}} .categories_wrapper{padding: 32px 16px; max-width: 1280px; margin: auto; width: 100%; @media (min-width: 1280px) {padding: 32px 0px;} .category_list_divider{display: flex; width: 100%; background-color: #e6e6e6; padding: 1px; margin-top: 24px;}} .course_list_wrapper{flex-direction: row; gap: 80px; max-width: 1280px; margin: auto; width: 100%; padding: 32px 0px; .header{width: 800px; padding-right: 32px; .title{display: flex; flex-direction: row; align-items: start; justify-content: space-between; padding: 0px; padding-top: 16px; padding-bottom: 16px; .icon{display: none;} h2{font-weight: 700; font-size: 40px; line-height: 48px; margin: 0px;}} .description{display: flex; flex-direction: column; width: 100%; p{font-weight: 400; font-size: 16px; line-height: 24px; a{color: #005FF9; text-decoration: underline;}}} .btn_wrapper_desktop{display: flex; max-width: 130px; padding-top: 32px; a{width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #005FF9; color: white; border-radius: 25px; font-weight: 600; font-size: 16px; line-height: 24px; &:hover{background-color: #084BC5;}}}} .course_card{.checkout{display: none;} &:hover{box-shadow: 0px 4px 6px -2px #0000000D; box-shadow: 0px 10px 15px -3px #00000014; .shop-price-format{font-size: 18px;}}} .courses_wrapper{display: flex; flex-direction: column; align-items: start; justify-content: start; gap:16px; overflow: auto; .course_card{width: 100%; max-width: 840px; display: flex !important; flex-direction: row !important; gap: 40px; .img_wrapper{padding-bottom: 0px;}}} .check{display: none;}} .btn_wrapper_mobile{display: none;} .page_overview_wrapper{display: flex; flex-direction: column; gap: 80px; padding: 80px; border-radius: 16px; background: #121212; max-width: 1280px; margin-top: 32px; width: 100%; @media (min-width: 1280px) {margin: auto; margin-top: 32px;} .page_overview_section{display: flex; flex-direction: row; gap: 80px; &:nth-child(2n){flex-direction: row-reverse;} .content{display: flex; flex-direction: column; gap: 16px; max-width: 520px; h2{font-weight: 700; font-size: 32px; line-height: 40px; color: #FFFFFF; margin: 0px;} p{font-size: 16px; line-height: 24px; color: #FFFFFF; margin: 0px; a{color: #005FF9; text-decoration: underline;}} ol{li{color:#FFFFFF;}}} .img{width: 100%; img{width: 100%; height: auto; border-radius: 8px;}}} .category_overview_section{display: flex; flex-direction: column; gap: 24px; .content{display: flex; flex-direction: row; gap:80px; justify-content: space-between; h2{font-weight: 700; font-size: 32px; line-height: 40px; color: #FFFFFF; margin: 0px; width: 320px;} .content_singles{display: flex; flex-direction: column; gap: 16px; width: 100%; p{font-size: 16px; line-height: 24px; color: #FFFFFF; margin: 0px; a{color: #005FF9; text-decoration: underline;}} ol{li{color:#FFFFFF;}}}}}} .faq_wrapper{margin-bottom: 0px; max-width: 1280px; margin: auto; margin-top: 48px; width: 100%;}}}