/*******************************************************
    Template Name    : Sharp - Beauty Salon & Makeup Studio Landing Page
    Author           : Cute Themes
    Version          : 1.0
    Created          : 2021
    File Description : Main Reaposive file of the template
*******************************************************/

@media only screen and (min-width: 991px) and (max-width: 1024px) {

}

@media only screen and (min-width: 992px) {
	/* На великих екранах фото в about не повинно перетягувати секцію по висоті */
	.about-area .row.align-items-center {
		align-items: flex-start;
	}
	.about-image {
		height: 420px;
		overflow: hidden;
	}
	.about-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#service .service-content > .row:first-child {
		margin-left: -10px;
		margin-right: -10px;
	}
	#service .service-content > .row:first-child > [class*="col-"] {
		padding-left: 10px;
		padding-right: 10px;
	}
	.contact-band {
		width: calc(58.333333% - 12px);
		margin-right: auto;
		margin-bottom: 24px;
	}
	.contact-grid {
		margin-top: 0;
	}
	.contact-route-column {
		margin-top: 0;
		z-index: 4;
	}
	.contact-route-video {
		height: 100%;
	}
	.contact-route-video video {
		height: 100%;
		aspect-ratio: auto;
	}
}

@media only screen and (min-width: 1200px) {
	.about-intro {
		display: block;
	}
	.about-image {
		height: 460px;
	}
}

@media only screen and (min-width: 1400px) {
	.about-image {
		height: 460px;
	}
	.about-image img {
		height: 100%;
	}
}


@media only screen and (min-width: 768px) and (max-width: 991px) {
	.navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item {
		padding-right: 0;
	}
	.home-area .home-content h1 {
		font-size: 33px;
		line-height: 1.3;
	}

	.about-image {
		text-align: center;
		height: 360px;
		margin-bottom: 35px;
		overflow: hidden;
	}
	.about-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 45%;
	}
	.about-area .row.align-items-center {
		align-items: flex-start;
	}
	#gallery .project-list .nav li {
		margin: 0 5px 20px;
	}
	.footer-item {
		margin-bottom: 30px;
	}
	.footer-item:nth-last-child(-n + 2) {
			margin-bottom: 0px;
	}
	.contact-route-column {
		margin-top: 0;
		align-items: center;
	}
	.contact-route-card {
		margin-top: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	.contact-route-video {
		flex: 1 1 auto;
		min-height: 0;
		height: 100%;
	}
	.contact-route-video video {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: center center;
	}
	.contact-band {
		padding: 22px;
	}
	#service .service-content > .row:first-child {
		margin-left: -10px;
		margin-right: -10px;
	}
	#service .service-content > .row:first-child > [class*="col-"] {
		flex: 0 0 50%;
		max-width: 50%;
		padding-left: 10px;
		padding-right: 10px;
	}
	.single-services-item .single-services-desc {
		width: calc(100% - 20px);
		padding: 15px 16px;
	}
	.single-services-item .single-services-desc h3 {
		font-size: 17px;
	}
	#price .price-item {
		flex: 0 0 100%;
		max-width: 100%;
	}
	#price .offset-md-3 {
		margin-left: 0;
	}
}

@media only screen and (max-width: 767px) {
	.site-brand {
		gap: 8px;
	}
	.site-brand-mark {
		width: 34px;
		height: 28px;
	}
	.site-brand-mark--footer {
		width: 38px;
		height: 31px;
	}
	.site-brand-text {
		font-size: 20px;
	}
	.navbar-nav {
		margin-top: 15px;
	}
	.navbar-b .nav-item {
		margin-bottom: 10px;
	}
	.navbar-b .nav-item:last-child {
		margin-bottom: 0px;
	}
	#navbarDefault {
		width: 100%;
		height: auto;
		max-height: none;
		overflow-y: visible;
	}
	#navbarDefault.collapse.show,
	#navbarDefault.collapsing {
		height: auto;
		max-height: none;
		overflow: visible;
	}
	.home-slider-single-item {
		background-position: 75%;
	}
	.home-slider-title {
		font-size: 33px;
	}
	#service .service-content > .row:first-child {
		margin-left: 0;
		margin-right: 0;
	}
	#service .service-content > .row:first-child > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 16px;
	}
	#service .service-content > .row:first-child > [class*="col-"]:last-child {
		margin-bottom: 0;
	}
	.contact-band {
		align-items: center;
	}
	.contact-band-links {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		flex: 0 0 100%;
		margin-left: 0;
		gap: 10px;
	}
	.contact-map-shell {
		margin-bottom: 24px;
	}
	.contact-map-frame {
		aspect-ratio: 16 / 7;
	}
	.contact-route-column {
		margin-top: 24px;
		align-items: center;
	}
	.contact-route-card {
		padding: 0;
		width: 100%;
		height: 100%;
	}
	.contact-route-video {
		height: 100%;
	}
	.contact-route-video video {
		height: 100%;
		aspect-ratio: auto;
	}
	.review-google-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		margin-top: 24px;
		padding: 18px;
	}
	.review-google-button {
		width: 100%;
		text-align: center;
	}
	.contact-form {
		padding: 22px;
	}
	.single-services-item .single-services-desc {
		width: calc(100% - 18px);
		padding: 14px 15px;
	}
	.single-services-item .single-services-desc h3 {
		font-size: 17px;
	}
	.about-image {
		text-align: center;
		height: 300px;
		margin-bottom: 35px;
		overflow: hidden;
	}
	.about-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 45%;
	}
	.footer-item {
		margin-bottom: 30px;
	}
	.footer-item:last-child{
			margin-bottom: 0px;
	}
	.contact-route-column {
		margin-top: 18px;
		align-items: center;
	}
	.contact-route-card {
		margin-top: 0;
		width: 100%;
	}
	.contact-route-copy h3 {
		font-size: 22px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
	/* Тримаємо about у дві колонки на планшетах, щоб фото не тягнуло секцію вниз */
	.about-area .row.align-items-center > .col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.about-image {
		margin-bottom: 0;
	}
	.about-image img {
		width: 100%;
		max-height: 340px;
		object-fit: cover;
	}
	.about-content {
		max-width: 560px;
	}
}


@media only screen and (max-width: 479px) {
	.site-brand {
		gap: 6px;
	}
	.site-brand-mark {
		width: 31px;
		height: 25px;
	}
	.site-brand-mark--footer {
		width: 34px;
		height: 28px;
	}
	.site-brand-text {
		font-size: 18px;
	}
	.footer-brand-text {
		font-size: 18px;
	}
	#service .section-title {
		margin-bottom: 34px;
	}
	.services-btn-box {
		margin-top: 8px;
	}
	.services-btn-box h5 {
		font-size: 11px;
		letter-spacing: 1.2px;
	}
	.navbar-nav {
		margin-top: 15px;
	}
	.navbar-b .nav-item {
		margin-bottom: 10px;
	}
	.navbar-b .nav-item:last-child {
		margin-bottom: 0px;
	}
	.about-image {
		text-align: center;
		margin-bottom: 35px;
	}
	#gallery .project-list .nav li {
		margin: 0 5px 20px;
	}
	.footer-item {
		margin-bottom: 30px;
	}
	.footer-item:last-child {
			margin-bottom: 0px;
	}
	.contact-map-shell {
		margin-bottom: 20px;
	}
	.contact-map-frame {
		aspect-ratio: 16 / 9;
	}
	.contact-route-column {
		margin-top: 16px;
		align-items: center;
	}
	.contact-route-card {
		margin-top: 0;
		padding: 0;
		width: 100%;
	}
	.contact-band {
		padding: 18px;
		border-radius: 0;
	}
	.contact-band-link {
		width: 100%;
	}
	.contact-band-link span {
		white-space: normal;
	}
	.contact-route-card h3 {
		font-size: 22px;
	}
	.contact-route-video video {
		aspect-ratio: 9 / 16;
	}
	.footer-surface {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.footer-brand {
		justify-content: center;
	}
	.footer-action-list {
		margin-left: 0;
		justify-content: center;
	}

}


@media screen and (max-width: 320px) and (min-width: 0px){
	.navbar-nav {
		margin-top: 15px;
	}
	.navbar-b .nav-item {
		margin-bottom: 10px;
	}
	.navbar-b .nav-item:last-child {
		margin-bottom: 0px;
	}
	#navbarDefault {
		width: 100%;
		height: auto;
		max-height: none;
		overflow-y: visible;
	}
	#navbarDefault.collapse.show,
	#navbarDefault.collapsing {
		height: auto;
		max-height: none;
		overflow: visible;
	}
	.about-image {
		text-align: center;
		margin-bottom: 35px;
	}
	.single-testimonial {
		padding: 24px 18px;
	}
	.single-testimonial .testi-content-inner {
		gap: 18px;
	}
	.single-testimonial .testimonial-avatar {
		width: 72px;
		height: 72px;
		flex-basis: 72px;
	}
	.single-testimonial .review-stars {
		margin-bottom: 12px;
	}
	.single-testimonial .review-quote {
		font-size: 15px;
		line-height: 1.6;
	}
	.single-testimonial .testimonial-bio .bio-info .name {
		font-size: 16px;
	}
	#gallery .project-list .nav li {
		margin: 0 2px 20px;
	}
	.footer-item {
		margin-bottom: 30px;
	}
	.footer-item:last-child {
			margin-bottom: 0px;
	}
	.footer-social-only .container {
		align-items: center;
		text-align: center;
	}
	.footer-surface {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.footer-brand {
		justify-content: center;
	}
	.footer-action-list {
		margin-left: 0;
		justify-content: center;
	}
	.footer-credit {
		text-align: center;
	}
}