/*
 * Custom styles for the Beeshot landing page
 *
 * This file defines the colour palette and overrides default
 * Bootstrap classes to better match the supplied design. It also
 * introduces helper classes for overlays and icon backgrounds.
 */

/* Colour palette based on the PDF design */
:root {
  --bs-primary: #0076ba; /* main accent blue */
  --bs-secondary: #9bbdd2; /* muted grey-blue */
  --dark-blue: #0a2038; /* dark background for footer */
  --light-blue: #e9f4fc; /* light section background */
  --step-bg: #f0f7fc; /* background for step icons */
}

/* Hero Section */
.hero-section {
  background-image: url('assets/hero.png');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px dashed #ccc; /* Optional: for visualization */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

/* Dark section for Who we are */
.who-section {
  background-color: #0f2439;
  background-image: url('assets/ourproduct-bg-image.png');
  background-size: cover;
  background-position: center;
}

/* Steps Section */
.steps-section {
  background-color: var(--light-blue);
}

.step-icon {
  width: 56px;
  height: 56px;
  background-color: var(--step-bg);
  color: var(--bs-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* Launching Section */
.launch-section {
  background-image: url('assets/star_bg.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.launch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}

/* Engage Section */
.engage-section {
  background-color: var(--light-blue);
}

/* Footer */
.footer-section {
  background: radial-gradient(circle at 50% 20%, #043a57, #021825);
}

.footer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
}

/* Adjust buttons */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover {
  background-color: #005a8f;
  border-color: #005a8f;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.15);
}