body {
  font-family: "Open Sans", sans-serif;
}

.beats h3{
	font-family: "Bitcount Prop Single", system-ui;
	  font-optical-sizing: auto;
	  font-weight: <weight>;
	  font-style: normal;
	  font-variation-settings:
		"slnt" 0,
		"CRSV" 0.5,
		"ELSH" 0,
		"ELXP" 0;
	}
	color:rgb(11, 0, 0);}

.header {
	background: #f8f9fa;
	padding: 20px 0;
}

.logo img {
	max-height: 50px;
	width: auto;
}

.nav-links a {
	margin: 0 15px;
	text-decoration: none;
	font-weight: bold;
	color: #000;
}

.nav-links a:hover {
	color: #007bff;
}

.hero {
	position: relative;
	text-align: center;
	color: white;
}

.hero {
	position: relative;
	text-align: center;
	color: white;
}

.hero img {
	width: 70%;
	height: auto;
}



.beat-card {
	background: #e9e9e9;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	transition: transform .25s ease, box-shadow .25s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.beat-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 18px 45px rgba(0,0,0,0.15);
}

.beat-img {
	width: 100%;
	height: 320px;
	object-fit: cover;
}

.beat-body {
	padding: 25px;
	text-align: center;
}

.beat-title {
	font-weight: 800;
	font-size: 1rem;
	margin-top: 18px;
	letter-spacing: 1px;
}

.beat-sub {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 0;
}

.audio {
	background: #cecece;
	margin-top: 10px;
	border-radius: 10px;
	padding:25px;
}
.skills-section {
	padding: 50px 0;
	background-color: #f9f9f9;
}

.skills-section h2 {
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 20px;
	text-align: center;
}

.skills-section p {
	font-size: 1.2rem;
	line-height: 1.8;
	margin-bottom: 20px;
}

.skills-section ul {
	font-size: 1.2rem;
	line-height: 1.8;
}

.skills-section ul li {
	margin-bottom: 10px;
}

.footer-dark {
  padding:50px 0;
  color:#f0f9ff;
  background-color:#282d32;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}


.read-more-btn {
	margin-top:15px;
  background-color: #938EEB;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  transition: 0.2s ease;
}

.read-more-btn:hover {
	margin-top:15px;
  background-color: #938EEB; /* slightly darker */
  color: #fff;
}