// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {  }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {  }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {  }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {  }



// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {  }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { 
	.hero-heading-upper {
		font-size: 1.25rem;
	}
	.hero-heading .brand {
		.name {
			font-size: 3rem;
		}
		.desc {
			font-size: 1.75rem;
		}
	}
	.hero-summary .summary-heading {
		font-size: 1.125rem;
		.desc {
			font-size: 1rem;
			font-weight: normal;
		}
	}
	.section-title {
		font-size: 1.75rem;
	}
	.column-list {
		columns: 1;
		
	}
	.review-item {
		height: auto;
	}
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { 
	
	
	
	.hero-summary .item {
		margin-bottom: 2rem;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.tutor-profile {
		width: 180px;
		margin: 0 auto;
		display: inline-block;
	}
	.plan-item {
		height: auto;
	}
	
 }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {  }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width