﻿* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: Arial, Helvetica, sans-serif;
		}

		body {
			background: #fff;
			color: #253746;
		}

		.container {
			max-width: 1180px;
			margin: auto;
			padding: 0 20px;
		}

		/* ================= HERO ================= */
		.hero {
			height: 520px;
			background:
				linear-gradient(90deg,
					rgba(255, 255, 255, .95) 0%,
					rgba(255, 255, 255, .7) 35%,
					rgba(255, 255, 255, .05) 100%),
				url("https://images.unsplash.com/photo-1516026672322-bc52d61a55d5");
			background-size: cover;
			background-position: center;
			display: flex;
			align-items: center;
		}

		.hero-content {
			max-width: 560px;
			margin-left: 8%;
		}

		.hero-content span {
			color: #11785f;
			font-size: 13px;
			font-weight: 700;
		}

		.hero-content h1 {
			font-size: 65px;
			line-height: .95;
			margin: 20px 0;
			color: #09634f;
		}

		.hero-content h1 strong {
			color: #243444;
		}

		.hero-content p {
			color: #687984;
			line-height: 1.7;
			font-size: 16px;
		}

		.stats {
			display: flex;
			gap: 45px;
			margin-top: 30px;
		}

		.stats h4 {
			font-size: 18px;
		}

		.stats p {
			font-size: 14px;
		}

		/* ================= ABOUT ================= */
		.about {
			margin-top: 60px;
			display: grid;
			grid-template-columns: 1fr 320px;
			gap: 30px;
			align-items: start;
		}

		.about-main {
			min-width: 0;
		}

		.about-image img {
			width: 100%;
			height: 430px;
			object-fit: cover;
			border-radius: 22px;
		}

		.about-card {
			background: #fff;
			border-radius: 22px;
			padding: 28px 25px;
			position: sticky;
			top: 24px;
			box-shadow:
				0 10px 30px rgba(0, 0, 0, .08);
		}

		.about-card h3 {
			font-size: 18px;
			line-height: 1.4;
			margin-bottom: 22px;
			padding-bottom: 18px;
			border-bottom: 1px solid #e5eeeb;
		}

		.info {
			display: flex;
			gap: 15px;
			min-height: 48px;
			margin-bottom: 18px;
			align-items: center;
		}

		.info span {
			flex: 0 0 48px;
			width: 48px;
			height: 48px;
			border-radius: 50%;
			background: #e4f5ef;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.info span img {
			width: 25px;
			height: 25px;
			object-fit: contain;
			display: block;
		}

		.info strong {
			font-size: 15px;
		}

		.info p {
			font-size: 14px;
			color: #88959d;
			margin-top: 4px;
		}

		.about-card button {
			width: 100%;
			margin-top: 4px;
			padding: 15px;
			border: none;
			border-radius: 30px;
			background: #11785f;
			color: white;
			font-weight: bold;
			cursor: pointer;
		}

		/* ================= CONTENT ================= */
		.content {
			margin-top: 45px;
		}

		.content p {
			color: #687984;
			line-height: 1.8;
			margin-bottom: 25px;
		}

		.content h2 {
			font-size: 35px;
			margin: 35px 0 15px;
			color: #253746;
		}

		/* ================= EXPLORE ================= */
		.explore {
			margin-top: 70px;
			padding-top: 28px;
			padding-bottom: 28px;
			border-top: 1px solid #e8efec;
			border-bottom: 1px solid #e8efec;
		}

		.explore h4,
		.reviews h4 {
			text-align: center;
			color: #11785f;
			font-size: 12px;
			letter-spacing: 1.5px;
			margin-bottom: 22px;
		}

		.slider {
			position: relative;
			padding: 0 18px;
		}

		.slides-window {
			overflow: hidden;
			border-radius: 14px;
		}

		.slides {
			display: flex;
			gap: 10px;
			will-change: transform;
		}

		.slides img {
			flex: 0 0 calc((100% - 30px) / 4);
			width: calc((100% - 30px) / 4);
			height: 175px;
			object-fit: cover;
			border-radius: 12px;
			display: block;
			background: #e9f0ed;
		}

		.prev,
		.next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
			width: 38px;
			height: 38px;
			border-radius: 50%;
			border: 1px solid rgba(255, 255, 255, .8);
			background: #11785f;
			color: white;
			font-size: 24px;
			line-height: 1;
			cursor: pointer;
			box-shadow: 0 5px 15px rgba(16, 70, 57, .2);
			transition: background .2s ease, transform .2s ease;
		}

		.prev:hover,
		.next:hover {
			background: #0b604d;
			transform: translateY(-50%) scale(1.06);
		}

		.prev {
			left: 18px;
		}

		.next {
			right: 18px;
		}

		@media(max-width:1000px) {
			.about {
				grid-template-columns: 1fr;
			}

			.about-card {
				position: static;
			}

			.review-box {
				grid-template-columns: repeat(2, 1fr);
			}

			.slides img {
				flex-basis: calc((100% - 10px) / 2);
				width: calc((100% - 10px) / 2);
			}
		}

		@media(max-width:700px) {
			.hero {
				height: auto;
				padding: 80px 0;
			}

			.hero-content {
				margin-left: 20px;
				margin-right: 20px;
			}

			.hero-content h1 {
				font-size: 45px;
			}

			.stats {
				flex-direction: column;
				gap: 15px;
			}

			.about-image img {
				height: 300px;
			}

			.slides img {
				flex-basis: 100%;
				width: 100%;
				height: 210px;
			}

			.slider {
				padding: 0 8px;
			}

			.prev {
				left: 8px;
			}

			.next {
				right: 8px;
			}

			.review-box {
				grid-template-columns: 1fr;
			}
		}
