@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Roboto:wght@400;500&display=swap');

	:root {
		--teal-primary: #228A8A;
		--orange-primary: #F39C12;
		--orange-light: #F5A623;
		--white: #FFFFFF;
		--gray-dark: #333333;
		--red-indicator: #FF0000;
	}

	* {
		box-sizing: border-box;
	}

	body {
		font-family: 'Roboto', sans-serif;
		margin: 0;
		padding: 0;
		background-color: var(--teal-primary);
		color: var(--gray-dark);
	}

	.container {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
	}

	header {
		margin-top: 1rem;
		top: 0;
		z-index: 1000;
	}

	.header-content {
		display: flex;
		justify-content: center;
		gap: 2rem;
		align-items: center;
		/* border: 1px solid white; */
		border-radius: 2rem;
		padding: 1rem 2rem;
	}

	.logo {
		font-family: 'Montserrat', sans-serif;
		font-weight: 900;
		font-size: 2rem;
		color: var(--teal-primary);
		text-transform: uppercase;
	}

	.logo span {
		color: var(--orange-primary);
	}

	.logo-radioh {
		width: 100%;
		max-width: 180px;
	}

	.logo-radioh img {
		width: 100%;
		height: auto;
	}

	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		gap: 1.5rem;
	}

	nav ul li a {
		text-decoration: none;
		color: white;
		font-weight: 500;
		transition: color 0.3s;
	}

	nav ul li a:hover {
		color: var(--orange-primary);
	}

	.social-nav {
		display: flex;
		gap: 12px;
		align-items: center;
	}

	.nav-icon {
		width: 24px;
		height: 24px;
		transition: opacity 0.3s;
	}

	.social-nav a:hover .nav-icon {
		opacity: 0.7;
	}

	.hero {
		/* background: linear-gradient(135deg, #1a9999 0%, #228A8A 50%, #2a7d7d 100%); */
		background-color: var(--teal-primary);
		color: var(--white);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.hero-content {
		display: flex;
		align-items: center;
		width: 100%;
		max-width: 800px;

	}

	.hero-logo {
		width: 100%;
		height: auto;
		display: block;
		margin-bottom: 0;
		filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));
	}

	.hero h1 {
		font-family: 'Montserrat', sans-serif;
		font-size: 4rem;
		font-weight: 900;
		margin: 0;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		text-transform: uppercase;
	}

	.live-player-section {
		padding: 48px 24px;
		background: linear-gradient(90deg, #f5a623 0%, #f08f22 40%, #ea6d2f 100%);
		text-align: center;
		color: var(--white);
	}

	.live-player-section .live-title {
		display: inline-flex;
		align-items: center;
		gap: 24px;
		font-family: 'Montserrat', sans-serif;
		font-size: clamp(2.25rem, 4vw + 0.5rem, 4rem);
		font-weight: 900;
		margin: 0 0 32px 0;
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}

	.live-player-section .live-text-left,
	.live-player-section .live-text-right {
		display: inline-block;
	}

	.live-player-section .live-dot {
		width: clamp(18px, 2.6vw, 28px);
		height: clamp(18px, 2.6vw, 28px);
		aspect-ratio: 1/1;
		border-radius: 50%;
		background-color: #ff0000;

	}

	iframe {
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	}

	.contact-section {
		padding: 48px 24px;
		background: linear-gradient(135deg, #167d7d 0%, #228A8A 60%, #1a6e6e 100%);
	}

	.contact-section h2 {
		text-align: center;
		font-family: 'Montserrat', sans-serif;
		font-size: 2.5rem;
		font-weight: 800;
		margin-bottom: 40px;
		color: var(--white);
		text-transform: uppercase;
	}

	.contact-form {
		max-width: 600px;
		margin: 0 auto;
	}

	.form-group {
		margin-bottom: 24px;
	}

	.form-group label {
		display: block;
		margin-bottom: 8px;
		font-weight: 500;
		color: var(--white);
	}

	.form-group input,
	.form-group textarea {
		width: 100%;
		padding: 16px 24px;
		border: none;
		border-radius: 32px;
		font-family: 'Roboto', sans-serif;
		font-size: 1rem;
		background-color: var(--white);
		color: var(--gray-dark);
	}

	.form-group input:focus,
	.form-group textarea:focus {
		outline: none;
		box-shadow: 0 0 0 3px rgba(34, 138, 138, 0.3);
	}

	.form-group textarea {
		resize: vertical;
		min-height: 120px;
		border-radius: 24px;
	}

	/* Checkbox row */
	.form-group-checkbox {
		margin-top: 8px;
	}

	.checkbox-label {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		color: var(--white);
		font-weight: 500;
	}

	.checkbox-label input[type="checkbox"] {
		appearance: none;
		width: 22px;
		height: 22px;
		border-radius: 6px;
		border: 2px solid rgba(255, 255, 255, 0.9);
		background: transparent;
		display: inline-grid;
		place-content: center;
		cursor: pointer;
	}

	.checkbox-label input[type="checkbox"]:checked {
		background: var(--white);
	}

	.checkbox-label input[type="checkbox"]:checked::after {
		content: "";
		width: 10px;
		height: 10px;
		background: var(--teal-primary);
		border-radius: 2px;
	}

	.submit-btn {
		background-color: rgba(0, 0, 0, 0.75);
		color: var(--white);
		padding: 16px 48px;
		border: none;
		border-radius: 50px;
		font-size: 1.1rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s;
		width: 100%;
		text-transform: uppercase;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
	}

	.submit-btn:hover {
		background-color: #1f1f1f;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	footer {
		background-color: #ffffff;
		color: var(--gray-dark);
		padding: 0;
	}

	.footer-top {
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		align-items: center;
		gap: 24px;
		padding: 4rem 2rem;
		padding-bottom: 7rem;
		background: url("../images/city.svg") center bottom / contain no-repeat;
		background-position: center 11rem;
		background-size: 100% auto;
	}

	.footer-logo {
		max-width: 280px;
		width: 100%;
		height: auto;
	}

	.contact-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 14px;
	}

	.contact-list li {
		display: flex;
		align-items: center;
		gap: 12px;
		font-weight: 700;
		color: #1f7f7f;
		font-size: 1.125rem;
	}

	.contact-list li img {
		width: 22px;
		height: 22px;
	}

	.contact-list a {
		color: #1f7f7f;
		text-decoration: none;
	}

	.contact-list a:hover {
		text-decoration: underline;
	}

	/* .city-divider {
	  width: 100%;
	  height: 110px;
	  background: url('../images/city.svg') center bottom / contain no-repeat;
	  background-position: center 1rem;


	} */

	.footer-bottom {
		background: linear-gradient(90deg, #f5a623 0%, #ea6d2f 100%);
		color: #fff;
		padding: 1rem;

	}

	.footer-bottom-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		padding: 10px 24px;
	}

	.hashtags {
		display: flex;
		gap: 16px;

	}

	.follow {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.follow-text {
		font-weight: 700;
	}

	.social-media {
		display: flex;
	}

	.social-media a {
		color: #fff;
		margin: 0 8px;
		text-decoration: none;
		font-weight: 700;
	}

	.social-media a:hover {
		text-decoration: underline;
	}

	/* Social icons */
	.social-media .icon {
		width: 48px;
		height: 48px;
		display: block;
	}

	.social-media a:hover .icon {
		opacity: 0.85;
	}

	.footer-info {
		text-align: center;
		padding: 12px 24px 24px;
		color: #666;
	}

	.footer-info a {
		color: inherit;
	}

	@media (max-width: 768px) {

		.hero h1 {
			font-size: 2.5rem;
		}

		.logo {
			font-size: 1.5rem;
		}

		nav ul {
			flex-direction: column;
			align-items: flex-end;
			gap: 16px;
		}

		.live-player-section,
		.contact-section {
			padding: 32px 16px;
		}

		.footer-top {
			grid-template-columns: 1fr;
			text-align: center;
		}

		.contact-list li {
			justify-content: center;
		}

		.footer-bottom-content {
			flex-direction: column;
		}

		.live-player-section .live-title,
		.contact-section h2 {
			font-size: 2rem;
		}
	}