@media screen and (max-width: 1920px) {
	.hero__inner {
		padding-bottom: 60px;
	}
}

@media screen and (max-width: 1680px) {
	.section-w-bg::before {
		max-width: 1200px;
	}
	.container {
		width: 1200px;
	}
	.reviews-slider {
		max-width: 1200px;
		padding: 0px 20px;
	}
	.after__inner {
		grid-template-columns: 1fr 1fr;
	}
	.reviewsSlider .text {
		font-size: 14px;
	}
	.review-name {
		text-align: left;
		font-size: 16px;
	}
	.review-span {
		font-size: 14px;
	}
	.review-stars--wrap span {
		font-size: 16px;
	}
	.oil-change-bg-text {
		height: 60%;
	}
	.hero-title span {
		font-size: 50px;
	}
	.hero-text p {
		font-size: 26px;
	}
	.hero__inner {
		padding-block: 100px;
	}
	.hero-btn {
		gap: 20px;
	}
	.how {
		margin-top: 120px;
	}
	.header-nav__link {
		font-size: 14px;
	}
	.header-nav {
		gap: 25px;
	}
	.how__inner {
		padding-block: 60px;
	}
	.how-subtitle {
		font-size: 18px;
	}
	.how-grid--item .num {
		font-size: 38px;
	}
	.how-grid--item .icon {
		width: 50px;
		height: 50px;
	}
	.how-grid--item .icon svg {
		width: 35px;
		height: 35px;
	}
	.how-grid--item .title {
		font-size: 20px;
	}
	.how-grid--item .text {
		font-size: 16px;
	}
	.package {
		gap: 20px;
		--card-pad: 20px;
	}
	.package-head__filter p,
	.package-head__sub p {
		font-size: 14px;
	}
	.package-price--self {
		font-size: 24px;
	}
	.package-price--self span {
		font-size: 18px;
	}
	.package-price--tax {
		font-size: 12px;
	}
	.package-name {
		font-size: 16px;
		padding: 10px 16px;
	}
	.package-body__title {
		font-size: 16px;
	}
	.package-body__item p {
		font-size: 16px;
	}
	.package-bottom--texts p {
		font-size: 16px;
	}
	.service span {
		font-size: 16px;
	}
	.services__subtitle {
		font-size: 18px;
		margin-top: 15px;
	}
	.services__subtext span {
		padding-left: 5px;
	}
	.yellow-icons-item {
		gap: 15px;
	}
	.yellow-icons--text h3 {
		font-size: 18px;
	}
	.yellow-icons--text p {
		font-size: 16px;
	}
	/* .after__img {
		margin-top: 30px;
		margin-bottom: 30px;
	} */
	.book-title {
		font-size: 32px;
	}
	.why__inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.why-content {
		gap: 50px;
	}
	.why-img img {
		width: 100%;
	}
	.main-btn {
		font-size: 18px;
	}
	.yellow-icons--text {
		gap: 8px;
	}
	.area-list__self {
		column-gap: 10px;
	}
	.header-info p {
		font-size: 14px;
	}
	.after__img {
		width: 80%;
	}
}
@media screen and (max-width: 1680px) {
	.hero__inner {
		padding-top: 50px;
		padding-bottom: 120px;
	}
}

@media screen and (max-width: 1280px) {
	.container {
		width: 1064px;
		padding: 0 20px;
	}
	.hero-title span {
		font-size: 40px;
	}
	.section-w-bg::before {
		max-width: 1024px;
	}
	.package-body__list {
		gap: 8px;
	}
	.quote .bottom-line,
	.quote .topline {
		font-size: 28px;
	}
	.quote {
		max-width: 800px;
	}
	.quote .author {
		padding-right: 20px;
		font-size: 18px;
		margin-top: 20px;
	}
	.section-title span,
	.section-title {
		font-size: 34px;
	}
	.area-list__subtext span,
	.area-list__subtext {
		font-size: 16px;
	}
	.footer__inner {
		flex-wrap: wrap;
	}
	.footer-col4 nav {
		margin-bottom: 15px;
	}
	.made-by {
		font-size: 14px;
	}
	.booking-svg {
		width: 65%;
	}
	.booking-content {
		padding-block: 30px;
	}
	.footer {
		padding-top: 30px;
		padding-bottom: 20px;
	}
	.area-list__item span {
		font-size: 14px;
	}
	.yellow-icons--text h3 {
		font-size: 16px;
	}
	.yellow-icons--text {
		gap: 5px;
	}
	.yellow-icons--text p {
		font-size: 14px;
	}
	.yellow-icons-list {
		gap: 20px;
	}
	.yellow-icons--icon {
		width: 40px;
		height: 40px;
	}
	.yellow-icons-item {
		gap: 20px;
		align-items: flex-start;
	}
	.hero-btn,
	.booking-content .main-btn,
	.after__btn {
		max-width: 275px;
	}
	.hero-text p {
		font-size: 20px;
	}
	.hero-btn-text {
		font-size: 12px;
	}
	.how-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}
	.services__subtitle {
		font-size: 16px;
	}
	.section-margin {
		margin-top: 100px;
	}
	.package-body__list {
		margin-top: 15px;
	}
	.header-logo {
		width: 80px;
		height: 80px;
	}
}

@media screen and (max-width: 1080px) {
	.header-nav__link {
		font-size: 16px;
	}
	.header-info {
		display: none;
	}
	.container {
		width: 840px;
	}
	.section-w-bg::before {
		display: none;
	}
	.header-nav {
		display: none;
	}
	.mobile-menu,
	.header-burger {
		display: block;
	}
	.header-logo {
		width: 44px;
		height: 45px;
	}
	.section-title span,
	.section-title {
		font-size: 30px;
	}
	.reviews-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.services__inner {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}
	.services__text {
		padding-bottom: 0;
	}
	.services__list {
		display: block;
	}
	.how-grid {
		margin-top: 50px;
	}
	.why__inner,
	.how__inner {
		padding: 20px;
		border-radius: 20px;
		background: #fafafa;
	}
	:root {
		--header-height: 65px;
	}
	.hero__inner {
		padding-top: 60px;
		justify-content: flex-start;
		gap: 40px;
	}
	.hero-text p {
		font-size: 18px;
	}
	.hero-title span {
		font-size: 34px;
	}
	.hero__inner {
		height: calc(80vh - var(--header-height) - 100px);
	}
	.how {
		margin-top: 100px;
	}
	.why-content {
		gap: 25px;
		display: flex;
		/* flex-direction: column; */
	}
	.why-img {
		aspect-ratio: 295/233;
		width: 50%;
	}
	.why-img img {
		position: relative;
	}
	.header-btn .main-btn {
		padding: 6px 15px;
		font-size: 14px;
		font-weight: 600;
	}
	.package-body__item p {
		font-size: 14px;
	}
	.package-bottom--texts {
		gap: 10px;
	}
	.package-bottom--texts p {
		font-size: 14px;
	}

	.area-content {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}
	.area-map img {
		position: relative;
	}
	.area-map {
		margin-right: 0;
		aspect-ratio: 67/51;
		width: 50%;
	}
	.area-list__item span {
		font-size: 16px;
	}
	.area-list__subtext {
		margin-top: 30px;
	}
	.packages-swiper-wrap {
		margin-top: 10px;
	}
	.mobile-menu__inner .header-nav {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	.mobile-menu__inner .header-info {
		display: flex;
	}
	.mobile-menu__inner {
		display: flex;
		flex-direction: column;
		gap: 10px;
		justify-content: space-between;
		height: calc(80vh);
		border-radius: 20px;
		background: #fafafa;
		width: 100%;
		padding: 30px;
		margin-top: 85px;
		margin-bottom: 20px;
	}
	.header-info p {
		font-size: 14px;
	}
	.mobile-menu .container {
		display: flex;
	}

	.header-nav__link {
		text-align: left;
		padding: 9px 15px;
		display: block;
		width: 100%;
		border-radius: 10px;
	}
	.header-nav__link:hover {
		background-color: var(--main-white);
	}

	.header-nav__link::before {
		display: none;
	}
	.booking {
		margin-top: 100px;
	}
	.after__img {
		width: 90%;
	}
	.hero-bg {
		top: 52px;
	}
	.hero__inner {
		justify-content: center;
		height: calc(90vh - var(--header-height));
	}
}

@media screen and (max-width: 800px) {
	.area-map {
		width: 70%;
	}
	.why-img {
		width: 70%;
	}
	.why-content {
		flex-direction: column;
	}
	.after__img {
		width: 100%;
	}
	.container {
		width: 100%;
	}
	.oil-change-bg-text {
		display: none;
	}
	.book-title {
		font-size: 26px;
	}
	.booking-img {
		width: 52vw;
	}
	.section-margin,
	.booking {
		margin-top: 80px;
	}
	.reviewsSlider-slide .img {
		width: 62px;
		height: 62px;
	}
	.section-title span,
	.section-title {
		font-size: 26px;
	}
	.quote .topline {
		margin-bottom: 10px;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 3px;
	}

	.quote .author {
		font-size: 16px;
		margin-top: 20px;
		padding: unset;
	}
	.quote .bottom-line,
	.quote .topline {
		font-size: 26px;
	}
	.hero-title span {
		font-size: 26px;
	}

	.hero-btn {
		align-items: flex-start;
		gap: 10px;
	}

	.hero__inner {
		padding-top: 50px;
		height: calc(100vh - var(--header-height));
		justify-content: flex-start;
		gap: 30px;
		padding-bottom: 0;
	}
	.how {
		margin-top: 70px;
	}
	.hero-bg {
		width: 75vw;
		top: 20px;
	}
	.reviewsSlider-slide {
		padding: 20px;
	}
	.head {
		gap: 10px;
	}
	.area-content {
		margin-top: 15px;
	}
	.services__list {
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.main-btn {
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: 14px;
		border-radius: 8px;
	}
	.hero-btn .main-btn {
		max-width: 141px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@media screen and (max-width: 620px) {
	.quote .bottom-line,
	.quote .topline {
		font-size: 20px;
	}
	.quote .topline span {
		width: 100%;
		padding: 8px 25px;
	}
	.quote .topline {
		gap: 10px;
	}
	.quote {
		padding: 0px 20px;
	}
	.area-map,
	.why-img {
		width: 100%;
	}
	.area-list__self {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		row-gap: 15px;
	}
	.after__inner {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	.after__img {
		margin: 0;
	}
	.after__img,
	.after__l {
		display: contents;
	}
	.after__btn {
		order: 1;
	}
	.how-grid {
		grid-template-columns: 1fr;
	}

	.services {
		grid-template-columns: 1fr 1fr;
	}
	.how-grid--item .num {
		font-size: 36px;
	}
	.how-grid--item .title {
		font-size: 16px;
	}
	.how-grid--item .text {
		font-size: 14px;
	}
	.how-subtitle {
		font-size: 16px;
	}
	.hero {
		display: flex;
		flex-direction: column-reverse;
	}
	.hero-bg {
		position: relative;
		top: 0;
		width: 100%;
		aspect-ratio: unset;
		margin-top: -20px;
		overflow: hidden;
	}
	.hero-bg img {
		width: 150%;
		transform: translateX(-15%);
	}
	.hero__inner {
		height: auto;
		padding-top: 40px;
	}
	.hero-svg {
		top: 40px;
	}
	.hero-title--span-bg {
		padding: 5px 12px;
	}
	.booking-content {
		max-width: 100%;
		padding-top: 30px;
		padding-bottom: 0;
		gap: 30px;
	}
	.booking-svg {
		width: 100%;
		height: 80%;
		display: none;
	}
	.booking-img {
		display: none;
	}
	.package-body__list {
		margin-top: 15px;
	}
	.booking {
		padding-bottom: 30px;
		background: var(--main-yellow);
	}
	.book-title {
		max-width: 385px;
	}
	.booking-content .main-btn {
		align-self: center;
	}
}

@media screen and (max-width: 550px) {
	.review-stars--wrap span {
		font-size: 14px;
	}
	.footer__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.footer-col3,
	.footer-col4,
	.footer-col1 {
		grid-column: span 2;
	}

	.footer-col3 {
		order: 1;
	}
	.footer-col2 {
		order: 2;
	}
	.footer-col1 {
		order: 3;
		padding-top: 20px;
		border-top: 1px solid var(--main-yellow);
	}
	.footer-col4 {
		order: 4;
	}
	.hero .container,
	.hero__inner {
		display: contents;
	}
	.hero {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 30px 0px 40px;
	}
	.hero-title {
		padding: 0px 20px;
		order: 1;
	}
	.hero-text {
		padding: 0px 20px;
		order: 3;
	}
	.hero-btn {
		padding: 0px 20px;
		order: 4;
		max-width: 100%;
		align-items: center;
	}
	.hero-btn .main-btn {
		max-width: 170px;
	}
	.hero-btn-text {
		font-size: 10px;
	}
	.hero-bg {
		order: 2;
	}
	.hero-svg {
		top: 20px;
	}
}

@media screen and (max-width: 360px) {
	.review-stars--wrap {
		flex-wrap: wrap;
	}
	.review-span {
		text-align: right;
	}
	.book-title {
		font-size: 18px;
	}
}