.video-slider {
  	position: relative;
  	display: flex;
  	align-items: center;
  	gap: 14px;
  }

  .vs-nav {
  	width: 44px;
  	height: 44px;
  	border-radius: 14px;
  	border: 1px solid rgba(15, 23, 42, .12);
  	background: #fff;
  	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  	font-size: 28px;
  	line-height: 1;
  	cursor: pointer;
  	transition: transform .2s ease, box-shadow .2s ease;
	padding-bottom: 7px;
  }

  .vs-nav:hover {
  	transform: translateY(-2px);
  	box-shadow: 0 14px 36px rgba(0, 0, 0, .10);
  }

  .vs-track {
  	flex: 1;
  	display: flex;
  	gap: 18px;
  	overflow: auto;
  	scroll-behavior: smooth;
  	padding: 6px 4px 10px 4px;
  	scrollbar-width: none;
  }

  .vs-track::-webkit-scrollbar {
  	display: none;
  }

  .vcard {
  	min-width: 320px;
  	max-width: 320px;
  	border-radius: 24px;
  	overflow: hidden;
  	border: 1px solid rgba(15, 23, 42, .10);
  	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  	background: #fff;
  	cursor: pointer;
  	transform: translateY(0);
  	transition: transform .25s ease, box-shadow .25s ease;
  }

  .vcard:hover {
  	transform: translateY(-6px);
  	box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
  }

  .vthumb {
  	position: relative;
  	height: 200px;
  	overflow: hidden;
  }

  .vthumb img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	transform: scale(1);
  	transition: transform .6s cubic-bezier(0.2, 1, 0.3, 1);
  }

  .vcard:hover .vthumb img {
  	transform: scale(1.08);
  }

  .vplay {
  	position: absolute;
  	inset: 0;
  	display: grid;
  	place-items: center;
  	background: linear-gradient(to top, rgba(15, 23, 42, .75), rgba(15, 23, 42, .05));
  }

  .vplay .btn {
  	width: 72px;
  	height: 72px;
  	border-radius: 22px;
  	border: 1px solid rgba(255, 255, 255, .22);
  	background: rgba(255, 255, 255, .12);
  	backdrop-filter: blur(10px);
  	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
  	display: grid;
  	place-items: center;
  	transition: transform .2s ease;
  }

  .vcard:hover .vplay .btn {
  	transform: scale(1.05);
  }

  .vplay .tri {
  	width: 0;
  	height: 0;
  	border-left: 18px solid #fff;
  	border-top: 12px solid transparent;
  	border-bottom: 12px solid transparent;
  	margin-left: 4px;
  }

  .vmeta {
  	padding: 16px 16px 18px;
  }

  .vmeta h4 {
  	margin: 0 0 6px;
  	font-size: 18px;
  	font-weight: 800;
  	color: #0f172a;
  }

  .vmeta p {
  	margin: 0;
  	font-size: 14px;
  	color: rgba(15, 23, 42, .70);
  	line-height: 1.55;
  }

  .video-modal {
  	position: fixed;
  	inset: 0;
  	display: none;
  	z-index: 99999;
  }

  .video-modal.active {
  	display: block;
  }

  .video-backdrop {
  	position: absolute;
  	inset: 0;
  	background: rgba(2, 6, 23, .70);
  	backdrop-filter: blur(6px);
  	animation: fadeIn .18s ease both;
  }

  .video-dialog {
  	position: relative;
  	width: min(980px, calc(100% - 28px));
  	margin: 6vh auto 0;
  	border-radius: 22px;
  	overflow: hidden;
  	border: 1px solid rgba(255, 255, 255, .12);
  	background: rgba(255, 255, 255, .06);
  	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  	animation: pop .18s ease both;
  }

  .vm-close {
	padding-bottom: 7px;
  	position: absolute;
  	top: 10px;
  	right: 10px;
  	width: 44px;
  	height: 44px;
  	border-radius: 14px;
  	border: 1px solid rgba(255, 255, 255, .18);
  	background: rgba(0, 0, 0, .25);
  	color: #fff;
  	font-size: 26px;
  	line-height: 1;
  	cursor: pointer;
  	z-index: 2;
  }

  .vm-frame {
  	background: #000;
  }

  .vm-frame video {
  	width: 100%;
  	height: auto;
  	max-height: 70vh;
  	display: block;
  }

  @keyframes pop {
  	from {
  		transform: translateY(10px) scale(.98);
  		opacity: 0;
  	}

  	to {
  		transform: translateY(0) scale(1);
  		opacity: 1;
  	}
  }

  @keyframes fadeIn {
  	from {
  		opacity: 0;
  	}

  	to {
  		opacity: 1;
  	}
  }

.video-section{
	background: url(../images/why-choose-bg.png), var(--primary-color);
	padding: 60px 0;
}
.fm-audio-section{
	padding: 60px 0;
}
  .fm-left,
  .fm-right {
  	height: 100%;
  }

  .fm-right {
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-start;
	padding: 6px 6px 6px 2px;
  }

  @media (max-width: 1200px) {
  	.fm-track-row {
  		grid-template-columns: repeat(2, minmax(260px, 1fr));
  	}
  }

  @media (max-width: 991px) {
  	.fm-track-row {
  		grid-template-columns: 1fr;
  	}
  }

  .fm-track:hover {
  	transform: translateY(-6px);
  	box-shadow: 0 18px 46px rgba(0, 0, 0, .12);
  	border-color: rgba(15, 23, 42, .20);
	
  }

  .fm-track.active {
  	border-color: rgba(15, 23, 42, .30);
  	box-shadow: 0 22px 54px rgba(15, 23, 42, .14);
  }

  .fm-track.active::after {
  	content: "";
  	position: absolute;
  	z-index: -1;
  	inset: 0;
  	background: var(--accent-gradient);
  	opacity: 1;
  	pointer-events: none;
  }

  .fm-track.active .t1,
  .fm-track.active .t2,
  .fm-track.active .fm-track-meta .meta-item,
  .fm-track.active .fm-track-meta .meta-item span {
  	color: #fff;
  }

  .fm-track .t1 {
  	font-weight: 900;
  	color: #0f172a;
  	font-size: 18px;
  	line-height: 1.2;
  	margin-bottom: 6px;
  }

  .fm-track .t2 {
  	color: #0f172aa6;
  	font-size: 12px;
  	line-height: 1.8;
  }

  .fm-track-meta {
  	margin-top: 12px;
  	display: grid;
  	gap: 6px;
  	font-size: 12px;
  	color: rgba(15, 23, 42, .70);
  }

  .fm-track-meta .meta-item {
  	display: flex;
  	gap: 6px;
  	align-items: baseline;
  }

  .fm-track-meta .meta-item span {
  	font-weight: 800;
  	color: #0f172a;
  	min-width: 46px;
  }

  @keyframes fmPop {
  	from {
  		opacity: 0;
  		transform: translateY(10px) scale(.98);
  	}

  	to {
  		opacity: 1;
  		transform: translateY(0) scale(1);
  	}
  }

  .fm-track-meta {
  	margin-top: 10px;
  	font-size: 12px;
  	color: rgba(15, 23, 42, .70);
  	line-height: 1.6;
  }

  .fm-track-meta .meta-item {
  	margin-top: 4px;
  }

  .fm-track-meta span {
  	font-weight: 600;
  	color: #0f172a;
  	margin-right: 4px;
  }

  .fm-card {
  	display: grid;
  	grid-template-columns: 1.1fr 1.9fr;
  	gap: 18px;
  	padding: 18px;
  	border-radius: 24px;
  	border: 1px solid rgba(15, 23, 42, .10);
  	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  	background: linear-gradient(135deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .01));
  	overflow: hidden;
	align-items: stretch;
  }

  @media (max-width: 991px) {
  	.fm-card {
  		grid-template-columns: 1fr;
  	}
  }

  .fm-left {
  	border-radius: 20px;
  	padding: 18px;
  	background: radial-gradient(1200px 300px at 10% 0%, rgba(99, 102, 241, .22), transparent 55%),
  		radial-gradient(900px 300px at 80% 30%, rgba(16, 185, 129, .15), transparent 55%),
  		rgba(15, 23, 42, .94);
  	color: #fff;
  	position: relative;
  	overflow: hidden;
  }

  .fm-badge {
  	display: inline-flex;
  	align-items: center;
  	gap: 8px;
  	padding: 8px 12px;
  	border-radius: 999px;
  	background: rgba(255, 255, 255, 0.1);
  	border: 1px solid rgba(255, 255, 255, .16);
  	font-weight: 800;
  	font-size: 12px;
  	letter-spacing: .8px;
  }

  .fm-badge::before {
  	content: "";
  	width: 8px;
  	height: 8px;
  	border-radius: 50%;
  	background: var(--accent-secondary-color);
  	box-shadow: 0 0 0 6px rgba(238, 127, 0, 0.18);
  }

  .fm-station {
  	display: flex;
  	gap: 12px;
  	align-items: center;
  	margin-top: 16px;
  }

  .fm-station-logo {
  	width: 58px;
  	height: 58px;
  	border-radius: 18px;
  	display: grid;
  	place-items: center;
  	font-weight: 900;
  	font-size: 22px;
  	background: rgba(255, 255, 255, .10);
  	border: 1px solid rgba(255, 255, 255, .18);
  }

  .fm-name {
  	font-size: 18px;
  	font-weight: 900;
  }

  .fm-sub {
  	font-size: 13px;
  	opacity: .85;
  	margin-top: 2px;
  }

  .fm-wave-wrap {
  	position: relative;
  	height: 92px;
  	margin-top: 16px;
  	border-radius: 18px;
  	overflow: hidden;
  	border: 1px solid rgba(255, 255, 255, .14);
  	background: rgba(0, 0, 0, .18);
  }

  #fmWave {
  	width: 100%;
  	height: 100%;
  	display: block;
  }

  .fm-wave-glow {
  	position: absolute;
  	inset: 0;
  	background: radial-gradient(600px 140px at 20% 0%, rgba(99, 102, 241, .25), transparent 60%),
  		radial-gradient(600px 140px at 80% 100%, rgba(16, 185, 129, .18), transparent 60%);
  	pointer-events: none;
  	mix-blend-mode: screen;
  	opacity: .9;
  }

  .fm-player {
  	display: grid;
  	grid-template-columns: 56px 1fr;
  	gap: 12px;
  	align-items: center;
  	margin-top: 14px;
  }

  .fm-play {
  	width: 56px;
  	height: 56px;
  	border-radius: 18px;
  	border: 1px solid rgba(255, 255, 255, .18);
  	background: rgba(255, 255, 255, .10);
  	backdrop-filter: blur(10px);
  	color: #fff;
  	font-size: 20px;
  	cursor: pointer;
  	transition: transform .2s ease;
  }

  .fm-play:hover {
  	transform: translateY(-2px);
  }

  .fm-seek-wrap {
  	grid-column: 2 / -1;
  }

  .fm-time {
  	display: flex;
  	justify-content: space-between;
  	font-size: 12px;
  	opacity: .85;
  	margin-bottom: 6px;
  }

  .fm-range {
  	width: 100%;
  	-webkit-appearance: none;
  	appearance: none;
  	height: 10px;
  	border-radius: 999px;
  	outline: none;
  	border: 1px solid rgba(255, 255, 255, .12);
  	overflow: hidden;
  	background: rgba(255, 255, 255, .16);
  }

  .fm-range.is-gradient {
  	background: var(--accent-gradient) rgba(255, 255, 255, .16) no-repeat;
  }


  .fm-range::-webkit-slider-thumb {
  	-webkit-appearance: none;
  	appearance: none;
  	width: 18px;
  	height: 18px;
  	border-radius: 50%;
  	background: #fff;
  	box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  	border: 2px solid rgba(15, 23, 42, .35);
  	cursor: pointer;
  }

  .fm-range::-moz-range-thumb {
  	width: 18px;
  	height: 18px;
  	border-radius: 50%;
  	background: #fff;
  	border: 2px solid rgba(15, 23, 42, .35);
  	cursor: pointer;
  }

  .fm-range.progress {
  	background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)) 0/0% 100% no-repeat,
  		rgba(255, 255, 255, .18);
  }

  .fm-vol-wrap {
  	grid-column: 2 / -1;
  	display: flex;
  	align-items: center;
  	gap: 10px;
  	margin-top: 8px;
  }

  .fm-vol-ic {
  	font-size: 14px;
  	opacity: .9;
  }

  .fm-vol {
  	max-width: 240px;
  }

  .fm-vol-pct {
  	font-size: 12px;
  	opacity: .85;
  	min-width: 40px;
  	text-align: right;
  }

  .fm-track-row {
  	display: flex;
  	gap: 12px;
  	overflow: auto;
  	scroll-snap-type: x mandatory;
  	padding: 6px 2px 10px;
  	scrollbar-width: none;
	min-height: 350px;
  }

  .fm-track-row::-webkit-scrollbar {
  	display: none;
  }

  .fm-track {
  	min-width: 260px;
  	scroll-snap-align: start;
  	padding: 14px 14px;
  	border-radius: 18px;
  	border: 1px solid rgba(15, 23, 42, .10);
  	background: #fff;
  	cursor: pointer;
  	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  	position: relative;
  	overflow: hidden;
	animation: fmPop .35s ease both;
  	display: flex;
  	flex-direction: column;
  }

  .fm-meta {
  	margin-top: 12px;
  	display: flex;
  	gap: 12px;
  	flex-wrap: wrap;
  }

  .fm-meta-item {
  	padding: 10px 12px;
  	border-radius: 16px;
  	border: 1px solid rgba(15, 23, 42, .10);
  	background: #fff;
  	min-width: 170px;
  }

  .fm-meta-item .k {
  	display: block;
  	font-size: 12px;
  	color: rgba(15, 23, 42, .60);
  }

  .fm-meta-item .v {
  	display: block;
  	font-weight: 900;
  	color: #0f172a;
  	margin-top: 2px;
  }

  .gallery-actions {
  	display: flex;
  	justify-content: center;
  	margin-top: 26px;
  }

  /* .load-more-btn {
  	position: relative;
  	padding: 14px 22px;
  	border-radius: 999px;
  	border: 1px solid rgba(15, 23, 42, .12);
  	background: var(--accent-gradient);
  	color: #fff;
  	font-weight: 800;
  	letter-spacing: .2px;
  	box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  	cursor: pointer;
  	transition: transform .2s ease, box-shadow .2s ease;
  }

  .load-more-btn:hover {
  	transform: translateY(-2px);
  	box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
  } */

  .lm-dot {
  	display: inline-block;
  	width: 8px;
  	height: 8px;
  	border-radius: 50%;
  	background: #22c55e;
  	margin-left: 10px;
  	box-shadow: 0 0 0 8px rgba(34, 197, 94, .18);
  }

  @media (max-width: 991px) {
  	.fm-card {
  		grid-template-columns: 1fr;
  	}

  	.vcard {
  		min-width: 280px;
  		max-width: 280px;
  	}

  	.fm-vol {
  		width: 140px;
  	}
  }

  @media (max-width: 520px) {
  	.fm-controls {
  		flex-wrap: wrap;
  	}

  	.fm-vol {
  		width: 100%;
  	}
  }