/* 
Responsive For Mobile & Tablet Devices
================================================== 
* Project Name   :  Collab – Online Learning Platform Template
* File           :  CSS Base
* Version        :  1.0.0
* Last change    :  15 April 2023, Saturday
* Author         :  Merkulove (https://themeforest.net/user/merkulove)
* Developer			 :	webrok (https://www.fiverr.com/webrok?up_rollout=true)
*	CSS code for responsive layout To make responsive
================================================== 
*/

/* Media Screen 1440px - Start
================================================== */
@media screen and (max-width: 1440px) {

	.intro_video_section .shape_img_3 {
		right: -160px;
		bottom: -180px;
		max-width: 360px;
	}

}
/* Media Screen 1440px - End
================================================== */

/* Media Screen 1360px - Start
================================================== */
@media screen and (max-width: 1360px) {

	.page_banner .content_wrapper {
		padding: 70px;
	}

}
/* Media Screen 1360px - End
================================================== */

/* Media Screen 1199px - Start
================================================== */
@media screen and (max-width: 1199px) {

	.hero_banner.style_1 .content_wrap {
		padding: 80px 40px;
	}
	.hero_banner .banner_big_title {
		font-size: 54px;
		line-height: 58px;
	}
	.banner_image_1 .satisfied_student {
		left: -150px;
		padding: 30px;
	}
	.banner_image_1 .satisfied_student .students_thumbnail span {
		width: 40px;
		height: 40px;
	}
	.banner_image_1 .satisfied_student .wrap_title {
		font-size: 18px;
		line-height: 20px;
		margin-bottom: 15px;
	}

	.form_item:has(.btn) input {
		flex: 0 0 340px;
	}

	.image_widget {
		box-shadow: -5px 5px 0 0 #FFD32B;
	}
	.newslatter_box {
		box-shadow: 5px 5px 0 0 #FFD32B;
	}
	.calltoaction_form {
		box-shadow: 2px 2px 30px rgba(31, 29, 13, 0.0894963), 5px 5px 0 0 #FFD32B;
	}
	.details_section .details_image.image_widget {
		box-shadow: -5px -5px 0 0 #1F1D0D;
	}
	.course_info_card {
		box-shadow: 2px 2px 30px rgba(31, 29, 13, 0.0894963), 5px 5px 0 0 #1F1D0D;
	}
	.testimonial_item_2 .testimonial_image.image_widget {
		box-shadow: 5px 5px 0 0 #ffd32b;
	}
	.popular_event_list {
		box-shadow: 2px 2px 30px rgba(31, 29, 13, 0.09), 5px 5px 0 0 #FFD32B;
	}
	.details_section .details_image.image_widget {
		box-shadow: -5px -5px 0 0 #1F1D0D;
	}
	.register_form {
		box-shadow: 2px 2px 30px rgba(31, 29, 13, 0.12), 5px 5px 0 0 #1F1D0D;
	}

	.main_menu_list > li > a {
		padding: 9px 16px 8px;
	}
	.header_btns_group .btn {
		padding: 0 20px;
	}

	.advertisement_section {
		margin: 0;
		padding: 70px 0;
	}
	.advertisement_section .section_heading {
		padding-right: 0;
	}
	.advertisement_section .images_group .shape_img_1 {
		left: -60px;
		bottom: 83px;
		max-width: 180px;
	}

}
/* Media Screen 1199px - End
================================================== */

/* Media Screen 1024px - Start
================================================== */
@media screen and (max-width: 1024px) {

	.main_menu_list > li > a {
		font-size: 16px;
		line-height: 22px;
		padding: 7px 14px 6px;
	}
	.header_btns_group .btn {
		padding: 0 18px;
	}
	.header_btns_group > li {
		margin-left: 8px;
	}

	.banner_image_1 {
		margin: 0;
	}
	.banner_image_1 .satisfied_student {
		left: 30px;
		padding: 20px;
	}
	.banner_image_1 .shape_img_1 {
		left: -50px;
	}
	.banner_image_1 .shape_img_2 {
		right: -33px;
	}

	.service_item {
		padding: 30px 30px 35px;
	}

	.counter_item .counter_value {
		font-size: 48px;
		line-height: 54px;
	}

	.section_heading .heading_text {
		font-size: 38px;
		line-height: 42px;
	}
	.advertisement_section .images_group .shape_img_1 {
		left: -78px;
		max-width: 190px;
	}
	.testimonial_item .quote_icon {
		top: 15px;
		right: 15px;
		font-size: 28px;
	}

	.form_item:has(.btn) input {
		margin-right: 5px;
	}

	.hero_banner.style_2 {
		.form_item:has(.btn) input {
			flex: 0 0 330px;
		}
	}
	.testimonial_item_2 .testimonial_title {
		font-size: 24px;
	}

	.page_banner .form_item:has(.btn) {
		display: block;
	}
	.page_banner .form_item .btn {
		width: 100%;
		display: block;
		margin-top: 10px;
	}
	.page_banner .content_wrapper {
		background-size: 470px;
	}

	.brands_logo_list.style_2 li {
		width: auto;
	}

	.page_title {
		font-size: 48px;
		line-height: 54px;
	}
	.page_banner .info_list,
	.page_banner .meta_info_list {
		padding: 20px 0 30px;
	}
	.page_banner_image {
		margin: auto;
	}

	.error_section .error_image {
		max-width: 470px;
	}
	.error_section .error_title {
		font-size: 48px;
		line-height: 54px;
	}
	.error_section .shape_img_3 {
		top: -120px;
		left: -130px;
		max-width: 300px;
	}
	.error_section .shape_img_4 {
		right: -250px;
		max-width: 500px;
	}
	.error_section .shape_img_1 {
		top: 80px;
		right: 15px;
		max-width: 80px;
	}
	.error_section .shape_img_2 {
		left: 15px;
		bottom: 100px;
		max-width: 70px;
	}

	.register_form {
		padding: 40px;
	}

}
/* Media Screen 1024px - End
================================================== */

/* Media Screen 991px - Start
================================================== */
@media screen and (max-width: 991px) {

	.header_btns_group > li:first-child {
		display: inline-block;
	}
	.mobile_menu_btn {
		font-size: 24px;
		margin-right: 10px;
		transform: translateY(2px);
	}

	.container,
	.site_header .container,
	.hero_banner.style_1 .container {
		max-width: 730px;
	}

	.main_menu {
		left: 0;
		right: 0;
		top: 129px;
		z-index: 999;
		position: fixed;
	}
	.site_header.sticky {
		background-color: $color_white;
	}
	.site_header.sticky .main_menu {
		top: 61px;
	}
	.main_menu_inner {
		background-color: $color_white;
		border-bottom: 1px solid $color_border;
	}
	.main_menu_list > li {
		width: 100%;
		margin: 1px 0;
		display: block;
	}
	.main_menu_list {
		margin: auto;
		padding: 15px;
		max-width: 730px;
	}
	.main_menu_list > li > a {
		width: 100%;
		display: block;
	}
	.main_menu_list .dropdown-menu {
		position: static;
		box-shadow: none;
	}
	.main_menu_list > li > a {
		font-size: 18px;
		line-height: 24px;
		padding: 12px 20px;
	}
	.main_menu_list .dropdown > a:after {
		font-size: 16px;
		margin-top: 5px;
	}
	.main_menu_list .dropdown-menu {
		padding: 8px 0;
	}

	.hero_banner {
		text-align: center;
	}
	.hero_banner.style_1 .banner_description {
		padding-right: 0;
	}
	.hero_banner .banner_btns_group {
		justify-content: center;
	}
	.banner_image_1 {
		margin: 20px 0 0;
	}
	.hero_banner.style_1 {
		margin-bottom: 20px;
	}

	.section_space_lg {
		padding-top: 90px;
		padding-bottom: 90px;
	}

	.expect_from_course .image_widget,
	.courses_info_section .image_widget {
		margin-bottom: 30px;
	}

	.advertisement_section {
		margin: 0;
		padding: 90px 0;
	}

	.testimonial_section .section_heading {
		text-align: center;
	}

	.hero_banner.style_2 .banner_description {
		margin: auto auto 30px;
	}
	.hero_banner.style_2 .form_item {
		justify-content: center;
	}
	.hero_banner .tags_list {
		margin: auto;
		justify-content: center;
	}

	.hero_banner .banner_image_2 {
		max-width: 500px;
		margin: 20px auto auto;
	}
	.banner_image_2 .image_wrap_1 {
		margin-bottom: -780px;
	}
	.banner_image_2 .child_image .layer {
		max-width: 180px;
	}
	.banner_image_2 .image_wrap_2 {
		right: -15%;
	}
	.banner_image_2 .image_wrap_3 {
		top: 24%;
		right: -30%;
	}
	.banner_image_2 .image_wrap_4 {
		top: 30%;
		left: -24%;
	}

	.testimonial_item_2 {
		display: block;
	}
	.testimonial_item_2 .testimonial_image {
		margin: auto auto 40px;
	}
	.testimonial_item_2 .quote_icon {
		margin-bottom: 20px;
	}
	.calltoaction_form {
		margin: auto;
	}
	.calltoaction_section .shape_img_2 {
		top: -44px;
		right: 50px;
		max-width: 120px;
	}
	.calltoaction_section .shape_img_1 {
		left: 50px;
		bottom: -10px;
		max-width: 120px;
	}
	.brands_logo_list > li {
		width: 33.333%;
	}
	.brands_logo_list a img {
		max-width: 140px;
		max-height: 60px;
	}

	.form_item:has(.btn) {
		margin-bottom: 30px;
	}
	.hero_banner.style_2 .banner_big_title {
		margin: 0 0 20px;
	}

	.page_banner .content_wrapper {
		padding: 70px;
		text-align: center;
		background-size: 300px;
	}
	.breadcrumb_nav {
		justify-content: center;
	}
	.page_description {
		padding: 0;
	}

	.popular_event_list {
		margin: auto;
	}
	.popular_event_section .shape_img_3 {
		right: -90px;
		max-width: 180px;
	}
	.popular_event_section .shape_img_1 {
		left: -90px;
		max-width: 180px;
	}
	.popular_event_section .shape_img_2 {
		bottom: 20px;
		max-width: 120px;
	}

	.sidebar {
		margin-top: 40px;
	}

	.contact_form_section .shape_img_4 {
		right: -200px;
		bottom: -100px;
		max-width: 470px;
	}
	.contact_form_section .shape_img_3 {
		top: -120px;
		left: -120px;
		max-width: 300px;
	}

	.page_banner .info_list,
	.page_banner .meta_info_list {
		justify-content: center;
	}
	.page_banner .btns_group {
		justify-content: center;
	}

	.service_item {
		padding: 25px 20px 30px;
	}

	.site_footer p {
		margin-bottom: 25px;
	}
	.footer_widget_title {
		line-height: 1;
		margin-bottom: 20px;
	}
	.site_footer .site_logo {
		margin-bottom: 25px;
	}
	.footer_widget {
		margin-bottom: 10px;
	}
	.site_footer .footer_widget_area {
		padding: 100px 0 80px;
	}
	.newslatter_box {
		padding: 90px 40px;
	}

	.intro_video_section .shape_img_2 {
		left: -58px;
		max-width: 140px;
	}
	.intro_video_section .shape_img_3 {
		right: -110px;
		bottom: -120px;
		max-width: 230px;
	}

	.page_banner .content_wrapper {
		text-align: left;
	}
	.page_banner .unordered_list {
		justify-content: flex-start;
	}

}
/* Media Screen 991px - End
================================================== */

/* Media Screen 767px - Start
================================================== */
@media screen and (max-width: 767px) {

	.header_btns_group {
		margin-left: -100px;
	}
	.header_btns_group .btn span small {
		font-size: 16px;
	}

	.advertisement_section .section_heading {
		padding: 0;
	}

	.popular_event_section .section_heading {
		padding: 0;
	}

	.btn_wrap {
		padding: 30px 0;
	}
	.section_heading {
		margin-bottom: 30px;
	}

	.intro_video_section .shape_img_3 {
		right: -100px;
		max-width: 180px;
	}

	.breadcrumb_nav > li {
		font-size: 14px;
		line-height: 18px;
	}

}
/* Media Screen 767px - End
================================================== */

/* Media Screen 680px - Start
================================================== */
@media screen and (max-width: 680px) {

	.course_card.list_layout {
		display: block;
	}
	.course_card.list_layout .item_image,
	.courses_archive_section .course_card.list_layout .item_image {
		margin: 0 0 30px 0;
	}

	.calltoaction_section .boxed_wrapper {
		padding: 100px 15px;
	}

	.faq_section .section_heading.text-center,
	.newslatter_box .section_heading.text-center,
	.policy_section .section_heading.text-center,
	.process_section .section_heading.text-center {
		text-align: left !important;
	}

}
/* Media Screen 680px - End
================================================== */

/* Media Screen 575px - Start
================================================== */
@media screen and (max-width: 575px) {

	.advertisement_section .images_group .col:nth-child(1),
	.advertisement_section .images_group .col:nth-child(2) {
		margin: 0;
	}

	.header_btns_group .btn span small {
		font-size: 14px;
		line-height: 18px;
	}
	.header_btns_group .btn {
		padding: 0 12px;
	}
	.header_btns_group .btn span small {
		padding: 4px 0;
	}
	.mobile_menu_btn {
		margin-right: 8px;
		color: $color_dark;
		&:hover {
			color: $color_dark;
		}
	}
	.newslatter_box .form_item:has(.btn) {
		display: block;
	}
	.newslatter_box .form_item:has(.btn) input {
		margin-bottom: 10px;
	}
	.newslatter_box .form_item .btn {
		width: 100%;
		display: block;
	}
	.newslatter_box {
		padding: 50px 30px;
	}

	.hero_banner .banner_image_2 {
		max-width: 400px;
	}
	.banner_image_2 .child_image .layer {
		max-width: 130px;
	}
	.banner_image_2 .image_wrap_1 {
		margin-bottom: -680px;
	}
	.banner_image_2 .image_wrap_4 {
		left: -10%;
	}
	.banner_image_2 .image_wrap_3 {
		right: -18%;
	}
	.banner_image_2 .image_wrap_2 {
		right: -10%;
	}
	.brands_logo_list > li {
		width: 50%;
	}

	.hero_banner.style_2 .form_item {
		display: block;
		.btn {
			width: 100%;
			display: block;
			margin-top: 10px;
		}
	}

	.testimonial_item_2 .testimonial_image.image_widget {
		box-shadow: 10px 10px 0 0 #ffd32b;
	}

	.popular_event_list ul > li {
		display: block;
	}
	.popular_event_list ul .column:nth-child(1) {
		padding: 0 0 20px;
	}

	blockquote {
		display: block;
	}
	blockquote .blockquote_icon {
		margin: 0 0 10px;
	}
	.blog_author {
		margin: 50px 0;
		display: block;
	}
	.blog_author .blog_author_image {
		margin: 0 0 20px;
	}
	.blog_author .blog_author_link {
		position: static;
		margin: 20px 0 0;
	}
	.prevnext_post_wrap {
		display: block;
	}
	.prevnext_post_wrap .post_item {
		padding: 30px;
		display: block;
		max-width: 100%;
		border-radius: 6px;
		border: 2px solid $color_border;
		&:not(:last-child) {
			margin-bottom: 6px;
		}
	}

	.filter_topbar {
		display: block;
	}
	.filter_result {
		margin: 0 0 24px;
	}

	.deals_countdown {
		display: block;
	}
	.deals_countdown .countdown_timer {
		width: 100%
	}
	.deals_countdown .discount_value {
		width: 100%;
		margin: 15px 0 0;
	}

	.error_section .error_image {
		max-width: 370px;
	}
	.error_section p {
		font-size: 14px;
		line-height: 24px;
		margin: auto auto 30px;
	}
	.error_section .form_item:has(.btn) {
		display: block;
	}
	.error_section .form_item .btn {
		width: 100%;
		display: block;
		margin: 10px 0 0;
	}

	.details_section .details_content .mentor_name {
		font-size: 36px;
		line-height: 42px;
	}
	.details_section .details_content .details_item_title {
		line-height: 1;
		font-size: 40px;
		margin-bottom: 18px;
	}
	.accordion.style_2 .accordion-button {
		font-size: 18px;
		line-height: 22px;
	}
	.video_play_btn .icon {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		font-size: 14px;
	}

}
/* Media Screen 575px - End
================================================== */

/* Media Screen 425px - Start
================================================== */
@media screen and (max-width: 425px) {

	.mobile_menu_btn {
		margin-right: 6px;
		font-size: 20px;
	}
	.header_btns_group > li {
		margin-left: 4px;
	}
	.header_btns_group .btn span small {
		font-size: 12px;
		line-height: 14px;
	}

	.site_header {
		padding: 20px 0;
	}
	.main_menu {
		top: 82px;
	}
	.site_header.sticky .main_menu {
		top: 62px;
	}
	.site_header_1 + main {
		padding-top: 82px;
	}

	.hero_banner.style_1 .content_wrap {
		padding: 80px 20px;
	}
	.hero_banner .banner_big_title {
		font-size: 42px;
		line-height: 44px;
	}
	.banner_image_1 .satisfied_student {
		left: 20px;
		padding: 15px;
	}
	.hero_banner.style_1 {
		margin-bottom: 0;
	}

	.testimonial_item {
		display: block;
	}
	.testimonial_item .testimonial_image {
		max-width: 100%;
		margin: auto auto 20px auto;
	}

	.course_card .item_price .sale_price {
		font-size: 22px;
		line-height: 28px;
	}

	.pricing_card {
		padding: 32px 30px 40px;
	}
	.pricing_card.bg_dark {
		padding: 62px 30px 60px;
	}

	.brands_logo_list a img {
		max-width: 120px;
		max-height: 50px;
	}
	.brands_logo_list a {
		height: 130px;
	}

	.calltoaction_form {
		padding: 30px 20px;
	}

	.page_title {
		font-size: 54px;
		line-height: 60px;
	}
	.page_banner .content_wrapper {
		padding: 70px 25px;
		background-size: 230px;
	}

	.iconbox_item .title_wrap {
		display: block;
	}
	.iconbox_item .title_wrap .item_icon {
		margin-bottom: 18px;
	}
	.iconbox_item .title_wrap {
		margin-bottom: 10px;
	}

	.backtotop {
		bottom: 100px;
	}

	.comment_item .reply_btn {
		position: static;
		margin-top: 20px;
	}

	.remenber_forget {
		display: block !important;
		>.col {
			width: 100%;
		}
	}
	.forget_password.text-end {
		text-align: left !important;
	}

	.section_heading .heading_text {
		font-size: 36px;
		line-height: 40px;
		margin-bottom: 18px;
	}

	.page_banner .content_wrapper {
		min-height: auto;
	}
	.section_space_lg {
		padding-top: 60px;
		padding-bottom: 60px;
	}

}
/* Media Screen 425px - End
================================================== */

/* Media Screen 375px - Start
================================================== */
@media screen and (max-width: 375px) {

	.course_card .item_content .d-flex {
		display: block !important;
	}
	.course_card .item_price {
		margin-top: 10px;
	}

	.banner_image_2 .image_wrap_1 {
		margin-bottom: -540px;
	}
	.banner_image_2 .child_image .layer {
		max-width: 100px;
	}

	.brands_logo_list > li {
		width: 100%;
	}

	.main_menu {
		top: 77px;
	}
	.site_header.sticky .main_menu {
		top: 56px;
	}

	.page_title {
		font-size: 36px;
		line-height: 40px;
	}
	.breadcrumb_nav {
		margin-bottom: 16px;
	}
	.page_banner .content_wrapper {
		margin: 0 -15px;
		padding: 60px 20px;
	}
	.page_banner .item_price .sale_price {
		font-size: 38px;
	}
	.page_banner .item_price .remove_price {
		font-size: 20px;
	}
	.page_banner .info_list,
	.page_banner .info_list,
	.page_banner .meta_info_list {
		padding: 14px 0 24px;
	}

}
/* Media Screen 375px - End
================================================== */

/* Media Screen 320px - Start
================================================== */
@media screen and (max-width: 320px) {

	.main_menu {
		top: 73px;
	}
	.site_header.sticky .main_menu {
		top: 52px;
	}

}
/* Media Screen 320px - End
================================================== */