/* About Page - Start */
.about-page {
	position: relative;
}

/* Секція 1: Команда та історія - Start */
.about-intro {
	padding-top: 20px;
	padding-bottom: 75px;
	position: relative;
}

.about-intro .h2 {
	text-indent: calc(5vw - (var(--container-indent) / 100 * 5));
	max-width: 880px;
}

.intro-image-left {
	display: flex;
	gap: var(--blocks-indent);
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
}
.about-intro-1 {
	display: flex;
	width: 20%;
}

.about-intro-2 {
	display: flex;
	width: 40%;
}
.container-intro-2 {
	margin-top: 35px;
	margin-bottom: 35px;
}
.intro-image-center {
	margin-bottom: 35px;
}
.about-intro-3 {
	display: flex;
	width: 100%;
}
.intro-image-right {
	display: flex;
	gap: var(--blocks-indent);
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}


.about-intro p {
	line-height: 150%;
	color: #737373;
}

.about-intro-4 {
	display: flex;
	width: 20%;
}

.floating-elements {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.floating-elements img {
	position: absolute;
}
.garlic {
	bottom: 5vw;
	left: 5vw;
	width: 15vw;
}
.pepper {
	top: 4vw;
	left: 3vw;
	width: 12vw;
}
.shrimp {
	top: 2vw;
	right: 5vw;
	width: 12vw;
}
.salt {
	bottom: 12vw;
	right: 5vw;
	width: 15vw;
}

@media (max-width: 1480px) {
	.about-intro .h2 {
		max-width: 880px;
	}
	.about-intro-1 {
		width: 28%;
	}
	.about-intro-2 {
		width: 42%;
	}
	.about-intro-4 {
		width: 28%;
	}
	.garlic {
		bottom: 7vw;
		left: 5vw;
		width: 17vw;
	}
}

@media (max-width: 1279px) {
	.about-intro {
		padding-top: 50px;
		padding-bottom: 70px;
	}
	.container-intro-2 {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.about-intro-3 {
		border-radius: 15px;
	}

	.about-intro .h1 {
		margin-left: 0;
		margin-bottom: 40px;
	}

	.marked-word {
		font-size: 20px;
		line-height: 20px;
		transform: rotate(0);
		padding-top: 0;
		margin-bottom: 15px;
	}

	.intro-text p {
		font-size: 16px;
		line-height: 22px;
	}
	.about-intro .h2 {
		text-indent: 0;
	}
	.about-intro-5 {
		margin-top: 20px;
	}
}

@media (max-width: 768px) {
	.about-intro {
		padding-top: 0px;
		padding-bottom: 50px;
	}

	.float-item {
		display: none;
	}

	.about-intro .col-60 {
		width: 100%;
	}

	.about-intro .col-25,
	.about-intro .col-50 {
		width: 100%;
	}
	.about-intro .col-50 {
		order: 1;
	}
	.about-intro .col-25:nth-child(1) {
		order: 2;
	}
	.about-intro .col-25:nth-child(3) {
		display: none;
	}
}
/* Секція 1: Команда та історія - End */

/* Секція 2: Наша історія - Start */
.our-story {
	padding-top: 75px;
	padding-bottom: 100px;
	background-color: var(--light-gray);
	border-radius: 40px;
}

.col-80 .h2:nth-child(2) {
	text-indent: calc(10vw);
	margin-bottom: 40px;
}

.story-image {
	padding-left: 8.5vw;
}

.about-story {
	width: 100%;
	height: auto;
	border-radius: 15px;
}

.story-content {
	display: flex;
	flex-direction: column;
	max-width: 94%;
}

.story-content p {
	color: #737373;
	max-width: 90%;
	line-height: 150%;
}

@media (max-width: 1480px) {
	.our-story .h2 {
		margin-left: 30px;
	}
}

@media (max-width: 1279px) {
	.our-story {
		padding-top: 50px;
		padding-bottom: 70px;
	}

	.our-story .h2 {
		margin-left: 0;
		margin-bottom: 0;
	}

	.col-80 .h2:nth-child(2) {
		text-indent: 0;
		margin-bottom: 10px;
	}

	.story-content {
		padding-right: 0;
	}

	.story-content p {
		font-size: 16px;
		line-height: 22px;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.our-story .col-50 {
		width: 100%;
	}

	.story-image {
		padding-right: 0;
		margin-bottom: 30px;
	}
}
/* Секція 2: Наша історія - End */

/* Секція 3: Хрусткі з нами - Start */
.crunchy-with-us {
	padding: 150px 0 130px 0;
	position: relative;
	background: url(/wp-content/themes/shop/img/about/about-line.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0% 40%;
}

.crunchy-title {
	font-family: var(--font-family-1);
	font-size: 42px;
	line-height: 150%;
	font-weight: 400;
	margin-bottom: 40px;
	text-align: center;
}

.crunchy-title .primary {
	font-weight: 800;
}

.circle-part {
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	vertical-align: middle;
	margin: 0 10px;
}

.crunchy-description {
	max-width: 800px;
	margin: 0 auto;
}

.crunchy-description p {
	color: #737373;
	text-align: center;
	margin-bottom: 25px;
}
.crunchy-description p b {
	color: #383838;
	font-weight: 800;
}

.floating-packages {
	position: relative;
	height: 0;
}

.float-package {
	position: absolute;
	z-index: 2;
}

.package-left {
	left: -1vw;
	bottom: -1vw;
	max-width: 21vw;
}

.package-right {
	right: -1vw;
	bottom: 3vw;
	max-width: 21vw;
}

.float-crisp {
	position: absolute;
	z-index: 1;
}

.crisp-1 {
	left: 25vw;
	bottom: 4vw;
	width: 4.5vw;
	object-fit: contain;
}

.crisp-2 {
	left: 45vw;
	top: -4vw;
	width: 7vw;
	object-fit: contain;
}

.crisp-3 {
	right: 25vw;
	bottom: 6vw;
	width: 4.5vw;
	object-fit: contain;
}


@media (max-width: 1480px) {
	.crunchy-title {
		font-size: 36px;
		line-height: 56px;
	}

	.package-left, .package-right {
		max-width: 160px;
	}
}

@media (max-width: 1279px) {
	.crunchy-with-us {
		padding: 20px 0;
		background: url(/wp-content/themes/shop/img/about/about-line-mob.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
	.floating-packages {
		position: absolute;
		height: 100%;
	}
	.package-left {
		left: 10vw;
		top: 0;
		max-width: initial;
		width: 80vw;
	}
	
	.package-right {
		left: 15vw;
		bottom: 10vw;
		max-width: initial;
		width: 70vw;
	}
	.crunchy-title {
        margin-top: 100vw;
		font-size: 28px;
		line-height: 46px;
		margin-bottom: 20px;
	}
	.crunchy-description {
		margin-bottom: 75vw;
	}
	.circle-part {
		width: 46px;
		height: 46px;
	}

	.crunchy-description p {
		font-size: 16px;
		line-height: 22px;
	}


	.float-crisp {
		display: none;
	}
}

@media (max-width: 768px) {
	.crunchy-title {
		font-size: 20px;
		line-height: 36px;
	}
	.circle-part {
		width: 36px;
		height: 36px;
		margin: 0 5px;
	}
}
/* Секція 3: Хрусткі з нами - End */

/* Секція 4: Банер - Start */
.banner-img {
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 20px;
}

@media (max-width: 768px) {
	.about-banner {
		margin-bottom: 50px;
	}
}
/* Секція 4: Банер - End */

/* Секція 5: Наші переваги - Start */
.our-advantages {
	padding-top: 150px;
	padding-bottom: 35px;
}

.our-advantages .h3 {
	max-width: 40vw;
	margin-bottom: 35px;
}

.center-package {
	display: flex;
	justify-content: center;
	align-items: center;
}

.center-package-img {
	max-width: 100%;
	height: auto;
	transform: translateX(-10px);
}
.advantage-card {
	display: flex;
	align-items: flex-start;
	background: #F9F9F9;
	padding: 25px;
	border-radius: 20px;
	width: calc(100% - 50px);
}
.col-33.left-advantages {
	display: flex;
	gap: 30px;
}
.col-33.left-advantages .advantage-card:nth-child(1) {
	transform: translateX(2.35vw);
}
.col-33.left-advantages .advantage-card:nth-child(3) {
	transform: translateX(5.7vw);
}
.col-33.right-advantages {
	display: flex;
	gap: 30px;
}
.col-33.right-advantages .advantage-card:nth-child(1) {
	transform: translateX(-2.35vw);
}
.col-33.right-advantages .advantage-card:nth-child(3) {
	transform: translateX(-4.0vw);
}
.advantage-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin-right: 20px;
}

.advantage-content {
	flex: 1;
}

.advantage-title {
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	margin-bottom: 5px;
}

.advantage-text {
	font-size: 14px;
	line-height: 18px;
	color: #73413A;
}

@media (max-width: 1480px) {
	.advantage-card {
		padding: 20px;
	}
	.advantage-title {
		font-size: 18px;
		line-height: 22px;
	}
}

@media (max-width: 1279px) {
	.our-advantages {
		padding-top: 50px;
		padding-bottom: 70px;
	}

	.our-advantages .h2 {
		margin-bottom: 40px;
	}
	.our-advantages .h3 {
		max-width: 100%;
		margin-bottom: 25px;
	}
	.center-package-img {
        transform: translateX(0px);
        width: 100%;
    }
	.center-package {
        margin-top: 30px;
        margin-bottom: 10px;
    }
	.advantage-card {
		display: flex;
		flex-direction: column;
        gap: 15px;
		width: calc(100% - 0px);
		transform: translateX(0vw) !important;
	}
}

@media (max-width: 768px) {
	.our-advantages .col-33 {
		width: 100%;
	}

	.center-package-img {
		max-width: 1000px;
	}
}
/* Секція 5: Наші переваги - End */

/* Секция 6: Де купити Хвилясті офлайн? - Start */
.where-to-buy {
	padding: 75px 0 75px 0;
	background: #F9F9F9;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
}

.where-to-buy .h3 {
	margin-bottom: 30px;
}

.shops-slider-wrapper {
	position: relative;
}

.shops-slider .swiper-slide {
	height: 510px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shops-slider .swiper-wrapper {
	transition-timing-function: linear !important; /* Линейное движение без ускорения и замедления */
}

.shops-slider .swiper-slide img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
@media (max-width: 1480px) {
	.shops-slider .swiper-slide {
		height: 400px;
	}	
}
@media (max-width: 1024px) {
	.where-to-buy .h3 {
		margin-bottom: 20px;
	}
	.where-to-buy {
		padding: 50px 0 50px 0;
		background: #F9F9F9;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
	}
	.shops-slider .swiper-slide {
		height: 170px;
	}	
}

/* Секция 6: Де купити Хвилясті офлайн? - End */

/* Секция 7: Відгуки - Start */
.reviews {
	background: #F9F9F9;
	padding: 75px 0 75px;
}

.reviews .h3 {
	margin-bottom: 30px;
}

.reviews-slider-wrapper {
	position: relative;
}

.review-card {
	display: flex;
	flex-direction: column;
}

.review-img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 15px;
}

.review-author {
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
	margin-bottom: 5px;
}

.review-social {
	display: flex;
	align-items: center;
	gap: 6px;
}

.social-icon {
	width: 17px;
	height: 17px;
	object-fit: contain;
}

.social-name {
	font-size: 14px;
	font-weight: 700;
	color: #491D16;
}
.reviews .reviews-view-all {
	margin-top: 30px;
}
@media (max-width: 768px) {
	.reviews {
		padding: 30px 0 50px;
	}

	.reviews .h2 {
		margin-bottom: 20px;
	}

	.review-author {
		font-size: 16px;
		line-height: 20px;
	}
}
/* Секция 7: Відгуки - End */