/* Общие стили */
:root {
	--primary-color: #00A99D;
	--secondary-color: #008C82;
	--accent-color: #359793;
	--light-color: #F1F8E9;
	--dark-color: #0e6d69;
	--text-color: #333333;
	--light-text: #ffffff;
	--gray-bg: #f5f5f5;
}

body {
	font-family: 'Fira Sans', sans-serif;
	color: var(--text-color);
	background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Unbounded', cursive;
	font-weight: 500;
}

/* Стили меню */
.navbar {
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	padding: 15px 0;
}

.navbar-brand {
	display: flex;
	align-items: center;
}

.brand-text {
	font-family: 'Unbounded', cursive;
	font-weight: 700;
	color: var(--primary-color);
	margin-left: 10px;
	font-size: 1.4rem;
}

.nav-link {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 500;
	color: var(--text-color);
	padding: 8px 15px;
	position: relative;
	transition: color 0.3s ease;
}

.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background-color: var(--primary-color);
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

.nav-link:hover, .nav-link.active {
	color: var(--primary-color);
}

.nav-link:hover:after, .nav-link.active:after {
	width: 70%;
}

.login-btn {
	border: 1px solid var(--primary-color);
	border-radius: 20px;
	margin-left: 10px;
	padding: 6px 15px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.login-btn:hover {
	background-color: var(--primary-color);
	color: var(--light-text) !important;
}

@media (max-width: 991px) {
	.navbar-collapse {
		background-color: white;
		padding: 15px;
		border-radius: 10px;
		margin-top: 10px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	.login-btn {
		margin: 10px 0;
		justify-content: center;
	}
}








.hero-section {padding-top: 100px; padding-bottom: 80px; background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)); background-size: cover; position: relative;}
.hero-title {font-family: 'Unbounded', cursive; font-weight: 700; font-size: 2.5rem; color: #00A99D; margin-bottom: 20px;}
.hero-subtitle {font-family: 'Unbounded', cursive; font-weight: 500; font-size: 1.8rem; color: #00A99D; margin-bottom: 30px;}
.hero-text {font-family: 'Fira Sans', sans-serif; font-size: 1.1rem; color: #333; margin-bottom: 25px; line-height: 1.6;}
.hero-buttons {display: flex; gap: 15px; margin-top: 30px;}
.btn {text-decoration: none; padding: 12px 25px; border-radius: 30px; font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 1rem; transition: all 0.3s ease; display: inline-block;}
.btn-primary {background-color: #00A99D; color: white; border: none;}
.btn-outline {background-color: transparent; color: #00A99D; border: 1px solid #00A99D;}
.btn-primary:hover {background-color: #008C82;}
.btn-outline:hover {background-color: #00A99D; color: white;}
.hero-image-container {position: relative; margin-top: 30px;}
.hero-image {max-width: 100%; border-radius: 10px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
.discount-badge {position: absolute; top: -20px; right: -20px; background-color: #00A99D; color: white; padding: 15px; border-radius: 50%; width: 90px; height: 90px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.discount-value {font-family: 'Unbounded', cursive; font-weight: 700; font-size: 1.5rem;}
.discount-text {font-family: 'Fira Sans', sans-serif; font-size: 0.9rem;}
.wave-divider {position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0;background:#f1f8e9}
.wave-divider svg {position: relative; display: block; width: calc(100% + 1.3px); height: 50px; fill: #ffffff;}

@media (max-width: 991px) {
	.hero-section {padding-top: 80px; text-align: center;}
	.hero-buttons {justify-content: center;}
	.hero-image-container {margin-top: 40px;}
}









.how-it-works-section {padding: 80px 0; background-color: #F1F8E9;}
.section-header {margin-bottom: 50px;}
.section-title {font-family: 'Unbounded', cursive; font-weight: 600; font-size: 2.2rem; color: #00A99D; margin-bottom: 15px;}
.section-subtitle {font-family: 'Fira Sans', sans-serif; font-size: 1.1rem; color: #333; max-width: 700px; margin: 0 auto;}
.step-card {background-color: white; border-radius: 15px; padding: 30px; height: 100%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;}
.step-card:hover {transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
.step-number {width: 80px; height: 80px; border-radius: 50%; background-color: #00A99D; color: white; display: flex; justify-content: center; align-items: center; margin: 0 auto 25px; font-family: 'Unbounded', cursive; font-size: 2rem; font-weight: 600;}
.step-title {font-family: 'Unbounded', cursive; font-weight: 500; font-size: 1.3rem; text-align: center; color: #00A99D; margin-bottom: 15px;}
.step-description {font-family: 'Fira Sans', sans-serif; font-size: 1rem; text-align: center; color: #333;}
.text-center {text-align: center;}
.mt-5 {margin-top: 3rem;}

@media (max-width: 767px) {
	.step-card {margin-bottom: 30px;}
}








.package-section {padding: 80px 0; background-color: #ffffff;}
.period-switch-container {display: flex; justify-content: center; margin-bottom: 40px;}
.period-switch {display: flex; background-color: #F1F8E9; border-radius: 30px; padding: 5px;gap:1rem;}
.period-btn {border: none; background-color: #00A99D05; color: #333; padding: 10px 25px; border-radius: 25px; font-family: 'Fira Sans', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease;}
.period-btn.active {background-color: #00A99D; color: white;}
.package-card {border: 1px solid #e0e0e0; border-radius: 1.5rem; padding: 30px; height: 100%; background-color: white; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden;}
.package-card:hover {transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}
.package-card.popular {border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-10px);padding-top: 3rem;}
.popular-badge {position: absolute; top: 0; left: 0; width: 100%; padding: 8px; background-color: #00A99D; color: white; text-align: center; font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 0.9rem;}
.package-radio {position: absolute; top: 0px; right: 0px; z-index: 1;}
.package-radio input[type="radio"] {display: none;}
.package-radio label {display: inline-block; width: 24px; height: 24px; border: 2px solid #00A99D; border-radius: 50%; cursor: pointer; position: relative;}
.package-radio input[type="radio"]:checked + label:after {content: ''; position: absolute; width: 12px; height: 12px; background-color: #00A99D; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.package-content {margin-top: 20px;}


.package-title {font-family: 'Unbounded', cursive; font-weight: 600; font-size: 1.5rem; color: #00A99D; margin-bottom: 5px;position:Relative;}
.package-title h3 { padding-right:2rem; }
.package-subtitle {font-family: 'Fira Sans', sans-serif; font-size: 0.9rem; color: #666; margin-bottom: 20px;}
.package-price-container {margin-bottom: 25px;}
.package-price {font-family: 'Unbounded', cursive; font-size: 2.3rem; font-weight: 700; color: #00A99D;}
.package-price-period {font-family: 'Fira Sans', sans-serif; font-size: 0.9rem; color: #666;}
.package-features {list-style-type: none; padding-left: 0; margin-bottom: 30px;}
.package-feature-item {font-family: 'Fira Sans', sans-serif; font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center;}
.feature-icon {color: var(--primary-color); margin-right: 10px;}
.package-select-btn {width: 100%; padding: 12px; border-radius: 30px; font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 1rem; cursor: pointer; transition: all 0.3s ease;}
.btn-primary {background-color: var(--primary-color); color: white; border: none;}
.btn-outline {background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color);}
.btn-primary:hover {background-color: var(--secondary-color);}
.btn-outline:hover {background-color: var(--primary-color); color: white;}

@media (max-width: 991px) {
	.package-card.popular {transform: none;}
}









#product-selection, #personal-data {
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease, height 0.5s ease;
	margin-top: 0;
}

#product-selection.active, #personal-data.active {
	opacity: 1;
	visibility: visible;
	height: auto;
	margin-top: 60px;
}

/* Модификация стилей для плавного скролла */
html {
	scroll-behavior: smooth;
}


.product-selection-container {background-color: var(--gray-bg); border-radius: 15px; padding: 30px; margin-bottom: 40px;}
.product-selection-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.product-selection-title {font-family: 'Unbounded', cursive; font-weight: 600; font-size: 1.5rem; color: var(--primary-color); margin-bottom: 10px;}
.product-selection-subtitle {font-family: 'Fira Sans', sans-serif; font-size: 1rem; color: #666; margin-bottom: 0;}
.reset-btn {background-color: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 8px 15px; border-radius: 20px; font-family: 'Fira Sans', sans-serif; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease;}
.reset-btn:hover {background-color: var(--primary-color); color: white;}
.product-tabs {border-bottom: 1px solid #dee2e6; margin-bottom: 30px; padding-left: 0; list-style: none; display: flex;}
.product-tab-item {margin-bottom: -1px;}
.product-tab-link {font-family: 'Fira Sans', sans-serif; color: #666; font-weight: 500; padding: 10px 20px; border: none; background-color: transparent; position: relative; cursor: pointer;}
.product-tab-link.active {color: var(--primary-color);}
.product-tab-link::after {content: ''; position: absolute; width: 0; height: 2px; background-color: var(--primary-color); bottom: 0; left: 50%; transform: translateX(-50%); transition: width 0.3s ease;}
.product-tab-link.active::after {width: 80%;}

@media (max-width: 767px) {
	.product-selection-header {flex-direction: column; align-items: flex-start;}
	.reset-btn {margin-top: 15px;}
	.product-tabs {overflow-x: auto; white-space: nowrap; padding-bottom: 10px;}
	.product-tab-link {padding: 10px 15px;}
}






.product-card {border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; transition: all 0.3s ease; height: 100%;}
.product-card:hover {box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}
.product-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;}
.product-name {font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1.1rem; color: #333; margin: 0;}
.product-checkbox-wrapper {position: relative; width: 24px; height: 24px;}
.product-checkbox {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.product-checkbox-label {position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #f8f9fa; border: 2px solid var(--primary-color); border-radius: 4px; cursor: pointer;}
.product-checkbox:checked + .product-checkbox-label:after {content: '\2714'; position: absolute; display: block; left: 6px; top: 0px; color: var(--primary-color); font-size: 16px;}
.product-footer {display: flex; justify-content: space-between; align-items: center;}
.product-quantity-wrapper {display: flex; align-items: center;}
.quantity-label {font-family: 'Fira Sans', sans-serif; color: #666; margin-right: 10px;}
.product-quantity {padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Fira Sans', sans-serif;}
.product-volume {font-family: 'Fira Sans', sans-serif; font-weight: 600; color: var(--primary-color);}




.control-buttons {display: flex; justify-content: center; gap: 20px; margin-top: 40px;}
.btn i {margin: 0 5px;}






#personal-data {margin-top: 60px; display: none;}
.personal-data-container {background-color: var(--gray-bg); border-radius: 15px; padding: 30px; margin-bottom: 40px;}
.form-title {font-family: 'Unbounded', cursive; font-weight: 600; font-size: 1.5rem; color: var(--primary-color); margin-bottom: 30px; text-align: center;}
.form-group {margin-bottom: 20px;}
.form-label {display: block; font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 1rem; color: #333; margin-bottom: 8px;}
.required-mark {color: var(--primary-color);}
.form-input, .form-textarea, .form-select {width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-family: 'Fira Sans', sans-serif; font-size: 1rem; transition: border-color 0.3s ease;}
.form-input:focus, .form-textarea:focus, .form-select:focus {border-color: var(--primary-color); outline: none;}
.form-textarea {resize: vertical;}
.payment-options {display: flex; flex-direction: column; gap: 10px;}
.payment-option {display: flex; align-items: center;}
.payment-radio {margin-right: 10px;}
.payment-label {font-family: 'Fira Sans', sans-serif; font-size: 1rem; color: #333; margin: 0;}
.terms-group {margin-bottom: 30px;}
.terms-wrapper {display: flex; align-items: flex-start;}
.terms-checkbox {margin-right: 10px; margin-top: 5px;}
.terms-label {font-family: 'Fira Sans', sans-serif; font-size: 0.9rem; color: #666; margin: 0;}
.terms-link {color: var(--primary-color); text-decoration: none;}
.terms-link:hover {text-decoration: underline;}
.form-buttons {display: flex; justify-content: center; gap: 20px; margin-top: 20px;}

@media (max-width: 767px) {
	.form-buttons {flex-direction: column; align-items: center;}
	.form-buttons .btn {width: 100%; margin-bottom: 10px;}
}







.benefits-section {padding: 80px 0; background-color: var(--gray-bg);}
.benefit-card {background-color: white; border-radius: 15px; padding: 30px; height: 100%; text-align: center; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease;}
.benefit-card:hover {transform: translateY(-5px);}
.benefit-icon-wrapper {width: 70px; height: 70px; border-radius: 50%; background-color: #E8F5E9; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px;}
.benefit-icon {font-size: 30px; color: var(--primary-color);}
.benefit-title {font-family: 'Unbounded', cursive; font-weight: 500; font-size: 1.3rem; color: var(--primary-color); margin-bottom: 15px;}
.benefit-description {font-family: 'Fira Sans', sans-serif; font-size: 1rem; color: #333;}
.testimonials-container {margin-top: 60px;}
.testimonials-title {font-family: 'Unbounded', cursive; font-weight: 500; font-size: 1.5rem; color: var(--primary-color); margin-bottom: 30px; text-align: center;}
.testimonial-card {background-color: white; border-radius: 15px; padding: 25px; height: 100%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);}
.testimonial-header {display: flex; align-items: center; margin-bottom: 15px;}
.testimonial-avatar {width: 50px; height: 50px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; justify-content: center; align-items: center; font-family: 'Unbounded', cursive; font-size: 1.2rem; font-weight: 600; margin-right: 15px;}
.testimonial-author {flex: 1;}
.author-name {font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 1.1rem; color: #333; margin: 0;}
.subscription-period {font-family: 'Fira Sans', sans-serif; font-size: 0.9rem; color: #666; margin: 0;}
.testimonial-text {font-family: 'Fira Sans', sans-serif; font-size: 1rem; color: #333; font-style: italic;}
.testimonial-rating {color: #FFD700;}














/* CSS для мобильной адаптации */

/* Общие стили для мобильной версии */
@media (max-width: 991px) {
	.section-title {font-size: 1.8rem;}
	.section-subtitle {font-size: 1rem;}

	/* Мобильное меню */
	.navbar-toggler {display: block; background: none; border: none; cursor: pointer; padding: 0;}
	.navbar-toggler .toggler-icon {display: block; width: 25px; height: 2px; background-color: var(--primary-color); margin: 5px 0; transition: 0.3s;}
	.navbar-collapse {display: none; position: absolute; top: 70px; left: 0; right: 0; background-color: white; padding: 15px; border-radius: 0 0 10px 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
	.navbar-collapse.show {display: block;}
	.navbar-nav {flex-direction: column; width: 100%;}
	.nav-item {margin: 5px 0;}
	.nav-link {padding: 10px 0;}
	.login-btn {width: fit-content; margin: 10px 0;}

	/* Hero секция */
	.hero-section {text-align: center; padding-top: 80px;}
	.hero-title {font-size: 2rem;}
	.hero-subtitle {font-size: 1.5rem;}
	.hero-buttons {justify-content: center;}

	/* Упаковки */
	.package-card.popular {transform: none;}

	/* Отзывы */
	.testimonial-card {margin-bottom: 20px;}
}

/* Стили для мелких мобильных устройств */
@media (max-width: 767px) {
	.hero-title {font-size: 1.8rem;}
	.hero-subtitle {font-size: 1.3rem;}
	.hero-buttons {flex-direction: column; gap: 10px;}
	.hero-buttons .btn {width: 100%;}

	.section-title {font-size: 1.6rem;}

	.period-switch {width: 100%;}
	.period-btn {flex: 1;}

	.control-buttons {flex-direction: column; gap: 10px;}
	.control-buttons .btn {width: 100%;}

	.product-tabs {flex-wrap: wrap;}
	.product-tab-link {padding: 8px 12px; font-size: 0.9rem;}

	.form-buttons {flex-direction: column; gap: 10px;}
	.form-buttons .btn {width: 100%;}
}

/* Дополнительные стили для CSS-класса selected в package-card */
.package-card.selected {box-shadow: 0 0 8px 0px var(--primary-color);}









.site-footer {background-color: var(--dark-color); color: var(--light-text); padding: 50px 0 20px 0; margin-top: 60px;}
.footer-heading {font-family: 'Unbounded', cursive; margin-bottom: 20px; font-weight: 500;}
.footer-text {font-family: 'Fira Sans', sans-serif; font-size: 14px; margin-bottom: 10px;}
.footer-social {display: flex; gap: 15px; margin-top: 20px;}
.social-link {color: var(--light-text); font-size: 20px; transition: color 0.3s ease;}
.social-link:hover {color: var(--accent-color);}
.footer-nav {list-style-type: none; padding-left: 0; font-family: 'Fira Sans', sans-serif; font-size: 14px;}
.footer-nav-item {margin-bottom: 10px;}
.footer-nav-link {color: var(--light-text); text-decoration: none; transition: color 0.3s ease;}
.footer-nav-link:hover {color: var(--accent-color);}
.footer-contact {font-family: 'Fira Sans', sans-serif; font-size: 14px; margin-bottom: 10px;}
.footer-icon {margin-right: 10px; color: var(--accent-color);}
.footer-form-group {display: flex; gap: 10px;}
.footer-input {flex: 1; padding: 8px 12px; border-radius: 4px; border: none; font-family: 'Fira Sans', sans-serif; font-size: 14px;}
.footer-btn {background-color: var(--accent-color); color: white; border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer; font-family: 'Fira Sans', sans-serif; font-size: 14px; transition: background-color 0.3s ease;}
.footer-btn:hover {background-color: var(--primary-color);}
.footer-divider {border-color: rgba(255, 255, 255, 0.1); margin: 10px 0 20px;}
.footer-copyright {text-align: center; font-family: 'Fira Sans', sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.7);}