/* General Styles */
@font-face {
  font-family: "Keep on Truckin";
  src: url(".../fonts/KeeponTruckin.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  /*font-family: "Keep on Truckin", sans-serif;*/
  font-family: duckie, sans-serif;
  font-style: normal;
  font-weight: 400;
  margin: 0;
  padding: 0;
  background-color: #1a0033;
  color: #fff;
}

a {
  text-decoration: none;
  color: inherit; 
}

h1, h2 {
  text-transform: uppercase;
  text-align: center;
}

/* Header */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: #1a0033;
  color: #ff0077; 
}

.main-header .logo {
  font-family: "Acumin Variable Concept Ultra Wide Bold", sans-serif;
  font-size: 36px;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

.nav-links li a {
  font-size: 24px;
  font-weight: bold;
  color: #ff0077; 
  /*font-family: "Keep on Truckin", sans-serif;*/
font-family: duckie, sans-serif;
font-style: normal;
font-weight: 400;
}

/* Hero Section */
.hero-section {
  margin: 0;
  padding: 0;
}

/* Hero Section Headings */
.hero-top h1 {
  font-family: "Feneon", sans-serif;
  color: #ffdd00; /* Bright yellow text */
  font-size: 45px; /* Increased font size */
  font-weight: bold;
  margin-bottom: 20px; /* Spacing below */
}

.hero-top h2 {
  font-family: "Acumin Variable Concept Ultra Wide Bold", sans-serif;
  color: #fff; /* White text */
  font-size: 60px; /* Increased font size */
  font-weight: 400;
  margin-bottom: 20px; /* Spacing below */
}

/* Navy background for the hero-top section */
.hero-top {
  text-align: center;
  padding: 50px 20px;
  background-color: #1a0033; /* Navy background */
  color: #ffdd00; /* Bright yellow text */
  font-family: "Feneon", sans-serif;
}

.hero-top img {
  width: 100%; /* Full-width image for responsiveness */
  max-width: 600px; /* Optional max width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover;
  border-radius: 8px; /* Optional for style */
  margin: 20px auto; /* Centers and adds spacing */
  display: block; /* Centers the image */
}

.hero-tagline {
  font-family: "Keep on Truckin", sans-serif;
  font-size: 34px;
  color: #ffdd00; /* Bright yellow text for visibility */
  margin-top: 20px; /* Space below the image */
}

/* Beige background for the hero-bottom section */
.hero-bottom {
  background-color: #d4c7aa; /* Beige background */
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  gap: 40px; /* Spacing between CTAs */
}

/* CTA Section */
.cta-section {
  display: flex;
  justify-content: center;
  gap: 40px; /* Increased gap for spacing */
  margin-top: 20px;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Adds space between the image and button */
}

.cta img {
  width: 300px; /* Square images */
  height: 300px; /* Square images */
  object-fit: cover;
  border-radius: 8px; /* Optional for style */
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

.cta p {
  /*font-family: "Keep on Truckin", sans-serif;*/
  font-family: duckie, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #ff0077;
}

.cta-button {
  background-color: #ff69b4;
  color: white;
  border: none;
  padding: 15px 30px; /* Larger padding for a bigger button */
  font-size: 18px; /* Slightly larger text size */
  cursor: pointer;
  border-radius: 8px; /* Matches the rounded corners of the images */
  text-align: center;
  font-family: "Keep on Truckin", sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

.cta-button:hover {
  background-color: #ff87c7; /* Slightly lighter shade for hover */
}

/* Album Section */
.album-section {
  padding: 20px;
  background-color: #121212;
  color: #fff;
  text-align: center;
}

.album-cover img {
  width: 200px;
  height: auto; /* Maintain aspect ratio */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.album-section h2 {
  font-family: "Feneon", sans-serif;
  font-size: 2.5rem;
  color: #ffcc00;
  margin-bottom: 20px;
}

/* Merch Section */

.merch-section {
  text-align: center;
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px; /* Adjust the gap as needed */
}

.merch-item {
  text-align: center;
  padding: 10px;
}

.merch-item img {
  width: 400px; /* Adjust width as needed */
  height: 350px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 5px;
}

.merch-item p {
  font-size: 14px;
  margin: 2px 0; /* Adjust margin as needed */
}



/* Footer */
footer {
  padding: 20px;
  text-align: center;
  background-color: #260047;
}

.footer-nav, .social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.footer-nav a, .social-links a {
  /*font-family: "Keep on Truckin", sans-serif;*/
  font-family: duckie, sans-serif;
  font-style: normal;
  font-weight: 400;
}




/*header {
    height:200px;
    background-color:rgb(207, 185, 156);
}
.hero {
    min-height: 500px;
    background-color: rgb(184, 97, 35);
    color: aliceblue;
}

.centred-content {
    max-width: 1200px;
    margin: auto;
}
.intro {
    background-color: rgb(233, 233, 229);
}
.single {
    background-color: rgb(184, 97, 35);
    display: flex;
}
.single img {
    width: 300px;
}
.song-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.card {
    /* display: flex; */
    /* background-color:rgb(184 97, 35);*/
/* .reversed-card {
    flex-direction: row-reverse;
}
.card img {
    width:300px;
}
.tracks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
} */