:root {
	--background: hsl(210 20% 98%);
	--foreground: hsl(220 20% 15%);
	--white: white;
	--primary: hsl(210 100% 41%);
	--primary-h: hsl(210 100% 41% / .9);
	--primary-foreground: hsl(0 0% 100%);
	--primary-foreground04: hsl(0 0% 100% / 0.6);
	--border02: hsl(214deg 25% 88% / 20%);
	--border: hsl(214deg 25% 88%);
	--shadow-button: 0 4px 14px -2px hsl(210 100% 41% / .4);
	--tw-ring-color: rgb(59 130 246 / .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--muted: hsl(210 15% 95%);
	--muted-foreground: hsl(215 15% 45%);
	--card: hsl(0 0% 100%);
	--radius: 12px;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
}
ul {margin: 0;padding: 0;}
a:hover, a:focus {text-decoration: none;}
button {border: none;}
body {font-family: "Inter", sans-serif;font-weight: 400;font-size: 16px;line-height: 20px;width: 100%;background-color: var(--background)}
header {background-color: var(--foreground);height: 70px;display: flex;align-items: center;border-bottom: 1px solid var(--border02);position: fixed;width: 100%;top: 0;left: 0;z-index: 5;}
header .flex-row {display: flex;justify-content: space-between;}
header .flex-row>* {width: 30%;}
.logo {display: flex;color: var(--white);align-items: center;justify-content: flex-start;font-size: 18px;font-weight: bold;gap: 15px;}
.logo div {background-color: var(--primary);width: 60px;height: 36px;border-radius: 8px;display: flex;align-items: center;justify-content: center;position: relative;}
.logo div img {width: 50px;}
header ul {display: flex;list-style: none;align-items: center;justify-content: space-around;}
header ul a {color: var(--primary-foreground)}
header ul a:hover {color: var(--primary-foreground);opacity: .9;}
header .telephone {display: flex;align-items: center;justify-content: flex-end;}
header .telephone a {font-weight: 600;color: var(--white);display: inline-flex;align-items: center;font-size: 16px;gap: 9px;}
header .telephone svg {width: 20px}
header .telephone svg path {stroke: var(--primary)}
.hero {background-color: var(--foreground);padding: 120px 0 40px;background-image: url(../image/hero-bg.jpg);background-position: 50% 80%;position: relative;z-index: 2;overflow: hidden;}
.hero:before {content: '';background-color: var(--foreground);width: 100%;display: block;height: 100%;position: absolute;top: 0;left: 0;opacity: .9;}
.hero h1 {font-size: 60px;font-weight: 600;color: var(--white);text-align: center;margin: 0 0 30px;padding: 0 15px;}
.hero h1 span {color: var(--primary)}
.hero div {display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 15px;z-index: 10;}
.hero div>p {display: flex;align-items: center;color: var(--primary-foreground);font-size: 18px;margin: 0;position: relative;padding: 0 0 0 40px;flex-wrap: wrap;}
.hero div>p b {padding: 0 5px 0 0;}
.hero div>p:before {content: '';position: absolute;left: 0;top: 0;width: 24px;height: 24px;display: block;background-image: url(../image/extra.svg);}
.btn-main {margin: 30px 0 0;background-color: var(--primary);color: var(--white);--tw-shadow: var(--shadow-button);--tw-shadow-colored: var(--shadow-button);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);display: inline-flex;height: 54px;align-items: center;justify-content: center;font-weight: 600;font-size: 18px;padding: 0 35px;border-radius: var(--radius);transition: .25s;}
.btn-main:hover {background-color: var(--primary-h);}
.list-title {margin-bottom: 40px;padding-top: 64px;}
.list-title p {font-size: 30px;color: var(--foreground);margin: 0 0 10px;line-height: 1;font-weight: 700;}
.list-title span {color: var(--muted-foreground)}
.product-thumb {border: 1px solid var(--border);border-radius: var(--radius);margin: 0 0 30px;transition: .2s;overflow: hidden;}
.product-thumb .image {position: relative;}
.product-thumb .image .label {position: absolute;left: 10px;top: 10px;z-index: 4;background-color: var(--primary);display: inline-flex;height: 28px;align-items: center;border-radius: 4px;font-size: 12px;padding: 0 18px;font-weight: 400;}
.product-thumb .image img {max-width: 100%;border-radius: var(--radius) var(--radius) 0 0;transition: .25s;width: 100%;height: 269px;object-fit: cover;}
.product-thumb .caption {padding: 20px 18px;}
.product-thumb .caption .name {margin: 0 0 12px;font-weight: 700;color: var(--foreground);font-size: 18px;height: 40px;overflow: hidden;}
.product-thumb:hover .caption .name {color: var(--primary)}
.product-thumb .caption p {font-size: 13px;font-weight: 300;display: flex;align-items: center;position: relative;gap: 4px;}
.product-thumb .caption p .separation {display: block;width: 1px;height: 14px;background-color: var(--foreground);}
.product-thumb .caption p span:last-child {display: none;}
.product-thumb .caption small {font-size: 12px;display: block;margin: 0 0 10px;font-weight:  300}
.product-thumb .caption .price {margin: 0 0 16px;padding: 0 0 16px;border-bottom: 1px solid var(--border);font-size: 20px;font-weight: 700;color: var(--primary);}
.product-thumb .caption button {width: 100%;height: 48px;font-size: 16px;margin: 0;}
.product-thumb .pagination {position: absolute;left: 0;bottom: -2px;z-index: 2;margin: 0;display: flex;align-items: center;justify-content: center;width: 100%;}
.product-thumb .pagination span {display: block;width: auto;flex-grow: 1;margin: 0;border-radius: 0;background-color: var(--border);height: 2px;box-shadow: none;}
.product-thumb .pagination span.swiper-pagination-bullet-active {background-color: var(--primary);}
.product-thumb .swiper-pager {display: none;position: absolute;z-index: 5;height: 1px;justify-content: space-between;top: 45%;}
.product-thumb:hover .swiper-pager {display: flex;}
.product-thumb .swiper-pager>div {cursor: pointer;background-color: var(--border02);width: 30px;height: 58px;position: relative;display:flex;align-items: center;justify-content: center;border-radius: 4px;}
.product-thumb .swiper-pager>div svg {width: 12px;}
.product-thumb .swiper-pager>div.button-prev svg {transform: rotate(-180deg)}
.product-thumb:hover {transition: .2s;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
.product-thumb:hover img {--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition: .25s;}
.contact {padding: 80px 0;background-color: var(--muted);color: var(--foreground);}
.contact-flex {display: flex;flex-direction: column;justify-content: center;align-items: center;}
.contact .title {margin: 0 0 40px;text-transform: uppercase;font-weight: 600;letter-spacing: 2px}
.contact .telephone {font-size: 60px;line-height: 1;display: inline-flex;color: var(--foreground);font-weight: 700;margin: 0 0 15px;justify-content: center;align-items: center;}
.contact .email {font-size: 48px;line-height: 1;display: inline-flex;color: var(--foreground);font-weight: 700;margin: 0 0 20px;}
.contact .telephone:hover, .contact .email:hover {color: var(--primary)}
.contact p {color: var(--muted-foreground);margin: 0 0 30px;}
.contact .socials {display: flex;align-items: center;justify-content: center;gap: 30px;}
.contact .socials a {display: flex;align-items: center;justify-content: center;transition: .2s;width: 48px;height: 48px;border-radius: 100px;background-color: var(--foreground);padding: 10px}
.contact .socials a:hover {background-color: var(--primary);transition: .2s}
.contact .socials a>img {max-width: 80%;}
.review-slideshow {margin: 0 0 100px;position: relative;padding: 50px 0 0;}
.review-slideshow .swiper-viewport {border-radius: var(--radius)}
.review-slideshow>.title {text-align: center;font-size: 36px;font-weight: bold;line-height: 1;margin: 0 0 40px}
.review-slide {border-radius: var(--radius);overflow: hidden;display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: 1fr;grid-column-gap: 0px;grid-row-gap: 0px;}
.review-slide .image {grid-area: 1 / 1 / 2 / 2;}
.review-slide .image img {width: 100%;height: 100%;object-fit: cover}
.review-slide .text {padding: 30px;display: flex;flex-direction: column;grid-area: 1 / 2 / 2 / 3;}
.review-slide .text .title {font-size: 24px;font-weight: 600;margin: 0 0 20px;}
.review-slide .text p {color: var(--muted-foreground);line-height: 1.3;margin: 0 0 30px;font-weight: 300;padding-right: 40px;}
.review-slide .text span {display: block;margin: 0 0 20px;font-size: 14px;font-weight: 500;}
.review-slideshow .swiper-viewport .swiper-pagination span {opacity: .5}
.review-slideshow .swiper-viewport .swiper-pagination span.swiper-pagination-bullet-active {background-color: var(--primary);opacity: 1}
.review-slideshow .swiper-pager, .vk-reviews .swiper-pager {top: 50%;height: 1px;z-index: 5;display: flex;align-items: center;justify-content: space-between;padding: 0 10px;}
.review-slideshow .swiper-pager>div, .vk-reviews .swiper-pager>div {width: 40px;height: 40px;cursor: pointer;background-color: var(--primary);border-radius: 50px;display: flex;align-items: center;justify-content: center;}
.review-slideshow .swiper-pager>div.button-prev, .vk-reviews .swiper-pager>div.button-prev {transform: rotate(180deg)}
.review-slideshow .swiper-pager>div svg, .vk-reviews .swiper-pager>div svg {width: 14px;}
.vk-reviews {margin: 0 0 100px}
.vk-reviews .swiper-viewport {background-color: transparent;}
.vk-reviews iframe {width: 100%!important}

footer {background-color: var(--foreground);padding-top: 45px}
footer>div>p {text-align: center;margin: 0 0 25px;padding-top: 25px;border-top: 1px solid var(--border02);color: var(--primary-foreground04);font-size: 14px}
footer .logo {margin: 0 0 25px}
footer .logo + p {color: var(--primary-foreground04);font-size: 14px;margin: 0 0 30px;max-width: 400px;}
footer .title {color: var(--white);margin: 0 0 15px;}
footer ul {list-style: none;margin: 0 0 30px}
footer a {color: var(--primary-foreground04);font-size: 14px;display: inline-flex;}
footer a:hover {color: var(--primary)}
footer li {display: flex;align-items: center;gap: 10px;margin: 0 0 10px;color: var(--primary-foreground04);font-size: 14px;}
footer li svg {width: 16px;stroke: var(--primary-foreground04);}
footer li svg path {stroke: var(--primary-foreground04);}


@media screen and (max-width: 991px) {
	.container {width: 100%;}
}

@media screen and (max-width: 768px) {
	header ul, header .telephone a span, .product-thumb .swiper-pager,
	.review-slideshow .swiper-pager {display: none;}
	header .telephone a svg {width: 28px}
	header .flex-row>* {width: 50%;}
	.hero h1 {font-size: 34px;}
	.list-title p {font-size: 26px;text-align: center;}
	.list-title span {text-align: center;display: block;}
	.product-thumb .caption p {font-size: 12px}
	.contact {padding: 40px}
	.contact .title {font-size: 12px;}
	.contact .telephone {font-size: 30px}
	.contact .email {font-size: 18px;}
	.contact p {font-size: 14px}
	.review-slide {grid-template-columns: 1fr;grid-template-rows: 2fr;grid-column-gap: 0px;grid-row-gap: 0px;}
	.review-slide .image {grid-area: 1 / 1 / 1 / 1;}
	.review-slide .text {grid-area: 2 / 1 / 2 / 2;padding: 25px 15px;}
	.review-slideshow>.title {font-size: 28px}
	.review-slide .text .title {font-size: 20px;}
	.review-slide .text p {padding: 0;}
	body, .hero div>p {font-size: 14px;}
	.product-thumb .image img {height: auto;}
}