* {box-sizing:border-box; margin:0; padding:0; color:#fff; font-family:'Inter', system-ui, sans-serif; outline:none}
html, body {height:100%; width:100%; overflow-x:hidden; scroll-behavior:smooth;}
body {background:#04070D}
body::-webkit-scrollbar {display:none}
header {display:flex; justify-content:center; width:100%; position:sticky; top:0; background: #04070D; z-index:10; border-bottom:1px solid rgba(255, 255, 255, 0.10)}
	header>div {display:flex; align-items:center; justify-content:space-between; height:80px; padding:16px 80px; width:100%; max-width:1440px}
		header>div>a {display:flex; align-items:center;}
		header>div>.menu {display:flex; align-items:center; gap:72px}
			header>div>.menu>a {font-size:14px; text-decoration:none; color:#D4D4D4; transition:color 0.2s}
				header>div>.menu>a:hover {color:#fff}
				header>div>.menu>a.active {color:#8B5CF6}
		header>div>.user {display:flex; align-items:center; gap:12px}
			header>div>.user>.lang {display:flex; align-items:center; gap:8px}
				header>div>.user>.lang>img {height:20px}
				header>div>.user>.lang>span {font-size:14px;}
			header>div>.user>.add-club {display:flex; font-weight:500; align-items:center; justify-content:center; text-decoration:none; width:110px; height:40px; border-radius:6px; color:#fff; border:1px solid #A78BFA; background:#8B5CF6; font-size:14px;}
			header>div>.user>.login {display:flex; font-weight:500; align-items:center; justify-content:center; text-decoration:none; width:110px; height:40px; border-radius:6px; color:#171717; border:1px solid #E5E5E5; background:#FFF; font-size:14px;}
main {display:flex; justify-content:center; width:100%}
	main>div {display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:0 80px; width:100%; max-width:1440px}
		.slide {width:100%; display:flex; padding:54px 0 40px 0; gap:30px}
			.slide>.left {height:197px; width:197px;}
				.slide>.left>img {height:100%; width:100%; object-fit:cover; border-radius:16px;}
			.slide>.center {display:flex; flex-direction:column; gap:12px}
				.slide>.center>h1 {font-size:40px; font-weight:500; line-height:48px; color:#8B5CF6}
					.slide>.center>h1>span {color:#fff; margin-left:12px}
				.slide>.center>.rating {display:flex; align-items:center; gap:4px}
					.slide>.center>.rating>img {height:20px; width:20px}
					.slide>.center>.rating>span {font-size:14px; font-weight:400; line-height:20px; color:#F59E0B}
			.slide>.right {display:flex}

		.tabs {width:100%; display:flex; gap:30px}
			.tabs>a {text-decoration:none; width:130px; display:flex; font-weight:500; font-size:18px; align-items:center; justify-content:center; padding-bottom:12px; border-bottom:2px solid transparent}
			.tabs>a.active {color:#8B5CF6; border-bottom:2px solid #8B5CF6}

		/*OVERVIEW*/
		.data-overview {display:flex; gap:40px; padding:60px 0 0 0; width:100%; background:radial-gradient(40% 200px at 50% 0%, #7ea8fc33 0%, #7ea8fc00 100%);}
			.data-overview>.left {display:flex; flex-direction:column; align-self:start; width:calc(100% - 440px)}
				.data-overview>.left>div {display:flex; flex-direction:column; gap:24px; border-radius:16px; border:1px solid #ffffff1a; padding:32px; height:100%; background:linear-gradient(180deg, #191c24f2 0.21%, #14171ff2 95.55%)}
					.data-overview>.left>div>h2 {font-size:28px; font-weight:600;}
					.data-overview>.left>div>.text {font-size:16px; font-weight:400; color:#A3A3A3}
			.data-overview>.right {display:flex; flex-direction:column; align-self:start; gap:24px; width:400px;}
				.data-overview>.right>div {display:flex; flex-direction:column; gap:20px; border-radius:8px; border:1px solid #ffffff1a; padding:24px; height:100%; background:linear-gradient(180deg, #191c24f2 0.21%, #14171ff2 95.55%)}
					.data-overview>.right>div>.top {display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid #ffffff1a}
						.data-overview>.right>div>.top>img {height:24px; width:24px;}
						.data-overview>.right>div>.top>h3 {font-size:20px; font-weight:500;}
					
						.data-overview>.right>div>.body-column {display:flex; flex-direction:column; gap:16px}
							.data-overview>.right>div>.body-column>div {display:flex; align-items:center;}
								.data-overview>.right>div>.body-column>div>.param {font-size:16px; color:#fff; font-weight:500;}
								.data-overview>.right>div>.body-column>div>.value {margin-left:auto; width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; font-size:16px; color:#A3A3A3; font-weight:400;}
						
						.data-overview>.right>div>.body-row {display:flex; flex-wrap:wrap; gap:6px}
							.data-overview>.right>div>.body-row>div {border-radius:6px; padding:6px 8px; background:#ffffff1a; line-height:20px; font-size:12px; font-weight:500; color:#A3A3A3}
							.data-overview>.right>div>.body-row>div.curr {background:#DDD6FE; color:#8B5CF6}
							.data-overview>.right>div>.body-row>span {color:#A3A3A3}
		/*REVIEWS*/
		.data-reviews {display:flex; flex-direction:column; gap:40px; padding:60px 0 116px 0; width:100%; background:radial-gradient(40% 200px at 50% 0%, #7ea8fc33 0%, #7ea8fc00 100%);}
			.data-reviews>.top {display:flex; align-items:center; gap:12px}
				.data-reviews>.top>img {height:28px; width:28px;}
				.data-reviews>.top>h3 {font-size:28px; font-weight:600; line-height:36px;}
				.data-reviews>.top>span {font-size:16px; font-weight:400; line-height:24px; color:#A3A3A3}
			.data-reviews>.mdl {display:flex; flex-direction:column; gap:24px}
				.data-reviews>.mdl>div {display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:8px; border:1px solid #ffffff1a; background:linear-gradient(180deg, #191C24 0.21%, #14171F 95.55%);}
					.data-reviews>.mdl>div>.top {display:flex; gap:16px; align-items:center;}
						.data-reviews>.mdl>div>.top>.avatar {height:48px; width:48px; border-radius:48px;}
							.data-reviews>.mdl>div>.top>.avatar>img {height:100%; width:100%; object-fit:cover; border-radius:48px;}
						.data-reviews>.mdl>div>.top>.data {display:flex; flex-direction:column; gap:2px}
							.data-reviews>.mdl>div>.top>.data>.name {font-size:16px; font-weight:500; line-height:24px; color:#fff}
							.data-reviews>.mdl>div>.top>.data>.date {font-size:16px; font-weight:400; line-height:24px; color:#A3A3A3}
						.data-reviews>.mdl>div>.top>.rating {margin-left:auto; display:flex; gap:8px}
							.data-reviews>.mdl>div>.top>.rating>img {height:24px; width:24px}
					.data-reviews>.mdl>div>.btm {color:#A3A3A3; font-size:16px; font-weight:400; line-height:24px}
					.data-reviews>.mdl>div>.likes {display:flex; align-items:center; gap:8px}
						.data-reviews>.mdl>div>.likes>img {height:24px; width:24px; cursor:pointer;}
						.data-reviews>.mdl>div>.likes>span {font-size:16px; font-weight:400; line-height:24px; color:#A3A3A3}
							.data-reviews>.mdl>div>.likes>span>span {color:#A3A3A3}
			.data-reviews>.btm {display:flex; flex-direction:column; gap:24px}
				.data-reviews>.btm>h2 {font-size:28px; font-weight:600; line-height:36px;}
				.data-reviews>.btm>.rating {display:flex; gap:20px}
					.data-reviews>.btm>.rating>div {padding:24px; width:630px; border-radius:16px; background:#14171F;}
					.data-reviews>.btm>.rating>div.all {display:flex; gap:32px}
						.data-reviews>.btm>.rating>div.all>.left {display:flex; flex-direction:column; gap:24px; flex-grow:1;}
							.data-reviews>.btm>.rating>div.all>.left>div {display:flex; align-items:center; gap:16px}
								.data-reviews>.btm>.rating>div.all>.left>div>span {font-size:20px; font-weight:500; line-height:28px; color:#D4D4D4}
								.data-reviews>.btm>.rating>div.all>.left>div>img {height:24px; width:24px}
								.data-reviews>.btm>.rating>div.all>.left>div>div {flex-grow:1; height:6px; border-radius:20px; background-color:#DDD6FE;}
									.data-reviews>.btm>.rating>div.all>.left>div>div>div {height:6px; background-color:#8B5CF6;}
						.data-reviews>.btm>.rating>div.all>.right {display:flex; flex-direction:column; margin-left:auto; align-items:center; justify-content:center; gap:12px}
							.data-reviews>.btm>.rating>div.all>.right>.rating {display:flex; align-items:center; gap:12px}
								.data-reviews>.btm>.rating>div.all>.right>.rating>img {height:28px; width:28px}
								.data-reviews>.btm>.rating>div.all>.right>.rating>span {font-size:28px; font-weight:600; line-height:36px; color:#FAFAFA}
							.data-reviews>.btm>.rating>div.all>.right>span {font-size:16px; font-weight:400; line-height:24px; color:#737373}
					.data-reviews>.btm>.rating>div.add {display:flex; flex-direction:column; gap:16px}
						.data-reviews>.btm>.rating>div.add>span {font-size:20px; font-weight:500; line-height:28px;}
						.data-reviews>.btm>.rating>div.add>div {display:flex; gap:8px}
							.data-reviews>.btm>.rating>div.add>div>img {height:32px; width:32px; cursor:pointer}
						.data-reviews>.btm>.rating>div.add>textarea {overflow:auto; -ms-overflow-style:none; scrollbar-width:none;   height:120px; resize:none; padding:24px; font-size:16px; color:#fff; font-weight:400; line-height:24px; border-radius:8px; border:1px solid #ffffff1a; background:linear-gradient(180deg, #ffffff1a 0.21%, #ffffff1a 95.55%);}
						.data-reviews>.btm>.rating>div.add>textarea::placeholder {color:#737373}
						.data-reviews>.btm>.rating>div.add>textarea::-webkit-scrollbar {display:none}
			.data-reviews>.ratingAddGo {display:flex; gap:20px}
				.data-reviews>.ratingAddGo>div {width:630px;}
					.data-reviews>.ratingAddGo>div>button {display:flex; cursor:pointer; margin-top:14px; border-radius:6px; align-items:center; justify-content:center; background:#8B5CF6; border:1px solid #A78BFA; gap:6px; width:158px; height:40px; font-size:14px; font-weight:500; line-height:20px; color:#fff}
		/*CONTACS*/
		.data-contacts {display:flex; flex-direction:column; gap:40px; padding:60px 0 116px 0; width:100%; background:radial-gradient(40% 200px at 50% 0%, #7ea8fc33 0%, #7ea8fc00 100%);}
			.data-contacts>.top {display:flex; align-items:center; gap:12px}
				.data-contacts>.top>h2 {font-size:28px; font-weight:600; line-height:36px;}
					.data-contacts>.top>h2>span {color:#8B5CF6; margin-right:12px}
			.data-contacts>.join {display:flex; align-items:center; flex-direction:column; gap:16px; padding:34px 24px 24px 24px; border-radius:8px; border:1px solid #ffffff1a; background:linear-gradient(180deg, #191c24 0.21%, #14171F 95.55%);}
				.data-contacts>.join>h2 {font-size:28px; font-weight:600; line-height:36px;}
					.data-contacts>.join>h2>span {color:#8B5CF6; margin:0 12px}
				.data-contacts>.join>span {color:#A3A3A3; text-align:center; font-size:16px; font-weight:400; line-height:24px;}
				.data-contacts>.join>button {display:flex; cursor:pointer; border-radius:6px; align-items:center; justify-content:center; background:#8B5CF6; border:1px solid #A78BFA; gap:6px; width:158px; height:40px; font-size:14px; font-weight:500; line-height:20px; color:#fff}
					.data-contacts>.join>button>img {height:20px; width:20px}
			.data-contacts>.data {display:flex; flex-direction:column; gap:30px; padding:24px; border-radius:8px; border:1px solid #ffffff1a; background:linear-gradient(180deg, #191c24 0.21%, #14171F 95.55%);}
				.data-contacts>.data>div {display:flex; flex-direction:column; gap:16px}
					.data-contacts>.data>div>.sectionText {display:flex; gap:12px; align-items:center;}
						.data-contacts>.data>div>.sectionText>img {height:28px; width:28px}
						.data-contacts>.data>div>.sectionText>span {font-size:28px; font-weight:600; line-height:36px; color:#8B5CF6;}
					.data-contacts>.data>div>span {font-size:20px; font-weight:500; line-height:28px;}
					.data-contacts>.data>div>.long {border-radius:8px; color:#A3A3A3; font-size:16px; font-weight:400; padding:24px; border:1px solid #ffffff1a; background:linear-gradient(180deg, #ffffff1a 0.21%, #ffffff1a 95.55%);}
			.data-contacts>.info {border-radius:8px; text-align:center; padding:10px 0; color:#737373; font-size:20px; font-weight:400; line-height:28px; border:1px solid #ffffff1a; background:linear-gradient(180deg, #191c24 0.21%, #14171F 95.55%);}
		/*Similar Clubs*/
		.similar-clubs {height:600px; margin-top:116px; overflow:hidden; padding:116px 0; width:100%; background:radial-gradient(40% 200px at 50% 0%, #7ea8fc33 0%, #7ea8fc00 100%);}
			.similar-clubs>h2 {font-size:40px; font-weight:500; line-height:48px; margin-bottom:40px}
			.similar-clubs>div {position:relative; height:306px; width:100%;}
				.similar-clubs>div>.other-clubs {display:flex; justify-content:center; gap:20px}
					.similar-clubs>div>.other-clubs>a {display:flex; text-decoration:none; cursor:pointer; overflow:hidden; border-radius:16px; transition:transform 0.3s ease, box-shadow 0.3s ease; flex-direction:column; position:relative; padding:20px; flex-shrink:0; height:306px; width:306px;}
					.similar-clubs>div>.other-clubs>a:hover {transform:translateY(-8px) scale(1.03); box-shadow:0 15px 25px rgba(0, 0, 0, 0.5)}
						.similar-clubs>div>.other-clubs>a>.mask {position:absolute; top:0; left:0; z-index:3; height:100%; width:100%; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 3.43%, rgba(0, 0, 0, 0.80) 99.82%)}
						.similar-clubs>div>.other-clubs>a:hover>.mask  {background:linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(4, 7, 13, 0.8) 100%)}
						.similar-clubs>div>.other-clubs>a>.logo {position:absolute; top:0; left:0; z-index:2; height:100%; width:100%}
							.similar-clubs>div>.other-clubs>a>.logo>img {height:100%; border-radius:16px; width:100%; object-fit:cover; transition:transform 0.5s ease}
							.similar-clubs>div>.other-clubs>a:hover>.logo>img {transform:scale(1.1)}
						.similar-clubs>div>.other-clubs>a>.data {margin-top:auto; z-index:4;}
							.similar-clubs>div>.other-clubs>a>.data>.top {display:flex; align-items:center; color:#FAFAFA}
								.similar-clubs>div>.other-clubs>a>.data>.top>h3 {font-size:20px; font-weight:500; line-height:28px; width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
								.similar-clubs>div>.other-clubs>a>.data>.top>div {margin-left:auto; display:flex; gap:4px; align-items:center;}
									.similar-clubs>div>.other-clubs>a>.data>.top>div>img {height:20px; width:20px; transition:transform 0.5s ease}
									.similar-clubs>div>.other-clubs>a>.data>.top>div>span {font-size:14px; font-weight:500; color:#F59E0B}
							.similar-clubs>div>.other-clubs>div>.data>.btm {}
				.similar-clubs>div>.mask-left {position:absolute; pointer-events:none; z-index:5; top:-18px; left:0; height:calc(100% + 36px); width:220px; background:linear-gradient(90deg,#000000f2 0%, #00000087 60%, #09097900 100%);}
				.similar-clubs>div>.mask-right {position:absolute; pointer-events:none; z-index:5; top:-18px; right:0; height:calc(100% + 36px); width:220px; background:linear-gradient(270deg,#000000f2 0%, #00000087 60%, #09097900 100%);}

footer {margin-top:80px; display:flex; justify-content:center; width:100%; padding-bottom:60px}
	footer>div {display:flex; padding:0 80px; gap:166px; flex-direction:column; align-items:center; justify-content:space-between; width:100%; max-width:1440px}
		footer>div>.top {display:flex; justify-content:space-between; width:100%;}
			footer>div>.top>.left {display:flex; flex-direction:column}
				footer>div>.top>.left>img {height:90px; width:304px}
				footer>div>.top>.left>span {font-size:14px; font-weight:400; color:#fff; margin:24px 0 32px 0}
				footer>div>.top>.left>.soc {display:flex; gap:24px}
					footer>div>.top>.left>.soc>a {font-size:14px; font-weight:400; color:#fff; text-decoration:none; transition:color 0.2s}
					footer>div>.top>.left>.soc>a:hover {color:#8B5CF6}
			footer>div>.top>.right {display:flex; gap:84px; padding-top:14px}
				footer>div>.top>.right>div {display:flex; flex-direction:column; gap:10px}
					footer>div>.top>.right>div>a {font-size:14px; font-weight:400; text-decoration:none; transition:color 0.2s}
					footer>div>.top>.right>div>a:hover {color:#8B5CF6}
		footer>div>.btm {display:flex; flex-direction:column; gap:32px}
			footer>div>.btm>.top {display:flex}
				footer>div>.btm>.top>.left {font-size:12px; color:#fff; font-weight:400}
				footer>div>.btm>.top>.right {display:flex; margin-left:auto; gap:32px}
					footer>div>.btm>.top>.right>a {font-size:12px; font-weight:400; color:#fff; text-decoration:none; transition:color 0.2s}
					footer>div>.btm>.top>.right>a:hover {color:#8B5CF6}
			footer>div>.btm>.btm {color:#737373; font-size:12px; font-weight:400}
				footer>div>.btm>.btm>span {color:#fff}