/*
  Event Horizon AV Website Styling

  This stylesheet defines the visual theme for the Event Horizon AV
  website. A dark background and vibrant accent color are used to
  complement the swirling logo and emphasise the immersive nature of
  AV experiences. The layout is responsive, ensuring the site looks
  great on desktops, tablets and mobile devices.
*/

:root {
  /* Primary accent colour reflecting the rainbow swirl in the logo */
  --accent-color: #ff206e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  background-color: #0a0d14;
  line-height: 1.6;
}

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

/* Navigation */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 1000;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.logo img {
  height: 50px;
}

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

nav a {
  color: #e0e0e0;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

nav a:hover {
  color: var(--accent-color);
}

/* Hero Section */
.hero {
  position: relative;
  height: 90vh;
  background-image: url('images/stage.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(10, 13, 20, 0.6) 0%,
    rgba(10, 13, 20, 0.9) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

.hero-logo {
  width: 160px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #cccccc;
}

.btn-primary {
  display: inline-block;
  padding: 12px 30px;
  background: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: #e6005c;
}

/* Services Section */
.services {
  padding: 80px 0;
  background-color: #0f1320;
}

.services h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.services p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  color: #bbbbbb;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.service-item {
  background-color: #1a2032;
  padding: 30px 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s, background-color 0.3s;
}

.service-item:hover {
  transform: translateY(-5px);
  background-color: #222a3f;
}

.service-item i {
  font-size: 40px;
  margin-bottom: 15px;
  color: var(--accent-color);
}

.service-item h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.service-item p {
  font-size: 0.95rem;
  color: #aaaaaa;
}

/* Gallery Section */
.gallery {
  padding: 80px 0;
  background-color: #0a0d14;
}

.gallery h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.gallery p {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
  color: #bbbbbb;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.gallery-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

/* Contact Section */
.contact {
  padding: 80px 0;
  background-color: #0f1320;
}

.contact h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.contact p {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
  color: #bbbbbb;
}

.contact-info {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 15px;
  font-size: 1.1rem;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.contact-info a {
  color: var(--accent-color);
  text-decoration: none;
}

.contact-info i {
  color: var(--accent-color);
}

/* Footer */
footer {
  background-color: #0a0d14;
  text-align: center;
  padding: 20px 0;
  color: #666666;
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  nav ul {
    gap: 15px;
  }
}